एम्बेड SDK टूल के साथ Looker को एम्बेड करने का तरीका

1. शुरू करने से पहले

इस कोडलैब में, हम Looker Embed SDK का इस्तेमाल करके, Looker डैशबोर्ड को आपके वेबपेज में एम्बेड करेंगे. आपको SDK टूल के कई तरीकों का इस्तेमाल करना होगा. इससे iframe अपने-आप बन जाएगा. साथ ही, Looker के कॉन्टेंट को iframe में एम्बेड किया जा सकेगा. इसके अलावा, iframe और वेबपेज के बीच कम्यूनिकेशन सेट अप किया जा सकेगा.

ज़रूरी शर्तें

  • Looker इंस्टेंस चालू होना चाहिए
  • आपके पास ऐसा Looker डैशबोर्ड होना चाहिए जिसे आपको अपने वेब ऐप्लिकेशन या वेबपेज में एम्बेड करना है
  • JavaScript और JavaScript प्रॉमिस के बारे में जानकारी होना.

आपको क्या सीखने को मिलेगा

  • Embed SDK की मदद से, Looker के कॉन्टेंट को निजी तौर पर एम्बेड करने का तरीका
  • Embed SDK की मदद से, एम्बेड किए गए Looker कॉन्टेंट के साथ मैसेज (कार्रवाइयां और इवेंट) भेजने और पाने का तरीका

आपको इन चीज़ों की ज़रूरत होगी

  • आपके पास फ़्रंटएंड कोड के एचटीएमएल और JavaScript का ऐक्सेस हो
  • आपके Looker इंस्टेंस में, एडमिन के पास एम्बेड करने की सेटिंग का ऐक्सेस होना चाहिए

2. तैयारियां

Embed SDK का इस्तेमाल करके एम्बेड करने से पहले, आपको अपना एचटीएमएल और Looker इंस्टेंस तैयार करना होगा.

एम्बेड किए गए iframe का कंटेनर एलिमेंट जोड़ना

अपने वेब पेज के एचटीएमएल में, div एलिमेंट बनाएं और उस पर id एट्रिब्यूट तय करें.

<div id="looker-embed" />

Looker इंस्टेंस में, एम्बेड किए गए कॉन्टेंट के डोमेन को अनुमति वाली सूची में शामिल करना

आपको अपने Looker इंस्टेंस में, एम्बेड किए गए कॉन्टेंट के डोमेन को अनुमति वाली सूची में शामिल करना होगा.

उस वेबपेज के डोमेन का पता लगाएं जिस पर Looker का एम्बेड किया गया कॉन्टेंट होस्ट किया गया है. मान लें कि वेब पेज का यूआरएल https://mywebsite.com/with/embed है, तो वेब पेज का डोमेन https://mywebsite.com होगा.

अपने Looker इंस्टेंस के एडमिन सेक्शन में, एम्बेड करें पेज पर जाएं. https://your_instance.looker.com/admin/embed

एम्बेड किए गए डोमेन की अनुमति वाली सूची फ़ील्ड में, एम्बेड किए गए डोमेन का नाम डालें. इसे टाइप करने के बाद, Tab कुंजी दबाएं, ताकि डोमेन एक बॉक्स में दिखे. आखिर में स्लैश / शामिल न करें.

अपडेट करें बटन को चुनें.

3. एम्बेड करना

अब, एम्बेड किए गए 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() तरीके को कॉल करके, एम्बेड बिल्डर बनाएं. यह तरीका, एम्बेड बिल्डर को वापस लाएगा.

LookerEmbedSDK.createDashboardWithId(12345)

एम्बेड बिल्डर को कॉन्फ़िगर और बिल्ड करना

अब, एम्बेड किए गए iframe को बनाने के लिए कहने से पहले, एम्बेड बिल्डर को कॉन्फ़िगर करें. यहां दिए गए कोड के सैंपल को, पिछले कोड के सैंपल के createDashboardWithId() मेथड कॉल के ठीक बाद जोड़ें.

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

एम्बेड बिल्डर का हर तरीका, एम्बेड बिल्डर को ही दिखाता है. इसलिए, हम तरीके के कॉल को एक साथ जोड़ते हैं. आइए, हर तरीके के बारे में जानते हैं:

  1. appendTo() मेथड, iframe के पैरंट एलिमेंट का पता लगाता है. हम उस एचटीएमएल एलिमेंट का आईडी पास करते हैं जिसे हमने तैयारी वाले चरण में पहले से तय किया था.
  2. withFrameBorder() तरीका, iframe पर फ़्रेम-बॉर्डर एट्रिब्यूट सेट करता है. यह iframe पर एचटीएमएल एट्रिब्यूट तय करने के कई तरीकों में से एक है.
  3. build() तरीके से, कॉन्फ़िगर किए गए एचटीएमएल एट्रिब्यूट के साथ iframe बनाया जाता है

आखिरी बार जांच करना

ऊपर दिए गए चरणों को पूरा करने के बाद, आपका कोड ऐसा दिखना चाहिए:

// Import the Embed SDK as LookerEmbedSDK

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

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

अब आपके पास Embed SDK की मदद से, अपने वेबपेज में Looker डैशबोर्ड को एम्बेड करने का विकल्प है!

4. एम्बेड किए गए मैसेज भेजना और पाना

अब आइए जानते हैं कि Embed SDK की मदद से, Looker के एम्बेड किए गए कॉन्टेंट के साथ मैसेज कैसे भेजे और पाए जाते हैं. आपके ऐप्लिकेशन से iframe को भेजे जाने वाले मैसेज को कार्रवाइयां कहा जाता है. वहीं, आपके ऐप्लिकेशन को iframe से मिलने वाले मैसेज को इवेंट कहा जाता है.

इवेंट पाना

आइए, पिछले कोड का इस्तेमाल करें. इवेंट सुनने के लिए, हम build() तरीके को कॉल करने से पहले, एम्बेड बिल्डर के on() तरीके को कॉल करते हैं.

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

यहां हमने on() तरीके का इस्तेमाल किया है, ताकि iframe के लोड होने पर iframe से आने वाले dashboard:run:complete इवेंट पर इवेंट लिसनर सेट किया जा सके. इस इवेंट से हमें पता चलेगा कि डैशबोर्ड कब लोड हो गया. सुनने के लिए अन्य इवेंट के रेफ़रंस देखें.

कार्रवाइयां भेजना

आइए, पिछले कोड का इस्तेमाल जारी रखें. आईफ़्रेम को कार्रवाइयां भेजने के लिए, हम एम्बेड बिल्डर के connect() तरीके को कॉल करते हैं. ऐसा तब किया जाता है, जब हम आईफ़्रेम के साथ मैसेज भेजने और पाने की सुविधा को शुरू करने के लिए, build() तरीके को कॉल करते हैं.

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

आइए, इस कोड सैंपल के बारे में जानें:

  1. हम connect() वाले तरीके को कॉल करते हैं, जो एक प्रॉमिस दिखाता है. मैसेज भेजने और पाने की प्रोसेस शुरू होने के बाद, प्रॉमिस, एम्बेड किए गए iframe को दिखाने वाले एम्बेड ऑब्जेक्ट में बदल जाता है.
  2. हम dashboard:run ऐक्शन भेजने के लिए, एम्बेड किए गए ऑब्जेक्ट पर send() तरीके का इस्तेमाल करते हैं. भेजने के लिए अन्य कार्रवाइयों के बारे में जानने के लिए, कार्रवाइयों का रेफ़रंस देखें.
  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 से मैसेज भेजे और पाए जा सकते हैं. ज़्यादा जानकारी के लिए, ये संसाधन देखें: