Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Create Skills for Echo Devices With a Screen

DZone's Guide to

Create Skills for Echo Devices With a Screen

With the rise of new Echo devices with screens like the Show and Spot, let's see how you can make use of them with Alexa skills.

· IoT Zone ·
Free Resource

Echo devices with a screen, such as the Echo Show and Echo Spot, allow developers to create skills for Alexa that use both screen and voice interaction. The screen displays and interactions are created with the use of templates. In this tutorial, we will extend the voice response with a graphical rich text response, which will be displayed when the user accesses the application from an Alexa device with a screen.

Create a Conversational App

A Conversation.one application represents your conversational interface through Amazon Alexa, Google Home, or Facebook Messenger bot. To create an app:

  1. If you don’t already have a Conversation.one account, sign up. If you have an account, log in.
  2. Click on Create New App in the navigation. If it’s your first application, you will be redirected to the Create New App wizard automatically.
  3. Select your industry and enter your company name. For the purpose of this tutorial, select “Other” for the industry. Click Next to continue.
  4. Enter “Test Display” as your company name. Click Next to continue.
  5. Select the devices you want to support with your app. For this demo select Amazon Alexa. Click Next to continue.
  6. Select the pre-made question “Opening Hours”.
  7. Click “Customize”

Test Your New Bot

To test your bot, enter in the simulator, the text:

“What are your opening hours”

The bot will respond using the default answer:

“We are open every weekday, between 9:00 AM and 5:00 PM”

Enable Support for Amazon Alexa Displays

  1. Click “Settings”
  2. Select “Staging”
  3. Select “Alexa”
  4. Enable “Render Template”
  5. Click “Save”
  6. Click “Edit App”

Add a Graphical Response

We will add a code response that will check if the user has a graphical display and will return a graphical response that will be presented to users using an Echo device with a display.

  1. Click “OpeningHours”
  2. Add a new Response
  3. Select “Code”
  4. Enter the following code:
    if (!req.isDisplayEnabled()) {
        return;
    }
    res.addDirective({
        "type": "Display.RenderTemplate",
        "template": {
            "type": "BodyTemplate3",
            "title": "Opening Hours",
            "token": "SampleCard_92347",
            "textContent": {
                "primaryText": {
                    "type": "RichText",
                    "text": "We are open every weekday, between 9:00 AM and 5:00 PM"
                }
            },
            "backgroundImage": {
                "contentDescription": "Open",
                "sources": [{
                    "url": "https://s1.mob-server.com/files/6280/background.jpg"
                }]
            },
            "image": {
                "contentDescription": "Open",
                "sources": [{
                    "url": "https://s1.mob-server.com/files/6280/open.jpg"
                }]
            },
            "backButton": "VISIBLE"
        }
    });
    req.isDisplayEnabled returns true if the user’s device has a display. You can find a full reference to the different template options here.
  5. Click “Update”
  6. Click “Save”

Deploy to Amazon Alexa

Select “Deploy to Alexa” from the Amazon menu.

You will need an Amazon Alexa developer account. If you don’t have one, create a new one for free here.

If it’s the first time that you created an Alexa skill using the Conversation.one dashboard, you will have to approve the access.

Be patient, it might take a few minutes to build the new app.

Test Your New Amazon Alexa Skill

Using an Echo Device With a Screen

Ask your Echo device:

“Alexa, ask Test Display what are the opening hours”

Alexa will respond with the default answer, and will also present a graphical response.

The Amazon account on the Echo device must be your Amazon Alexa developer account

Using the Amazon Alexa Simulator

  1. Browse to the Amazon Alexa developer console https://developer.amazon.com/alexa/
  2. Open your skill
  3. Click “test”
  4. Enter “open test display”
  5. Amazon Alexa simulator will respond with the default welcome response.
  6. Enter “what are the opening hours”
  7. Amazon Alexa simulator will respond with the default answer, and will also present a graphical response.

Topics:
alexa skills development ,amazon echo ,screen ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}