クラスメソッド株式会社がオンライン開催する、DevelopersIO 2022 でのセッション用のデモアプリです。
主に以下のことができます。
- ホームタブの表示
- ホームタブ上のボタンからモーダルの表示
- モーダルのバリデーション
- モダールの情報を元にチャンネルにメッセージ送信
- メッセージ上のボタンから、AWS Step Functions のステートマシン起動
- メッセージ上のボタンから元のメッセージを書き換え
developersio2022-slack-bolt-app-demo.mp4
初回実行時に必要な準備を記載します。既に設定済のものはスキップしてください。
端末に npm をインストールします。
簡単にですが、Homebrew から npm をインストールする例を紹介しています。
Serverless Framework 用の端末設定メモ | Takaaki Kakei
端末に Pipenv をインストールします。
以下は、Homebrew でインストールする場合のコマンド例です。
$ brew install pipenv端末に Serverless Framework をインストールします。
以下は、npm でインストールする場合のコマンド例です。
$ npm install -g serverlessデプロイ先の AWS 環境で、Serverless Framework が利用する IAM ユーザーとアクセスキーを作成します。 また端末で、デプロイ時に利用する AWS プロファイルの設定をします。
なお、AWS プロファイルは AWS Vault で管理することを推奨します。
$ [email protected]:takaakikakei/developersio2022-slack-bolt-app.git
$ cd developersio2022-slack-bolt-app.git
$ npm ci # 必要なプラグインのインストール
$ pipenv install # 必要なパッケージのインストール- Your Appsから
Create New Appを選択 Create New Appのポップアップが表示されたら、From scratchを選択Name app & choose workspaceのポップアップが表示されたら、アプリ名とインストール先のワークスペースを入力
App Manifest を開いて、以下のように yml を設定します。
display_information:
name: DevelopersIO2022 PoC App
description: DevelopersIO2022のプレゼン用アプリ
background_color: '#004492'
features:
app_home:
home_tab_enabled: true
messages_tab_enabled: false
messages_tab_read_only_enabled: true
bot_user:
display_name: devio2022_poc_app
always_online: true
oauth_config:
scopes:
bot:
- channels:history
- groups:history
- chat:write
settings:
org_deploy_enabled: false
socket_mode_enabled: false
token_rotation_enabled: falseOAuth & Permissionsを開いて、OAuth Tokens for Your WorkspaceでInstall to WorkSpaceをクリックしてインストールBot User OAuth Tokenをメモしておく
Basic Informationを開いて、Signing Secretをメモしておく
Slack App のクレデンシャル情報はコード内に直接書きたくないので、 AWS Systems Manager のパラメータストアに保存しておきます。 パラメータ名はそれぞれ以下で保存します。
- Bot User OAuth Token
/developersio2022-slack-bolt-app/dev/SLACK_BOT_TOKEN
# /サービス名/ステージ名/SLACK_BOT_TOKEN- Signing Secret
/developersio2022-slack-bolt-app/dev/SLACK_BOT_SIGNING_SECRET
# /サービス名/ステージ名/SLACK_BOT_SIGNING_SECRETプロジェクトのディレクトリで以下のコマンドでデプロイします。
aws-vault exec pte -- sls deploy --stage dev
# aws-vault exec プロファイル名 -- sls deploy --stage ステージ名AWS Vault を利用しない場合は、以下のようなコマンドになります。
sls deploy --stage dev --profile pte
# sls deploy --stage ステージ名 --profile プロファイル名デプロイ完了すると、Amazon API Gateway のエンドポイントが表示されるのでメモしておきます。
- Slack App の
Interactivity & Shortcutsを開きます Interactivityを On にしますRequest URLに Amazon API Gateway のエンドポイントを設定します
- Slack App の
Event Subscriptionsを開きます Enable Eventsを On にしますRequest URLに Amazon API Gateway のエンドポイントを設定しますSubscribe to bot eventsで以下のイベントを許可します- app_home_opened
- message.channels
- message.groups
- Slack ワークスペースを開き、画面の左ペインの、
App→アプリの追加から、対象のアプリをインストールします - メッセージを投稿するチャンネルにアプリを追加します
これでセットアップ完了です。お疲れ様でした！
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent