अपना वेब ऐप्लिकेशन कॉन्फ़िगर करें

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

आपके वेब ऐप्लिकेशन के लिए एचटीएमएल और JavaScript ये काम करते हैं:

इस पेज पर वेब ऐप्लिकेशन बनाने के सुझाए गए तरीकों, 'बातचीत की सुविधा वाली कार्रवाई' और 'वेब ऐप्लिकेशन' के बीच संपर्क बनाने के तरीकों, और सामान्य दिशा-निर्देशों और पाबंदियों के बारे में बताया गया है.

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

आर्किटेक्चर

Google, सिंगल-पेज ऐप्लिकेशन आर्किटेक्चर इस्तेमाल करने का सुझाव देता है. इस तरीके से, परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. साथ ही, उपयोगकर्ताओं को लगातार बातचीत करने का अनुभव भी मिलता है. इंटरैक्टिव कैनवस को Vue, Angular, और React जैसे फ़्रंट-एंड फ़्रेमवर्क के साथ इस्तेमाल किया जा सकता है. इससे राज्य के मैनेजमेंट में मदद मिलती है.

एचटीएमएल फ़ाइल

एचटीएमएल फ़ाइल तय करती है कि आपका यूज़र इंटरफ़ेस (यूआई) कैसा दिखता है. यह फ़ाइल, Interactive Canvas API को भी लोड करती है, जो आपके वेब ऐप्लिकेशन और बातचीत की सुविधा वाली कार्रवाई के बीच कम्यूनिकेशन को चालू करता है.

एचटीएमएल

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Interactive Canvas Sample</title>

    <!-- Disable favicon requests -->
    <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">

    <!-- Load Interactive Canvas JavaScript -->
    <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

    <!-- Load PixiJS for graphics rendering -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <!-- Load Stats.js for fps monitoring -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

    <!-- Load custom CSS -->
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="view" class="view">
      <div class="debug">
        <div class="stats"></div>
        <div class="logs"></div>
      </div>
    </div>
    <!-- Load custom JavaScript after elements are on page -->
    <script src="js/log.js"></script>
    <script type="module" src="js/main.js"></script>
  </body>
</html>
    

बातचीत की सुविधा वाली कार्रवाई और वेब ऐप्लिकेशन के बीच बातचीत करना

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

action.js

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

callbacks शुरू करने और रजिस्टर करने के लिए, अपनी एचटीएमएल फ़ाइल में interactiveCanvas.ready(callbacks); जोड़ें:

JavaScript

/**
* This class is used as a wrapper for Google Assistant Canvas Action class
* along with its callbacks.
*/
export class Action {
 /**
  * @param  {Phaser.Scene} scene which serves as a container of all visual
  * and audio elements.
  */
 constructor(scene) {
   this.canvas = window.interactiveCanvas;
   this.gameScene = scene;
   const that = this;
   this.intents = {
     GUESS: function(params) {
       that.gameScene.guess(params);
     },
     DEFAULT: function() {
       // do nothing, when no command is found
     },
   };
 }

 /**
  * Register all callbacks used by the Interactive Canvas Action
  * executed during game creation time.
  */
 setCallbacks() {
   const that = this;
   // Declare the Interactive Canvas action callbacks.
   const callbacks = {
     onUpdate(data) {
       const intent = data[0].google.intent;
       that.intents[intent ? intent.name.toUpperCase() : 'DEFAULT'](intent.params);
     },
   };
   // Called by the Interactive Canvas web app once web app has loaded to
   // register callbacks.
   this.canvas.ready(callbacks);
 }
}
    

main.js

main.js JavaScript मॉड्यूल, action.js और scene.js फ़ाइलों को इंपोर्ट करता है और वेब ऐप्लिकेशन लोड होने पर, दोनों के इंस्टेंस बनाता है. यह मॉड्यूल, इंटरैक्टिव कैनवस के लिए कॉलबैक भी रजिस्टर करता है.

JavaScript

import {Action} from './action.js';
import {Scene} from './scene.js';
window.addEventListener('load', () => {
  window.scene = new Scene();
  // Set Google Assistant Canvas Action at scene level
  window.scene.action = new Action(scene);
  // Call setCallbacks to register Interactive Canvas
  window.scene.action.setCallbacks();
});
    

scene.js

scene.js फ़ाइल आपके वेब ऐप्लिकेशन के लिए सीन तैयार करती है. नीचे दी गई जानकारी, scene.js से ली गई है:

JavaScript

const view = document.getElementById('view');

// initialize rendering and set correct sizing
this.radio = window.devicePixelRatio;
this.renderer = PIXI.autoDetectRenderer({
  transparent: true,
  antialias: true,
  resolution: this.radio,
  width: view.clientWidth,
  height: view.clientHeight,
});
this.element = this.renderer.view;
this.element.style.width = `${this.renderer.width / this.radio}px`;
this.element.style.height = `${(this.renderer.height / this.radio)}px`;
view.appendChild(this.element);

// center stage and normalize scaling for all resolutions
this.stage = new PIXI.Container();
this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2);
this.stage.scale.set(Math.max(this.renderer.width,
    this.renderer.height) / 1024);

// load a sprite from a svg file
this.sprite = PIXI.Sprite.from('triangle.svg');
this.sprite.anchor.set(0.5);
this.sprite.tint = 0x00FF00; // green
this.sprite.spin = true;
this.stage.addChild(this.sprite);

// toggle spin on touch events of the triangle
this.sprite.interactive = true;
this.sprite.buttonMode = true;
this.sprite.on('pointerdown', () => {
  this.sprite.spin = !this.sprite.spin;
});
    

टच इंटरैक्शन की सुविधा दें

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

बातचीत के दौरान मिलने वाले जवाबों को बढ़ावा देना, बातचीत के जवाबों में मदद करने जैसा ही है. हालांकि, उपयोगकर्ता के बोलकर दिए जाने वाले जवाब के बजाय, आपका क्लाइंट-साइड JavaScript टच इंटरैक्शन की खोज करता है और उनका इस्तेमाल वेब ऐप्लिकेशन में एलिमेंट बदलने के लिए करता है.

सैंपल में इसका एक उदाहरण देखा जा सकता है, जिसमें Pixi.js लाइब्रेरी का इस्तेमाल किया जाता है:

JavaScript

…
this.sprite = PIXI.Sprite.from('triangle.svg');
…
this.sprite.interactive = true; // Enables interaction events
this.sprite.buttonMode = true; // Changes `cursor` property to `pointer` for PointerEvent
this.sprite.on('pointerdown', () => {
  this.sprite.spin = !this.sprite.spin;
});
    

समस्या हल करना

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

अपने Google Cloud Platform लॉग में गड़बड़ी के इन मैसेज को देखने के लिए, यह तरीका अपनाएं:

  1. Actions कंसोल में अपना Actions प्रोजेक्ट खोलें.
  2. सबसे ऊपर मौजूद नेविगेशन में जांच करें पर क्लिक करें.
  3. Google Cloud Platform में लॉग देखें लिंक पर क्लिक करें.

आपके उपयोगकर्ताओं के डिवाइसों से जुड़ी गड़बड़ियां, लॉग व्यूअर में समय के हिसाब से दिखती हैं.

गड़बड़ी के प्रकार

वेब ऐप्लिकेशन से जुड़ी तीन तरह की गड़बड़ियां होती हैं, जिन्हें Google Cloud Platform के लॉग में देखा जा सकता है:

  • ready को 10 सेकंड में कॉल न करने पर होने वाले टाइम आउट
  • ऐसे टाइम आउट जो onUpdate() के ज़रिए वापस किए गए प्रॉमिस को 10 सेकंड में पूरा नहीं करते हैं
  • JavaScript रनटाइम की ऐसी गड़बड़ियां जो आपके वेब ऐप्लिकेशन में नहीं आतीं

JavaScript गड़बड़ी की जानकारी देखें

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

  1. पक्का करें कि आपने अपनी वेब ऐप्लिकेशन फ़ाइलों में सही क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) एचटीटीपी रिस्पॉन्स हेडर कॉन्फ़िगर किए हों. ज़्यादा जानकारी के लिए, क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग देखें.
  2. अपनी एचटीएमएल फ़ाइल में, इंपोर्ट किए गए <script> टैग में crossorigin="anonymous" जोड़ें, जैसा कि इस कोड स्निपेट में दिखाया गया है:
<script crossorigin="anonymous" src="<SRC>"></script>

दिशा-निर्देश और पाबंदियां

अपना वेब ऐप्लिकेशन डेवलप करते समय, इन दिशा-निर्देशों और पाबंदियों को ध्यान में रखें:

  • कोई कुकी नहीं है
  • डिवाइस में लोकल स्टोरेज नहीं है
  • कोई भौगोलिक स्थान नहीं
  • कैमरे का कोई इस्तेमाल नहीं किया गया है
  • कोई ऑडियो या वीडियो रिकॉर्डिंग नहीं है
  • कोई पॉप-अप नहीं
  • मेमोरी का साइज़ 200 एमबी से कम रखें
  • कॉन्टेंट को रेंडर करते समय, कार्रवाई के नाम वाले हेडर को ध्यान में रखें (स्क्रीन के ऊपर वाले हिस्से में दिखता है)
  • वीडियो पर कोई स्टाइल लागू नहीं की जा सकती
  • एक बार में सिर्फ़ एक मीडिया एलिमेंट का इस्तेमाल किया जा सकता है
  • कोई वेब एसक्यूएल डेटाबेस नहीं है
  • Web Speech API के SpeechRecognition इंटरफ़ेस के साथ काम नहीं करता.
  • गहरे रंग वाले मोड की सेटिंग लागू नहीं है
  • वीडियो चलाने की सुविधा स्मार्ट डिसप्ले पर काम करती है. इस्तेमाल किए जा सकने वाले मीडिया कंटेनर फ़ॉर्मैट और कोडेक के बारे में ज़्यादा जानकारी के लिए, Google Nest Hub कोडेक देखें.

क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग

इंटरैक्टिव कैनवस वेब ऐप्लिकेशन को iframe में होस्ट किया जाता है और ऑरिजिन शून्य पर सेट होता है. इसलिए, आपको अपने वेब सर्वर और स्टोरेज रिसॉर्स के लिए, क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) चालू करना होगा. इस प्रोसेस से आपकी एसेट, शून्य ऑरिजिन से अनुरोध स्वीकार कर पाती हैं.

अगले चरण

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