برنامه وب خود را پیکربندی کنید

یک برنامه وب، رابط کاربری (UI) برای یک Action است که از Canvas تعاملی استفاده می کند. می توانید از فناوری های وب موجود (مانند HTML، CSS، جاوا اسکریپت و WebAssembly) برای طراحی و توسعه برنامه وب خود استفاده کنید. در بیشتر موارد، Interactive Canvas می‌تواند محتوای وب را مانند یک مرورگر ارائه کند، اما محدودیت‌هایی برای حفظ حریم خصوصی و امنیت کاربر اعمال می‌شود. قبل از شروع طراحی UI خود، اصول طراحی ذکر شده در دستورالعمل های طراحی را در نظر بگیرید. توصیه می کنیم از میزبانی Firebase برای استقرار برنامه وب خود استفاده کنید.

HTML و جاوا اسکریپت برای برنامه وب شما موارد زیر را انجام می دهد:

این صفحه به روش‌های توصیه‌شده برای ساخت برنامه وب، نحوه فعال کردن ارتباط بین کنش مکالمه و برنامه وب، و دستورالعمل‌ها و محدودیت‌های کلی می‌پردازد.

اگرچه می‌توانید از هر روشی برای ایجاد رابط کاربری خود استفاده کنید، Google توصیه می‌کند از کتابخانه‌های زیر استفاده کنید:

  • Greensock : برای ساخت انیمیشن های پیچیده.
  • Pixi.js : برای ترسیم گرافیک های دو بعدی در WebGL.
  • Three.js : برای ترسیم گرافیک های سه بعدی در WebGL.
  • طراحی بوم HTML5 : برای طراحی های ساده.

معماری

گوگل اکیدا استفاده از معماری اپلیکیشن تک صفحه ای را توصیه می کند. این رویکرد به عملکرد مطلوب اجازه می دهد و از تجربه کاربر مکالمه مداوم پشتیبانی می کند. Canvas تعاملی را می توان در ارتباط با فریم ورک های فرانت اند مانند Vue ، Angular و React استفاده کرد که به مدیریت حالت کمک می کنند.

فایل HTML

فایل HTML نحوه ظاهر رابط کاربری شما را مشخص می کند. این فایل همچنین Interactive Canvas API را بارگیری می کند، که ارتباط بین برنامه وب و کنش مکالمه شما را امکان پذیر می کند.

HTML

<!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>

بین اکشن مکالمه و برنامه وب ارتباط برقرار کنید

بعد از اینکه برنامه وب و کنش مکالمه خود را ساختید و در کتابخانه Interactive Canvas در فایل برنامه وب خود بارگیری کردید، باید نحوه تعامل برنامه وب و کنش مکالمه خود را مشخص کنید. برای انجام این کار، فایل های حاوی منطق برنامه وب خود را تغییر دهید.

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 جاوا اسکریپت فایل های action.js و scene.js را وارد می کند و نمونه هایی از هر یک از آنها را هنگام بارگیری برنامه وب ایجاد می کند. این ماژول همچنین برای Canvas تعاملی تماس‌های برگشتی را ثبت می‌کند.

جاوا اسکریپت

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

از تعاملات لمسی پشتیبانی کنید

کنش بوم تعاملی شما می تواند به لمس کاربر و همچنین ورودی های صوتی آنها پاسخ دهد. طبق دستورالعمل‌های طراحی بوم تعاملی ، باید Action خود را به گونه‌ای توسعه دهید که «اولین صدا» باشد. همانطور که گفته شد، برخی از نمایشگرهای هوشمند از تعاملات لمسی پشتیبانی می کنند.

پشتیبانی از لمس مشابه پشتیبانی از پاسخ های مکالمه است. با این حال، به جای پاسخ صوتی از سوی کاربر، جاوا اسکریپت سمت سرویس گیرنده شما به دنبال تعاملات لمسی است و از آنها برای تغییر عناصر در برنامه وب استفاده می کند.

شما می توانید نمونه ای از این را در نمونه مشاهده کنید که از کتابخانه 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;
});

عیب یابی

در حالی که می‌توانید از شبیه‌ساز در کنسول Actions برای آزمایش کنش Interactive Canvas خود در حین توسعه استفاده کنید، همچنین می‌توانید خطاهایی را که در برنامه وب Interactive Canvas شما در دستگاه‌های کاربران در حال تولید رخ می‌دهد، مشاهده کنید. می‌توانید این خطاها را در گزارش‌های Google Cloud Platform خود مشاهده کنید.

برای مشاهده این پیام‌های خطا در گزارش‌های Google Cloud Platform، مراحل زیر را دنبال کنید:

  1. پروژه Actions خود را در کنسول Actions باز کنید.
  2. روی تست در پیمایش بالا کلیک کنید.
  3. روی پیوند View logs in Google Cloud Platform کلیک کنید.

خطاهای دستگاه های کاربران شما به ترتیب زمانی در نمایشگر گزارش ها ظاهر می شوند.

انواع خطا

سه نوع خطای برنامه وب وجود دارد که می توانید در گزارش های Google Cloud Platform مشاهده کنید:

  • تایم اوت هایی که در زمان ready رخ می دهند در عرض 10 ثانیه فراخوانی نمی شوند
  • مهلت زمانی رخ می دهد که وعده ای که توسط onUpdate() در عرض 10 ثانیه انجام نمی شود
  • خطاهای زمان اجرا جاوا اسکریپت که در برنامه وب شما مشاهده نمی شود

جزئیات خطای جاوا اسکریپت را مشاهده کنید

جزئیات خطاهای زمان اجرا جاوا اسکریپت در برنامه وب شما به طور پیش فرض در دسترس نیست. برای مشاهده جزئیات خطاهای زمان اجرا جاوا اسکریپت، مراحل زیر را دنبال کنید:

  1. مطمئن شوید که سرصفحه‌های پاسخ HTTP اشتراک‌گذاری منابع متقاطع (CORS) را در فایل‌های برنامه وب خود پیکربندی کرده‌اید. برای اطلاعات بیشتر، به اشتراک‌گذاری منابع متقاطع مراجعه کنید.
  2. همانطور که در قطعه کد زیر نشان داده شده است crossorigin="anonymous" به تگ های <script> وارد شده در فایل HTML خود اضافه کنید:
<script crossorigin="anonymous" src="<SRC>"></script>

دستورالعمل ها و محدودیت ها

هنگام توسعه برنامه وب خود، دستورالعمل ها و محدودیت های زیر را در نظر بگیرید:

  • بدون کوکی
  • بدون ذخیره سازی محلی
  • بدون موقعیت جغرافیایی
  • بدون استفاده از دوربین
  • بدون ضبط صدا و تصویر
  • بدون پاپ آپ
  • کمتر از حد مجاز 200 مگابایت حافظه باقی بمانید
  • هنگام رندر کردن محتوا، هدر نام اقدام را در نظر بگیرید (بخش بالایی صفحه را اشغال می کند)
  • هیچ سبکی را نمی توان برای ویدیوها اعمال کرد
  • فقط یک عنصر رسانه ممکن است در یک زمان استفاده شود
  • پایگاه داده Web SQL وجود ندارد
  • از رابط SpeechRecognition در Web Speech API پشتیبانی نمی شود.
  • تنظیم حالت تاریک قابل اجرا نیست
  • پخش ویدئو در نمایشگرهای هوشمند پشتیبانی می شود. برای اطلاعات بیشتر در مورد قالب‌ها و کدک‌های کانتینر رسانه پشتیبانی شده، به کدک‌های Google Nest Hub مراجعه کنید.

به اشتراک گذاری منابع متقاطع

از آنجایی که برنامه‌های وب Interactive Canvas در iframe میزبانی می‌شوند و مبدا بر روی null تنظیم شده است، باید اشتراک‌گذاری منابع متقاطع (CORS) را برای سرورهای وب و منابع ذخیره‌سازی خود فعال کنید. این فرآیند به دارایی‌های شما اجازه می‌دهد تا درخواست‌هایی را از مبداهای پوچ بپذیرند.

مراحل بعدی

برای افزودن ویژگی‌های بیشتر به برنامه وب خود، به ادامه ساخت با انجام مشتری یا سمت سرور مراجعه کنید.