अपना वेब ऐप्लिकेशन बनाएं (Dialogflow)

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

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

  • इंटरैक्टिव कैनवस इवेंट कॉलबैक रजिस्टर करें.
  • इंटरैक्टिव कैनवस JavaScript लाइब्रेरी शुरू करें.
  • राज्य के हिसाब से अपने वेब ऐप्लिकेशन को अपडेट करने के लिए, अपने हिसाब से लॉजिक दें.

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

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

आर्किटेक्चर

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

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

एचटीएमएल फ़ाइल से तय होता है कि आपका यूज़र इंटरफ़ेस (यूआई) कैसा दिखेगा. यह फ़ाइल Google News ऐप्लिकेशन कैनवस JavaScript लाइब्रेरी, जो कम्यूनिकेशन को चालू करती है आपके वेब ऐप्लिकेशन और बातचीत वाली कार्रवाई के बीच में.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Immersive 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/df-asdk/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/main.js"></script>
    <script src="js/log.js"></script>
  </body>
</html>

ग्राहक को आइटम भेजने और वेब ऐप्लिकेशन के बीच बातचीत करें

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

action.js

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

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

//action.js
class Action {
  constructor(scene) {
    this.canvas = window.interactiveCanvas;
    this.scene = scene;
    const that = this;
    this.commands = {
      TINT: function(data) {
        that.scene.sprite.tint = data.tint;
      },
      SPIN: function(data) {
        that.scene.sprite.spin = data.spin;
      },
      RESTART_GAME: function(data) {
        that.scene.button.texture = that.scene.button.textureButton;
        that.scene.sprite.spin = true;
        that.scene.sprite.tint = 0x0000FF; // blue
        that.scene.sprite.rotation = 0;
      },
    };
  }

  /**
   * Register all callbacks used by Interactive Canvas
   * executed during scene creation time.
   *
   */
  setCallbacks() {
    const that = this;
    // declare interactive canvas callbacks
    const callbacks = {
      onUpdate(data) {
        try {
          that.commands[data.command.toUpperCase()](data);
        } catch (e) {
          // do nothing, when no command is sent or found
        }
      },
    };
    // called by the Interactive Canvas web app once web app has loaded to
    // register callbacks
    this.canvas.ready(callbacks);
  }
}

main.js

यह फ़ाइल आपके वेब ऐप्लिकेशन के लिए सीन बनाती है. इस उदाहरण में, यह sendTextQuery() के साथ दिखाई गई प्रॉमिस की सफलता और असफलता के मामले. कॉन्टेंट बनाने यह main.js से लिया गया एक छोटा सा हिस्सा है:

// main.js
const view = document.getElementById('view');
// initialize rendering and set correct sizing
this.renderer = PIXI.autoDetectRenderer({
  transparent: true,
  antialias: true,
  resolution: this.radio,
  width: view.clientWidth,
  height: view.clientHeight,
});
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 लाइब्रेरी:

...
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;
});
...

इस मामले में, spin वैरिएबल की वैल्यू update कॉलबैक के तौर पर, interactiveCanvas एपीआई. फ़ुलफ़िलमेंट में लॉजिक मौजूद है जो spin की वैल्यू के आधार पर एक इंटेंट ट्रिगर करता है.

...
app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});
...

ज़्यादा सुविधाएं जोड़ें

अब जब आपने ऐक्शन की बुनियादी बातें जान ली हैं, तो अपने ऐक्शन को बेहतर और पसंद के मुताबिक बनाया जा सकता है खास तौर पर कैनवस पर एपीआई के साथ. इस सेक्शन में, इन एपीआई को लागू करने का तरीका बताया गया है अपने इंटरैक्टिव कैनवस ऐक्शन में.

sendTextQuery()

sendTextQuery() वाला तरीका, बातचीत वाली कार्रवाई के लिए टेक्स्ट क्वेरी भेजता है प्रोग्रामेटिक रूप से किसी इंटेंट को शुरू करने के लिए. यह सैंपल, sendTextQuery() का इस्तेमाल करके जब उपयोगकर्ता किसी बटन पर क्लिक करे, तब त्रिकोण-स्पिनिंग गेम को फिर से चालू करना. जब उपयोगकर्ता "गेम रीस्टार्ट करें" पर क्लिक करता है बटन, sendTextQuery() Restart game को कॉल करता है इंटेंट और प्रॉमिस देता है. इस प्रॉमिस का नतीजा यह होता है कि SUCCESS अगर इंटेंट ट्रिगर किया गया है और अगर यह नहीं है, तो BLOCKED. यह स्निपेट इंटेंट को ट्रिगर करता है और प्रॉमिस की सफलता और असफलता के मामलों को हैंडल करता है:

//main.js
...
that.action.canvas.sendTextQuery('Restart game')
    .then((res) => {
      if (res.toUpperCase() === 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        that.button.texture = that.button.textureButtonDisabled;
        that.sprite.spin = false;
      } else {
        console.log(`Request in flight: ${res}`);
      }
    });
...

अगर प्रॉमिस का नतीजा SUCCESS आता है, तो Restart game इंटेंट एक HtmlResponse भेजता है आपके वेब ऐप्लिकेशन से लिंक करने के लिए:

//index.js
...
app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
...

यह HtmlResponse, onUpdate() कॉलबैक को ट्रिगर करता है, जो कोड को एक्ज़ीक्यूट करता है नीचे RESTART_GAME कोड स्निपेट में:

//action.js
...
RESTART_GAME: function(data) {
  that.scene.button.texture = that.scene.button.textureButton;
  that.scene.sprite.spin = true;
  that.scene.sprite.tint = 0x0000FF; // blue
  that.scene.sprite.rotation = 0;
},
...

OnTtsMark()

OnTtsMark() कॉलबैक को तब कॉल किया जाता है, जब यूनीक नाम वाले <mark> टैग को शामिल किया जाता है उपयोगकर्ता को आपका एसएसएमएल जवाब. स्नोमैन सैंपल से लिए गए इन हिस्सों में, OnTtsMark() वेब ऐप्लिकेशन के ऐनिमेशन को संबंधित TTS के साथ समन्वयित करता है आउटपुट. जब कार्रवाई ने उपयोगकर्ता से माफ़ करें, आप हार गए कहा, तो वेब ऐप्लिकेशन सही शब्द चुना जाता है और उपयोगकर्ता को अक्षर दिखाए जाते हैं.

इसके जवाब में इंटेंट Game Over Reveal Word में एक कस्टम मार्क शामिल होता है: गेम हारने पर उपयोगकर्ता:

//index.js
...
app.intent('Game Over Reveal Word', (conv, {word}) => {
  conv.ask(`<speak>Sorry, you lost.<mark name="REVEAL_WORD"/> The word is ${word}.` +
    `${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
  conv.ask(new HtmlResponse());
});
...

इसके बाद, यह कोड स्निपेट OnTtsMark() कॉलबैक को रजिस्टर करता है और नाम की जांच करता है मार्क का इस्तेमाल करता है और revealCorrectWord() फ़ंक्शन को एक्ज़ीक्यूट करता है. इससे वेब ऐप्लिकेशन अपडेट हो जाता है:

//action.js
...
setCallbacks() {
  const that = this;
  // declare assistant canvas action callbacks
  const callbacks = {
    onTtsMark(markName) {
      if (markName === 'REVEAL_WORD') {
        // display the correct word to the user
        that.revealCorrectWord();
      }
    },
...

पाबंदियां

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

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

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

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