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

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

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

पिछली बार जुल॰ 28, 2023 को अपडेट किया गया

Jeremy Chang ने लिखा

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

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

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

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

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

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

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

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

ध्यान दें: Looker एम्बेड SDK टूल के बिना भी, 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 कुंजी दबाएं, ताकि बॉक्स में डोमेन दिखाई दे. बाद में स्लैश / शामिल न करें.

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

ध्यान दें: अपने डोमेन में * वाइल्डकार्ड का इस्तेमाल किया जा सकता है. उदाहरण के लिए, https://*.mycompany.com एंट्री को https://analytics.mycompany.com और https://data.mycompany.com, दोनों की अनुमति वाली सूची में शामिल किया जाता है.

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

अब SDK टूल के एम्बेड बिल्डर को "बिल्ड" पर बनाएं और कॉन्फ़िगर करें आपका एम्बेड किया गया Looker कॉन्टेंट.

एसडीके टूल को शुरू करना

सबसे पहले इंपोर्ट करें और फिर अपने Looker इंस्टेंस के डोमेन के साथ SDK टूल को शुरू करें.

// Import the Embed SDK as LookerEmbedSDK

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

अगर ब्राउज़र क्लाइंट से Looker इंस्टेंस तक पहुंचने के लिए ज़रूरी है, तो आपको Looker इंस्टेंस डोमेन में पोर्ट नंबर शामिल करना होगा. उदाहरण के लिए, instance_name.looker.com:1919 अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

इसके बाद, उस 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 बनाता है

ध्यान दें: एम्बेड बिल्डर में बताए गए अन्य तरीकों के बारे में जानने के लिए, embed_builder.ts फ़ाइल देखें.

फ़ाइनल चेक

ऊपर दिया गया तरीका अपनाने पर, आपका कोड कुछ ऐसा दिखना चाहिए:

// Import the Embed SDK as LookerEmbedSDK

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

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

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

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() तरीका जोड़ते हैं.

ध्यान दें: dashboard_client.ts फ़ाइल में ऐसे हेल्पर तरीके भी उपलब्ध होते हैं जो send() तरीके को कॉल करने के लिए ज़रूरी कार्रवाई करते हैं.

कार्रवाइयां भेजने और इवेंट सुनने के लिए, आपको connect() तरीके को कॉल करना होगा. अगर आपका वेबपेज सिर्फ़ इवेंट के डेटा का इस्तेमाल करता है, तब भी आपको मैसेज भेजने और पाने की प्रक्रिया शुरू करने के लिए, connect() तरीके को कॉल करना होगा.

फ़ाइनल चेक

ऊपर दिए गए कदमों में, आपका कोड अब कुछ ऐसा दिखना चाहिए:

// 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 टूल एम्बेड करें' का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए ये संसाधन देखें:

• Looker को एम्बेड करने के तरीके के बारे में ज़्यादा जानकारी पाने के लिए, SDK टूल का डेटा स्टोर करने की जगह एम्बेड करें. खास तौर पर, अगर आपको Looker कॉन्टेंट को एसएसओ (SSO) एम्बेड करना है, तो इस बारे में ज़्यादा जानें.
• सभी उपलब्ध इवेंट और उनकी प्रॉपर्टी के लिए इवेंट रेफ़रंस
• सभी उपलब्ध कार्रवाइयों और उनकी प्रॉपर्टी के लिए, कार्रवाइयों के बारे में जानकारी
• Looker पर कॉन्टेंट एम्बेड करने से जुड़े सुरक्षा के सबसे सही तरीके