Slack_API_Wrapper_BoltでBotを爆速開発.pdf

Transcript

1. Slack API Wrapper BoltでBotを爆速開発 @mako_makok 2021/04/28 第二回 Web API LT会
2. 自己紹介 • 名前: 小林允(@mako_makok) • 所属: 株式会社ラクス • 楽楽勤怠のバックエンドエンジニア • たまにフロントエンドもやる • Spring Boot/Java/Kotlin/TypeScript/React
4. 使ったもの • Cloud Functions(Firebase) • Firebase Firestore • Bolt For JavaScript
5. Bolt For JavaScript • Slackアプリ構築用のフレームワーク • Slack API Team謹製 • Slack API Client + Receiver + 便利な型定義 • TypeScriptで書かれている • For JavaScriptだけでなく他の言語でもSDKが提供されている ◦ Python, Java
6. Initialize トークンを発行してAppに放り込む import { App } from '@slack/bolt' const app = new App({ token: process.env.SLACK_BOT_TOKEN, signingSecret: process.env.SLACK_SIGNING_SECRET, })
7. Slack API Client • 第2引数のリスナーがclientを持っている • new Appしたときの認証情報がそのまま利用される app.event('team_join' , async ({ event, client }) => { try { await client.chat.postMessage ({ channel: 'foo', text: `いらっしゃい、 <@${event.user.id}>! 🎉`, }) } catch (error) { console.error(error) } })
8. Slack API Client • Slack APIはAPIが頻繁に更新、機能追加される • たまに破壊的な変更も入る • Slack APIチームがメンテしているので、変更に追従してくれる • TypeScriptで書かれているので型安全にAPIのパラメータを書くことがで きる
9. Slack API Client • 便利なユーティリティ ◦ ack() ◦ respond() ▪ Slackからのリクエストに対して同期、非同期でレスポンスを返 す ◦ say() ▪ postMessageの簡略版 say(`いらっしゃい、<@${event.user.id}>! 🎉`)
10. Slash Command(http) slash command request response Slackアプリ Slackのサーバ 自前のサーバ ※3秒以内にレス ポンスを返す必 要あり
11. Boltで実装した場合 import { App, ExpressReceiver } from '@slack/bolt' import { config } from './functions.setting' export const expressReceiver = new ExpressReceiver ({ signingSecret: config.slack.secret, endpoints: '/events' }) export const app = new App({ receiver: expressReceiver , token: config.slack.token, processBeforeResponse: true, }) レシーバーの設定 endpointsの内容がそのまま ルーティングされる
12. Boltで実装した場合 export const register = (app: App) => { app.command('/register-word', async ({ ack, body, context, command }) => { await ack() await app.client.views.open({ token: context.botToken, trigger_id: body.trigger_id , view: { type: 'modal', callback_id: VIEW_ID, ... }) app.view(VIEW_ID, async ({ ack, view, context, body }) => { await ack() ... }) } App.commandでイベントを 定義 App.viewはview上の実装 基本的にformの操作など
13. まとめ • Slack API wrapper + slash command開発用のMWの提供 • APIクライアントとして使うだけでも便利だし、ガッツリslash command開 発するにはもってこい • 今Slackアプリ開発するならほぼこれ一択 FirebaseでBoltを動かすサンプル👉 https://github.com/mako-makok/connpass-notificator