The document discusses the concept of serverless architecture in the context of WordPress, highlighting its benefits such as enhanced security, scalability, and reduced management of server infrastructure. It also explores the integration of voice control through Amazon Alexa, detailing how users can create voice applications and enable new experiences with WordPress content. Key points include the ability to publish static content, manage WordPress on demand, and build custom voice skills using WordPress APIs.

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