Amazon Alexa + WP REST API = GUI-Less WordPress Application

My talk in #WordCampSG

Transcript

1. A m a z o n A l e x a + W P R E S T A P I = G U I - L e s s Wo rd P re s s A p p l i c a t i o n Wo rd c a m p S i n g a p o re 2 0 1 6
2. T O D AY TA L K S … • Change GUI -> GUI-LESS • How to use WordPress as GUI-LESS • Think about "GUI-Less WordPress"
3. H i d e t a k a O k a m o t o • Digitalcube developer • WordBench Kyoto Organizer • WordCamp Kansai 2016 stuff
4. a n d
5. To d a y M y A s s i s t a n t
6. p h o t o c re d i t : h t t p : / / w w w. f l i c k r. c o m / p h o t o s / 5 1 5 9 0 9 6 1 @ N 0 4 / 1 6 6 3 9 2 5 1 0 0 5 h t t p s : / / c re a t i v e c o m m o n s . o rg / l i c e n s e s / b y - n c - n d / 2 . 0 /
7. A M A Z O N A L E X A p h o t o c re d i t : h t t p : / / w w w. f l i c k r. c o m / p h o t o s / 5 1 5 9 0 9 6 1 @ N 0 4 / 1 6 6 3 9 2 5 1 0 0 5 h t t p s : / / c re a t i v e c o m m o n s . o rg / l i c e n s e s / b y - n c - n d / 2 . 0 /
8. A M A Z O N A L E X A I S V O I C E S E R V I C E p h o t o c re d i t : h t t p : / / w w w. f l i c k r. c o m / p h o t o s / 5 1 5 9 0 9 6 1 @ N 0 4 / 1 6 6 3 9 2 5 1 0 0 5 h t t p s : / / c re a t i v e c o m m o n s . o rg / l i c e n s e s / b y - n c - n d / 2 . 0 /
9. p h o t o c re d i t : h t t p : / / w w w. f l i c k r. c o m / p h o t o s / 5 1 5 9 0 9 6 1 @ N 0 4 / 1 6 6 3 9 2 5 1 0 0 5 h t t p s : / / c re a t i v e c o m m o n s . o rg / l i c e n s e s / b y - n c - n d / 2 . 0 / A L E X A , H E L L O !
10. C h a n g e G U I = > G U I - L E S S
11. http://www.nointerface.com/book/
12. G U I N E E D T O D O M A N Y TA S K S
13. G U I v s G U I - L E S S ( S i r i ) “ H o w t o c o n t a c t y o u r f r i e n d ? ” 1. Open Your Phone 2. Disable sleep mode 3. Open Message App 4. Search Friend Name 5. Select talk room 6. Input Message 7. Check Message 8. Send 1. Open Your Phone 2. Long Tap Home Button 3. Say “Call John”
14. I n t e r f a c e e x c e p t G U I • Touch Interface • Voice Interface • Perceptual User Interface • Command Line Interface
15. I n t e r f a c e e x c e p t G U I • Touch Interface ( SmartPhone / Tablet) • Voice Interface ( Siri / Alexa / Cloud Speech API ) • Perceptual User Interface( Kinect ) • Command Line Interface( Terminal )
16. H o w t o u s e Wo rd P re s s a s G U I - L E S S
17. F o r E x a m p l e
18. https://amimoto-ami.com/amimoto-ninja/
19. p h o t o c re d i t : h t t p : / / w w w. f l i c k r. c o m / p h o t o s / 5 1 5 9 0 9 6 1 @ N 0 4 / 1 6 6 3 9 2 5 1 0 0 5 h t t p s : / / c re a t i v e c o m m o n s . o rg / l i c e n s e s / b y - n c - n d / 2 . 0 / W h a t i s Wo rd P re s s ?
20. p h o t o c re d i t : h t t p : / / w w w. f l i c k r. c o m / p h o t o s / 5 1 5 9 0 9 6 1 @ N 0 4 / 1 6 6 3 9 2 5 1 0 0 5 h t t p s : / / c re a t i v e c o m m o n s . o rg / l i c e n s e s / b y - n c - n d / 2 . 0 / Wo rd P re s s i s …
21. h t t p s : / / w w w. f a c e b o o k . c o m / p h o t o . p h p ? f b i d = 1 3 3 9 2 2 0 1 5 9 4 4 0 4 4 5 & s e t = p b . 1 0 0 0 0 0 5 7 4 2 1 9 0 7 9 . - 2 2 0 7 5 2 0 0 0 0 . 1 4 7 2 6 4 8 6 7 9 . & t y p e = 3 & t h e a t e r
22. A l e x a c a l l s W P R E S T A P I
23. A u d i o C a p t u re A u d i o P l a y b a c k Yo u r C o d e W P R E S T A P I ( P O S T C o m m e n t ) M y i m p re s s i o n i s … . T h a n k y o u !
24. S h o w v i s i t e r ’s c o m m e n t ( U s i n g R e a c t . j s )
25. H o w t o c re a t e ?
26. A l e x a n e e d s • AWS Account • amazon.com Account • Alexa device ( Echo / Tap etc… ) p h o t o c re d i t : h t t p : / / w w w. f l i c k r. c o m / p h o t o s / 5 1 5 9 0 9 6 1 @ N 0 4 / 1 6 6 3 9 2 5 1 0 0 5 h t t p s : / / c re a t i v e c o m m o n s . o rg / l i c e n s e s / b y - n c - n d / 2 . 0 /
27. C re a t e A l e x a B a c k e n d
28. A l e x a r u n s y o u r o w n c o d e u s i n g b y A W S L a m b d a A u d i o C a p t u re A u d i o P l a y b a c k Yo u r C o d e ( AW S L a m b d a ) W h a t i s Wo rd p re s s ? Wo rd P re s s i s …
29. A W S L a m b d a i s w e b s e r v i c e J u s t r u n y o u r o w n c o d e
30. Wr i t e s o m e c o d e t o c o n n e c t W P A P I
31. C a l l W P A P I b y P y t h o n import urllib import urllib2 import json def get_post( query ): api_url = ‘http://example.com/wp-json/wp/v2/posts?' + query req = urllib2.Request(api_url) result = urllib2.urlopen(req) return json.loads(result.read())
32. S e t u p A l e x a S k i l l
33. A c c e s s D e v c o n s o l e
34. C h o o s e “ A l e x a S k i l l s K i t ”
35. C re a t e I n t e r a c t i o n M o d e l
36. C o n n e c t y o u r A W S L a m b d a
37. E n a b l e “ t e s t t h i s s k i l l ”
38. Yo u c a n u s e y o u r o w n A l e x a d e v i c e
39. p h o t o c re d i t : h t t p : / / w w w. f l i c k r. c o m / p h o t o s / 5 1 5 9 0 9 6 1 @ N 0 4 / 1 6 6 3 9 2 5 1 0 0 5 h t t p s : / / c re a t i v e c o m m o n s . o rg / l i c e n s e s / b y - n c - n d / 2 . 0 / A l e x a , t a l k Wo rd C a m p S i n g a p o re ?
41. T h i n k “ G U I - L e s s ” Wo rd P re s s
42. W P R E S T A P I C h a n g e s Wo rd P re s s D e v e l o p m e n t
43. We c a n S u p p o r t M a n y t y p e o f I n t e r f a c e b y W P R E S T A P I
44. C a l l W P R E S T A P I a n d R u n s o m e c o d e W P R E S T A P I U s e r d o s o m e t h i n g Wo rd P re s s i s … G e t u s e r s a c t i o n f ro m s o m e A P I C re a t e re s p o n s e u s i n g s o m e A P I
45. W E C A N U S E M A N Y C L I E N T • backbone.js • node.js • AngularJS • Ruby • Go
46. E n j o y W P R E S T A P I a n d E n j o y G U I - L E S S Wo rd P re s s