![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/interactivecanvas/images/interactivecanvasgame.gif?authuser=6&hl=hi)
इंटरैक्टिव कैनवस, Google Assistant पर बनाया गया एक फ़्रेमवर्क है. यह डेवलपर को बातचीत वाली कार्रवाइयों में विज़ुअल, इमर्सिव अनुभव जोड़ने की सुविधा देता है. यह विज़ुअल इंटरैक्टिव वेब ऐप्लिकेशन है जो Assistant को बातचीत के दौरान, जवाब के तौर पर भेजा जाता है. Assistant की बातचीत में इन-लाइन मौजूद ज़्यादा बेहतर जवाबों से अलग, इंटरैक्टिव कैनवस कैनवस ऐप्लिकेशन, फ़ुल-स्क्रीन वेब व्यू के तौर पर रेंडर होता है.
अपनी कार्रवाई में इनमें से कोई भी काम करने के लिए, इंटरैक्टिव कैनवस का इस्तेमाल करें:
- फ़ुल-स्क्रीन विज़ुअल बनाएं
- पसंद के मुताबिक ऐनिमेशन और ट्रांज़िशन बनाएं
- डेटा विज़ुअलाइज़ेशन करें
- कस्टम लेआउट और GUI बनाना
वे डिवाइस जिन पर YouTube ऐप्लिकेशन से YouTube Kids का इस्तेमाल किया जा सकता है
इंटरैक्टिव कैनवस की सुविधा फ़िलहाल इन डिवाइसों पर उपलब्ध है:
- स्मार्ट डिसप्ले
- Android मोबाइल डिवाइस
यह कैसे काम करता है
एक कार्रवाई जो इंटरैक्टिव कैनवस का इस्तेमाल करती है उसमें दो मुख्य कॉम्पोनेंट होते हैं:
- बातचीत से जुड़ी कार्रवाई: ऐसी कार्रवाई जो उपयोगकर्ता के अनुरोधों को पूरा करने के लिए, बातचीत वाले इंटरफ़ेस का इस्तेमाल करती है. अपनी बातचीत बनाने के लिए, कार्रवाइयां बिल्डर या कार्रवाइयां SDK टूल का इस्तेमाल करें.
- वेब ऐप्लिकेशन: पसंद के मुताबिक बनाए गए विज़ुअल वाला फ़्रंट-एंड वेब ऐप्लिकेशन, जो आपकी कार्रवाई बातचीत के दौरान उपयोगकर्ताओं को जवाब के तौर पर भेजता है. आपने एचटीएमएल, JavaScript, और सीएसएस जैसी वेब टेक्नोलॉजी की मदद से वेब ऐप्लिकेशन बनाया है.
इंटरैक्टिव कैनवस कार्रवाई के साथ इंटरैक्ट करने वाले उपयोगकर्ता, अपने लक्ष्य को पूरा करने के लिए Google Assistant से बात कर सकते हैं. हालांकि, इंटरैक्टिव कैनवस के लिए, इस बातचीत का ज़्यादातर हिस्सा, वेब ऐप्लिकेशन के हिसाब से होता है. अपने 'बातचीत की कार्रवाई' को वेब ऐप्लिकेशन से कनेक्ट करते समय, आपको अपने वेब ऐप्लिकेशन कोड में इंटरैक्टिव कैनवस एपीआई शामिल करना होगा.
- इंटरैक्टिव कैनवस लाइब्रेरी: एक JavaScript लाइब्रेरी है, जिसे वेब ऐप्लिकेशन में शामिल किया जाता है. इससे एपीआई का इस्तेमाल करके, वेब ऐप्लिकेशन और 'बातचीत की कार्रवाई' के बीच कम्यूनिकेशन चालू किया जाता है. ज़्यादा जानकारी के लिए, Interactive Canvas API दस्तावेज़ देखें.
इंटरैक्टिव कैनवस लाइब्रेरी को शामिल करने के अलावा, आपको अपनी बातचीत में
Canvas
जवाब टाइप चुनना होगा, ताकि उपयोगकर्ता के डिवाइस पर वेब ऐप्लिकेशन खोला जा सके. उपयोगकर्ता के इनपुट के आधार पर, अपना वेब ऐप्लिकेशन अपडेट करने के लिए Canvas
रिस्पॉन्स का भी इस्तेमाल किया जा सकता है.
Canvas
: ऐसा जवाब जिसमें पास करने के लिए वेब ऐप्लिकेशन का यूआरएल और डेटा होता है. ऐक्शन बिल्डर,Canvas
दिए गए इंटेंट और मौजूदा सीन डेटा के आधार पर, वेब ऐप्लिकेशन को अपने-आप पॉप्युलेट कर सकता है. इसके अलावा, वेबहुक से Node.js फ़ुलफ़िलमेंट लाइब्रेरी का इस्तेमाल करकेCanvas
रिस्पॉन्स भेजा जा सकता है. ज़्यादा जानकारी के लिए, कैनवस के अनुरोध देखें.
इंटरैक्टिव कैनवस कैसे काम करता है, यह दिखाने के लिए कलर कलर्स नाम की एक काल्पनिक कार्रवाई का सोचें, जो डिवाइस की स्क्रीन के रंग को बदलकर, उपयोगकर्ता के बताए गए रंग में बदल देती है. उपयोगकर्ता के कार्रवाई शुरू करने के बाद, ये चीज़ें होती हैं:
- उपयोगकर्ता ने कहा, "स्क्रीन का रंग नीला करो." Assistant की सुविधा वाले डिवाइस पर.
- Actions on Google प्लैटफ़ॉर्म, उपयोगकर्ता के अनुरोध को आपके बातचीत के लॉजिक तक ले जाता है, ताकि वह इंटेंट से मैच कर सके.
- प्लैटफ़ॉर्म, कार्रवाई वाले सीन के इंटेंट से मेल खाता है. यह इवेंट को ट्रिगर करता है और डिवाइस को
Canvas
जवाब भेजता है. डिवाइस, रिस्पॉन्स में दिए गए यूआरएल का इस्तेमाल करके वेब ऐप्लिकेशन को लोड करता है (अगर इसे अब तक लोड नहीं किया गया है). - जब वेब ऐप्लिकेशन लोड होता है, तो यह कॉलबैक, इंटरैक्टिव कैनवस एपीआई के साथ रजिस्टर करता है.
अगर कैनवस के जवाब में
data
फ़ील्ड होता है, तोdata
फ़ील्ड की ऑब्जेक्ट की वैल्यू, वेब ऐप्लिकेशन के रजिस्टर किए गएonUpdate
कॉलबैक में भेजी जाती है. इस उदाहरण में, बातचीत के तर्क में डेटा फ़ील्ड के साथCanvas
जवाब भेजा गया है, जिसमेंblue
की वैल्यू वाला वैरिएबल शामिल है. Canvas
रिस्पॉन्स काdata
मान मिलने पर,onUpdate
कॉलबैक आपके वेब ऐप्लिकेशन के लिए कस्टम लॉजिक इस्तेमाल कर सकता है और तय किए गए बदलाव कर सकता है. इस उदाहरण में,onUpdate
कॉलबैकdata
का रंग पढ़ता है और स्क्रीन को नीला कर देता है.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/interactivecanvas/images/canvas-overview-diagram.png?authuser=6&hl=hi)
क्लाइंट-साइड और सर्वर साइड फ़ुलफ़िलमेंट
इंटरैक्टिव कैनवस ऐक्शन बनाते समय, लागू करने के दो तरीकों में से कोई एक चुना जा सकता है: सर्वर से कार्रवाई करना या क्लाइंट की ज़रूरत. सर्वर कार्रवाई के साथ, आप मुख्य रूप से ऐसे एपीआई का इस्तेमाल करते हैं जिनके लिए वेबहुक की ज़रूरत होती है. क्लाइंट-ऑर्डर के साथ, क्लाइंट-साइड एपीआई इस्तेमाल किए जा सकते हैं. साथ ही, ज़रूरत पड़ने पर उन एपीआई का इस्तेमाल किया जा सकता है जिनके लिए कैनवस के अलावा किसी दूसरी सुविधा के लिए वेबहुक की ज़रूरत होती है (जैसे कि खाता जोड़ना).
अगर आपको प्रोजेक्ट बनाने के चरण में, सर्वर वेबहुक पूरा करना है, तो आपको वेब ऐप्लिकेशन अपडेट करने और दोनों के बीच कम्यूनिकेशन को मैनेज करने के लिए, बातचीत का लॉजिक और क्लाइंट-साइड JavaScript मैनेज करने के लिए वेबहुक डिप्लॉय करना होगा.
अगर आप क्लाइंट की बिक्री बनाने का विकल्प चुनते हैं, जो फ़िलहाल वेब ऐप्लिकेशन में उपलब्ध है, तो नए क्लाइंट-साइड एपीआई का इस्तेमाल करें. ऐसा करके, खास तौर से वेब ऐप्लिकेशन में अपना ऐक्शन लॉजिक बनाया जा सकता है. इससे, डेवलपमेंट का अनुभव आसान हो जाता है और बातचीत के दौरान इंतज़ार का समय कम हो जाता है. इसके अलावा, डिवाइस पर उपलब्ध सुविधाओं का भी इस्तेमाल किया जा सकता है. ज़रूरत पड़ने पर, क्लाइंट सर्वर से लॉजिक को भी स्विच किया जा सकता है.
क्लाइंट-साइड क्षमताओं के बारे में ज़्यादा जानकारी के लिए, क्लाइंट-साइड फ़ुलफ़िल के साथ बनाना देखें.
अगले चरण
इंटरैक्टिव कैनवस पर, वेब ऐप्लिकेशन बनाने का तरीका जानने के लिए, वेब ऐप्लिकेशन देखें.
इंटरैक्टिव कैनवस कैनवस की पूरी कार्रवाई के लिए कोड देखने के लिए, GitHub पर नमूना देखें.