এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

এমবেডেড লুকার আইফ্রেম মেসেজিং

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

আপনার লুকার কন্টেন্টকে প্রাইভেট এমবেডিং অথবা এসএসও এমবেডিং ব্যবহার করে একটি আইফ্রেমের ভেতরে এমবেড করা উচিত। এই কোডল্যাবে, আমরা আপনার ওয়েবপেজকে আরও ডাইনামিক করার জন্য জাভাস্ক্রিপ্টের মাধ্যমে আপনার আইফ্রেমের সাথে ইন্টারঅ্যাক্ট করব। আপনার ওয়েবপেজটি আইফ্রেমের এমবেড করা লুকার কন্টেন্টের কাছে মেসেজ পাঠাবে এবং সেখান থেকে মেসেজ গ্রহণ করবে।

পূর্বশর্ত

একটি চলমান লুকার ইনস্ট্যান্স আছে
একটি লুকার ড্যাশবোর্ড আইফ্রেমের ভিতরে ব্যক্তিগতভাবে অথবা এসএসও দ্বারা এমবেড করুন।
window.postMessage() পদ্ধতিটি বুঝুন।

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

জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশনের জন্য আপনার আইফ্রেম এবং লুকার ইনস্ট্যান্স কীভাবে প্রস্তুত করবেন
আপনার আইফ্রেম থেকে ইভেন্টগুলি কীভাবে শুনবেন
আপনার আইফ্রেমে কীভাবে অ্যাকশন মেসেজ পাঠাবেন

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

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

২. প্রস্তুতি

আইফ্রেমের সাথে ইন্টারঅ্যাক্ট করার আগে আপনাকে আপনার আইফ্রেম এবং লুকার ইনস্ট্যান্স প্রস্তুত করতে হবে।

আইফ্রেমে একটি `id` অ্যাট্রিবিউট যোগ করুন

আপনাকে আইফ্রেম থেকে আসা বার্তাগুলো যাচাই করতে হবে। এটি করার জন্য, আইফ্রেমে একটি id অ্যাট্রিবিউট নির্ধারণ করুন:

<iframe 
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>

আইফ্রেমের `src` অ্যাট্রিবিউটে এমবেডের ডোমেইনটি যোগ করুন।

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

আপনি যদি প্রাইভেট এমবেডিং ব্যবহার করেন, তাহলে আইফ্রেমের src-তে ডোমেইনটিকে একটি embed_domain কোয়েরি প্যারামিটার হিসেবে যোগ করুন:

<iframe
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>

আপনি যদি SSO Embedding ব্যবহার করেন, তাহলে এমবেড URL- এ embed_domain কোয়েরি প্যারামিটার হিসেবে ডোমেইনটি যোগ করুন।

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

সবশেষে, বার্তা পাঠানোর অনুমতি দেওয়ার জন্য আপনাকে আপনার Looker ইনস্ট্যান্সে এমবেডের ডোমেইনটিকে allowlist-এ অন্তর্ভুক্ত করতে হবে।

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

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

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

৩. আইফ্রেম থেকে ইভেন্ট বার্তাগুলো শুনুন

আপনার এমবেড করা লুকার কন্টেন্ট সহ আইফ্রেমটি তার হোস্ট ওয়েবপেজে মেসেজ পাঠায়। এই ইভেন্ট মেসেজগুলিতে এমবেড করা লুকার কন্টেন্ট সম্পর্কে সময়োপযোগী তথ্য থাকে, যেমন এমবেড করা ড্যাশবোর্ডটি লোড হওয়া শুরু করেছে কিনা বা ব্যবহারকারী এমবেড করা কন্টেন্টের মধ্যে ডাউনলোড অপশনটি বেছে নিয়েছেন কিনা। চলুন এই ইভেন্টগুলি গ্রহণ এবং পার্স করা যাক।

ইভেন্ট অবজেক্ট স্কিমাটি বুঝুন

ইভেন্ট অবজেক্টটির স্কিমা হলো:

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

ইভেন্টটির সর্বদা একটি type প্রপার্টি থাকবে, যা আপনাকে নির্ধারণ করতে দেবে এটি কোন ধরনের ইভেন্ট। ইভেন্ট-নির্দিষ্ট অন্যান্য সমস্ত প্রপার্টি আমাদের 'ইভেন্টস রেফারেন্স'- এ সংজ্ঞায়িত করা আছে।

Receive and parse the event

আপনার ওয়েবপেজের জাভাস্ক্রিপ্ট যেখানে আইফ্রেম ইনিশিয়ালাইজ বা পরিচালনা করে, সেখানে এটি যোগ করুন:

window.addEventListener("message", function(message) {
  const iframeElement = document.getElementById("looker");
  if (message.source === iframeElement.contentWindow) {
    if (message.origin === "https://instance_name.looker.com") {
      const event = JSON.parse(message.data);
      switch (event.type):
        case "dashboard:run:start":
          console.log("The embedded dashboard has started loading"); 
    }
  }
});

কোড স্নিপেটটি নিম্নলিখিত কাজগুলো করে:

window অবজেক্ট থেকে "message" ইভেন্টের জন্য অপেক্ষা করে।
মেসেজের source প্রপার্টিটি এমবেড করা লুকার কন্টেন্টসহ আইফ্রেম কি না, তা যাচাই করে।
মেসেজের ' origin প্রপার্টিটি আপনার Looker ইনস্ট্যান্সের ডোমেইন কিনা তা যাচাই করে।
JSON ইভেন্ট অবজেক্টটি অ্যাক্সেস ও পার্স করার জন্য মেসেজের data প্রপার্টি পার্স করে।
ইভেন্টটি কী তা নির্ধারণ করতে এবং সেই অনুযায়ী কাজ করতে ইভেন্ট অবজেক্টের type প্রপার্টি চালু করে।

এখন আপনার হোস্ট ওয়েবপেজ, আপনার এমবেড করা লুকার কন্টেন্ট থেকে নির্গত ইভেন্টগুলোতে গতিশীলভাবে প্রতিক্রিয়া জানাতে পারবে!

৪. আইফ্রেমে অ্যাকশন মেসেজ পাঠান

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

Create an action message

আপনার ওয়েবপেজের জাভাস্ক্রিপ্টের ভিতরে একটি অ্যাকশন মেসেজ তৈরি করুন:

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

action অবজেক্টটি পূর্ববর্তী event অবজেক্টের মতোই একই ফরম্যাট অনুসরণ করে। এতে সর্বদা একটি type প্রপার্টি এবং তারপর অ্যাকশন-নির্দিষ্ট প্রপার্টি থাকবে, যেগুলো আমাদের অ্যাকশন রেফারেন্সে সংজ্ঞায়িত করা থাকে। অ্যাকশন মেসেজটি অবশ্যই JSON ফরম্যাটে হতে হবে।

অ্যাকশন মেসেজ পাঠান

আপনার ওয়েবপেজের জাভাস্ক্রিপ্টের ভিতরে JSON ফরম্যাটের অ্যাকশনটি আপনার আইফ্রেমে পাঠান:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');

আপনার অ্যাকশনটি পাঠানোর জন্য আইফ্রেমটি নির্ধারণ করুন।
মেসেজটি পাঠানোর জন্য আইফ্রেমের contentWindow প্রপার্টিতে postMessage() মেথডটি কল করুন।

এখন আপনার হোস্ট ওয়েবপেজ আপনার এমবেড করা লুকার কন্টেন্টের অবস্থা গতিশীলভাবে পরিবর্তন করতে পারবে!

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

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

উপলব্ধ সকল ইভেন্ট এবং তাদের বৈশিষ্ট্যগুলির জন্য ইভেন্ট রেফারেন্স।
উপলব্ধ সকল অ্যাকশন এবং তাদের বৈশিষ্ট্যগুলির জন্য অ্যাকশন রেফারেন্স।
আপনার লুকার কন্টেন্ট এমবেড করার ক্ষেত্রে নিরাপত্তা সংক্রান্ত সর্বোত্তম অনুশীলন