קישור והצגה חזותית של כל הנתונים ב-Looker Studio

1. מבוא

Looker Studio מאפשר לכם ליצור בחינם מרכזי בקרה אינטראקטיביים בזמן אמת עם תרשימים וטבלאות של הנתונים. אפשר לאחזר נתונים ממגוון מקורות וליצור מספר בלתי מוגבל של דוחות ב-Looker Studio, עם אפשרויות עריכה ושיתוף מלאות. צילום המסך הבא מציג דוגמה ללוח בקרה ב-Looker Studio:

2f296fddf6af7393.png

( כאן אפשר ללחוץ כדי לראות את הדוח לדוגמה הזה ב-Looker Studio)

פלאגינים של הקהילה לחיבור למקורות נתונים הם תכונה של Looker Studio שמאפשרת להשתמש ב-Apps Script כדי ליצור פלאגינים לחיבור לכל מקור נתונים שאפשר לגשת אליו באינטרנט. מחברים לקהילה נוצרים על ידי קהילת Looker Studio. כלומר, כל אחד יכול ליצור מחברי קהילה. אתם יכולים גם לשתף מחברים של הקהילה עם אנשים אחרים, כדי שהם יוכלו לגשת לנתונים שלהם מתוך Looker Studio.

אפשר להשתמש בחיבורים לקהילה בתרחישי שימוש שונים:

  • אתם מדמיינים נתונים מפלטפורמה מסחרית (למשל, רשתות חברתיות, שיווק, ניתוח נתונים וכו')
  • אתם יוצרים ויזואליזציה של נתונים ארגוניים מקומיים (למשל נתוני מכירות ממסד נתונים מקומי של MySQL)
  • אתם מספקים ללקוחות דרך להציג את הנתונים שלהם מהשירות שלכם
  • אתם יוצרים פלטפורמת דיווח בלחיצת כפתור
  • אתם יוצרים תצוגה חזותית של הנתונים שלכם ממקור אינטרנט (למשל, יצירת לוח בקרה של Google Fit)

מה תלמדו

  • איך פועל מחבר קהילתי של Looker Studio
  • איך משתמשים ב-Google Apps Script כדי ליצור מחבר לקהילה
  • איך משתמשים בחיבורים לקהילה ב-Looker Studio

הדרישות

  • גישה לאינטרנט ולדפדפן אינטרנט
  • חשבון Google
  • היכרות עם JavaScript בסיסי וממשקי API לאינטרנט

2. סקר מהיר

למה בחרת ב-Codelab הזה?

אני מתעניין בהמחשת נתונים באופן כללי. אני רוצה לקבל מידע נוסף על Looker Studio אני רוצה ליצור מחבר קהילה משלי אני מנסה לשלב את Looker Studio עם פלטפורמה אחרת. אני רוצה לקבל מידע על פתרונות של Google Cloud.

איך תשתמשו ב-codelab או במדריך הזה?

רפרוף בלבד קריאה ומילוי התרגילים

מה רמת ההיכרות שלך עם Looker Studio?

לא שמעתי על זה אף פעם אני יודע מה זה אבל אני לא משתמש בזה אני משתמש בו באופן קבוע. אני משתמש מומחה.

מה מתאר את הרקע שלך בצורה הטובה ביותר?

מפתח אנליסט עסקי / פיננסי / נתונים מדען נתונים / מהנדס נתונים מומחה לשיווק / למדיה חברתית / לניתוח נתונים דיגיטליים מעצב אחר

אפשר לעבור לדף הבא כדי לשלוח את פרטי הסקר.

3. סקירה כללית של פלאגינים לחיבור למקור נתונים

פלאגינים לחיבור למקורות נתונים חיצוניים ב-Looker Studio מאפשרים חיבור ישיר מ-Looker Studio לכל מקור נתונים שאפשר לגשת אליו באינטרנט. אתם יכולים להתחבר לפלטפורמות מסחריות, למערכי נתונים ציבוריים או לנתונים פרטיים משלכם שנמצאים בשרתים מקומיים. מחברי קהילה יכולים לאחזר נתונים באמצעות ממשקי API באינטרנט, ממשקי JDBC API, קבצים שטוחים (CSV,‏ JSON,‏ XML) ושירותי Apps Script.

b25b8d6bea6da54b.png

נניח שפרסמתם חבילה ב-npm ואתם רוצים לעקוב אחרי מספר ההורדות של החבילה לאורך זמן לפי יום. ב-codelab הזה תבנו מחבר לקהילה שמביא נתונים באמצעות npm package download counts API. לאחר מכן אפשר להשתמש ב-Community Connector ב-Looker Studio כדי ליצור לוח בקרה להצגה חזותית של מספר ההורדות.

4. תהליך עבודה של פלאגין חיבור למקור נתונים

במחבר קהילה בסיסי, מגדירים ארבע פונקציות:

  • getAuthType()
  • getConfig()
  • getSchema()
  • getData()

בהתאם לשלב הנוכחי בתהליך העבודה, Looker Studio מפעיל את פונקציות המחבר האלה ומשתמש בתשובה בשלבים הבאים. בסרטון שלמטה יש סקירה כללית של:

  • איך פועל מחבר קהילתי
  • שלבים שונים בתהליך העבודה
  • כשקוראים לפונקציות שונות
  • ממשקי משתמש שונים ב-Looker Studio
  • פעולות משתמש צפויות בשלבים שונים

אחרי שצופים בסרטון, אפשר להמשיך את ה-codelab.

אין צורך לזכור את תהליך העבודה הזה, רק כדאי להסתכל כדי להבין מה קורה במחבר. תמיד אפשר לחזור לדיאגרמה הזו.

cc6688bf38749e5.png

בשלב הבא, תתחילו ליצור את המחבר ב-Google Apps Script. תצטרכו לעבור הלוך ושוב בין ממשק המשתמש של Apps Script לבין ה-codelab הזה.

5. הגדרת פרויקט Apps Script

שלב 1: נכנסים אל Google Apps Script.

שלב 2: יוצרים פרויקט חדש של Apps Script על ידי לחיצה על + פרויקט חדש בפינה הימנית העליונה.

fb12d7318d0946cf.png

יוצג פרויקט של מעטפת עם פונקציה ריקה myFunction בקובץ Code.gs.

b245ce5eb3dd2ee2.png

שלב 3: מוחקים את הפונקציה myFunction.

שלב 4: נותנים שם לפרויקט:

  1. לוחצים על Untitled project בפינה הימנית העליונה של הדף.
  2. מזינים את שם הפרויקט.

7172aebc181c91d4.png

מתחילים לכתוב את קוד המחבר בקובץ Code.gs.

6. הגדרה של getAuthType()‎

‫Looker Studio יפעיל את הפונקציה getAuthType() כשהוא יצטרך לדעת את שיטת האימות שבה משתמשים בחיבור. הפונקציה הזו צריכה להחזיר את שיטת האימות שנדרשת למחבר כדי לאשר את השירות של הצד השלישי.

במקרה של מחבר ההורדה של npm שאתם יוצרים, אתם לא צריכים לבצע אימות בשום שירות צד שלישי, כי ה-API שבו אתם משתמשים לא דורש אימות. מעתיקים את הקוד הבא ומוסיפים אותו לקובץ Code.gs:

Code.gs

var cc = DataStudioApp.createCommunityConnector();

function getAuthType() {
  var AuthTypes = cc.AuthType;
  return cc
    .newAuthTypeResponse()
    .setAuthType(AuthTypes.NONE)
    .build();
}

כאן מציינים שהמחבר לא דורש אימות של צד שלישי (AuthTypes.NONE). כדי לראות את כל שיטות האימות הנתמכות, אפשר לעיין במסמכי העזר של AuthType().

7. הגדרה של getConfig()‎

משתמשים במחבר שלכם יצטרכו להגדיר אותו לפני שיוכלו להתחיל להשתמש בו. תגובת הפונקציה getConfig() מגדירה את אפשרויות ההגדרה שיוצגו למשתמשים. ‫Looker Studio קורא לפונקציה getConfig() כדי לקבל את פרטי ההגדרה של המחבר. על סמך התשובה שמתקבלת מ-getConfig(), ‏ Looker Studio יעבד את מסך ההגדרות של המחבר וישנה התנהגות מסוימת של המחבר.

במסך ההגדרה, אפשר לספק מידע או לקבל קלט של משתמשים באמצעות רכיבי הטופס הבאים:

TEXTINPUT

רכיב קלט

תיבת טקסט של שורה אחת.

TEXTAREA

רכיב קלט

תיבת טקסט עם כמה שורות.

SELECT_SINGLE

רכיב קלט

תפריט נפתח עם אפשרויות לבחירה יחידה.

SELECT_MULTIPLE

רכיב קלט

תפריט נפתח עם אפשרויות לבחירה מרובה.

CHECKBOX

רכיב קלט

תיבת סימון אחת שאפשר להשתמש בה כדי לתעד ערכים בוליאניים.

INFO

רכיב לרשת המדיה

תיבת טקסט סטטית שניתן להשתמש בה כדי לספק הוראות או מידע למשתמש.

משתמשים ברכיב INFO כדי לספק למשתמש הוראות, וברכיב TEXTINPUT כדי לקבל מהמשתמש את שם חבילת הקלט. בתגובה getConfig(), תקבץ את רכיבי הטופס האלה תחת המפתח configParams.

מכיוון ש-API שאליו מתחברים דורש תאריך כפרמטר, צריך להגדיר את dateRangeRequired ל-true בתגובה getConfig(). ההגדרה הזו אומרת ל-Looker Studio לספק טווחי תאריכים עם כל בקשות הנתונים. אם מקור הנתונים לא דורש תאריך כפרמטר, אפשר להשמיט את הפרמטר הזה.

מוסיפים את קוד getConfig() הבא לקובץ Code.gs, מתחת לקוד הקיים של getAuthType():

Code.gs

function getConfig(request) {
  var config = cc.getConfig();
  
  config.newInfo()
    .setId('instructions')
    .setText('Enter npm package names to fetch their download count.');
  
  config.newTextInput()
    .setId('package')
    .setName('Enter a single package name')
    .setHelpText('e.g. googleapis or lighthouse')
    .setPlaceholder('googleapis');
  
  config.setDateRangeRequired(true);
  
  return config.build();
}

בהתבסס על configParams האלה, כשמשתמשים במחבר ב-Looker Studio, אמור להופיע מסך הגדרות כמו זה שמוצג בהמשך. אבל נרחיב על כך בהמשך.

7de872f17e59e92.png

בואו נעבור לפונקציה הבאה – getSchema().

8. הגדרת getSchema()‎

‫Looker Studio קורא לפונקציה getSchema() כדי לקבל את הסכימה שמשויכת להגדרה שנבחרה על ידי המשתמש עבור המחבר. על סמך התשובה שסופקה על ידי getSchema(), למשתמש יוצג ב-Looker Studio מסך השדות עם רשימה של כל השדות במחבר.

לכל תצורה ספציפית של המחבר, הסכימה היא רשימה של כל השדות שהמחבר יכול לספק לגביהם נתונים. יכול להיות שמחבר יחזיר סכימה שונה עם שדות שונים בהתאם להגדרות שונות. הסכימה יכולה להכיל שדות שמאוחזרים ממקור ה-API, שדות שמחושבים ב-Apps Script ושדות שמחושבים ב-Looker Studio באמצעות נוסחה של שדה מחושב. המחבר מספק את המטא-נתונים לגבי כל שדה בסכימה, כולל:

  • שם השדה
  • סוג הנתונים של השדה
  • מידע סמנטי

אפשר לעיין במקורות המידע הבאים כדי לקבל מידע נוסף: getSchema() ו-Field.

בהתאם לאופן האחזור של המחבר, הסכימה יכולה להיות קבועה או מחושבת באופן דינמי כשקוראים ל-getSchema(). פרמטרים של הגדרה מ-getConfig() שהוגדרו על ידי המשתמש יסופקו בארגומנט request של הפונקציה getSchema().

ב-codelab הזה, לא צריך לגשת לארגומנט request. בקטע הבא תלמדו עוד על הארגומנט request כשכותבים קוד לפונקציה getData().

הסכימה של המחבר קבועה ומכילה את 3 השדות הבאים:

packageName

השם של חבילת npm שהמשתמש מספק

downloads

מספר ההורדות של חבילת npm

day

התאריך של מספר ההורדות

בהמשך מופיע קוד getSchema() של מחבר הנתונים. פונקציית העזר getFields() יוצרת הפשטה של יצירת השדות, כי הפונקציונליות הזו נדרשת גם על ידי getSchema() וגם על ידי getData(). מוסיפים את הקוד הבא לקובץ Code.gs:

Code.gs

function getFields(request) {
  var cc = DataStudioApp.createCommunityConnector();
  var fields = cc.getFields();
  var types = cc.FieldType;
  var aggregations = cc.AggregationType;
  
  fields.newDimension()
    .setId('packageName')
    .setType(types.TEXT);
  
  fields.newMetric()
    .setId('downloads')
    .setType(types.NUMBER)
    .setAggregation(aggregations.SUM);
  
  fields.newDimension()
    .setId('day')
    .setType(types.YEAR_MONTH_DAY);
  
  return fields;
}

function getSchema(request) {
  var fields = getFields(request).build();
  return { schema: fields };
}

בהתבסס על הסכימה הזו, אתם יכולים לצפות לראות את השדות הבאים במסך השדות של Looker Studio כשאתם משתמשים בכלי המחבר ב-Looker Studio. אבל נרחיב על כך בהמשך, כשנבדוק את המחבר.

c7cd7057b202be59.png

נעבור עכשיו לפונקציה האחרונה שלנו – getData().

9. הגדרת getData()‎: חלק 1

מערכת Looker Studio מפעילה את הפונקציה getData() בכל פעם שהיא צריכה לאחזר נתונים. על סמך התשובה שמתקבלת מ-getData(), ‏ Looker Studio יעבד ויעדכן את התרשימים בלוח הבקרה. יכול להיות שתיקרא הפונקציה getData() במהלך האירועים הבאים:

  • משתמש מוסיף תרשים ללוח הבקרה
  • משתמש עורך תרשים
  • המשתמש צופה בלוח הבקרה
  • משתמש עורך מסנן או בחירת הנתונים לדוח שמשויך
  • נדרשת דגימה של נתונים ב-Looker Studio

אין צורך להעתיק קוד מהדף הזה, כי תעתיקו את הקוד המלא

getData()

קוד בשלב מאוחר יותר.

הסבר על אובייקט request

‫Looker Studio מעביר את האובייקט request עם כל קריאה ל-getData(). בהמשך מפורט המבנה של אובייקט request. כך תוכלו לכתוב את הקוד לפונקציה getData().

מבנה האובייקט request

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}
  • האובייקט configParams יכיל ערכי הגדרה לפרמטרים שמוגדרים ב- getConfig() ומוגדרים על ידי המשתמש.
  • האובייקט scriptParams יכיל מידע שרלוונטי להרצת המחבר. לא צריך להשתמש בזה ב-codelab הזה.
  • השדה dateRange יכיל את טווח התאריכים המבוקש אם הוא נכלל בתגובה getConfig().
  • fields יכיל את רשימת השמות של השדות שלגביהם מתבקשים נתונים.

בדוגמה הבאה אפשר לראות איך פלט של פונקציית getData() עבור מחבר יכול להיראות:request

{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    startDate: '2017-07-16',
    endDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}

בgetData()השיחה request שלמעלה, רק שני שדות מבוקשים למרות שבסכימת המחבר יש שדות נוספים. בדף הבא מופיעה דוגמה לתגובה של getData() ודוגמה למבנה הכללי של getData().

10. הגדרת getData()‎ : חלק 2

בתגובה getData(), תצטרכו לספק גם סכימה וגם נתונים לשדות המבוקשים. תחלקו את הקוד לשלושה קטעים:

  • יוצרים סכימה לשדות המבוקשים.
  • אחזור וניתוח של נתונים מ-API.
  • התאמת נתונים מנותחים וסינון של השדות המבוקשים.

אין צורך להעתיק קוד מהדף הזה, כי תעתיקו את הקוד המלא

getData()

קוד בדף הבא.

זה המבנה של getData()בשביל המחבר.

function getData(request) {

  // TODO: Create schema for requested fields.
  
  // TODO: Fetch and parse data from API.
  
  // TODO: Transform parsed data and filter for requested fields.

  return {
    schema: <filtered schema>,
    rows: <transformed and filtered data>
  };
}

יצירת סכימה לשדות המבוקשים

// Create schema for requested fields
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

אחזור וניתוח נתונים מ-API

כתובת ה-URL של npm API תהיה בפורמט הבא:

https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}

יוצרים את כתובת ה-URL של ה-API באמצעות הערכים request.dateRange.startDate, request.dateRange.endDate ו-request.configParams.package שסופקו על ידי Looker Studio. לאחר מכן מאחזרים את הנתונים מה-API באמצעות UrlFetchApp(Apps Script Class: reference). לאחר מכן מנתחים את התשובה שהתקבלה.

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;

התאמת נתונים מנותחים וסינון לפי השדות המבוקשים

התשובה מ-npm API תהיה בפורמט הבא:

{
  downloads: [
    {
    day: '2014-02-27',
    downloads: 1904088
    },
    ..
    {
    day: '2014-03-04',
    downloads: 7904294
    }
  ],
  start: '2014-02-25',
  end: '2014-03-04',
  package: 'somepackage'
}

תשנה את התשובה מ-npm API ותספק את התשובה getData() בפורמט הבא. אם הפורמט הזה לא ברור, אפשר לעיין בדוגמה לתשובה בפסקה הבאה.

{
  schema: [
    {
      object(Field)
    }
  ],
  rows: [
    {
      values: [string]
    }
  ]
}

בתשובה, מחזירים את הסכימה רק עבור השדות המבוקשים באמצעות המאפיין schema. הנתונים יוחזרו באמצעות מאפיין rows כרשימה של שורות. בכל שורה, רצף השדות ב-values צריך להיות זהה לרצף השדות ב-schema. על סמך הדוגמה הקודמת של request, התגובה ל-getData() תיראה כך:

{
  schema: requestedFields.build(),
  rows: [
    {
      values: [ 38949, '20170716']
    },
    {
      values: [ 165314, '20170717']
    },
    {
      values: [ 180124, '20170718']
    },
  ]
}

כבר יצרתם את קבוצת המשנה של הסכימה. משתמשים בפונקציה הבאה כדי לשנות את הנתונים שנותחו ולסנן אותם כדי להציג רק את השדות המבוקשים.

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

11. הגדרה של getData()‎ : חלק 3

הקוד המשולב של getData() ייראה כמו הקוד שבהמשך. מוסיפים את הקוד הבא לקובץ Code.gs:

Code.gs

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

function getData(request) {
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;
  var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);

  return {
    schema: requestedFields.build(),
    rows: rows
  };
}

סיימתם עם הקובץ Code.gs! לאחר מכן, מעדכנים את המניפסט.

12. עדכון המניפסט

בעורך Apps Script, בוחרים באפשרות Project Settings > Show "appsscript.json" manifest file in editor (הגדרות הפרויקט > הצגת קובץ המניפסט 'appsscript.json' בעורך).

90a68a58bbbb63c4.png

פעולה זו תיצור קובץ מניפסט חדש appsscript.json.

1081c738d5d577a6.png

מחליפים את קובץ appscript.json בתוכן הבא:

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",

  "dataStudio": {
    "name": "npm Downloads - From Codelab",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
    "company": "Codelab user",
    "companyUrl": "https://developers.google.com/looker-studio/",
    "addonUrl": "https://github.com/googledatastudio/example-connectors/tree/master/npm-downloads",
    "supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}

שומרים את פרויקט Apps Script.

5701ece1c89415c.png

מעולה! יצרתם את פלאגין חיבור למקור נתונים הראשון שלכם והוא מוכן לבדיקה.

13. בדיקת המחבר ב-Looker Studio

שימוש בפריסה

שלב 1: בסביבת הפיתוח של Apps Script, לוחצים על פריסה > בדיקת פריסות כדי לפתוח את תיבת הדו-שיח 'בדיקת פריסות'.

3f57ea0feceb2596.png

פריסת ברירת המחדל, Head Deployment, תופיע ברשימה.

שלב 2: לוחצים על העתקה כדי להעתיק את מזהה הפריסה של תג Head.

שלב 3: כדי לטעון את המחבר ב-Looker Studio, מחליפים את ה-placeholder ‏<HEAD_DEPLOYMENT_ID> בקישור הבא במזהה הפריסה של הגרסה העדכנית של המחבר, ולוחצים על הקישור בדפדפן:

https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>

אישור המחבר

משתמשים חדשים ב-Looker Studio: אם זו הפעם הראשונה שאתם משתמשים ב-Looker Studio, תתבקשו לאשר את השימוש ב-Looker Studio ולהסכים לתנאים ולהגבלות. משלימים את תהליך ההרשאה. בפעם הראשונה שמשתמשים ב-Looker Studio, יכול להיות שתוצג תיבת דו-שיח לעדכון ההעדפות השיווקיות. אם אתם רוצים לקבל באימייל עדכונים, תכונות חדשות ומידע חדש לגבי מוצרים, אתם יכולים להירשם להודעות על מוצרים.

אחרי הטעינה, תוצג בקשה לאשר את המחבר.

d7e66726a1e64c05.png

לוחצים על 'הרשאה' ומספקים את ההרשאה הנדרשת למחבר.

הגדרת המחבר

אחרי שתסיימו את תהליך ההרשאה, יוצג מסך ההגדרה. מקלידים lighthouse באזור להזנת טקסט ולוחצים על Connect (חיבור) בפינה השמאלית העליונה.

ec7416d6dbeabc8f.png

אישור הסכימה

יופיע מסך השדות. בפינה השמאלית העליונה, לוחצים על יצירת דוח.

4a9084bd51d2fbb8.png

יצירת מרכז השליטה שלך

תועברו לסביבת לוח הבקרה של Looker Studio. לוחצים על הוספה לדוח.

1ca21e327308237c.png

ב-Looker Studio, בכל פעם שמשתמש ניגש למחבר ומוסיף הגדרה חדשה, נוצר מקור נתונים חדש בחשבון Looker Studio של המשתמש. אפשר לחשוב על מקור נתונים כעל מופע של המחבר שמבוסס על הגדרה ספציפית. על סמך המחבר וההגדרה שהמשתמש בחר, מקור נתונים יחזיר טבלת נתונים עם קבוצה ספציפית של שדות. משתמשים יכולים ליצור כמה מקורות נתונים מאותו מחבר. אפשר להשתמש במקור נתונים בכמה דוחות, ובאותו דוח אפשר להשתמש בכמה מקורות נתונים.

עכשיו מוסיפים תרשים של סדרות זמנים. בתפריט, לוחצים על הוספה > סדרת זמן. אחר כך מציבים את סדרת הזמן באזור העריכה. אמור להופיע תרשים של סדרת זמנים של מספר ההורדות של חבילת npm שנבחרה. מוסיפים אמצעי בקרה לסינון לפי תאריך ומציגים את לוח הבקרה כמו שמוצג בהמשך.

4c076e07665f57aa.gif

זהו! יצרתם את פלאגין חיבור למקור נתונים הראשון שלכם! כאן מסתיים ה-Codelab הזה. עכשיו נבדוק מה השלבים הבאים שתוכלו לבצע.

14. השלבים הבאים

שיפור המחבר שיצרתם

לשפר את המחבר שיצרתם:

  • ב-Looker Studio, אם לא תציינו שם חבילה במסך ההגדרות של כלי החיבור, תוצג הודעת שגיאה כשתציירו את תרשים של סדרת זמנים. נסו להוסיף אימות קלט או אפשרות ברירת מחדל להגדרת המחבר.
  • אפשר לנסות להוסיף תמיכה בשאילתות של כמה שמות חבילות בו-זמנית בהגדרת המחבר. הערה: npm package download counts API תומך בהזנת שמות של כמה חבילות שמופרדים באמצעות פסיק.
  • אפשר למצוא פתרונות לשתי הבעיות האלה בקוד של מחבר npm.

עוד פעולות שאפשר לבצע באמצעות מחברים לקהילה

מקורות מידע נוספים

בהמשך מפורטים מקורות מידע שונים שיעזרו לכם להעמיק בחומר שמופיע ב-codelab הזה.

סוג משאב

תכונות למשתמשים

תכונות למפתחים

מסמכי תיעוד

מרכז העזרה

מאמרי עזרה למפתחים

חדשות ועדכונים

נרשמים בLooker Studio > הגדרות משתמש

רשימת תפוצה למפתחים

שאלת שאלות

פורום משתמשים

Stack Overflow [looker-studio]

סרטונים

DataVis DevTalk

דוגמאות

מאגר קוד פתוח