איך להטמיע את 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. הכנות

עליכם להכין את המכונה של ה-HTML ושל Looker לפני שתוכלו להטמיע באמצעות Embed SDK.

הוספת רכיב הקונטיינר של ה-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 של ה-embed builder כדי "ליצור" את תוכן Looker המוטמע.

הפעלת ה-SDK

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

// Import the Embed SDK as LookerEmbedSDK

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

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

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

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

LookerEmbedSDK.createDashboardWithId(12345)

הגדרה ופיתוח של ה-builder להטמעה

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

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

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

  1. השיטה appendTo() קובעת את רכיב ההורה של ה-iframe. אנחנו מעבירים את המזהה של רכיב ה-HTML שהגדרנו קודם בשלב ההכנה.
  2. השיטה withFrameBorder() מגדירה את המאפיין frame-border ב-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() של ה-builder להטמעה לפני שאנחנו קוראים לשיטה build().

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

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

שליחת פעולות

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

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

בואו נראה את דוגמת הקוד הבאה:

  1. אנחנו מכנים את השיטה connect() שמחזירה הבטחה. ההבטחה מובילה לאובייקט מוטמע שמייצג את ה-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. לקבלת מידע נוסף, אפשר לעיין במקורות המידע הבאים: