Decidí usar mi experiencia en programación para darle a mi hermano una mañana de Navidad inmersiva. Hice un juego que mi hermano puede jugar en su teléfono para descubrir cómo abrir sus regalos. ¿Cuál es el truco? La única forma de controlar el juego son los comandos al asistente de voz Alexa a través de Echo.
Un juego
Entonces, creé un juego simple: atravesar un laberinto en una mazmorra. Comencé con una cuadrícula de 8 x 8, dibujé un piso de mazmorra con paredes, puertas cerradas y objetos ocultos en el mapa. El objetivo es encontrar todos los elementos y atravesar la mazmorra. Después de encontrar un artículo, puede abrir el regalo correspondiente al artículo.
En el juego, puedes elegir dos acciones: moverte o explorar. Explorar: explorar una habitación en busca de un regalo y la oportunidad de abrir un regalo, mudarse, mudarse a una habitación adyacente. A medida que se mueve, el mapa comienza a llenarse, con cada movimiento el diseño se vuelve más visible. En todas las habitaciones, Alexa cuenta una parte de la historia. Cuanto más profundo está mi hermano en la mazmorra, más confusa se vuelve la historia. Genial, ¿eh?
Mapa
Aplicación movil
Para inspirar la emoción de las aventuras del mañana, todos los años, en Nochebuena, le doy a mi hermano una Guía laminada para recibir regalos. Este año tiene un código QR que cifra el enlace de descarga de la aplicación móvil. El hermano instalará la aplicación y estará listo para la aventura. La aplicación en sí es bastante simple. En realidad, esta aplicación es solo para mirar el mapa. Todos los comandos pasan por Alexa, por lo que no puede hacer nada más que mirar su teléfono y planificar su próximo movimiento.
La aplicación tiene dos pantallas: una página de inventario y una página de mapa. Los regalos encontrados y sus imágenes se muestran en la página de inventario. La página del mapa muestra las habitaciones exploradas y las ubicaciones donde se encontraron los elementos.
Páginas de aplicaciones móviles
Cada vez que necesito desarrollar algo rápidamente, voy a OutSystems . Es una plataforma de desarrollo intuitiva con un mínimo de código que le permite crear rápidamente páginas web reactivas, servicios web y aplicaciones móviles. ¿Qué es lo mejor de ella? ¡Es de uso gratuito para una prueba de concepto! Hay varias partes móviles que dan la impresión de magia:
- API.
- Aplicación movil.
- Habilidades de Alexa.
- WebSocket.
API
Una aplicación debe tener un cerebro para ejecutar la lógica y almacenar el estado. The Best Christmas Gift Brain es una API sencilla integrada en OutSystems. Carga la posición en el mapa, comprueba el movimiento, te mueve y luego te cuenta un poco de la historia. Toda la aplicación tiene solo dos puntos finales de API, uno para navegar y otro para obtener el estado actual. Solo puede obtener el estado actual cuando sale de la aplicación y vuelve a ella (sé que el hermano a veces se toma descansos). Detrás de escena, a continuación, hay un modelo de datos que crea el mapa, la trama, el regalo en el inventario y las transiciones entre habitaciones.
Diagrama de relaciones en el juego.
Con OutSystems, creé un modelo de datos, lógica de movimiento de personajes y una API REST para administrarlo todo. ¡Es hora de crear una interfaz!
Aplicación movil
Una vez más, OutSystems nos ayudará. El servicio tiene una interfaz de usuario simple que le permite arrastrar y soltar componentes en la pantalla y luego ponerlos todos juntos en una aplicación móvil para usted. Así que me puse manos a la obra y dibujé dos páginas para realizar un seguimiento de los regalos que se encontraron y las áreas del mapa que se exploraron. Usé la API para cargar los datos del mapa y mostrarlos en la pantalla. Como mencioné, esta es una aplicación móvil bastante simple, solo puedes mirarla. Jugué con el CSS, agregué algunas imágenes navideñas y decidí que era suficiente.
Habilidad de Alexa
Uso AWS todos los días en el trabajo, por lo que estoy bastante familiarizado con muchos de los servicios de la plataforma. Pero nunca antes había desarrollado las habilidades de Alexa. Acercándome a la consola, comencé a ver el video. Resulta que el equipo de Alexa en AWS realmente sabe lo que están haciendo. Vi una de las mejores representaciones de una solución simple a un problema complejo. La habilidad tiene dos componentes:
- Modelo de interacción.
- Código de backend.
El modelo de interacción simplemente muestra qué palabras o frases desencadenan acciones específicas. Se ingresan algunas frases, se asignan a las intenciones y luego se hace clic en el botón de compilación de la aplicación. La magia restante ocurre en la consola.
Dos intentos para la habilidad de Alexa.
El código de backend fue tan fácil de escribir. Puede escribir código de habilidad en VS Code usando la extensión Alexa empujándolo a la nube. Es bastante simple. Defina en el código lo que hará cada intento cuando se llame. En el juego, solo llamé a la API desarrollada por OutSystems, por lo que para cada intento escribí una llamada rápida usando axios al punto final de la API correspondiente, pidiéndole a Alexa que repita el mensaje de respuesta. ¡Hecho!
WebSocket
Mientras probaba la aplicación, rápidamente me di cuenta de que había olvidado algo. ¿Cómo actualizo la aplicación móvil cuando Alexa mueve un personaje? Necesitaba algo que pasa datos a la aplicación cada vez que ocurre un evento. Y eso fue WebSocket . WebSocket básicamente abre un canal de comunicación bidireccional entre el navegador (o aplicación móvil) y el servidor. Esto le permite recibir mensajes inmediatamente en lugar de sondear constantemente el servidor en busca de actualizaciones.
Están sucediendo muchas cosas dentro de WebSocket. Por suerte para mí, hay empresas que se centran en facilitar las cosas a los consumidores. Creé una cuenta gratuita en Pusher, configuré la aplicación con unos pocos clics y estaba listo para integrar Pusher en mi API y aplicación móvil. Piense en WebSocket como un enfoque de editor / suscriptor. Cuando algo sucede en el sistema, se dispara el evento, el suscriptor lo recibe y realiza la acción.
Actualicé la API para publicar un evento Pusher cada vez que un personaje se mueve o explora una habitación. También incluí una parte del historial devuelto por la API en el mensaje. Agregué un fragmento de código de suscripción de evento de JavaScript simple a la aplicación móvil. La suscripción actualiza los datos en la pantalla y muestra un nuevo historial. Una prueba rápida a través de mi Echo mostró que el personaje se mueve por el mapa tan pronto como digo una palabra. Genial, ¿no?
El panel de Pusher muestra un gráfico de mensajes de WebSocket.
Exposición
Estoy escribiendo este artículo antes de Navidad. Mi hermano aún no ha tenido el placer de completar el juego. El año pasado, una revisión de los obsequios por mensajería y llamadas fue que la idea era demasiado complicada y dependía demasiado de la suerte. Me lo tomé en serio y ahora he desarrollado un juego que da pistas sobre a dónde ir a continuación.
Lo crea o no, no quería que el regalo del año pasado molestara a mi hermano. Quiero que este regalo sea una ocasión especial y alegre en su vida y una oportunidad para desarrollar mis habilidades de desarrollador y aprender, para mí. Creo que el presente de este año es un buen compromiso. También es bastante complejo, pero hay una historia a seguir. Además, tengo que trabajar con muchas tecnologías modernas y fantásticas.
¡Y es gratis! Todo lo que he hecho por este regalo es posible en el nivel gratuito, lo que significa que el único gasto fue mi tiempo. Me tomó cerca de 30 horas inventar una historia, dibujar un mapa y armar todo. Seguro que fue una inversión. En Navidad averiguaremos si valió la pena. Definitivamente reportaré los resultados. ¡Feliz Navidad!
Capacitación con descuento: ¿por qué no un regalo para usted mismo en el nuevo 2021? Y el código de promoción HABR hará que este regalo sea aún más agradable al agregar un 10% al descuento en el banner.
- Formación profesional en ciencia de datos
- Formación de analista de datos
- Curso de Python para desarrollo web
Otras profesiones y cursos