Posted on | Edited on   |   561 words, 1 min. read

最近相當常使用Redux Saga，簡單紀錄一下。

比較常見用來處理Redux非同步操作的Middleware有redux-thunk, redux-saga, redux-observable等。之前參與開發的Firefox Devtools使用的是修改版的redux-thunk。我在其中一個個人專案中也有試過redux-observable。使用Rxjs的感覺，是整個過去的開發觀念又被扭成另一個形狀😅。因為整套開發的觀念不同，當後續想要修改時常常遇到一些問題。目前則多使用redux-saga來處理非同步相關問題。

基本Redux State運作

先簡單回顧一下基本的Redux State運作。Redux統一儲存所有網頁前端的狀態(State)。只能透過發送Action來通知狀態的改變，並透過Reducer修改當前的狀態。

graph LR Reducer{Reducer} -.-> State(State) Disptch>Dispatch] -.-> |Action| Reducer

基本的Redux僅支援同步的操作。若想支援非同步操作（promise, async, API等）需要透過加裝Middleware來處理。Middleware的功用，是改變收到Action後的處理流程。Redux Saga即是其中一種功能強大的Middleware。

Redux Saga運作

Redux Saga的運作模型，起始自收到Action。Saga透過takeLatest或take監聽想處理的Action，並呼叫對應的generator function。在generator function中，可以用yield語句來完成各種非同步操作。

例如使用select語句來從目前的State中取得資料，使用call語句來呼叫API，用put語句來將新的Action傳回Redux處理。

graph LR TakeLatest>TakeLatest] -.-> |Action| Saga Saga -->|call| API State -->|select| Saga Put>Put] -.-> |Action| Reducer Saga --> Put

一段簡單的範例：

function* handleAction(action) {
  // get state from state.auth
  const auth = yield select((state) => state.auth)
  // async get data. fetchData is the async function.
  const { result } = yield call((auth) => fetchData(auth))
  // dispatch action. saveData is the action creator.
  yield put(actions.saveData(result))
}

export default function* rootSaga() {
  yield takeLatest('ACTION', handleAction)
}

當然Redux-saga還有提供一些其他的功能，但其實Redux-saga就是這麼簡單。使用Redux-saga可以很好地運用原有的非同步處理觀念，要將React Component中相應的非同步函式搬出來也不像Redux-observable那樣需要全部改寫。

參考資料

Posted on | Edited on   |   900 words, 1 min. read

先記錄下來手邊使用的工具，才有機會從繁雜中歸納出簡單的使用規則。

20111年時紀錄了一次當時的個人工具箱，2016年開始再次紀錄自己手邊工具箱的改變2 3 4🤹。 今年初工作上有了變化，也將家中的環境與筆記工具包含進配置列表中。

主要裝備

  • 💻Dell XPS 13 (8550), Windows 10, i7 4GHz x4, 8GB RAM, 13.3" LCD，作業系統：Elementary OS + Windows
  • 📱One Plus 3, Android, 6GB RAM, 5.5" AMOLED
  • 🎧Sony WI-1000 降噪耳機

🏠家

  • 🖥24" LCD
  • ⌨️羅技K375s鍵盤
  • 🖱羅技M720滑鼠
  • 📦Synology NAS: 電影，影集，照片，資料備份
  • 💡Yeelight LED燈泡
  • 🕶Oculus Go: 看影片
  • 備用 💻Macbook Air 13", 2012年版
  • 備用 📺Chromecast 一代
  • 備用 🔈Echodot
  • 備用 Respberry Pi 3
  • 備用 📙Kindle Voyage

和上一季相比的改變：

主力用💻Dell XPS 13"，家中添購了一台🖥24" LCD接筆電，搭配3轉1 HDMI Hub，接🎮Nintendo Switch，可滿足影音相關需求。HDMI設備通電時會自動切換到對應的設備。

還是比較少坐在LCD前，因此Chromecast用很少，另購入Oculus Go看影片/Youtube。

graph LR LCD -- DVI --- Notebook LCD -- HDMI --- hub{HDMI Hub} hub --- ns[Nintendo Switch] hub --- Chromecast hub --- rpi[Respberry Pi]

⌨️羅技K375s鍵盤與🖱羅技M720滑鼠，兩者特點都是同時支援使用USB或藍牙控制設備，讓我可以用一套鍵鼠控制多種設備。

🕸網站工具

設計工具

開發工具

  • 編輯器：VS Code
    • Blank Line at the End
    • Diff Tool
    • EditorConfig for VSCode
    • Go
    • Guides: more guide line
    • GitLens: more git info
    • Python
    • Settings Sync
    • solidity
    • Trailing Spaces
  • 版本控制：git
  • 套件管理：apt (Linux), nvm, yarn, Chocolatey(windows)

若需要在Windows上開發，能用Chocolatey處理的就用Chocolatey處理。

娛樂工具

  • 🎮Nintendo Switch
  • 🕶Oculus Go
  • 📺Chromecast (少用)
  • 🎮Steam / vlc (少用)

因為攜帶便利，現在主要只玩NS上的遊戲。Steam上看到喜歡的遊戲，也盡量等NS上出了再買。

📱Android 手機應用

  • 瀏覽器：Firefox for Android
  • 網頁更新通知：Web Alert
  • 閱讀：Feedly, Readmoo, Pocket
  • 信箱：Inbox, Gmail
  • 地圖：Google地圖
  • 記事：Keep
  • 內建相機, 內建時鐘
  • 相簿：內建相簿, Google相簿, Dropbox
  • 社交：Facebook, LINE, Twitter
  • 待辦事項：Todoist
  • 密碼管理：Bitwarden
  • 記帳: Toshl
  • 線上影片：Youtube
  • 音樂：豆瓣FM, Spotify
  • 有聲書：Audible, Podcast Addict
  • 健康：小米運動, Pokemon Go, 7Min workout

工具

  • 2步驟認證：Duo Mobile
  • 旅遊：Google翻譯, TripAdvisor
  • 影片播放：MX Player, DS video
  • 記錄看書狀況：Readmoo分享書
  • 線上學習：Udemy, EggHead.io
  • IFTTT
  • 💳街口支付

筆記工具

  • B5方格筆記本
  • Storage.it 筆記本封套
  • 搭配5隻筆
    • Pilot FRIXION BALL Slim 0.38藍色筆桿 + 0.5 魔擦筆筆芯
    • Pilot HI-TEC-C coleto 雙色筆桿 + 0.38 紅/綠筆芯
    • Pilot FRIXION light 水藍色魔擦螢光筆
    • Pilot FRIXION COLORS 褐, 黑色魔擦筆

Reference

Posted on | Edited on   |   1.3k words, 1 min. read

Imgur

可以透過QRCode加入營養成份LINE bot。

Update: 謝謝大家熱烈試用「營養成份bot」,因為測試帳號已達50人的上限，所以將遷移到新的無人數上限的「營養成份2 bot」，請點選新的「營養成份bot」邀請連結 https://line.me/R/ti/p/%40hoz2085q

歡迎分享新連結給可能需要的朋友，讓大家隨手查營養，吃得更健康。 (目前的bot仍然可以使用，但不再更新維護)

食物，運動，與身體平衡

最近在看代謝型態飲食全書，裡面提到吃下的東西與運動，與體內的平衡和慢性病的產生有相當密切的關係。要讓身體重新回復到平衡的健康狀態，需要選擇適合自己的食物（營養素的比例）並搭配適當運動（有氧 + 無氧）與充足睡眠。

graph LR 食物 --> 身體吸收 身體吸收 -- 影響 --> 體內系統的平衡 運動 --> 強化身體 強化身體 -- 影響 --> 體內系統的平衡 睡眠 --> 修補身體 修補身體 -- 影響 --> 體內系統的平衡

其中我們所選擇的一天三餐與餐間的飲食習慣，則是潛移默化地影響我們的健康。 當我們持續吃不好的食物或錯誤的營養素比例，則讓體內的系統處在有的養分過多，有的養分不足的持續不平衡的狀態。這些不平衡讓各種體內各種系統無法正常工作。例如一餐吃進過多的精製糖份可能造成血液中的糖份快速升高，胰臟必須快速分泌大量胰島素來協助細胞消化糖份，當這樣不平衡的狀態維持久了，就會造成胰臟的過度負擔。當體內的代謝開始失常時，我們可以先觀察到一些亞健康症狀，累積久了就成了各種慢性病。因此選擇適合自己的食物是相當重要的。

graph LR 吃錯食物 --> 身體吸收 身體吸收 -- 影響 --> 體內系統不平衡 體內系統不平衡 --> 代謝失常 代謝失常 --> 亞健康症狀 亞健康症狀 --> 慢性病

Bot 怎麼做成的

要選擇適合自己的食物時，我除了先做了測驗了解個人飲食中三大營養素(碳水化合物、蛋白質、脂肪)的參考比例，也想知道每樣吃下的東西大致的營養成份。

我想到如果有各種食材的營養成份資料，就可以做成聊天機器人或App以供隨時查詢。我搜尋了一下，發現政府資料開放平台上有公開的「食品營養成分資料集」，提供csv, json, xml等格式下載。

下載開啟資料後，發現原始的JSON格式還是蠻…有趣的。

下載的JSON格式資料長這樣：

[{"食品分類":"魚貝類"},{"資料類別":"樣品基本資料"},{"整合編號":"J11101"},{"樣品名稱":"鮸魚"},{"俗名":"鮸仔,敏魚,鮸,敏仔魚"},{"樣品英文名稱":"Brown croaker; Mi-iuy croaker"}

…對於這種JSON存法只能…呵呵。

重新下載了csv檔，這次看到的格式總算正常了點，但解開後的csv檔案有接近50MB大小。寫了個腳本過濾掉不需要的資料，並轉換成需要的格式後，輸出總共不到500KB，這樣的大小就算放到App裡也還合適。

這次使用bottender框架來連接到LINE1。由於LINE需要HTTPS連線，開發的過程中使用了ngrok來讓LINE可以連到開發中的電腦，免去另外架設公開網站的麻煩。

此外還使用了Fuse.js這個模糊搜尋函式庫，在搜尋的時候只要打部份內容，就可以搜出相關的條目。

整個bot的軟體架構如下

graph LR subgraph 資料處理 公開資料(csv) -- 轉換/過濾 --> JSON end subgraph Node JSON --> fuse.js fuse.js --> bottender bottender --> ngrok-cli end ngrok-cli --> ngrok ngrok --> ngrok-cli ngrok --> LINE LINE --> ngrok ngrok-cli --> bottender

開發中遇到的小坑

  • developer channel or free channel

剛開始申請用 developer channel ，因為所有API都可以使用，開發起來會比較順暢。但稍後就遇到了Bot只能加50人好友的限制。

  • Push Message vs Reply Message

developer channel可以用Push Message API(也就是bottender範例中接的sendText)。free channel的話不能使用Push Message API(context.sendText)，只能用Reply Message API。也就是不能推送訊息，但可以回覆使用者訊息（至多五筆）。查了一下文件2，雖然需要稍微改變一點寫法(context.reply)，但還算容易解決。

現在上線讓大家使用的已是改用Reply Message API的版本。

我可以加這個Bot嗎?

可以透過掃描QRCode加入營養成份LINE bot。

或點選以下連結

加入好友

因為使用免費的Host，不能保證bot永遠在線，若第一次沒回應，可以稍等半分鐘後再試。

會不會 Open Source

目前程式還沒有好好整理，尚不打算開源。

參考資料