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

1. قبل البدء

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

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

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

ما ستتعلمه

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