কিভাবে এম্বেড SDK দিয়ে লুকার এম্বেড করবেন

1. আপনি শুরু করার আগে

এই কোডল্যাবে, আমরা আপনার ওয়েবপেজে একটি লুকার ড্যাশবোর্ড এম্বেড করতে লুকার এম্বেড SDK ব্যবহার করব। আপনি SDK পদ্ধতির একটি সিরিজ কল করবেন যা স্বয়ংক্রিয়ভাবে একটি আইফ্রেম তৈরি করবে, এতে আপনার লুকার সামগ্রী এম্বেড করবে এবং আপনার আইফ্রেম এবং আপনার ওয়েবপৃষ্ঠার মধ্যে যোগাযোগ স্থাপন করবে।

পূর্বশর্ত

  • একটি চলমান Looker উদাহরণ আছে
  • একটি লুকার ড্যাশবোর্ড আছে যা আপনি আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবপেজে এম্বেড করতে চান৷
  • জাভাস্ক্রিপ্ট এবং জাভাস্ক্রিপ্ট প্রতিশ্রুতি সঙ্গে পরিচিত হন.

আপনি কি শিখবেন

  • এম্বেড SDK-এর সাথে কীভাবে আপনার লুকার সামগ্রী ব্যক্তিগতভাবে এম্বেড করবেন
  • এমবেড SDK-এর সাথে আপনার এম্বেড করা লুকার সামগ্রীর সাথে কীভাবে বার্তা ( ক্রিয়া এবং ইভেন্ট ) পাঠাবেন এবং গ্রহণ করবেন

আপনি কি প্রয়োজন হবে

  • আপনার ফ্রন্টএন্ড কোডের এইচটিএমএল এবং জাভাস্ক্রিপ্ট অ্যাক্সেস করুন
  • আপনার লুকার ইনস্ট্যান্সে অ্যাডমিন এম্বেড সেটিংসে অ্যাক্সেস করুন

2. প্রস্তুতি

আপনি এম্বেড SDK এর সাথে এম্বেড করার আগে আপনাকে আপনার HTML এবং Looker উদাহরণ প্রস্তুত করতে হবে।

এম্বেড iframe এর ধারক উপাদান যোগ করুন

আপনার ওয়েব পৃষ্ঠার HTML এর ভিতরে, একটি div উপাদান তৈরি করুন এবং এটিতে একটি id বৈশিষ্ট্য নির্ধারণ করুন।

<div id="looker-embed" />

লুকার ইন্সট্যান্সে এম্বেডের ডোমেনের অনুমতি দিন

আপনার লুকার ইন্সট্যান্সে আপনাকে এম্বেডের ডোমেনের অনুমতি তালিকাভুক্ত করতে হবে।

আপনার এমবেডেড লুকার সামগ্রী হোস্টিং ওয়েবপৃষ্ঠার ডোমেন নির্ধারণ করুন৷ বলুন ওয়েবপেজের URL হল https://mywebsite.com/with/embed তারপর ওয়েবপেজের ডোমেন হল https://mywebsite.com ।

আপনার লুকার ইনস্ট্যান্সের অ্যাডমিন বিভাগে এম্বেড পৃষ্ঠাতে নেভিগেট করুন। https://your_instance.looker.com/admin/embed

এমবেডেড ডোমেন অ্যালোলিস্ট ফিল্ডে, এম্বেডের ডোমেন লিখুন। এটি টাইপ করার পরে, ট্যাব কী টিপুন যাতে ডোমেনটি একটি বাক্সে উপস্থিত হয়। একটি ট্রেলিং স্ল্যাশ / অন্তর্ভুক্ত করবেন না।

আপডেট বোতামটি নির্বাচন করুন।

3. এম্বেড তৈরি করুন

এখন আপনার এমবেডেড লুকার কন্টেন্ট "বিল্ড" করতে SDK-এর এম্বেড বিল্ডার তৈরি এবং কনফিগার করি।

SDK আরম্ভ করুন

প্রথমে আমদানি করুন এবং তারপর আপনার লুকার উদাহরণের ডোমেনের সাথে SDK শুরু করুন৷

// Import the Embed SDK as LookerEmbedSDK

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

এম্বেড বিল্ডার তৈরি করুন

এরপরে, আপনি যে লুকার ড্যাশবোর্ড এম্বেড করতে চান তার আইডি নির্ধারণ করুন। যদি আপনার ড্যাশবোর্ড হয় instance_name.looker.com/dashboard/12345 , তাহলে আপনার ড্যাশবোর্ডের ID হল 12345 ।

একটি এম্বেড বিল্ডার তৈরি করতে ড্যাশবোর্ড আইডি সহ SDK createDashboardWithId() পদ্ধতিতে কল করুন। এই পদ্ধতিটি এম্বেড বিল্ডারকে ফিরিয়ে দেবে।

LookerEmbedSDK.createDashboardWithId(12345)

এম্বেড বিল্ডার কনফিগার করুন এবং তৈরি করুন

এখন, এম্বেড বিল্ডারকে আমরা এমবেডেড আইফ্রেম তৈরি করতে বলার আগে কনফিগার করি। পূর্ববর্তী কোড নমুনার createDashboardWithId() পদ্ধতি কলের পরে সরাসরি নিম্নলিখিত কোড নমুনা যোগ করুন।

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

এম্বেড বিল্ডারের প্রতিটি পদ্ধতি নিজেই এম্বেড বিল্ডারকে ফেরত দেয়, তাই আমরা মেথডটিকে একসাথে চেইন করি। আসুন প্রতিটি পদ্ধতির মাধ্যমে চলুন:

  1. appendTo() পদ্ধতি আইফ্রেমের মূল উপাদান নির্ধারণ করে। আমরা পূর্বে প্রস্তুতি ধাপে সংজ্ঞায়িত এইচটিএমএল উপাদানের আইডি পাস করি।
  2. withFrameBorder() পদ্ধতিটি iframe-এ ফ্রেম-বর্ডার অ্যাট্রিবিউট সেট করে। এটি আইফ্রেমে এইচটিএমএল বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে এমন কয়েকটি পদ্ধতির মধ্যে একটি।
  3. build() পদ্ধতি কনফিগার করা এইচটিএমএল অ্যাট্রিবিউট সহ আইফ্রেম তৈরি করে

চূড়ান্ত চেক

পূর্ববর্তী পদক্ষেপগুলির সাথে, আপনার কোডটি এইরকম হওয়া উচিত:

// Import the Embed SDK as LookerEmbedSDK

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

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

আপনি এখন এম্বেড SDK সহ আপনার ওয়েবপৃষ্ঠার ভিতরে আপনার লুকার ড্যাশবোর্ড এম্বেড করা আছে!

4. এম্বেড বার্তা পাঠান এবং গ্রহণ করুন

এখন দেখা যাক কিভাবে এম্বেড SDK-এর মাধ্যমে আপনার এম্বেডেড লুকার কন্টেন্ট সহ বার্তা পাঠাতে এবং গ্রহণ করতে হয়। আপনার অ্যাপ্লিকেশন আইফ্রেমে পাঠানো বার্তাগুলিকে আমরা অ্যাকশন হিসাবে কল করি এবং আপনার অ্যাপ্লিকেশনটি iframe থেকে প্রাপ্ত বার্তাগুলিকে ইভেন্ট হিসাবে কল করি৷

ঘটনা গ্রহণ

আমাদের আগের কোড দিয়ে কাজ করা যাক। ইভেন্টগুলি শোনার জন্য, আমরা build() মেথড কল করার আগে এমবেড বিল্ডারের অন() মেথডকে কল করি।

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

এখানে আমরা ড্যাশবোর্ডে একটি ইভেন্ট লিসেনার সেট করতে on() মেথডকে কল করি dashboard:run:complete ইভেন্ট iframe থেকে আসছে যখন iframe তৈরি হয়। ড্যাশবোর্ড লোড হওয়া শেষ হলে ইভেন্টটি আমাদের বলবে। শোনার জন্য অন্যান্য ইভেন্টের জন্য ইভেন্টের রেফারেন্স দেখুন।

কর্ম পাঠান

চলুন আমাদের পূর্ববর্তী কোড দিয়ে চালিয়ে যাওয়া যাক। আইফ্রেমে অ্যাকশন পাঠানোর জন্য, আমরা build() মেথড কল করার পর এম্বেড বিল্ডারের connect() মেথডকে কল করি।

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

আসুন এই কোড নমুনা মাধ্যমে হাঁটা:

  1. আমরা connect() পদ্ধতিকে বলি যা একটি প্রতিশ্রুতি প্রদান করে। প্রতিশ্রুতি একটি এমবেড অবজেক্টের সমাধান করে যা এমবেডেড আইফ্রেমের প্রতিনিধিত্ব করে বার্তা পাঠানো এবং গ্রহণ করার প্রক্রিয়া শুরু হওয়ার পরে।
  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!')

আপনি এখন আপনার এমবেডেড লুকার ড্যাশবোর্ডের সাথে যোগাযোগ করতে পারেন!

5. অতিরিক্ত তথ্য

অভিনন্দন! আপনি এখন আপনার লুকার ড্যাশবোর্ডকে ব্যক্তিগতভাবে এম্বেড করতে এবং iframe থেকে বার্তা পাঠাতে ও গ্রহণ করতে এম্বেড SDK ব্যবহার করতে পারেন৷ আরও তথ্যের জন্য এই সংস্থানগুলি দেখুন: