My First Alexa App

Amazon Echo

A couple of weeks ago I received an email from Prachi Singh at Bloc.io talking about getting a free Amazon Echo for developing apps for the Echo. I watched a video about the Echo and I thought it looked interesting, but I still wasn’t sure if the technology is ready for prime time. I was put in touch with Mark Carpenter from Bloc and he sent me a link to a presentation he’d recently done with a former Bloc student who had taken Bloc’s Full Stack developer course. The gentleman in Mark’s presentation had published an Alexa app and gave a “physics for poets” overview of how he’d done it. Mark’s presentation on this topic piqued my curiosity.

I spent 16 years in the securities industry, so when I hear someone say, “This is going to change everything”, my antennae go up. After digging into this project, at the end of the first checkpoint I’m sold. Alexa reminds me quite a bit of the early days of the iTunes and the iPod. Apple took a couple of products that had been around for a while, revamped them, and built an ecosystem for them to thrive. That seems to be what Amazon has done with the Echo, Alexa, and its Developer portal.

My background

I took the Bloc iOS Development track last year and I’ve published a few apps in the iTunes App Store. I thought I’d like to learn another language, as most developers know several, but I was unsure which one I should learn next. In undertaking Bloc’s Alexa track, the code I’ve seen for this in JavaScript looks a lot like Swift. There are other languages that can be used with Alexa, but for those familiar with Swift, JavaScript seems to be the easiest path to go.

Laying the groundwork

I highly recommend getting Homebrew installed on your machine, if you haven’t already. Homebrew is a free open source package management system. To install it, you’ll need to open your terminal and run some scripts (see prior link). Additionally, here’s a tutorial I found helpful for installing Node and npm, which you’ll need for the next step.

The gentleman in Mark’s Echo discussion video appeared to write his code in Sublime Text 3. I downloaded that and installed it. To make it more Xcode-like, I added SublimeCodeIntel to my Sublime Text 3 installation to autocomplete JavaScript. Additionally, I installed a linter to pick up syntax errors.

Running through the checkpoint

The checkpoint was very straightforward. You’re basically taking Amazon’s Trivia Game example and customizing it. There are two places you’ll need to customize:

1. Your questions You’ll want to find a trivia topic to write questions about. I picked my alma mater, The George Washington University, as the topic of my trivia questions. I used Excel to construct a spreadsheet with a question column, a correct answer column, and 4 bogus answer columns. The correct answer should be the first one.

You’ll be replacing code in the questions variable declaration. It’s in JSON format. Each question in the JSON looks like this:

{
    "What is GWU's motto?": [
        "Deus Nobis Fiducia",
        "Ueritas ut Iustitia et Latina Via",
        "Semper Reppin",
        "Deus, Vinum, Caseum",
        "Morbi Tempus, Sortem Legendi"]
}

I don’t know about you, but I see syntax like that as a muck-up waiting to happen, especially when I was creating a bunch of questions. To make life easier, I created a separate cell to dump all the data into and put a formula in Excel that enabled me to copy properly formatted information out of Excel and into Sublime Text 3. Here’s the formula in Excel:

="{"&CHAR(34)&A2&CHAR(34)&": ["&CHAR(34)&B2&CHAR(34)&","&CHAR(34)&C2&CHAR(34)&","&CHAR(34)&D2&CHAR(34)&","&CHAR(34)&E2&CHAR(34)&","&CHAR(34)&F2&CHAR(34)&"]}"

where CHAR(34) is the character for and A2, B2, C2, D2, E2, and F2 are the cells for my question, answer, and 4 bogus answers, respectively.

2. function getWelcomeResponse(callback)

Within this section, you’ll want to update the speechOutput variable for your game’s name. There’s not much else to do on this.

The icon part could be a bit of a pain, but I’ve found GIMP and ImageMagick well suited.

You’ll need to create an icon on PNG format in two sizes. I just created the bigger size in Gimp (512 x 512) and resized a smaller one with ImageMagick.

Assuming you’ve got Homebrew installed on your machine, installing ImageMagick is a snap. Here’s the syntax to install it:

brew install imagemagick

To resize the image, you can use the ImageMagick’s mogrify to resize it.

Conclusion

That’s pretty much it for checkpoint 1. It’s not rocket science and those are the things that helped me get through this checkpoint fairly easily.