Blockly

Blockly
原作者	Neil Fraser、Quynh Neutron、Ellen Spertus、Mark Friedman
開發者	Google、麻省理工學院
首次發布	2012年5月，12年前
目前版本	11.1.1（2024年6月12日；穩定版本）;
原始碼庫	github.com/google/blockly;
程式語言	JavaScript
平台	網頁瀏覽器
檔案大小	150 KB
語言	50種語言
	語言列表 English
類型	函式庫
許可協定	Apache許可證2.0版;
網站	developers.google.com/blockly/

Blockly 是一款執行在網頁客戶端的 JavaScript 庫，目的是用來打造以積木塊為基礎，附帶編輯器的視覺化程式設計語言。它是一項由谷歌根據 Apache2.0 許可的開放原始碼專案。常見被應用在網頁瀏覽器中，視覺上與 Scratch 差不多。Blockly 也可於 Android 和 iOS 中執行，但無法獲得網頁瀏覽器的全部特性。

Blockly 是使用能在網頁上拖拉並相互連接的視覺化方塊，使得程式的撰寫更加容易，並且可以生成對應的 JavaScript，Python，PHP 或 Dart 等原始碼。它也可以客製化產生任何含有文字的電腦語言。^[2]

歷史

Blockly 的發展始於 2011 年夏天，首次是在 2012 年的 Maker Faire 公開發布。Blockly 最初是為了替代 App Inventor 的 OpenBlocks 所設計的。^[3] Neil Fraser 負責啟動這個計劃，並且與 Quynh Neutron、Ellen Spertus 以及 Mark Friedman 一同為主要貢獻者。

使用者介面

Blockly 編輯器的預設使用者介面是由工具箱（toolbox）、工作區（workspace），工具箱內有可用的程式方塊，使用者可從"工具箱"中拖拽方塊，並且在工作區進行排列和組合。預設情況下，工作區還包括一個縮放圖示和一個用來刪除程式方塊的垃圾桶。^[4] 特別的是，這個編輯器允許程式方塊被開發者啟用或是限制某些功能。

訂製化

Blockly 包括一組通用功能的程式方塊，但可以通過訂製化以增加更多的程式方塊。新的程式方塊需要一組定義方塊的資料以及方塊邏輯的程式碼產生器。方塊定義資料決定了方塊的外觀（使用者介面）而產生器負責產生被翻譯對象的程式碼。方塊定義與程式碼產生器可以被放在 Javascript 中，或者可以利用 Block Factory，這是一種用來產生新的方塊的工具，其原理是利用方塊來產生新方塊的相關資料；讓新增的方塊更加容易。

應用

Blockly 被使用在一些著名的專案中，其中包括：

麻省理工學院的 App Inventor，用來創造應用程式。^[5]
Blockly Games 是一套教育性質的電腦遊戲，教導程式設計的概念，如迴圈與條件分支。^[6]^[7]
Code.org 教入門級的程式設計，已經有數以百萬計的學生參與到他們的 Hour of Code 計劃中了。^[8]
來自 Code For Life 的 Rapid Router，教導小學生程式設計的概念。^[9]
RoboBlockly，一款以網頁為操作基底的機器人類比環境，用來教導程式設計與數學。
Verge3D 利用 Blockly 作為 WebGL 的指令碼環境 (被稱為拼圖)。^[10]
Wonder Workshop，用在控制他們的 Dot and Dash 教育機器人。^[11]

功能

基於網頁為操作基底來使用 SVG，而不是使用 Flash
可完全客戶端執行的 JavaScript
支援主要的網路瀏覽器包括：Chrome， Firefox，Safari，Opera，IE
支援行動載具，如安卓以及 iOS
支援許多程式設計架構，包括變數，函式，陣列等
支援最小型別檢查，是一種弱型別的程式語言
訂製化方塊擴充容易。藉由使用 Block Factory 讓 Blockly 打造 Blockly
可生成乾淨的代碼^[12]
可單步執行代碼以進行追蹤和除錯^[13]
已經翻譯50種以上的語言^[14]
支援從左到右或者從右到左的文字顯示 ^[15]

參考文獻

^ Release 11.1.1. 2024年6月12日 [2024年6月20日].
^ Google's Blockly Teaches You to Create Apps. NBC Bay Area. [2018-02-02]. （原始內容存檔於2018-08-13）.
^ Google Groups. Groups.google.com. [16 January 2018]. （原始內容存檔於2019-05-31）.
^ Google Blockly - A Graphical Language with a Difference. I-programmer. [2018-02-02]. （原始內容存檔於2018-02-04）.
^ MIT App Inventor 2. MIT. [2018-02-02]. （原始內容存檔於2016-04-25）.
^ Google Introduces Kids to Coding Through Blockly Games Project. EWeek. ^{[失效連結]}
^ Blockly: Maze Archives - BrainPOP Educators. BrainPop. [2018-02-02]. （原始內容存檔於2015-04-23）.
^ Translate Code.org. Code.org. [2018-02-02]. （原始內容存檔於2014-12-23）.
^ Rapid Router. Ocado Technology. [2018-02-02]. （原始內容存檔於2018-01-18）.
^ Verge3D 1.0.2 Brings Instant Web Publishing, New Puzzles and More!. Soft8Soft. [2018-02-02]. （原始內容存檔於2018-01-25）.
^ Wonder Workshop Blockly. Wonder Workshop. [2018-02-02]. （原始內容存檔於2018-03-17）.
^ Blockly Demo. Blockly-demo.appspot.com. [16 January 2018]. （原始內容存檔於2018-01-17）.
^ Blockly Demo: JS Interpreter. Blockly-demo.appspot.com. [16 January 2018]. （原始內容存檔於2018-01-17）.
^ Localisation statistics for the Blockly core module. Translatewiki.net. [16 January 2018].
^ Blockly Demo: RTL. Blockly-demo.appspot.com. [16 January 2018]. （原始內容存檔於2018-01-17）.

外部連結

官方網站（頁面存檔備份，存於網際網路檔案館）

[wikidata-d6509492e14379a5d563c60f075f212f18b9fa49-v3-1] Release 11.1.1. 2024年6月12日 [2024年6月20日].

[2] Google's Blockly Teaches You to Create Apps. NBC Bay Area. [2018-02-02]. （原始內容存檔於2018-08-13）.

[3] Google Groups. Groups.google.com. [16 January 2018]. （原始內容存檔於2019-05-31）.

[4] Google Blockly - A Graphical Language with a Difference. I-programmer. [2018-02-02]. （原始內容存檔於2018-02-04）.

[5] MIT App Inventor 2. MIT. [2018-02-02]. （原始內容存檔於2016-04-25）.

[6] Google Introduces Kids to Coding Through Blockly Games Project. EWeek. ^{[失效連結]}

[7] Blockly: Maze Archives - BrainPOP Educators. BrainPop. [2018-02-02]. （原始內容存檔於2015-04-23）.

[8] Translate Code.org. Code.org. [2018-02-02]. （原始內容存檔於2014-12-23）.

[9] Rapid Router. Ocado Technology. [2018-02-02]. （原始內容存檔於2018-01-18）.

[10] Verge3D 1.0.2 Brings Instant Web Publishing, New Puzzles and More!. Soft8Soft. [2018-02-02]. （原始內容存檔於2018-01-25）.

[11] Wonder Workshop Blockly. Wonder Workshop. [2018-02-02]. （原始內容存檔於2018-03-17）.

[12] Blockly Demo. Blockly-demo.appspot.com. [16 January 2018]. （原始內容存檔於2018-01-17）.

[13] Blockly Demo: JS Interpreter. Blockly-demo.appspot.com. [16 January 2018]. （原始內容存檔於2018-01-17）.

[14] Localisation statistics for the Blockly core module. Translatewiki.net. [16 January 2018].

[15] Blockly Demo: RTL. Blockly-demo.appspot.com. [16 January 2018]. （原始內容存檔於2018-01-17）.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]