ওভারভিউ (ডায়ালগফ্লো)

ইন্টারেক্টিভ ক্যানভাস হল Google অ্যাসিস্ট্যান্টে তৈরি একটি কাঠামো যা ডেভেলপারদের কথোপকথনমূলক অ্যাকশনগুলিতে ভিজ্যুয়াল, নিমজ্জিত অভিজ্ঞতা যোগ করতে দেয়। এই চাক্ষুষ অভিজ্ঞতা হল একটি ইন্টারেক্টিভ ওয়েব অ্যাপ যা সহকারী কথোপকথনে ব্যবহারকারীকে প্রতিক্রিয়া হিসাবে পাঠায়। একটি সহকারী কথোপকথনে ইন-লাইনে বিদ্যমান ঐতিহ্যগত সমৃদ্ধ প্রতিক্রিয়াগুলির বিপরীতে, ইন্টারেক্টিভ ক্যানভাস ওয়েব অ্যাপটি একটি পূর্ণ-স্ক্রীন ওয়েব ভিউ হিসাবে রেন্ডার করে।

আপনি যদি আপনার অ্যাকশনে নিম্নলিখিতগুলির যেকোনো একটি করতে চান তবে আপনার ইন্টারেক্টিভ ক্যানভাস ব্যবহার করা উচিত:

  • পূর্ণ-স্ক্রীন ভিজ্যুয়াল তৈরি করুন
  • কাস্টম অ্যানিমেশন এবং ট্রানজিশন তৈরি করুন
  • ডেটা ভিজ্যুয়ালাইজেশন করুন
  • কাস্টম লেআউট এবং GUI তৈরি করুন
চিত্র 1. ইন্টারেক্টিভ ক্যানভাস ব্যবহার করে নির্মিত একটি ইন্টারেক্টিভ গেম।

সমর্থিত ডিভাইস

ইন্টারেক্টিভ ক্যানভাস বর্তমানে নিম্নলিখিত ডিভাইসগুলিতে উপলব্ধ:

  • স্মার্ট ডিসপ্লে
  • Google Nest Hubs

  • অ্যান্ড্রয়েড মোবাইল ডিভাইস

এটা কিভাবে কাজ করে

একটি ক্রিয়া যা ইন্টারেক্টিভ ক্যানভাস ব্যবহার করে একটি নিয়মিত কথোপকথনমূলক অ্যাকশনের মতোই কাজ করে। ব্যবহারকারীর এখনও তাদের লক্ষ্য পূরণের জন্য সহকারীর সাথে বারবার কথোপকথন রয়েছে; যাইহোক, কথোপকথনে ইন-লাইনে প্রতিক্রিয়া ফেরত দেওয়ার পরিবর্তে, একটি ইন্টারেক্টিভ ক্যানভাস অ্যাকশন ব্যবহারকারীকে একটি প্রতিক্রিয়া পাঠায় যা একটি পূর্ণ-স্ক্রীন ওয়েব অ্যাপ খোলে। কথোপকথন শেষ না হওয়া পর্যন্ত ব্যবহারকারী ভয়েস বা স্পর্শের মাধ্যমে ওয়েব অ্যাপের সাথে যোগাযোগ করতে থাকে।

ইন্টারেক্টিভ ক্যানভাস ব্যবহার করে এমন একটি অ্যাকশনের বিভিন্ন উপাদান রয়েছে:

  • কথোপকথনমূলক ক্রিয়া : একটি ক্রিয়া যা ব্যবহারকারীর অনুরোধগুলি পূরণ করতে একটি কথোপকথনমূলক ইন্টারফেস ব্যবহার করে। ইন্টারেক্টিভ ক্যানভাস অ্যাকশন রিচ কার্ড বা সাধারণ টেক্সট এবং ভয়েস প্রতিক্রিয়ার পরিবর্তে প্রতিক্রিয়া রেন্ডার করতে ওয়েব ভিউ ব্যবহার করে। কথোপকথনমূলক ক্রিয়াগুলি নিম্নলিখিত উপাদানগুলি ব্যবহার করে:
    • ডায়ালগফ্লো এজেন্ট : ডায়ালগফ্লোতে একটি প্রকল্প যা আপনি আপনার অ্যাকশন ব্যবহারকারীদের সাথে কথোপকথনের জন্য কাস্টমাইজ করেন।
    • পূর্ণতা : কোড যা একটি ওয়েবহুক হিসাবে স্থাপন করা হয় যা আপনার ডায়ালগফ্লো এজেন্টের জন্য কথোপকথনমূলক যুক্তি প্রয়োগ করে এবং আপনার ওয়েব অ্যাপের সাথে যোগাযোগ করে।
  • ওয়েব অ্যাপ: কাস্টমাইজড ভিজ্যুয়াল সহ একটি ফ্রন্ট-এন্ড ওয়েব অ্যাপ যা আপনার অ্যাকশন একটি কথোপকথনের সময় ব্যবহারকারীদের প্রতিক্রিয়া হিসাবে পাঠায়। আপনি HTML, JavaScript এবং CSS এর মত ওয়েব স্ট্যান্ডার্ড দিয়ে ওয়েব অ্যাপ তৈরি করেন।

কথোপকথনমূলক অ্যাকশন এবং ওয়েব অ্যাপ নিম্নলিখিতগুলি ব্যবহার করে একে অপরের সাথে যোগাযোগ করে:

  • ইন্টারেক্টিভ ক্যানভাস API : একটি জাভাস্ক্রিপ্ট API যা আপনি ওয়েব অ্যাপ এবং আপনার কথোপকথনমূলক অ্যাকশনের মধ্যে যোগাযোগ সক্ষম করতে ওয়েব অ্যাপে অন্তর্ভুক্ত করেন।
  • HtmlResponse : একটি প্রতিক্রিয়া যা ওয়েব অ্যাপের একটি URL এবং এটি পাস করার জন্য ডেটা ধারণ করে। HtmlResponse ফেরত দিতে আপনি Node.js বা Java ক্লায়েন্ট লাইব্রেরি ব্যবহার করতে পারেন।

ইন্টারেক্টিভ ক্যানভাস কীভাবে কাজ করে তা বোঝাতে, কুল কালার নামে একটি অনুমানমূলক ক্রিয়া কল্পনা করুন যা ব্যবহারকারীর নির্দিষ্ট করা রঙে ডিভাইসের পর্দার রঙ পরিবর্তন করে। ব্যবহারকারী অ্যাকশন আহ্বান করার পরে, প্রবাহটি নিম্নলিখিতটির মতো দেখায়:

  1. ব্যবহারকারী বলছেন, অ্যাসিস্ট্যান্ট ডিভাইসে Turn the screen blue ।
  2. Google প্ল্যাটফর্মের অ্যাকশনগুলি একটি অভিপ্রায়ের সাথে মেলে ডায়ালগফ্লোতে ব্যবহারকারীর অনুরোধকে রুট করে৷
  3. মিলিত অভিপ্রায়ের জন্য পূর্ণতা চলে এবং একটি HtmlResponse ডিভাইসে পাঠানো হয়। ওয়েব অ্যাপ লোড করার জন্য ডিভাইসটি URL ব্যবহার করে যদি এটি এখনও লোড করা না হয়।
  4. যখন ওয়েব অ্যাপ লোড হয়, এটি interactiveCanvas API-এর সাথে কলব্যাক নিবন্ধন করে। data অবজেক্টের মান তারপর ওয়েব অ্যাপের নিবন্ধিত onUpdate কলব্যাকে প্রেরণ করা হয়। আমাদের উদাহরণে, পরিপূর্ণতা একটি data সহ একটি HtmlResponse পাঠায় যাতে blue মান সহ একটি পরিবর্তনশীল অন্তর্ভুক্ত থাকে।
  5. আপনার ওয়েব অ্যাপের জন্য কাস্টম লজিক HtmlResponse এর data মান পড়ে এবং সংজ্ঞায়িত পরিবর্তনগুলি করে৷ আমাদের উদাহরণে, এটি পর্দাটিকে নীল করে দেয়।
  6. interactiveCanvas ডিভাইসে কলব্যাক আপডেট পাঠায়।

পরবর্তী পদক্ষেপ

কিভাবে একটি ইন্টারেক্টিভ ক্যানভাস অ্যাকশন তৈরি করতে হয় তা জানতে, বিল্ড ওভারভিউ পৃষ্ঠাটি দেখুন।

একটি সম্পূর্ণ ইন্টারেক্টিভ ক্যানভাস অ্যাকশনের কোড দেখতে, নমুনাটি দেখুন।