इंटरैक्टिव कैनवस, Google Assistant पर बनाया गया एक फ़्रेमवर्क है. यह डेवलपर को बातचीत वाली कार्रवाइयों में विज़ुअल, इमर्सिव अनुभव जोड़ने की सुविधा देता है. यह विज़ुअल अनुभव एक इंटरैक्टिव वेब ऐप्लिकेशन है. Assistant, बातचीत के दौरान, उपयोगकर्ता को जवाब के तौर पर भेजती है. Assistant की बातचीत में सामान्य ज़्यादा जवाबों के मामले में, इंटरैक्टिव कैनवस कैनवस ऐप्लिकेशन, फ़ुल-स्क्रीन वेब व्यू के रूप में रेंडर होता है.
अगर आपको इनमें से कुछ भी करना है, तो आपको इंटरैक्टिव कैनवस का इस्तेमाल करना होगा:
- फ़ुल-स्क्रीन विज़ुअल बनाएं
- पसंद के मुताबिक ऐनिमेशन और ट्रांज़िशन बनाएं
- डेटा विज़ुअलाइज़ेशन करें
- कस्टम लेआउट और GUI बनाना
वे डिवाइस जिन पर YouTube ऐप्लिकेशन से YouTube Kids का इस्तेमाल किया जा सकता है
इंटरैक्टिव कैनवस की सुविधा फ़िलहाल इन डिवाइसों पर उपलब्ध है:
- स्मार्ट डिसप्ले
- Google Nest हब
Android मोबाइल डिवाइस
यह कैसे काम करता है
इंटरैक्टिव कैनवस का इस्तेमाल करने वाली कार्रवाई, आम बातचीत जैसी कार्रवाई की तरह ही काम करती है. उपयोगकर्ता अब भी अपने लक्ष्य को पूरा करने के लिए Assistant के साथ आगे और पीछे बातचीत करता है, लेकिन बातचीत में जवाब देने के बजाय, इंटरैक्टिव कैनवस कार्रवाई उपयोगकर्ता को जवाब भेजती है जो फ़ुल-स्क्रीन वेब ऐप्लिकेशन खोलता है.
एक कार्रवाई के कई कॉम्पोनेंट होते हैं, जो इंटरैक्टिव कैनवस का इस्तेमाल करते हैं:
- बातचीत की कार्रवाई:ऐसी कार्रवाई जो उपयोगकर्ता के अनुरोधों को पूरा करने के लिए, बातचीत वाले
इंटरफ़ेस का इस्तेमाल करती है. इंटरैक्टिव कैनवस कार्रवाइयों में रिच कार्ड या आसान टेक्स्ट और बोलकर दिए जाने वाले जवाबों के बजाय जवाबों को रेंडर करने के लिए वेब व्यू का इस्तेमाल किया जाता है. बातचीत की कार्रवाइयों में ये कॉम्पोनेंट इस्तेमाल किए जाते हैं:
- Dialogflow एजेंट: Dialogflow में एक प्रोजेक्ट, जिसे आपने अपने Action उपयोगकर्ताओं के साथ बातचीत करने के लिए कस्टमाइज़ किया है.
- पूरा करना: कोड को आपके वेबहुक एजेंट के साथ बातचीत करने वाले वेबहुक के तौर पर इस्तेमाल किया जाता है. यह कोड आपके वेबहुक एजेंट से बातचीत करता है और आपके वेब ऐप्लिकेशन से संपर्क करता है.
- वेब ऐप्लिकेशन: आपकी पसंद के मुताबिक बनाए गए विज़ुअल वाला फ़्रंट-एंड वेब ऐप्लिकेशन, जो आपकी कार्रवाई किसी बातचीत के दौरान उपयोगकर्ताओं को जवाब के तौर पर भेजती है. आपने वेब ऐप्लिकेशन को एचटीएमएल, JavaScript, और सीएसएस जैसे वेब स्टैंडर्ड के साथ बनाया है.
बातचीत वाली कार्रवाई और वेब ऐप्लिकेशन एक-दूसरे से संपर्क करने के लिए ये काम करते हैं:
- इंटरैक्टिव कैनवस एपीआई: ऐसा JavaScript एपीआई जिसे वेब ऐप्लिकेशन में शामिल किया जाता है ताकि वेब ऐप्लिकेशन और बातचीत के बीच की आपकी बातचीत को चालू किया जा सके.
HtmlResponse: इस रिस्पॉन्स को पास करने के लिए, वेब ऐप्लिकेशन का यूआरएल और डेटा शामिल होता है.HtmlResponseलौटाने के लिए, Node.js या Java क्लाइंट लाइब्रेरी का इस्तेमाल करें.
इंटरैक्टिव कैनवस कैसे काम करता है, यह दिखाने के लिए कलर कलर्स नाम की एक काल्पनिक कार्रवाई का सोचें, जो डिवाइस की स्क्रीन के रंग को बदलकर, उपयोगकर्ता के बताए गए रंग में बदल देती है. उपयोगकर्ता के कार्रवाई शुरू करने के बाद, फ़्लो ऐसा दिखता है:
- उपयोगकर्ता, Assistant की सुविधा वाले डिवाइस पर
Turn the screen blueकहता है. - Actions on Google प्लैटफ़ॉर्म, इंटेंट से मिलान करने के लिए उपयोगकर्ता के Dialogflow के अनुरोध को भेजता है.
- मेल खाने वाले इंटेंट रन करने के लिए,
HtmlResponseको डिवाइस पर भेजा जाता है. अगर डिवाइस अभी तक लोड नहीं हुआ है, तो वेब ऐप्लिकेशन को लोड करने के लिए, डिवाइस में यूआरएल का इस्तेमाल होता है. - जब वेब ऐप्लिकेशन लोड होता है, तो यह
interactiveCanvasएपीआई के साथ कॉलबैक रजिस्टर करता है. इसके बाद,dataऑब्जेक्ट की वैल्यू, वेब ऐप्लिकेशन के रजिस्टर किए गएonUpdateकॉलबैक में पास कर दी जाती है. हमारे उदाहरण में,dataकोdataके साथ पूरा किया गया है, जिसमेंblueकी वैल्यू वाला वैरिएबल शामिल है.HtmlResponse - आपके वेब ऐप्लिकेशन का कस्टम लॉजिक,
dataHtmlResponseकी वैल्यू को पढ़ता है और तय किए गए बदलाव करता है. हमारे उदाहरण में, यह स्क्रीन को नीले रंग में बदल देता है. interactiveCanvas, डिवाइस पर कॉलबैक अपडेट भेजता है.
अगले चरण
इंटरैक्टिव कैनवस ऐक्शन बनाने का तरीका जानने के लिए, खास जानकारी देने वाला पेज देखें.
पूरे इंटरैक्टिव कैनवस ऐक्शन का कोड देखने के लिए, सैंपल देखें.