Configura tu aplicación web

Una app web es la interfaz de usuario (IU) de una acción que usa Interactive Canvas. Puedes usar tecnologías web existentes (como HTML, CSS, JavaScript y WebAssembly) para diseñar y desarrollar tu aplicación web. En su mayor parte, Interactive Canvas puede renderizar contenido web como un navegador, pero hay algunas restricciones aplicadas para 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 aplicación web.

El código HTML y JavaScript de la app web hace lo siguiente:

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

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

Arquitectura

Google recomienda usar una arquitectura de aplicación de una sola página. Este enfoque permite un rendimiento óptimo y admite una experiencia de conversación continua del usuario. Interactive Canvas se puede usar junto con frameworks de frontend, 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 la API de Interactive Canvas, que permite la comunicación entre tu aplicación 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>
    

Comunicación entre la acción de conversación y la app web

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

action.js

Este archivo contiene el código para definir callbacks y, luego, invocar métodos mediante interactiveCanvas. Las devoluciones de llamada permiten que tu app web responda a información o solicitudes desde la acción de conversación, mientras que los métodos proporcionan una forma 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 callbacks:

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 main.js de JavaScript importa los archivos action.js y scene.js, y crea instancias de cada uno de ellos cuando se carga la app web. 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 de tu app web. El siguiente es 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 a las entradas de voz. Según los lineamientos de diseño de Interactive Canvas, debes desarrollar tu acción para que "priorice la voz". Dicho esto, algunas pantallas inteligentes admiten interacciones táctiles.

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

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

Solución de problemas

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

Para ver estos mensajes de error en tus registros de Google Cloud Platform, 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.

Los errores de los dispositivos de los usuarios aparecen en orden cronológico en el visor de registros.

Tipos de errores

Existen tres tipos de errores de apps web que se pueden ver en los registros de Google Cloud Platform:

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

Ver detalles del error de JavaScript

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

  1. Asegúrate de haber configurado los encabezados de respuesta HTTP de uso compartido de recursos entre dominios (CORS) adecuados en los archivos de la app web. Para obtener más información, consulta Uso compartido de recursos entre dominios.
  2. Agrega crossorigin="anonymous" a las 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 cuando desarrolles tu app web:

  • No hay cookies
  • Sin almacenamiento local
  • Sin ubicación geográfica
  • Sin uso de 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 del nombre de la acción cuando renderices contenido (ocupa la parte superior de la pantalla).
  • No se pueden aplicar estilos a los videos
  • Solo se puede usar un elemento multimedia a la vez
  • No hay base de datos Web SQL
  • No es compatible con la interfaz SpeechRecognition de la API de Web Speech.
  • No se aplica la configuración del modo oscuro
  • La reproducción de video es compatible con las pantallas inteligentes. Para obtener más información sobre los códecs y formatos de contenedores de contenido multimedia compatibles, consulta Códecs de Google Nest Hub.

Uso compartido de recursos entre orígenes

Debido a que las apps web de Interactive Canvas están alojadas en un iframe y el origen está configurado 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 acepten solicitudes de orígenes nulos.

Próximos pasos

Para agregar más funciones a tu app web, consulta Continúa compilando con entregas del cliente o del servidor.