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

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

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

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

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

आपको इनके बारे में जानकारी मिलेगी

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

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

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

2. तैयारी

एम्बेड 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 इंस्टेंस के डोमेन के साथ SDK टूल को शुरू करें.

// Import the Embed SDK as LookerEmbedSDK

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

एम्बेड बिल्डर बनाना

इसके बाद, उस 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()

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

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

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

इवेंट पाना

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

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

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

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

पिछले कोड का इस्तेमाल करते हैं. iframe पर कार्रवाइयां भेजने के लिए, हम एम्बेड बिल्डर के connect() तरीके को कॉल करते हैं. ऐसा हम iframe की मदद से मैसेज भेजने और पाने की प्रोसेस शुरू करने के लिए, 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. अतिरिक्त जानकारी

बधाई हो! अब Looker डैशबोर्ड को निजी तौर पर एम्बेड करने और iframe से मैसेज भेजने और पाने के लिए, 'SDK टूल एम्बेड करें' का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, ये संसाधन देखें: