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

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

このスライドは【Ginza.SlackApp #1】の発表資料です
https://slackapp.connpass.com/event/154648/

SlackAppを作るのに公式フレームワークであるBoltを使っています。
ExpressReceiverを使うことでフルに使い倒して作ってる1例をご紹介します。

- - -
参考リンク
Bolt 入門ガイド(公式)
https://slack.dev/bolt/ja-jp/tutorial/getting-started

GitHub: challenge-every-month/cem-app
https://github.com/challenge-every-month/cem-app

SlackApp快速開発 - ローカル開発環境構築(with Bolt + TypeScript)
https://blog.solunita.net/develop-slack-app-comfortably-fast-with-bolt-and-typescript/

SlackApp快速開発 - デプロイ(GAE with CircleCI)
https://blog.solunita.net/develop-slack-app-comfortably-fast-deploying-on-gae-with-ci/

SlackApp快速開発 - BoltでHTTPリクエストを受け、Cronで定時実行
https://blog.solunita.net/develop-slack-app-comfortably-fast-receive-http-request-for-cron/

SlackApp快速開発 - Firestoreでデータ保持したり読み出したりする
https://blog.solunita.net/develop-slack-app-comfortably-fast-with-firestore/

Bb4090568b08b9cec824b0f063fcb59e?s=128

Aqui TSUCHIDA

December 10, 2019
Tweet

Transcript

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

  2. SlackApp?

  3. Bot ? App ? 何が違うの?

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

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

    実例を交えて このへんの話をします
  6. アジェンダ - 今⽇話すこと • ⾃⼰紹介 • Slackコミュニティ良いぞ • 活動内容 •

    SlackApp化して運営を円滑にしよう • 実装した機能 • BoltからExpressへ • Expressでできること • SlackAppからWebAppへ
  7. Who am I ? Aqui TSUCHIDA ⼟⽥ 明信 @AquiTCD サーバーサイドエンジニア

    趣味: フロントエンド開発 #料理 #元武道家 #ゲーマー #元バックパッカー https://aquitcd.github.io/Pentazemin/ja/ Pentazemin: Electron製タスク管理アプリ https://aquitcd.github.io/yantan/ja/ YANTAN: Chrome拡張 Rubyist, JSer
  8. 家族Slack運⽤してます • 帰宅⽬安報告App • 今⽇はこちらの話ではなく…

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

  10. 活動 内容

  11. Challenge Every Month is 何? 毎⽉何かに挑戦するSlackコミュニティ • ⽉初に今⽉のチャレンジを宣⾔ • 途中で進捗報告したり

    • Times(分報)したり • 励ましたり、相談したり • ⽉末にチャレンジのふりかえり
  12. CEM SlackApp化要件 ⽉初: 今⽉のチャレンジを宣⾔ 今⽉は… ・こんなことや ・あんなことに 挑戦します! これこれこんな理由や背景で…

  13. CEM SlackApp化要件 ⽉末: 今⽉のチャレンジ結果をふりかえり 今⽉は… ✅ こんなことは達成! ❌ あんなことは未達成 でした。

    これこれこんな理由や背景で…
  14. SlackApp化

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

    GCP Procject
  16. CEM SlackApp アーキテクチャ Google App Engine の運⽤ポイント • AlwaysFree という無料枠

    • Node.js Standard 環境 • デプロイもわりと楽 • Firestoreと繋ぐのが楽 • Cronで定期実⾏も可
  17. CEM SlackApp アーキテクチャ Bolt is 何? • Slack謹製 • SlackAppフレームワーク

    • ⽇本語ドキュメント有り • トリガーが書きやすい • 特に Interactive Components • 実は裏はExpress
  18. 実際の動き

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

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

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

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

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

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

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

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

  27. Bolt から Express へ

  28. 普通のBolt

  29. ExpressReceiver を使ったBolt

  30. ExpressReceiver を使ったBolt Express

  31. ExpressReceiver を使ったBolt つまり何が嬉しいの? • エンドポイント作れる • HTTPリクエスト受けれる • Web Cronで動く

    • Webページも表⽰できる • APIサーバーとしても動作できる
  32. HTTPリクエストで動く 例: HTTPリクエストを受けてメッセージ PRϚʔδ

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

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

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

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

    Webhookでは出来ないような
 複雑な処理やDBのデータも使える
  37. Webページ & APIサーバー SlackからDBに DBからJSONに JSONからWebに

  38. SlackApp Can Be

  39. SlackApp Can Be WebApp On Slack

  40. SlackApp can be WebApp on Slack! 特徴 • ⼊⼒はSlackから •

    認証、認可はSlackまかせ • 出⼒(表⽰)はWebサイト • Slack外にも広げていける
  41. 今⽇のまとめ • Slackコミュニティ良いぞ! • でも運営を続けるのはなかなか⼤変 • だから極⼒、⾃動化しよう • Boltはイベントトリガーが書きやすい •

    Boltベースでも機能を広げていける • ⼯夫次第ではどんどん応⽤できる
  42. Boltは ただの お気軽SlackApp フレームワーク に 留まらない!

  43. 参考リンク 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-firestore/ SlackApp快速開発 - Firestoreでデータ保持したり読み出したりする https://github.com/challenge-every-month/cem-app GitHub: challenge-every-month/cem-app