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

১. শুরু করার আগে

এই কোডল্যাবে, আমরা আপনার ওয়েবপেজে একটি লুকার ড্যাশবোর্ড এমবেড করার জন্য লুকার এমবেড এসডিকে (Looker Embed SDK) ব্যবহার করব। আপনি এসডিকে-র কয়েকটি মেথড কল করবেন, যা স্বয়ংক্রিয়ভাবে একটি আইফ্রেম (iframe) তৈরি করবে, তাতে আপনার লুকার কন্টেন্ট এমবেড করবে এবং আপনার আইফ্রেম ও ওয়েবপেজের মধ্যে যোগাযোগ স্থাপন করবে।

পূর্বশর্ত

• একটি চলমান লুকার ইনস্ট্যান্স আছে
• আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবপেজে এম্বেড করার মতো কোনো লুকার ড্যাশবোর্ড আছে কি?
• জাভাস্ক্রিপ্ট এবং জাভাস্ক্রিপ্ট প্রমিস সম্পর্কে পরিচিত হন।

আপনি যা শিখবেন

• এমবেড এসডিকে ব্যবহার করে কীভাবে আপনার লুকার কন্টেন্ট ব্যক্তিগতভাবে এমবেড করবেন
• Embed SDK ব্যবহার করে আপনার এমবেড করা Looker কন্টেন্টের সাথে কীভাবে মেসেজ ( অ্যাকশন এবং ইভেন্ট ) পাঠানো ও গ্রহণ করবেন

আপনার যা যা লাগবে

• আপনার ফ্রন্টএন্ড কোডের HTML এবং JavaScript অ্যাক্সেস
• আপনার Looker ইনস্ট্যান্সে অ্যাডমিন এমবেড সেটিংসে অ্যাক্সেস

দ্রষ্টব্য: আপনি Looker Embed SDK ছাড়াও Looker কন্টেন্ট এমবেড করতে পারেন।

২. প্রস্তুতি

এমবেড এসডিকে ব্যবহার করে এমবেড করার আগে আপনাকে আপনার এইচটিএমএল এবং লুকার ইনস্ট্যান্স প্রস্তুত করতে হবে।

এমবেড আইফ্রেমের কন্টেইনার এলিমেন্ট যোগ করুন

আপনার ওয়েব পেজের HTML-এর ভিতরে একটি div এলিমেন্ট তৈরি করুন এবং এতে একটি id অ্যাট্রিবিউট নির্ধারণ করুন।

<div id="looker-embed" />

Looker ইনস্ট্যান্সে এমবেডের ডোমেইনটিকে Allowlist করুন।

আপনার Looker ইনস্ট্যান্সে এমবেডের ডোমেইনটিকে allowlist করতে হবে।

আপনার এমবেড করা লুকার কন্টেন্ট যে ওয়েবপেজটিতে হোস্ট করা আছে, তার ডোমেইন নির্ধারণ করুন। ধরা যাক, ওয়েবপেজটির URL হলো https://mywebsite.com/with/embed , তাহলে ওয়েবপেজটির ডোমেইন হলো https://mywebsite.com ।

আপনার Looker ইনস্ট্যান্সের অ্যাডমিন সেকশনে থাকা এমবেড পেজে যান। https://your_instance.looker.com/admin/embed

‘Embedded Domain Allowlist’ ফিল্ডে এমবেডটির ডোমেইনটি লিখুন। এটি টাইপ করার পর ট্যাব কী চাপুন, যাতে ডোমেইনটি একটি বক্সের মধ্যে প্রদর্শিত হয়। শেষে কোনো স্ল্যাশ / ) দেবেন না।

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

দ্রষ্টব্য: আপনি আপনার ডোমেইনে * ওয়াইল্ডকার্ড ব্যবহার করতে পারেন। উদাহরণস্বরূপ, https://*.mycompany.com এন্ট্রিটি https://analytics.mycompany.com এবং https://data.mycompany.com উভয়কেই অনুমতি দেয়।

৩. এমবেডটি তৈরি করুন

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

SDK শুরু করুন

প্রথমে আপনার Looker ইনস্ট্যান্সের ডোমেইন দিয়ে SDK-টি ইম্পোর্ট এবং তারপর ইনিশিয়ালাইজ করুন।

// Import the Embed SDK as LookerEmbedSDK

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

ব্রাউজার ক্লায়েন্ট থেকে লুকার ইনস্ট্যান্সে পৌঁছানোর প্রয়োজন হলে, আপনাকে অবশ্যই লুকার ইনস্ট্যান্স ডোমেইনে পোর্ট নম্বরটি অন্তর্ভুক্ত করতে হবে, যেমন instance_name.looker.com:1919

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

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

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

LookerEmbedSDK.createDashboardWithId(12345)

এমবেড বিল্ডারটি কনফিগার ও বিল্ড করুন

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

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

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

1. ` appendTo() ` মেথডটি আইফ্রেমের প্যারেন্ট এলিমেন্ট নির্ধারণ করে। আমরা `Preparation` ধাপে পূর্বে সংজ্ঞায়িত করা HTML এলিমেন্টের আইডিটি এখানে পাস করি।
2. withFrameBorder() ` মেথডটি আইফ্রেমের `frame-border` অ্যাট্রিবিউট সেট করে। এটি এমন কয়েকটি মেথডের মধ্যে একটি যা আইফ্রেমে HTML অ্যাট্রিবিউট নির্ধারণ করে।
3. ` build() ` মেথডটি কনফিগার করা HTML অ্যাট্রিবিউটগুলো সহ আইফ্রেমটি তৈরি করে।

দ্রষ্টব্য: এমবেড বিল্ডারে সংজ্ঞায়িত অন্যান্য মেথডগুলোর জন্য embed_builder.ts ফাইলটি দেখুন।

চূড়ান্ত যাচাই

পূর্ববর্তী ধাপগুলো অনুসরণ করলে আপনার কোডটি দেখতে এইরকম হবে:

// Import the Embed SDK as LookerEmbedSDK

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

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

এখন আপনি এমবেড এসডিকে (Embed SDK) ব্যবহার করে আপনার লুকার ড্যাশবোর্ডটি আপনার ওয়েবপেজের ভিতরে এমবেড করে ফেলেছেন!

৪. এমবেড বার্তা প্রেরণ ও গ্রহণ করুন

এবার চলুন দেখি Embed SDK ব্যবহার করে আপনার এমবেড করা Looker কন্টেন্টের সাথে কীভাবে মেসেজ পাঠানো এবং গ্রহণ করা যায়। আপনার অ্যাপ্লিকেশন iframe-এ যে মেসেজগুলো পাঠায় সেগুলোকে আমরা 'অ্যাকশন' বলি, এবং আপনার অ্যাপ্লিকেশন iframe থেকে যে মেসেজগুলো গ্রহণ করে সেগুলোকে ' ইভেন্ট' বলি।

ইভেন্টগুলি গ্রহণ করুন

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

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

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

অ্যাকশন পাঠান

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

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

চলুন এই কোড নমুনাটি পর্যালোচনা করা যাক:

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

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

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

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

• কীভাবে লুকার এমবেড করতে হয়, বিশেষ করে যদি আপনি এসএসও (SSO) এর মাধ্যমে লুকার কন্টেন্ট এমবেড করতে চান, সে সম্পর্কে আরও তথ্যের জন্য এমবেড এসডিকে (SDK) রিপোজিটরি দেখুন।
• উপলব্ধ সকল ইভেন্ট এবং তাদের বৈশিষ্ট্যগুলির জন্য ইভেন্ট রেফারেন্স।
• উপলব্ধ সকল অ্যাকশন এবং তাদের বৈশিষ্ট্যগুলির জন্য অ্যাকশন রেফারেন্স।
• আপনার লুকার কন্টেন্ট এমবেড করার ক্ষেত্রে নিরাপত্তা সংক্রান্ত সর্বোত্তম অনুশীলন