Every year I give my brother his Christmas gifts in an untraditional way. It started off as just a way to be funny on Christmas day, but eventually escalated to the point where I make it a whole ordeal.
Last year, I made him call and text his presents to see if they were ready to be opened. The year before that, he had to do some research on AKC dog breeds and use that to figure out what order to open his gifts.
This year though. This year is different.
I'm a software developer by trade, and I work with cool new tech as my day job. So I'm exposed to a lot of different technologies. I decided to use my experience to provide an immersive, unique Christmas morning for my brother.
I made him a game. A game he can "play" on his phone to figure out how to open his gifts.
The kicker?
The only way he can control the game is by giving commands to Alexa through his Echo.
The Game
I made a basic dungeon crawler game. I started with an 8x8 grid and drew out a dungeon floor with walls, locked doors, and items hidden around the map. The objective is to find all the items and get through the dungeon.
When he finds an item, he can open the corresponding present in front of him on Christmas day.
As he plays the game, he can choose to move or explore. If he explores, he will search the room for goodies and the option to open a present. If he moves, he navigates off to the next room.
As he navigates between rooms, the map begins to fill out. He can see the layout of the dungeon more and more with every movement. With each room, Alexa will tell him part of a story. The deeper he gets into the dungeon, the more involved the story gets.
Pretty fun, right?
A view of the completed map
The Mobile App
Every year on Christmas Eve, I give my brother a laminated "Gift Receival Guide" to help get him excited for the adventure to come the next day. This year's gift receival guide includes a QR code pointing to a download link for the mobile app. He will install the app and be ready to go.
The app itself is pretty basic. In fact, it is a read only application. Since all the commands go through Alexa, there's nothing for him to do besides look at it and plan his next move.
There are two screens in the app: the inventory page and the map page. The inventory page shows him which presents he's found and their corresponding pictures. The map page shows him the rooms he has explored and where he found certain items.
The two pages in the mobile app
How It Works
Whenever I need to build something quickly, I go to OutSystems. It's an intuitive low-code platform that lets you build reactive web pages, web services, and mobile apps quickly. Best part? It's free to use for proof of concepts!
There are only a few moving parts to make this a magical experience:
- API
- Mobile app
- Alexa skill
- WebSocket
The API
The application must have a brain to perform the logic and store state. The brain behind the best Christmas gift ever is a simple API built in OutSystems. It loads your position on the map, checks if you can move the way you want to move, moves you, then tells you a little piece of the story.
The entire application really only has 2 API endpoints. One to move, and the other one to fetch the current state. Fetching the current state is only there for when he leaves the app and comes back (because I know my brother is going to need to take a break at some point).
Behind the scenes we have the data model below that builds the map, story, christmas present inventory, and room transitions.
Entity Relationship Diagram for the game
With OutSystems, I created the data model, the logic to move the character around, and the REST API to control everything. Now it was time to build the front end!
The Mobile App
Once again, OutSystems to the rescue here. They provide an easy to use UI that lets you drag and drop components on a screen, then compiles it all down to a mobile app for you.
So I set off to work and built the two pages to track what gifts have been found and to track where on the map has been explored. I used the API to load the map data and render it on the screen.
As I mentioned before, this is a pretty simple mobile application. It's a read only app. I just played around with some css, added a few Christmas themed images, and called it a day.
The Alexa Skill
I work with AWS in my day job, so I'm pretty familiar with many of their services. But I have never built an Alexa skill before. I went to the Alexa console and started watching some videos.
Turns out, the Alexa team at AWS really knows that they are doing. This is one of the best representations of a simple solution to a complex problem I have ever seen. There are really two components to an Alexa skill:
- The interaction model
- The backend code
The interaction model is simply mapping what words or phrases trigger specific actions. You enter a bunch of phrases, map them to intents, then hit the build button. The console does the rest of the magic for you.
For this basic game, I only had two things you can do: move and explore.
The two intents for the Alexa Skill
The backend code was easy to write as well. Turns out you can code your skill directly in VS Code and push it up to the cloud with the Alexa extension.
Easy enough.
For the code, you have to define what each intent will do when it is invoked. For the game, all I was doing was calling the API I built in OutSystems. So I did a quick call with axios to the corresponding API endpoint for each intent, and had Alexa parrot back the response message.
Done and done!
The WebSocket
During testing of the app, I quickly realized I forgot something. How do I update the mobile app when Alexa moves the character?
I needed something that will push data to the app whenever an event is fired. I needed a WebSocket.
A WebSocket essentially opens up a two-way communication channel between a browser (or mobile app) and the server. It allows you to get messages as they happen instead of having to constantly poll the server for updates.
There's a lot that goes behind a WebSocket. Lucky for me, there are companies out there that focus on making them easy for consumers.
I created a free account on Pusher, configured my application with a few clicks, and I was ready to integrate it into my API and mobile app.
You can think of a WebSocket almost as a pub/sub approach. When something happens in the system, you fire an event and a subscriber picks it up and performs an action.
I updated my API to publish my Pusher event whenever the character moved or explored. I included any piece of the story returned by the API in the message as well.
In the mobile app, I added a simple javascript snippet that subscribed to the event. The subscription would refresh the data on the screen and display the new piece of the story.
A quick test through my echo had the character moving on the map automatically as soon as the words came out of my mouth. How cool is that?
The Pusher dashboard showing websocket message graphs
The Reveal
I am writing this article before Christmas. My brother has not gotten the pleasure of going through the game yet.
The feedback I got last year from the calling/texting presents idea was that it was too hard and relied too much on luck. So I took that to heart and provided him with a fun game that provides hints along the way on where to go next.
Believe it or not, I did not want this to be a frustrating experience for him. I wanted it to be a unique and fun opportunity for him, and a learning opportunity for me to grow my skills as a developer.
I think this year is a good compromise. It's still pretty involved, but has a real story to follow. Plus I got to use a lot of fancy modern tech.
And it was free! Everything I used to make this present falls on the free tier, which means the only expense was my time. I did spend about 30 hours coming up with the story, drawing the map, and building everything. It was an investment for sure.
We will find out on Christmas if it was all worth it. I'll be sure to post an update with the results.
Merry Christmas!
Top comments (1)
Allen, this is amazing - well done!