1. قبل از شروع
در این لبه کد، از Looker Embed SDK برای جاسازی یک داشبورد Looker در صفحه وب شما استفاده خواهیم کرد. شما یک سری از روشهای SDK را فراخوانی میکنید که به طور خودکار یک iframe ایجاد میکنند، محتوای Looker شما را در آن جاسازی میکنند، و ارتباطات بین iframe و صفحه وب شما را تنظیم میکنند.
پیش نیازها
- یک نمونه Looker در حال اجرا داشته باشید
- یک داشبورد Looker داشته باشید که می خواهید در برنامه وب یا صفحه وب خود جاسازی کنید
- با جاوا اسکریپت و وعده های جاوا اسکریپت آشنا باشید.
چیزی که یاد خواهید گرفت
- چگونه به صورت خصوصی محتوای Looker خود را با Embed SDK جاسازی کنید
- نحوه ارسال و دریافت پیام ( عملکردها و رویدادها ) با محتوای Looker جاسازی شده با Embed SDK
آنچه شما نیاز دارید
- به 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 را برمی گرداند، بنابراین فراخوانی متد را با هم زنجیره می کنیم. بیایید هر روش را مرور کنیم:
- متد
appendTo()
عنصر والد iframe را تعیین می کند. شناسه عنصر HTML را که قبلاً در مرحله آماده سازی تعریف کردیم، ارسال می کنیم. - متد
withFrameBorder()
خصیصه frame-border را در iframe تنظیم می کند. این یکی از چندین روشی است که ویژگی های HTML را در iframe تعریف می کند. - متد
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!')
...
بیایید این نمونه کد را مرور کنیم:
- ما متد
connect()
فراخوانی می کنیم که یک وعده را برمی گرداند. پس از راه اندازی مکانیزم ارسال و دریافت پیام، این وعده به یک شی جاسازی که نشان دهنده iframe تعبیه شده است، حل می شود. - برای ارسال اکشن
dashboard:run
متدsend()
روی شی embed فراخوانی می کنیم. برای ارسال سایر اقدامات ، مرجع اقدامات را بررسی کنید. - ما یک متد
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 استفاده کنید. برای اطلاعات بیشتر این منابع را بررسی کنید:
- برای اطلاعات بیشتر در مورد نحوه جاسازی Looker ، مخزن SDK را جاسازی کنید ، به خصوص اگر میخواهید SSO محتوای Looker را جاسازی کنید .
- مرجع رویدادها برای همه رویدادهای موجود و ویژگی های آنها
- مرجع اقدامات برای همه اقدامات موجود و ویژگی های آنها
- بهترین شیوه های امنیتی در مورد جاسازی محتوای Looker شما