Showing posts with label AWS. Show all posts
Showing posts with label AWS. Show all posts

Saturday, May 25, 2019

Update on My First Alexa Skill Top 50 Podcasts Quiz

In a previous article, I wrote about my experiences developing my first Alexa skill. I will update you on the status of my skill submission. Following submission, the Amazon Alexa skills team failed my skill because it was missing a background image for the Amazon Alexa display. This was my own fault because I thought of adding the background images as an upgrade. In my mind, the Minimum Viable Product (MVP) was the skill itself. The simple answer would be to disable display support. I decided this would be poor programming habit, as I would be excluding users with Amazon Alexa displays. Thus, this article will discuss how I addressed the Amazon Alexa Skills team reason for rejecting my skill and resubmitting it for certification.

In an Amazon Alexa skill that supports displays, programmers will see a function of the form supportsDisplay(handlerInput). This function checks to see if the Amazon Alexa device (i.e., Echo) supports a display. If the result is true, the skill will display either a background image or an image related to the quiz question. I originally commented out code wherever a call to supportsDisplay existed. My first step was to removed my comment blocks and re-enable the display code.

If I left my code as is, the code would not compile. I did not define my background image and quiz item images. To get images to work with Amazon Alexa skills supporting displays, I needed to understand how to use the Amazon Web Services' Amazon Simple Storage Solution (S3) for storing files on the cloud. The Alexa skill would access images from my AWS Free Tier S3 bucket. For readers interested in learning more about storing files on the cloud via AWS, I suggest you read AWS' article titled Store and Retrieve a File. For my podcast, a bucket already existed for my podcast, so I found a background image from a free stock photo site (via a Google search) and uploaded it there. When you upload an image for your Amazon Alexa Skill via S3, the default setting for Manage public permissions is "Do not grant public access to this object(s) (Recommended)." You want to change this to "Grant public read access to this object(s)" because Alexa users will need to access it when they use your skill. See the image below.



The next step in uploading an image to AWS S3 is to set the storage class properties. The default storage class is Standard. Unless you subscribe to an AWS service other than the Free Tier, leave the default storage class as is and click next (see below). Click Next to review your upload, and click Upload.



Once you have a background image uploaded, you need to reference it in your Amazon Alexa skill javascript code. In my podcast code, I referenced my background image as

const backgroundImagePath = "https://s3.amazonaws.com/toppodcastquizshow-userfiles-mobilehub-187033348/public/podcastQuizBackground.jpeg";

In the quiz podcast, the backgroundImagePath  constant variable is referenced in a function called getBackgroundImage(label, height = 1024, width = 600). Notice this function uses a default width and height for the image. You must supply the function with a label. In the US States Quiz, this call looked like

const backgroundImage = new Alexa.ImageHelper().addImageInstance(getBackgroundImage(attributes.quizItem.Abbreviation)).getImage();

Clearly, my Podcast quiz does not have a quizItem field called Abbreviation. During the quiz section of my code, I changed this call to

const backgroundImage = new Alexa.ImageHelper().addImageInstance(getBackgroundImage(attributes.quizItem.podcast)).getImage();

This works great for showing the background image during a quiz. There exists another section of code that displays an image when the Amazon Alexa user asks Alexa to them them about a specific podcast (example: "Tell me about How I Built This.") I changed my code in that section by commenting out the definition of the variable image and replaced it with the following block of code:



I ran the tests, and my Podcasts Quiz skill displayed background images as expected. Note that I could have added individual images for each podcast for the "tell me about..." option. However, I decided against this because it was more work that I was willing to do at that time, and the podcast images are likely copyrighted. I resubmitted my Podcasts Quiz for Certification and am waiting on the results of the Amazon Alexa team review. Images of my Alexa skill in action in the Alex Developer Console are below. In the first case, the Amazon Alexa user asked for more information on "How I built This" Alexa said the network is NPR, the artist is Guy Raz, and the ranking order at the time of code development is 15.


Below is the example of the quiz. For this question, Alexa asked "What is the Network of Over My Dead Body?" The choices were Wondery, Barstool Sports, and Oprah. The correct answer was Wondery.


I hope that you enjoyed this podcast. Please come back for updates on my Alexa Skills development and other topics.

Sunday, May 19, 2019

My First Alexa Skill -- Quiz on the Top 50 Podcasts in the United States

Last year, I took on a rotational assignment in my company in a software engineering role. Although I'm currently in a new rotation as a Product Lead for one of my company's modeling and simulation software products, I've realized that I enjoy writing software. There exist many ways to write your own software and create products that you can sell to customers. I recently discovered the Alexa Skills Kit (ASK). Basically, you can write your own skill for Alexa and link In Skill Purchases to monetize your skill. I started going through Amazon's Skill tutorials, so I can learn how to make Alexa skills. To date, I've created a skill I've titled "US Podcasts Top 50 Quiz" that was based off of the ASK beginners tutorial called the Quiz Game Skill. In this post, I will talk about my impressions of developing my first skill. Click to tweet

To get started with developing Alexa skills, you need to setup two different accounts:

  1. Alexa Skills Developer
  2. Amazon Web Services (AWS)
Don't worry, both of these accounts are free to setup. Obviously, you need to setup an Alexa Skills Developer account to develop your skills. It is not so obvious that you need an AWS account. Unless you have your own business / website account through an Internet Service Provider, you will need to setup a free AWS account to host your skills and any files you need for Alexa displays. The AWS Lamda Free Tier is limited in the sense that you get 1 million requests per year. However, unless your Alexa skills go viral, you will not need to upgrade your AWS free account.

Once I got my ASK developer and AWS free accounts setup, I went through the Quiz Game Skill tutorial / example. The quiz game is simple: You open the skill, and Alexa gives you a prompt telling you that she can quiz you on the 50 States in the USA, or she can give you more information on one of the fifty states. The tutorial gives you multiple options on how you want to develop this skill:
  • Through the ASK Developers Portal
  • Via the ASK Command Line Interface (CLI)
  • Through AWS Hosted Instructions
If this is your first time developing an Alexa skill, you should choose the ASK Developers Portal option. The Developers Portal is a web-based area where you can develop your Alexa Skills. The portal is simple to use. The kicker is that you need to remember to include all of the files that the tutorial says to copy. (If you are an experienced programmer who feels comfortable developing code from scratch, I suggest that you choose the ASK CLI option. You will need to git clone the Quiz Games code and edit it through your own IDE of choice.)

Using the first option, you will need to create a new skill in your Developers Portal. I found this simple to do, as the tutorial gives step-by-step instructions. Once you create your skill named "Quiz Show," you will need to copy three files (via copy and paste) into the portal:
  1. The Interaction Model
  2. index.js: A node.js file containing all of the Javascript code for invoking Alexa and having her run your skill
  3. package.json: A JSON file that includes your skill's name, versioning information, and dependencies
When you go through the tutorial, you will name your skill "Game Show" or something like it. At a later time, you will want to rename your skill to reflect the skill you intend to publish. In my case, I renamed my skill at certification. I'll talk about certification later.

Getting the original skill running through the Developers Portal is simple: Once you copy the files over, you select the "Test" tab and enable Development per the tutorial instructions. When I first got my Game Quiz skill setup, all the simulated Alexa would do was give the help instructions (i.e., tell me about the skill and what she could do with it). After some detailed troubleshooting, I realized I skipped the step to copy the Interaction Model into my own code. I did that, built the model in the Build tab, and deployed my skill in the Code tab.

With the Fifty US States Quiz Show skill working, I decided to re-purpose it into my own quiz show skill. I decided on making a quiz show based off the Top 100 US Podcasts, but I limited it to the Top 50 because I did not see value in quizzing all 100 podcasts. I chose podcasts as a quiz topic because I enjoy listening to podcasts during my commute, and I was curious if any of the podcasts I listen to are on that list. I quickly decided I needed to learn the JavaScript Object Notation (JSON) because the answers to the quiz are included in the interaction model, and the quiz details are included in the node.js formatted index.js file. Luckily, Google Chrome has a JSON extension that makes it easy to understand JSON formatting. In short, modifying the tutorial files to create your own skill involves a few steps:
  1. Rewording the Alexa statements (i.e., how Alexa responds to your voice commands) to be specific to your skill in the index.js file.
  2. Including your quiz data in the index.js file in a JSON like format. (I say like because the data fields are not surrounded by quotation marks as in the standard JSON format).
  3. Writing the Alexa skill invocation in the Interaction Model (i.e., "open podcast top fifty quiz")
  4. Including any JSON custom field definitions in the Interaction Model.
  5. Writing sample Alexa interactions (i.e., "give me a quiz", or "tell me about XYZ") in the Interaction Model
To get your new skill to work with Alexa, it is important that the Interaction Model JSON data agrees with the data set in your index.js file. I copied the Podcast information (title, artist, network, ranking) into a CSV file and used a CSV to JSON converter to format the information for inclusion in my index.js file and Interaction Model. Because I needed to do this for each slot (i.e., data object), I found it easier to save the Interaction Model into its own JSON file that included everything, and I edited the file in Notepad++. Of course, I used the Chrome JSON extension to check my formatting to make sure I did not miss a bracket before pasting the entire Interaction Model in the Developers Portal's built in JSON editor.

Once I finished the five steps above, I tested my new Alexa skill via the Test tab. Testing a skill is fairly simple: You invoke the Alexa skill using the invocation phrase, and you either type in the user responses, or you say your response after holding down the microphone icon. The Test window shows you both the JSON inputs to your skill, and your skill's outputs. I found this advantageous to test my skill by cheating on my quiz. Clearly, I didn't care that I gamed my own quiz because my intent was to see if the skill counted my answer as incorrect if I gave the correct answer. I learned through this exercise to type out numbers (i.e., five instead of 5) because the Test tab does not automatically recognize numeric. After reading Amazon's ASK documentation, it notes that the standard way of testing using numbers is to write out the number if you type to test the skill.

Clearly, the next step after I successfully developed my skill is to publish it. Amazon has skill developers go through a new skill certification process via the Developer portal Distribution tab. This process makes sure that your skill meets Amazon's standards. You first write a description of your skill and sample invocations. This part of the certification process is important because people find your skill by searching keywords found in the description. After you enter information describing the skill, the ASK Developer Portal runs basic tests that your skill must pass. Once your skill passes these steps, it is sent to Amazon for their developers to review and either accept or send back to you with suggested changes. As of this post, my Top 50 US Podcasts Quiz skill is waiting on the Amazon review.

Once you develop skills, you can monetize them by adding In Skill Products (ISPs). ISPs can be skill add-ons, products that you sell through Amazon, or services you sell through your skill. Think of add-ons as gaming additions: You install a game skill that includes just the basics, and your customer can buy additions to this game. For example, if you develop an automobile quiz game, you could make your basic skill to include cars made by Ford. If your customer likes your Ford cars quiz, you could up-sell add-ons that include questions on cars made by Chevrolet, Honda, Toyota, and so-on. I will talk about ISPs in a different post.

In closing, Alexa skills are fairly simple to develop using the ASK Developer Portal. I will keep you posted on the status of my Top 50 US Podcasts Quiz and other skills I develop using the ASK tutorials in future post. If you like this post, and you have an Ad Blocker enabled, please whitelist my page and click through the Amazon links. I am a member of the Amazon Affiliate Program, and get credit only for purchases made through my links.