Saltar al contenido

Mejore su flujo de trabajo de desarrollo con Interactive Canvas DevTools

Mejore su flujo de trabajo de desarrollo con Interactive Canvas DevTools

Lienzo interactivo Ayuda a los desarrolladores a crear aplicaciones multimodales para juegos, narraciones y experiencias educativas en pantallas inteligentes como Nest Hub y Nest Hub Max. La configuración de una aplicación de lienzo interactivo implica la creación de una aplicación web, un modelo de conversación y una ejecución basada en el servidor para responder a los comandos de voz. . Estos tres componentes deben desarrollarse para probar sus aplicaciones con el simulador en la Consola de acciones. Esto funciona para equipos que pueden crear los tres al mismo tiempo … pero significa que Todos debe estar conectado, incluso si solo desea probarlo la red Parte de tu aplicación. En muchos casos, la aplicación web proporciona la mayor parte de la funcionalidad de una aplicación de lienzo interactivo. Recientemente publicamos DevTools de Canvas interactivo, una nueva extensión de Chrome que desagrega este proceso de desarrollo.

Extensión Interactive Canvas DevTool

Uso de DevTools de Canvas interactivo

Después de instalar el DevTools de Canvas interactivo Verás uno nuevo en Chrome Web Store. Lienzo interactivo Tab si Abrir herramientas de desarrollo de Chrome.

Si carga su aplicación web en su navegador desde una URL alojada públicamente, localhost, o un dispositivo remoto en su red, puede usar esta pestaña para interactuar directamente con las devoluciones de llamada de Interactive Canvas registradas en la página para probar su experiencia de manera rápida e iterativa. Los chips de sugerencia se crean después de cada ejecución para que pueda repetir el mismo comando más adelante.

Para comenzar aún más rápido, puede ir a la pestaña Configuración y hacer clic en ese / Importar SDK Botón. Esto abre una selección de directorio. Puede seleccionar la carpeta SDK de su proyecto. La extensión detecta cargas útiles JSON y etiquetas TTS en su proyecto y las muestra automáticamente como chips de sugerencias.

Cambios en objetos JSON históricos

Si los campos del objeto JSON han cambiado, puede mostrar los cambios en una diferencia de color.

Los métodos que envían datos a su webhook se redirigen a la pestaña Historial. Esta pestaña contiene una lista de todas las consultas de texto y cambios de estado del lienzo en orden cronológico inverso. De esta manera, puede ver cómo los cambios en su aplicación web afectarían el estado de su conversación. Siempre que cambia el estado del lienzo, puede ver una representación visual de los campos modificados.

Diferentes niveles de notificación cuando se usa una operación que no es compatible con Interactive Canvas

Diferentes niveles de notificación cuando se usa una operación que no es compatible con Interactive Canvas.

Hay otras características que mejoran la experiencia del desarrollador. Por ejemplo, para los métodos de navegador que utilizan no son compatibles con Interactive Canvas, opcionalmente puede registrar una advertencia o lanzar un error si intenta usarlo. Esto hace que sea más fácil identificar los problemas de compatibilidad antes y hacer cumplir estas pautas al depurar.

Dispositivos Nest Hub en la lista de dispositivos

Puede configurar la ventana para que coincida con la pantalla de Nest Hub.

También puede agregar un elemento de encabezado a su página para ayudarlo a optimizar su diseño para una visualización inteligente. En combinación con Nest Hub y Nest Hub Max como nuevos ajustes preestablecidos de dispositivo en Chrome DevTools, puede configurar su entorno de desarrollo para que represente con precisión cómo se verá y se comportará su acción en un dispositivo físico.

Pestaña de lienzo interactivo en un dispositivo remoto

También puede enviar datos a su dispositivo remoto.

Esta extensión funciona incluso si tiene un dispositivo físico. Si está en la misma red, Puede conectarse a su pantalla inteligente y abra la pestaña Interactive Canvas en ese dispositivo remoto. Desde allí puede enviar comandos a través de la misma interfaz.

Ahora puede agregar la extensión a través del Tienda virtual de Chrome. ¡También nos complace anunciar que las DevTools son de código abierto! El código fuente de esta extensión fue publicado en GitHubpara obtener instrucciones sobre cómo configurar el proyecto localmente y enviar solicitudes de extracción.

¡Gracias por leer! Para compartir sus pensamientos o preguntas, visítenos en Reddit en / r / GoogleAssistantDev.

seguir @ActionsOnGoogle en Twitter para obtener más actualizaciones de nuestro equipo y tuitear con #AoGDevs para compartir en qué estás trabajando. ¡No puedo esperar a ver lo que construyes!



Source link