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

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

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

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

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

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

आर्किटेक्चर

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

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

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

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

callbacks शुरू करने और रजिस्टर करने के लिए, अपनी एचटीएमएल फ़ाइल में 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 वैरिएबल की वैल्यू को interactiveCanvas एपीआई के ज़रिए update कॉलबैक के तौर पर भेजा जाता है. फ़ुलफ़िलमेंट में ऐसा लॉजिक होता है जो 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()

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

उपयोगकर्ता के गेम हार जाने पर, उसे दिए जाने वाले जवाब में 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 हेडर, स्क्रीन के ऊपरी हिस्से पर मौजूद होता है
  • वीडियो पर कोई स्टाइल लागू नहीं की जा सकती
  • एक बार में सिर्फ़ एक मीडिया एलिमेंट का इस्तेमाल किया जा सकता है
  • HLS वाला कोई वीडियो नहीं है
  • कोई वेब एसक्यूएल डेटाबेस नहीं है
  • Web Speech API के SpeechRecognition इंटरफ़ेस पर काम नहीं करता.
  • कोई ऑडियो या वीडियो रिकॉर्डिंग नहीं है
  • गहरे रंग वाले मोड की सेटिंग लागू नहीं है

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

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