SlackAppのためのBoltを使い倒す、ある一つの例 / An Example of SlackApp with fully using up Bolt

by Aqui TSUCHIDA

Slide 1

Slide 1 text

SlackAppのための Boltを使いたおすある⼀つの例 2019-12-14 Ginza.SlackApp #1 @AquiTCD: ツチダアキノブ

Slide 2

Slide 2 text

SlackApp？

Slide 3

Slide 3 text

Bot ? App ? 何が違うの？

Slide 4

Slide 4 text

すごい Bot Bot です App みたいもはや App App です

Slide 5

Slide 5 text

すごい Bot Bot です App みたいもはや App App です実例を交えてこのへんの話をします

Slide 6

Slide 6 text

アジェンダ - 今⽇話すこと • ⾃⼰紹介 • Slackコミュニティ良いぞ • 活動内容 • SlackApp化して運営を円滑にしよう • 実装した機能 • BoltからExpressへ • Expressでできること • SlackAppからWebAppへ

Slide 7

Slide 7 text

Who am I ? Aqui TSUCHIDA ⼟⽥明信 @AquiTCD サーバーサイドエンジニア趣味: フロントエンド開発 #料理 #元武道家 #ゲーマー #元バックパッカー https://aquitcd.github.io/Pentazemin/ja/ Pentazemin: Electron製タスク管理アプリ https://aquitcd.github.io/yantan/ja/ YANTAN: Chrome拡張 Rubyist, JSer

Slide 8

Slide 8 text

家族Slack運⽤してます • 帰宅⽬安報告App • 今⽇はこちらの話ではなく…

Slide 9

Slide 9 text

毎⽉何かに挑戦する Slackコミュニティ onth very hallenge C E M

Slide 10

Slide 10 text

活動内容

Slide 11

Slide 11 text

Challenge Every Month is 何？毎⽉何かに挑戦するSlackコミュニティ • ⽉初に今⽉のチャレンジを宣⾔ • 途中で進捗報告したり • Times（分報）したり • 励ましたり、相談したり • ⽉末にチャレンジのふりかえり

Slide 12

Slide 12 text

CEM SlackApp化要件⽉初: 今⽉のチャレンジを宣⾔今⽉は… ・こんなことや・あんなことに挑戦します！これこれこんな理由や背景で…

Slide 13

Slide 13 text

CEM SlackApp化要件⽉末: 今⽉のチャレンジ結果をふりかえり今⽉は… ✅ こんなことは達成！ ❌ あんなことは未達成でした。これこれこんな理由や背景で…

Slide 14

Slide 14 text

SlackApp化

Slide 15

Slide 15 text

CEM SlackApp アーキテクチャ Google App Engine Google Firestore (DB) Bolt GCP Procject

Slide 16

Slide 16 text

CEM SlackApp アーキテクチャ Google App Engine の運⽤ポイント • AlwaysFree という無料枠 • Node.js Standard 環境 • デプロイもわりと楽 • Firestoreと繋ぐのが楽 • Cronで定期実⾏も可

Slide 17

Slide 17 text

CEM SlackApp アーキテクチャ Bolt is 何? • Slack謹製 • SlackAppフレームワーク • ⽇本語ドキュメント有り • トリガーが書きやすい • 特に Interactive Components • 実は裏はExpress

Slide 18

Slide 18 text

実際の動き

Slide 19

Slide 19 text

CEM 新規登録 /new ⼊⼒フォームモーダルを開く

Slide 20

Slide 20 text

CEM 新規登録 /new ⼊⼒フォームモーダルを開く Firestore に Insert

Slide 21

Slide 21 text

CEM 表明 /publish でデータをチャットに投稿 Firestoreからデータ取得して Post

Slide 22

Slide 22 text

CEM 表明 /publish でデータをチャットに投稿 Firestoreからデータ取得して Post

Slide 23

Slide 23 text

CEM ふりかえり /review モーダルを開いてセレクト

Slide 24

Slide 24 text

CEM ふりかえり /review モーダルを開いてセレクト Firestore データを Update

Slide 25

Slide 25 text

CEM 新規登録 Firestoreからデータ取得して Post /review モーダルのボタンで投稿

Slide 26

Slide 26 text

CEM 新規登録 Firestoreからデータ取得して Post /review モーダルのボタンで投稿

Slide 27

Slide 27 text

Bolt から Express へ

Slide 28

Slide 28 text

普通のBolt

Slide 29

Slide 29 text

ExpressReceiver を使ったBolt

Slide 30

Slide 30 text

ExpressReceiver を使ったBolt Express

Slide 31

Slide 31 text

ExpressReceiver を使ったBolt つまり何が嬉しいの？ • エンドポイント作れる • HTTPリクエスト受けれる • Web Cronで動く • Webページも表⽰できる • APIサーバーとしても動作できる

Slide 32

Slide 32 text

HTTPリクエストで動く例: HTTPリクエストを受けてメッセージ PRϚʔδ

Slide 33

Slide 33 text

HTTPリクエストで動く例: HTTPリクエストを受けてメッセージ PRϚʔδ CIでデプロイ開始

Slide 34

Slide 34 text

HTTPリクエストで動く例: HTTPリクエストを受けてメッセージ PRϚʔδ CIでデプロイ開始デプロイ完了

Slide 35

Slide 35 text

HTTPリクエストで動く例: WebCronで処理 + メッセージ Cron: ⽉初にリマインド

Slide 36

Slide 36 text

HTTPリクエストで動く例: WebCronで処理 + メッセージ Cron: ⽉初にリマインド ※ ここでSlackの  Incoming Webhookでは出来ないような  複雑な処理やDBのデータも使える

Slide 37

Slide 37 text

Webページ & APIサーバー SlackからDBに DBからJSONに JSONからWebに

Slide 38

Slide 38 text

SlackApp Can Be

Slide 39

Slide 39 text

SlackApp Can Be WebApp On Slack

Slide 40

Slide 40 text

SlackApp can be WebApp on Slack! 特徴 • ⼊⼒はSlackから • 認証、認可はSlackまかせ • 出⼒（表⽰）はWebサイト • Slack外にも広げていける

Slide 41

Slide 41 text

今⽇のまとめ • Slackコミュニティ良いぞ！ • でも運営を続けるのはなかなか⼤変 • だから極⼒、⾃動化しよう • Boltはイベントトリガーが書きやすい • Boltベースでも機能を広げていける • ⼯夫次第ではどんどん応⽤できる

Slide 42

Slide 42 text

Boltはただのお気軽SlackApp フレームワークに留まらない！

Slide 43

Slide 43 text

参考リンク https://slack.dev/bolt/ja-jp/tutorial/getting-started Bolt ⼊⾨ガイド（公式） https://blog.solunita.net/develop-slack-app-comfortably-fast-with-bolt-and-typescript/ SlackApp快速開発 - ローカル開発環境構築(with Bolt + TypeScript) https://blog.solunita.net/develop-slack-app-comfortably-fast-deploying-on-gae-with-ci/ SlackApp快速開発 - デプロイ(GAE with CircleCI) https://blog.solunita.net/develop-slack-app-comfortably-fast-receive-http-request-for-cron/ SlackApp快速開発 - BoltでHTTPリクエストを受け、Cronで定時実⾏ https://blog.solunita.net/develop-slack-app-comfortably-fast-with-ﬁrestore/ SlackApp快速開発 - Firestoreでデータ保持したり読み出したりする https://github.com/challenge-every-month/cem-app GitHub: challenge-every-month/cem-app