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

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

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

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

हालांकि, अपना यूआई बनाने के लिए किसी भी तरीके का इस्तेमाल किया जा सकता है, लेकिन Google का सुझाव है कि इन लाइब्रेरी पर लागू करें:

  • Greensock: मुश्किल ऐनिमेशन बनाने के लिए.
  • Pixi.js: WebGL पर 2D ग्राफ़िक बनाने के लिए.
  • Three.js: WebGL पर 3D ग्राफ़िक बनाने के लिए.
  • HTML5 कैनवस ड्रॉइंग: आसान ड्रॉइंग के लिए.

आर्किटेक्चर

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

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

एचटीएमएल फ़ाइल से तय होता है कि आपका यूज़र इंटरफ़ेस (यूआई) कैसा दिखेगा. यह फ़ाइल Google News ऐप्लिकेशन 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>

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

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

action.js

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

शुरू करने के लिए, अपनी एचटीएमएल फ़ाइल में 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;
});

समस्या का हल

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

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

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

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

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

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

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

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

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

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

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

अपने प्रॉडक्ट को बेहतर बनाने के लिए, इन दिशा-निर्देशों और पाबंदियों का ध्यान रखें आपका वेब ऐप्लिकेशन:

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

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

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

अगले चरण

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