इंटरैक्टिव कैनवस

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

अपनी कार्रवाई में इनमें से कोई भी काम करने के लिए, इंटरैक्टिव कैनवस का इस्तेमाल करें:

फ़ुल-स्क्रीन विज़ुअल बनाएं
पसंद के मुताबिक ऐनिमेशन और ट्रांज़िशन बनाएं
डेटा विज़ुअलाइज़ेशन करें
कस्टम लेआउट और GUI बनाना

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

वे डिवाइस जिन पर 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 का रंग पढ़ता है और स्क्रीन को नीला कर देता है.

क्लाइंट-साइड और सर्वर साइड फ़ुलफ़िलमेंट

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

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

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

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

क्लाइंट-साइड क्षमताओं के बारे में ज़्यादा जानकारी के लिए, क्लाइंट-साइड फ़ुलफ़िल के साथ बनाना देखें.

अगले चरण

इंटरैक्टिव कैनवस पर, वेब ऐप्लिकेशन बनाने का तरीका जानने के लिए, वेब ऐप्लिकेशन देखें.

इंटरैक्टिव कैनवस कैनवस की पूरी कार्रवाई के लिए कोड देखने के लिए, GitHub पर नमूना देखें.