Kể từ ngày 13 tháng 6 năm 2023, Hành động trò chuyện không còn được dùng nữa. Để biết thêm thông tin, hãy xem phần Hành động trò chuyện ngừng hoạt động.

Trang này được dịch bởi Cloud Translation API.

Định cấu hình ứng dụng web của bạn

Ứng dụng web là giao diện người dùng (UI) cho một Hành động sử dụng Canvas tương tác. Bạn có thể sử dụng các công nghệ web hiện có (như HTML, CSS, JavaScript và WebAssembly) để thiết kế và phát triển ứng dụng web của bạn. Trong hầu hết trường hợp, Tương tác Canvas có thể hiển thị nội dung trên web như một trình duyệt, nhưng có một số hạn chế để tăng cường bảo mật và bảo vệ quyền riêng tư của người dùng. Trước khi bắt đầu thiết kế giao diện người dùng, hãy xem xét các nguyên tắc thiết kế được nêu trong Nguyên tắc thiết kế. Bạn nên sử dụng tính năng Lưu trữ Firebase để triển khai ứng dụng web của bạn.

HTML và JavaScript cho ứng dụng web của bạn sẽ thực hiện những việc sau:

Khởi chạy thư viện JavaScript tương tác Canvas.
Đăng ký lệnh gọi lại sự kiện Canvas tương tác.
Cung cấp logic tuỳ chỉnh để cập nhật ứng dụng web dựa trên trạng thái.

Trang này giới thiệu các cách đề xuất để xây dựng ứng dụng web của bạn, cách bật hoạt động giao tiếp giữa tính năng Hành động trò chuyện và ứng dụng web cũng như các nguyên tắc chung và các hạn chế khác.

Thư viện đề xuất

Mặc dù bạn có thể sử dụng bất kỳ phương pháp nào để xây dựng giao diện người dùng, nhưng bạn nên sử dụng các thư viện sau:

Greensock: Để tạo ảnh động phức tạp.
Pixi.js: Dùng để vẽ đồ hoạ 2D trên WebGL.
Three.js: Để vẽ đồ hoạ 3D trên WebGL.
Bản vẽ Canvas HTML5: Dành cho các bản vẽ đơn giản.

Kiến trúc

Bạn nên sử dụng cấu trúc ứng dụng trang đơn. Chiến dịch này mang lại hiệu suất tối ưu và giúp hoạt động trò chuyện liên tục trải nghiệm người dùng. Canvas tương tác có thể được sử dụng cùng với giao diện người dùng những khung làm việc như Vue, Angular và React, để giúp quản lý trạng thái.

Tệp HTML

Tệp HTML xác định giao diện người dùng của bạn. Tệp này cũng tải trang báo cáo Tương tác Canvas API giúp giao tiếp giữa ứng dụng web của bạn và Hành động trò chuyện.

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>

Giao tiếp giữa Hành động trò chuyện và ứng dụng web

Sau khi bạn tạo xong ứng dụng web và Hành động trò chuyện rồi tải trong cửa sổ Thư viện Canvas trong tệp ứng dụng web, bạn cần xác định cách ứng dụng web và Hành động trò chuyện tương tác. Để thực hiện việc này, hãy sửa đổi các tệp chứa ứng dụng web của bạn logic.

`action.js`

Tệp này chứa mã để xác định lệnh gọi lại và gọi phương thức thông qua interactiveCanvas. Lệnh gọi lại cho phép ứng dụng web của bạn ứng dụng để phản hồi thông tin hoặc yêu cầu từ Hành động trò chuyện, trong khi các phương thức cung cấp phương thức gửi thông tin hoặc yêu cầu đến Hành động trò chuyện.

Thêm interactiveCanvas.ready(callbacks); vào tệp HTML để khởi chạy và đăng ký lệnh gọi lại:

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`

Mô-đun JavaScript main.js nhập các tệp action.js và scene.js và tạo bản sao của từng thành phần khi ứng dụng web tải. Mô-đun này cũng đăng ký các lệnh gọi lại cho 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`

Tệp scene.js tạo cảnh cho ứng dụng web của bạn. Sau đây là một phần trích dẫn từ 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;
});

Hỗ trợ tương tác chạm

Thao tác trên Canvas tương tác có thể phản hồi lại thao tác chạm của người dùng cũng như âm thanh đầu vào. Theo nguyên tắc thiết kế Canvas tương tác, bạn nên phát triển Hành động của mình thành "ưu tiên giọng nói". Dù vậy, một số màn hình hỗ trợ tương tác chạm.

Việc hỗ trợ thao tác chạm cũng tương tự như việc hỗ trợ phản hồi khi trò chuyện; tuy nhiên, thay vì phản hồi bằng giọng nói của người dùng, JavaScript phía máy khách sẽ có giao diện cho các tương tác chạm và sử dụng các tương tác đó để thay đổi các thành phần trong ứng dụng web.

Bạn có thể xem ví dụ về điều này trong mẫu, sử dụng phương thức Thư viện 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;
});

Khắc phục sự cố

Mặc dù bạn có thể sử dụng trình mô phỏng trong bảng điều khiển Actions để thử nghiệm Tương tác Hành động trên Canvas trong quá trình phát triển, bạn cũng có thể xem các lỗi xảy ra trong Ứng dụng web Canvas tương tác trên màn hình của người dùng thiết bị trong phiên bản chính thức. Bạn có thể xem lỗi trong nhật ký Google Cloud Platform của bạn.

Cách xem những thông báo lỗi này trong Google Cloud Nhật ký nền tảng, hãy làm theo các bước sau:

Mở dự án Actions (Thao tác) trong Bảng điều khiển Actions.
Nhấp vào Kiểm thử ở thanh điều hướng trên cùng.
Nhấp vào đường liên kết Xem nhật ký trong Google Cloud Platform.

Lỗi từ người dùng của bạn thiết bị xuất hiện theo thứ tự thời gian trong trình xem nhật ký.

Các loại lỗi

Có ba loại lỗi ứng dụng web mà bạn có thể thấy trong nhật ký của Google Cloud Platform:

Thời gian chờ xảy ra khi ready không được gọi trong vòng 10 giây
Thời gian chờ xảy ra khi không thực hiện lời hứa do onUpdate() trả về trong vòng 10 giây
Lỗi thời gian chạy JavaScript không được phát hiện trong ứng dụng web của bạn

Xem thông tin chi tiết về lỗi JavaScript

Thông tin chi tiết về lỗi thời gian chạy JavaScript trong ứng dụng web của bạn chưa có sẵn theo mặc định. Để xem thông tin chi tiết về các lỗi thời gian chạy JavaScript, hãy làm theo các bước sau:

Đảm bảo rằng bạn đã thiết lập chế độ chia sẻ tài nguyên phù hợp trên nhiều nguồn gốc (CORS) Tiêu đề phản hồi HTTP trong các tệp ứng dụng web. Để biết thêm thông tin, hãy xem bài viết Chia sẻ tài nguyên trên nhiều nguồn gốc.
Thêm crossorigin="anonymous" vào thẻ <script> đã nhập trong Tệp HTML, như minh hoạ trong đoạn mã sau:

<script crossorigin="anonymous" src="<SRC>"></script>

Nguyên tắc và quy định hạn chế

Hãy cân nhắc các nguyên tắc và hạn chế sau đây khi bạn phát triển ứng dụng ứng dụng web của bạn:

Không có cookie
Không có bộ nhớ cục bộ
Không có định vị vị trí
Không sử dụng máy ảnh
Không có bản ghi âm hoặc video
Không có cửa sổ bật lên
Không vượt quá giới hạn bộ nhớ 200 MB
Xem xét tiêu đề Tên hành động khi hiển thị nội dung (số người sử dụng) phần trên của màn hình)
Không thể áp dụng kiểu cho video
Bạn chỉ có thể sử dụng một phần tử nội dung nghe nhìn tại một thời điểm
Không có cơ sở dữ liệu Web SQL
Không hỗ trợ giao diện SpeechRecognition của Web Speech API.
Không áp dụng được chế độ tối
Tính năng phát video được hỗ trợ trên màn hình thông minh. Để biết thêm thông tin về định dạng vùng chứa nội dung nghe nhìn và bộ mã hoá và giải mã được hỗ trợ, hãy xem bộ mã hoá và giải mã của Google Nest Hub.

Chia sẻ tài nguyên trên nhiều nguồn gốc

Vì các ứng dụng web Canvas tương tác được lưu trữ trong iframe và nguồn gốc được đặt thành rỗng, bạn phải bật tính năng chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) cho máy chủ web và tài nguyên lưu trữ của bạn. Quy trình này cho phép tài sản của bạn chấp nhận yêu cầu từ các nguồn gốc rỗng.

Nếu nội dung nghe nhìn và hình ảnh của bạn được lưu trữ bằng Firebase, hãy xem Tạo đường liên kết động của miền tuỳ chỉnh để định cấu hình CORS.
Nếu nội dung nghe nhìn và hình ảnh của bạn có trên Cloud Storage, hãy xem Định cấu hình tính năng chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) để định cấu hình CORS.

Các bước tiếp theo

Để thêm các tính năng khác vào ứng dụng web, hãy xem phần Tiếp tục xây dựng với ứng dụng hoặc phương thức thực hiện phía máy chủ.