Slack app with Botkit

カルテット開発部社内勉強会 LT 資料

Transcript

1. Slack app with Botkit #quartetcom 2016.03.25 @qckanemoto 1 / 39
2. Botkit is a Slack app framework. 2 / 39
3. Let's make an example 3 / 39
4. Step 1 Create "Bot" on slack.com 4 / 39
5. https://slack.com/apps 5 / 39
6. 6 / 39
7. 7 / 39
8. 8 / 39
9. And copy "API Token" for later 9 / 39
10. Step 2 Develop bot on local 10 / 39
11. Install botkit $ n p m i n i t $ n p m i - S b o t k i t 11 / 39
12. Code index.js You can see and learn this code from howdyai/botkit/README.md v a r B o t k i t = r e q u i r e ( ' b o t k i t ' ) ; v a r c o n t r o l l e r = B o t k i t . s l a c k b o t ( { d e b u g : f a l s e } ) ; c o n t r o l l e r . s p a w n ( { t o k e n : p r o c e s s . e n v . S L A C K _ T O K E N } ) . s t a r t R T M ( ) ; c o n t r o l l e r . h e a r s ( ' h e l l o ' , [ ' d i r e c t _ m e n t i o n ' ] , f u n c t i o n ( b o t , m e s s a g e ) { b o t . r e p l y ( m e s s a g e , ' H e l l o y o u r s e l f . ' ) ; } ) ; 12 / 39
13. Invite @botkit into channel 13 / 39
14. Now you can use it! $ S L A C K _ T O K E N = x o x b - . . . n o d e i n d e x . j s 14 / 39
15. Step 3 Create "Slash Command" 15 / 39
16. Create on slack.com 16 / 39
17. Create on slack.com 17 / 39
18. Create on slack.com Set http://localhost to URL just temporarily and finish configuration. 18 / 39
19. Code index.js v a r B o t k i t = r e q u i r e ( ' b o t k i t ' ) ; v a r c o n t r o l l e r = B o t k i t . s l a c k b o t ( { d e b u g : f a l s e , j s o n _ f i l e _ s t o r e : ' . / s i m p l e _ s t o r a g e / ' } ) ; c o n t r o l l e r . s e t u p W e b s e r v e r ( p r o c e s s . e n v . P O R T , f u n c t i o n ( e r r , w e b s e r v e r ) { c o n t r o l l e r . c r e a t e W e b h o o k E n d p o i n t s ( w e b s e r v e r ) ; } ) ; c o n t r o l l e r . o n ( ' s l a s h _ c o m m a n d ' , f u n c t i o n ( b o t , m e s s a g e ) { i f ( m e s s a g e . c o m m a n d = = ' / h e l l o ' ) { b o t . r e p l y P u b l i c ( m e s s a g e , ' H e l l o y o u r s e l f . ' ) ; } } ) ; 19 / 39
20. Now you can run it! is the webhook endpoint! $ P O R T = 9 0 0 0 n o d e i n d e x . j s i n f o : * * U s i n g s i m p l e s t o r a g e . S a v i n g d a t a t o . / s i m p l e _ s t o r a g e / i n f o : * * S e t t i n g u p c u s t o m h a n d l e r s f o r p r o c e s s i n g S l a c k m e s s a g e s i n f o : * * S t a r t i n g w e b s e r v e r o n p o r t 9 0 0 0 i n f o : * * S e r v i n g w e b h o o k e n d p o i n t s f o r S l a s h c o m m a n d s a n d o u t g o i n g w e b h o o k s a t : h t t p : / / M Y _ H O S T : 9 0 0 0 / s l a c k / r e c e i v e h t t p : / / M Y _ H O S T : 9 0 0 0 / s l a c k / r e c e i v e 20 / 39
21. But it's inside of LAN... It's too much work to expose it to www Of course, we can't do like this 21 / 39
22. Then, localtunnel 22 / 39
23. Install localtunnel $ n p m i - D l o c a l t u n n e l 23 / 39
24. Run app and localtunnel Open two consoles and run them. $ P O R T = 9 0 0 0 n o d e i n d e x . j s $ n o d e _ m o d u l e s / . b i n / l t - - p o r t = 9 0 0 0 y o u r u r l i s : h t t p s : / / b e b n d g f e o t . l o c a l t u n n e l . m e 24 / 39
25. Run app and localtunnel Open two consoles and run them. Now is exposed as ! $ P O R T = 9 0 0 0 n o d e i n d e x . j s $ n o d e _ m o d u l e s / . b i n / l t - - p o r t = 9 0 0 0 y o u r u r l i s : h t t p s : / / b e b n d g f e o t . l o c a l t u n n e l . m e M Y _ H O S T : 9 0 0 0 b e b n d g f e o t . l o c a l t u n n e l . m e 25 / 39
26. Then, set this URL to Slack 26 / 39
27. And call it! $ P O R T = 9 0 0 0 n o d e i n d e x . j s i n f o : * * U s i n g s i m p l e s t o r a g e . S a v i n g d a t a t o . / s i m p l e _ s t o r a g e / i n f o : * * S e t t i n g u p c u s t o m h a n d l e r s f o r p r o c e s s i n g S l a c k m e s s a g e s i n f o : * * S t a r t i n g w e b s e r v e r o n p o r t 9 0 0 0 i n f o : * * S e r v i n g w e b h o o k e n d p o i n t s f o r S l a s h c o m m a n d s a n d o u t g o i n g w e b h o o k s a t : h t t p : / / M Y _ H O S T : 9 0 0 0 / s l a c k / r e c e i v e 27 / 39
28. And call it! $ P O R T = 9 0 0 0 n o d e i n d e x . j s i n f o : * * U s i n g s i m p l e s t o r a g e . S a v i n g d a t a t o . / s i m p l e _ s t o r a g e / i n f o : * * S e t t i n g u p c u s t o m h a n d l e r s f o r p r o c e s s i n g S l a c k m e s s a g e s i n f o : * * S t a r t i n g w e b s e r v e r o n p o r t 9 0 0 0 i n f o : * * S e r v i n g w e b h o o k e n d p o i n t s f o r S l a s h c o m m a n d s a n d o u t g o i n g w e b h o o k s a t : h t t p : / / M Y _ H O S T : 9 0 0 0 / s l a c k / r e c e i v e e r r o r : R e c e i v e d s l a s h c o m m a n d , b u t c o u l d n o t l o a d t e a m 28 / 39
29. 29 / 39
30. I googled... 30 / 39
31. I googled... And found this issue. https://github.com/howdyai/botkit/issues/108 31 / 39
32. To be short It's a bug of Botkit App needs team information but non OAuth app doesn't have that We have to do a workaround 32 / 39
33. Workaround / / . . . v a r c o n t r o l l e r = B o t k i t . s l a c k b o t ( { d e b u g : f a l s e , j s o n _ f i l e _ s t o r e : ' . / s i m p l e _ s t o r a g e / ' } ) ; + / / w o r k a r o u n d f o r h t t p s : / / g i t h u b . c o m / h o w d y a i / b o t k i t / i s s u e s / 1 0 8 + v a r b o t = c o n t r o l l e r . s p a w n ( { + t o k e n : p r o c e s s . e n v . S L A C K _ T O K E N + } ) ; + b o t . a p i . t e a m . i n f o ( { } , f u n c t i o n ( e r r , r e s ) { + c o n t r o l l e r . s t o r a g e . t e a m s . s a v e ( { i d : r e s . t e a m . i d } ) ; + } ) ; / / . . . 33 / 39
34. Try again! $ P O R T = 9 0 0 0 S L A C K _ T O K E N = x o x b - . . . n o d e i n d e x . j s i n f o : * * U s i n g s i m p l e s t o r a g e . S a v i n g d a t a t o . / s i m p l e _ s t o r a g e / i n f o : * * S e t t i n g u p c u s t o m h a n d l e r s f o r p r o c e s s i n g S l a c k m e s s a g e s i n f o : * * S t a r t i n g w e b s e r v e r o n p o r t 9 0 0 0 i n f o : * * S e r v i n g w e b h o o k e n d p o i n t s f o r S l a s h c o m m a n d s a n d o u t g o i n g w e b h o o k s a t : h t t p : / / M Y _ H O S T : 9 0 0 0 / s l a c k / r e c e i v e 34 / 39
35. Try again! $ P O R T = 9 0 0 0 S L A C K _ T O K E N = x o x b - . . . n o d e i n d e x . j s i n f o : * * U s i n g s i m p l e s t o r a g e . S a v i n g d a t a t o . / s i m p l e _ s t o r a g e / i n f o : * * S e t t i n g u p c u s t o m h a n d l e r s f o r p r o c e s s i n g S l a c k m e s s a g e s i n f o : * * S t a r t i n g w e b s e r v e r o n p o r t 9 0 0 0 i n f o : * * S e r v i n g w e b h o o k e n d p o i n t s f o r S l a s h c o m m a n d s a n d o u t g o i n g w e b h o o k s a t : h t t p : / / M Y _ H O S T : 9 0 0 0 / s l a c k / r e c e i v e 35 / 39
36. 36 / 39
37. Conclusion 37 / 39
38. Botkit is a Slack app framework Can make a simple app in 5 min Slash Command for single team doesn't work well But we can workaround When develop Slash Command, localtunnel is useful 38 / 39
39. Thanks :) 39 / 39