Actions Builder की मदद से, Google Assistant के लिए इंटरैक्टिव कैनवस ऐक्शन बनाना

1. खास जानकारी

Actions on Google, डेवलपर प्लैटफ़ॉर्म है. इसकी मदद से, Google Assistant की सुविधाओं को बढ़ाने के लिए सॉफ़्टवेयर बनाया जा सकता है. Google Assistant, Google की वर्चुअल पर्सनल असिस्टेंट है. यह एक अरब से ज़्यादा डिवाइसों पर उपलब्ध है. जैसे, स्मार्ट स्पीकर, फ़ोन, कार, टीवी, हेडफ़ोन वगैरह. उपयोगकर्ता, Google Assistant से बातचीत करके काम पूरे करते हैं. जैसे, किराने का सामान खरीदना या टैक्सी बुक करना. फ़िलहाल, Assistant से कौन-कौनसे काम किए जा सकते हैं, इसकी पूरी सूची देखने के लिए कार्रवाइयों की डायरेक्ट्री देखें. डेवलपर के तौर पर, Actions on Google का इस्तेमाल करके, उपयोगकर्ताओं और तीसरे पक्ष की आपकी सेवा के बीच बातचीत को आसानी से बनाया और मैनेज किया जा सकता है. इससे उपयोगकर्ताओं को बेहतर और काम का अनुभव मिलता है.

यह कोडलैब, एक ऐडवांस मॉड्यूल है. यह उन लोगों के लिए है जिनके पास Google Assistant के लिए ऐक्शन बनाने का कुछ अनुभव है. अगर आपको Actions on Google के साथ डेवलपमेंट का कोई अनुभव नहीं है, तो शुरुआती कोडलैब ( लेवल 1 और लेवल 2) को पूरा करके, इस प्लैटफ़ॉर्म के बारे में जानें. इन मॉड्यूल में, आपको कई सुविधाओं के बारे में जानकारी मिलेगी. इनकी मदद से, अपने ऐक्शन की सुविधाओं को बढ़ाया जा सकता है और ऑडियंस की संख्या बढ़ाई जा सकती है.

इस कोड लैब में, इंटरैक्टिव कैनवस का इस्तेमाल किया जाता है. यह Google Assistant पर बनाया गया एक फ़्रेमवर्क है. इसकी मदद से, बातचीत की सुविधा वाली कार्रवाई में फ़ुल-स्क्रीन गेम जोड़ा जा सकता है. यह गेम एक इंटरैक्टिव वेब ऐप्लिकेशन है. बातचीत के दौरान, Assistant इसे उपयोगकर्ता को जवाब के तौर पर भेजती है. इसके बाद, उपयोगकर्ता स्मार्ट डिसप्ले और Android मोबाइल डिवाइसों पर, बोलकर या लिखकर गेम खेल सकता है.

इस कोडलैब में, आपको पूरा गेम खुद नहीं बनाना है. इसके बजाय, आपको पहले से बना हुआ गेम Snow Pal डिप्लॉय करना है. साथ ही, कोडलैब के दौरान गेम का लॉजिक जोड़ना है. स्नो पाल, हैंगमैन गेम का एक नया वर्शन है. इस गेम में आपको एक शब्द के लिए कई खाली जगहें दी जाती हैं. आपको उन अक्षरों का अनुमान लगाना होता है जो उस शब्द में हो सकते हैं. हर गलत अनुमान पर, आपका स्नो पाल थोड़ा और पिघल जाता है. अगर आपका स्नो पाल पूरी तरह से पिघलने से पहले, आपको शब्द का पता चल जाता है, तो आप गेम जीत जाते हैं.

पहली इमेज. Snow Pal गेम का कुछ हिस्सा पूरा हुआ

आपको क्या बनाना है

इस कोडलैब में, आपको एक ऐसी कार्रवाई बनाने का तरीका बताया जाएगा जो इंटरैक्टिव कैनवस का इस्तेमाल करती है. आपके ऐक्शन में ये सुविधाएं होंगी:

फ़ुल-स्क्रीन पर दिखने वाला एक ऐसा गेम जिसे आवाज़ से खेला जा सकता है
एक बटन, जिसे दबाकर उपयोगकर्ता गेम शुरू कर सकते हैं
एक बटन, जिसे उपयोगकर्ता गेम को फिर से चलाने के लिए दबा सकते हैं

इस कोडलैब को पूरा करने के बाद, आपकी पूरी की गई कार्रवाई में बातचीत का यह फ़्लो होगा:

Assistant: Welcome to Snow Pal! Would you like to start playing the game?

उपयोगकर्ता: Yes.

Assistant: Try guessing a letter in the word or guessing the word.

उपयोगकर्ता: I guess the letter E.

Assistant: Let's see if your guess is there...E is right. Right on! Good guess.

उपयोगकर्ता, गेम खत्म होने तक अक्षरों का अनुमान लगाता रहता है या पूरे शब्द का अनुमान लगाता रहता है.

आपको क्या सीखने को मिलेगा

इंटरैक्टिव कैनवस ऐक्शन बनाने और उसे डिप्लॉय करने का तरीका
उपयोगकर्ता की आवाज़ और टच इनपुट के आधार पर, शब्दों वाले गेम को अपडेट करने का तरीका
अलग-अलग तरीकों का इस्तेमाल करके, वेब ऐप्लिकेशन को डेटा पास करने का तरीका
इंटरैक्टिव कैनवस ऐक्शन को डीबग करने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

इस कोडलैब के लिए, ये ज़रूरी शर्तें पूरी करनी होंगी:

कोई वेब ब्राउज़र, जैसे कि Google Chrome
अपनी पसंद का आईडीई या टेक्स्ट एडिटर
आपके कंप्यूटर पर Node.js, npm, और git इंस्टॉल होना चाहिए

हमारा सुझाव है कि आपको JavaScript (ES6) के बारे में जानकारी हो, ताकि इस कोडलैब में इस्तेमाल किए गए कोड को समझने में आपको आसानी हो.

ज़रूरी नहीं: पूरा सैंपल कोड पाना

इस कोडलैब में, आपको अधूरे वर्शन से चरण-दर-चरण सैंपल बनाना है. अगर आपको पूरा सैंपल चाहिए, तो इसे GitHub रिपॉज़िटरी से भी पाया जा सकता है.

2. Interactive Canvas के बारे में जानकारी

Interactive Canvas, Google Assistant पर बनाया गया एक फ़्रेमवर्क है. इसकी मदद से, बातचीत वाली कार्रवाई में फ़ुल-स्क्रीन विज़ुअल और ऐनिमेशन जोड़े जा सकते हैं.

इंटरैक्टिव कैनवस का इस्तेमाल करने वाली कोई कार्रवाई, बातचीत वाली सामान्य कार्रवाई की तरह ही काम करती है. हालांकि, इंटरैक्टिव कैनवस ऐक्शन में यह अतिरिक्त सुविधा होती है कि वह उस डिवाइस को जवाब भेज सकता है जो फ़ुल-स्क्रीन वेब ऐप्लिकेशन खोलता है.

उपयोगकर्ता, बातचीत खत्म होने तक वेब ऐप्लिकेशन को बोलकर या टच करके इनपुट देता है.

दूसरी इमेज. इंटरैक्टिव कैनवस की मदद से बनाई गई कोई कार्रवाई.

इस कोडलैब में, आपके प्रोजेक्ट को इन तीन मुख्य हिस्सों में बांटा गया है:

वेब ऐप्लिकेशन: वेब ऐप्लिकेशन की फ़ाइलों में, आपके वेब ऐप्लिकेशन के विज़ुअल और ऐनिमेशन का कोड होता है. साथ ही, इसमें उपयोगकर्ता के इनपुट के आधार पर वेब ऐप्लिकेशन को अपडेट करने का लॉजिक भी होता है.
बातचीत वाली कार्रवाई: बातचीत वाली कार्रवाई में, बातचीत का लॉजिक शामिल होता है. यह लॉजिक, उपयोगकर्ता के इनपुट को पहचानता है, उसे प्रोसेस करता है, और उसका जवाब देता है.
वेबहुक: वेबहुक, गेम के लॉजिक को मैनेज करता है. इस कोडलैब के लिए, वेबुक को अपने गेम सर्वर के तौर पर इस्तेमाल किया जा सकता है.

इस कोडलैब के हर सेक्शन के लिए, आपको वेब ऐप्लिकेशन, बातचीत वाली कार्रवाई, और वेबुक में बदलाव करना होगा, ताकि इंटरैक्टिव कैनवस ऐक्शन में फ़ंक्शन जोड़ा जा सके.

बड़े लेवल पर, Snow Pal ऐक्शन में बातचीत वाले ऐक्शन, वेबुक, और वेब ऐप्लिकेशन इस तरह काम करते हैं:

बातचीत वाले ऐक्शन में, उपयोगकर्ता को शब्द में मौजूद किसी अक्षर का अनुमान लगाने या पूरे शब्द का अनुमान लगाने के लिए कहा जाता है.
उपयोगकर्ता, स्मार्ट डिसप्ले पर Snow Pal वेब ऐप्लिकेशन से कहता है कि "मुझे लगता है कि यह अक्षर i है".
उपयोगकर्ता के इनपुट को आपकी Conversational Action पर भेजा जाता है. इसे Actions Builder और/या Actions SDK प्रोजेक्ट में तय किया जाता है.
बातचीत वाली कार्रवाई, उपयोगकर्ता के इनपुट को प्रोसेस करती है. इसके बाद, इनपुट के आधार पर, वेब ऐप्लिकेशन को अपडेट करने वाले वेबहुक में लॉजिक को ट्रिगर करती है या वेब ऐप्लिकेशन को सीधे तौर पर अपडेट करने के लिए मेटाडेटा भेजती है.
वेब ऐप्लिकेशन अपडेट होता है, ताकि यह दिखाया जा सके कि अक्षर शब्द में कहां दिखता है. इसके बाद, उपयोगकर्ता से फिर से अनुमान लगाने के लिए कहा जाता है.

इंटरैक्टिव कैनवस के इन्फ़्रास्ट्रक्चर के बारे में जानकारी सेक्शन में, इंटरैक्टिव कैनवस के काम करने के तरीके के बारे में ज़्यादा जानें. अब जब आपको बुनियादी बातें पता चल गई हैं, तो इस कोडलैब के लिए अपना एनवायरमेंट सेट अप किया जा सकता है.

3. सेट अप करें

Google खाते से जुड़ी अनुमतियों की सेटिंग देखना

इस कोडलैब के लिए बनाई गई कार्रवाई को टेस्ट करने के लिए, आपको ज़रूरी अनुमतियां चालू करनी होंगी. इससे Actions console सिम्युलेटर, आपकी कार्रवाई को ऐक्सेस कर पाएगा. अनुमतियां चालू करने के लिए, यह तरीका अपनाएं:

गतिविधि कंट्रोल पर जाएं.
अगर ज़रूरी हो, तो अपने Google खाते से साइन इन करें.
ये अनुमतियां चालू करें:

वेब और ऐप्लिकेशन गतिविधि
वेब और ऐप्लिकेशन गतिविधि में जाकर, Google की सेवाएं इस्तेमाल करने वाले डिवाइसों, ऐप्लिकेशन, और साइटों पर की गई मेरी गतिविधि की जानकारी और Chrome इतिहास शामिल करें चेकबॉक्स को चुनें.

gactions कमांड-लाइन इंटरफ़ेस इंस्टॉल करना

इस कोडलैब में, gactions कमांड-लाइन इंटरफ़ेस (सीएलआई) टूल का इस्तेमाल करके, Actions console और अपने लोकल फ़ाइल सिस्टम के बीच Actions प्रोजेक्ट को सिंक किया जाता है.

gactions CLI को इंस्टॉल करने के लिए, gactions कमांड-लाइन टूल इंस्टॉल करना सेक्शन में दिए गए निर्देशों का पालन करें.

Firebase कमांड-लाइन इंटरफ़ेस इंस्टॉल करना

Firebase कमांड-लाइन इंटरफ़ेस (सीएलआई) की मदद से, Actions प्रोजेक्ट को Cloud Functions पर डिप्लॉय किया जा सकता है. साथ ही, वेब ऐप्लिकेशन को होस्ट किया जा सकता है.

इस कोडलैब में, Firebase CLI को इंस्टॉल करने के लिए npm का इस्तेमाल किया जाता है. पक्का करें कि आपने npm इंस्टॉल किया हो. आम तौर पर, यह Node.js के साथ आता है.

सीएलआई को इंस्टॉल करने या अपग्रेड करने के लिए, टर्मिनल खोलें और यह npm कमांड चलाएं:

npm install -g firebase-tools

यह पुष्टि करने के लिए कि सीएलआई सही तरीके से इंस्टॉल किया गया है, यह कमांड चलाएं:

firebase --version

पक्का करें कि Firebase सीएलआई का वर्शन 8 या उससे ज़्यादा हो, ताकि इसमें Cloud Functions के लिए ज़रूरी सभी नई सुविधाएं शामिल हों. अगर ऐसा नहीं है, तो अपग्रेड करने के लिए 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/: इस डायरेक्ट्री में आपके वेब ऐप्लिकेशन के लिए एचटीएमएल, सीएसएस, और JavaScript कोड होता है.
sdk/custom/: इस डायरेक्ट्री में, बातचीत वाली कार्रवाई (सीन, इंटेंट, और टाइप) के लिए लॉजिक होता है.
sdk/webhooks/: यह डायरेक्ट्री आपका वेबुक है और इसमें गेम लॉजिक शामिल है.

तीसरी इमेज. start डायरेक्ट्री कोड का स्ट्रक्चर.

4. Actions प्रोजेक्ट सेट अप करना

इस सेक्शन में, Actions प्रोजेक्ट बनाया और कॉन्फ़िगर किया जाता है. साथ ही, क्लोन की गई रिपॉज़िटरी से कोड को gactions CLI की मदद से Actions console में पुश किया जाता है. इसके बाद, वेब ऐप्लिकेशन और वेबहुक को डिप्लॉय किया जाता है.

ऐक्शन प्रोजेक्ट बनाना

आपका Actions प्रोजेक्ट, आपकी कार्रवाई के लिए एक कंटेनर होता है. इस कोडलैब के लिए Actions प्रोजेक्ट बनाने के लिए, यह तरीका अपनाएं:

Actions console खोलें.
नया प्रोजेक्ट पर क्लिक करें.
प्रोजेक्ट का नाम डालें, जैसे कि canvas-codelab. यह नाम सिर्फ़ आपके इंटरनल रेफ़रंस के लिए है. बाद में, अपने प्रोजेक्ट के लिए कोई बाहरी नाम सेट किया जा सकता है.

प्रोजेक्ट बनाएं पर क्लिक करें.
आपको किस तरह की कार्रवाई बनानी है? स्क्रीन पर, गेम कार्ड चुनें.
आगे बढ़ें पर क्लिक करें.
ब्लैंक प्रोजेक्ट कार्ड चुनें.
बनाना शुरू करें पर क्लिक करें.

अपनी कार्रवाई के लिए प्रोजेक्ट आईडी सेव करना

प्रोजेक्ट आईडी, आपके ऐक्शन का यूनीक आइडेंटिफ़ायर होता है. इस कोडलैब में कई चरणों के लिए, आपको अपने प्रोजेक्ट आईडी की ज़रूरत होगी.

अपना प्रोजेक्ट आईडी वापस पाने के लिए, यह तरीका अपनाएं:

Actions console में, तीन बिंदु वाले आइकॉन > प्रोजेक्ट सेटिंग पर क्लिक करें.

प्रोजेक्ट आईडी को कॉपी करें.

कोई बिलिंग खाता लिंक करना

अगर आपको इस कोडलैब में Cloud Functions का इस्तेमाल करके, बाद में फ़ुलफ़िलमेंट डिप्लॉय करना है, तो आपको Google Cloud में अपने प्रोजेक्ट से कोई बिलिंग खाता जोड़ना होगा. अगर आपके पास पहले से ही कोई बिलिंग खाता है, तो यह तरीका अपनाने की ज़रूरत नहीं है.

अपने प्रोजेक्ट से कोई बिलिंग खाता जोड़ने के लिए, यह तरीका अपनाएं:

Google Cloud Platform के बिलिंग पेज पर जाएं.
बिलिंग खाता जोड़ें या खाता बनाएं पर क्लिक करें.
पेमेंट की जानकारी भरें.
मुफ़्त में आज़माना शुरू करें या बिलिंग की जानकारी सबमिट करें और बिलिंग की सुविधा चालू करें पर क्लिक करें.
Google Cloud के बिलिंग पेज पर जाएं.
मेरे प्रोजेक्ट टैब पर क्लिक करें.
तीन बिंदु वाले आइकॉन > बिलिंग की जानकारी बदलें पर क्लिक करें.
ड्रॉप-डाउन मेन्यू में, कॉन्फ़िगर किया गया बिलिंग खाता चुनें.
खाता सेट करें पर क्लिक करें.

शुल्क से बचने के लिए, अपने प्रोजेक्ट को मिटाएं सेक्शन में दिया गया तरीका अपनाएं.

वेब ऐप्लिकेशन डिप्लॉय करना

इस सेक्शन में, Firebase CLI का इस्तेमाल करके अपने वेब ऐप्लिकेशन (Snow Pal गेम) को डिप्लॉय करें. वेब ऐप्लिकेशन को डिप्लॉय करने के बाद, उसका यूआरएल वापस पाया जा सकता है. साथ ही, यह देखा जा सकता है कि ब्राउज़र में गेम कैसा दिखता है.

अपने वेब ऐप्लिकेशन को डिप्लॉय करने के लिए, यह तरीका अपनाएं:

टर्मिनल में, start/ डायरेक्ट्री पर जाएं.
यहां दी गई कमांड चलाएं. साथ ही, {PROJECT_ID} की जगह अपना प्रोजेक्ट आईडी डालें:

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

कुछ मिनटों के बाद, आपको "Deploy complete!" दिखेगा. इसका मतलब है कि आपने Snow Pal वेब ऐप्लिकेशन को Firebase पर डिप्लॉय कर दिया है.

ब्राउज़र में Snow Pal गेम देखने के लिए, यह तरीका अपनाएं:

अपने टर्मिनल के आउटपुट में दिए गए होस्टिंग यूआरएल को वापस पाएं. यूआरएल इस फ़ॉर्म में होना चाहिए: https://<PROJECT_ID>.web.app

अगर यूआरएल आपके टर्मिनल आउटपुट में नहीं दिखता है, तो यहां दिया गया तरीका अपनाकर वेब ऐप्लिकेशन का यूआरएल वापस पाया जा सकता है:

Firebase Console खोलें.
विकल्पों की सूची से अपना Actions प्रोजेक्ट चुनें.
नेविगेशन बार में, डेवलप करें > होस्टिंग पर क्लिक करें.
डैशबोर्ड टैब में, आपको अपने प्रोजेक्ट के लिए डोमेन की सूची दिखेगी. यूआरएल कॉपी करें. यह इस फ़ॉर्म में होना चाहिए: https://<PROJECT_ID>.web.app

किसी ब्राउज़र में यूआरएल चिपकाएं. आपको Snow Pal गेम की शुरुआती स्क्रीन दिखेगी. इसमें गेम शुरू करें बटन दिखेगा:

कार्रवाइयों के प्रोजेक्ट में वेब ऐप्लिकेशन का यूआरएल और प्रोजेक्ट आईडी जोड़ना

इसके बाद, actions.intent.MAIN.yaml फ़ाइल में अपने वेब ऐप्लिकेशन का यूआरएल और प्रोजेक्ट आईडी जोड़ें. वेब ऐप्लिकेशन का यूआरएल जोड़ने से, बातचीत वाली कार्रवाई को यह पता चलता है कि डेटा किस यूआरएल पर भेजना है. वहीं, settings.yaml में प्रोजेक्ट आईडी जोड़ने से, डाउनलोड की गई फ़ाइलों को Actions console में सही प्रोजेक्ट पर पुश किया जा सकता है.

अपने वेब ऐप्लिकेशन का यूआरएल और प्रोजेक्ट आईडी जोड़ने के लिए, यह तरीका अपनाएं:

टेक्स्ट एडिटर में start/sdk/custom/global/actions.intent.MAIN.yaml फ़ाइल खोलें.
यूआरएल फ़ील्ड में, प्लेसहोल्डर स्ट्रिंग की जगह अपने वेब ऐप्लिकेशन का यूआरएल डालें.
टेक्स्ट एडिटर में start/sdk/settings/settings.yaml फ़ाइल खोलें.
projectId फ़ील्ड में, प्लेसहोल्डर स्ट्रिंग की जगह अपना प्रोजेक्ट आईडी डालें.

प्रोजेक्ट को Actions Console में पुश करना

Actions console को अपने लोकल प्रोजेक्ट से अपडेट करने के लिए, आपको अपने Actions प्रोजेक्ट को Actions console पर पुश करना होगा. ऐसा करने के लिए, इन चरणों का अनुसरण करें:

sdk डायरेक्ट्री पर जाएं:

cd sdk/

अपने लोकल फ़ाइल सिस्टम के कॉन्फ़िगरेशन को Actions console में कॉपी करने के लिए, यह निर्देश चलाएं:

gactions push

वेबहुक डिप्लॉय करना

gactions push चलाने पर, आपने शुरुआती वेबहुक कोड को Actions console में इंपोर्ट किया था. कोडलैब के इस मॉड्यूल के बाकी बचे हिस्से के लिए, Actions console में जाकर अपने वेबुक कोड में बदलाव किया जा सकता है. इस चरण में, Actions console से वेबहुक को डिप्लॉय किया जा सकता है.

अपने वेबुक को डिप्लॉय करने के लिए, यह तरीका अपनाएं:

Actions console में, नेविगेशन बार में मौजूद Develop पर क्लिक करें.
नेविगेशन बार में, वेबहुक टैब पर क्लिक करें.
Deploy Fulfillment पर क्लिक करें.

चेतावनी: डिलिवरी की सुविधा डिप्लॉय करें पर क्लिक करने के बाद, बिलिंग खाता ज़रूरी है मैसेज दिखता है. अपने वेबुक को डिप्लॉय करने के लिए, आपको Google Cloud में अपने प्रोजेक्ट के साथ कोई बिलिंग खाता जोड़ना होगा. बिलिंग खाता सेट अप करने के लिए, Cloud Console खोलें पर क्लिक करें. इसके बाद, बिलिंग खाता लिंक करने के लिए दिया गया तरीका अपनाएं. इस कोडलैब के आखिर में, इस प्रोजेक्ट को मिटाया जा सकता है, ताकि आपसे शुल्क न लिया जाए. ज़्यादा जानकारी के लिए, डेटा को व्यवस्थित करना सेक्शन देखें.

Cloud Functions को आपका फ़ुलफ़िलमेंट उपलब्ध कराने और उसे डिप्लॉय करने में कुछ मिनट लग सकते हैं. आपको Cloud Function deployment in progress... मैसेज दिखेगा. कोड को सही तरीके से डिप्लॉय करने पर, मैसेज अपडेट होकर Your Cloud Function deployment is up to date हो जाता है.

सिम्युलेटर में टेस्ट करना

इस समय, आपका ऐक्शन वेब ऐप्लिकेशन से लिंक हो जाता है. Actions console के सिम्युलेटर का इस्तेमाल करके, यह पक्का किया जा सकता है कि ऐक्शन शुरू करने पर वेब ऐप्लिकेशन दिखे.

अपने ऐक्शन को आज़माने के लिए, यह तरीका अपनाएं:

Actions console के नेविगेशन बार में, जांच करें पर क्लिक करें.
इनपुट फ़ील्ड में Talk to Snow Pal sample लिखें और Enter दबाएं.
इनपुट फ़ील्ड में Yes लिखें और Enter दबाएं. इसके अलावा, गेम शुरू करें पर क्लिक करें.

आपने अब तक किसी अक्षर या शब्द का अनुमान लगाने के लिए लॉजिक कॉन्फ़िगर नहीं किया है. इसलिए, अगर किसी शब्द या अक्षर का अनुमान लगाया जाता है, तो आपको यह जवाब मिलता है: "...गलत जवाब. कोशिश जारी रखें! ऐसा लगता है कि हमें इस सुविधा को बेहतर बनाने के लिए, और भी फ़ंक्शन जोड़ने होंगे."

5. इंटरैक्टिव कैनवस के इन्फ़्रास्ट्रक्चर के बारे में जानकारी

इस प्रोजेक्ट के लिए, फ़ंक्शन को तीन मुख्य कॉम्पोनेंट में व्यवस्थित किया गया है: बातचीत वाली कार्रवाई, वेब ऐप्लिकेशन, और वेबहुक. ध्यान दें कि यह आपके ऐक्शन को सेट अप करने का एक मॉडल है. इसे इस तरह से व्यवस्थित किया गया है, ताकि इंटरैक्टिव कैनवस की मुख्य सुविधा को हाइलाइट किया जा सके.

यहां दिए गए सेक्शन में, कन्वर्सेशनल ऐक्शन, वेबुक, और वेब ऐप्लिकेशन के साथ मिलकर काम करने के तरीके के बारे में ज़्यादा जानकारी दी गई है. साथ ही, इंटरैक्टिव कैनवस के अन्य अहम एलिमेंट के बारे में भी बताया गया है.

Conversational Action

आपकी कार्रवाई का बातचीत वाली कार्रवाई वाला कॉम्पोनेंट, उपयोगकर्ता के इनपुट को पहचानने, उसे प्रोसेस करने, और उसे सही सीन पर भेजने का काम करता है. यहां उपयोगकर्ता को जवाब दिया जाता है. उदाहरण के लिए, अगर कोई उपयोगकर्ता Snow Pal गेम में "मुझे लगता है कि यह अक्षर e है" कहता है, तो आपकी बातचीत वाली कार्रवाई, अक्षर को इंटेंट पैरामीटर के तौर पर निकालती है और उसे गेम के सही लॉजिक में पास करती है. इससे यह तय होता है कि अनुमान सही है या नहीं. साथ ही, इसके हिसाब से वेब ऐप्लिकेशन अपडेट होता है. Actions console में मौजूद वेब पर आधारित IDE, Actions Builder में जाकर, इस बातचीत के लॉजिक को देखा और बदला जा सकता है. यहां दिए गए स्क्रीनशॉट में, Actions Builder में मौजूद आपके Conversational Action का कुछ हिस्सा दिखाया गया है:

चौथी इमेज. Actions Builder में Main invocation का विज़ुअलाइज़ेशन.

इस स्क्रीनशॉट में, आपकी कार्रवाई के लिए Main invocation दिखाया गया है. जब लोग "Ok Google, Snow Pal के सैंपल से बात करो" जैसा कोई वाक्यांश बोलते हैं, तब वे इससे मैच करते हैं. जब कोई उपयोगकर्ता आपकी कार्रवाई शुरू करता है, तो Main invocation, canvas के जवाब के साथ एक प्रॉम्प्ट भेजता है. इसमें आपके वेब ऐप्लिकेशन का यूआरएल होता है.

आपकी कार्रवाई के पहले canvas जवाब में वेब ऐप्लिकेशन का यूआरएल शामिल होना चाहिए. इस जवाब से Assistant को यह निर्देश मिलता है कि वह उपयोगकर्ता के डिवाइस पर, उस पते पर वेब ऐप्लिकेशन को रेंडर करे. Actions Builder में मौजूद अतिरिक्त canvas रिस्पॉन्स में, send_state_data_to_canvas_app फ़ील्ड शामिल हो सकता है. इसे true पर सेट किया जाता है. जब इंटेंट मैच हो जाता है, तब यह फ़ील्ड वेब ऐप्लिकेशन को इंटेंट का नाम और पैरामीटर की वैल्यू भेजता है. इसके बाद, वेब ऐप्लिकेशन उपयोगकर्ता के इनपुट से मिले इस डेटा के आधार पर अपडेट होता है.

वेबहुक

इस कोडलैब के लिए, आपके वेबहुक में गेम लॉजिक होता है. वेबहुक को गेम सर्वर की तरह माना जा सकता है. गेम के लॉजिक में ये एलिमेंट शामिल होते हैं: यह तय करना कि उपयोगकर्ता का अनुमान सही है या गलत, उपयोगकर्ता जीता है या हारा है, और नतीजे के आधार पर जवाब तैयार करना. Actions Builder में जाकर, अपने वेबुक में बदलाव किया जा सकता है.

जब आपकी कार्रवाई को गेम लॉजिक लागू करने की ज़रूरत होती है, तब Actions Builder, वेबुक को कॉल करता है. उदाहरण के लिए, guess सीन में मौजूद guess इंटेंट, guess हैंडलर को वेबुक कॉल करता है. इसके बाद, यह लॉजिक लागू करता है, ताकि यह पता चल सके कि उपयोगकर्ता का अनुमान सही है या नहीं.Game वेबहुक में, हैंडलर के अंदर Canvas जवाब शामिल हो सकते हैं. ये हैंडलर, वेब ऐप्लिकेशन की फ़ाइलों से मैप होते हैं और वेब को सही तरीके से अपडेट करते हैं.

वेब ऐप्लिकेशन

पांचवीं इमेज. इंटरैक्टिव कैनवस ऐक्शन में, बातचीत वाली कार्रवाई, वेबुक, और वेब ऐप्लिकेशन के बीच इंटरैक्शन को दिखाने वाली इमेज.

वेब ऐप्लिकेशन की फ़ाइलों में, वेब ऐप्लिकेशन के विज़ुअल और ऐनिमेशन का कोड होता है. साथ ही, इसमें उपयोगकर्ता के इनपुट के आधार पर वेब ऐप्लिकेशन को अपडेट करने का लॉजिक भी होता है. टेक्स्ट एडिटर में, वेब ऐप्लिकेशन की फ़ाइलों में बदलाव करें. इसके बाद, Firebase CLI का इस्तेमाल करके इन बदलावों को डिप्लॉय करें.

Conversational Action और वेब ऐप्लिकेशन के बीच कम्यूनिकेट करना

आपको अपने बातचीत वाले ऐक्शन और वेब ऐप्लिकेशन के बीच कम्यूनिकेशन की सुविधा चालू करनी होगी, ताकि उपयोगकर्ता के इनपुट के आधार पर आपका वेब ऐप्लिकेशन अपडेट हो सके. उदाहरण के लिए, अगर कोई उपयोगकर्ता कहता है कि "मुझे लगता है कि यह अक्षर f है",

Conversational Action को वेब ऐप्लिकेशन को f अक्षर देना होगा, ताकि वेब ऐप्लिकेशन उसके हिसाब से अपडेट हो सके. उपयोगकर्ता के इनपुट को बातचीत वाली कार्रवाई से वेब ऐप्लिकेशन में पास करने के लिए, आपको इंटरैक्टिव कैनवस API लोड करना होगा.

इस एपीआई के लिए स्क्रिप्ट, /public/index.html में शामिल है. यह Snow Pal गेम के लिए मुख्य एचटीएमएल फ़ाइल है. इस फ़ाइल से यह तय होता है कि आपका यूज़र इंटरफ़ेस (यूआई) अलग-अलग स्क्रिप्ट में कैसा दिखेगा और लोड होगा:

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() को कॉल किया जाता है. इसे यहां दिए गए स्निपेट में दिखाया गया है:

scene.js

// 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 क्लास में तय किया गया है. यह फ़ंक्शन, गेम बनाने के दौरान कॉलबैक का एलान करता है और उन्हें Interactive Canvas 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 रिस्पॉन्स भेजा जाता है.

अगले सेक्शन में बताया गया है कि इस प्रोजेक्ट के लिए खास कोड को कैसे कॉन्फ़िगर किया जाता है, ताकि बातचीत वाली कार्रवाई से वेब ऐप्लिकेशन को डेटा भेजा जा सके.

उपयोगकर्ता के इनपुट के आधार पर वेब ऐप्लिकेशन को अपडेट करना

इस कोडलैब में, उपयोगकर्ता के इनपुट के आधार पर वेब ऐप्लिकेशन को अपडेट करने के लिए, कमांड मैप का इस्तेमाल किया जाता है. उदाहरण के लिए, जब Welcome सीन में start_game इंटेंट मैच होता है, तो प्रॉम्प्ट में शामिल canvas रिस्पॉन्स को वेब ऐप्लिकेशन पर भेजा जाता है. onUpdate(), canvas रिस्पॉन्स से मेटाडेटा पार्स करता है और START_GAME कमांड को कॉल करता है. इसके बाद, START_GAME कमांड, scene.js में start() फ़ंक्शन को कॉल करती है और वेब ऐप्लिकेशन को अपडेट करती है, ताकि नया गेम सेशन शुरू किया जा सके.

scene.js में मौजूद start() फ़ंक्शन, updateCanvasState() फ़ंक्शन को भी कॉल करता है. यह फ़ंक्शन, setCanvasState() नाम की एक ऐसी विधि का इस्तेमाल करता है जिससे स्टेट डेटा जोड़ा जा सकता है. इस डेटा को आपका वेबुक ऐक्सेस कर सकता है.

updateCanvasState() तरीके को हर निर्देश के आखिर में कॉल किया जाता है. आपको इन निर्देशों को पूरे कोडलैब में जोड़ना होगा. साथ ही, यह वेब ऐप्लिकेशन की स्थिति को अपडेट करता है. हर बार updateCanvasState() को कॉल करने पर, displayedWord और incorrectGuesses की वैल्यू, मौजूदा स्थिति के हिसाब से अपडेट की जाती हैं:

scene.js

...
  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 की सुविधा जोड़नी होती है. इससे उपयोगकर्ता, शब्द में मौजूद अक्षरों या पूरे शब्द का अनुमान लगा पाता है.

Conversational Action

सिम्युलेटर में टेस्ट करें सेक्शन में, आपको एक जवाब मिला. इसमें यह शामिल था, "ऐसा लगता है कि हमें इस सुविधा को ठीक से काम करने के लिए, कुछ और फ़ंक्शन जोड़ने होंगे." अब, Actions console में जाकर उस प्रॉम्प्ट को मिटाया जा सकता है, ताकि सिर्फ़ वेबुक को कॉल किया जा सके. Game सीन में, guess इंटेंट को पहले से ही कॉन्फ़िगर किया गया है, ताकि मैच होने पर वेबुक कॉल किया जा सके.

guess इंटेंट मैच होने पर स्टैटिक प्रॉम्प्ट हटाने के लिए, यह तरीका अपनाएं:

Actions console में, नेविगेशन बार में मौजूद सीन पर क्लिक करें.
Game सीन पर जाने के लिए, गेम पर क्लिक करें.
उपयोगकर्ता के इरादे को पूरा करने से जुड़ी सेटिंग में जाकर, जब अनुमानित जवाब सही हो पर क्लिक करें. प्रॉम्प्ट हटाने के लिए, प्रॉम्प्ट भेजें को हटाएं.
सेव करें पर क्लिक करें.

वेबहुक

इस सेक्शन में, आपको अपने वेबुक को ऐसे लॉजिक के साथ अपडेट करना होता है जो उपयोगकर्ता के सही या गलत अनुमान को वेब ऐप्लिकेशन फ़ाइल में मौजूद लॉजिक से मैप करता है. इसके बाद, वेब ऐप्लिकेशन को उसके हिसाब से अपडेट किया जाता है. वेबहुक में, guess इंटेंट हैंडलर पहले से ही कॉन्फ़िगर किया गया है. इसलिए, आपको इस इंटेंट में सिर्फ़ Canvas जवाब जोड़ने होंगे. इससे वेब ऐप्लिकेशन को अपडेट करने वाला लॉजिक ट्रिगर हो जाएगा.

अपने वेबुक को अपडेट करने के लिए, यह तरीका अपनाएं:

Actions console में, नेविगेशन बार में मौजूद Webhook पर क्लिक करें.
guess हैंडलर के तहत, index.js में यह कोड जोड़ें:

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 पर क्लिक करें. डिप्लॉयमेंट पूरा होने पर, आपको यह मैसेज दिखेगा: आपका Cloud Functions डिप्लॉयमेंट अप-टू-डेट है.

वेब ऐप्लिकेशन

अब अपने वेब ऐप्लिकेशन को 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 दबाएं. इसके अलावा, हां बटन पर क्लिक करें.
इनपुट फ़ील्ड में, वह अक्षर टाइप करें जिसका आपको अनुमान लगाना है. इसके बाद, Enter दबाएं.

कोड को समझना

पिछले सेक्शन में, आपने ऐसा कोड जोड़ा था जिससे उपयोगकर्ता आपके गेम में अक्षरों का अनुमान लगा सकते हैं. साथ ही, वे अनुमानित अक्षरों को शब्द या स्नो पाल में देख सकते हैं. जब guess इंटेंट मैच होता है, तब Actions Builder में वेबुक कॉल किया जाता है. इससे डेटा आपके वेब ऐप्लिकेशन को भेजा जाता है, ताकि उसे अपडेट किया जा सके. उदाहरण के लिए, अगर उपयोगकर्ता Snow Pal गेम में किसी ऐसे अक्षर का अनुमान लगाता है जो शब्द में मौजूद है, तो वेब ऐप्लिकेशन अपडेट हो जाता है. इससे शब्द में अक्षर की सही जगह दिखती है.

इंटरैक्टिव कैनवस का इस्तेमाल करने वाले ऐक्शन के लिए, वेब ऐप्लिकेशन को वेबुक से डेटा पास करने का सामान्य तरीका यह है:

उपयोगकर्ता का इनपुट, ऐसे इंटेंट से मेल खाता है जिसमें Canvas जवाब शामिल होता है.
बातचीत वाली कार्रवाई या वेबहुक, Canvas रिस्पॉन्स भेजता है. इससे onUpdate() कॉलबैक ट्रिगर होता है.
onUpdate() कॉलबैक, कस्टम लॉजिक से मैप होता है. यह कस्टम लॉजिक, वेब ऐप्लिकेशन को अपडेट करता है.

इस प्रोजेक्ट के लिए, कोड इस तरह काम करता है:

जब उपयोगकर्ता का इनपुट, guess इंटेंट से मैच करता है, तो Actions Builder, उपयोगकर्ता के इनपुट से अक्षर को पैरामीटर के तौर पर निकालता है.
Actions Builder, आपके वेबुक में guess हैंडलर को कॉल करता है. इसमें यह तय करने का लॉजिक होता है कि उपयोगकर्ता ने जिस अक्षर का अनुमान लगाया है वह शब्द में मौजूद है या नहीं.
guess हैंडलर में दो Canvas जवाब होते हैं. एक जवाब तब लागू होता है, जब अक्षर सही होता है. दूसरा जवाब तब लागू होता है, जब अक्षर गलत होता है. हर Canvas जवाब, वेब ऐप्लिकेशन को सही डेटा (CORRECT_ANSWER या INCORRECT_ANSWER कमांड) भेजता है.
Canvas के जवाब के data फ़ील्ड में मौजूद डेटा को action.js में onUpdate() तरीके से पास किया जाता है. onUpdate(), scene.js में मौजूद कमांड मैप में सही कमांड को कॉल करता है.
कमांड मैप, scene.js में correctAnswer() और incorrectAnswer() फ़ंक्शन से मैप करता है. ये फ़ंक्शन, वेब ऐप्लिकेशन को सही तरीके से अपडेट करते हैं, ताकि उपयोगकर्ता के अनुमान को दिखाया जा सके. साथ ही, ये setCanvasState() को कॉल करते हैं, ताकि आपके वेब ऐप्लिकेशन से आपके वेबहुक को स्थिति का डेटा भेजा जा सके.

7. जीत/हार की जानकारी जोड़ने की सुविधा

इस सेक्शन में, आपको अपनी कार्रवाई में जीतने और हारने की सुविधा जोड़नी होगी. इसमें ऐसा लॉजिक शामिल होता है जिससे यह तय किया जाता है कि उपयोगकर्ता जीता है या हारा है. साथ ही, इसमें ऐसा लॉजिक भी शामिल होता है जिससे उपयोगकर्ता के नतीजे के आधार पर वेब ऐप्लिकेशन की इमेज अपडेट की जाती है.

Conversational Action

उपयोगकर्ता के गेम जीतने या हारने की सुविधा को guess इंटेंट में कॉन्फ़िगर किया जाएगा. इसलिए, आपको Actions Builder में कोई अतिरिक्त कॉन्फ़िगरेशन करने की ज़रूरत नहीं है.

वेबहुक

इस सेक्शन में, आपको अपने वेबुक को ऐसे लॉजिक के साथ अपडेट करना होगा जिससे यह पता चल सके कि उपयोगकर्ता ने गेम जीता है या हारा है. साथ ही, इसे वेब ऐप्लिकेशन के लॉजिक के साथ मैप करना होगा, ताकि गेम को जीतने या हारने की सही स्क्रीन के साथ अपडेट किया जा सके.

अपने वेबुक को अपडेट करने के लिए, यह तरीका अपनाएं:

Actions console में, नेविगेशन बार में मौजूद Webhook पर क्लिक करें.
guess हैंडलर के तहत, index.js में यह कोड जोड़ें:

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 पर क्लिक करें. डिप्लॉयमेंट पूरा होने पर, आपको यह मैसेज दिखेगा: आपका Cloud Functions डिप्लॉयमेंट अप-टू-डेट है.

यहां, आपने 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

सिम्युलेटर में अपने ऐक्शन की जांच करना

इस समय, आपकी कार्रवाई यह मैनेज कर सकती है कि उपयोगकर्ता गेम जीत गया है या हार गया है. साथ ही, हर नतीजे के लिए सही स्क्रीन दिखा सकती है.

अपने ऐक्शन को आज़माने के लिए, यह तरीका अपनाएं:

Actions console के नेविगेशन बार में, जांच करें पर क्लिक करें.
इनपुट फ़ील्ड में Talk to Snow Pal sample लिखें और Enter दबाएं.
इनपुट फ़ील्ड में Yes लिखें और Enter दबाएं. इसके अलावा, गेम शुरू करें बटन पर क्लिक करें.
जब तक आप जीत या हार नहीं जाते, तब तक अक्षरों और शब्दों का अनुमान लगाएं.

अगर आपने फिर से खेलने के लिए कहा, तो आपको एक मैसेज मिलेगा. इसमें बताया जाएगा कि फिर से खेलने के लिए ज़रूरी सुविधा अभी तक नहीं जोड़ी गई है. इस सुविधा को अगले सेक्शन में जोड़ा जाता है.

कोड को समझना

जीतने और हारने की सुविधा, अनुमान लगाने की सुविधा की तरह ही काम करती है. इसमें उपयोगकर्ता, guess इंटेंट से मैच करता है और आपका वेबुक, उपयोगकर्ता के अनुमान का आकलन करता है. अगर अनुमान सही होता है, तो कोड यह देखता है कि उपयोगकर्ता जीता है या नहीं. अगर वह जीत जाता है, तो वेब ऐप्लिकेशन को WIN_GAME कमांड भेजी जाती है. अगर अनुमान गलत होता है, तो कोड यह देखता है कि उपयोगकर्ता हार गया है या नहीं. अगर वह हार जाता है, तो वेब ऐप्लिकेशन को LOSE_GAME कमांड भेजी जाती है. इन कमांड से, scene.js में winGame() और loseGame() फ़ंक्शन ट्रिगर होते हैं. ये फ़ंक्शन, वेब ऐप्लिकेशन को अपडेट करते हैं, ताकि जीतने या हारने की स्क्रीन दिखाई जा सके. साथ ही, गेम की स्थिति को अपडेट किया जा सके.

8. फिर से चलाने की सुविधा जोड़ना

इस सेक्शन में, ऐसी सुविधा जोड़ी जाती है जिसकी मदद से उपयोगकर्ता, नया गेम शुरू करने के लिए "फिर से खेलें" बोल सकता है या वेब ऐप्लिकेशन में मौजूद फिर से खेलें बटन पर क्लिक कर सकता है. Actions Builder में play_again इंटेंट में बदलाव करें, ताकि play_again रिस्पॉन्स भेजा जा सके. इससे वेब ऐप्लिकेशन सही तरीके से अपडेट हो जाता है. साथ ही, ऐसा लॉजिक जोड़ें जो उपयोगकर्ता के फिर से खेलें बटन पर क्लिक करने पर play_again इंटेंट को ट्रिगर करे.canvas

Conversational Action

पिछले सेक्शन में, आपने अपने ऐक्शन की जांच की थी. अगर आपने गेम को फिर से खेलने की कोशिश की, तो आपको यह प्रॉम्प्ट मिला होगा: "यह बहुत अच्छा होगा, लेकिन हम इस सुविधा को बाद के सेक्शन में बनाएंगे. फ़िलहाल, सिर्फ़ ऐक्शन रीसेट करो." अब इस प्रॉम्प्ट को मिटाया जा सकता है और इसकी जगह ऐसा प्रॉम्प्ट इस्तेमाल किया जा सकता है जो उपयोगकर्ता के किसी दूसरे गेम का अनुरोध करने पर जवाब दे ("ठीक है, यहां एक और गेम है!"). साथ ही, इसमें canvas रिस्पॉन्स शामिल हो, ताकि वेब ऐप्लिकेशन को नया गेम शुरू करने के लिए ट्रिगर किया जा सके.

जब उपयोगकर्ता को गेम फिर से खेलना हो, तब प्रॉम्प्ट को अपडेट करने के लिए यह तरीका अपनाएं:

Actions console में, सीन ड्रॉप-डाउन मेन्यू पर क्लिक करें.
गेम सीन पर क्लिक करें.
उपयोगकर्ता के इरादे को पूरा करना में जाकर, play_again से मैच होने पर पर क्लिक करें.
प्रॉम्प्ट की जगह यह डालें:

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

सेव करें पर क्लिक करें.

वेबहुक

इस कोडलैब में, वेबुक गेम लॉजिक को मैनेज करता है. 'फिर से खेलें' सुविधा के लिए, किसी भी तरह के लॉजिक की पुष्टि करने की ज़रूरत नहीं होती. इसलिए, आपको वेबुक को कॉल करने की ज़रूरत नहीं है. इसके बजाय, Actions Builder से सीधे तौर पर canvas रिस्पॉन्स भेजा जा सकता है, ताकि वेब ऐप्लिकेशन को ज़रूरी डेटा भेजा जा सके. आपने इसे पिछले सेक्शन में कॉन्फ़िगर किया था.

वेब ऐप्लिकेशन

अब आपके पास अपने वेब ऐप्लिकेशन की फ़ाइलों में बदलाव करने का विकल्प है. इससे, जब उपयोगकर्ता फिर से खेलने का अनुरोध करेगा, तब फ़ाइलें सही तरीके से अपडेट हो जाएंगी. इस सुविधा को जोड़ने के लिए, यह तरीका अपनाएं:

अपने टेक्स्ट एडिटर में public/js/action.js खोलें.
PLAY_AGAIN कमांड को हैंडल करने के लिए, वेब ऐप्लिकेशन को अपडेट करें:

action.js (पहला सेक्शन):

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

अपने टेक्स्ट एडिटर में public/js/scene.js खोलें.
जब उपयोगकर्ता ‘फिर से खेलें' बटन पर क्लिक करे, तब नया गेम सेशन शुरू करने के लिए वेब ऐप्लिकेशन को अपडेट करें:

scene.js (सेक्शन J):

// 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() कॉलबैक को पास किया जाता है. यह कॉलबैक, action.js में मौजूद कमांड मैप में, PLAY_AGAIN कमांड को मैप करता है. PLAY_AGAIN कमांड, scene.js में start() फ़ंक्शन को ट्रिगर करती है. साथ ही, वेब ऐप्लिकेशन को नए गेम सेशन के साथ अपडेट करती है.

टच इनपुट विकल्प के लिए, sendTextQuery() का इस्तेमाल किया जाता है. यह एक इंटरैक्टिव कैनवस एपीआई है. इसकी मदद से, बटन को काम करने के लिए, टच इनपुट के ज़रिए इंटेंट को ट्रिगर किया जा सकता है.

इस कोडलैब में, sendTextQuery() का इस्तेमाल करके play_again इंटेंट को तब शुरू किया जाता है, जब कोई उपयोगकर्ता फिर से खेलें बटन पर क्लिक करता है. Play again आर्ग्युमेंट, play_again इंटेंट में मौजूद ट्रेनिंग फ़्रेज़ से मैच करता है. साथ ही, यह इंटेंट को उसी तरह ट्रिगर करता है जिस तरह कोई उपयोगकर्ता "फिर से चलाओ" कहता है. इसके बाद, play_again इंटेंट, वेब ऐप्लिकेशन को अपडेट करने वाले लॉजिक को ट्रिगर करता है. साथ ही, एक नया गेम सेशन शुरू करता है.

9. PLAY_GAME बिल्ट-इन इंटेंट अपडेट करें

इस सेक्शन में, PLAY_GAME पहले से मौजूद इंटेंट को अपडेट किया जाता है.

PLAY_GAME के बिल्ट-इन इंटेंट की मदद से, उपयोगकर्ता सामान्य अनुरोध करते समय आपकी कार्रवाई शुरू कर सकते हैं. जैसे, "मुझे कोई गेम खेलना है."

सोर्स कोड में PLAY_GAME बिल्ट-इन इंटेंट शामिल है, जो /sdk/custom/global/actions.intent.PLAY_GAME.yaml पर मौजूद है. यह इनवोकेशन सेक्शन में PLAY_GAME के तौर पर कंसोल में दिखता है. इसे इस स्क्रीनशॉट में दिखाया गया है:

उपयोगकर्ताओं को इस बिल्ट-इन इंटेंट के ज़रिए आपकी कार्रवाई शुरू करने की सुविधा देने के लिए, आपको PLAY_GAME बिल्ट-इन इंटेंट में वेब ऐप्लिकेशन के यूआरएल के साथ canvas रिस्पॉन्स जोड़ना होगा. ऐसा करने के लिए, इन चरणों का अनुसरण करें:

Actions console में, नेविगेशन बार में मौजूद PLAY_GAME पर क्लिक करें.
प्रॉम्प्ट को अपडेट करके, उसमें अपने वेब ऐप्लिकेशन का यूआरएल शामिल करें. इसके लिए, यहां दिया गया स्निपेट देखें:

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

सेव करें पर क्लिक करें.

सिम्युलेटर में अपने ऐक्शन की जांच करना

आपका ऐक्शन अब PLAY_GAME बिल्ट-इन इंटेंट के साथ काम करता है.

अपने ऐक्शन को आज़माने के लिए, यह तरीका अपनाएं:

नेविगेशन बार में, टेस्ट करें पर क्लिक करें.
इंटेंट हैंडलिंग की सुविधा की जांच करें पर क्लिक करें.
Invoke Action पर क्लिक करें.

सिम्युलेटर में आपकी कार्रवाई शुरू होनी चाहिए.

10. अपेन्डिक्स: इंटरैक्टिव कैनवस ऐक्शन से जुड़ी समस्या हल करना

इस सेक्शन में, आपको इंटरैक्टिव कैनवस ऐक्शन को डीबग करने का तरीका बताया गया है. ऐसा तब किया जाता है, जब वह ठीक से काम नहीं कर रहा हो. Snow Pal प्रोजेक्ट में, डीबग करने के लिए ओवरले पहले से मौजूद होता है. इसे चालू किया जा सकता है. ओवरले, डिसप्ले के सबसे नीचे दाईं ओर सभी 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;
}

अपने प्रोजेक्ट को क्लीन अप करें [सुझाया गया]

संभावित शुल्क से बचने के लिए, हमारा सुझाव है कि आप उन प्रोजेक्ट को हटा दें जिनका आपको इस्तेमाल नहीं करना है. इस कोडलैब में बनाए गए प्रोजेक्ट मिटाने के लिए, यह तरीका अपनाएं:

Google Cloud प्रोजेक्ट और संसाधनों को मिटाने के लिए, प्रोजेक्ट बंद करना (मिटाना) सेक्शन में दिया गया तरीका अपनाएं.

ज़रूरी नहीं: अगर आपको अपने प्रोजेक्ट को Actions console से तुरंत हटाना है, तो प्रोजेक्ट मिटाना सेक्शन में दिए गए चरणों को पूरा करें. अगर आपने यह चरण पूरा नहीं किया, तो आपका प्रोजेक्ट करीब 30 दिनों के बाद अपने-आप हट जाएगा.

11. बधाई हो!

आपने इंटरैक्टिव कैनवस के बारे में जानकारी देने वाला कोडलैब पूरा कर लिया है. अब आपके पास, अपना इंटरैक्टिव कैनवस ऐक्शन बनाने के लिए ज़रूरी कौशल है.

आपको क्या सीखने को मिला

इंटरैक्टिव कैनवस ऐक्शन बनाने, डिप्लॉय करने, और उसकी जांच करने का तरीका
वेब ऐप्लिकेशन को अपडेट करने के लिए, Canvas की प्रतिक्रियाओं का इस्तेमाल कैसे करें
कार्रवाई को बेहतर बनाने के लिए, sendTextQuery() और setCanvasState() जैसे अलग-अलग तरीकों का इस्तेमाल कैसे करें
अपनी कार्रवाई को डीबग करने का तरीका

ज़्यादा जानें

Interactive Canvas के बारे में ज़्यादा जानने के लिए, यहां दिए गए लेख पढ़ें:

इंटरैक्टिव कैनवस का दस्तावेज़: इंटरैक्टिव कैनवस के लिए, Actions on Google का आधिकारिक दस्तावेज़.
इंटरैक्टिव कैनवस का सैंपल: यह एक सामान्य इंटरैक्टिव कैनवस गेम का कोड है. इसकी मदद से, किसी त्रिकोण को घुमाया जा सकता है और उसके रंग बदले जा सकते हैं.
गेम पोर्टल: Google Assistant पर गेम बनाने के लिए दिशा-निर्देश.

राय जानने के लिए सर्वे

जाने से पहले, कृपया अपने अनुभव के बारे में यह छोटा सा सर्वे भरें.