Skip to main content

· 8 min read

之前嘗試過組裝一些智能玩具，但能讓小朋友持續保持興趣遊玩的並不多。我發現這些玩具一旦需要編程時，多少還是需準備一台電腦。與大人共用電腦多有不便，因此不如就再利用每個人家中多出的 Raspberry Pi (?) 與生灰的電子設備，幫小朋友準備好所需的相關材料，協助他組一台精簡卻堪用的電腦吧。

使用的設備列表​

我參考的 BUILD（最近 Switch 上的暗黑破壞神 3 玩多了...）是KANO Computer Kit Touch套件，這是一套由專門售賣以 Raspberry Pi 為核心的教育用電腦提供商 KANO 製作的。現在整套特價在～$230 左右，相較其他的 STEM 教具，整套的價格相當合理。如果你人在美國，家中沒有冗餘的電腦設備或想追求更好的使用體驗，相當建議直接購買一套。

這邊是其他人的開箱影片與評測，介紹了使用到的硬體與作業系統

以下列出我有用到的設備列表，價格是當初印象裡購入各種設備時的價錢。

  • Raspberry Pi 主版
    • 建議使用 3B 或 3B+，速度上才接近可用的電腦
    • (Raspberry Pi 3B ~NT 1450)
  • 支援 HDMI 的螢幕
    • (手邊現有的 23 吋桌面螢幕～NT 4300)
    • (打算再購買 10 吋觸控螢幕～NT 3000)
  • 播音設備
    • 沒有喇叭的話，用手機附的耳機聽也行 (但為了小朋友聽力，要用耳機也建議用耳罩式或頭戴式)
    • (手機附的耳機，~NT 0)
    • (考慮弄個手機喇叭來接～NT 100)
  • 電源
    • 可用舊手機的 Micro USB 充電線與充電頭，或任何手邊的行動電源
    • (小米行動電源 5000 ~NT 300)
  • USB 鍵盤 / 滑鼠
    • 重用任何現有的鍵鼠，如果有觸控螢幕就不用準備滑鼠
    • (可以找到帶觸控版的鍵盤～NT600, 我是拿手邊羅技 Unifying 鍵盤 / 滑鼠。)
  • Micro SD 卡 >16GB
    • (32GB SD 卡～NT400)

準備記憶卡（作業系統）​

作業系統我的選擇並非常見的Raspbian，而是刷上「KANO」公司為他們販賣的套件提供的 KANO OS。KANO OS 作業系統與相關設備的說明書都有提供自由下載使用。

將 zip 檔下載下來後，將 Micro SD 卡放入轉接器並插入電腦，用任意映像檔燒錄軟體將系統燒錄進 SD 卡中備用。

組裝​

由於 Raspberry Pi 把組裝電腦時複雜的部份都簡化了，組裝起來非常簡單，即使是國小小朋友也能順利完成。

  • 將 Micro SD 記憶卡插入 Raspberry Pi (對低年級小朋友來說插卡的動作太精細了，可以先幫忙做)
  • 插上鍵盤 / 滑鼠用的 USB 接收器
  • 接上 Micro USB 與電源
  • 將 HDMI 線接到螢幕上

最後連接好的架構大概是這樣：

graph TD pi[Raspberry Pi] --HDMI-->S[螢幕] K[鍵盤] -- USB --> pi M[滑鼠] -- USB --> pi p((電源)) -- MicroUSB --- pi pi --> v[喇叭] m[記憶卡] -.- pi

上手體驗​

雖然手邊還沒有合用的觸控螢幕可試，但即使用滑鼠鍵盤操作，感覺 KANO OS 介面也很親和。從插上記憶卡，接上 Micro USB 初次開機開始，KANO OS 將整個電腦的啟動流程，變成了一段難忘的遊戲過程。

KANO OS 除了提供 Raspbian 中也有附的 Minecraft 等遊戲和各種教育應用，還提供了一套將電腦教學與各種小遊戲 / 程式整合成的像素 RPG。

使用者在電腦設備化成的地圖中行走，初次進入地點是在 SD 沙灘 (SD Beach)，可前往向量村（Vector Village），網路港 (Port Ether)，蟒蛇叢林 (Python Jungle) 等地，探索電腦世界的奧秘。

在 SD 沙灘上，馬上可以玩到PONG這個在電子遊戲歷史中，也具有非凡意義的經典遊戲。

走到向量村則是玩Make Art遊戲，可以用鍵盤輸入程式命令來繪圖。KANO 近期特別活動是畫骷髏頭 (Skull) 等萬聖節相關圖案，整個過程都可照著一個步驟一個步驟輸入的提示進行，相當友善。

到了蟒蛇叢林，則是從使用命令行開始玩起。透過輸入python snake命令來啟動文字版貪食蛇遊戲：過程中會提示使用者可以在輸入命令時加入一些參數，加入參數後遊戲的設定也會跟著調整，使用者可以在遊玩過程中學到命令行的用法，非常地高竿。

我在整個陪伴孩子使用的過程中，感覺就算大人玩起來，KANO OS 內容也相當豐富而有趣。KANO OS 做到了讓使用電腦充滿樂趣。非常推薦刷來試試，比起 Raspberry Pi 常搭配的 Raspbian 作業系統，KANO OS 包含更多的教學與引導，更適合入門人群與日常使用（缺點是沒中文介面，但也讓小朋友更有動力學英文）

其他心得​

如果和我一樣是羅技鍵盤 / 滑鼠，但是是分別購買的，其實有方法不需要在機器上插兩個 Unifying 接收器。只要到羅技網站下載Unifying 軟體到你常用的作業系統上，安裝後即可設定鍵盤 / 滑鼠共用同個 Unifying 接收器，設定完成後，將這個 Unifying 接收器插到 Raspberry Pi 上後開機，Raspberry Pi 也可以認得你的鍵盤 / 滑鼠。

Raspberry Pi 3B 所要求的 2.5A USB 電源其實並不容易找到，一般我用 1.5A 的充電頭也能運作。

Raspberry Pi 也支援 HDMI 聲音輸出，但需要另行設定。切換過去後，可能是因為同時要傳輸畫面與聲音，得消耗更多電源，開機容易出現Low Voltage Detected訊息，並導致無法正常開機。可以在開機畫面中按Shift鍵進入Recovery模式，將hdmi_drive=2(強制使用 HDMI 輸出聲音) 註解掉。

· 4 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 API --> |await|Saga State -.-> select>select] 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 state 與 Redux Saga 之間整體的呼叫關係。使用 Redux/Redux Saga 能將「從 UI 呼叫 -> 參看現有狀態來與 API 溝通 -> 根據取回值更新狀態 -> 更新 UI」這樣的複雜流程，整個簡化為單向的操作。

graph LR Reducer{Reducer} -.-> State(State) Disptch>Dispatch] -.- |Action| TakeLatest>TakeLatest] TakeLatest -.-> |Action| Saga Saga -->|call| API API --> |await|Saga State -.-> select>select] select --> Saga Put>Put] -.-> |Action| Reducer Saga --> Put

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

參考資料​

· 5 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​

· 7 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​

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

參考資料​

· 2 min read

I'm a happy Elementary OS user and use it as my default desktop OS (~95%) several month. There are some useful tweakings that help me live with the Linux desktop.

1. Package installer​

Elementary OS does not provide deb installer by default, need install manually:

sudo apt install gdebi
sudo apt install software-properties-common

And you can download ubuntu software center as well(optional).

2. Setup Fonts​

List system supported fonts

fc-list | cut -f2 -d: | sort -u

Setup fonts

gsettings set org.pantheon.terminal.settings font 'Roboto Mono'
gsettings set org.gnome.desktop.interface font-name 'Open Sans 9'
gsettings set org.gnome.desktop.interface document-font-name 'Open Sans 10'

If you like Fira code for coding font, you can follow https://github.com/tonsky/FiraCode/wiki/Linux-instructions#installing-with-a-package-manager to install it.

3. Pairing Bluetooth Mouse​

I can't use GUI Bluetooth manager to pair with bluetooth device, but these commandline works well for me.

$ bluetoothctl
$ agent on
$ default-agent
$ pairable on
$ scan on
$ devices (to see the devices and macs that you want to pair)
$ pair <dev mac>
$ trust <dev mac>
$ connect <dev mac>

4. Saving Power​

tlp is a good tool for auto power management

sudo add-apt-repository ppa:linrunner/tlp
sudo apt-get update
sudo apt-get install tlp
sudo tlp start

5. Auto adjust color temperature​

redshift is by far the great f.lux like app for linux.

$ sudo apt-get install redshift redshift-gtk
$ redshift-gtk

Then configue it as auto start in task bar.

6. Touchpad indicator​

Sometimes you may found the cursor is moving to the wrong place. Install Touchpad indicator solved this issue.

sudo add-apt-repository ppa:atareao/atareao
sudo apt-get update
sudo apt-get install touchpad-indicator

and Toggle Disable Touchpad on typing.

7. Dropbox icon​

Install Dropbox from its website, then configue to fix the missing icon.

8. Backup​

Install Timeshift for system backup. Its pretty easy to use via GUI.

sudo apt-add-repository -y ppa:teejee2008/ppa
sudo apt update
sudo apt install timeshift

參考資料​