Configura tu aplicación web

Una app web es la interfaz de usuario (IU) de una acción que usa Interactive Canvas. Puedes utilizar tecnologías web existentes (como HTML, CSS, JavaScript y WebAssembly) para diseñar y desarrollar tu app web. En su mayoría, el modo interactivo Canvas puede renderizar contenido web como un navegador, pero hay algunas restricciones. y garantizar la privacidad y seguridad del usuario. Antes de comenzar a diseñar tu IU, ten en cuenta los principios de diseño descritos en los lineamientos de diseño. Recomendamos usar Firebase Hosting para implementar tu app web.

El código HTML y JavaScript de tu aplicación web permiten hacer lo siguiente:

En esta página, se explican las formas recomendadas de compilar tu app web, cómo habilitarla la comunicación entre tu acción de conversación y tu app web, y los lineamientos generales y restricciones.

Si bien puedes usar cualquier método para compilar la IU, Google recomienda usar la las siguientes bibliotecas:

Arquitectura

Google recomienda encarecidamente usar una arquitectura de aplicación de una sola página. Esta permite un rendimiento óptimo y admite conversaciones continuas la experiencia del usuario. El lienzo interactivo se puede usar junto con un frontend frameworks como Vue, Angular y React, que ayudan con la administración del estado.

Archivo HTML

El archivo HTML define el aspecto de tu IU. Este archivo también carga el API de Canvas, que permite la comunicación entre tu app web y tu acción de conversació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>

Cómo comunicarse entre la acción de conversación y la aplicación web

Después de compilar tu app web y la acción de conversación, y cargarla en el de Canvas en el archivo de tu app web, debes definir cómo se Las acciones de conversación interactúan. Para ello, modifica los archivos que contienen tu app web lógica.

action.js

Este archivo contiene el código para definir devoluciones de llamada y, luego, invocar métodos a través de interactiveCanvas. Las devoluciones de llamadas permiten que el tráfico para responder a información o solicitudes de la acción de conversación, mientras que los métodos Proporcionan una manera de enviar información o solicitudes a la acción de conversación.

Agrega interactiveCanvas.ready(callbacks); a tu archivo HTML para inicializar y registrar devoluciones de llamada:

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

El módulo de JavaScript main.js importa los archivos action.js y scene.js, y crea instancias de cada uno de ellos cuando se carga la aplicación web. En este módulo, también registra devoluciones de llamada para 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

El archivo scene.js construye la escena para tu app web. A continuación, se muestra un extracto de 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;
});

Compatibilidad con interacciones táctiles

Tu acción de Interactive Canvas puede responder tanto al tacto del usuario como al sus entradas vocales. Según los lineamientos de diseño de Interactive Canvas debes desarrollar tu acción para que "priorice la voz". Dicho esto, algunas herramientas las pantallas admiten interacciones táctiles.

La compatibilidad con el tacto es similar a la asistencia para respuestas conversacionales. Sin embargo, en lugar de una respuesta vocal del usuario, el JavaScript del cliente para las interacciones táctiles y las usa para cambiar elementos en la aplicación web.

Puedes ver un ejemplo de esto en la muestra, en el que se usa Biblioteca 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;
});

Soluciona problemas

Si bien puedes usar el simulador en la Consola de Actions para probar tu Canvas durante el desarrollo, también puedes ver los errores que ocurren en tu App web de Interactive Canvas sobre los usuarios dispositivos en producción. Puedes ver estas errores en tus registros de Google Cloud.

Para ver estos mensajes de error en tu cuenta de Google Cloud, sigue estos pasos:

  1. Abre tu proyecto de acciones en la Consola de Actions.
  2. Haz clic en Probar en la barra de navegación superior.
  3. Haz clic en el vínculo Ver registros en Google Cloud Platform.

Errores de las aplicaciones aparecen en orden cronológico en el visor de registros.

Tipos de errores

Hay tres tipos de errores de aplicaciones web que puedes ver en los registros de Google Cloud Platform:

  • Tiempos de espera que se producen cuando no se llama a ready en el transcurso de 10 segundos
  • Tiempos de espera que se producen cuando no se cumple la promesa que muestra onUpdate(). en 10 segundos
  • Errores de tiempo de ejecución de JavaScript que no se detectan en tu app web

Ver detalles de errores de JavaScript

Los detalles de los errores de tiempo de ejecución de JavaScript en tu app web no son disponible de forma predeterminada. Para ver los detalles de los errores del entorno de ejecución de JavaScript, sigue estos pasos: estos pasos:

  1. Asegúrate de que configuraste el uso compartido de recursos entre dominios adecuado (CORS) en los archivos de tu app web. Para obtener más información, consulta Uso compartido de recursos entre dominios.
  2. Agrega crossorigin="anonymous" a tus etiquetas <script> importadas en tu archivo HTML, como se muestra en el siguiente fragmento de código:
<script crossorigin="anonymous" src="<SRC>"></script>

Lineamientos y restricciones

Ten en cuenta los siguientes lineamientos y restricciones durante el desarrollo tu aplicación web:

  • No hay cookies
  • Sin almacenamiento local
  • Sin ubicación geográfica
  • No se está usando la cámara
  • Sin grabación de audio o video
  • No hay ventanas emergentes.
  • Mantente por debajo del límite de 200 MB de memoria
  • Ten en cuenta el encabezado de nombre de la acción cuando renderices contenido (ocupa parte superior de la pantalla).
  • No se pueden aplicar estilos a los videos.
  • Solo se puede usar un elemento multimedia a la vez
  • Sin base de datos de Web SQL
  • No hay compatibilidad con la interfaz SpeechRecognition de la API de Web Speech.
  • La configuración del modo oscuro no es aplicable
  • Las pantallas inteligentes admiten la reproducción de videos. Para obtener más información sobre el formatos y códecs compatibles de contenedores multimedia, consulta códecs de Google Nest Hub.

Uso compartido de recursos multiorigen

Porque las apps web de Interactive Canvas se alojan en un iframe y el origen está establecido. como nulo, debes habilitar el uso compartido de recursos entre dominios (CORS) para tus servidores web y recursos de almacenamiento. Este proceso permite que tus recursos Aceptar solicitudes de orígenes nulos.

Próximos pasos

Para agregar más funciones a tu app web, consulta Seguir creando con un cliente o la entrega del servidor.