人們總是高估一年可以完成的事,卻低估十年能完成的事

0%

Scratch3 擴充套件開發

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

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

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

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

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

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

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

Imgur

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

Imgur

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

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

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

擴充套件需修改的部分如下(可在2中找到更詳細的文件):

graph TD
Scratch3 --- |UI| GUI
Scratch3 -.- |Blockly| blocks
Scratch3 --- |core parser| VM
VM --> src/extensions
subgraph Extensions
src/extensions -.- json[JSON blocks]
src/extensions -.- lass[LASS blocks]
end
GUI --- |Define extension cards| x[src/lib/libraries/extensions/index.jsx]
subgraph Extension Cards
x -.- j[JSON card]
x -.- l[LASS card]
end

要啟動一個適合擴充套件開發的 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 存取。

參考資料

我的第二螢幕(I)

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

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

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

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

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

第二螢幕有沒有搞頭?

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

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

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

參考資料

Imgur

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

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

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

如何使用

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

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

Imgur

怎麼做 Google 助理服務

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

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

歷史上的今天 這個 Google 助理服務由 https://dialogflow.com/ 託管,使用Cloud Function來回應使用者。DialogflowCloud 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,並預設將命令行工具設成對應的本地化語言。如此一來就可以得到較完整的使用本地化語言的開發體驗。

graph LR
   TypeScript -- 多語言關鍵字 --> LingaScript
   TypeScript -- 本地化命令行 --> LingaScript
   TypeScript -- 本地化錯誤回報 --> LingaScript

因為看到 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 討論或提出想法。