I decided to use my programming experience to give my brother an immersive Christmas morning. I made a game that my brother can play on his phone to figure out how to open his gifts. What's the catch? The only way to control the game is commands to the voice assistant Alexa via Echo.
A game
So, I created a simple game - traversing a maze in a dungeon. I started with an 8 x 8 grid, drew a dungeon floor with walls, locked doors and objects hidden on the map. The goal is to find all the items and go through the dungeon. After finding an item, you can open the gift corresponding to the item.
In the game, you can choose two actions: move or explore. Explore - exploring a room in search of a treat and an opportunity to open a gift, move - moving to an adjacent room. As you move, the map starts to fill up, with each movement the layout becomes more visible. In all rooms, Alexa tells a piece of the story. The deeper my brother is in the dungeon, the more confusing the story becomes. Great, huh?
Map
Mobile app
To inspire the thrill of tomorrow's adventures, every year on Christmas Eve, I give my brother a laminated Guide to Receiving Gifts. This year, it has a QR code that encrypts the download link for the mobile app. The brother will install the app and be ready for adventure. The app itself is pretty simple. Actually this application is only for looking at the map. All commands go through Alexa, so you can't do anything other than look at your phone and plan your next move.
The app has two screens: an inventory page and a map page. Found gifts and their images are shown on the inventory page. The map page shows the explored rooms and the locations where items were found.
Mobile App Pages
Every time I need to develop something quickly, I go to OutSystems . It is an intuitive development platform with a minimum of code that allows you to quickly build reactive web pages, web services, and mobile apps. What's the best thing about her? It's free to use for a proof of concept! There are several moving parts that give the impression of magic:
- API.
- Mobile app.
- Alexa Skills.
- WebSocket.
API
An application must have a brain to execute logic and store state. The Best Christmas Gift Brain is a simple API built in OutSystems. It loads the position on the map, checks for movement, moves you, and then tells you a little bit of the story. The entire application has only two API endpoints, one for navigating and one for getting the current state. You can only get the current state when you exit the application and return to it (I know that the brother will sometimes take breaks). Behind the scenes, below, there is a data model that builds a map, plot, inventory gift, and transitions between rooms.
Relationship diagram in the game.
With OutSystems, I created a data model, character movement logic, and a REST API to manage it all. It's time to create a frontend!
Mobile app
Once again, OutSystems will help us. The service has a simple user interface that lets you drag and drop components onto the screen and then put it all together into a mobile app for you. So I got to work and drew two pages to keep track of which gifts were found and which areas on the map were explored. I used the API to load the map data and display it on the screen. As I mentioned, this is a pretty simple mobile application, you can only look at it. I played around with the CSS, added some Christmas images, and decided that was enough.
Alexa Skill
I use AWS every day at work, so I'm pretty familiar with many of the platform's services. But I have never developed Alexa skills before. Approaching the console, I started watching the video. It turns out the Alexa team at AWS really knows what they're doing. I saw one of the best representations of a simple solution to a complex problem. The skill has two components:
- Interaction model.
- Backend code.
The interaction model simply displays which words or phrases trigger specific actions. A few phrases are entered , mapped to intents , then you click the build button for the app. The remaining magic happens in the console.
Two intents for the Alexa skill.
The backend code was just as easy to write. You can write skill code in VS Code using the Alexa extension by pushing it to the cloud. It's simple enough. Define in code what each intent will do when called. In the game, I was only calling the API developed in OutSystems, so for each intent I wrote a quick call using axios to the corresponding API endpoint, asking Alexa to repeat the response message. Done!
WebSocket
While testing the application, I quickly realized that I had forgotten something. How do I update the mobile app when Alexa is moving a character? I needed something that passes data to the application whenever an event occurs. And that was WebSocket . WebSocket essentially opens a two-way communication channel between the browser (or mobile app) and the server. This allows you to receive messages immediately instead of constantly polling the server for updates.
There are many things going on inside WebSocket. Luckily for me, there are companies focused on making it all easier for consumers. I created a free account on Pusher, configured the app with a few clicks and was ready to integrate Pusher into my API and mobile app. Think of WebSocket as a publisher / subscriber approach. When something happens on the system, the event is fired, the subscriber receives it and performs the action.
I've updated the API to post a Pusher event whenever a character moves or explores a room. I also included a portion of the history returned by the API in the message. I added a simple JavaScript event subscription code snippet to the mobile app. The subscription updates the data on the screen and displays a new piece of history. A quick test through my Echo showed that the character moves around the map as soon as I speak a word. Cool, yeah?
The Pusher dashboard shows a graph of WebSocket messages.
Exposure
I am writing this article before Christmas. My brother hasn't had the pleasure of completing the game yet. Last year, a review of messaging and calling gifts was that the idea was too complicated and relied too much on luck. I took it to heart and now I have developed a game that gives hints where to go next.
Believe it or not, I didn't want last year's present to upset my brother. I want this gift to be a special, joyful occasion in his life and an opportunity to develop my developer skills and learn - for me. I think this year's present is a good compromise. It's also quite complex, but there is a story to follow. Besides, I have to work with many modern, fantastic technologies.
And it's free! Everything I have done for this gift is possible at the free tier, which means that the only expense was my time. It took me about 30 hours to come up with a story, draw a map, and put everything together. It was an investment for sure. At Christmas we will find out if she was worth it. I will definitely report the results. Merry Christmas!
Discount training - why not a gift to yourself, in the new 2021? And the HABR promo code will make this gift even more pleasant by adding 10% to the discount on the banner.
Other professions and courses