get started developing with alexa and drupal

Get Started Developing with Alexa and DrupaL

Twin Cities Drupal CampJune 23, 2017

Amber Matz & Blake Hall

About us

Amber MatzProduction Manager and Trainer Drupalize.Me @amberhimesmatz

Blake HallSenior Developer and Trainer

Drupalize.Me @blakehall

What We’ll CoveR...• Designing a Voice Interface

• Concepts & Process

• Creating Your first custom alexa skill

• 2 ways to integrate Data from a drupal 8 Site

• demos!

• Custom skills

• Smart Home Skills API

• Flash Briefing Skill API

• Video Skills api (new)

Types of Skills

Soon, You will be:

Ready to create your own custom alexa skill!

• With or without Drupal Integration

• Using "AWS Lambda" or A custom Endpoint

Designing for voice

Choosing projects

Choose projects where adding voice will:

• make it faster

• make it easier

• make it fun

What's Faster?

Setting timer with touch (Microwave/Phone)

Or

Saying "Alexa, Set a timer for 3 minutes" from anywhere in the room?

What's Easier?

• Play/stop a song with menus, screens, buttons?

• Hands-free, eyes-free voice request

More "Easy" Examples

"Single-Turn Dialogue" is easy:

• Asking alexa for the weather

• Asking alexa for a joke

It should be easy

• multiple-turn dialogue needs to be easy

• Requires more design work

• Explore interaction that can flow in various ways

Designing for fun• Games should be easy to play but still present a challenge

• Is there a place to incorporate humor, surprise, or delight?

• How do you want users to feel during/after interaction?

Be choosy

• Be choosy about what to expose as voice interaction

• Does it make it Faster, easier, or more fun for the user?

Design for voice

• Determine the purpose

• Identify User Stories

• write out dialogue for the "happy paths"

• Diagram the user flow

• Create Interaction model

how not to start

• Don't start with your apI

• Don't just add voice commands for each API endpoint

• Don't expect users to know your apI

What's the purpose?

• Why would people want to use your alexa skill?

• What will they get from the skill that they can't get another way?

User stories• What can a user do, or not do, with your skill?

• What Info Does a person Need to use your skill?

• What features directly support the purpose?

• Is there Info They'll need from a website or app?

Dialogue Script

• Write the Script between alexa and the user

• Focus on the "happy Path"

• Does the dialogue flow naturally?

Tips for Scripts

• Keep interactions brief

• Write for How people talk, not read or write

• Indicate when the user needs to provide info

Diagram the flow

• reference the happy path Script

• map out all the inputs needed from the user

• branch out to cover additional logic or error cases

User: “Alexa, Ask fish jokes for a silly joke”

Alexa: "Why are salmon so good at using git? They Love to merge upstream.

Flow Diagram

Alexa, ask Fish Jokes for a [silly] joke.

Return a joke tagged with term “silly” from

fishjokes4.life (Drupal site)

Interaction model

• Implement the entire flow

• what are the concrete things that can happen? => Intents

• What is said to make these things happen? => Utterances

Recap: Design for voice

• Be Choosy about the project

• Determine the purpose

• Identify user stories

• Write a Script

• Diagram the flow

• Create the interaction model

alexa.design/guide

key concepts

Activation Invocation Utterance

Intent

Alexa

ask fish jokes

for a silly joke

Alexa

ask fish jokes

for a silly joke

Activation

Activation

• Alexa, Echo, amazon, or Computer

• Fixed by Amazon

• Can’t be customized

• configurable by device

Alexa

ask fish jokes

for a silly joke

Activation Invocation

Invocation

• “open”, “launch”, “ask” + your skill name

• how your skill is opened

Alexa

ask fish jokes

for a silly joke


Utterance & Intent

Utterances

• The phrases your skill will recognize

• think about the variables you need (slots)

Intents

• map utterances to functionality

• some are built in (help, stop, cancel)

Alexa

ask fish jokes

for a silly joke


Utterance & Intent

Custom skills

AWSLambda

WebService

Alexa

Request…

Response.

SkillUserDevice

Lambda Blueprints

SkillAlexa

AWSLambda

Response• Java • Python • Node.js

Find on Alexa GitHub

AWS Lambda

Blueprints

Lambda data sources

Alexa

Response

or

AWSLambda

SkillResults from

a Web Services API Call

Hard-coded values in

an array

Hard-coded values

SkillAlexa

AWSLambda

Response


an array

Web services API call

SkillAlexa

AWSLambda

ResponseResults from


JSON

All Drupal

SkillAlexaWeb

Service

Self- Hosted

Creating a custom alexa skill

Get ready to rock

Create an Amazon

Developer Account

Sign in to developer.amazon.com/

alexa

Get started > Alexa Skills

Kit

Docs and resources

developer. amazon.com/alexa

Custom skills docs

Custom Skills docs

Add a new skill

configuration

• created in developer portal

• so that: alexa can route requests to the service for your skill

• brings all skill components together

Invocation Name

• Identifies the skill

• user includes this name when initiating a conversation with your skill

• must be unique

Skill Information

Skill Type

Skill Information

NameInvocation Name

Interaction model

• Intents

• slots

• Sample utterances

Intents

Represent:

• actions users can do with your skill

• core functionality

Sample Utterances

• words/phrases users say to invoke intents

• you map utterances to intents

• this map forms the interaction model

slots

• Optional Arguments

• Need a Type

• Need Values

• Custom or Built-in

Beta Interaction Model

• Interactive

• Walks You Through the process

• generates json for you

Beta Dashboard

Beta: Add Intent

Beta: Utterances

Sample Utterances

Guidelines:

• Do not include “Alexa”, “Amazon”, “Echo”, etc.

• DO not include the name of your skill

Sample Utterances

Guidelines:

• Do include A variety of phrases

• DO include “slot names” in curly brackets

Beta: Slots

Beta: Code editor

Intent Schema

• A JSON structure that declares the set of intents your skill can accept and process

Intent Schema

TIP:

• Include Built-In Amazon intents for common actions:“stop”, “Help”, “CANCEL”, ETC.

Intent Schema

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

}Custom intent

Amazon built-in intents

Intent Schema{ "intents": [ { "intent": "GetCategorizedJokes", "slots": [ { "name": "Category", "type": "LIST_OF_CATEGORIES" } ] }, { "intent": "GetFishJokes", }, { "intent": "AMAZON.HelpIntent" }, { "intent": "AMAZON.StopIntent" }, { "intent": "AMAZON.CancelIntent" } ] }

Custom intent

Custom intent

} Amazon built-in intents

Custom slot type

Endpoint

endpoint examples

AWSLambda

WebService

Alexa

Request…

Response.

SkillUserDevice

getting started

• copy/paste blueprint code examples

• refer to docs and resources

• Check out Alexa Github

Write the code

Using AWS LAMBDA?

• Node.jS

• Java

• Python

simple example

Hard-coded values

SkillAlexa

AWSLambda

Response


an array

Intent schema

utterances

Array of Jokes

Random Joke

web service

Web services API call

SkillAlexa

AWSLambda

ResponseResults from


Views JSON

Intent schema

utterances

API Endpoint

Parse the response

Views rest export

all drupal (no lambda)

All Drupal

SkillAlexaWeb

Service

Self- Hosted

there’s a module for that!

Alexa module config

• give drupal your alexa application id

• give alexa the resource callback

• write some code

Event Subscriber

Slot

Random Joke

Response

“Alexa Ask fish jokes for a silly joke”

But wait, There’s more!

SSML

• Whispers

• word substitution

• emphasis

• prosody

• Expletive beeps

SSML Examples

• <amazon:effect name="whispered">Hi</amazon:effect>

• <emphasis level=“strong">billy bass</emphasis>

• <say-as interpret-as=“digits">12345</say-as>

already supported by the alexa library

content editor experience?

publishing your skill

Test your skill

• Test with service simulator (in developer portal)

• Test on Alexa-Enabled device

certification

• Write description

• Create + Upload Icon

• Submission Checklist

• Check email for feedback

Continue development

After skill “Goes Live”:

• Dev version auto-created in Developer portal

• Work on dev, submit when ready

• Certified dev version replaces live version

Continue development

demo time

demo: Fish Jokes

Demo: Fish jokes with category slot

Demo: Flash briefing

ECHO DOT + ARDUINO + Big Mouth Billy Bass

12v power

Headphone Audio out

2 or 3 motors connected.

1 in use.

Tutorial

• Instructables.com

• “Animate a Billy Bass Mouth With Any Audio Source”

• by Donald Bell

http://www.instructables.com/id/Animate-a-Billy-Bass-Mouth-With-Any-Audio-Source/

Recap

• Voice Design Process

• Interaction Model

• 3 ways to create a custom skill, with + without Drupal integration

get started developing with alexa and drupal

Technology