WordCamp Singapore 2017 Talk about ... - What is Serverless ? - WordPress + Serverless: What are the benefits? - Voice Control: Next interface of WordPress - WordPress + Amazon Alexa: An easy way to try VUI

1. S e r v e r l e s s Wo rd P re s s
& n e x t I n t e r f a c e o f Wo rd P re s s
Wo rd C a m p S i n g a p o re 2 0 1 7

2. A g e n d a
• What is Serverless ?
• WordPress + Serverless: What are the benefits?
• Voice Control: Next interface of WordPress
• WordPress + Amazon Alexa: An easy way to try VUI

3. H i d e t a k a
O k a m o t o
• Digitalcube Co. Ltd.
• WordCamp Kyoto 2017 Lead
• React / ASK / WordPress /
CloudFormation

4. We develop WordPress
products on AWS

6. W h a t i s “ S e r v e r l e s s ” ?

8. S e r v e r l e s s
i s a d e s i g n p a t t e r n

9. S e r v e r l e s s
i s a c o n c e p t t h a t i s
c u r re n t l y r u n n i n g i n p ro d u c t i o n .

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

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

12. S e r v e r l e s s
= N o s e r v e r s t o m a n a g e a n d s c a l e
src:https://www.slideshare.net/keisuke69/serverless-antipatterns

13. Hardware
OS
Middleware
Application
Amazon EC2

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

15. – A m a z o n We b S e r v i c e s
This lets you focus on your application code
instead of worrying about
provisioning, configuring, and managing servers.
https://aws.amazon.com/serverless/build-a-web-app/

16. Wo rd P re s s + S e r v e r l e s s
- W h a t a re t h e b e n e f i t s ?

17. We h a v e t o w o r r y a b o u t …
• 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?

18. S e r v e r l e s s
h e l p s y o u t o re s o l v e t h e s e p ro b l e m s

19. #getshifter

21. H o s t i n g a s s t a t i c H T M L
• 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)

22. Wo rd P re s s A d m i n O n - D e m a n d
• 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

23. C h e c k p o i n t
• Serverless is a web server and architecture concept
• There are no servers to manage or scale
• Serverless WordPress is scalable and more secure

24. Vo i c e C o n t ro l
- N e x t i n t e r f a c e o f Wo rd P re s s

26. A m a z o n A l e x a
i s t h e v o i c e s e r v i c e t h a t p o w e r s A m a z o n E c h o

27. A m a z o n A l e x a e n a b l e s u s t o . . .
• Interact with devices using Voice
• Build new experiences using Voice

28. 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 w e b A P I
Ta l k
s o m t h i n g
R e s p o n c e
S p e e c h t o
Te x t
Te x t t o
S p e e c h

29. 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 w e b A P I
Ta l k
s o m t h i n g
R e s p o n c e
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

30. 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 w e b A P I
Ta l k
s o m t h i n g
R e s p o n c e
S p e e c h t o
Te x t
Te x t t o
S p e e c h
AW S L a m b d a
w e b A P I
A l e x a S k i l l s K i t

31. 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 w e b A P I
Ta l k
s o m t h i n g
R e s p o n c e
S p e e c h t o
Te x t
Te x t t o
S p e e c h
We j u s t f o c u s o n t h e A P I
A l e x a S k i l l s K i t

32. e c h o s i m . i o c a n t r y A l e x a S k i l l i n b ro w s e r

33. Wo rd P re s s + A m a z o n A l e x a
- A n e a s y w a y t o t r y V U I

34. F l a s h B r i e f i n g S k i l l s
( F e e d R e a d e r A p p l i c a t i o n )

35. https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/understanding-the-flash-briefing-skill-api
“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”

36. F e e d f o r m a t ( R S S o r J S O N )
<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>

38. Yo u j u s t p ro v i d e y o u r Wo rd P re s s ' s R S S .
Yo u c a n c re a t e a v o i c e a p p l i c a t i o n .

39. A l e x a & Wo rd P re s s e x a m p l e s
• The New York Times
• Shifter man
• AMIMOTO News
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/

40. A l e x a S k i l l s K i t S D K f o r N o d e . j s E x a m p l e s
• Hello World
• RSS / ATOM Feed reader
• Quiz game
• City Guide
• etc…
https://github.com/alexa/

41. 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
' G e t N e w s I n t e n t ' : f u n c t i o n ( ) {
c o n s t s e l f = t h i s
/ / C a l l W P A P I
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 ( re s p o n s e ) {
/ / P a r s e A P I re s p o n s e
c o n s t re s p o n s e D a t a = J S O N . p a r s e ( re s p o n s e ) ;
c o n s t o u t p u t = re s p o n s e D a t a [ 0 ] . t i t l e . re n d e re d ;
/ / M a k e A l e x a re s p o n s e
s e l f . re s p o n s e . s p e a k ( o u t p u t ) ;
s e l f . e m i t ( ' : re s p o n s e R e a d y ' ) ;
} )
} ,
#getshifter

42. A l e x a + W P A P I e x a m p l e
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 /
#getshifter

43. S h i f t e r m a n i s O S S
h t t p s : / / g i t h u b . c o m / g e t s h i f t e r / a l e x a - s h i f t e r m a n
#getshifter

44. C o n c l u s i o n
• 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

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