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

עכשיו ניצור ונגדיר את ה-builder של ה-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.

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

LookerEmbedSDK.createDashboardWithId(12345)

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

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

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

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

  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 קוראים כאירועים.

קבלת אירועים

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

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

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

פעולות שליחה

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