Scratch3 擴充套件開發​

最近應 s4a 社群許老師的邀請，在業餘時間研究了一下 Scratch 3，看看能做點什麼貢獻。

Scratch 3 是一套由麻省理工學院（MIT）發起，以兒童學習程式為目的所設計的視覺化編程軟體。Scratch 3 可使用堆疊積木塊的方式，來完成一般程式語言能完成的事情。

Scratch 3 除了程式語言的部分採用堆疊積木塊的方式，還提供了對應的整合的舞台，主角，並提供相對應的積木塊。你可以透過拖拉積木塊，直接控制這些主角在場景中的活動。

Scratch 3 的積木編程部分和我多年前玩過¹的 Blockly 很相似。實際上 Blockly / AppInventor 的靈感來源就是來自於 Scratch。

在 Scratch 3 版本中，也已經將 Blockly 整合進去，作為它提供程式積木的方式。

我做了 JSON 抓取資料並解析，和空污 LASS 的擴充套件。透過這些積木，學生可以從網路上抓取最新的空氣污染狀況，然後用 Scratch 3 上場景可愛的人物口中說出來，或是視覺化的顯示結果。

例如透過 JSON 積木，連線到http://ifconfig.me/all.json取得對外的 IP

或是透過填入設備代號，連到任一 LASS 設備，取得當地 PM2.5，溫度等資訊

由於 Scratch 3 尚未完成第三方擴充套件的分享架構，因此這兩個擴充套件都放在 scratch3-internet² 專案中，想嘗試的人也可以直接連到³使用。

scratch3-internet² 專案的特色，是簡化了擴充套件開發前的設定工作，並很容易部署到 Github 網頁上。

技術上，scratch3-internet² 專案用了 git submodule 來抓取 Scratch 3 的相關專案，並透過 patch 的方式將自行開發的擴充套件加入其中，最後包裝成自己的版本³。透過這種方式最小化維護成本。

擴充套件需修改的部分如下（可在²中找到更詳細的文件）：

要啟動一個適合擴充套件開發的 scratch3 專案，只要照以下步驟即可：

1. fork scratch3-internet 專案
2. clonse repo git clone https://github.com/[your name]/scratch3-internet.git
3. get and setup related projects npm run setup
4. start the development server npm run start

要部署到自己的 Github 專案網頁，只需

1. 編譯網站，npm run build，編譯好的檔案在 scratch-gui/build
2. 部署到 Github 專案網站的 gh-pages 分支中 npm run deploy，即可透過 https://[yourname].github.io 存取。

參考資料​

• [1] 以前做的 Blockly + Arduino 專案 BlocklyDuino
• [2] https://github.com/gasolin/scratch3-internet
• [3] Scratch 3 editor http://gasolin.idv.tw/scratch3-internet/
• [4] Scratch 3 內建積木說明 https://en.scratch-wiki.info/wiki/Blocks
• [5] 如何定義 Blockly 積木 https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks
• [6] Scratch 3.0 学习笔记 https://github.com/Micircle/scratch3.0-note
• [7] How to Develop Your Own Block for Scratch 3.0 https://medium.com/@hiroyuki.osaki/how-to-develop-your-own-block-for-scratch-3-0-1b5892026421
• [8] 开发一个 Scratch3 Extension https://wiki.huangyang.me/post/2019-03-13-scratch3-extension
• [9] Scratch 3.0 Extensions https://github.com/LLK/scratch-vm/blob/develop/docs/extensions.md

我的第二螢幕 (I)​

• [I] 我的第二螢幕 - Chromecast
• [II][我的第二螢幕 - Ｇoogle相簿 + 資訊面版](/make/second-screen-2)

去年我買了一台 24 吋的桌上螢幕。原本構想的用途很美好，但就實際效果而言，其實並不常運用到。

想到最近比較常用到平板的功能，是拿來看 Youtube 或在 Youtube 中播音樂。有時候在手機上播，有時候是選了「稍後觀看」後再到平板上播。「從手機傳到另外一個螢幕播放」，這不就是 Chromecast 的用途嘛？

可惜前陣子已測試過，原來手上的 Chromecast 一代已經無法連上家中的網路。 那麼，是不是可以用放在一旁生灰塵的 Raspberry Pi 3 來代替哩？（不行就正好買 Chromecast 2019 或 Raspberry Pi 4）

簡單查一下，只要在手機上安裝 Raspicast 並在樹莓派上安裝omxiv，就可以投影 Youtube，照片等內容到螢幕上。就現在的需求來說很夠用了。

先簡單這樣，試試看接下來這第二螢幕的開機率是否有提升吧。

第二螢幕有沒有搞頭？​

Raspberry Pi 這樣的硬體，要拿來做主要電腦還是有些勉強。 但如果手上有一台，作為 Chromecast 代替品還是堪用的。

而除了替代 Chromecast 功能，作為工作環境中的第二塊螢幕的 OS，它還能透過安裝不同的軟體，為我帶來什麼幫助呢？

如果要設計一套適合第二螢幕使用的 OS，應該具備什麼樣的功能哩？

參考資料​

• [1] https://www.instructables.com/id/Raspberry-Pi-As-Chromecast-Alternative-Raspicast/
• [2] http://pcmac.biz/RaspberryPi_Chromecast.html

我的第一個 Google 助理服務「歷史上的今天」上架了，已列在 Google 助理服務 (中文) 列表中。

https://assistant.google.com/services/a/uid/0000005a1a233d97

相對於 Google 助理服務 (英文) 列表，中文的 Google 助理服務還不多，簡單分享一下開發心得。

如何使用​

這個 Google 助理服務的功能很單純，即從維基百科中隨機選出一條歷史上的今天所發生過的事。

要使用這個 Google 助理服務，可開啟 Google 助理，詢問「我想問歷史上的今天」，Google 助理就會啟動「歷史上的今天」服務。

怎麼做 Google 助理服務​

「歷史上的今天」資料取自維基百科，也希望任何感興趣的人都能來參與維護，因此選擇開源。專案頁面在 https://github.com/gasolin/todayinhistory

我所說的 Google 助理服務其實英文叫「Google Action」，可以用在各種 Google 助理 (Assistant) 支援的場景中，如手機，手錶，Chrome Book，Google Home 等。

歷史上的今天 這個 Google 助理服務由 https://dialogflow.com/ 託管，使用Cloud Function來回應使用者。Dialogflow與Cloud Function都是 Google 旗下的服務。

Dialogflow提供了各種語音 / 文字聊天機器人 (Chat bot) 的一站式訓練 / 開發 / 部署環境。除了 Google 助理服務，也可以在上面使用Dialogflow API 同時支援 LINE，Facebook Messenger 等聊天機器人。Cloud Function也被整合在 Dialogflow 中，讓開發者可以簡單地呼叫一段腳本執行命令，而不需要維護完整的網頁伺服器端程式。

開發歷史上的今天的過程中，只要在Dialogflow網站上開發，在 Actions on Google 中測試與發佈即可，整個流程甚至不需要下載資料到電腦中。

如果對程式本身，或對每天可能會收到的回應感興趣，專案頁面在 https://github.com/gasolin/todayinhistory ，歡迎造訪按 Star，也歡迎前往 https://assistant.google.com/services/a/uid/0000005a1a233d97 留下好評。

前陣子過年，終於得以抽出的一些時間，可以來嘗試一些不同的東西。

花了幾天查看 Typescript 程式碼，改寫了個可用繁 / 簡中文語法寫 JS 的轉譯器 LingaScript

使用它做了個「中文輸進去，程式出得來，開發者發大財」的中文程式影片範例，歡迎大家開心試用。

如何做到的​

這個專案脫胎自過去開發周蟒(Python + 中文語法) 的經驗，並參考了 CTS (Typescript + 中文語法) 原始碼。

微軟主導開發的 Typescript 提供了分析 Typescript 語法，並可輸出成 Javascript 的轉譯器 (src/compiler)。更棒的是因為 Visual Studio 的開發工具中整合了 Typescript，而微軟為了讓 Visual Studio 中的所有編譯結果都有本地化語言輸出，也在 Typescript 中支援了本地化語言的命令行工具和錯誤輸出。

因此， ‵LingaScript‵ 目前所做的，是讓支援的中文語法可分析為對應的 symbol，並預設將命令行工具設成對應的本地化語言。如此一來就可以得到較完整的使用本地化語言的開發體驗。

因為看到 CTS 改版不易的問題，我使用自己開發，基於 Google 提供的 diff-match-patch 包裝的 file-patch 工具，來對修改後的程式碼和 Typescript 原始碼做 diff/patch。‵LingaScript‵ 專案中保存了修改後的 compiler 相關檔案和 diff 檔。透過 patch 的方式更容易相容版本升級時的改動。

具體可以查看相關用到的命令 https://github.com/gasolin/lingascript/blob/master/package.json#L14

其他想法​

‵LingaScript‵ 目前的架構不僅止於能支援繁簡中文語法，只要加上對應的關鍵字檔案，也可以很快地支援其他語種，讓開發者或講師得以用熟悉的語言來介紹並執行 Javascript 相容的程式。

如果有興趣的話，歡迎前往 https://github.com/gasolin/lingascript 討論或提出想法。

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

2011¹年時紀錄了一次當時的個人工具箱，2016 年開始再次紀錄自己手邊工具箱的改變，後來漸漸變成了常規文章 ^{2 3} [^4 ][^5 ]⁶🤹。

主要裝備​

• 💻 Dell XPS 13 (8550), i7 4GHz x4, 8GB RAM, 13.3" LCD，作業系統：Elementary OS + Windows

• 📱 Zenfone 5, Android 9(Pie), Snapdragon 636, 6.2" Super IPS

• 🎧 Jabra Elite 65t (備用：Sony WI-1000 降噪耳機):

🚶‍♂️ 外出攜帶​

• 💻 Dell XPS 13 (8550)
• 📱 Zenfone 5
• 🔌 小米 45W 電源
• 🖱 羅技 M720 滑鼠
• 🎧 Jabra Elite 65t
• USB C/Micro USB 雙頭轉接線

🏠 家​

• 🔌 小米 45W 電源
• 🖱羅技 M720 滑鼠
• 📦 Synology NAS: 電影，影集，照片，資料備份
• 備用：🖥️ 24" LCD
• 備用：⌨️ 羅技 K375s 鍵盤
• 備用：💡 Yeelight LED 燈泡
• 備用：🕶️ Oculus Go: 看影片
• 備用 💻 Macbook Air 13", 2012 年版
• 備用 📙 Kindle Voyage

和上一季相比的改變：​

主力用💻 Dell XPS 13" 搭配🖱羅技 M720 滑鼠。現在幾乎不坐在 LCD 前。同時，因為筆電儲存 256GB 分作兩半其實不是很夠用的緣故，作業系統也只留下了 Elementary OS。

現在的工作型態比較常在家或外出到定點工作，和上一季最大的改變就是使用🔌 小米 45W 電源來取代 XPS 的電源線和 Switch 的電源線。小米 45W 電源可為💻 筆電與 🎮Nintendo Switch 供電，省下帶兩大塊電源線的麻煩。再加帶很久以前買的 5000mAh 小米電源和 USB C/Micro USB 雙頭轉接線，可解決大部分手機 / 耳機的充電問題。

考慮買一顆紫米 10 15000mAh，這樣一顆就可為筆電 / 遊戲機 / 手機 / 耳機，這樣平時出門都不用帶電源線了。(但其實平常也不會帶遊戲機，換 15000mAh 似乎要帶的更重 XD)

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

🕸️ 網站工具​

• 🕸️ 主要瀏覽器：Firefox
• 瀏覽器插件
  • 顏文字查詢：Emoji cheatsheet
  • 翻譯：ImTranslator
  • 拼字訂正：Grammarly
  • 密碼管理：Bitwarden
  • 擋廣告：uBlock Origin
• 瀏覽器常駐分頁
  • ✉️ GMail, Inbox
  • ✅待辦事項：Todoist (付費)
  • Slack
• 👥 主要社交網站：Facebook、Twitter
• 📝 記事：Google keep, Google Doc
• 💾 網路硬碟：Dropbox, 主要用作同步照片
• 🔑密碼管理：Bitwarden
• 📰 新聞聚合：Feedly
• 📘 閱讀紀錄：Readmoo 分享書
• 🎥 看電影記錄：豆瓣
• 🗂️ 個人網站：個人網站, Github
• 🗂️ 個人履歷：Linkedin
• 🔗 IFTTT 自動化生活紀錄 2018
• 📺 Youtube
• 👛 電子錢包MyEtherWallet, Ledger Nano S

設計工具​

• 螢幕動畫錄製： Peek(Linux), 備用 Recordit(Mac)
• 心智圖：Coggle, 備用 XMind

開發工具​

• 編輯器：VS Code
  • Blank Line at the End
  • Diff Tool
  • EditorConfig for VSCode
  • Guides: more guide line
  • GitLens: more git info
  • Settings Sync
  • solidity
  • Trailing Spaces
• 版本控制：git
• 套件管理：apt (Linux), nvm, yarn, Chocolatey(windows)
• 🛎️ 專注工具：🍅 Rush (蕃茄鐘)

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

娛樂工具​

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

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

📱 Android 手機應用​

• 🕸️ 瀏覽器：Brave
• 🔔 網頁更新通知：Web Alert
• 📰 閱讀：Feedly, Readmoo, Pocket
• ✉️ 信箱：Inbox, Gmail
• 🗺️ 地圖：Google 地圖
• 記事：Keep
• 內建相機，內建時鐘
• 相簿：內建相簿，Google 相簿，Dropbox
• 社交：Facebook, LINE, Twitter (網頁版)
• 待辦事項：Todoist
• 🔐 密碼管理：Bitwarden，Duo Mobile（2 步驟認證）
• 📺 線上影片：Youtube
• 音樂：Spotify
• 有聲書：Audible, Podcast Addict
• 🚶‍♂️ 健康：小米運動，Pokemon Go, 7Min workout
• 🕰️ 時間紀錄： SaveMyTime

手機瀏覽器改使用 Brave。記帳改使用實體筆記本紀錄。完整的實體筆記配置

其他工具​

• 旅遊：Google 翻譯，TripAdvisor
• 影片播放：MX Player, DS video
• 記錄看書狀況：Readmoo 分享書
• 線上學習：Udemy, EggHead.io (網頁版)
• IFTTT
• 💳街口支付

Reference​

• ¹ 個人工具箱 2011
• ² 個人工具箱 2016
• ³ 個人工具箱 2017
• ⁴ 個人工具箱 2017 九月
• ⁵ 個人工具箱 2018 二月
• ⁶ 個人工具箱 2018 六月