Descripción general (Dialogflow)

Interactive Canvas es un framework compilado en Asistente de Google que permite a los desarrolladores agregar experiencias visuales y envolventes a las acciones de conversación. Esta experiencia visual es una app web interactiva que Asistente envía como respuesta al usuario durante una conversación. A diferencia de las respuestas enriquecidas tradicionales que se alinean en una conversación con Asistente, la app web de Interactive Canvas se renderiza como una vista web en pantalla completa.

Debes usar Interactive Canvas si quieres realizar alguna de las siguientes acciones en tu acción:

  • Crea imágenes en pantalla completa
  • Cómo crear animaciones y transiciones personalizadas
  • Realiza la visualización de datos
  • Cómo crear diseños personalizados y GUI
Figura 1: Se trata de un juego interactivo creado con Interactive Canvas.

Dispositivos compatibles

Interactive Canvas está disponible en los siguientes dispositivos:

  • Pantallas inteligentes
  • Google Nest Hubs

  • Dispositivos móviles Android

Cómo funciona

Una acción que usa Interactive Canvas funciona de manera similar a una acción de conversación normal. El usuario todavía tiene una conversación hacia adelante y hacia atrás con el Asistente para cumplir su objetivo; sin embargo, en lugar de mostrar respuestas intercaladas en la conversación, una acción de Interactive Canvas envía una respuesta al usuario que abre una aplicación web en pantalla completa. El usuario continúa interactuando con la app web por voz o de forma táctil hasta que finaliza la conversación.

Hay varios componentes de una acción que usa Interactive Canvas:

  • Acción de conversación: Es una acción que usa una interfaz de conversación para entregar solicitudes del usuario. Las acciones de lienzo interactivas usan vistas web para procesar respuestas en lugar de tarjetas enriquecidas o respuestas de voz y texto simples. Las acciones de conversación usan los siguientes componentes:
    • Agente de Dialogflow: Es un proyecto de Dialogflow que puedes personalizar para conversar con los usuarios de tu Acción.
    • Entrega: Es el código que se implementa como un webhook que implementa la lógica de conversación para tu agente de Dialogflow y se comunica con tu aplicación web.
  • App web: Es una app web del frontend con imágenes personalizadas que tu acción envía como respuesta a los usuarios durante una conversación. Compila la aplicación web con estándares web como HTML, JavaScript y CSS.

La acción de conversación y la aplicación web se comunican entre sí de la siguiente manera:

  • API de Interactive Canvas: Es una API de JavaScript que incluyes en la aplicación web para habilitar la comunicación entre la aplicación web y tu acción conversacional.
  • HtmlResponse: Es una respuesta que contiene una URL de la aplicación web y datos para pasarla. Puedes usar las bibliotecas cliente de Node.js o Java para mostrar un HtmlResponse.

Para ilustrar cómo funciona Interactive Canvas, imagina una acción hipotética llamada Colores fríos que cambia el color de la pantalla del dispositivo a uno que el usuario especifique. Después de que el usuario invoca la acción, el flujo se ve de la siguiente manera:

  1. El usuario le dice Turn the screen blue al dispositivo con el Asistente integrado.
  2. La plataforma Actions on Google enruta la solicitud del usuario a Dialogflow para hacer coincidir un intent.
  3. Se ejecuta la entrega de los intents coincidentes y se envía un HtmlResponse al dispositivo. El dispositivo usa la URL para cargar la aplicación web si aún no se ha cargado.
  4. Cuando la app web carga, registra devoluciones de llamada con la API de interactiveCanvas. Luego, el valor del objeto data se pasa a la devolución de llamada registrada onUpdate de la app web. En nuestro ejemplo, la entrega envía un HtmlResponse con un data que incluye una variable con el valor blue.
  5. La lógica personalizada de tu aplicación web lee el valor data de HtmlResponse y realiza los cambios definidos. En nuestro ejemplo, se pone la pantalla de color azul.
  6. interactiveCanvas envía la actualización de la devolución de llamada al dispositivo.

Próximos pasos

Para obtener información sobre cómo compilar una acción de Interactive Canvas, consulta la página Descripción general de la compilación.

Para ver el código de una acción completa de Interactive Canvas, consulta el ejemplo.