Tweet
Tweet

Slide 1

Slide 1 text

Slack app with Botkit #quartetcom 2016.03.25 @qckanemoto 1 / 39

Slide 2

Slide 2 text

Botkit is a Slack app framework. 2 / 39

Slide 3

Slide 3 text

Let's make an example 3 / 39

Slide 4

Slide 4 text

Step 1 Create "Bot" on slack.com 4 / 39

Slide 5

Slide 5 text

https://slack.com/apps 5 / 39

Slide 6

Slide 6 text

6 / 39

Slide 7

Slide 7 text

7 / 39

Slide 8

Slide 8 text

8 / 39

Slide 9

Slide 9 text

And copy "API Token" for later 9 / 39

Slide 10

Slide 10 text

Step 2 Develop bot on local 10 / 39

Slide 11

Slide 11 text

Install botkit $ n p m i n i t $ n p m i - S b o t k i t 11 / 39

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Invite @botkit into channel 13 / 39

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Step 3 Create "Slash Command" 15 / 39

Slide 16

Slide 16 text

Create on slack.com 16 / 39

Slide 17

Slide 17 text

Create on slack.com 17 / 39

Slide 18

Slide 18 text

Create on slack.com Set http://localhost to URL just temporarily and finish configuration. 18 / 39

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Then, localtunnel 22 / 39

Slide 23

Slide 23 text

Install localtunnel $ n p m i - D l o c a l t u n n e l 23 / 39

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Then, set this URL to Slack 26 / 39

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

29 / 39

Slide 30

Slide 30 text

I googled... 30 / 39

Slide 31

Slide 31 text

I googled... And found this issue. https://github.com/howdyai/botkit/issues/108 31 / 39

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 / 39

Slide 37

Slide 37 text

Conclusion 37 / 39

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Thanks :) 39 / 39