- [x] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
飯田 庸介
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
Slackbotで送信したメッセージをスプレッドシートに記録する機能を作ってみた
}

<br>

## 表示される部分
***サムネイル画像***
{
}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [x] 活動の様子
- [ ] メンバーの趣味

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [x] Python
- [ ] Go
- [ ] Ruby
- [ ] JavaScript
- [ ] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [ ] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [ ] フロントエンド
- [ ] バックエンド
- [x] インフラ
- [ ] Web-design
- [ ] API関係

---

***以下に本文を記載してください***

# はじめに

はじめまして，この春NUTMEGに加入した飯田です．

チャットツールとして使用しているSlackを便利にしよう！！ということで，SlackBotの開発をM2の後方腕組大臣から受け継ぎました！！

今回は，SlackBotで送信したメッセージをスプレッドシートに記録する機能を作りました

# GM2意見箱を作ってみた

要望：意見・課題点を一覧に記録しておきたい

SlackでBotをメンションしてメッセージを送信すると，スプレッドシートに書き込む



# SlackBotの仕組み

Botが入っているチャンネル上で，メッセージが送信されたら，SlackがBotのサーバーにリクエストを送信する．Botのサーバーは処理を行い，Slackに結果を送信(チャンネルにメッセージを送信とか)する．


# ngrokのインストール

[ngrok - download](https://ngrok.com/download)からインストールする

(ngrokをローカルにインストールせず，Dockerを使用する方法でもできそうなので，そっちのほうが簡単かも)

docker run -it -e NGROK_AUTHTOKEN=<token> ngrok/ngrok http 3000

Slackはイベントに対応するHTTP POSTリクエストを”Request URL”エンドポイントに送信する
そのため，ワークスペースに常駐しているSlackBotがローカルPCのポートにアクセスする必要がある
ローカルPCのネットワークを外部に公開し，アクセスできるようにするためにngrokを使用する

参考 : [Slack BotをBoltで開発した](https://zenn.dev/peg/articles/a3597550a61006)

# git cloneする

`git clone [e-mail]:NUTFes/nutmeg-slack.git`

# 環境変数を設定する

- api/env/.env に以下を作成する

# 開発環境
DB_NAME="***************"
DB_USER="***"
DB_PASSWORD="*******" 

- env/.env に以下を作成する

SLACK_BOT_TOKEN=*******************************************
SLACK_SIGNING_SECRET=*****************
DB_NAME=*********
DB_USER=***
DB_PASSWORD=****
DB_PORT=27017
DB_HOST=mongo
SPREADSHEET_KEY=******************

- vite/.env に以下を作成する

VITE_API_URL=http://localhost:1323
VITE_KEYCLOAK_URL=********
VITE_KEYCLOAK_REALM=NUTFES
VITE_KEYCLOAK_CLIENT_ID=slack-auth

# Slack APIの設定

- Slack Appの設定ページにアクセスし， Collaborators に名前を追加する
(招待する必要があるかも)
(NUTMEGワークスペースの develop-nutfes_slack チャンネルのタブにピン留めされている)


Boltサーバーの起動

---

docker compose upする


`⚡Bolt app is runnning!` と表示されると，Slack Botサーバーが起動している

# ngrokの起動・RequestURLの設定

ubunutのタブをもう1つ開いて， ngrok http 3000 で3000番のポートにインターネット上からアクセスできるようにする

(注意 : インターネット上に公開しているので，作業終了時には閉じるようにしたほうがいい)

`Session Status` が `online` であれば，接続できている


`Forwarding` の `https://035....ngrok-free.app` をコピーする

Slack appの設定ページの `Event Subscriptions` の `Request URL` の `Change` を押して，**コピーしたURL + `/slack/event`** を入力する

入力した後，緑色の文字で `Verified` と表示されると，Slackからngrokに通信できている　


>
> **準備完了！！**
>

これでSlack bot開発ができるようになります!!

# おわりに

Slack Botで**技大祭を円滑に**というビジョンを持って，趣味程度に取り組んでいこうと思います