چگونه Looker را با Embed SDK جاسازی کنیم

۱. قبل از شروع

در این آزمایشگاه کد، ما از Looker Embed SDK برای جاسازی یک داشبورد Looker در صفحه وب شما استفاده خواهیم کرد. شما مجموعه‌ای از متدهای SDK را فراخوانی خواهید کرد که به طور خودکار یک iframe ایجاد می‌کنند، محتوای Looker شما را در آن جاسازی می‌کنند و ارتباطات بین iframe و صفحه وب شما را برقرار می‌کنند.

پیش‌نیازها

  • یک نمونه Looker در حال اجرا داشته باشید
  • یک داشبورد Looker دارید که می‌خواهید در برنامه وب یا صفحه وب خود جاسازی کنید
  • با جاوا اسکریپت و وعده‌های جاوا اسکریپت آشنا باشید.

آنچه یاد خواهید گرفت

  • چگونه محتوای Looker خود را با Embed SDK به صورت خصوصی جاسازی کنیم
  • نحوه ارسال و دریافت پیام‌ها ( اعمال و رویدادها ) با محتوای Looker تعبیه‌شده با Embed SDK

آنچه نیاز دارید

  • دسترسی به کدهای HTML و جاوا اسکریپت فرانت‌اند شما
  • دسترسی به تنظیمات جاسازی ادمین در نمونه Looker شما

۲. آماده‌سازی‌ها

قبل از اینکه بتوانید با Embed SDK جاسازی کنید، باید نمونه HTML و Looker خود را آماده کنید.

عنصر کانتینر iframe مربوط به embed را اضافه کنید

در داخل HTML صفحه وب خود، یک عنصر div ایجاد کنید و یک ویژگی id برای آن تعریف کنید.

<div id="looker-embed" />

دامنه جاسازی را در نمونه Looker فهرست کنید.

شما باید دامنه‌ی جاسازی را در نمونه‌ی Looker خود به صورت مجاز فهرست کنید.

دامنه صفحه وب میزبان محتوای Looker جاسازی‌شده خود را تعیین کنید. فرض کنید آدرس اینترنتی صفحه وب https://mywebsite.com/with/embed باشد، آنگاه دامنه صفحه وب https://mywebsite.com خواهد بود.

به صفحه Embed در بخش مدیریت نمونه Looker خود بروید. https://your_instance.looker.com/admin/embed

در فیلد فهرست مجاز دامنه‌های جاسازی‌شده ، دامنه‌ی جاسازی‌شده را وارد کنید. پس از تایپ آن، کلید Tab را فشار دهید تا دامنه در یک کادر ظاهر شود. علامت اسلش / را در انتهای آن قرار ندهید.

دکمه به‌روزرسانی را انتخاب کنید.

۳. جاسازی را بسازید

حالا بیایید سازنده‌ی جاسازی 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)

پیکربندی و ساخت سازنده‌ی جاسازی

حالا، بیایید قبل از اینکه به سازنده‌ی جاسازی بگوییم iframe جاسازی شده را بسازد، آن را پیکربندی کنیم. نمونه کد زیر را مستقیماً پس از فراخوانی متد createDashboardWithId() در نمونه کد قبلی اضافه کنید.

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

هر متد سازنده‌ی جاسازی، خود سازنده‌ی جاسازی را برمی‌گرداند، بنابراین فراخوانی‌های متد را به صورت زنجیره‌ای به هم متصل می‌کنیم. بیایید هر متد را بررسی کنیم:

  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 درون صفحه وب شما تعبیه شده است!

۴. ارسال و دریافت پیام‌های جاسازی‌شده

حالا بیایید نگاهی به نحوه ارسال و دریافت پیام‌ها با محتوای Looker جاسازی‌شده خود با Embed SDK بیندازیم. ما پیام‌هایی را که برنامه شما به iframe ارسال می‌کند، action می‌نامیم و پیام‌هایی را که برنامه شما از iframe دریافت می‌کند، event می‌نامیم.

دریافت رویدادها

بیایید با کد قبلی خود کار کنیم. برای گوش دادن به رویدادها، قبل از فراخوانی متد build() متد on() از سازنده‌ی embed را فراخوانی می‌کنیم.

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

در اینجا ما متد on() را برای تنظیم یک شنونده رویداد روی dashboard:run:complete که از iframe هنگام ساخته شدن iframe می‌آید، فراخوانی می‌کنیم. این رویداد به ما می‌گوید که داشبورد چه زمانی بارگذاری خود را به پایان می‌رساند. برای اطلاع از سایر رویدادها، به مرجع رویداد مراجعه کنید.

ارسال اقدامات

بیایید با کد قبلی خود ادامه دهیم. برای ارسال اکشن‌ها به iframe، پس از فراخوانی متد build() برای مقداردهی اولیه ارسال و دریافت پیام با iframe، متد connect() از سازنده embed را فراخوانی می‌کنیم.

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

بیایید این نمونه کد را بررسی کنیم:

  1. ما متد connect() را فراخوانی می‌کنیم که یک promise را برمی‌گرداند. promise پس از مقداردهی اولیه مکانیزم ارسال و دریافت پیام، به یک شیء embed تبدیل می‌شود که نشان‌دهنده iframe تعبیه‌شده است.
  2. ما متد send() را روی شیء embed فراخوانی می‌کنیم تا یک اکشن dashboard:run ارسال کنیم. برای مشاهده‌ی اکشن‌های دیگر برای ارسال، به مرجع actions مراجعه کنید.
  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 تعبیه‌شده خود ارتباط برقرار کنید!

۵. اطلاعات تکمیلی

تبریک! اکنون می‌توانید از Embed SDK برای جاسازی خصوصی داشبورد Looker خود و ارسال و دریافت پیام از iframe استفاده کنید. برای اطلاعات بیشتر به این منابع مراجعه کنید: