กําหนดค่าเว็บแอป

เว็บแอปคืออินเทอร์เฟซผู้ใช้ (UI) สำหรับการดำเนินการที่ใช้ Interactive Canvas คุณสามารถใช้เทคโนโลยีเว็บที่มีอยู่ (เช่น HTML, CSS, JavaScript และ WebAssembly) เพื่อออกแบบและพัฒนาเว็บแอป โดยมากแล้ว การโต้ตอบ Canvas แสดงผลเนื้อหาเว็บได้เหมือนเบราว์เซอร์ แต่มีข้อจำกัดบางอย่าง เพื่อความเป็นส่วนตัวและความปลอดภัยของผู้ใช้ ก่อนจะเริ่มออกแบบ UI ให้พิจารณาหลักการออกแบบที่ระบุไว้ในหลักเกณฑ์ในการออกแบบ เราขอแนะนำให้ใช้โฮสติ้งของ Firebase ในการทำให้เว็บแอปใช้งานได้

HTML และ JavaScript สำหรับเว็บแอปทำงานต่อไปนี้

หน้านี้จะกล่าวถึงวิธีต่างๆ ที่แนะนำในการสร้างเว็บแอป รวมถึงวิธีเปิดใช้ การสื่อสารระหว่างการดำเนินการแบบการสนทนากับเว็บแอป รวมถึงหลักเกณฑ์ทั่วไป และข้อจำกัด

แม้ว่าคุณจะสามารถใช้วิธีสร้าง UI ของคุณด้วยวิธีการใดก็ได้ แต่ Google ขอแนะนำว่า ไลบรารีต่อไปนี้

  • Greensock: สำหรับการสร้างภาพเคลื่อนไหวที่ซับซ้อน
  • Pixi.js: สำหรับการวาดกราฟิก 2D บน WebGL
  • Three.js: สำหรับการวาดกราฟิก 3D บน WebGL
  • ภาพวาด HTML5 Canvas: สำหรับภาพวาดง่ายๆ

สถาปัตยกรรม

Google ขอแนะนำเป็นอย่างยิ่งให้ใช้สถาปัตยกรรมแอปพลิเคชันหน้าเว็บเดียว ช่วงเวลานี้ แนวทางที่ทำให้เกิดประสิทธิภาพสูงสุดและสนับสนุนการสนทนาอย่างต่อเนื่อง ประสบการณ์ของผู้ใช้ Canvas แบบอินเทอร์แอกทีฟสามารถใช้ร่วมกับฟรอนท์เอนด์ เฟรมเวิร์ก เช่น Vue, Angular และ React ซึ่งจะช่วยในการจัดการรัฐ

ไฟล์ HTML

ไฟล์ HTML จะกำหนดรูปลักษณ์ของ UI ไฟล์นี้ยังโหลดแท็ก 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>

สื่อสารระหว่างการดำเนินการแบบการสนทนากับเว็บแอป

หลังจากสร้างเว็บแอปและ "การดำเนินการแบบการสนทนา" และโหลดในฟีเจอร์อินเทอร์แอกทีฟแล้ว ไลบรารี Canvas ในไฟล์เว็บแอป คุณจะต้องกำหนดวิธีที่เว็บแอปและ การโต้ตอบแบบการสนทนา โดยแก้ไขไฟล์ที่มีเว็บแอป

action.js

ไฟล์นี้มีโค้ดที่ใช้กำหนด callback และเรียกใช้ เมธอดจนถึง interactiveCanvas Callback จะช่วยให้เว็บ เพื่อตอบสนองต่อข้อมูลหรือคําขอจากการดําเนินการแบบการสนทนา ขณะที่เมธอด เป็นวิธีส่งข้อมูลหรือคำขอไปยังการดำเนินการแบบการสนทนา

เพิ่ม interactiveCanvas.ready(callbacks); ลงในไฟล์ HTML เพื่อเริ่มต้นและ Callback ที่ลงทะเบียน:

JavaScript

/**
* 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

โมดูล JavaScript main.js จะนำเข้าไฟล์ action.js และ scene.js และ จะสร้างอินสแตนซ์แต่ละรายการเมื่อเว็บแอปโหลดขึ้น และโมดูลนี้ยัง ลงทะเบียน Callback สำหรับ Interactive Canvas

JavaScript

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:

JavaScript

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

รองรับการโต้ตอบการสัมผัส

การดำเนินการ Interactive Canvas สามารถตอบสนองต่อการแตะของผู้ใช้ได้เช่นเดียวกับ จากเสียงร้องของเด็กๆ ตามหลักเกณฑ์การออกแบบ Interactive Canvas คุณควรพัฒนาการดำเนินการให้เป็นแบบ "เน้นเสียงเป็นหลัก" อย่างไรก็ตาม บางคนมีความฉลาด แสดงการสนับสนุนการโต้ตอบการสัมผัส

การสนับสนุนการสัมผัสคล้ายกับการสนับสนุนการสนทนา อย่างไรก็ตาม แทนที่จะส่งเสียงตอบกลับจากผู้ใช้ JavaScript ฝั่งไคลเอ็นต์ของคุณจะ สำหรับการโต้ตอบด้วยการสัมผัสและใช้การโต้ตอบดังกล่าวเพื่อเปลี่ยนองค์ประกอบในเว็บแอป

คุณสามารถดูตัวอย่างได้ในตัวอย่าง ซึ่งใช้ฟิลด์ ไลบรารี Pixi.js

JavaScript

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

การแก้ปัญหา

ขณะที่คุณใช้เครื่องมือจำลองในคอนโซลการดำเนินการเพื่อทดสอบระบบ Canvas Action ระหว่างการพัฒนา คุณยังสามารถดูข้อผิดพลาดที่เกิดขึ้นภายใน เว็บแอป Canvas แบบอินเทอร์แอกทีฟสำหรับผู้ใช้ อุปกรณ์ที่ใช้งานจริง คุณสามารถดูข้อมูลเหล่านี้ ในบันทึก Google Cloud Platform ของคุณ

วิธีดูข้อความแสดงข้อผิดพลาดเหล่านี้ใน Google Cloud บันทึกแพลตฟอร์ม ให้ทำตามขั้นตอนต่อไปนี้

  1. เปิดโปรเจ็กต์ Actions ในคอนโซล Actions
  2. คลิกทดสอบในแถบนำทางด้านบน
  3. คลิกลิงก์ดูบันทึกใน Google Cloud Platform

ข้อผิดพลาดจากผู้ใช้ของคุณ อุปกรณ์จะปรากฏในโปรแกรมดูบันทึกตามลำดับเวลา

ประเภทของข้อผิดพลาด

ข้อผิดพลาดของเว็บแอปที่คุณเห็นในบันทึกของ Google Cloud Platform มีอยู่ 3 ประเภทดังนี้

  • การหมดเวลาที่เกิดขึ้นเมื่อไม่ได้เรียกใช้ ready ภายใน 10 วินาที
  • การหมดเวลาที่เกิดขึ้นเมื่อไม่มีการทำตามสัญญาที่ onUpdate() ส่งกลับมา ภายใน 10 วินาที
  • ข้อผิดพลาดเกี่ยวกับรันไทม์ของ JavaScript ที่ไม่ได้ตรวจพบภายในเว็บแอป

ดูรายละเอียดข้อผิดพลาด JavaScript

รายละเอียดของข้อผิดพลาดรันไทม์ของ JavaScript ภายในเว็บแอปจะไม่ พร้อมใช้งานโดยค่าเริ่มต้น หากต้องการดูรายละเอียดข้อผิดพลาดรันไทม์ของ JavaScript ให้ทำตาม ขั้นตอนเหล่านี้:

  1. ตรวจสอบว่าคุณได้กําหนดค่าการแชร์ทรัพยากรแบบข้ามต้นทางที่เหมาะสมแล้ว (CORS) ส่วนหัวการตอบกลับ HTTP ในไฟล์เว็บแอป สำหรับข้อมูลเพิ่มเติม ดูการแชร์ทรัพยากรข้ามต้นทาง
  2. เพิ่ม crossorigin="anonymous" ลงในแท็ก <script> ที่คุณนำเข้าใน ไฟล์ HTML ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
<script crossorigin="anonymous" src="<SRC>"></script>

หลักเกณฑ์และข้อจำกัด

พิจารณาหลักเกณฑ์และข้อจำกัดต่อไปนี้ขณะที่พัฒนา เว็บแอปของคุณ

  • ไม่มีคุกกี้
  • ไม่มีพื้นที่เก็บข้อมูลในเครื่อง
  • ไม่มีข้อมูลตำแหน่งทางภูมิศาสตร์
  • ไม่ได้ใช้กล้อง
  • ไม่มีการบันทึกเสียงหรือวิดีโอ
  • ไม่มีป๊อปอัป
  • ใช้หน่วยความจำไม่เกิน 200 MB
  • คำนึงถึงส่วนหัวของชื่อการทำงานเมื่อแสดงผลเนื้อหา (มีโฆษณา ส่วนบนของหน้าจอ)
  • ไม่มีรูปแบบที่ใช้กับวิดีโอได้
  • ใช้องค์ประกอบสื่อได้ครั้งละ 1 รายการเท่านั้น
  • ไม่มีฐานข้อมูล SQL ในเว็บ
  • ไม่รองรับอินเทอร์เฟซ SpeechRecognition ของ Web Speech API
  • การตั้งค่าโหมดมืดไม่เกี่ยวข้อง
  • จออัจฉริยะรองรับการเล่นวิดีโอ ดูข้อมูลเพิ่มเติมเกี่ยวกับ รูปแบบคอนเทนเนอร์สื่อและตัวแปลงรหัสที่รองรับ โปรดดูตัวแปลงรหัส Google Nest Hub

การแชร์ทรัพยากรข้ามแหล่งที่มา

เนื่องจากเว็บแอป Interactive Canvas โฮสต์อยู่ใน iframe และมีการตั้งค่าต้นทาง เป็นค่าว่าง คุณต้องเปิดใช้การแชร์ทรัพยากรแบบข้ามต้นทาง (CORS) สำหรับเว็บเซิร์ฟเวอร์และทรัพยากรพื้นที่เก็บข้อมูลของคุณ กระบวนการนี้ช่วยให้เนื้อหา ยอมรับคำขอจากต้นทางที่ไม่มีข้อมูล

ขั้นตอนถัดไป

หากต้องการเพิ่มฟีเจอร์เพิ่มเติมลงในเว็บแอปของคุณ โปรดดูหัวข้อสร้างด้วยไคลเอ็นต์ต่อไปหรือ Fulfillment ฝั่งเซิร์ฟเวอร์