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

1. قبل از شروع

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

پیش نیازها

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

چیزی که یاد خواهید گرفت

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

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

2. آماده سازی

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

عنصر ظرف iframe embed را اضافه کنید

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

<div id="looker-embed" />

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

باید دامنه جاسازی را در نمونه Looker خود در لیست مجاز قرار دهید.

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

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

در قسمت Embedded Domain Allowlist ، دامنه جاسازی را وارد کنید. پس از تایپ آن، کلید Tab را بزنید تا دامنه در یک کادر ظاهر شود. اسلش انتهایی / اضافه نشود.

دکمه Update را انتخاب کنید.

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

اکنون بیایید سازنده جاسازی SDK را ایجاد و پیکربندی کنیم تا محتوای Looker تعبیه شده شما را "بسازید".

SDK را راه اندازی کنید

ابتدا SDK را وارد کنید و سپس با دامنه نمونه Looker خود مقداردهی اولیه کنید.

// Import the Embed SDK as LookerEmbedSDK

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

embed builder را ایجاد کنید

سپس، شناسه داشبورد Looker را که می‌خواهید جاسازی کنید، تعیین کنید. اگر داشبورد شما در instance_name.looker.com/dashboard/12345 است، پس شناسه داشبورد شما 12345 است.

متد SDK createDashboardWithId() را با شناسه داشبورد فراخوانی کنید تا یک سازنده جاسازی ایجاد کنید. این روش سازنده embed را برمی گرداند.

LookerEmbedSDK.createDashboardWithId(12345)

embed builder را پیکربندی و بسازید

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

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

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

  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 دریافت می کند رویداد می نامیم.

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

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

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

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

اقدامات را ارسال کنید

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

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

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

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