איך להטמיע את Looker עם Embed SDK

1. לפני שמתחילים

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

דרישות מוקדמות

  • יש לכם מופע פעיל של Looker
  • יש לכם לוח בקרה של Looker שאתם רוצים להטמיע באפליקציית אינטרנט או בדף אינטרנט
  • להכיר את JavaScript ואת ההבטחות של JavaScript.

מה תלמדו

  • איך מטמיעים באופן פרטי את התוכן שלכם ב-Looker באמצעות Embed SDK
  • איך שולחים ומקבלים הודעות (פעולות ואירועים) באמצעות תוכן Looker מוטמע עם Embed SDK

מה תצטרכו

  • גישה לקוד ה-HTML ול-JavaScript של ממשק הקצה
  • גישה להגדרות ההטמעה של האדמין במופע Looker

2. הכנות

כדי להטמיע באמצעות Embed SDK, צריך להכין את ה-HTML ואת מופע Looker.

הוספת רכיב מאגר של iframe להטמעה

בתוך קוד ה-HTML של דף האינטרנט, יוצרים רכיב div ומגדירים בו מאפיין id.

<div id="looker-embed" />

הוספת הדומיין של ההטמעה לרשימת ההיתרים במופע Looker

צריך להוסיף את הדומיין של ההטמעה לרשימת ההיתרים במכונה של Looker.

קובעים את הדומיין של דף האינטרנט שמארח את התוכן המוטמע של Looker. נניח שכתובת ה-URL של דף האינטרנט היא https://mywebsite.com/with/embed, אז הדומיין של דף האינטרנט הוא https://mywebsite.com.

עוברים לדף Embed בקטע Admin במופע Looker. https://your_instance.looker.com/admin/embed

בשדה רשימת ההיתרים של דומיינים להטמעה, מזינים את הדומיין של ההטמעה. אחרי שמקלידים את הדומיין, מקישים על המקש Tab כדי שהדומיין יופיע בתיבה. אין להוסיף קו נטוי בסוף /.

לוחצים על הלחצן עדכון.

3. יצירת ההטמעה

עכשיו ניצור את כלי ההטמעה של ה-SDK ונגדיר אותו כדי להטמיע את התוכן שלכם ב-Looker.

אתחול ה-SDK

קודם מייבאים את ה-SDK ואז מאתחלים אותו באמצעות הדומיין של מופע Looker.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

יצירת כלי ההטמעה

בשלב הבא, קובעים את המזהה של לוח הבקרה של Looker שרוצים להטמיע. אם כתובת מרכז הבקרה היא instance_name.looker.com/dashboard/12345, אז מזהה מרכז הבקרה הוא 12345.

מבצעים קריאה לשיטת createDashboardWithId() של ה-SDK עם מזהה מרכז הבקרה כדי ליצור כלי להטמעה. השיטה הזו תחזיר את כלי ההטמעה.

LookerEmbedSDK.createDashboardWithId(12345)

הגדרה ו-build של הכלי ליצירת הטמעה

עכשיו נגדיר את כלי ההטמעה לפני שנורה לו ליצור את ה-iframe המוטמע. מוסיפים את דוגמת הקוד הבאה ישירות אחרי הפעלת ה-method createDashboardWithId() של דוגמת הקוד הקודמת.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

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

  1. השיטה appendTo() קובעת את רכיב ההורה של ה-iframe. מעבירים את המזהה של רכיב ה-HTML שהגדרנו קודם בשלב ההכנה.
  2. השיטה withFrameBorder() מגדירה את מאפיין הגבול של ה-iframe. זו אחת מכמה שיטות להגדרת מאפייני HTML ב-iframe.
  3. השיטה build() יוצרת את ה-iframe עם מאפייני ה-HTML שהוגדרו

בדיקה סופית

אחרי השלבים הקודמים, הקוד אמור להיראות כך:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

עכשיו מרכז הבקרה של Looker מוטמע בדף האינטרנט באמצעות Embed SDK.

4. שליחה וקבלה של הודעות מוטמעות

עכשיו נראה איך שולחים ומקבלים הודעות עם תוכן Looker מוטמע באמצעות Embed SDK. להודעות שהאפליקציה שולחת ל-iframe אנחנו קוראים פעולות, ולהודעות שהאפליקציה מקבלת מה-iframe אנחנו קוראים אירועים.

קבלת אירועים

נשתמש בקוד הקודם שלנו. כדי להאזין לאירועים, אנחנו קוראים לשיטה on()‎ של כלי ההטמעה לפני שאנחנו קוראים לשיטה build().

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

כאן אנחנו קוראים לשיטה on() כדי להגדיר event listener באירוע dashboard:run:complete שמגיע מה-iframe כשה-iframe נוצר. האירוע יציין מתי הטעינה של מרכז הבקרה הסתיימה. כדאי לעיין בהפניה לאירועים כדי לראות אילו אירועים נוספים אפשר להאזין להם.

שליחת פעולות

נמשיך עם הקוד הקודם. כדי לשלוח פעולות ל-iframe, קוראים לשיטה connect() של כלי ההטמעה אחרי שקוראים לשיטה build() כדי לאתחל שליחה וקבלה של הודעות באמצעות ה-iframe.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

הנה דוגמת קוד:

  1. אנחנו קוראים לשיטה connect() שמחזירה הבטחה. אובייקט ה-promise נפתר לאובייקט הטמעה שמייצג את ה-iframe המוטמע אחרי שמנגנון העברת ההודעות והקבלה שלהן מאותחל.
  2. אנחנו קוראים לשיטה send() באובייקט ההטמעה כדי לשלוח פעולה dashboard:run. כדאי לעיין בהפניה לפעולות כדי לראות אילו פעולות נוספות אפשר לשלוח.
  3. אנחנו מוסיפים שיטת catch() למקרה שיהיו שגיאות במהלך האתחול.

בדיקה סופית

אחרי השלבים הקודמים, הקוד אמור להיראות כך:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

עכשיו אפשר לתקשר עם מרכז הבקרה המוטמע של Looker.

5. מידע נוסף

מעולה! עכשיו אפשר להשתמש ב-Embed SDK כדי להטמיע באופן פרטי את לוח הבקרה של Looker, ולשלוח ולקבל הודעות מ-iframe. מידע נוסף זמין במקורות המידע הבאים: