louis70109 / twitch-bot

🤖 基於 Bottender 建立查詢 Twtich 直播的 LINE bot

為什麼要用 Twitch Bot 👾

使用電腦看的時候我們可以用 Ad Block 這類的擴充工具來擋廣告，但使用手機的 APP 安裝外掛就很麻煩，

此時有朋友在 LINE 裡面傳 Twitch 直播給我看，意外的發現在 APP 上開網頁看直播是不會被廣告襲擊!!

因此這隻 Twitch Bot 就誕生啦 🎉，目前支援 LINE Bot，可以透過指令綁定帳號、查詢追隨、最多人看的遊戲、查詢特定遊戲以及綁定推播功能。

加入好友

掃描 QR code 或是點選我!!

截圖

指令使用

• 綁定帳號: 綁定 TWITCH_ACCOUNT
  • ex: 綁定 relaxing234
• 查詢追隨: follow / 追隨
  • 前置動作: 須先綁定帳號才可查詢
• 最多人看的遊戲: top / 遊戲
• 連結 LINE Notify: 點選我

更多介紹參考 我的文章

Developer setup

主要工具

• Bottender
• Mongo
  • mongoose
• twitch API
• Typescript

試玩

Clone 圖奇獸 下來！

git clone https://github.com/louis70109/Twitch-Bot.git

使用環境變數: .env

把 .env.sample 改成 .env 並把對應的 key 放入。

cp .env.sample .env

LINE

Bot 的金鑰

• Secret key

• Access token

Notify

參考我文章的這部分

Twitch

TWITCH_ACCESS_TOKEN: OAuth key 在這邊申請

申請完後將 oauth: 後的 key 透過官方文件的 Validating requests 指令放入 access token 中取得 Client_id，如下:

curl -H "Authorization: OAuth <access token>" https://id.twitch.tv/oauth2/validate

本專案的 TWITCH_CLIENT_ID 的環境變數就是這個回傳值中的 client_id。

啟動

Normal

• 先用 yarn install 或 npm install 來安裝相依套件
• 開啟另一個視窗執行 tsc -w，它會幫忙編譯並且即時監聽
• 啟動服務方法:
  1. npx bottender dev: 執行程式，或是加上 --console 讓你可以在終端機上直接測試 Bot 的行為。
  2. npm run dev: 則是有完整的 LINE API 使用功能(Notify、LIFF)，需要前端顯示的則需要透過這個指令啟動 server。

---

使用 npx bottender dev 時會幫你建立 LINE 的 webhook URL 了。

若是使用 express 來啟動的話(預設 5000 port) 則是需要額外開個視窗啟動 ngrok 來幫忙建立一個暫時的 https 網址喔!!

npx ngrok http 5000

---

然後將 LINE webhook url 複製到你的機器人開發者頁面中。

也可以使用 Docker

若要試玩 Docker 的話可以使用以下指令

docker-compose up -d # 啟動服務於背景
docker ps            # 查看服務狀態

開啟另一個視窗執行ngrok將 port 導出去

npx ngrok http 5000

再將網址複製到對應的平台設定上即可！

在 container 裡也是讀取.env，要記得設定檔案。

---

👾👾👾 現在你可以好好的去試玩 Twitch Bot 了 🎉🎉🎉

LICENSE

MIT

twitch-bot's Issues

增加 LINE Notify 推播

按下 follow 之後出現的直撥要能出現推播的按鈕

未綁定 notify

• flex message 綁定推播 的按鈕為綠色
• 按下去後出現 LIFF page 供使用者註冊 Notify

已綁定

flex message 綁定直播文字會變成 紅色 的取消推播

• 需增加 express 來產生 notify 註冊頁面

腳本

推播用

• 設定 Heroku 每三十分鐘搜尋一次
• 只要推播過後當天就不再推播(更新資料庫)

刷新資料庫

• 每天半夜刷新推播紀錄

Twitch id and token can not use

[HTTPStatusCodeError: Encountered HTTP status code 401: Unauthorized

Body:
{
"error": "Unauthorized",
"status": 401,
"message": "Client ID and OAuth token do not match"
}] {
_statusCode: 401,
_body: {
error: 'Unauthorized',
status: 401,
message: 'Client ID and OAuth token do not match'
}
}

翻新舊的 line bot

fix: 輸入 top 後的直播 flex 問題

按鈕沒有變換狀態

feat: Icon switch

bottender document: https://bottender.js.org/docs/zh-TW/channel-line-sending-messages#%E7%99%BC%E9%80%81%E5%B8%B6%E8%91%97%E9%A0%AD%E5%83%8F%E8%88%87%E9%A1%AF%E7%A4%BA%E5%90%8D%E7%A8%B1%E7%9A%84%E8%A8%8A%E6%81%AF

feat: add Sentry

判斷環境去決定要不要輸出錯誤

feat: 新增 richmenu 設定

• 圖片
• json

feat: 移除 messenger

• tag 最後存在的地方
• README 刪除符號
• CHANGE LOG

使用 map, filter 來取代掉一些迴圈

• forEach
• for ... for ...
• 拆解迴圈

style: 改善寫法

• 用到 mongo 的變數要加入$字號
• 參數重複的地方可以參考

const {
  CLIENT_ID,
  CLIENT_SECRET
} = process.env;

• 把 __tests__ 放進 src/

Migrate Mongo to Postgresql

Because Heroku would not support mLab on September 10

Messenger find specific game no response

top -> click templete