আপনার ওয়েব অ্যাপ তৈরি করুন (Dialogflow)

একটি ওয়েব অ্যাপ হল একটি অ্যাকশনের UI যা ইন্টারেক্টিভ ক্যানভাস ব্যবহার করে। আপনি আপনার ওয়েব অ্যাপ ডিজাইন এবং ডেভেলপ করতে বিদ্যমান ওয়েব প্রযুক্তি (HTML, CSS, এবং JavaScript) ব্যবহার করতে পারেন। বেশিরভাগ ক্ষেত্রে, ইন্টারেক্টিভ ক্যানভাস একটি ব্রাউজারের মতো ওয়েব সামগ্রী রেন্ডার করতে সক্ষম, তবে ব্যবহারকারীর গোপনীয়তা এবং নিরাপত্তার জন্য কিছু বিধিনিষেধ প্রয়োগ করা হয়েছে। আপনি আপনার UI ডিজাইন করা শুরু করার আগে, Design guidelines বিভাগে বর্ণিত নকশা নীতিগুলি বিবেচনা করুন।

আপনার ওয়েব অ্যাপের জন্য HTML এবং JavaScript নিম্নলিখিতগুলি করে:

  • ইন্টারেক্টিভ ক্যানভাস ইভেন্ট কলব্যাক নিবন্ধন করুন।
  • ইন্টারেক্টিভ ক্যানভাস জাভাস্ক্রিপ্ট লাইব্রেরি শুরু করুন।
  • রাজ্যের উপর ভিত্তি করে আপনার ওয়েব অ্যাপ আপডেট করার জন্য কাস্টম যুক্তি প্রদান করুন।

এই পৃষ্ঠাটি আপনার ওয়েব অ্যাপ তৈরি করার প্রস্তাবিত উপায়গুলি, কীভাবে আপনার ওয়েব অ্যাপ এবং পূরণের মধ্যে যোগাযোগ সক্ষম করতে হয় এবং সাধারণ নির্দেশিকা এবং বিধিনিষেধগুলি নিয়ে যায়৷

আপনি যখন আপনার UI তৈরি করতে যে কোনও পদ্ধতি ব্যবহার করতে পারেন, Google নিম্নলিখিত লাইব্রেরিগুলি ব্যবহার করার পরামর্শ দেয়:

স্থাপত্য

Google দৃঢ়ভাবে একটি একক-পৃষ্ঠা অ্যাপ্লিকেশন আর্কিটেকচার ব্যবহার করার পরামর্শ দেয়৷ এই পদ্ধতিটি সর্বোত্তম পারফরম্যান্সের জন্য অনুমতি দেয় এবং ক্রমাগত কথোপকথন ব্যবহারকারীর অভিজ্ঞতাকে সমর্থন করে। ইন্টারেক্টিভ ক্যানভাসকে Vue , Angular , এবং React এর মত ফ্রন্ট-এন্ড ফ্রেমওয়ার্কের সাথে ব্যবহার করা যেতে পারে, যা রাষ্ট্র পরিচালনায় সাহায্য করে।

HTML ফাইল

HTML ফাইল আপনার UI দেখতে কেমন তা নির্ধারণ করে। এই ফাইলটি ইন্টারেক্টিভ ক্যানভাস জাভাস্ক্রিপ্ট লাইব্রেরিও লোড করে, যা আপনার ওয়েব অ্যাপ এবং আপনার কথোপকথনমূলক অ্যাকশনের মধ্যে যোগাযোগ সক্ষম করে। 

<!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); কলব্যাক শুরু এবং নিবন্ধন করতে আপনার HTML ফাইলে: 

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

স্পর্শ মিথস্ক্রিয়া সমর্থন

আপনার ইন্টারেক্টিভ ক্যানভাস অ্যাকশন আপনার ব্যবহারকারীর স্পর্শের পাশাপাশি তাদের ভোকাল ইনপুটগুলিতে সাড়া দিতে পারে। ইন্টারেক্টিভ ক্যানভাস ডিজাইনের নির্দেশিকা অনুসারে, আপনার অ্যাকশনকে "ভয়েস-ফার্স্ট" হিসেবে গড়ে তুলতে হবে। বলা হচ্ছে, কিছু স্মার্ট ডিসপ্লে স্পর্শ মিথস্ক্রিয়া সমর্থন করে।

সমর্থন স্পর্শ কথোপকথন প্রতিক্রিয়া সমর্থন করার অনুরূপ; যাইহোক, ব্যবহারকারীর কাছ থেকে ভোকাল প্রতিক্রিয়ার পরিবর্তে, আপনার ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট স্পর্শ ইন্টারঅ্যাকশন খোঁজে এবং ওয়েব অ্যাপে উপাদান পরিবর্তন করতে সেগুলি ব্যবহার করে।

আপনি নমুনায় এর একটি উদাহরণ দেখতে পারেন, যা 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 API-এর মাধ্যমে update কলব্যাক হিসাবে পাঠানো হয়। পরিপূর্ণতার যুক্তি আছে যা spin এর মানের উপর ভিত্তি করে একটি অভিপ্রায় ট্রিগার করে। 

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

আরো বৈশিষ্ট্য যোগ করুন

এখন যেহেতু আপনি বেসিকগুলি শিখেছেন, আপনি ক্যানভাস-নির্দিষ্ট APIগুলির সাথে আপনার অ্যাকশনকে উন্নত এবং কাস্টমাইজ করতে পারেন৷ এই বিভাগটি ব্যাখ্যা করে কিভাবে আপনার ইন্টারেক্টিভ ক্যানভাস অ্যাকশনে এই APIগুলি প্রয়োগ করতে হয়।

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() কলব্যাক বলা হয় যখন আপনি ব্যবহারকারীর কাছে আপনার SSML প্রতিক্রিয়াতে একটি অনন্য নামের সাথে একটি <mark> ট্যাগ অন্তর্ভুক্ত করেন। Snowman নমুনা থেকে নিম্নলিখিত উদ্ধৃতিগুলিতে, 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();
      }
    },
...

বিধিনিষেধ

আপনি যখন আপনার ওয়েব অ্যাপ বিকাশ করবেন তখন নিম্নলিখিত বিধিনিষেধগুলি বিবেচনা করুন:

  • কুকিজ নেই
  • স্থানীয় স্টোরেজ নেই
  • কোন ভূ-অবস্থান নেই
  • ক্যামেরার ব্যবহার নেই
  • কোনো পপআপ নেই
  • 200mb মেমরি সীমার নিচে থাকুন
  • 3P শিরোনাম পর্দার উপরের অংশ নেয়
  • ভিডিওতে কোনো স্টাইল প্রয়োগ করা যাবে না
  • একটি সময়ে শুধুমাত্র একটি মিডিয়া উপাদান ব্যবহার করা যেতে পারে
  • HLS ভিডিও নেই
  • কোনো ওয়েব SQL ডাটাবেস নেই
  • Web Speech API- এর SpeechRecognition ইন্টারফেসের জন্য কোনো সমর্থন নেই।
  • কোন অডিও বা ভিডিও রেকর্ডিং
  • ডার্ক মোড সেটিং প্রযোজ্য নয়

ক্রস-অরিজিন রিসোর্স শেয়ারিং

যেহেতু ইন্টারেক্টিভ ক্যানভাস ওয়েব অ্যাপগুলি একটি আইফ্রেমে হোস্ট করা হয়েছে এবং মূলটি নাল সেট করা হয়েছে, আপনাকে অবশ্যই আপনার ওয়েব সার্ভার এবং স্টোরেজ সংস্থানগুলির জন্য ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) সক্ষম করতে হবে৷ এটি আপনার সম্পদগুলিকে শূন্য উত্স থেকে অনুরোধগুলি গ্রহণ করার অনুমতি দেয়৷