আপনার ওয়েব অ্যাপ কনফিগার করুন

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

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

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

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

স্থাপত্য

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

HTML ফাইল

HTML ফাইল আপনার UI দেখতে কেমন তা নির্ধারণ করে। এই ফাইলটি ইন্টারেক্টিভ ক্যানভাস 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

এই ফাইলটিতে interactiveCanvas মাধ্যমে কলব্যাক সংজ্ঞায়িত করার এবং পদ্ধতি চালু করার কোড রয়েছে। কলব্যাক আপনার ওয়েব অ্যাপকে কথোপকথনমূলক অ্যাকশন থেকে তথ্য বা অনুরোধের প্রতিক্রিয়া জানাতে দেয়, যখন পদ্ধতিগুলি কথোপকথনমূলক অ্যাকশনে তথ্য বা অনুরোধ পাঠানোর একটি উপায় প্রদান করে।

interactiveCanvas.ready(callbacks); কলব্যাক শুরু এবং নিবন্ধন করতে আপনার HTML ফাইলে:

জাভাস্ক্রিপ্ট

/**
* 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 ফাইল আমদানি করে এবং যখন ওয়েব অ্যাপ লোড হয় তখন তাদের প্রতিটির উদাহরণ তৈরি করে। এই মডিউলটি ইন্টারেক্টিভ ক্যানভাসের জন্য কলব্যাকও নিবন্ধন করে।

জাভাস্ক্রিপ্ট

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 থেকে একটি উদ্ধৃতি:

জাভাস্ক্রিপ্ট

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

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

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

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

আপনি নমুনায় এর একটি উদাহরণ দেখতে পারেন, যা 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;
});

সমস্যা সমাধান

যখন আপনি বিকাশের সময় আপনার ইন্টারেক্টিভ ক্যানভাস অ্যাকশন পরীক্ষা করতে অ্যাকশন কনসোলে সিমুলেটর ব্যবহার করতে পারেন, তখন আপনি ব্যবহারকারীদের ডিভাইসে প্রোডাকশনে আপনার ইন্টারেক্টিভ ক্যানভাস ওয়েব অ্যাপের মধ্যে ঘটে যাওয়া ত্রুটিগুলিও দেখতে পারেন। আপনি আপনার Google ক্লাউড প্ল্যাটফর্ম লগগুলিতে এই ত্রুটিগুলি দেখতে পারেন৷

আপনার Google ক্লাউড প্ল্যাটফর্ম লগগুলিতে এই ত্রুটি বার্তাগুলি দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. অ্যাকশন কনসোলে আপনার অ্যাকশন প্রকল্প খুলুন।
  2. শীর্ষ নেভিগেশন পরীক্ষা ক্লিক করুন.
  3. Google ক্লাউড প্ল্যাটফর্মে লগ দেখুন লিঙ্কে ক্লিক করুন।

আপনার ব্যবহারকারীদের ডিভাইস থেকে ত্রুটিগুলি লগ ভিউয়ারে কালানুক্রমিক ক্রমে প্রদর্শিত হয়৷

ত্রুটির ধরন

Google ক্লাউড প্ল্যাটফর্ম লগগুলিতে আপনি তিন ধরনের ওয়েব অ্যাপ ত্রুটি দেখতে পাবেন:

  • 10 সেকেন্ডের মধ্যে ready হলে টাইমআউট বলা হয় না
  • onUpdate() দ্বারা ফেরত দেওয়া প্রতিশ্রুতি 10 সেকেন্ডের মধ্যে পূরণ না হলে টাইমআউটগুলি ঘটে
  • JavaScript রানটাইম ত্রুটি যা আপনার ওয়েব অ্যাপের মধ্যে ধরা পড়ে না

জাভাস্ক্রিপ্ট ত্রুটি বিবরণ দেখুন

আপনার ওয়েব অ্যাপের মধ্যে JavaScript রানটাইম ত্রুটির বিবরণ ডিফল্টরূপে উপলব্ধ নয়। JavaScript রানটাইম ত্রুটির বিশদ বিবরণ দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. আপনি আপনার ওয়েব অ্যাপ ফাইলগুলিতে যথাযথ ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) HTTP প্রতিক্রিয়া শিরোনামগুলি কনফিগার করেছেন তা নিশ্চিত করুন৷ আরও তথ্যের জন্য, ক্রস-অরিজিন রিসোর্স শেয়ারিং দেখুন।
  2. আপনার HTML ফাইলে আপনার আমদানি করা <script> ট্যাগগুলিতে crossorigin="anonymous" যোগ করুন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে:
<script crossorigin="anonymous" src="<SRC>"></script>

নির্দেশিকা এবং বিধিনিষেধ

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

  • কুকিজ নেই
  • স্থানীয় স্টোরেজ নেই
  • কোন ভূ-অবস্থান নেই
  • ক্যামেরার ব্যবহার নেই
  • কোন অডিও বা ভিডিও রেকর্ডিং
  • কোনো পপআপ নেই
  • 200 MB মেমরি সীমার নিচে থাকুন
  • বিষয়বস্তু রেন্ডার করার সময় অ্যাকশন নাম শিরোনামটি বিবেচনা করুন (স্ক্রীনের উপরের অংশ দখল করে)
  • ভিডিওতে কোনো স্টাইল প্রয়োগ করা যাবে না
  • একটি সময়ে শুধুমাত্র একটি মিডিয়া উপাদান ব্যবহার করা যেতে পারে
  • কোনো ওয়েব SQL ডাটাবেস নেই
  • Web Speech API- এর SpeechRecognition ইন্টারফেসের জন্য কোনো সমর্থন নেই।
  • ডার্ক মোড সেটিং প্রযোজ্য নয়
  • ভিডিও প্লেব্যাক স্মার্ট ডিসপ্লেতে সমর্থিত। সমর্থিত মিডিয়া কন্টেইনার ফরম্যাট এবং কোডেক সম্পর্কে আরও তথ্যের জন্য, Google Nest Hub কোডেক দেখুন।

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

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

পরবর্তী পদক্ষেপ

আপনার ওয়েব অ্যাপে আরও বৈশিষ্ট্য যোগ করতে, ক্লায়েন্ট বা সার্ভার-সাইড পরিপূর্ণতার সাথে বিল্ডিং চালিয়ে যান দেখুন।