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:
- Inicializa la biblioteca JavaScript interactiva de Canvas.
- Registra las devoluciones de llamada de eventos de Interactive Canvas.
- Proporciona una lógica personalizada para actualizar tu app web según el estado.
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.
Bibliotecas recomendadas
Si bien puedes usar cualquier método para compilar tu IU, Google recomienda usar las siguientes bibliotecas:
- Greensock: Para crear animaciones complicadas.
- Pixi.js: Para dibujar gráficos 2D en WebGL.
- Three.js: Para dibujar gráficos 3D en WebGL.
- Dibujo HTML5 en lienzo: Para dibujos simples.
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:
- Abre tu proyecto de acciones en la Consola de Actions.
- Haz clic en Probar en la barra de navegación superior.
- 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:
- 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.
- 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.
- Si tus imágenes y contenido multimedia se alojan en Firebase, consulta Crea vínculos dinámicos de dominio personalizado para configurar CORS.
- Si tus imágenes y medios están en Cloud Storage, consulta Configura el uso compartido de recursos entre dominios (CORS) para configurar CORS.
Próximos pasos
Para agregar más funciones a tu app web, consulta Continúa compilando con entregas del cliente o del servidor.