分類
隨著 OpenAI 的盛行，各式各樣幫助大家節省時間的工具如雪花般誕生，如今在做 SRT 字幕這邊又更加方便了！
去年 COSCUP 我曾經在 GDG 上分享 【GCCP Creator】增加字幕編輯的效率！，當時唯一的問題是，透過 Google STT 所判斷出來的字串其實沒有那麼的"友善"觀看，需要人工再多介入些；而如今 OpenAI 的判斷其實直接更上 N 層樓，再晶晶體夾爆的各種句子中，許多時候他都能清楚地判斷出來，因此以下我就把一些近期找到的工具分享給大家，若有想把各種影片加上字幕的話，或許可以參考以下方式看看喔！
從以前使用雲端硬碟，如 Dropbox, Google Drive, Box...我們都很習慣可以手動拉照片、影片上去放，而在開始寫程式之後理所當然就會想用 API 丟，但這些雲端硬碟一般來說除非用模擬器，不然理論上應該是不好用程式跑，而在公有雲出來後，就有像是 AWS S3, Google Cloud Storage 等等的服務陸續出來，讓大家可以使用他們的服務建立自己的硬碟空間，也不用自己架伺服器弄硬碟空間，權限管控都幫你弄好好，也可以用 API 訪問，實在是很方便呢！
隨著程式越寫越多，除了在 LINE Bot 上需要圖片網址才可以發送圖片外，像是 video.js 以及許多很多服務、工具越來越依靠 https 相關的網址來找圖片，接下來就讓筆者就帶大家認識一下近期使用的一些範例以及我發現的另一種上傳方法。
平常在寫 PoC 時，是否會像筆者一樣很困擾，每個東西都需要一個 DB，都要重新 create table、塞資料，像是每次寫 LINE Bot，一定都會綁用戶資訊(userId, name, email...)，如果範例專案共用的資料能放在一起，是不是就能更快上線呢？透過部署 Parse Server，讓許多的 CRUD 工作都可以省下來，避免許多東西重工的時間。因此這次就來介紹一下 Parse Server 這個開源莊案究竟有多好用吧！
以下都是建立在 Heroku 上，若需要搭建在自家，請參考使用 Dockerfile。
今天因為要去注射疫苗請假了一天，想說最近有個 side project 想用 PlantUML 畫一下流程圖，但發現新買的這台 Windows 桌機似乎也沒灌 Java 相關的套件，因此輸出不了圖(如下)
以下提供一下我成功安裝的方法給大家
早些日子前(也才去年)，我還是使用 Facebook 的留言，因為一般人理論上都已經登入過 Facebook，透過串接 Plugin 馬上就可以讓用戶留言，實在是挺方便。但隨時時間的推演，由於 Hexo 是由 JavaScript 所構成的，且因為相互依賴的套件許多，被迫一定要將 Hexo 升級版本(好像是 3 -> 5)，導致我的留言區直接全毀...
近期橫空出世(明明是自己孤陋寡聞)了一個 TypeScript 所構成的留言區套件 utterances，它是幹嘛得呢？它透過串接 GitHub issue 的方式來完成留言區的功能(需要 GitHub 帳號)，簡單來說如果在文章底下留言的話，他會同步在該 GitHub 專案留下一個 issue 同步留言。
去年下半年時於 COSCUP 2020 的閉幕閃電秀中與 Chatbot 社群小聚看到社群朋友展示使用 LIFF 來發射彈幕覺得有趣又回憶滿滿，從以前在看ニコニコ動画時就很常看到彈幕出現在影片中(甚至有時候彈幕還比影片還好笑)，而透過這樣的互動讓觀眾並及時回饋，拉近活動(影片、直播、演唱會...)與觀眾的距離。想到去年因為疫情需要把社群聚會改成線上，剛好在前一陣子搜尋到這篇文章，以下就使用 Chatbot 搭配文章在使用 OBS 來使用它！
約在一年前，當時公司的同事帶我玩過 Swagger，只是當時的我寫得不太習慣，直到寫這篇之前都還只是寫 markdown 來做 API 文件 😓，不過寫 API 到最後總是要開放給其他人需要測試以及用文件來描述功能，但只是寫 Readme.md 給其他人看感覺有點不負責任 (?)，所以這個時候 Swagger 就發揮它的作用啦～
但是看著下面這張圖…
左邊那是怎樣！怎麼設定了一大堆右邊才出現一點點東西，估且不論還要設定 Model、Payload 什麼的，我想光寫左邊這份文件加測試的時間我都可以寫一份 Markdown 給其他同仁用 Postman 測試了…🤣🤣🤣
這時候套件就出動啦，這次要介紹的是 flask-restful-swagger-2.0，他是延續原版套件並加以更新的，不得不說再搭更新完後整體寫起來人性多了，像是文先寫法用 decorator 的寫法在路由之前、宣告 Schema 時只要用類別包起來之類的，讓寫文件可以用 python 的寫法去寫，除了特殊的設定需要比對 Swagger 官方文件外，在建一個 Swagger 格式的文件這樣已經超快了 💪
既然如此那就介紹一下他的相關設定並把它記錄下來吧！
在去年大約五月的時候寫了一隻 Twitch 的 LINE bot，不過後來似乎 Twitch API 有改版讓機器人壞掉了，最近又有需要一隻機器人幫我查詢，就開始去翻一下 Twitch 官方文件，碰巧逛到這個 Community Resources page，看到了好多資料在裡面，就索性來重寫囉！
因為 Twitch package 都是 Typescript，因此本篇的範例都會是 Typescript 哦！
⭐️ 本專案: Twitch-Bot
LINE
Messenger
yarn add twitch
// or...
npm install --save twitch
[2020/06/08 修正] 申請完後將 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。
這部分可能會需要去 twitch
設定 -> 連結去綁定 Oauth 的樣子，再麻煩各位注意一下。
平台
資料庫
mLabClone 專案下來看 ➡️ https://github.com/louis70109/Twitch-Bot.git
首先把.env.sample改成 .env，並將對應的Messenger、LINE以及Twtich key 放置對應的位置
跨平台含本地總共會有三個:
Console 是 bottender 的特色之一，可以在終端機上直接測試 Bot 的行為，會先用此模式先測試路由的回覆是否正常。
接著要讓同樣的 Action 可以導到 Messenger 以及 LINE，bottender 提供了可以設計針對特定平台處理 Action，如下:
import { platform } from 'bottender/router';
export default async function App(): Promise<void> {
return await router([
platform('line', LineAction),
platform('messenger', MessengerAction),
]);
}
透過platform來把特定平台的訊息到打對應的 Action (如 LineAction、MessengerAction)，在傳遞 Action 過程中會有一個 context 的變數，裡頭會有底層幫忙整理好的參數:
ConsoleContext {
...
_session: {
_id: 5e08a45c719a1335aeae39bc,
id: 'console:1',
_state: {},
lastActivity: 1578743328620,
platform: 'console',
user: { id: '1', name: 'you', _updatedAt: '2019-12-29T13:04:25.633Z' }
},
...
}
_session 裡有個 platform 的參數，只要判斷這參數就能知道訊息是來自哪個平台，而user則是被正規化完後的使用者資訊 (這兩個參數為目前為止我最常用的參數)
由於長期使用 LINE flex message 的 button template (參考)，這按鈕事件可以設定按鈕上的文字並設定按下去回覆的字串。
而 Messenger 的按鈕就跟人家不一樣了(參考)！他沒有 LINE 的這個事件，差不多的事件只有 postback，在路由上就得特別處理這個事件，為了讓跨平台所使用的內容要統一，在訊息進 router 時就要處理掉:
import { messenger } from 'bottender/router';
import { withProps } from 'bottender';
async function LineAction(context): Promise<void> {
return await router([
...
text(/^[f|F]ind\s*(?<topic>.*)$/, searchGame)
...
]);
}
async function MessengerAction(context): Promise<void> {
const payload = context.event?.postback?.payload;
return await router([
...
messenger.postback(
withProps(searchGame, { match: { groups: { topic: payload } } })
)
...
]);
}
這邊找到 bottender 官方文件中函式專門在處理 Messenger 的 postback 事件，並搭配withProps來幫忙把參數 postback 收到的參數傳進對應 Action。
為什麼會要把傳入的參數設定成巢狀 object -> { match: { groups: { topic: payload }}}，因為在設計初期本是希望進來的內容都是從text傳進來，意指都是透過使用者打字進來，那 bottender 都會透過傳 match 參數進來(參考)，而解析完 Messenger 的 postback 時也得需要符合這樣的格式，因此就這樣設計，當然如果有更好的設計歡迎送 PR 🎉。
Twitch: 這裡我設定 userId 為 unique，針對每個平台有自己的 id，每個平台都可以綁定 twitch 帳號，進而去做相關操作。Game: 因為 Twitch 套件這部分是read only，因此我就在建立一個一樣的 model 來處理。Twich id 是全開放的，只要知道其他使用者的 id 就可以查詢某些功能(參考)，這邊我就使用查詢
追隨的功能。
這裡設計上只要屬於送出訊息相關的樣板(Flex、Genetic、Text)接放在此。
作者資訊(author) 以及 幫助我(help) 的相關在呼叫 twitch api 出來的資料有時候會大於 LINE 以及 Messenger 的樣板限制，因此所有計算服務都會放在這邊，剛好就搭上 Controller 的對應功能。
View最多人看得遊戲以及搜尋指定遊戲綁定以及查詢追隨基本上做到這如果之後要擴增Telegram或是Slack都可以很快速擴充，只要把相對只要把相對的 Action 加在 App.ts 就行了。
藉由這次也學到跨平台的機器人真的不好做，每家廠牌的行為都不一樣，所幸 bottender 已經處理大部分平台間的問題，接著我們只需要將欲輸出的內容處理好對應框架所提供的功能去回傳給使用者，讓整體的開發可以更專注在開發功能上並更有彈性。
歡迎各位幫我按個星星 ⭐️➡️ https://github.com/louis70109/Twitch-Bot
也一起支持開源專案 bottender⭐️➡️ https://github.com/Yoctol/bottender
為什麼會想玩這個呢，因為之前串了一隻介接 Twitch API 的聊天機器人，不過最近因為 API 似乎已經翻新了，所以那隻機器人暫時死亡了 😆，但是聊天機器人不限定只有在 facebook、LINE 通訊軟體上，因此就寫了這篇文章來紀錄一下使用過程。
Twitch Chatbot IRC 官方文件
要使用的朋友在 google 時可能會找到另一套，不過他也說請大家來用
tmi.js了ＸＤ
首先要先申請一個 OAUTH 的密鑰，網址在這邊
透過npm安裝tmi.js
npm i tmi.js
接著需要寫一個腳本透過IRC的方法來與 Twitch 的聊天室連結：
IRC（Internet Relay Chat）是一個位於應用層的協定。其主要用於群體聊天，但同樣也可以用於個人對個人的聊天。
bot.jsconst tmi = require('tmi.js');
const client = new tmi.Client({
options: { debug: true },
connection: {
reconnect: true,
secure: true,
},
identity: {
username: 'YOUR_NAME',
password: 'oauth:YOUR_KEY',
},
channels: ['yuniko0720'], // 想加入的聊天室
});
client.connect();
client.on('message', (channel, tags, message, self) => {
if (self) return;
if (message.toLowerCase() === '87') {
client.say(channel, `@${tags.username}, 你是第 N 個說 87!`);
}
});
username: 設定你的使用者名稱password: 申請的 oauth 放在這邊，格式皆是oauth:XXXXXchannels: 一般會進入自己的頻道，當然也可以去其他頻道identity: {
username: 'YOUR_NAME',
password: 'oauth:YOUR_KEY',
},
channels: ['yuniko0720'],
這部分則是開始監聽聊天室的內容，所有的範例連結皆在此。
client.on('message', (channel, tags, message, self) => {
if (self) return;
if (message.toLowerCase() === '87') {
client.say(channel, `@${tags.username}, 你是第 N 個說 87!`);
}
});
執行node bot.js會看到以下的畫面
其實這樣監聽看起來真的是讓我這個宅心噴發 🚀🚀，可以透過IRC收到聊天室訊息後看後續要怎麼處理，像有些實況主與觀眾的互動可能是輸入+1這樣的文字來獲得獎賞(抑或是互罵 🤣)，在很多情境下這樣用會讓觀眾除了跟實況主互動以外還有個對象能玩 👾。
而在這樣監聽下若人數很高之後其實可以收集到更多的資訊去做利用，也許想是開啟訂閱者模式後讓訂閱者輸入特定文字後將資訊傳入Google sheet之類的資料表，在做抽獎等活動性質的內容，對整個遊戲實況內容行銷都會是滿好與觀眾互動的方式～
大概就玩到這邊了，下次想到什麼應用再來說 😆
大家好，我是 Chatbot TW 的 NiJia
當產品開發完上線後難免會遇到可能是邏輯上的 Bug、例外錯誤或是想記錄使用上的錯誤，當沒有工具時都只能等錯誤出來時乖乖的去翻 Log 找問題，對於每次出錯要 Debug 的我就覺得很困擾 😭。
公司強者寫 APP 的同事他們都很開心的在使用 Crashlytics 幫他們將 APP 出問題時將錯誤訊息丟上去，看了實在時羨慕，但那們寫 Web 的朋友要怎麼辦！
最近就發現了Sentry這個玩意兒(應該是有段時間的產品了)，支援了幾乎支持現在市場上主流的各種框架以及語言，且串接上也都很簡單就能實現，文件也都清楚解釋每個 API 的功能如何使用，以下就來介紹如何使用它吧 😎
這邊顯示較常用的語言，還有支援很多其他種類的框架及語言
首先先到 https://sentry.io/welcome/ Get start
這邊可以整合了GitHub或者Azure DevOps兩種 OAuth 的登入方式
接著就照著步驟來囉！
選擇自己所使用的語言，這邊我使用 Flask(python) 框架來實作
接著官方會有個簡單的文件告訴你要如何實作這塊，這邊就先使用pip在本地安裝套件
pip install --upgrade "sentry-sdk[flask]==0.13.2"
若是使用雲端服務的話需要將
sentry-sdk[flask]==0.13.2放入 requirements.txt 中
將以下 init code 放入 api.py 裡，在 app = Flask(__name__) 之前
這邊我將 Sentry 的 DSN 放入 .env 裡，若有參考這部分的朋友需要注意環境變數的地方喔！
import sentry_sdk
from sentry_sdk.integrations.flask import FlaskIntegration
sentry_sdk.init(
dsn=os.environ.get('SENTRY_DSN'),
integrations=[FlaskIntegration()]
)
接著就開始丟錯誤上去看看狀態，我的專案上是串著 LINE Bot，功能只是當個應聲蟲，在這情況下只需要丟個貼圖給它就會出錯。
當錯誤丟出來之後原本監聽的紅色燈號就會打勾囉 ✅
Sentry 預設都會寄信通知，所以若有錯誤記得看信箱哦！
點進去後就可以很清楚的看到程式是錯在第幾行，寫到這有種莫名的感動，平常都是在 LOG 海裡找看看到底報錯在哪邊，終於有個地方能幫我接下來了 🎉
到這邊基本串接已經完成了，但身為免費導向的工程師怎麼能讓 5000/月 限制我！接下來就要去過濾一下來的錯誤內容，若不是系統造成的錯誤就不上傳。
我選擇判斷 Log 達到Waring或是Internal就回報，並照著官方的指示新增以下內容:
import sentry_sdk
from sentry_sdk.integrations.flask import FlaskIntegration
+ import logging
+ from http.client import HTTPException
+ from sentry_sdk.integrations.logging import LoggingIntegration
+ def strip_sensitive_data(event, hint):
+ if "exc_info" in hint:
+ instance = hint['exc_info'][1]
+ if isinstance(instance, HTTPException) and instance.code < 500:
+ return None
+ return event
+ sentry_logging = LoggingIntegration(
+ level=logging.INFO,
+ event_level=logging.WARNING
+ )
sentry_sdk.init(
dsn=os.environ.get('SENTRY_DSN'),
+ before_send=strip_sensitive_data,
+ integrations=[FlaskIntegration(), sentry_logging]
)
strip_sensitive_data: 過濾來自 Http 的 Exception 錯誤碼是否大於500，否則不回傳。sentry_logging: 使用 SDK 的 LoggingIntegration 來定義 log 回傳事件時的層級到哪層才上傳錯誤訊息，這邊我設定Waring等級，並加入到 init 的 integrations 裡。此時不管你打上都會將訊息送上 Sentry：
logging.waring("i am waring")
logging.error("i am error")
或者是
raise InternalServerError("Hi Error")
或者！！自己手殘讓程式崩潰也會送通知
到這基本上已經完成串接完成並能過濾錯誤訊息，接下來則為將服務串至 Slack 上。
首先來到Settings按下Integrations會看到以下畫面，並安裝一下Slack
接著就要跟 Slack 連動囉
連動完成後再按下configure來設定以下內容
到了Alerts頁面後就開始設定以下內容囉，這部分參考官方文件
可以指定透過哪個group去傳送至哪個tag，我就直接送到預設的#general
測試就直接送出貼圖來讓 bot 報錯，結果就收到key的錯誤啦～
最後就能透過sls deploy將專案部署到 AWS 上，透過這次的紀錄對 Sentry SDK 運作在框架上的問題更加了解，同時也找到了一個不僅可以紀錄錯誤還能通知我錯誤訊息的地方，可以在第一時間直接進去分析 log，若完成了可以直接在 slack 上按Reslove來完成這個 issue。
本來有在考慮要串接LINE Notify，不過看著 Sentry 對 Slack 的整合比較好，也就放棄了這個念頭了 🤣，但串接哪個平台其實就看公司的需求，Sentry 一樣可以透過 webhook 將錯誤訊息傳至 Server。
此外它一樣可以整合Github、GitLab、Azure DevOps...等等，若錯誤處理好的話可以讓 Sentry 幫你送 Issue 上去，不僅整個超炫砲 😎，若是 open source 的專案也可以大家一起去修這個問題，真的是一舉兩得啊！！！