Serverless WordPress & next Interface of WordPress

WordCamp Singapore 2017 Serverless WordPress & next Interface of WordPress

Agenda • What is Serverless ? • WordPress + Serverless: What are the benefits? • Voice Control: Next interface of WordPress • WordPress + Amazon Alexa: An easy way to try VUI

Hidetaka Okamoto • Digitalcube Co. Ltd. • WordCamp Kyoto 2017 Lead • React / ASK / WordPress / CloudFormation

We develop WordPress products on AWS

What is “Serverless” ?

Serverless is a design pattern

Serverless is a concept that is currently running in production.

src:https://www.gartner.com/newsroom/id/3784363

src:https://www.gartner.com/newsroom/id/3784363

Serverless = No servers to manage and scale src:https://www.slideshare.net/keisuke69/serverless-antipatterns

Application Middleware OS Hardware Amazon EC2

Application Application Middleware OS Middleware OS Hardware Hardware Amazon EC2 Serverless (AWS Lambda)

This lets you focus on your application code instead of worrying about provisioning, configuring, and managing servers. – Amazon Web Services https://aws.amazon.com/serverless/build-a-web-app/

• https://aws.amazon.com/serverless/build-a-web-app/

WordPress + Serverless - What are the benefits?

We have to worry about … • How do I know my website is secure? • Is my server running the latest software? • Can my website and server scale with traffic? • How quickly could I recover form a server crash?

Serverless helps you to resolve these problems

#getshifter

Hosting as static HTML • Only static files are published (HTML / CSS / JS / Images / etc..) • Cached by Global CDN • No PHP & No MySQL • Easy to scale and recover (Stateless webserver)

WordPress Admin On-Demand • Powered down by default • Site admins can power-up WordPress anytime • After editing, we can power-down WordPress • If you never edit content, the WordPress container is never running

Checkpoint • Serverless is a web server and architecture concept • There are no servers to manage or scale • Serverless WordPress is scalable and more secure

Vo i c e C o n t r o l - Next interface of WordPress

Amazon Alexa is the voice service that powers Amazon Echo

Amazon Alexa enables us to ... • Interact with devices using Voice • Build new experiences using Voice

Ta l k somthing Responce Audio Capture Audio Playback Speech to Te x t Te x t t o Speech Call web API

Ta l k somthing Responce Audio Capture Audio Playback Alexa Skills Kit Speech to Te x t Te x t t o Speech Call web API

Ta l k somthing Responce Audio Capture Audio Playback Alexa Skills Kit Speech to Te x t Te x t t o Speech AWS Lambda Call web API web API

Ta l k somthing Responce Audio Capture Audio Playback Alexa Skills Kit Speech to Te x t Te x t t o Speech w esb AoP n I W e j u s t fCoa lcl u the API

echosim.io can try Alexa Skill in browser

• http://echosim.io

WordPress + Amazon Alexa - An easy way to try VUI

Flash Briefing Skills (Feed Reader Application)

“A Flash Briefing provides a quick overview of news and other content such as comedy, interviews, and lists that a customer discovers and enables in Skills section of the Alexa app” https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/understanding-the-flash-briefing-skill-api

• https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/understanding-the-flash-briefing-skill-api

Feed format (RSSorJSON) <item> <guid>urn:uuid:1335c695-cfb8-4ebb-abbd-80da344efa6b</guid> <title>News Title</title> <description>News Description</description> <link>Source URL</link> <pubDate>published Date</pubDate> </item>

Yo u j u s t p r o v i d e y o u r Yo u c a n c r e a t e Wo r d P r e s s ' s R S S . a voice application.

Alexa & WordPress examples • The New York Times https://www.amazon.com/Daily-New-York-Times/dp/B01MY9B5BB/ • Shifter man https://www.amazon.com/dp/B0753C53WQ/ • AMIMOTO News https://www.amazon.com/Digitalcube-Inc-AMIMOTO-News/dp/B0753ZQXTL

• https://www.amazon.com/Digitalcube-Inc-AMIMOTO-News/dp/B0753ZQXTL
• https://www.amazon.com/dp/B0753C53WQ/
• https://www.amazon.com/Daily-New-York-Times/dp/B01MY9B5BB/

Alexa Skills Kit SDK for Node.js Examples • Hello World • RSS / ATOM Feed reader • Quiz game • City Guide • etc… https://github.com/alexa/

• https://github.com/alexa/

A l e x a S k i l l s k i t + W P A P I = > C u s t o m Vo i c e S k i l l
'GetNewsIntent': function () {
const self = this
// Call WP API
h t t p G e t ( ' h t t p s : / / g e t s h i f t e r. i o / w p - j s o n / w p / v 2 / p o s t s ' , f u n c t i o n ( r e s p o n s e ) {
// Parse API response
const responseData = JSON.parse(response);
const output = responseData[0].title.rendered;
// Make Alexa response
self.response.speak(output);
self.emit(':responseReady');
})
},

#getshifter

h t t p s : / / w w w. a m a z o n . c o m / D i g i t a l c u b e - I n c - S h i f t e r- m a n / Alexa + WP API example #getshifter

https://github.com/getshifter/alexa-shifterman Shifterman is OSS #getshifter

Conclusion • Create scalable WordPress sites with Serverless • Build your own voice apps with Amazon Alexa, today • Power your Alexa enabled apps with WordPress • Combine WordPress and Alexa for an entirely new media

Thanks ! https://getshifter.io/ #getshifter

• https://getshifter.io/