Blockly - 來自Google的可視化程式設計工具

Google Blockly 是一款基于Web的、開源的、可視化程式編輯器。你可以通過拖拽

塊

的形式快速建構程式，而這些所拖拽的每個

塊

就是組成程式的基本單元。可視化程式設計完成，Blockly 直接支援 JavaScript、Python、PHP、Lua、Dart 語言源碼的導出。此外，還可以将 Blockly 編輯器快速內建到Web、Android或iOS環境中。

因近期參與一個機器人項目，可視化程式設計是項目需求之一。故以Web版本（HTML 和 JavaScrip）為例，整理一下 Blockly 的使用方法及各功能點。

1. Blockly 介紹
   • 1.1 建構Blockly應用
   • 1.2 Blockly與其它方案的比較
2. 使用 Blockly
   • 2.1 概述
   • 2.2 擷取源碼
   • 2.3 注入 Blockly
   • 2.4 配置
   • 2.5 代碼生成
   • 2.6 “塊”的導入、導出
   • 2.7 雲存儲

1. Blockly 介紹

Blockly 是一個向Web或Andorid／iOS應用添加可視化代碼編輯器的庫，Blockly使用互相聯鎖的、圖形化的塊來表示代碼中的概念，如：如變量、邏輯表達式、循環等。這樣，使用者就可以應用程式設計原理，而不必擔心具體的文法、或指令行。

1.1 建構Blockly應用

對于使用者來說，Blockly 隻是用更直覺的可視化的方式來生成代碼。而對于開發都而言，Blockly隻是一個文本框，其包含了文法正确的、使用者生成的代碼。

Blockly可以将“塊”導出為代碼，其支援以下主流語言：

• JavaScript
• Python
• PHP
• Lua
• Dart

建構一個Blockly應用一般包括以下步驟：

1. 內建Blockly編輯器 - 最簡單的Blockly編輯器包含了一個“工具箱”來存儲的塊（block）類型，和一個用于安裝塊的“工作區”。詳細內建方法請參考使用 Blockly，或官方文檔Web和Android
2. 建立應用塊 - 內建Blockly後，就需要建立一些使用者代碼塊，并将其添加到Blockly“工具箱”。建立自定義塊參考官方文檔Create Custom Blocks Overview
3. 建構應用的其餘部分 - Blockly隻是解決一代碼生成的部分，而應用的核心是如果使用代碼，這部分還需要開發者自行實作

1.2 Blockly與其它方案的比較

Blockly 正在被越來越多可視化程式設計環境所使用。使用Blockly做為可視化程式設計方案具體有以下幾點優勢：

• 代碼可導出 - 使用者可基于“塊”提取出通用程式設計語言，并可平滑過渡到基于文本的程式設計。
• 開源 - Blockly 開放所有源碼，你可以複制、修改、并将其應用到你的網站或Andorid等應用中
• 可擴充 - 你可以按需要調整 Blockly，包括根據你的API添加新自定義“塊”、移不需要的塊和功能等。
• 高可用 - Blockly 不是玩具，你可以用它來實作複雜的程式設計任務
• 國際化 - Blockly 已被翻譯40+種語言

盡管有以上優勢，但 Blockly 不可能成為所有應用的解決方案。以下是一些其它可視化程式設計方案，可按自己需要選用：

• Scratch Blocks: MIT設計和實作的一個Blockly代碼庫，Scratch Blocks提供了一個簡化的程式設計模型，非常适合于初學者
• Droplet:支援Pencil Code的圖形化程式設計編輯器，它的顯著特點是能夠從代碼轉換成塊。
• Snap:一個從無到有的圖形化程式設計語言，它不是一個庫，而是一個內建執行環境的完整應用

2. 使用 Blockly

接下來，我們基于

HTML

和

JavaScript

，來介紹将Blockly做為代碼編輯器內建到Web應用中的過程。除Web應用外，Blockly還可以內建到Android或iOS應用中，詳細請參考官方文檔：

• Get Started-Android
• Get Started-iOS

2.1 概述

Blockly 被設計的可以很容易地安裝到你的Web應用中。使用者可以拖動“塊”，而Blockly通過“塊”生成代碼，而應用無需為生成代碼做任何事情。對應用來說 Blockly 僅是一個使用者指定類型語言（JavaScript, Python, PHP, Lua, Dart 或其它）的文本輸入框。

Blockly 是一個完全用戶端應用，它無需服務端的任何支援（除非你要使用雲存儲等服務端功能），且沒有第三方的依賴（除非你想重新編譯核心），一切都是開源的。

2.2 擷取源碼

Blockly 源碼托管在 GitHub，可以通過 GitHub 下載下傳或線上檢視源碼：

• 下載下傳Zip包
• 下載下傳Tar包
• GitHub線上檢視

下載下傳源碼并解壓後，可以在浏覽器打開

demos/fixed/index.html

檔案，驗證 Blockly 的塊是否可以拖動等。

2.3 注入 Blockly

安裝 Blockly 并驗證其可用後，就可以引入 Blockly。如，将 Blockly 在Web頁面的一個固定尺寸的

div

：

• 固定尺寸的 Blockly

更進階的用法可以讓 Blockly 調整大小，以填滿頁面：

• 可調尺寸的 Blockly

2.4 配置

上面的示例的

Blockly.inject

行中，第二個參數是一個鍵/值對字典。其用于配置Blockly，可用的配置項有：

• collapse

   - boolean。允許“塊”折疊或展開。如果工具箱有類别，預設為

  true

  ；其它情況為

  false

• comments

   - boolean。允許“塊”有注釋。如果工具箱有類别，預設為

  true

  ；其它情況為

  false

• css

   - boolean。如果設定

  false

  ，則不注入 CSS；預設為

  true

• disable

   - boolean。使“塊”不可用。如果工具箱有類别，預設為

  true

  ；其它情況為

  false

• grid

   - object。配置一個網格，使塊可以捕獲到。見Grid

• horizontalLayout

   - boolean。設定

  true

  則工具箱使用水準布局；

  false

  則使用垂直布局。預設為

  false

• maxBlocks

   - number。最大可建立的“塊”數量。預設為

  Infinity

• media

   - string。Blockly 媒體檔案目錄路徑。預設為

  "https://blockly-demo.appspot.com/static/media/"

• oneBasedIndex

   - boolean。設定為

  true

  則字元串操作索引會從

  1

  開始；

  false

  則從 開始。預設為

  true

• readOnly

   - boolean。設定為

  true

  ，則禁止使用者編輯。影響“工具箱”和“垃圾桶”。預設為

  false

• rtl

   - boolean。設定為

  true

  ，則鏡像化編輯器。預設為

  false

  。見RTL Demo

• scrollbars

   - boolean。設定工作區是否可滾動。如果工具箱有類别，預設為

  true

  ；其它情況為

  false

• sounds

   - boolean。設定為

  false

  ，則點選或删除時不會播放聲音。預設為

  true

• toolbox

   - XML節點或string。使用者可用“分類”和“塊”的結構樹。

• toolboxPosition

   - string。設定為

  start

  ，則工具箱在上部（水準顯示時）或左則（垂直顯示時）或右則（垂直LTR顯示時）。設定為

  end

  ，則在相對僧。預設為

  start

• trashcan

   - boolean。顯示或隐藏“垃圾桶”。如果工具箱有類别，預設為

  true

  ；其它情況為

  false

• zoom

   - object。工作區縮放配置。見Zoom

在以上配置中，最重要的選項是

toolbox

。它是一個XML節點樹，用于指定工具箱中有哪些可用的“塊”、塊如何分布、及是否有類别。

• 更多資訊參考工具箱配置

另外，除 Blockly 的預設“塊”外，定義塊需要通過調用你Web應用的API來建構。

• 更多資訊參考建立自定義塊

2.5 代碼生成

Blockly 是程式設計語言，也就不能“運作” Blockly 程式。但是你可以将 Blockly 轉為使用者所需要的JavaScript、Python、PHP、Dart或其它語言

• 更多資訊參考代碼生成

2.6 “塊”的導入、導出

如果你需要将“塊”導出，以在其它應用中使用或在以後還原。可以調用以下XML：

var xml = Blockly.Xml.workspaceToDom(workspace);
var xml_text = Blockly.Xml.domToText(xml);      

調用後，會生成一個最小化的包含使用者“塊”的XML。如果想使導出的XML更可讀，那麼可以使用

Blockly.Xml.domToPrettyText

來代替上面方法。

恢複己導出的XML，像下面這樣即可：

var xml = Blockly.Xml.textToDom(xml_text);
Blockly.Xml.domToWorkspace(xml, workspace);      

2.7 雲存儲

Blockly 帶有一個可選的雲存儲功能。它允許使用者儲存、加載、共享和釋出程式。如果你的項目是在雲端托管，那麼你可以利用此服務的優勢。

• 更多資訊參考雲存儲