Настройте свое веб-приложение

Веб-приложение — это пользовательский интерфейс (UI) для действия, использующего интерактивное полотно. Вы можете использовать существующие веб-технологии (такие как HTML, CSS, JavaScript и WebAssembly) для проектирования и разработки своего веб-приложения. По большей части Interactive Canvas может отображать веб-контент так же, как браузер, но существует несколько ограничений для обеспечения конфиденциальности и безопасности пользователей. Прежде чем приступить к разработке пользовательского интерфейса, рассмотрите принципы проектирования, изложенные в рекомендациях по дизайну . Мы рекомендуем использовать хостинг Firebase для развертывания вашего веб-приложения.

HTML и JavaScript вашего веб-приложения выполняют следующие действия:

На этой странице описаны рекомендуемые способы создания вашего веб-приложения, способы включения связи между вашим диалоговым действием и вашим веб-приложением, а также общие рекомендации и ограничения.

Хотя для создания пользовательского интерфейса вы можете использовать любой метод, Google рекомендует использовать следующие библиотеки:

Архитектура

Google настоятельно рекомендует использовать одностраничную архитектуру приложений. Такой подход обеспечивает оптимальную производительность и поддерживает непрерывное общение с пользователем. Interactive Canvas можно использовать в сочетании с интерфейсными фреймворками, такими как Vue , Angular и React , которые помогают управлять состоянием.

HTML-файл

HTML-файл определяет, как выглядит ваш пользовательский интерфейс. Этот файл также загружает API Interactive Canvas, который обеспечивает связь между вашим веб-приложением и вашим диалоговым действием.

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-файл для инициализации и регистрации обратных вызовов :

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 и создает экземпляры каждого из них при загрузке веб-приложения. Этот модуль также регистрирует обратные вызовы для 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 вы должны разработать свое действие так, чтобы оно было приоритетным. При этом некоторые умные дисплеи поддерживают сенсорное взаимодействие.

Поддержка прикосновений аналогична поддержке разговорных ответов; однако вместо голосового ответа пользователя ваш клиентский 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; });

Поиск неисправностей

Хотя вы можете использовать симулятор в консоли «Действия» для тестирования действия Interactive Canvas во время разработки, вы также можете видеть ошибки, возникающие в вашем веб-приложении Interactive Canvas на рабочих устройствах пользователей. Вы можете просмотреть эти ошибки в журналах Google Cloud Platform.

Чтобы увидеть эти сообщения об ошибках в журналах Google Cloud Platform, выполните следующие действия:

  1. Откройте проект Actions в консоли Actions .
  2. Нажмите «Тест» в верхней части навигации.
  3. Нажмите ссылку «Просмотреть журналы в Google Cloud Platform» .

Ошибки на устройствах ваших пользователей отображаются в хронологическом порядке в средстве просмотра журналов.

Типы ошибок

В журналах Google Cloud Platform можно увидеть три типа ошибок веб-приложений:

  • Тайм-ауты, возникающие, когда ready не вызывается в течение 10 секунд.
  • Тайм-ауты, возникающие, когда обещание, возвращаемое onUpdate() не выполняется в течение 10 секунд.
  • Ошибки выполнения JavaScript, которые не обнаружены в вашем веб-приложении.

Просмотр сведений об ошибке JavaScript

Подробная информация об ошибках выполнения JavaScript в вашем веб-приложении по умолчанию недоступна. Чтобы просмотреть подробную информацию об ошибках выполнения JavaScript, выполните следующие действия:

  1. Убедитесь, что вы настроили соответствующие заголовки ответов HTTP совместного использования ресурсов между источниками (CORS) в файлах веб-приложения. Дополнительные сведения см. в разделе Совместное использование ресурсов между источниками .
  2. Добавьте crossorigin="anonymous" к импортированным тегам <script> в HTML-файле , как показано в следующем фрагменте кода: 
<script crossorigin="anonymous" src="<SRC>"></script>

Рекомендации и ограничения

При разработке веб-приложения примите во внимание следующие рекомендации и ограничения:

  • Нет файлов cookie
  • Нет локального хранилища
  • Нет геолокации
  • Без использования камеры
  • Нет аудио и видео записи
  • Нет всплывающих окон
  • Не превышайте лимит памяти в 200 МБ.
  • Учитывайте заголовок имени действия при рендеринге контента (занимает верхнюю часть экрана).
  • К видео нельзя применять стили.
  • Одновременно можно использовать только один медиа-элемент
  • Нет базы данных Web SQL
  • Нет поддержки интерфейса SpeechRecognition API Web Speech .
  • Настройка темного режима неприменима.
  • Воспроизведение видео поддерживается на интеллектуальных дисплеях. Дополнительную информацию о поддерживаемых форматах и ​​кодеках медиаконтейнеров см. в разделе Кодеки Google Nest Hub .

Совместное использование ресурсов между источниками

Поскольку веб-приложения Interactive Canvas размещаются в iframe, а для источника установлено значение null, необходимо включить совместное использование ресурсов между источниками (CORS) для ваших веб-серверов и ресурсов хранения. Этот процесс позволяет вашим ресурсам принимать запросы от нулевых источников.

Следующие шаги

Чтобы добавить дополнительные функции в свое веб-приложение, см. Продолжение разработки с выполнением на стороне клиента или сервера .