Adding a Card to an Alexa Skill

In this lab, we will create a card for the launch request only. The objectives for this lab include creating a card for an Alexa device with a screen and testing the card using the AWS Alexa Developer Console. **Note:** You must have your own Amazon Developer account, which you can [sign up](https://developer.amazon.com/) for if you do not already have one.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Configure Amazon Skills Kit to Use Your AWS Developer Account

Initialize the ASK CLI:
```
ask init --no-browser
```
Copy/paste the URL that appears from the terminal to a browser window.
Log in to the developer console when prompted.
Copy/paste the authorization code.
Enter y for Yes to connect to the AWS account already set up on the VM.
Choose the default AWS account.

Clone and Check Out Branch

Clone the template skill:

ask new --url https://github.com/linuxacademy/content-aws-skill-builder.git

Navigate into the directory:
```
cd content-aws-skill-builder
```
To start with a template and perform the tasks for this lab yourself:
```
git checkout lab_cards
```
To start with the solution to the lab:
```
git checkout lab_cards_solution
```

Develop the Skill

In ../lambda/custom/index.js, add withSimpleCard to LaunchRequestHandler:

  const LaunchRequestHandler = {
      canHandle(handlerInput) {
          return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
      },
      handle(handlerInput) {
          const speakOutput = "Exclusive Veterinary Services welcomes you. You can say I want to register my pet.";

          return handlerInput.responseBuilder
              .speak(speakOutput)
              .reprompt(speakOutput)
              .withSimpleCard('Exclusive Vet Services', 'We are here for your fur-baby.')
              .getResponse();
      }
  };

Deploy and Test

Deploy the skill:
```
ask deploy 
```
Go to your Amazon Alexa Developer Console.
Click on the exclusive-vet-services skill to open it.
Near the top, click on the Test tab.
Use the microphone option to say "open exclusive vet".
Check the screen simulation at the bottom of screen for accuracy.

Please note that sometimes the last bit of the screen is cut off in the display. If you retest it, it should show up fine. Seems to be a bug in the developer console, but Amazon says cards should be tested with the phone app.

Clean Up Amazon Developer Account Alexa Console

At this point, the skill you just created should be deleted from your Alexa Developer Console.

Please do so at this link: Alexa Developer Console.

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Adding a Card to an Alexa Skill

About this Hands-on Lab

Learning Objectives

Additional Resources

What are Hands-on Labs

Newsletter