Firebase + Bolt で もくもく会用のSlack botを作った話 / Build slack bot with firebase + Bolt

2020/08/26 フロンドエンドLT会 vol.1

BotやFirebaseの設定方法などはこちら。
https://qiita.com/ryo2132/items/1a7d5e2a1b80414700e3

Transcript

1. 2020/08/26 ϑϩϯυΤϯυLTձ vol.1
   @KawamataRyo
   Firebase + Bolt Ͱ
   ΋͘΋͘ձ༻ͷSlack botΛ࡞ͬͨ࿩
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. @KawamataRyo
   ιϑτ΢ΣΞΤϯδχΞ
   TypeScript, Ruby, Vue, Firebase
   

   View Slide

4. @KawamataRyo
   ιϑτ΢ΣΞΤϯδχΞ
   TypeScript, Ruby, Vue, Firebase
   ফ๷࢜ྺ6೥൒, ΤϯδχΞྺ2೥൒
   

   View Slide

5. ࠓ೔࿩͢͜ͱ
   

   View Slide

6. * ΋͘΋͘ձ༻ͷSlack botͷ঺հ
   * Slack bot࡞੒ͷͭ·ΓͲ͜Ζ
   

   View Slide

7. 1. ։ൃͷܦҢ
   

   View Slide

8. ஍ݩɺἚ৓ݝͰΤϯδχΞͷษڧձΛओ࠵
   

   View Slide

9. ਫށΤϯδχΞษڧձ
   ೔࣌ɿຖ݄ୈ2౔༵ 13:00ʙ18:00
   ৔ॴɿἚ৓ݝਫށࢢ
   ܗࣜɿ΋͘΋͘ + LTձ
   

   View Slide

10. ΋͘΋͘ճͷྲྀΕ
    

    View Slide

11. 1. ࣗݾ঺հ & ΍Δ͜ͱઆ໌
    2. ΋͘΋͘λΠϜ
    3. ੒Ռൃද
    

    View Slide

12. 1. ࣗݾ঺հ & ΍Δ͜ͱઆ໌
    2. ΋͘΋͘λΠϜ
    3. ੒Ռൃද
    ՝୊͋Γ!
    

    View Slide

13. * ਓ਺͕ଟ͍ͱ֮͑ΒΕͳ͍
    * ϑΥʔϚοτ͕ܾ·ͬͯͳ͍ͱ࿩ͮΒ͍
    * ౤ߘ͕ྲྀΕͯ͠·ͬͯ୳͠ਏ͍
    

    View Slide

14. * ਓ਺͕ଟ͍ͱ֮͑ΒΕͳ͍
    * ϑΥʔϚοτ͕ܾ·ͬͯͳ͍ͱॻ͖ਏ͍
    * ౤ߘ͕ྲྀΕͯ͠·ͬͯ୳͠ਏ͍
    ςΩετͰ࢒͢
    ઐ༻ϑΥʔϜΛ࡞੒͢Δ
    ಠࣗʹϑΥʔϚοτͯ͠౤ߘ
    

    View Slide

15. Slack workflow͕͋Δ!!
    

    View Slide

16. ແྉ൛ͳͷͰ࢖͑·ͤΜ..
    

    View Slide

17. Slack botΛ࡞Δͧ !!!
    

    View Slide

18. 2. ࡞ͬͨ΋ͷ
    

    View Slide

19. DEMO
    

    View Slide

20. γεςϜߏ੒
    

    View Slide

21. Bolt-js
    Slack APIΛ࢖͍΍͘͢͢ΔͨΊͷ
    Node.jsͷϑϨʔϜϫʔΫɻ؆୯ʹ
    Slack Event APIΛѻ͏ػೳ౳͕
    ఏڙ͞Ε͍ͯΔ
    

    View Slide

22. Cloud Functions
    for Firebase
    GCPͷCloud FunctionsͷFirebase൛
    ػೳతʹ͸΄΅ಉ͡ɻ
    ΠϕϯτυϦϒϯͰεέʔϥϒϧͳؔ਺
    Λ࣮ߦͰ͖Δɻ
    

    View Slide

23. Firestore
    εέʔϥϒϧͳυΩϡϝϯτࢦ޲σʔλ
    ϕʔεɻNoSQLɻڧྗͳϦΞϧλΠϜॲ
    ཧΛ΋ͭɻ
    

    View Slide

24. Slack
    Functions + Bolt Firestore
    Firebase
    

    View Slide

25. Slack
    Functions + Bolt Firestore
    Firebase
    slash commands
    

    View Slide

26. Slack
    Functions + Bolt Firestore
    Firebase
    աڈͷ౤ߘऔಘ
    

    View Slide

27. Slack
    Functions + Bolt Firestore
    Firebase
    Ϟʔμϧىಈ
    

    View Slide

28. Slack
    Functions + Bolt Firestore
    Firebase
    Formૹ৴
    

    View Slide

29. Slack
    Functions + Bolt Firestore
    Firebase
    ౤ߘه࿥
    

    View Slide

30. Slack
    Functions + Bolt Firestore
    Firebase
    formatͯ͠౤ߘ
    

    View Slide

31. 3. ͭ·ΓͲ͜Ζ
    

    View Slide

32. ॳճ͸ى͖Δ·Ͱ͕͔͔࣌ؒΔ
    

    View Slide

33. Firebase Functions͸ॳճىಈ͕஗͍ͷͰɺslackଆͰ
    timeout errorͱͳΔɻ ࣄલʹԹΊ͓ͯ͘͜ͱ͕େࣄɻ
    

    View Slide

34. Firebase ͱ Bolt ͱͷ૬ੑ
    

    View Slide

35. FaaSͰಈ͔͢ͳΒ processBeforeResponse: true ͕ඞਢɻ
    ͜ΕΛઃఆ͠ͳ͍ͱඇಉظॲཧͰਖ਼ৗʹಈ͔ͳ͍ɻ
    

    View Slide

36. 4. ͓ΘΓʹ
    

    View Slide

37. * Bolt + Firebase FunctionsͰBot͸खܰʹ࡞ΕΔ
    * ษڧձ։࠵લʹBotΛԹΊ͓ͯ͜͏
    * processBeforeResponseͷઃఆΛ๨Εͣʹ!
    

    View Slide

38. https://qiita.com/ryo2132/items/1a7d5e2a1b80414700e3
    

    View Slide