Tutorial: Build an Engaging Skill

Module 3: Create a Skill in Five Minutes

Note: The instructions through the rest of this tutorial will detail Node.js. If you would prefer to complete this tutorial in Python, visit our Github page here. 


Welcome to module 3 of our introductory tutorial on building an engaging Alexa skill. In this module, we'll learn how to create a skill which we will name “Cake Time"

Time required: 5-10 minutes

What you’ll learn:

  • How to build a simple skill called Cake Time with step-by-step instructions
  • How to use the Alexa Developer Console
  • How to host your skill’s backend resources
  • How to modify the response that Alexa speaks to customers
  • How to test your skill

Introduction: How Users Will Interact With Cake Time

With this tutorial, you will build Cake Time, a simple skill that:

  • asks the user for their birthday
  • remembers it
  • tells them how many days until their next birthday
  • wishes them Happy Birthday on their birthday

At the end of module 3, your first Alexa skill will say “Hello! Welcome to Cake Time. That was a piece of cake! Bye!”

The skill is simple to use yet a bit complex to build. The burden is on us, the skill builder, to make the interaction simple and natural. One way to make it as natural as possible is to mimic human conversational patterns. Humans have memory so your skill should too. It would be frustrating if your best friend always had to ask your name (which may be a sign that they really aren't your best friend at all). While you could build cake time in a day, because of its complexity you'll build cake time over four modules in this course.

Once you've completed this course; you'll have built a skill that is useful, simple, and sticky. Useful skills provide value to users. For this skill Cake Time is fun and useful to users by celebrating their birthday with a count down. Cake Time is also a great example of a sticky skill, which retains the user's interest and inspires them to keep coming back. Cake Time encourages our user to keep checking in until their special day.  Let's get started!

About this module

If this is your first time building an Alexa skill, we recommend completing this module and the next three, which walk you through all the necessary steps.

Don't worry if you get stuck along the way or if your code breaks. At the end of each module, the complete working code solution is provided for you under the Code heading.

If you're already up to speed on the fundamentals of Alexa skill building and want to make your skill more conversational, please take a look at the conversational design course.

Features covered

  • Utterances
  • Intents
  • Slots
  • Dialog management
  • Memory and persistence
  • User profile settings

Step by Step: Build the Cake Time Skill

Step 1: Log in

To get started, log into the Alexa developer console with your Amazon Developer account. If you do not have an account, click here to create one.

Step 2: Create your skill

a. Click Create Skill on the right-hand side of the console. A new page displays.

create skill screenshot

b. In the Skill name field, enter Cake Time.

create skill screenshot

c. Leave the Default language set to English (US).

d. You are building a custom skill. Under Choose a model to add to your skill, select Custom.

create skill screenshot

Skills have a front end and backend. The front end is where you map utterances (what the user says) into an intent (the desired action). You must decide how to handle the user's intent in the backend. Host the skill yourself using an AWS Lambda function or HTTPS endpoint, or choose Alexa to host the skill for you. There are limits to the AWS Free Tier, so if your skill goes viral, you may want to move to the self-hosted option. To follow the steps in this course, choose Alexa-Hosted (Node.js). 

e. Under Choose a method to host your skill's backend resources, select Alexa-Hosted (Node.js).

create skill screenshot

f. At the top of the page, click Create skill.

create skill screenshot

It takes a few moments for AWS to provision resources for your skill. When this process completes, move to the next section.

Console link screenshot

Note: When you exit and return to the Alexa developer console, find your skill on the Skills tab, in the Alexa Skills list. Click Edit to continue working on your skill.

Skill edit screenshot

Step 3: Greet the user

The first thing a user will want to do with the skill is open it. The intent of opening the skill is built into the experience, so you don't need to define this intent in your front end.

However, you need to respond to the intent in your backend. In this step, you will update your backend code to greet the user when they open the skill.

a. Open the Cake Time skill in the Alexa developer console. Click the Code tab. The code editor opens the index.js file.

code nav link screenshot

There are two pieces to a handler:

  • canHandle() function
  • handle() function

The canHandle() function is where you define what requests the handler responds to. The handle() function returns a response to the user.

If your skill receives a request, the canHandle() function within each handler determines whether or not that handler can service the request.

In this case, the user wants to launch the skill, which is a LaunchRequest. Therefore, the canHandle() function within the LaunchRequestHandler will let the SDK know it can fulfill the request. In computer terms, the canHandle returns true to confirm it can do the work.

Tip: In the code editor, search for text by pressing CTRL+F (Command+F on a Mac). A search window opens. This is helpful for searching for pieces of code within the editor.

What should happen when a user launches the Cake Time skill? In this case, you want the skill to simply confirm that the user opened it by saying, "Hello! Welcome to Cake Time. That was a piece of cake! Bye!"

Within the LaunchRequestHandler object, find the handle() function. This function uses the responseBuilder function to compose and return the response to the user.

Within the handle() function, find the line that begins const speakOutput. This variable contains the string of words the skill should say back to the user when they launch the skill. Let's change what it says to make sense for this skill.

 

b. Within the LaunchRequestHandler object, find the handle() function, and the line that begins const speakOutput. Replace that line with the following:

const speakOutput = 'Hello! Welcome to Cake Time. That was a piece of cake! Bye!';

Be sure to include the semicolon (;) at the end of the line.

If you are not familiar with programming, a string is encapsulated in single or double quotation marks. To change a string's text, replace the text within the quotation marks.

When you replace existing text or add new text to the code, blank lines may be introduced just before or after the text. Blank lines will not impact the code, but you may remove them.

You may also notice your lines of code are not indented the same as code snippets in this course. This will also not impact the code, but you can use the TAB key to indent code if you would like.

Within the LaunchRequestHandler, on the line under the speech text you just replaced, look for handlerInput.responseBuilder. This piece of the SDK will help build the response to the user.

On the next line, look for .speak(speakOutput). Note the speakOutput variable, which you defined earlier. Calling the .speak() function tells responseBuilder to speak the value of speakOutput to the user.

Next, look for the .reprompt() function within responseBuilder. (Be sure you are looking in the LaunchRequestHandler, within the handle() function.)

If the skill was supposed to listen for the user's response, you would use this. In this case, you want the skill to speak and then exit. Therefore, let's omit this line of code for now.

 

c. Within the LaunchRequestHandler, in the handle() function, find the line that begins .reprompt(). Add a double forward slash (//) at the beginning of the line. This turns the line into a comment, meaning the line is ignored when the code runs.

 

d. Next, look for the .getResponse() function just below the line you commented out in the LaunchRequestHandler. This converts the responseBuilder's work into the response that the skill will return. Remember the line that started with return? Think of it like hitting the Send button—it sends the response.

After making all of these changes, your code in the handle() function within the LaunchRequestHandler should look like the following:

    canHandle(handlerInput) {

        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';

    },

    handle(handlerInput) {

        const speakOutput = 'Hello! Welcome to cake time. That was a piece of cake! Bye!';

        return handlerInput.responseBuilder

            .speak(speakOutput)

            //.reprompt(speakOutput)

            .getResponse();

    }

You have built the code that will handle a LaunchRequest for this skill. Before doing anything else, save your changes and deploy the code.

e. Click Save.

save button

f. Click Deploy.

deploy button

Step 4: Test your skill

Now it is time to test the skill. Start by activating the test simulator.

a. Click the Test tab. The test simulator opens.

test nav link screenshot

An alert may appear requesting to use your computer's microphone. Click Allow to enable testing the skill with your voice, just like if you were talking to an Alexa-enabled device.

alert window screenshot

b. From the drop-down menu at the top left of the page, select Development.

menu development screenshot

Testing inside the developer console

There are two ways to test your skill in the console. With the first method, type what the user would say into the box at the top left. Be precise—spelling matters! Alternately, speak to the skill by clicking and holding the microphone icon and speaking.

So far, the skill has one intent: LaunchRequest. This function responds to the user when they ask Alexa to open or launch the skill. The user will say, "Alexa, open Cake Time." Cake Time is the name of your skill and was automatically set as the invocation name for the skill. You can change the invocation name, but let's leave it as is for this exercise.

c. Test the skill. Type open Cake Time (not case sensitive) into the box at the top left and press ENTER, or click and hold the microphone icon and say, "Open Cake Time."

skill test screenshot

When testing your skill in the Alexa developer console, you don't need to provide the wake word (usually "Alexa"). Typing or saying, "Open Cake Time" is fine. When testing on an Alexa-enabled device, you need the wake word: "Alexa, open Cake Time"

Wrap-up

When you open the skill, does it say, “Hello! Welcome to Cake Time. That was a piece of cake! Bye!”? If so, congratulations! You have laid the groundwork for the skill. You will be building new skills with compelling conversational voice experiences in no time.

There is still a lot to learn! In the next section, you will expand the skill to make it more useful.

Code

If your skill isn't working or you're getting some kind of syntax error, download the code sample in Node.js or Python from the links below. Then, go to the Code tab in the Alexa developer console and copy and paste the code into the index.js file or the lambda_function.py file. Be sure to save and deploy the code before testing it.

Great job!

Continue to module 4 where you will learn to collect slots turn-by-turn with auto delegation, to make your skill more conversational.