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

অ্যাকশন বিল্ডারের সাথে Google সহকারীর জন্য একটি ইন্টারেক্টিভ ক্যানভাস অ্যাকশন তৈরি করুন

১. সংক্ষিপ্ত বিবরণ

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

এই কোডল্যাবটি একটি অ্যাডভান্সড মডিউল, যা এমন পাঠকদের জন্য তৈরি করা হয়েছে যাদের গুগল অ্যাসিস্ট্যান্টের জন্য অ্যাকশন তৈরিতে আগে থেকেই কিছু অভিজ্ঞতা আছে। যদি আপনার গুগল অ্যাকশন নিয়ে কোনো পূর্ব অভিজ্ঞতা না থাকে, তবে প্রাথমিক কোডল্যাবগুলো ( লেভেল ১ এবং লেভেল ২ ) অনুসরণ করে প্ল্যাটফর্মটির সাথে পরিচিত হয়ে নিন। এই মডিউলগুলো আপনাকে এমন কিছু ফিচারের সাথে পরিচয় করিয়ে দেবে যা আপনার অ্যাকশনের কার্যকারিতা বাড়াতে এবং আপনার দর্শক সংখ্যা বৃদ্ধি করতে সাহায্য করবে।

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

সম্পূর্ণ গেমটি নিজে তৈরি করার পরিবর্তে, আপনি 'স্নো প্যাল' নামক একটি আংশিকভাবে পূর্ব-নির্মিত গেম ডেপ্লয় করেন এবং কোডল্যাবে কাজ এগিয়ে যাওয়ার সাথে সাথে গেমটির লজিক যোগ করতে থাকেন। স্নো প্যাল হলো প্রচলিত হ্যাংম্যান গেমের একটি ভিন্ন সংস্করণ; এই গেমে একটি শব্দ বোঝানোর জন্য আপনাকে কয়েকটি খালি জায়গা দেওয়া হয় এবং আপনি সেই শব্দটিতে থাকতে পারে এমন অক্ষরগুলো অনুমান করেন। প্রতিটি ভুল অনুমানের সাথে সাথে আপনার স্নো প্যাল আরও কিছুটা গলে যায়। আপনার স্নো প্যাল পুরোপুরি গলে যাওয়ার আগেই যদি আপনি শব্দটি বের করতে পারেন, তবে আপনি গেমটি জিতে যাবেন।

চিত্র ১. একটি আংশিকভাবে সম্পন্ন স্নো প্যাল গেম

আপনি যা তৈরি করবেন

এই কোডল্যাবে, আপনি ইন্টারেক্টিভ ক্যানভাস ব্যবহার করে একটি অ্যাকশন তৈরি করবেন। আপনার অ্যাকশনটিতে নিম্নলিখিত বৈশিষ্ট্যগুলো থাকবে:

একটি পূর্ণ-স্ক্রিনের শব্দ খেলা যা ব্যবহারকারীরা ভয়েসের মাধ্যমে খেলতে পারেন।
একটি বাটন যা ব্যবহারকারীরা গেমটি শুরু করার জন্য চাপতে পারেন।
একটি বাটন যা ব্যবহারকারীরা গেমটি আবার খেলার জন্য চাপতে পারেন।

এই কোডল্যাবটি শেষ করার পর, আপনার সম্পন্ন করা অ্যাকশনটির কথোপকথনের প্রবাহটি নিম্নরূপ হবে:

সহকারী: Welcome to Snow Pal! Would you like to start playing the game?

ব্যবহারকারী: Yes.

সহকারী: Try guessing a letter in the word or guessing the word.

ব্যবহারকারী: . I guess the letter E

সহকারী: Let's see if your guess is there...E is right. Right on! Good guess.

খেলা শেষ না হওয়া পর্যন্ত ব্যবহারকারী অক্ষর অথবা অজানা শব্দটি অনুমান করতে থাকে।

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

কীভাবে একটি ইন্টারেক্টিভ ক্যানভাস অ্যাকশন তৈরি এবং স্থাপন করবেন
ব্যবহারকারীর ভয়েস এবং টাচ ইনপুটের উপর ভিত্তি করে ওয়ার্ড গেমটি কীভাবে আপডেট করবেন
বিভিন্ন পদ্ধতি ব্যবহার করে ওয়েব অ্যাপে ডেটা পাঠানোর উপায়
আপনার ইন্টারেক্টিভ ক্যানভাস অ্যাকশন কীভাবে ডিবাগ করবেন

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

এই কোডল্যাবের পূর্বশর্তগুলো নিম্নরূপ:

একটি ওয়েব ব্রাউজার, যেমন গুগল ক্রোম
আপনার পছন্দের একটি IDE বা টেক্সট এডিটর
আপনার মেশিনে Node.js , npm এবং git ইনস্টল করা আছে

এই কোডল্যাবে ব্যবহৃত কোড বুঝতে সাহায্য করার জন্য জাভাস্ক্রিপ্ট (ES6) সম্পর্কে ধারণা থাকা বিশেষভাবে বাঞ্ছনীয়।

ঐচ্ছিক: সম্পূর্ণ নমুনা কোডটি নিন

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

২. ইন্টারেক্টিভ ক্যানভাস পরিচিতি

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

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

কথোপকথন শেষ না হওয়া পর্যন্ত ব্যবহারকারী কণ্ঠস্বর বা স্পর্শের মাধ্যমে ওয়েব অ্যাপে তথ্য প্রদান করেন।

চিত্র ২. ইন্টারেক্টিভ ক্যানভাস দিয়ে নির্মিত একটি অ্যাকশন।

এই কোডল্যাবে, আপনার প্রজেক্টটি নিম্নলিখিত তিনটি প্রধান অংশে বিভক্ত:

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

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

মোটামুটিভাবে, Snow Pal Action-এর মধ্যে থাকা Conversational Action, webhook, এবং web app নিম্নলিখিত উপায়ে কাজ করে:

কথোপকথনমূলক ক্রিয়াটি ব্যবহারকারীকে শব্দটির কোনো একটি অক্ষর অথবা পুরো শব্দটি অনুমান করতে বলে।
ব্যবহারকারী স্মার্ট ডিসপ্লেতে থাকা স্নো প্যাল ওয়েব অ্যাপে বলেন , "আমার মনে হয় অক্ষর i"।
ব্যবহারকারীর ইনপুট আপনার কনভারসেশনাল অ্যাকশনে পাঠানো হয়, যা আপনার অ্যাকশনস বিল্ডার এবং/অথবা অ্যাকশনস এসডিকে প্রজেক্টে সংজ্ঞায়িত করা আছে।
কনভারসেশনাল অ্যাকশনটি ব্যবহারকারীর ইনপুট প্রসেস করে এবং ইনপুটের ধরনের ওপর নির্ভর করে, হয় ওয়েবহুকের লজিক ট্রিগার করে যা ওয়েব অ্যাপটিকে আপডেট করে, অথবা সরাসরি ওয়েব অ্যাপটি আপডেট করার জন্য মেটাডেটা পাঠায়।
ওয়েব অ্যাপটি আপডেট হয়ে দেখায় যে শব্দটিতে অক্ষরটি কোথায় আছে, এবং ব্যবহারকারীকে আবার অনুমান করতে বলা হয়।

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

৩. স্থাপন করুন

আপনার গুগল অনুমতি সেটিংস পরীক্ষা করুন

এই কোডল্যাবের জন্য আপনার তৈরি করা অ্যাকশনটি পরীক্ষা করার জন্য, আপনাকে প্রয়োজনীয় অনুমতিগুলো সক্রিয় করতে হবে যাতে অ্যাকশন কনসোল সিমুলেটর আপনার অ্যাকশনটি অ্যাক্সেস করতে পারে। অনুমতিগুলো সক্রিয় করতে, এই ধাপগুলো অনুসরণ করুন:

অ্যাক্টিভিটি কন্ট্রোলস- এ যান।
প্রয়োজনে আপনার গুগল অ্যাকাউন্ট দিয়ে সাইন ইন করুন।
নিম্নলিখিত অনুমতিগুলি সক্রিয় করুন:

ওয়েব ও অ্যাপ কার্যকলাপ
ওয়েব ও অ্যাপ অ্যাক্টিভিটি-এর অধীনে, ‘গুগল পরিষেবা ব্যবহারকারী সাইট, অ্যাপ এবং ডিভাইস থেকে ক্রোম হিস্ট্রি ও অ্যাক্টিভিটি অন্তর্ভুক্ত করুন’ চেকবক্সটি নির্বাচন করুন।

gactions কমান্ড-লাইন ইন্টারফেসটি ইনস্টল করুন

এই কোডল্যাবে, আপনি অ্যাকশনস কনসোল এবং আপনার লোকাল ফাইল সিস্টেমের মধ্যে অ্যাকশনস প্রজেক্ট সিঙ্ক্রোনাইজ করতে gactions কমান্ড-লাইন ইন্টারফেস (CLI) টুলটি ব্যবহার করবেন।

gactions CLI ইনস্টল করতে, "Install the gactions command-line tool" বিভাগে দেওয়া নির্দেশাবলী অনুসরণ করুন।

ফায়ারবেস কমান্ড-লাইন ইন্টারফেস ইনস্টল করুন

ফায়ারবেস কমান্ড-লাইন ইন্টারফেস (CLI) ব্যবহার করে আপনি আপনার অ্যাকশনস প্রজেক্ট ক্লাউড ফাংশনসে ডেপ্লয় করতে এবং আপনার ওয়েব অ্যাপ হোস্ট করতে পারেন।

এই কোডল্যাবে Firebase CLI ইনস্টল করার জন্য npm ব্যবহার করা হয়েছে। npm ইনস্টল করে নিতে ভুলবেন না, যা সাধারণত Node.js-এর সাথেই আসে।

CLI ইনস্টল বা আপগ্রেড করতে, একটি টার্মিনাল খুলুন এবং নিম্নলিখিত npm কমান্ডটি চালান:

npm install -g firebase-tools

CLI সঠিকভাবে ইনস্টল হয়েছে কিনা তা যাচাই করতে, নিম্নলিখিত কমান্ডটি চালান:

firebase --version

নিশ্চিত করুন যে Firebase CLI-এর ভার্সন ৮ বা তার বেশি, যাতে ক্লাউড ফাংশনের জন্য প্রয়োজনীয় সব লেটেস্ট ফিচার এতে থাকে। যদি তা না হয়, তাহলে আপগ্রেড করার জন্য npm install -g firebase-tools চালান।

Firebase-এ লগ ইন করতে, নিম্নলিখিত কমান্ডটি চালান:

firebase login

Firebase-এ লগ ইন করার সময়, নিশ্চিত করুন যে আপনি সেই একই Google অ্যাকাউন্ট ব্যবহার করছেন যা আপনি আপনার Actions প্রজেক্ট তৈরি করতে ব্যবহার করেছিলেন।

রিপোজিটরি ক্লোন করুন

এই অংশে, আপনি এই কোডল্যাবের জন্য প্রয়োজনীয় ফাইলগুলো ক্লোন করবেন। এই ফাইলগুলো পেতে, নিচের ধাপগুলো অনুসরণ করুন:

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

git clone https://github.com/actions-on-google/actions-builder-canvas-codelab-nodejs

start/ ডিরেক্টরিটি খুলুন। এই রিপোজিটরিটিতে নিম্নলিখিত গুরুত্বপূর্ণ ডিরেক্টরিগুলো রয়েছে, যেগুলো নিয়ে আপনি কাজ করবেন:

public/ : এই ডিরেক্টরিতে আপনার ওয়েব অ্যাপের HTML, CSS, এবং JavaScript কোড থাকে।
sdk/custom/ : এই ডিরেক্টরিতে আপনার কনভারসেশনাল অ্যাকশনের (সিন, ইনটেন্ট এবং টাইপ) লজিক থাকে।
sdk/webhooks/ : এই ডিরেক্টরিটি হলো আপনার ওয়েবহুক এবং এতে গেমের লজিক থাকে।

চিত্র ৩. start ডিরেক্টরি কোডের গঠন।

৪. আপনার অ্যাকশন প্রজেক্টটি সেট আপ করুন।

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

একটি অ্যাকশন প্রজেক্ট তৈরি করুন

আপনার অ্যাকশনস প্রজেক্ট হলো আপনার অ্যাকশনের জন্য একটি ধারক। এই কোডল্যাবের জন্য আপনার অ্যাকশনস প্রজেক্ট তৈরি করতে, এই ধাপগুলো অনুসরণ করুন:

অ্যাকশন কনসোলটি খুলুন।
নতুন প্রজেক্ট-এ ক্লিক করুন।
একটি প্রজেক্টের নাম টাইপ করুন, যেমন canvas-codelab । এই নামটি আপনার অভ্যন্তরীণ ব্যবহারের জন্য। পরবর্তীতে, আপনি আপনার প্রজেক্টের জন্য একটি বাহ্যিক নাম নির্ধারণ করতে পারেন।

প্রজেক্ট তৈরি করুন -এ ক্লিক করুন।
‘আপনি কী ধরনের অ্যাকশন তৈরি করতে চান?’ স্ক্রিনে, গেম কার্ডটি নির্বাচন করুন।
পরবর্তী ধাপে যান।
খালি প্রজেক্ট কার্ডটি নির্বাচন করুন।
নির্মাণ শুরু করতে ক্লিক করুন।

আপনার কাজের জন্য প্রজেক্ট আইডি সংরক্ষণ করুন।

প্রজেক্ট আইডি হলো আপনার অ্যাকশনের একটি অনন্য শনাক্তকারী। এই কোডল্যাবের বিভিন্ন ধাপে আপনার প্রজেক্ট আইডি প্রয়োজন হবে।

আপনার প্রজেক্ট আইডি পুনরুদ্ধার করতে, এই ধাপগুলো অনুসরণ করুন:

অ্যাকশন কনসোলে, তিনটি উল্লম্ব ডটে ক্লিক করুন > প্রজেক্ট সেটিংস ।

প্রজেক্ট আইডিটি কপি করুন।

একটি বিলিং অ্যাকাউন্ট সংযুক্ত করুন

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

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

গুগল ক্লাউড প্ল্যাটফর্মের বিলিং পেজে যান।
বিলিং অ্যাকাউন্ট যোগ করুন অথবা অ্যাকাউন্ট তৈরি করুন- এ ক্লিক করুন।
আপনার পেমেন্টের তথ্য পূরণ করুন।
আমার ফ্রি ট্রায়াল শুরু করুন -এ ক্লিক করুন অথবা জমা দিন এবং বিলিং চালু করুন ।
গুগল ক্লাউড বিলিং পেজে যান।
আমার প্রজেক্ট ট্যাবে ক্লিক করুন।
তিনটি ডটে ক্লিক করুন > বিলিং পরিবর্তন করুন ।
ড্রপ-ডাউন মেনু থেকে আপনার কনফিগার করা বিলিং অ্যাকাউন্টটি নির্বাচন করুন।
অ্যাকাউন্ট সেট করুন -এ ক্লিক করুন।

চার্জ এড়ানোর জন্য, 'আপনার প্রজেক্ট পরিষ্করণ ' বিভাগে দেওয়া ধাপগুলো অনুসরণ করুন।

ওয়েব অ্যাপ স্থাপন করুন

এই অংশে, আপনি Firebase CLI ব্যবহার করে আপনার ওয়েব অ্যাপ ( Snow Pal গেম) ডেপ্লয় করবেন। ডেপ্লয় করার পর, আপনি ওয়েব অ্যাপটির URL সংগ্রহ করে ব্রাউজারে গেমটি কেমন দেখায় তা দেখতে পারবেন।

আপনার ওয়েব অ্যাপটি ডেপ্লয় করতে, এই ধাপগুলো অনুসরণ করুন:

টার্মিনালে start/ ডিরেক্টরিতে যান।
নিম্নলিখিত কমান্ডটি চালান, যেখানে {PROJECT_ID} এর জায়গায় আপনার প্রজেক্ট আইডি বসান:

firebase deploy --project {PROJECT_ID} --only hosting

কয়েক মিনিট পর, আপনি " Deploy complete! " দেখতে পাবেন, যা নির্দেশ করে যে আপনি সফলভাবে Snow Pal ওয়েব অ্যাপটি Firebase-এ ডেপ্লয় করেছেন।

ব্রাউজারে স্নো প্যাল গেমটি দেখতে, এই ধাপগুলো অনুসরণ করুন:

আপনার টার্মিনালের আউটপুট থেকে হোস্টিং URL-টি সংগ্রহ করুন। URL-টি নিম্নলিখিত ফর্ম্যাটে থাকা উচিত: https://<PROJECT_ID>.web.app

যদি আপনার টার্মিনাল আউটপুটে URL-টি দেখা না যায়, তাহলে আপনি নিম্নলিখিত ধাপগুলো অনুসরণ করে ওয়েব অ্যাপের URL-টি সংগ্রহ করতে পারেন:

ফায়ারবেস কনসোল খুলুন।
বিকল্পগুলির তালিকা থেকে আপনার অ্যাকশন প্রজেক্টটি নির্বাচন করুন।
ন্যাভিগেশন বারে Develop > Hosting- এ ক্লিক করুন।
ড্যাশবোর্ড ট্যাবের অধীনে, আপনি আপনার প্রোজেক্টের ডোমেইনগুলোর একটি তালিকা দেখতে পাবেন। URL-টি কপি করুন। এটি নিম্নলিখিত ফর্মে থাকা উচিত: https://<PROJECT_ID>.web.app

ব্রাউজারে URL-টি পেস্ট করুন। আপনি একটি 'স্টার্ট গেম' বাটন সহ ' স্নো প্যাল' গেমের শুরুর স্ক্রিনটি দেখতে পাবেন:

অ্যাকশনস প্রজেক্টে ওয়েব অ্যাপ ইউআরএল এবং প্রজেক্ট আইডি যোগ করুন

এরপর, actions.intent.MAIN.yaml ফাইলে আপনার ওয়েব অ্যাপ ইউআরএল এবং প্রজেক্ট আইডি যোগ করুন। ওয়েব অ্যাপ ইউআরএল যোগ করলে কনভারসেশনাল অ্যাকশনটি জানতে পারে কোন ইউআরএল-এ ডেটা পাঠাতে হবে, অন্যদিকে settings.yaml এ প্রজেক্ট আইডি যোগ করলে আপনি অ্যাকশন কনসোলে ডাউনলোড করা ফাইলগুলো সঠিক প্রজেক্টে পুশ করতে পারবেন।

আপনার ওয়েব অ্যাপের URL এবং প্রজেক্ট আইডি যোগ করতে, এই ধাপগুলো অনুসরণ করুন:

আপনার টেক্সট এডিটরে start/sdk/custom/global/actions.intent.MAIN.yaml ফাইলটি খুলুন।
URL ফিল্ডে প্লেসহোল্ডার স্ট্রিংটি আপনার ওয়েব অ্যাপের URL দিয়ে প্রতিস্থাপন করুন।
আপনার টেক্সট এডিটরে start/sdk/settings/settings.yaml ফাইলটি খুলুন।
projectId ফিল্ডে প্লেসহোল্ডার স্ট্রিংটি আপনার প্রজেক্ট আইডি দিয়ে প্রতিস্থাপন করুন।

প্রজেক্টটি অ্যাকশন কনসোলে পুশ করুন

আপনার লোকাল প্রজেক্ট দিয়ে অ্যাকশনস কনসোল আপডেট করতে, আপনাকে আপনার অ্যাকশনস প্রজেক্টটি অ্যাকশনস কনসোলে পুশ করতে হবে। এটি করার জন্য, এই ধাপগুলো অনুসরণ করুন:

sdk ডিরেক্টরিতে যান:

cd sdk/

আপনার লোকাল ফাইল সিস্টেমের কনফিগারেশন অ্যাকশন কনসোলে কপি করতে, নিম্নলিখিত কমান্ডটি চালান:

gactions push

ওয়েবহুক স্থাপন করুন

যখন আপনি gactions push চালিয়েছেন, তখন আপনি অ্যাকশনস কনসোলে ওয়েবহুকের প্রাথমিক কোডটি ইম্পোর্ট করেছেন। এই কোডল্যাবের বাকি অংশে, আপনি অ্যাকশনস কনসোলের মধ্যেই আপনার ওয়েবহুক কোড সম্পাদনা করতে পারবেন। এই পর্যায়ে, আপনি অ্যাকশনস কনসোল থেকেই ওয়েবহুকটি ডিপ্লয় করতে পারেন।

আপনার ওয়েবহুক স্থাপন করতে, এই ধাপগুলো অনুসরণ করুন:

অ্যাকশন কনসোলে, নেভিগেশন বারে থাকা ডেভেলপ- এ ক্লিক করুন।
ন্যাভিগেশন বারে থাকা ওয়েবহুক ট্যাবে ক্লিক করুন।
Deploy Fulfillment-এ ক্লিক করুন।

সতর্কতা: 'Deploy Fulfillment'-এ ক্লিক করার পর একটি 'Billing account needed ' বার্তা প্রদর্শিত হবে। আপনার ওয়েবহুক ডিপ্লয় করার জন্য, আপনাকে Google Cloud-এ আপনার প্রোজেক্টের সাথে একটি বিলিং অ্যাকাউন্ট যুক্ত করতে হবে। একটি বিলিং অ্যাকাউন্ট সেট আপ করতে, 'Open Cloud console'-এ ক্লিক করুন এবং বিলিং অ্যাকাউন্ট লিঙ্ক করার ধাপগুলো অনুসরণ করুন। চার্জ এড়ানোর জন্য আপনি এই কোডল্যাবের শেষে এই প্রোজেক্টটি ডিলিট করে দিতে পারেন। আরও তথ্যের জন্য, ' Clean-up' বিভাগটি দেখুন।

ক্লাউড ফাংশন দ্বারা আপনার ফুলফিলমেন্ট প্রোভিশন এবং ডিপ্লয় করতে কয়েক মিনিট সময় লাগতে পারে। আপনি একটি ‘ ক্লাউড ফাংশন ডিপ্লয়মেন্ট চলছে... ’ বার্তা দেখতে পাবেন। কোডটি সফলভাবে ডিপ্লয় হয়ে গেলে, বার্তাটি আপডেট হয়ে ‘ আপনার ক্লাউড ফাংশন ডিপ্লয়মেন্ট আপ টু ডেট’ হয়ে যাবে ।

সিমুলেটরে পরীক্ষা করুন

এই পর্যায়ে, আপনার অ্যাকশনটি ওয়েব অ্যাপের সাথে লিঙ্ক করা হয়েছে। আপনার অ্যাকশনটি চালু করলে ওয়েব অ্যাপটি প্রদর্শিত হচ্ছে কিনা, তা নিশ্চিত করতে আপনি অ্যাকশন কনসোল সিমুলেটর ব্যবহার করতে পারেন।

আপনার অ্যাকশনটি পরীক্ষা করতে, এই ধাপগুলো অনুসরণ করুন:

অ্যাকশন কনসোল নেভিগেশন বারে, টেস্ট- এ ক্লিক করুন।
ইনপুট ফিল্ডে Talk to Snow Pal sample টাইপ করুন এবং Enter চাপুন।
ইনপুট ফিল্ডে Yes টাইপ করুন এবং Enter চাপুন। বিকল্পভাবে, Start game-এ ক্লিক করুন।

আপনি এখনও অক্ষর বা শব্দ অনুমান করার লজিকটি কনফিগার করেননি, তাই আপনি যদি কোনো শব্দ বা অক্ষর অনুমান করেন, তাহলে আপনি এই উত্তরটি পাবেন, "...ভুল। চেষ্টা চালিয়ে যান! মনে হচ্ছে এটি সঠিকভাবে কাজ করার জন্য আমাদের আরও কিছু কার্যকারিতা যোগ করতে হবে।"

৫. ইন্টারেক্টিভ ক্যানভাসের পরিকাঠামো বুঝুন

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

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

কথোপকথনমূলক ক্রিয়া

আপনার অ্যাকশনের কনভারসেশনাল অ্যাকশন কম্পোনেন্টটি ব্যবহারকারীর ইনপুট শনাক্ত করা, সেটিকে প্রসেস করা এবং উপযুক্ত সিনে পাঠানোর কাজটি করে, যেখানে ব্যবহারকারীর জন্য একটি প্রতিক্রিয়া তৈরি করা হয়। উদাহরণস্বরূপ, যদি কোনো ব্যবহারকারী স্নো প্যাল গেমে বলেন "আমার মনে হয় অক্ষরটি 'e'" , তাহলে আপনার কনভারসেশনাল অ্যাকশনটি অক্ষরটিকে একটি ইনটেন্ট প্যারামিটার হিসেবে নিয়ে উপযুক্ত গেম লজিকে পাঠিয়ে দেয়, যা অনুমানটি সঠিক কিনা তা নির্ধারণ করে এবং সেই অনুযায়ী ওয়েব অ্যাপটি আপডেট করে। আপনি অ্যাকশনস বিল্ডারের (একটি ওয়েব-ভিত্তিক IDE) অ্যাকশনস কনসোলে এই কনভারসেশনাল লজিকটি দেখতে এবং পরিবর্তন করতে পারেন। নিচের স্ক্রিনশটটিতে অ্যাকশনস বিল্ডারের মধ্যে আপনার কনভারসেশনাল অ্যাকশনের একটি অংশ দেখানো হয়েছে:

চিত্র ৪. অ্যাকশনস বিল্ডারে Main invocation একটি দৃশ্যায়ন।

এই স্ক্রিনশটটি আপনার অ্যাকশনের Main invocation দেখাচ্ছে, যা ব্যবহারকারীরা "Hey Google, talk to Snow Pal sample"-এর মতো কোনো বাক্য বলার সময় মেলান। যখন ব্যবহারকারী আপনার অ্যাকশনটি চালু করেন, তখন Main invocation একটি canvas প্রতিক্রিয়া সহ একটি প্রম্পট পাঠায়, যেটিতে আপনার ওয়েব অ্যাপের URL থাকে।

আপনার অ্যাকশনের প্রথম canvas রেসপন্সে অবশ্যই ওয়েব অ্যাপের URL অন্তর্ভুক্ত থাকতে হবে। এই রেসপন্সটি অ্যাসিস্ট্যান্টকে ব্যবহারকারীর ডিভাইসে সেই ঠিকানায় ওয়েব অ্যাপটি রেন্ডার করতে নির্দেশ দেয়। অ্যাকশনস বিল্ডারের অতিরিক্ত canvas রেসপন্সগুলোতে ` send_state_data_to_canvas_app নামের একটি ফিল্ড থাকতে পারে, যা true তে সেট করা থাকে। যখন ইন্টেন্টটি মিলে যায়, তখন এই ফিল্ডটি ইন্টেন্টের নাম এবং যেকোনো প্যারামিটার ভ্যালু ওয়েব অ্যাপে পাঠিয়ে দেয় এবং ব্যবহারকারীর ইনপুট থেকে পাওয়া এই ডেটার উপর ভিত্তি করে ওয়েব অ্যাপটি আপডেট হয়।

ওয়েবহুক

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

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

ওয়েব অ্যাপ

চিত্র ৫. একটি ইন্টারেক্টিভ ক্যানভাস অ্যাকশনে কনভারসেশনাল অ্যাকশন, ওয়েবহুক এবং ওয়েব অ্যাপের মধ্যকার মিথস্ক্রিয়ার একটি চাক্ষুষ উপস্থাপনা।

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

কনভারসেশনাল অ্যাকশন এবং ওয়েব অ্যাপের মধ্যে যোগাযোগ

আপনার কনভারসেশনাল অ্যাকশন এবং ওয়েব অ্যাপের মধ্যে যোগাযোগ চালু করতে হবে, যাতে ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে আপনার ওয়েব অ্যাপ আপডেট হতে পারে। উদাহরণস্বরূপ, যদি কোনো ব্যবহারকারী বলেন "আমার মনে হয় অক্ষরটি 'f'" ,

কনভারসেশনাল অ্যাকশন থেকে ওয়েব অ্যাপে 'f' অক্ষরটি সরবরাহ করতে হবে, যাতে ওয়েব অ্যাপটি সেই অনুযায়ী আপডেট হতে পারে। কনভারসেশনাল অ্যাকশন থেকে ওয়েব অ্যাপে ব্যবহারকারীর ইনপুট পাঠানোর জন্য, আপনাকে অবশ্যই ইন্টারেক্টিভ ক্যানভাস এপিআই (API) লোড করতে হবে।

এই এপিআই-এর স্ক্রিপ্টটি /public/index.html এ অন্তর্ভুক্ত রয়েছে, যা স্নো প্যাল গেমের মূল এইচটিএমএল ফাইল। এই ফাইলটি আপনার ইউআই দেখতে কেমন হবে তা নির্ধারণ করে এবং এতে বেশ কয়েকটি স্ক্রিপ্ট লোড হয়:

index.html

<!-- Load Assistant Interactive Canvas API -->
 <script type="text/javascript" src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

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

/public/js/action.js ফাইলে, কলব্যাক ডিক্লেয়ার এবং রেজিস্টার করার জন্য Action নামে একটি প্রি-কনফিগারড ক্লাস রয়েছে। Action ক্লাসটি হলো Interactive Canvas API-এর একটি র‍্যাপার। scene.js ফাইলে create() ফাংশন দিয়ে যখন ওয়েব অ্যাপটি তৈরি করা হয়, তখন একটি নতুন Action ইনস্ট্যান্স তৈরি হয় এবং setCallbacks() কল করা হয়, যা নিচের কোড স্নিপেটে দেখানো হয়েছে:

দৃশ্য.জেএস

// Set Assistant at game level.
this.assistant = new Action(this);
// Call setCallbacks to register Assistant Action callbacks.
this.assistant.setCallbacks();

/public/js/action.js ফাইলের Action ক্লাসে ` setCallbacks() ফাংশনটি সংজ্ঞায়িত করা হয়েছে। এই ফাংশনটি কলব্যাকগুলো ঘোষণা করে এবং গেম তৈরির সময় সেগুলোকে ইন্টারেক্টিভ ক্যানভাস এপিআই-এর সাথে রেজিস্টার করে।

  setCallbacks() {
    // Declare the Interactive Canvas Action callbacks.
    const callbacks = {
      onUpdate: (data) => {
     ...
    // Called by the Interactive Canvas web app once web app has loaded to
    // register callbacks.
    this.canvas.ready(callbacks);
  }

setCallbacks() ফাংশনটি onUpdate() কলব্যাক ঘোষণা করে, যা প্রতিবার Canvas প্রতিক্রিয়া পাঠানোর সময় কল করা হয়।

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

ব্যবহারকারীর ইনপুটের ভিত্তিতে ওয়েব অ্যাপ আপডেট করা হচ্ছে

এই কোডল্যাবে, আপনি ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে ওয়েব অ্যাপ আপডেট করার জন্য একটি কমান্ড ম্যাপ ব্যবহার করবেন। উদাহরণস্বরূপ, যখন Welcome সিন-এ start_game ইন্টেন্টটি ম্যাচ হয়, তখন প্রম্পটে অন্তর্ভুক্ত canvas রেসপন্সটি ওয়েব অ্যাপে পাঠানো হয়। onUpdate() ফাংশনটি canvas রেসপন্স থেকে মেটাডেটা পার্স করে এবং START_GAME কমান্ডটি কল করে, যা আবার scene.js এর start() ফাংশনটিকে কল করে এবং একটি নতুন গেম সেশন শুরু করার জন্য ওয়েব অ্যাপটি আপডেট করে।

scene.js এর start() ফাংশনটি updateCanvasState() নামক আরেকটি ফাংশনকেও কল করে, যেটি setCanvasState() নামক একটি মেথড ব্যবহার করে এমন স্টেট ডেটা যোগ করে যা আপনার ওয়েবহুক অ্যাক্সেস করতে পারে।

প্রতিটি কমান্ডের শেষে ` updateCanvasState() ` মেথডটি কল করা হয় (আপনি এই কমান্ডগুলো পুরো কোডল্যাব জুড়ে যোগ করতে থাকবেন) এবং এটি ওয়েব অ্যাপের স্টেট আপডেট করে। প্রতিবার updateCanvasState() কল করার ফলে, বর্তমান স্টেটের উপর ভিত্তি করে displayedWord এবং incorrectGuesses এর ভ্যালুগুলো আপডেট হয়।

দৃশ্য.জেএস

...
  updateCanvasState() {
    window.interactiveCanvas.setCanvasState({
      correctWord: this.word.text,
      displayedWord: this.word.displayText.text,
      incorrectGuesses: this.incorrectGuesses,
    });

আপডেট করা অবস্থাটি তখন পরবর্তী কথোপকথনের পালার জন্য উপলব্ধ হয়। আপনি ওয়েবহুকে conv.context.canvas.state এর মাধ্যমে এই অবস্থাটি অ্যাক্সেস করতে পারেন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে:

index.js

...
  let displayedWord = conv.context.canvas.state.displayedWord;
...

৬. অনুমান করার কার্যকারিতা যোগ করুন

এই অংশে, আপনি আপনার অ্যাকশনে guess কার্যকারিতা যোগ করবেন, যা ব্যবহারকারীকে শব্দের ভেতরের অক্ষরগুলো অথবা সম্পূর্ণ শব্দটি অনুমান করতে সক্ষম করে।

কথোপকথনমূলক ক্রিয়া

সিমুলেটর সেকশনের টেস্ট অংশে, আপনি একটি প্রতিক্রিয়া পেয়েছেন যাতে লেখা ছিল, "মনে হচ্ছে এটি সঠিকভাবে কাজ করার জন্য আমাদের আরও কিছু কার্যকারিতা যোগ করতে হবে।" এখন, আপনি অ্যাকশন কনসোল থেকে সেই প্রম্পটটি মুছে ফেলতে পারেন, যাতে আপনি শুধুমাত্র ওয়েবহুকটি কল করেন ( Game সিনে, guess ইন্টেন্টটি ম্যাচ হলে একটি ওয়েবহুক কল করার জন্য আগে থেকেই কনফিগার করা আছে)।

guess ইনটেন্ট মিলে গেলে স্ট্যাটিক প্রম্পটটি সরাতে, এই ধাপগুলো অনুসরণ করুন:

অ্যাকশন কনসোলে, নেভিগেশন বারে থাকা সিনস (Scenes) -এ ক্লিক করুন।
Game দৃশ্যে যেতে গেমে ক্লিক করুন।
ব্যবহারকারীর অভিপ্রায় হ্যান্ডলিং-এর অধীনে 'যখন অনুমান মিলে যায় ' বিকল্পে ক্লিক করুন। প্রম্পটটি সরাতে 'প্রম্পট পাঠান' বিকল্প থেকে টিক চিহ্ন তুলে দিন।
সংরক্ষণ করুন- এ ক্লিক করুন।

ওয়েবহুক

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

আপনার ওয়েবহুক আপডেট করতে এই ধাপগুলো অনুসরণ করুন:

অ্যাকশন কনসোলে, নেভিগেশন বারে থাকা ওয়েবহুক- এ ক্লিক করুন।
index.js guess handler-এর অধীনে নিম্নলিখিত কোডটি যোগ করুন:

index.js (বিভাগ A):

// Add Section A `conv.add(new Canvas({` content here.
conv.add(new Canvas({
  data: {
    command: 'CORRECT_ANSWER',
    displayedWord: displayedWord
  },
}));

index.js (বিভাগ B):

// Add Section B `conv.add(new Canvas({` content here.
conv.add(new Canvas({
  data: {
    command: 'INCORRECT_ANSWER',
  },
}));

সেভ ফুলফিলমেন্ট- এ ক্লিক করুন।
Deploy Fulfillment-এ ক্লিক করুন। ডেপ্লয়মেন্ট সম্পূর্ণ হলে, একটি বার্তা আসবে যে "আপনার ক্লাউড ফাংশন ডেপ্লয়মেন্ট আপ টু ডেট" ।

ওয়েব অ্যাপ

আপনি এখন আপনার ওয়েব অ্যাপকে CORRECT_ANSWER এবং INCORRECT_ANSWER কমান্ডগুলো পরিচালনা করার জন্য কনফিগার করতে পারেন।

আপনার টেক্সট এডিটরে public/js/action.js খুলুন।
CORRECT_ANSWER এবং INCORRECT_ANSWER কমান্ডগুলো পরিচালনা করার জন্য ওয়েব অ্যাপটি আপডেট করুন:

action.js (বিভাগ C):

// Add Section C `CORRECT_ANSWER: (params) => {` content here.
      CORRECT_ANSWER: (params) => {
        this.gameScene.correctAnswer(params);
      },
      INCORRECT_ANSWER: (params) => {
        this.gameScene.incorrectAnswer();
      },

ওয়েব অ্যাপটি আপডেট করতে নিম্নলিখিত কমান্ডটি চালান:

firebase deploy --project {PROJECT_ID} --only hosting

সিমুলেটরে আপনার অ্যাকশন পরীক্ষা করুন

এই পর্যায়ে, আপনার অ্যাকশন কোনো অনুমান সঠিক নাকি ভুল তা শনাক্ত করতে পারে এবং সেই অনুযায়ী ওয়েব অ্যাপটি আপডেট করতে পারে।

আপনার অ্যাকশনটি পরীক্ষা করতে, এই ধাপগুলো অনুসরণ করুন:

ন্যাভিগেশন বারে, টেস্ট- এ ক্লিক করুন।
ইনপুট ফিল্ডে Talk to Snow Pal sample টাইপ করুন এবং Enter চাপুন।
ইনপুট ফিল্ডে Yes টাইপ করুন এবং Enter চাপুন। বিকল্পভাবে, Yes বাটনে ক্লিক করুন।
যে অক্ষরটি অনুমান করতে চান, সেটি ইনপুট ফিল্ডে টাইপ করুন এবং Enter চাপুন।

কোডটি বুঝুন

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

যেসব অ্যাকশন ইন্টারেক্টিভ ক্যানভাস ব্যবহার করে, সেগুলোর ক্ষেত্রে ওয়েবহুক থেকে ওয়েব অ্যাপে ডেটা প্রেরণের সাধারণ প্রবাহটি নিম্নরূপ:

ব্যবহারকারীর ইনপুটটি এমন একটি ইন্টেন্টের সাথে মিলে যায়, যেটিতে একটি Canvas রেসপন্স অন্তর্ভুক্ত রয়েছে।
কনভারসেশনাল অ্যাকশন বা ওয়েবহুক Canvas রেসপন্স পাঠায়, যা onUpdate() কলব্যাককে ট্রিগার করে।
onUpdate() কলব্যাকটি এমন কাস্টম লজিকের সাথে সংযুক্ত থাকে যা সেই অনুযায়ী ওয়েব অ্যাপটি আপডেট করে।

এই নির্দিষ্ট প্রজেক্টটির ক্ষেত্রে কোডটি নিম্নোক্তভাবে কাজ করে:

যখন ব্যবহারকারী guess অভিপ্রায়ের সাথে মিলিয়ে দেয়, তখন অ্যাকশনস বিল্ডার ব্যবহারকারীর ইনপুট থেকে অক্ষরটিকে একটি প্যারামিটার হিসেবে গ্রহণ করে।
অ্যাকশনস বিল্ডার আপনার ওয়েবহুকের মধ্যে থাকা guess হ্যান্ডলারকে কল করে, যেটিতে ব্যবহারকারীর অনুমান করা অক্ষরটি শব্দটিতে আছে কি না, তা নির্ধারণ করার লজিক থাকে।
guess হ্যান্ডলারটিতে দুটি Canvas প্রতিক্রিয়া থাকে— একটি অক্ষরটি সঠিক হলে কার্যকর হয়, এবং অন্যটি অক্ষরটি ভুল হলে কার্যকর হয়। প্রতিটি Canvas প্রতিক্রিয়া ওয়েব অ্যাপে উপযুক্ত ডেটা ( CORRECT_ANSWER বা INCORRECT_ANSWER কমান্ড) প্রেরণ করে।
Canvas রেসপন্সের data ফিল্ডে থাকা ডেটা action.js এর onUpdate() মেথডে পাঠানো হয়। onUpdate() scene.js এর কমান্ড ম্যাপে থাকা উপযুক্ত কমান্ডটিকে কল করে।
কমান্ড ম্যাপটি scene.js ফাইলের correctAnswer() এবং incorrectAnswer() ফাংশনগুলোকে নির্দেশ করে। এই ফাংশনগুলো ব্যবহারকারীর অনুমান অনুযায়ী ওয়েব অ্যাপটিকে যথাযথভাবে আপডেট করে এবং আপনার ওয়েব অ্যাপ থেকে ওয়েবহুকে স্টেট ডেটা পাঠানোর জন্য setCanvasState() কল করে।

৭. জয়/পরাজয়ের কার্যকারিতা যোগ করুন

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

কথোপকথনমূলক ক্রিয়া

ব্যবহারকারীর গেমে জয় বা পরাজয় নিয়ন্ত্রণকারী কার্যকারিতাটি guess ইন্টেন্টের মধ্যেই কনফিগার করা থাকবে, তাই আপনাকে অ্যাকশনস বিল্ডারে কোনো অতিরিক্ত কনফিগারেশন করতে হবে না।

ওয়েবহুক

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

আপনার ওয়েবহুক আপডেট করতে এই ধাপগুলো অনুসরণ করুন:

অ্যাকশন কনসোলে, নেভিগেশন বারে থাকা ওয়েবহুক- এ ক্লিক করুন।
index.js guess handler-এর অধীনে নিম্নলিখিত কোডটি যোগ করুন:

index.js (বিভাগ D):

// Add Section D `if (userHasWon)` content here.
    if (userHasWon) {
      conv.add(`<speak>Let's see if your guess is there...<break
        time='2500ms'/> ${guess} is right. That spells ${correctWord}!  
        ${randomArrayItem(WIN_RESPONSES)}</speak>`);
      conv.add(new Canvas({
        data: {
          command: 'WIN_GAME',
          displayedWord: displayedWord
        },
      }));
      conv.add(`<speak>${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
    } else {

index.js (বিভাগ E):

// Add Section E `}` here.
}

index.js (বিভাগ F):

// Add Section F `Check if the user has exceeded the maximum` content here.
// Check if the user has exceeded the maximum amount of max guesses allowed.
    const userHasLost = conv.context.canvas.state.incorrectGuesses + 1 >= MAX_INCORRECT_GUESSES;
    if (userHasLost) {
      conv.add(`<speak>Let's see if your guess is there...<break
      time='2500ms'/> ${guess} is wrong. Sorry you lost. The word is ${correctWord}!</speak>`);
      conv.add(new Canvas({
        data: {
          command: 'LOSE_GAME',
        },
      }));
      conv.add(`<speak>${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
    } else {

index.js (বিভাগ G):

// Add Section G `}` here.
}

সেভ ফুলফিলমেন্ট- এ ক্লিক করুন।
Deploy Fulfillment-এ ক্লিক করুন। ডেপ্লয়মেন্ট সম্পূর্ণ হলে, একটি বার্তা আসবে যে "আপনার ক্লাউড ফাংশন ডেপ্লয়মেন্ট আপ টু ডেট" ।

এখানে, ব্যবহারকারীরা গেমে জিতলে বা হারলে তা পরিচালনা করার জন্য আপনি WIN_GAME এবং LOSE_GAME কমান্ডসহ দুটি Canvas রেসপন্স যোগ করেছেন। পরবর্তী অংশে, ব্যবহারকারী জিতেছে নাকি হেরেছে তার উপর ভিত্তি করে ওয়েব অ্যাপটি আপডেট করার কার্যকারিতা যোগ করবেন।

ওয়েব অ্যাপ

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

আপনার টেক্সট এডিটরে public/js/action.js খুলুন।
WIN_GAME এবং LOSE_GAME কমান্ডগুলো পরিচালনা করার জন্য আপনার ওয়েব অ্যাপটি আপডেট করুন:

action.js (বিভাগ H):

// Add Section H `WIN_GAME: (params) => {` content here.
      WIN_GAME: (params) => {
        this.gameScene.winGame(params);
      },
      LOSE_GAME: (params) => {
        this.gameScene.loseGame();
      },

ওয়েব অ্যাপটি আপডেট করতে নিম্নলিখিত কমান্ডটি চালান:

firebase deploy --project {PROJECT_ID} --only hosting

সিমুলেটরে আপনার অ্যাকশন পরীক্ষা করুন

এই পর্যায়ে, আপনার অ্যাকশনটি ব্যবহারকারীর খেলা জেতা বা হারার বিষয়টি পরিচালনা করতে পারে এবং প্রতিটি ফলাফলের জন্য উপযুক্ত স্ক্রিন প্রদর্শন করতে পারে।

আপনার অ্যাকশনটি পরীক্ষা করতে, এই ধাপগুলো অনুসরণ করুন:

অ্যাকশন কনসোল নেভিগেশন বারে, টেস্ট- এ ক্লিক করুন।
ইনপুট ফিল্ডে Talk to Snow Pal sample টাইপ করুন এবং Enter চাপুন।
ইনপুট ফিল্ডে Yes টাইপ করুন এবং Enter চাপুন। বিকল্পভাবে, স্টার্ট গেম বোতামে ক্লিক করুন।
অক্ষর ও শব্দ অনুমান করতে থাকুন যতক্ষণ না আপনি জেতেন বা হারেন।

আপনি যদি পুনরায় খেলার অনুরোধ করেন, তাহলে একটি বার্তা পাবেন যেখানে বলা থাকবে যে পুনরায় খেলার জন্য প্রয়োজনীয় কার্যকারিতা এখনও যোগ করা হয়নি। আপনি পরবর্তী বিভাগে এই কার্যকারিতাটি যোগ করবেন।

কোডটি বুঝুন

জয় এবং পরাজয়ের কার্যকারিতা অনুমান করার কার্যকারিতার মতোই কাজ করে—ব্যবহারকারী guess উদ্দেশ্যটি মেলান, এবং আপনার ওয়েবহুক ব্যবহারকারীর অনুমানটি মূল্যায়ন করে। যদি তাদের অনুমান সঠিক হয়, কোডটি পরীক্ষা করে দেখে যে ব্যবহারকারী জিতেছেন কিনা; যদি তিনি জিতে থাকেন, তাহলে ওয়েব অ্যাপে WIN_GAME কমান্ডটি পাঠানো হয়। যদি তাদের অনুমান ভুল হয়, কোডটি পরীক্ষা করে দেখে যে তিনি হেরেছেন কিনা; যদি তিনি হেরে থাকেন, তাহলে ওয়েব অ্যাপে LOSE_GAME কমান্ডটি পাঠানো হয়। এই কমান্ডগুলো scene.js এ থাকা winGame() এবং loseGame() ফাংশনগুলোকে ট্রিগার করে, যা ওয়েব অ্যাপটিকে জয় বা পরাজয়ের স্ক্রিন দেখানোর জন্য এবং গেমের স্টেট আপডেট করার জন্য আপডেট করে।

৮. পুনরায় চালানোর কার্যকারিতা যোগ করুন

এই অংশে, আপনি এমন একটি কার্যকারিতা যোগ করবেন যা ব্যবহারকারীকে "আবার খেলুন" বলতে অথবা ওয়েব অ্যাপে থাকা 'আবার খেলুন' বোতামে ক্লিক করে একটি নতুন গেম শুরু করার সুযোগ দেবে। আপনি অ্যাকশনস বিল্ডারে play_again ইন্টেন্টটি এমনভাবে পরিবর্তন করবেন যাতে এটি একটি canvas রেসপন্স পাঠায় যা ওয়েব অ্যাপটিকে যথাযথভাবে আপডেট করে, এবং এমন লজিক যোগ করবেন যা ব্যবহারকারী 'আবার খেলুন' বোতামে ক্লিক করলে play_again ইন্টেন্টটিকে ট্রিগার করে।

কথোপকথনমূলক ক্রিয়া

পূর্ববর্তী বিভাগে যখন আপনি আপনার অ্যাকশনটি পরীক্ষা করেছিলেন, তখন আবার গেমটি খেলার চেষ্টা করলে আপনি নিম্নলিখিত প্রম্পটটি পেয়েছিলেন: "এটি খুব ভালো হবে, কিন্তু আমরা এই কার্যকারিতাটি পরবর্তী কোনো বিভাগে তৈরি করব। আপাতত, শুধু অ্যাকশনটি রিসেট করুন।" আপনি এখন এই প্রম্পটটি মুছে ফেলতে পারেন এবং এর পরিবর্তে এমন একটি প্রম্পট যুক্ত করতে পারেন যা ব্যবহারকারী অন্য একটি গেমের অনুরোধ করলে উত্তর দেবে ( "ঠিক আছে, এই নিন আরেকটি গেম!" ) এবং ওয়েব অ্যাপটিকে একটি নতুন গেম শুরু করার জন্য ট্রিগার করতে একটি canvas রেসপন্স অন্তর্ভুক্ত করবে।

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

অ্যাকশন কনসোলে, সিন ড্রপ-ডাউন মেনুতে ক্লিক করুন।
গেমের দৃশ্যটিতে ক্লিক করুন।
ইউজার ইন্টেন্ট হ্যান্ডলিং-এর অধীনে যখন play_again মিলে যায় তখন ক্লিক করুন।
প্রম্পটটি নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:

candidates:
  - first_simple:
      variants:
        - speech: 'Okay, here''s another game!' 
    canvas:
      sendStateDataToCanvasApp: true

সংরক্ষণ করুন- এ ক্লিক করুন।

ওয়েবহুক

এই কোডল্যাবে, ওয়েবহুক গেমের লজিক পরিচালনা করে। যেহেতু ‘প্লে-অ্যাগেইন’ কার্যকারিতার জন্য কোনো ধরনের লজিক ভ্যালিডেশনের প্রয়োজন হয় না, তাই আপনার ওয়েবহুক কল করার দরকার নেই; এর পরিবর্তে, আপনি ওয়েব অ্যাপে প্রয়োজনীয় ডেটা পাঠানোর জন্য সরাসরি অ্যাকশনস বিল্ডার থেকে একটি canvas রেসপন্স পাঠাতে পারেন (যা আপনি আগের সেকশনে কনফিগার করেছেন)।

ওয়েব অ্যাপ

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

Open public/js/action.js in your text editor.
Update the web app to handle the PLAY_AGAIN command:

action.js (Section I):

// Add Section I `PLAY_AGAIN: (params) => {` content here.
      PLAY_AGAIN: (params) => {
        this.gameScene.start();
      },

Open public/js/scene.js in your text editor.
Update the web app to start a new game session when the user clicks the ' Play Again ' button:

scene.js (Section J):

// Add Section J `sendTextQuery` content here.
     window.interactiveCanvas.sendTextQuery('Play again');

Run the following command to update the web app:

firebase deploy --project {PROJECT_ID} --only hosting

Test your Action in the simulator

Your Action can now start a new game session when the user says "Play again" or clicks the Play Again button.

আপনার অ্যাকশনটি পরীক্ষা করতে, এই ধাপগুলো অনুসরণ করুন:

In the navigation bar, click Test .
Type Talk to Snow Pal sample in the Input field and press Enter .
Type Yes in the Input field and press Enter . Alternatively, click the Start game button.
Guess letters and words until you either win or lose.
Type Play again in the Input field and press Enter . Alternatively, click the Play again button.

কোডটি বুঝুন

When you tested your Action, you could start a new game through either voice input ( "Play again" ) or touch input (click the Play again button).

For the voice input option, when the user says "Play again" or some variation of that, the play_again intent is matched and adds a prompt ( "Okay, here's another game!" ) to the prompt queue. The canvas response included in the prompt sends the intent name and other metadata to the web app. The intent name is passed to the onUpdate() callback, which maps the corresponding command, PLAY_AGAIN , to the command map in action.js . The PLAY_AGAIN command triggers the start() function in scene.js and updates the web app with a new game session.

For the touch input option, you use sendTextQuery() , an Interactive Canvas API that allows you to trigger an intent through touch input, to make the button work.

In this codelab, you use sendTextQuery() to invoke the play_again intent when a user clicks the Play again button. The Play again argument matches a training phrase in the play_again intent and triggers this intent in the same way a user saying "Play again" does. The play_again intent then triggers logic that updates the web app and begins a new game session.

9. Update PLAY_GAME built-in intent

In this section, you update the PLAY_GAME built-in intent .

The PLAY_GAME built-in intent allows users to invoke your Action when they make a general request, such as "I want to play a game."

The source code contains the PLAY_GAME built-in intent, which is located at /sdk/custom/global/actions.intent.PLAY_GAME.yaml . This is reflected in the console in the Invocation section as PLAY_GAME , as shown in the following screenshot:

To enable users to invoke your Action through this built-in intent, you need to add a canvas response with the web app URL to the PLAY_GAME built-in intent. To do so, follow these steps:

In the Actions console, click PLAY_GAME in the navigation bar.
Update the prompt to include your web app URL, as shown in the following snippet:

candidates:
  - canvas:
      url: 'https://<PROJECT_ID>.web.app'

Click Save .

Test your Action in the simulator

Your Action now supports the PLAY_GAME built-in intent.

আপনার অ্যাকশনটি পরীক্ষা করতে, এই ধাপগুলো অনুসরণ করুন:

In the navigation bar, click Test .
Click Test built-in intent handling .
Click Invoke Action .

Your Action should be invoked in the simulator.

10. Appendix: Troubleshooting the Interactive Canvas Action

In this section, you learn how to debug your Interactive Canvas Action when it's not working properly. The Snow Pal project comes pre-packaged with a debugging overlay that you can enable. The overlay displays all console.log() and console.error() output to the bottom right of the display, as shown in the following screenshot:

To enable this overlay, open the /public/css/main.css file and comment the line display: none !important; , as shown in the following snippet:

main.css

.debug {
 display: flex;
 flex-direction: column;

/* Comment below to view debug overlay */
/* display: none !important; */

 width: 500px;
 height: 150px;
 right: 0;
 bottom: 0;
 position: absolute;
}

আপনার প্রকল্পটি পরিচ্ছন্ন করুন [প্রস্তাবিত]

To avoid incurring possible charges, it is recommended to remove projects that you don't intend to use. To delete the projects you created in this codelab, follow these steps:

To delete the Google Cloud Project and resources, complete the steps listed in the Shutting down (deleting) projects section.

ঐচ্ছিক: অ্যাকশন কনসোল থেকে আপনার প্রজেক্টটি অবিলম্বে মুছে ফেলার জন্য, 'একটি প্রজেক্ট মুছুন' বিভাগে তালিকাভুক্ত ধাপগুলি সম্পূর্ণ করুন। আপনি যদি এই ধাপটি সম্পূর্ণ না করেন, তাহলে প্রায় ৩০ দিন পর আপনার প্রজেক্টটি স্বয়ংক্রিয়ভাবে মুছে যাবে।

11. Congratulations!

You've completed the introductory Interactive Canvas codelab and now have the skills necessary to build your own Interactive Canvas Action.

What you've learned

How to build, deploy, and test an Interactive Canvas Action
How to use Canvas responses to update the web app
How to use different methods to enhance your Action, like sendTextQuery() and setCanvasState()
How to debug your Action

আরও জানুন

Check out the following resources to learn more about Interactive Canvas:

Interactive Canvas documentation : The official Actions on Google documentation for Interactive Canvas.
Interactive Canvas sample : The code for a simple Interactive Canvas game that lets you spin a triangle and modify its colors.
Games portal : The guidelines for building games on Google Assistant.

মতামত সমীক্ষা

যাওয়ার আগে, আপনার অভিজ্ঞতা সম্পর্কে একটি সংক্ষিপ্ত সমীক্ষা পূরণ করুন।