Slide 1
Slide 1 text
S h o r t i n t ro d u c i n g
d e v e l o p m e n t A l e x a S k i l l s
A l e x a m e e t u p # 0 1 , h o s t e d b y H a a r l e m . t e c h
Slide 2
Slide 2 text
H i d e t a k a
O k a m o t o
• Digitalcube Co. Ltd.
• JAWS-UG Kyoto, Kobe
• WordCamp Kyoto 2017
Slide 3
Slide 3 text
L I V I N G I N K Y O T O
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
How to develop the Alexa Skill
Slide 6
Slide 6 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
S p e e c h t o
Te x t
Te x t t o
S p e e c h
Slide 7
Slide 7 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
S p e e c h t o
Te x t
Te x t t o
S p e e c h
Slide 8
Slide 8 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
S p e e c h t o
Te x t
Te x t t o
S p e e c h
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
Slide 9
Slide 9 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
S p e e c h t o
Te x t
Te x t t o
S p e e c h
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
Slide 10
Slide 10 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
S p e e c h t o
Te x t
Te x t t o
S p e e c h
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
Slide 11
Slide 11 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
S p e e c h t o
Te x t
Te x t t o
S p e e c h
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
Slide 12
Slide 12 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
S p e e c h t o
Te x t
Te x t t o
S p e e c h
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
Slide 13
Slide 13 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
“ H e l l o A l e x a ! ”
S p e e c h t o
Te x t
Te x t t o
S p e e c h
A l e x a , o p e n X X X
Slide 14
Slide 14 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
S p e e c h t o
Te x t
Te x t t o
S p e e c h
Slide 15
Slide 15 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
S p e e c h t o
Te x t
Te x t t o
S p e e c h
A l e x a S k i l l s K i t
Slide 16
Slide 16 text
A u d i o
C a p t u re
A u d i o
P l a y b a c k
C a l l s o m e A P I
A l e x a , o p e n X X X “ H e l l o A l e x a ! ”
S p e e c h t o
Te x t
Te x t t o
S p e e c h
A l e x a S k i l l s K i t
AW S L a m b d a
We b A P I
Slide 17
Slide 17 text
AWS Lambda is great Alexa’s backend
https://aws.amazon.com/lambda/
Slide 18
Slide 18 text
Lambda get JSON from Alexa Skills
{
"request": {
"type": "IntentRequest",
"requestId": "",
"intent": {
"name": "AskPriceIntent",
"slots": {}
},
"locale": "en-US",
"timestamp": "2017-08-29T08:26:02Z"
},
"context": {
"System": {
"application": {
"applicationId": "amzn1.ask.skill.XXXXXXXX"
},
"user": {
…
Slide 19
Slide 19 text
Lambda should return valid JSON
{
"version": "string",
"response": {
"outputSpeech": {
"type": "string",
"text": "string",
"ssml": "string"
},
"card": {
"type": "string",
"image": {
"smallImageUrl": "string",
"largeImageUrl": "string"
}
…
Slide 20
Slide 20 text
Alexa has SDK (Node.js)
https://www.npmjs.com/package/alexa-sdk
Slide 21
Slide 21 text
npm init -y
npm install -S alexa-sdk
Slide 22
Slide 22 text
We can easy to write Alexa code
'use strict';
const Alexa = require('alexa-sdk');
const handlers = {
'LaunchRequest': function () {
this.emit(':tell', 'Hello');
},
};
module.exports.hello = (event, context, callback) => {
var alexa = Alexa.handler(event, context, callback);
alexa.registerHandlers(handlers);
alexa.execute();
};
Slide 23
Slide 23 text
'use strict';
const Alexa = require('alexa-sdk');
const handlers = {
'LaunchRequest': function () {
this.emit(':tell', 'Hello');
},
};
module.exports.hello = (event, context, callback) => {
var alexa = Alexa.handler(event, context, callback);
alexa.registerHandlers(handlers);
alexa.execute();
};
We can easy to write Alexa code
L o a d a l e x a - s d k
Slide 24
Slide 24 text
'use strict';
const Alexa = require('alexa-sdk');
const handlers = {
'LaunchRequest': function () {
this.emit(':tell', 'Hello');
},
};
module.exports.hello = (event, context, callback) => {
var alexa = Alexa.handler(event, context, callback);
alexa.registerHandlers(handlers);
alexa.execute();
};
We can easy to write Alexa code
L o a d a l e x a - s d k
D e f i n e re s p o n s e
Slide 25
Slide 25 text
'use strict';
const Alexa = require('alexa-sdk');
const handlers = {
'LaunchRequest': function () {
this.emit(':tell', 'Hello');
},
};
module.exports.hello = (event, context, callback) => {
var alexa = Alexa.handler(event, context, callback);
alexa.registerHandlers(handlers);
alexa.execute();
};
We can easy to write Alexa code
L o a d a l e x a - s d k
D e f i n e re s p o n s e
E x e c u t e a p p l i c a t i o n
Slide 26
Slide 26 text
tell or ask
alexa.emit(
‘:tell’,
‘Talk something, and end session’
);
alexa.emit(
‘:ask’,
‘Talk something, and wait user input’,
‘and ask again’
);
Slide 27
Slide 27 text
Can call another API (like WP API)
https://github.com/getshifter/alexa-shifterman/blob/master/index.js#L44-L67
Slide 28
Slide 28 text
Many Skills examples in GitHub
• https://github.com/alexa/
• “step-by-step” help us to know how to deploy
• All example has comment (How to customize)
• We can easy to create own Alexa Skills
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
How to test & deployment
your Skill
Slide 31
Slide 31 text
Easy to create Alexa Skills, but We want to …
• Test our code in local environment
• Deploy our code automatically
• Manage our resources in AWS.
Slide 32
Slide 32 text
Easy to create Alexa Skills, but We want to …
• Test our code in local environment
• Deploy our code automatically
• Manage our resources in AWS.
Slide 33
Slide 33 text
Alexa Conversation: Tests for your Alexa skills
https://www.npmjs.com/package/alexa-conversation
Slide 34
Slide 34 text
npm install -g mocha
npm install --save-dev alexa-conversation
Slide 35
Slide 35 text
We can easy to test own Alexa code
const conversation = require('alexa-conversation');
const app = require('../index.js');
const opts = {
name: 'Alexa Shifter man',
appId: 'your-app-id',
app: app,
handler: app.hello
};
conversation(opts)
.userSays('GetNewFactIntent')
.plainResponse
.shouldContain("Here\'s the shifter")
.end();
Slide 36
Slide 36 text
We can easy to test own Alexa code
const conversation = require('alexa-conversation');
const app = require('../index.js');
const opts = {
name: 'Alexa Shifter man',
appId: 'your-app-id',
app: app,
handler: app.hello
};
conversation(opts)
.userSays('GetNewFactIntent')
.plainResponse
.shouldContain("Here\'s the shifter")
.end();
L o a d l i b & t e s t t a rg e t
Slide 37
Slide 37 text
We can easy to test own Alexa code
const conversation = require('alexa-conversation');
const app = require('../index.js');
const opts = {
name: 'Alexa Shifter man',
appId: 'your-app-id',
app: app,
handler: app.hello
};
conversation(opts)
.userSays('GetNewFactIntent')
.plainResponse
.shouldContain("Here\'s the shifter")
.end();
I n i t t e s t
L o a d l i b & t e s t t a rg e t
Slide 38
Slide 38 text
We can easy to test own Alexa code
const conversation = require('alexa-conversation');
const app = require('../index.js');
const opts = {
name: 'Alexa Shifter man',
appId: 'your-app-id',
app: app,
handler: app.hello
};
conversation(opts)
.userSays('GetNewFactIntent')
.plainResponse
.shouldContain("Here\'s the shifter")
.end();
I n i t t e s t
D e f i n e t e s t
L o a d l i b & t e s t t a rg e t
Slide 39
Slide 39 text
Running test by mocha
$ m o c h a t e s t s
E x e c u t i n g c o n v e r s a t i o n : H e l l o A l e x a Te s t
✓ F i n i s h e d e x e c u t i n g c o n v e r s a t i o n
C o n v e r s a t i o n : H e l l o A l e x a Te s t
U s e r t r i g g e r s : H e l l o I n t e n t
✓ A l e x a ' s p l a i n t e x t re s p o n s e s h o u l d c o n t a i n : H e l l o . I ' m e x a m p l e s k i l l s
f o r y o u r s e r v e r l e s s p ro j e c t s .
✓ A l e x a ' s p l a i n t e x t re s p o n s e s h o u l d c o n t a i n : P l e a s e t e l l m e y o u r n a m e .
U s e r t r i g g e r s : N a m e I n t e n t S L O T S : { N a m e S l o t : Ts u y o s h i }
✓ A l e x a ' s p l a i n t e x t re s p o n s e s h o u l d c o n t a i n : N i c e t o m e e t y o u ,
Ts u y o s h i . E n j o y A l e x a w o r l d !
4 p a s s i n g ( 1 6 m s )
Slide 40
Slide 40 text
ESLint help you to check your code
https://eslint.org/
Slide 41
Slide 41 text
“Shifter man” is tested two way
# Check the code syntax by ESLint
$ npm run lint
# Test the conversation by alexa-conversation
$ npm test
https://github.com/getshifter/alexa-shifterman/blob/master/README.md
Slide 42
Slide 42 text
Easy to create Alexa Skills, but We want to …
• Test our code in local environment
• Deploy our code automatically
• Manage our resources in AWS.
Slide 43
Slide 43 text
Serverless Framework: create & manage app
https://serverless.com/
Slide 44
Slide 44 text
$ npm install -g serverless
$ serverless create -t aws-nodejs
$ serverless deploy
Slide 45
Slide 45 text
We can define AWS resources as YAML
service: alexa-shifter
provider:
name: aws
runtime: nodejs6.10
package:
include:
- node_modules/
functions:
hello:
handler: index.hello
events:
- alexaSkill
Slide 46
Slide 46 text
We can define AWS resources as YAML
service: alexa-shifter
provider:
name: aws
runtime: nodejs6.10
package:
include:
- node_modules/
functions:
hello:
handler: index.hello
events:
- alexaSkill
D e f i n e p ro v i d e r
Slide 47
Slide 47 text
We can define AWS resources as YAML
service: alexa-shifter
provider:
name: aws
runtime: nodejs6.10
package:
include:
- node_modules/
functions:
hello:
handler: index.hello
events:
- alexaSkill
I n c l u d e l i b r a r i e s
D e f i n e p ro v i d e r
Slide 48
Slide 48 text
We can define AWS resources as YAML
service: alexa-shifter
provider:
name: aws
runtime: nodejs6.10
package:
include:
- node_modules/
functions:
hello:
handler: index.hello
events:
- alexaSkill
I n c l u d e l i b r a r i e s
D e f i n e L a m b d a
D e f i n e p ro v i d e r
Slide 49
Slide 49 text
Easy to rollback & checking CloudWatch logs
# Rollback
$ serverless rollback --timestamp timestamp
# Tail the Lamdbda’s log
$ serverless logs -f hello -t
https://serverless.com/framework/docs/providers/aws/cli-reference/
Slide 50
Slide 50 text
Easy to create Alexa Skills, but We want to …
• Test our code in local environment
• Deploy our code automatically
• Manage our resources in AWS.
Slide 51
Slide 51 text
Serverless FW using CloudFormation
https://serverless.com/
Slide 52
Slide 52 text
We can define custom resources
custom:
stage: ${opt:stage, self:provider.stage}
defaultProfile: default
logRetentionInDays:
development: "14"
production: "90"
default: "3"
resources:
Resources:
HelloLogGroup:
Properties:
RetentionInDays: ${self:custom.logRetentionInDays.${self:custom.stage},
self:custom.logRetentionInDays.default}
Slide 53
Slide 53 text
We can define custom resources
custom:
stage: ${opt:stage, self:provider.stage}
defaultProfile: default
logRetentionInDays:
development: "14"
production: "90"
default: "3"
resources:
Resources:
HelloLogGroup:
Properties:
RetentionInDays: ${self:custom.logRetentionInDays.${self:custom.stage},
self:custom.logRetentionInDays.default}
D e f i n e p a r a m s
Slide 54
Slide 54 text
We can define custom resources
custom:
stage: ${opt:stage, self:provider.stage}
defaultProfile: default
logRetentionInDays:
development: "14"
production: "90"
default: "3"
resources:
Resources:
HelloLogGroup:
Properties:
RetentionInDays: ${self:custom.logRetentionInDays.${self:custom.stage},
self:custom.logRetentionInDays.default}
D e f i n e p a r a m s
U p d a t e C W L p ro p s
Slide 55
Slide 55 text
Easy to customize our AWS resources
https://serverless.com/framework/docs/providers/aws/guide/serverless.yml/
Slide 56
Slide 56 text
All examples are in our GitHub
https://github.com/getshifter/alexa-shifterman
Slide 57
Slide 57 text
Conclusion
• We can easy to make voice app by Alexa
• AWS help us to create & manage Alexa app
• Let’s create own Alexa Skills !
Slide 58
Slide 58 text
Thanks !
https://wp-kyoto.net/en
Twitter: @motchi0214
Facebook: HideOkamoto