كيفية تضمين Looker مع تضمين حزمة تطوير البرامج (SDK)

1. قبل البدء

في هذا الدرس التطبيقي حول الترميز، سنستخدم حزمة تطوير البرامج لتضمين Looker لتضمين لوحة بيانات Looker في صفحتك على الويب. ستستدعي سلسلة من طرق حزمة تطوير البرامج (SDK) التي ستعمل تلقائيًا على إنشاء إطار iframe، وتضمين محتوى Looker فيه، وإعداد الاتصالات بين إطار iframe وصفحة الويب.

المتطلبات الأساسية

  • امتلاك نسخة Looker قيد التشغيل
  • توفُّر لوحة بيانات Looker تريد تضمينها في تطبيق الويب أو صفحة الويب
  • الإلمام بخدمة JavaScript وJavaScript

المعلومات التي ستطّلع عليها

  • كيفية تضمين محتوى Looker بشكل خاص باستخدام حزمة تطوير البرامج (SDK) المضمّنة
  • كيفية إرسال الرسائل (الإجراءات والأحداث) وتلقّيها باستخدام محتوى Looker المضمّن باستخدام حزمة تطوير البرامج (SDK) المضمّنة

المتطلبات

  • الوصول إلى HTML وJavaScript في رمز الواجهة الأمامية
  • إذن الوصول إلى إعدادات تضمين المشرف في نسخة Looker

2. التحضيرات

يجب إعداد نسخة HTML وLooker قبل أن تتمكّن من التضمين مع حزمة تطوير البرامج (SDK) المضمَّنة.

إضافة عنصر حاوية إطار iframe التضمين

في رمز HTML لصفحة الويب، أنشِئ عنصر div وحدِّد سمة id عليه.

<div id="looker-embed" />

إضافة نطاق التضمين إلى القائمة المسموح بها في نسخة Looker

يجب إضافة نطاق التضمين إلى القائمة المسموح بها في نسخة Looker.

حدِّد نطاق صفحة الويب التي تستضيف محتوى Looker المضمّن. لنفترض أن عنوان URL لصفحة الويب هو https://mywebsite.com/with/embed، ثم نطاق صفحة الويب هو https://mywebsite.com.

انتقِل إلى صفحة تضمين في قسم المشرف على نسخة Looker. https://your_instance.looker.com/admin/embed

في حقل قائمة النطاقات المسموح بها المُضمَّنة، أدخِل نطاق التضمين. بعد كتابته، اضغط على مفتاح Tab حتى يظهر النطاق في مربع. لا تضمِّن شَرطة مائلة لاحقة /.

انقر على الزر تحديث.

3- إنشاء التضمين

لنبدأ الآن في إنشاء وتكوين أداة إنشاء التضمين في حزمة 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() سمة حدود الإطار على إطار 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 مضمّنة الآن في صفحة الويب باستخدام حزمة تطوير البرامج (SDK) التضمين.

4. إرسال رسائل التضمين وتلقّيها

لنلقِ الآن نظرة على كيفية إرسال الرسائل واستلامها باستخدام محتوى Looker المضمّن باستخدام حزمة تطوير البرامج (SDK) المضمَّنة. ونطلق على الرسائل التي يرسلها تطبيقك إلى إطار iframe كإجراءات، ونستدعي الرسائل التي يتلقّاها تطبيقك من إطار iframe باسم أحداث.

استلام الأحداث

لنعمل باستخدام التعليمة البرمجية السابقة. وللاستماع إلى الأحداث، نستدعي طريقة on() لأداة إنشاء التضمين قبل استدعاء طريقة build().

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

ونستدعي هنا طريقة on() لضبط أداة معالجة الأحداث على الحدث dashboard:run:complete الوارد من إطار iframe عند إنشاء إطار iframe. سيخبرنا الحدث عند انتهاء تحميل لوحة البيانات. اطّلِع على مرجع الأحداث لمعرفة الأحداث الأخرى التي يمكنك الاستماع إليها.

إجراءات الإرسال

دعنا نستمر في التعليمات البرمجية السابقة. لإرسال الإجراءات إلى إطار iframe، نستدعي الطريقة connect() في أداة إنشاء التضمينات بعد أن نستدعي طريقة 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- معلومات إضافية

تهانينا! يمكنك الآن استخدام حزمة تطوير البرامج (SDK) لتضمين محتوى لوحة بيانات Looker بشكل خاص وإرسال الرسائل واستلامها من إطار iframe. اطلع على هذه الموارد لمزيد من المعلومات: