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

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

1. ওভারভিউ

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

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

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

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

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

আপনি কি নির্মাণ করবেন

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

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

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

সহকারী: 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.

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

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

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

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

এই কোডল্যাবের পূর্বশর্তগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:

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

এই কোডল্যাবে ব্যবহৃত কোডটি বুঝতে সাহায্য করার জন্য JavaScript (ES6) এর সাথে পরিচিতি দৃঢ়ভাবে সুপারিশ করা হয়।

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

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

2. ইন্টারেক্টিভ ক্যানভাস ভূমিকা

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

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

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

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

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

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

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

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

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

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

3. সেট আপ করুন

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

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

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

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

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

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

গ্যাকশন CLI ইনস্টল করতে, গ্যাকশন কমান্ড-লাইন টুল ইনস্টল করুন বিভাগে নির্দেশাবলী অনুসরণ করুন।

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

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

এই কোডল্যাব ফায়ারবেস CLI ইনস্টল করতে npm ব্যবহার করে। npm ইনস্টল করা নিশ্চিত করুন, যা সাধারণত Node.js এর সাথে আসে।

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

npm install -g firebase-tools

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

firebase --version

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

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

firebase login

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

সংগ্রহস্থল ক্লোন করুন

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

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

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

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

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

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

4. আপনার অ্যাকশন প্রকল্প সেট আপ করুন

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

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

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

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

প্রকল্প তৈরি করুন ক্লিক করুন।
আপনি কি ধরনের অ্যাকশন তৈরি করতে চান? স্ক্রীন, গেম কার্ড নির্বাচন করুন।
পরবর্তী ক্লিক করুন.
ফাঁকা প্রকল্প কার্ড নির্বাচন করুন.
বিল্ডিং শুরু করুন ক্লিক করুন।

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

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

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

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

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

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

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

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

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

চার্জ এড়াতে, আপনার প্রকল্প পরিষ্কার করুন বিভাগে পদক্ষেপগুলি অনুসরণ করুন৷

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

এই বিভাগে, আপনি Firebase CLI ব্যবহার করে আপনার ওয়েব অ্যাপ ( স্নো পাল গেম) স্থাপন করেন। একবার আপনি স্থাপন করলে, আপনি ওয়েব অ্যাপের URL পুনরুদ্ধার করতে পারেন এবং দেখতে পারেন যে গেমটি একটি ব্রাউজারে কেমন দেখায়৷

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

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

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

কয়েক মিনিট পর, আপনি দেখতে পাবেন " Deploy complete! " , যা নির্দেশ করে যে আপনি ফায়ারবেসে স্নো পাল ওয়েব অ্যাপ সফলভাবে স্থাপন করেছেন৷

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

আপনার টার্মিনালের আউটপুটে দেওয়া হোস্টিং URLটি পুনরুদ্ধার করুন। URLটি নিম্নলিখিত আকারে হওয়া উচিত: https://<PROJECT_ID>.web.app৷

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

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

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

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

এরপর, actions.intent.MAIN.yaml ফাইলে আপনার ওয়েব অ্যাপ URL এবং প্রোজেক্ট আইডি যোগ করুন। ওয়েব অ্যাপ ইউআরএল যোগ করলে কথোপকথনমূলক অ্যাকশন জানতে দেয় কোন ইউআরএলে ডেটা পাঠাতে হবে, 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 চালান, তখন আপনি অ্যাকশন কনসোলে প্রারম্ভিক ওয়েবহুক কোড আমদানি করেছেন। এই কোডল্যাবের বাকি অংশের জন্য, আপনি অ্যাকশন কনসোলের মধ্যে আপনার ওয়েবহুক কোড সম্পাদনা করতে পারেন। এই মুহুর্তে, আপনি অ্যাকশন কনসোল থেকে ওয়েবহুক স্থাপন করতে পারেন।

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

অ্যাকশন কনসোলে, নেভিগেশন বারে বিকাশে ক্লিক করুন।
নেভিগেশন বারে ওয়েবহুক ট্যাবে ক্লিক করুন।
ডিপ্লয় ফিফিলমেন্ট ক্লিক করুন।

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

ক্লাউড ফাংশনগুলির জন্য আপনার পূর্ণতা বিধান এবং স্থাপন করতে কয়েক মিনিট সময় লাগতে পারে৷ আপনি একটি ক্লাউড ফাংশন স্থাপনা প্রগতিতে দেখতে পাবেন... বার্তা৷ কোডটি সফলভাবে মোতায়েন হলে, আপনার ক্লাউড ফাংশন স্থাপনায় বার্তা আপডেট হয় আপ টু ডেট ৷

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

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

আপনার ক্রিয়া পরীক্ষা করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

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

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

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

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

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

কথোপকথনমূলক কর্ম

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

চিত্র 4. অ্যাকশন বিল্ডার-এ Main invocation একটি ভিজ্যুয়ালাইজেশন।

এই স্ক্রিনশটটি আপনার অ্যাকশনের জন্য Main invocation দেখায়, যা ব্যবহারকারীরা যখন "Hey Google, স্নো পাল নমুনার সাথে কথা বলুন" এর মতো একটি বাক্যাংশ বলে তখন মেলে। যখন ব্যবহারকারী আপনার অ্যাকশন আহ্বান করে, Main invocation একটি canvas প্রতিক্রিয়া সহ একটি প্রম্পট পাঠায়, যাতে আপনার ওয়েব অ্যাপের URL থাকে।

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

ওয়েবহুক

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

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

ওয়েব অ্যাপ

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

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

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

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

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

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

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 ক্লাসটি ইন্টারেক্টিভ ক্যানভাস 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();

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

  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 প্রতিক্রিয়া পাঠান তখন বলা হয়।

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

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

এই কোডল্যাবে, আপনি ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে ওয়েব অ্যাপ আপডেট করতে একটি কমান্ড ম্যাপ ব্যবহার করেন। উদাহরণস্বরূপ, যখন start_game উদ্দেশ্যটি Welcome দৃশ্যে মিলে যায়, তখন প্রম্পটে অন্তর্ভুক্ত 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;
...

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

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

কথোপকথনমূলক কর্ম

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

guess অভিপ্রায় মিলে গেলে স্ট্যাটিক প্রম্পটটি সরাতে, এই পদক্ষেপগুলি অনুসরণ করুন:

অ্যাকশন কনসোলে, নেভিগেশন বারে দৃশ্যে ক্লিক করুন।
Game দৃশ্যে যেতে গেমটিতে ক্লিক করুন।
ব্যবহারকারীর অভিপ্রায় পরিচালনার অধীনে অনুমান মিললে ক্লিক করুন। প্রম্পট মুছে ফেলার জন্য প্রম্পটগুলি সাফ করুন।
Save এ ক্লিক করুন।

ওয়েবহুক

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

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

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

দ্রষ্টব্য: এই কোডল্যাবে, আপনার যোগ করা কোড স্নিপেটগুলিকে বর্ণানুক্রমিক বিভাগে বিভক্ত করা হয়েছে। আপনি যে ফাইলগুলি পরিবর্তন করেন সেগুলিতে মন্তব্যগুলি অন্তর্ভুক্ত থাকে যা নির্দিষ্ট করে যে প্রতিটি স্নিপেট কোথায় যোগ করা উচিত (উদাহরণস্বরূপ, // Add section F } here যোগ করুন)। মন্তব্য করা লাইনের পরে সংশ্লিষ্ট স্নিপেট যোগ করুন।

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

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

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

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

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

ওয়েব অ্যাপ

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

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

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

// 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 টিপুন। বিকল্পভাবে, হ্যাঁ বোতামে ক্লিক করুন।
ইনপুট ক্ষেত্রে আপনি যে চিঠিটি অনুমান করতে চান তা টাইপ করুন এবং 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() কে কল করে।

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

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

কথোপকথনমূলক কর্ম

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

ওয়েবহুক

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

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

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

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

// 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 (বিভাগ জি):

// Add Section G `}` here.
}

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

এখানে, আপনি 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 কমান্ডটি ওয়েব অ্যাপে পাঠানো হয়। এই কমান্ড winGame() এবং loseGame() ফাংশন ট্রিগার করে scene.js , যা ওয়েব অ্যাপ আপডেট করে জেতা বা হারানো স্ক্রীন উপস্থাপন করতে এবং গেমের অবস্থা আপডেট করে।

8. প্লে-আগেন কার্যকারিতা যোগ করুন

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

কথোপকথনমূলক কর্ম

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

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

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

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

Save এ ক্লিক করুন।

ওয়েবহুক

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

ওয়েব অ্যাপ

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

আপনার টেক্সট এডিটরে public/js/action.js খুলুন।
PLAY_AGAIN কমান্ডটি পরিচালনা করতে ওয়েব অ্যাপ্লিকেশন আপডেট করুন:

অ্যাকশন.জেএস (বিভাগ I):

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

আপনার পাঠ্য সম্পাদকটিতে public/js/scene.js খুলুন।
যখন ব্যবহারকারী ' আবার খেলুন ' বোতামটি ক্লিক করেন তখন একটি নতুন গেম সেশন শুরু করতে ওয়েব অ্যাপটি আপডেট করুন:

দৃশ্য.জেএস (বিভাগ জে):

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

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

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

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

ব্যবহারকারী যখন "আবার খেলুন" বলে বা প্লে আবার বোতামটি ক্লিক করে তখন আপনার ক্রিয়াটি এখন একটি নতুন গেম সেশন শুরু করতে পারে।

আপনার ক্রিয়া পরীক্ষা করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

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

কোড বুঝতে

আপনি যখন আপনার ক্রিয়াটি পরীক্ষা করেছেন, আপনি ভয়েস ইনপুট ( "আবার খেলুন" ) বা টাচ ইনপুট ( আবার প্লে বোতামটি ক্লিক করুন) এর মাধ্যমে একটি নতুন গেম শুরু করতে পারেন।

ভয়েস ইনপুট বিকল্পের জন্য, যখন ব্যবহারকারী "আবার খেলুন" বা এর কিছু প্রকারভেদ বলে, play_again অভিপ্রায়টি মিলে যায় এবং প্রম্পট কাতারে একটি প্রম্পট ( "ঠিক আছে, এখানে অন্য একটি গেম!" ) যুক্ত করে। প্রম্পটে অন্তর্ভুক্ত canvas প্রতিক্রিয়াটি ওয়েব অ্যাপ্লিকেশনটিতে অভিপ্রায় নাম এবং অন্যান্য মেটাডেটা প্রেরণ করে। অভিপ্রায় নামটি onUpdate() কলব্যাকের কাছে প্রেরণ করা হয়েছে, যা সংশ্লিষ্ট কমান্ড, PLAY_AGAIN ম্যাপ করে action.js কমান্ড মানচিত্রে। PLAY_AGAIN কমান্ডটি start() ফাংশনটি scene.js ট্রিগার করে J

টাচ ইনপুট বিকল্পের জন্য, আপনি sendTextQuery() , একটি ইন্টারেক্টিভ ক্যানভাস এপিআই ব্যবহার করেন যা আপনাকে টাচ ইনপুটটির মাধ্যমে একটি অভিপ্রায় ট্রিগার করতে, বোতামটি কাজ করতে দেয়।

এই কোডল্যাব -এ, আপনি যখন play_again অভিপ্রায়টি অনুরোধ করতে sendTextQuery() ব্যবহার করেন যখন কোনও ব্যবহারকারী আবার প্লে বোতামটি ক্লিক করেন। Play again আর্গুমেন্টটি play_again অভিপ্রায় একটি প্রশিক্ষণ বাক্যাংশের সাথে মেলে এবং কোনও ব্যবহারকারী "আবার খেলুন" বলে একইভাবে এই অভিপ্রায়টি ট্রিগার করে। play_again অভিপ্রায়টি তারপরে যুক্তি ট্রিগার করে যা ওয়েব অ্যাপ্লিকেশন আপডেট করে এবং একটি নতুন গেম সেশন শুরু করে।

9. আপডেট প্লে_গেম অন্তর্নির্মিত অভিপ্রায়

এই বিভাগে, আপনি PLAY_GAME অন্তর্নির্মিত অভিপ্রায় আপডেট করেছেন।

PLAY_GAME অন্তর্নির্মিত অভিপ্রায় ব্যবহারকারীরা যখন সাধারণ অনুরোধ করেন তখন ব্যবহারকারীরা আপনার ক্রিয়াটি আহ্বান করার অনুমতি দেয়, যেমন "আমি একটি গেম খেলতে চাই"।

উত্স কোডটিতে PLAY_GAME অন্তর্নির্মিত অভিপ্রায় রয়েছে, যা /sdk/custom/global/actions.intent.PLAY_GAME.yaml গ্লোবাল/অ্যাকশনস.ইন্টেন্ট.প্লে_গেম.ইমলে অবস্থিত। এটি নিম্নলিখিত স্ক্রিনশট হিসাবে দেখানো হয়েছে, PLAY_GAME হিসাবে অনুরোধ বিভাগে কনসোলে প্রতিফলিত হয়েছে:

ব্যবহারকারীদের এই অন্তর্নির্মিত অভিপ্রায়টির মাধ্যমে আপনার ক্রিয়াটি অনুরোধ করতে সক্ষম করতে, আপনাকে PLAY_GAME অন্তর্নির্মিত অভিপ্রায়টিতে ওয়েব অ্যাপ্লিকেশন ইউআরএল সহ একটি canvas প্রতিক্রিয়া যুক্ত করতে হবে। এটি করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

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

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

Save এ ক্লিক করুন।

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

আপনার ক্রিয়াটি এখন PLAY_GAME অন্তর্নির্মিত অভিপ্রায় সমর্থন করে।

আপনার ক্রিয়া পরীক্ষা করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

নেভিগেশন বারে, পরীক্ষায় ক্লিক করুন।
টেস্ট অন্তর্নির্মিত অভিপ্রায় হ্যান্ডলিং ক্লিক করুন।
আহ্বান কর্ম ক্লিক করুন।

আপনার ক্রিয়াটি সিমুলেটারে প্রার্থনা করা উচিত।

10. পরিশিষ্ট: ইন্টারেক্টিভ ক্যানভাস অ্যাকশন সমস্যা সমাধান

এই বিভাগে, আপনি যখন আপনার ইন্টারেক্টিভ ক্যানভাস অ্যাকশনটি সঠিকভাবে কাজ করছেন না তখন কীভাবে ডিবাগ করবেন তা শিখবেন। স্নো পাল প্রকল্পটি একটি ডিবাগিং ওভারলে সহ প্রাক-প্যাকেজযুক্ত আসে যা আপনি সক্ষম করতে পারেন। ওভারলে সমস্ত console.log() console.error()

এই ওভারলে সক্ষম করতে, /public/css/main.css ফাইলটি খুলুন এবং লাইন display: none !important; , নিম্নলিখিত স্নিপেটে যেমন দেখানো হয়েছে:

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;
}

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

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

গুগল ক্লাউড প্রকল্প এবং সংস্থানগুলি মুছতে, শাটিং ডাউন (মুছে ফেলা) প্রকল্প বিভাগে তালিকাভুক্ত পদক্ষেপগুলি সম্পূর্ণ করুন।

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

11. অভিনন্দন!

আপনি প্রারম্ভিক ইন্টারেক্টিভ ক্যানভাস কোডল্যাব সম্পন্ন করেছেন এবং এখন আপনার নিজস্ব ইন্টারেক্টিভ ক্যানভাস ক্রিয়া তৈরির জন্য প্রয়োজনীয় দক্ষতা রয়েছে।

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

কীভাবে একটি ইন্টারেক্টিভ ক্যানভাস ক্রিয়া তৈরি, মোতায়েন এবং পরীক্ষা করবেন
ওয়েব অ্যাপ্লিকেশন আপডেট করতে কীভাবে Canvas প্রতিক্রিয়াগুলি ব্যবহার করবেন
আপনার ক্রিয়া বাড়ানোর জন্য কীভাবে বিভিন্ন পদ্ধতি ব্যবহার করবেন, যেমন sendTextQuery() এবং setCanvasState()
আপনার ক্রিয়াটি কীভাবে ডিবাগ করবেন

আরও জানুন

ইন্টারেক্টিভ ক্যানভাস সম্পর্কে আরও জানতে নিম্নলিখিত সংস্থানগুলি দেখুন:

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

প্রতিক্রিয়া সমীক্ষা

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