J'ai décidé d'utiliser mon expérience de programmation pour offrir à mon frère un matin de Noël immersif. J'ai créé un jeu auquel mon frère peut jouer sur son téléphone pour savoir comment ouvrir ses cadeaux. Quel est le piège? Le seul moyen de contrôler le jeu consiste à commander l'assistant vocal Alexa via Echo.
Un jeu
Alors, j'ai créé un jeu simple - traverser un labyrinthe dans un donjon. J'ai commencé avec une grille 8 x 8, peint un sol de donjon avec des murs, des portes verrouillées et des objets cachés sur la carte. Le but est de trouver tous les objets et de passer par le donjon. Après avoir trouvé un article, vous pouvez ouvrir le cadeau correspondant à l'article.
Dans le jeu, vous pouvez choisir deux actions: se déplacer ou explorer. Explorez - explorez une pièce à la recherche d'une friandise et d'une opportunité d'ouvrir un cadeau, déménagez - déménagez dans une pièce adjacente. Au fur et à mesure que vous vous déplacez, la carte commence à se remplir, à chaque mouvement, la mise en page devient plus visible. Dans toutes les pièces, Alexa raconte un morceau de l'histoire. Plus mon frère est profond dans le donjon, plus l'histoire devient confuse. Génial, hein?
Carte
Application mobile
Pour inspirer le frisson des aventures de demain, chaque année, la veille de Noël, je donne à mon frère un guide plastifié pour recevoir des cadeaux. Cette année, il dispose d'un code QR qui crypte le lien de téléchargement de l'application mobile. Le frère installera l'application et sera prêt pour l'aventure. L'application elle-même est assez simple. En fait, cette application ne sert qu'à regarder la carte. Toutes les commandes passent par Alexa, vous ne pouvez donc rien faire d'autre que regarder votre téléphone et planifier votre prochain mouvement.
L'application dispose de deux écrans: une page d'inventaire et une page de carte. Les cadeaux trouvés et leurs images sont affichés sur la page d'inventaire. La page de la carte montre les pièces explorées et les emplacements où les objets ont été trouvés.
Pages d'applications mobiles
Chaque fois que j'ai besoin de développer quelque chose rapidement, je vais sur OutSystems . C'est une plate-forme de développement intuitive avec un minimum de code qui vous permet de créer rapidement des pages Web réactives, des services Web et des applications mobiles. Quelle est la meilleure chose à son sujet? C'est gratuit à utiliser pour une preuve de concept! Il y a plusieurs pièces mobiles qui donnent une impression de magie:
- API.
- Application mobile.
- Alexa Skills.
- WebSocket.
API
Une application doit avoir un cerveau pour exécuter la logique et stocker l'état. The Best Christmas Gift Brain est une API simple intégrée à OutSystems. Il charge la position sur la carte, vérifie le mouvement, vous déplace, puis vous raconte un peu l'histoire. L'application entière n'a que deux points de terminaison d'API, un pour la navigation et un pour obtenir l'état actuel. Vous ne pouvez obtenir l'état actuel que lorsque vous quittez l'application et y revenez (je sais que le frère prendra parfois des pauses). Dans les coulisses, ci-dessous, il y a un modèle de données qui construit une carte, un tracé, un cadeau d'inventaire et des transitions entre les pièces.
Schéma des relations dans le jeu.
Avec OutSystems, j'ai créé un modèle de données, une logique de déplacement de personnage et une API REST pour tout gérer. Il est temps de créer une interface!
Application mobile
Une fois encore, OutSystems nous aidera. Le service dispose d'une interface utilisateur simple qui vous permet de faire glisser et déposer des composants sur l'écran, puis de les rassembler dans une application mobile pour vous. Je me suis donc mis au travail et j'ai dessiné deux pages pour savoir quels cadeaux avaient été trouvés et quelles zones de la carte avaient été explorées. J'ai utilisé l'API pour charger les données cartographiques et les afficher à l'écran. Comme je l'ai mentionné, il s'agit d'une application mobile assez simple, vous ne pouvez que la regarder. J'ai joué avec le CSS, ajouté des images de Noël et décidé que c'était suffisant.
Compétence Alexa
J'utilise AWS tous les jours au travail, donc je connais assez bien de nombreux services de la plateforme. Mais je n'ai jamais développé de compétences Alexa auparavant. En approchant de la console, j'ai commencé à regarder la vidéo. Il s'avère que l'équipe Alexa d'AWS sait vraiment ce qu'elle fait. J'ai vu l'une des meilleures représentations d'une solution simple à un problème complexe. La compétence comprend deux éléments:
- Modèle d'interaction.
- Code backend.
Le modèle d'interaction affiche simplement les mots ou les phrases qui déclenchent des actions spécifiques. Quelques phrases sont entrées , mappées aux intentions , puis vous cliquez sur le bouton de construction de l'application. La magie restante se produit dans la console.
Deux intentions pour la compétence Alexa.
Le code backend était tout aussi simple à écrire. Vous pouvez écrire un code de compétence dans VS Code à l' aide de l'extension Alexa en le poussant vers le cloud. C'est assez simple. Définissez dans le code ce que fera chaque intent lorsqu'il est appelé. Dans le jeu, je n'ai appelé que l'API développée par OutSystems, donc pour chaque intention, j'ai écrit un appel rapide en utilisant axios vers le point de terminaison de l'API correspondant, demandant à Alexa de répéter le message de réponse. Terminé!
WebSocket
En testant l'application, je me suis vite rendu compte que j'avais oublié quelque chose. Comment mettre à jour l'application mobile lorsque Alexa déplace un personnage? J'avais besoin de quelque chose qui transmette des données à l'application chaque fois qu'un événement se produit. Et c'était WebSocket . WebSocket ouvre essentiellement un canal de communication bidirectionnel entre le navigateur (ou l'application mobile) et le serveur. Cela vous permet de recevoir des messages immédiatement au lieu d'interroger constamment le serveur pour les mises à jour.
Il se passe beaucoup de choses dans WebSocket. Heureusement pour moi, il existe des entreprises qui s'efforcent de faciliter les choses pour les consommateurs. J'ai créé un compte gratuit sur Pusher, a configuré l'application en quelques clics et était prêt à intégrer Pusher dans mon API et mon application mobile. Pensez à WebSocket comme une approche éditeur / abonné. Lorsque quelque chose se produit sur le système, l'événement est déclenché, l'abonné le reçoit et exécute l'action.
J'ai mis à jour l'API pour publier un événement Pusher chaque fois qu'un personnage se déplace ou explore une pièce. J'ai également inclus une partie de l'historique retourné par l'API dans le message. J'ai ajouté un simple extrait de code d'abonnement à un événement JavaScript à l'application mobile. L'abonnement met à jour les données à l'écran et affiche la nouvelle partie de l'historique. Un test rapide sur mon Echo a montré que le personnage se déplace sur la carte dès que je prononce un mot. Cool, ouais?
Le panneau de contrôle Pusher affiche un graphique des messages WebSocket.
Exposition
J'écris cet article avant Noël. Mon frère n'a pas encore eu le plaisir de terminer le match. L'année dernière, un examen de la messagerie et des cadeaux d'appel a révélé que l'idée était trop compliquée et reposait trop sur la chance. Je l'ai pris à cœur et maintenant j'ai développé un jeu qui donne des indices sur la prochaine étape.
Croyez-le ou non, je ne voulais pas que le cadeau de l'année dernière dérange mon frère. Je veux que ce cadeau soit une occasion spéciale et joyeuse dans sa vie et une opportunité de développer mes compétences en tant que développeur et d'apprendre - pour moi. Je pense que le cadeau de cette année est un bon compromis. C'est aussi assez complexe, mais il y a une histoire à suivre. De plus, je dois travailler avec de nombreuses technologies modernes et fantastiques.
Et c'est gratuit! Tout ce que j'ai fait pour ce cadeau est possible au niveau gratuit, ce qui signifie que la seule dépense était mon temps. Il m'a fallu environ 30 heures pour créer une histoire, dessiner une carte et tout assembler. C'était certainement un investissement. À Noël, nous découvrirons si elle en valait la peine. Je vais certainement rapporter les résultats. Joyeux Noël!
Formation à rabais - pourquoi pas un cadeau pour vous-même dans la nouvelle 2021? Et le code promo HABR rendra ce cadeau encore plus agréable en ajoutant 10% à la remise sur la bannière.
- Formation aux métiers de la Data Science
- Formation d'analyste de données
- Cours Python pour le développement Web
Autres professions et cours