Alexa Skills Development – Part 2

In my last post, I gave an overview of the motivation and method for creating voice apps, using Alexa Skills as the example platform.

Today, we’re going to make an app called the “Office Meme Generator”, with which you can win/lose friends and troll your colleagues!

What you will need:

  1. Amazon developer account
  2. Amazon AWS account
  3. A little Javascript knowledge is going to help

You can use your regular Amazon account you use for shopping, etc. for both of these. However, it’s worth noting that if you want to test this on your actual Alexa device, you should use the same account that is used on that device.

Before I start the steps, a quick caveat: one thing I’ve found in trying to get to grips with the Amazon Alexa system is that the interface has the tendency to change – sometimes considerably. Because of this, a lot of the examples I found online are outdated to some varying degree. However, the underlying process remains the same and I don’t envisage any major overhaul of functionality any time soon. So please bear in mind that while the screenshots and descriptions may not be 100% accurate by the time you read this, you should be able to find what you’re looking for with a bit of educated clicking.

And with that, let’s get going…

1. Create an Alexa Skill

Alexa Skill Setup

These next few steps are the same every time you set up a skill:

  1. Login with your Amazon account. Once there, open the “Your Alexa Consoles” drop-down and click on “Skills”.

Amazon alexa homepage

2. On the next screen, click on “Create Skill”.

Create Alexa skill

3. Choose a skill name. For this, I’m calling it “Office Memes”, but you can call it whatever you like. Also, you need to choose the default language for your location. Click on “Create a Skill”.

Naming the skill

4. Finally, we’re in the actual Alexa Skill-creation screen. You’ll see a few links to resources to get up and running, which you can check out if you wish. The area we’re interested in is the left-hand panel. Specifically, we’ll be using the “Interaction Model”, “Endpoint” and “Account Linking” sections.

Also notice along the top horizontal navigation bar we have, “Office Memes”  (the name of our current skill), “Build” (the current screen) and “Test” (where we can actually interact with our app in a virtual environment).

Skill creation screen

Alexa Skill Configuration

These are the custom settings for the particular skill you are creating.

5. Go to the “Invocation” screen (from the left-hand panel). This is where we will decide what phrase we can use to open our skill in Alexa. I’ve chosen “Office Memes”. This means we can activate our skill by saying something like: “Alexa, open office memes”.

Skill invocation

6. Next is “Intents”. Intents are essentially like the actions you can take within a regular app. Once you’ve opened the app with the invocation, you can then do stuff with intents.

There are also a few default intents already on this screen provided by Amazon for doing basic generic tasks, such as cancelling intents.

We’re going to create a custom intent by clicking on the big blue “+ Add Intent” button. On the following screen, make sure “Create Custom Intent” is selected (it is by default). Add the name of the intent — in our case, “GetOfficeMemeIntent” – and hit the “Create Custom Intent” button.

Alexa skill intent

7. Now we have created an intent, we need to make Alexa perform it, and to do that, we must define a voice command, or in Alexa parlance, an “utterance”.

To keep things simple, we’re only going to create two utterances, but this should be enough to give an idea of how they work and how to extend them.

We’re also going to use something which Amazon calls “Intent Slots”. These can be thought of as variables, which act as placeholders for user information. When Alexa parses the utterance, these placeholders will be filled with whatever the user puts in those spaces.

We’re going to put this into “Sample Utterances” field and then click the little plus (+) symbol on the right-hand side to add it:

What does {Name} say

You may notice that an entry has also been added to the “Intent Slots” below the utterances. This is because we included the {Name} slot and this is automatically recognised and added (you can also add slots manually for use in your utterances).

So this means that when the user says the above sentence, Alexa will know to store whatever word comes between “does” and “say” in the “{Name}” slot. This is awesome because it means we will be able to use that information in any code we write and any responses Alexa gives!

Custom intent

Oh, I said two utterances! So here’s another pattern that Alexa can use to recognise this intent. Add something like the following:

Tell me what {Name} says

So let’s save it by clicking on the nice, big, friendly “Save Model” button at the top of this screen…

Hmm. That’s not right:

Horror of horrors! We haven’t given a type to the {Name} slot!

Take your time to recover from this disaster. As it turns out, Amazon has provided a load of predefined data sets for slot types. Everything from animals to cities to types of food are available. They do also provide a default “first_name” type, but instead, we’re going to create a custom type.

8. In the left-hand panel, you should see an item called “Slot Types”. Click the “Add” button to the right of it. This will present you with a “Create Custom Slot Type” form. Input “Names” and click the “Create Custom Slot Type” button.

On the next screen, we’re going to populate our custom slot type with values. These values will then be available to any slot instance we associate with this type.

Start adding the names of the people in your office (or coven, cult, gang, knitting club, … ). You can click the plus (+) symbol or just hit enter each time. Carry on until you have your full list of names.

Alexa custom slot type

9. Find and click on the “Name” item in the left-hand panel (it will be under “Intents > GetOfficeMemeIntent > Name”.

Here we can now choose from the “Slot Type” drop down. Inside there will be a new “Names” option. Choose it and click the “Save Model” button at the top of the screen.

Hopefully, you will get a much friendlier notification at the bottom of your screen like this:

Alexa skill save success notification

“Interaction Model Saved Successfully”

10. One last thing we need to do with the {Name} slot is to make it required. After all, the utterance doesn’t really make sense without it.

Click on the “Name” item in the left-hand panel again and activate the switch for “Is this slot required to fulfil the intent?” This will make a field available for an Alexa speech prompt. I’m just going to put in “Give me a name” and hit enter to add it.

Then in the “User Utterances” field, I’m going to put the user response to this prompt, which in our case is simply “{Name}”. The field will pretty much auto-populate, as we only have one slot. Don’t forget to add this user utterance.

Click “Save Model” at the top of the screen and make sure we see the green confirmation message.

11. OK, that’s the skill done! One last thing you might be interested in seeing is the JSON that was produced by this process. Clicking on the JSON Editor button in the left-hand panel will reveal the model we just created, represented as JSON. This can be a far quicker way of creating/editing models as they get more complicated.

Create an AWS Lambda Function

Now we head over to the Amazon AWS website to create the logic to handle our intent.

12. Sign in with the same Amazon credentials you used over at the Alexa dev site and look for “Lambda” in the (somewhat over-populated) list of links you are shown. It’s currently under “Compute” in the top left block, but you can also search for it.

13. Not all zones support Alexa integration, so you may have to check for your locale. For me in the UK, I had to choose Ireland from the drop-down menu at top of the screen.

14. Once you’ve selected an appropriate zone, click on the orange “Create Function” button on the right. You will be given a screen asking for the type of function you want to create.

Choose “Author from scratch” and give it a name of officeMemes (or whatever you want).

Leave runtime as the default (Node.js 6.10)

The “Role” field defaults to choose an existing role. If you have done one before, you may choose that. Otherwise, open up the drop-down and choose “Create Custom Role”. You are taken to a popup window showing a couple more drop-down fields.

From “IAM Role” choose “Create New IAM Role” and click the “Allow” button at the bottom of the screen.

Finally, click on “Create Function”:

Create lambda function

15. With our function successfully created, we are taken to the function configuration screen, where we are presented with two blocks: “Designer” and “Function Code”.

Firstly, in the “Designer” block you’ll see a kind of relationship diagram with two elements: officeMemes (or whatever you called your function) and Amazon CloudWatch Logs with faint lines joining them.

Look for “Alexa Skills Kit” from the left-hand panel (if you don’t see it, you have chosen a location that doesn’t currently support it. Go to the very top menu, next to your name and choose a different zone).

Clicking the “Alexa Skills Kit” button automatically adds it to the relationship diagram on the right, under the officeMemes entity.

It also replaces the “Function Code” block with a block entitled “Configure Triggers”.

Lambda function designer

16. In the Configure triggers block, we need to add the Skill ID for the skill we just made. This is found in our skill, but before you go there, look near the top of the Lambda function screen. You should see an ARN number. Copy the entire number. It will look something like this:

arn:aws:lambda:eu-west-1:012345678912:function:officeMemes

This is the Amazon Resource Number for this function and it needs to be inserted into your skill.

Now head back to developer.amazon.com/alexa and open the “Endpoint” menu. Make sure that “AWS Lambda ARN” is checked and enter the copied ARN into the “Default Region” field.

Just above this field, you will find your Skill ID, which looks something like this:

amzn1.ask.skill.2lkjsd98-slkj34-23lkj3j-slkd23

Clicking the link immediately below it will copy it to your clipboard so that you can add it to your lambda function.

Go back to your Lambda function, paste in the Skill ID and click “Add”. Click “Save” at the top of the screen.

All of this going backwards and forwards is probably much easier explained by an image:

Amazon resource number

Then again, maybe not… 😛

Save all of your screens — you may need to refresh pages to show that they’ve registered their respective IDs.

Write Some Sweet JavaScript

So we’re now finally ready to write some code! (And poke fun at our colleagues at the same time. Doesn’t get any better than this…)

17. Back in the AWS Lambda function code screen, add the existing code in the index.js file with the following:

/* Alexa boilerplate */
var Alexa = require("alexa-sdk");
exports.handler = function(event, context, callback) {
    var alexa = Alexa.handler(event, context);
    alexa.registerHandlers(handlers);
    alexa.execute();
};

/* Custom data model */
const data = {
    "oliver": ["Omae wa mou shindeiru", "Don't talk to me about spider man!", "I like bees", "Just five more minutes and I'll go home"],
    "jon": ["Brr", "It's my round!", "I'll be at my desk all morning. Um. Maybe."],
    "alexander": ["It's probably fine", "Life ends at twenty five"],
    "dave": ["Can you get me a Red Bull? I'll pay you later, honest", "Sorry, I can't pay you back. I'll buy you a drink. Or something.", "You simply cannot beat a good potato"],
    "harry": ["Who turned up the air con?! I'm sweatin like a hot pig man!", "Haway man! Let's gan to the pub like!"],
    "hannah": ["I think I'm having an aneurysm", "Has anyone seen my retina"],
    "simon": ["It's all Java", "Yeast for the win!"],
    "ashish": ["Today, I will mostly be doing maintenance", "I like cricket"],
    "al": ["Hooray for football!", "It's very cold in here. Shiver."],
    "jam": ["Have you got time to do any support today?", "Squeak, squeak, I'm a bat"],
    "matt": ["There's someone I'd like you to meet. He's called Wrike"],
    "julio": ["We need to be agile!", "We need more apps!"],
    "tom": ["All you need is javascript"],
    "adam": ["I've signed up for a pillow-stuffing course on Venus", "My ribs hurt!"],
    "nick": ["Content shmontent", "Sorry, I'm too busy doing artworking"],
    "steve": ["Why do I have such tiny hands?", "I'm going to explode"],
    "chris": ["I've been working on Monolith version ten", "I like twig and bem, etcetera"]
};

/* Handlers to perform actions on the data & input */
var handlers = {
    /* Default response from Alexa when starting the app */
    "LaunchRequest": function() {
        this.emit(":ask", "Hello. What would you like to know?");
    },
    /* Our custom functionality */
    "GetOfficeMemeIntent": function() {
        const firstName = this.event.request.intent.slots.Name.value;
        const sayingArray = data[firstName.toLowerCase()];
        const memeIndex = Math.floor(Math.random() * sayingArray.length);
        const saying = sayingArray[memeIndex];
        this.emit(":tell", `${firstName} says, "${saying}"`);
    }
};

Obviously, you will need to change the names and the sayings for your own needs!

Code Explanation

The code really only consists of three sections:

  1. Alexa Skill boilerplate to include the sdk and register handlers, events and callbacks
  2. Our custom data model
  3. Handlers to perform actions on the data and the input

Our GetOfficeMemeIntent handler does the following:

  • Get the first name, captured by Alexa in the {Name} slot we defined
  • Get the property of the data object corresponding to the name and return the array it corresponds to. Since the name text is being used as the property names, we also convert to lowercase, to ensure similarity
  • Make a random integer based on the length of the returned array of strings
  • Get the element of the array corresponding to the random integer
  • Send this string back to Alexa to speak back to the user

Once you’ve added the code you can return to your Alexa Skill page to test.

Test It Out

After building your skill, click on “Test” from the top horizontal navigation.

This will take you to a screen where you can type in or speak your commands to Alexa. Whichever method you choose, it is exactly the same – just say or type the invocation and utterances you defined in the skill.

Try it. Your “conversation” with Alexa will go something like this:

Me: Alexa, open office memes
Alexa: Hello. What would you like to know?
Me: What does [type name here] say?
Alexa: [name] says [your amazing memetic saying here]

Testing Alexa

Try another one, this time combining the invocation and utterance into one sentence:

Me: Alexa ask office memes what [insert name here] says
Alexa: [name]  says, “It’s probably fine”

Combining invocation and utterance

Conclusion

That about wraps up this quick tutorial on developing Amazon Alexa Skills. In this very small application, we have seen how easy it can be to leverage Amazon’s advanced voice recognition technology and structure responses that are meaningful to users.

Next steps? How about adding more intents? Or extra dimensions to the data and more slots to the intents so that users can get responses based on multiple criteria?

Let me know in the comments how you get on with these ideas – and how you build upon them!

If you need help with web development, get in touch with us today.

Let’s block ads! (Why?)

Powered by WPeMatico