Created June 8, 2017

Alexa Skill - Alexa Skill with card images from S3

This skill will help teach you how to create an Alexa skill that will display an image from S3.

174

Alexa Skill - Alexa Skill with card images from S3

Things used in this project

Software apps and online services

Amazon Alexa Alexa Skills Kit

Amazon Web Services AWS Lambda

Amazon Web Services AWS S3

Story

Creating an Alexa skill that consumes images/objects from the AWS S3. This skill was designed to simply show a user an image with some text to the companion alexa app. DO NOT MISS the step for S3 Configuration to support sending images, otherwise you won't be able to access the images from the app.

Where does the S3 fit in the Alexa flow?

1. Alexa [Wake Word], ask 'lds temples' for next temple.

2. Attempts to match Invocation Name to the skill from those enabled on the device to match 'Lds Temples' from your developer.amazon.com/alexa skills

3. Once it matches the Invocation Name then the 'Intent' will be matched based on the text provided after the invocation name such as 'next temple' in this example

4. This matche my intent named: TempleFactIntent . Which sends the request to aws.amazon.com/lambda.

5. The function is then started, and then either executes the welcome or the specific intent depending if an intent is passed in.

6. The onIntent then triggers the 'GetTemple': function( )

7. In the GetTemple function we do a few things:

Randomize a index to pull from the array

Pulls an object from the array

creates an imageObj that has a small and large image url:

       var imageObj = { 
                           smallImageUrl: templeObj.src, 
                           largeImageUrl: templeObj.src 
                       };

calls the this.emit with the following information:

this.emit(':askWithCard', speech ,repromptSpeech ,templeObj.name, templeObj.name + " by: " + templeObj.copyright, imageObj); 
//:askWithCard reprompts the user to keep interacting with the skill (you can use tellWithCard to endSession
// imageObj which is the image initialized in prior step with small and large image

8. Text is then sent to the Alexa Skill to be read on Alexa Device and also create a card tile for iOS/Android Alexa app.

S3 Configuration

Setup you need to

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://ask-ifr-download.s3.amazonaws.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

For more information about setting up the skill using S3 visit this article by Amazon

CODE

Here is the highlighted code blocks that help present an image to the user on the alexa app.

{ 
 "intents": [ 
   { 
     "intent": "TempleFactIntent" 
   }, 
   { 
     "intent": "AMAZON.HelpIntent" 
   }, 
   { 
     "intent": "AMAZON.StopIntent" 
   }, 
   { 
     "intent": "AMAZON.CancelIntent" 
   } 
 ] 
}

Sample Utterances Lambda Function (alexaLDSTemples)

TempleFactIntent Next Temple 
TempleFactIntent Temple

Lambda Function Code

/* eslint-disable  func-names */ 
/* eslint quote-props: ["error", "consistent"]*/ 
'use strict'; 
const Alexa = require('alexa-sdk'); 
const APP_ID = 'amzn1.ask.skill.392c9be3-9c8c-49d9-8152-3b88e8ee8f26';  // TODO replace with your app ID (OPTIONAL). 
var HELP_MESSAGE = 'You can say next temple, or temples to show a picture of a lds temple on your alexa app?'; 
var HELP_REPROMPT = 'You can say next temple, or temples'; 
var STOP_MESSAGE = 'Have a blessed day!'; 
const handlers = { 
   'c': function () { 
       this.emit('GetTemple'); 
   }, 
   'TempleFactIntent': function () { 
       this.emit('GetTemple'); 
   }, 
   'GetTemple': function () { 
       const templeIndex = Math.floor(Math.random() * temples.length); 
       const templeObj = temples[templeIndex]; 
       var imageObj = { 
                           smallImageUrl: templeObj.src, 
                           largeImageUrl: templeObj.src 
                       }; 
       var speech = templeObj.name + "! Please check the alexa app for a picture." 
       var repromptSpeech = 'You can say next temple, or temples'; 
       this.emit(':askWithCard', speech ,repromptSpeech ,templeObj.name, templeObj.name + " by: " + templeObj.copyright, imageObj); 
   }, 
   'AMAZON.HelpIntent': function () { 
       const speechOutput = HELP_MESSAGE; 
       const reprompt = HELP_MESSAGE; 
       this.emit(':ask', speechOutput, reprompt); 
   }, 
   'AMAZON.CancelIntent': function () { 
       this.emit(':tell', STOP_MESSAGE) 
   }, 
   'AMAZON.StopIntent': function () { 
       this.emit(':tell', STOP_MESSAGE); 
   }, 
   'Unhandled': function() { 
       this.emit('GetTemple'); 
   } 
}; 
exports.handler = function (event, context) { 
   const alexa = Alexa.handler(event, context); 
   alexa.APP_ID = APP_ID; 
   alexa.registerHandlers(handlers); 
   alexa.execute(); 
}; 
var temples = [ 
   { 
       "name": "Draper Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/draper-mormon-temple21.jpg", 
       "copyright": "David C. Moore" 
   }, 
   { 
       "name": "Brigham City Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/brigham-city-mormon-temple5.jpg", 
       "copyright": "Neil D Johnson" 
   }, 
   { 
       "name": "Bountiful Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/bountiful-mormon-temple28.jpg", 
       "copyright": "Doug Havens" 
   }, 
   { 
       "name": "Manti Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/manti-mormon-temple71.jpg", 
       "copyright": "Ronald E. Larsen" 
   }, 
   { 
       "name": "Manti Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/manti-mormon-temple9.jpg", 
       "copyright": "Rick Satterfield" 
   }, 
   { 
       "name": "Mount Timpanogos Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/mount-timpanogos-mormon-temple54.jpg", 
       "copyright": "Ivan Makarov" 
   }, 
   { 
       "name": "Mount Timpanogos Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/mount-timpanogos-mormon-temple75.jpg", 
       "copyright": "Steven M. Reyes" 
   }, 
   { 
       "name": "Mount Timpanogos Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/mount-timpanogos-mormon-temple76.jpg", 
       "copyright": "Steven M. Reyes" 
   }, 
   { 
       "name": "Jordan River Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/jordan-river-mormon-temple89.jpg", 
       "copyright": "Steven M. Reyes" 
   }, 
   { 
       "name": "Logan Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/logan-mormon-temple8.jpg", 
       "copyright": "Rick Satterfield" 
   }, 
   { 
       "name": "Logan Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/logan-mormon-temple2.jpg", 
       "copyright": "Rick Satterfield" 
   }, 
   { 
       "name": "Logan Utah", 
       "src": "https://s3.amazonaws.com/lds-temples/logan-mormon-temple13.jpg", 
       "copyright": "Andy Nelson" 
   } 
];

Configure Test Event

{ 
 "session": { 
   "sessionId": "SessionId.d9cd59da-75ef-43c3-b380-658787c69b30", 
   "application": { 
     "applicationId": "amzn1.ask.skill.392c9be3-9c8c-49d9-8152-3b88e8ee8f26" 
   }, 
   "attributes": {}, 
   "user": { 
     "userId": "amzn1.ask.account.AGSIXGLYU7L376OH5Q3SCWXWOII7ILCUUSJ67BMXFK4JFD5BZHRGP5PWQZPSGX2Y372YTHZ7OF5MTEQZCPB6OC75QZ5PMKPIGDPNAMLGEVLE52OUMALNLLDROSFSII7DC4DSS3ABCLFADU7XHZFNNMTGNHYD5HFSHPDZ63BXD46QRO423TKAGKWSEKD5ZLHWFZH735JFZSGNZVQ" 
   }, 
   "new": true 
 }, 
 "request": { 
   "type": "IntentRequest", 
   "requestId": "EdwRequestId.662488f0-8024-4b16-851d-7926c17ccf9d", 
   "locale": "en-US", 
   "timestamp": "2017-06-03T02:45:01Z", 
   "intent": { 
     "name": "TempleFactIntent", 
     "slots": {} 
   } 
 }, 
 "version": "1.0" 
}

EXECUTE

Code

Lambda Function

/* eslint-disable  func-names */
/* eslint quote-props: ["error", "consistent"]*/

'use strict';

const Alexa = require('alexa-sdk');

const APP_ID = null

var HELP_MESSAGE = 'You can say next temple, or temples to show a picture of a lds temple on your alexa app?';
var HELP_REPROMPT = 'You can say next temple, or temples';
var STOP_MESSAGE = 'Have a blessed day!';


const handlers = {
    'c': function () {
        this.emit('GetTemple');
    },
    'TempleFactIntent': function () {
        this.emit('GetTemple');
    },
    'GetTemple': function () {
        const templeIndex = Math.floor(Math.random() * temples.length);
        const templeObj = temples[templeIndex];

        var imageObj = {
                            smallImageUrl: templeObj.src,
                            largeImageUrl: templeObj.src
                        };
        
        var speech = templeObj.name + "! Please check the alexa app for a picture."
        var repromptSpeech = 'You can say next temple, or temples';
        
        this.emit(':askWithCard', speech ,repromptSpeech ,templeObj.name, templeObj.name + " by: " + templeObj.copyright, imageObj);
    },
    'AMAZON.HelpIntent': function () {
        const speechOutput = HELP_MESSAGE;
        const reprompt = HELP_MESSAGE;
        this.emit(':ask', speechOutput, reprompt);
    },
    'AMAZON.CancelIntent': function () {
        this.emit(':tell', STOP_MESSAGE)
    },
    'AMAZON.StopIntent': function () {
        this.emit(':tell', STOP_MESSAGE);
    },
    'Unhandled': function() {
        this.emit('GetTemple');
    }
};

exports.handler = function (event, context) {
    const alexa = Alexa.handler(event, context);
    alexa.APP_ID = APP_ID;
    alexa.registerHandlers(handlers);
    alexa.execute();
};

var temples = [
    {
        "name": "Draper Utah",
        "src": "https://s3.amazonaws.com/lds-temples/draper-mormon-temple21.jpg",
        "copyright": "David C. Moore"
    },
    {
        "name": "Brigham City Utah",
        "src": "https://s3.amazonaws.com/lds-temples/brigham-city-mormon-temple5.jpg",
        "copyright": "Neil D Johnson"
    },
    {
        "name": "Bountiful Utah",
        "src": "https://s3.amazonaws.com/lds-temples/bountiful-mormon-temple28.jpg",
        "copyright": "Doug Havens"
    },
    {
        "name": "Manti Utah",
        "src": "https://s3.amazonaws.com/lds-temples/manti-mormon-temple71.jpg",
        "copyright": "Ronald E. Larsen"
    },
    {
        "name": "Manti Utah",
        "src": "https://s3.amazonaws.com/lds-temples/manti-mormon-temple9.jpg",
        "copyright": "Rick Satterfield"
    },
    {
        "name": "Mount Timpanogos Utah",
        "src": "https://s3.amazonaws.com/lds-temples/mount-timpanogos-mormon-temple54.jpg",
        "copyright": "Ivan Makarov"
    },
    {
        "name": "Mount Timpanogos Utah",
        "src": "https://s3.amazonaws.com/lds-temples/mount-timpanogos-mormon-temple75.jpg",
        "copyright": "Steven M. Reyes"
    },
    {
        "name": "Mount Timpanogos Utah",
        "src": "https://s3.amazonaws.com/lds-temples/mount-timpanogos-mormon-temple76.jpg",
        "copyright": "Steven M. Reyes"
    },
    {
        "name": "Jordan River Utah",
        "src": "https://s3.amazonaws.com/lds-temples/jordan-river-mormon-temple89.jpg",
        "copyright": "Steven M. Reyes"
    },
    {
        "name": "Logan Utah",
        "src": "https://s3.amazonaws.com/lds-temples/logan-mormon-temple8.jpg",
        "copyright": "Rick Satterfield"
    },
    {
        "name": "Logan Utah",
        "src": "https://s3.amazonaws.com/lds-temples/logan-mormon-temple2.jpg",
        "copyright": "Rick Satterfield"
    },
    {
        "name": "Logan Utah",
        "src": "https://s3.amazonaws.com/lds-temples/logan-mormon-temple13.jpg",
        "copyright": "Andy Nelson"
    }
];

Credits

Tyler Steck

0 projects • 2 followers

Alexa Skill - Alexa Skill with card images from S3

Things used in this project

Software apps and online services

Story

Where does the S3 fit in the Alexa flow?

S3 Configuration

CODE

Schematics

Alexa skill with S3 data

Code

Lambda Function

Credits

Tyler Steck

Comments

Embed the widget on your own site

Alexa Skill - Alexa Skill with card images from S3

Alexa Skill - Alexa Skill with card images from S3

Things used in this project

Software apps and online services

Story

Where does the S3 fit in the Alexa flow?

S3 Configuration

CODE

Schematics

Alexa skill with S3 data

Code

Lambda Function

Credits

Tyler Steck

Comments