Como dar presentes se você for um programador: Alexa, WebSocket e um aplicativo móvel

Todos os anos, dou presentes de Natal ao meu irmão de uma forma incomum. Começou como uma piada de Natal, mas acabou chegando ao ponto em que transformei o presente em um verdadeiro desafio. No ano passado, fiz com que ele escrevesse e ligasse para os presentes para ver se eles estavam prontos para abrir. Um ano antes, meu irmão teve que fazer algumas pesquisas sobre as raças de cães do American Kennel Club e usar os resultados para descobrir em que ordem abrir seus presentes. Mas ... é diferente este ano.



Decidi usar minha experiência de programação para dar ao meu irmão uma manhã de Natal envolvente. Fiz um jogo que meu irmão pode jogar em seu telefone para descobrir como abrir seus presentes. Qual é o truque? A única forma de controlar o jogo são os comandos para a assistente de voz Alexa via Echo.








Um jogo



Então, criei um jogo simples - atravessar um labirinto em uma masmorra. Comecei com uma grade de 8 x 8, pintei o chão de uma masmorra com paredes, portas trancadas e itens ocultos no mapa. O objetivo é encontrar todos os itens e passar pela masmorra. Depois de encontrar um item, você pode abrir o presente correspondente ao item.



No jogo, você pode escolher duas ações: mover ou explorar. Explorar - explorar uma sala em busca de um deleite e uma oportunidade de abrir um presente, mudar - ir para uma sala adjacente. Conforme você se move, o mapa começa a se encher, com cada movimento o layout se torna mais visível. Em todas as salas, Alexa conta um pedaço da história. Quanto mais fundo meu irmão está na masmorra, mais confusa a história se torna. Ótimo, hein?





Mapa



Aplicativo móvel



Para inspirar a emoção das aventuras de amanhã, todos os anos, na véspera de Natal, dou a meu irmão um Guia laminado para receber presentes. Este ano, ele possui um código QR que criptografa o link de download do aplicativo móvel. O irmão irá instalar o aplicativo e estará pronto para a aventura. O aplicativo em si é bastante simples. Na verdade, este aplicativo é apenas para olhar o mapa. Todos os comandos passam por Alexa, então você não pode fazer nada além de olhar para o telefone e planejar seu próximo movimento.



O aplicativo possui duas telas: uma página de inventário e uma página de mapa. Os presentes encontrados e suas imagens são mostrados na página de inventário. A página do mapa mostra as salas exploradas e os locais onde os itens foram encontrados.





Páginas de aplicativos móveis



Sempre que preciso desenvolver algo rapidamente, vou para OutSystems . É uma plataforma de desenvolvimento intuitiva com um mínimo de código que permite criar rapidamente páginas da web, serviços da web e aplicativos móveis reativos. O que há de melhor nela? É gratuito para uma prova de conceito! Existem várias partes móveis que dão a impressão de magia:



  • API.

  • Aplicativo móvel.

  • Alexa Skills.

  • WebSocket.



API



Um aplicativo deve ter um cérebro para executar a lógica e armazenar o estado. The Best Christmas Gift Brain é uma API simples construída em OutSystems. Ele carrega a posição no mapa, verifica o movimento, move você e, em seguida, conta um pouco da história. O aplicativo inteiro possui apenas dois terminais de API, um para navegar e outro para obter o estado atual. Você só pode obter o estado atual quando sai do aplicativo e retorna a ele (sei que o irmão às vezes faz pausas). Nos bastidores, abaixo, há um modelo de dados que constrói um mapa, plot, presente de inventário e transições entre salas.





Diagrama de relacionamentos no jogo.



Com OutSystems, criei um modelo de dados, lógica de movimento de personagem e uma API REST para gerenciar tudo. É hora de criar um frontend!



Aplicativo móvel



Mais uma vez, OutSystems vai nos ajudar. O serviço tem uma interface de usuário simples que permite arrastar e soltar componentes na tela e, em seguida, colocá-los todos juntos em um aplicativo móvel para você. Então comecei a trabalhar e desenhei duas páginas para rastrear quais presentes foram encontrados e quais áreas do mapa foram exploradas. Usei a API para carregar os dados do mapa e exibi-los na tela. Como mencionei, este é um aplicativo móvel muito simples, você só pode olhar para ele. Brinquei com o CSS, adicionei algumas imagens de Natal e decidi que bastava.



Alexa Skill



Eu uso a AWS todos os dias no trabalho, então estou bastante familiarizado com muitos dos serviços da plataforma. Mas eu nunca desenvolvi as habilidades de Alexa antes. Aproximando-me do console, comecei a assistir ao vídeo. Acontece que a equipe Alexa na AWS realmente sabe o que está fazendo. Eu vi uma das melhores representações de uma solução simples para um problema complexo. A habilidade tem dois componentes:



  • Modelo de interação.

  • Código de back-end.



O modelo de interação simplesmente exibe quais palavras ou frases acionam ações específicas. Algumas frases são inseridas , mapeadas para intents e , em seguida, você clica no botão de construção do aplicativo. A mágica restante acontece no console.





Duas intenções para a habilidade Alexa.



O código de back-end era tão fácil de escrever. Você pode escrever código de habilidade em VS Code usando a extensão Alexa, enviando -o para a nuvem. É bastante simples. Defina no código o que cada intent fará quando chamada. No jogo, chamei apenas a API desenvolvida pela OutSystems, portanto, para cada intent, escrevi uma chamada rápida usando axios para o endpoint da API correspondente, pedindo a Alexa para repetir a mensagem de resposta. Feito!



WebSocket



Ao testar o aplicativo, percebi rapidamente que havia esquecido algo. Como faço para atualizar o aplicativo móvel quando Alexa está movendo um personagem? Eu precisava de algo que passasse dados para o aplicativo sempre que um evento ocorresse. E esse foi o WebSocket . O WebSocket essencialmente abre um canal de comunicação bidirecional entre o navegador (ou aplicativo móvel) e o servidor. Isso permite que você receba mensagens imediatamente, em vez de consultar constantemente o servidor em busca de atualizações.



Muitas coisas acontecem dentro do WebSocket. Para minha sorte, existem empresas focadas em tornar tudo mais fácil para os consumidores. Eu criei uma conta gratuita no Pusher, configurei o aplicativo com alguns cliques e estava pronto para integrar o Pusher à minha API e ao aplicativo móvel. Pense no WebSocket como uma abordagem de editor / assinante. Quando algo acontece no sistema, o evento é disparado, o assinante o recebe e executa a ação.



Eu atualizei a API para postar um evento Pusher sempre que um personagem se move ou explora uma sala. Também incluí uma parte do histórico retornado pela API na mensagem. Eu adicionei um snippet de código de assinatura de evento JavaScript simples ao aplicativo móvel. A assinatura atualiza os dados na tela e exibe um novo pedaço da história. Um teste rápido através do meu Echo mostrou que o personagem se move ao redor do mapa assim que eu digo uma palavra. Legal, certo?





O painel de controle do Pusher mostra um gráfico de mensagens do WebSocket.



Exposição



Estou escrevendo este artigo antes do Natal. Meu irmão ainda não teve o prazer de terminar o jogo. No ano passado, uma revisão dos presentes de mensagens e ligações foi que a ideia era muito complicada e dependia muito da sorte. Eu levei isso a sério e agora desenvolvi um jogo que dá dicas sobre o que fazer a seguir.



Acredite ou não, eu não queria que o presente do ano passado aborrecesse meu irmão. Quero que este presente seja uma ocasião especial e alegre na vida para ele e uma oportunidade de desenvolver minhas habilidades de desenvolvedor e aprender - para mim. Acho que o presente deste ano é um bom compromisso. Também é bastante complexo, mas há uma história a seguir. Além disso, tenho que trabalhar com muitas tecnologias modernas e fantásticas.



E é grátis! Tudo o que fiz para este presente provavelmente é de nível gratuito, o que significa que a única despesa foi meu tempo. Levei cerca de 30 horas para criar uma história, desenhar um mapa e juntar tudo. Foi um investimento com certeza. No Natal saberemos se valeu a pena. Com certeza vou relatar os resultados. Feliz Natal!




Desconto em treinamento - por que não um presente para si mesmo, no novo 2021? E o código promocional do HABR vai deixar esse brinde ainda mais agradável ao adicionar 10% ao desconto no banner.

imagem




Outras profissões e cursos


















All Articles