Google Blockly 是一款基於Web的、開源的、可視化程序編輯器。你可以通過拖拽塊的形式快速構建程序，而這些所拖拽的每個塊就是組成程序的基本單元。可視化編程完成，Blockly 直接支持 JavaScript、Python、PHP、Lua、Dart 語言源碼的導出。此外，還可以將 Blockly 編輯器快速集成到Web、Android或iOS環境中。
因近期參與一個機器人項目，可視化編程是項目需求之一。故以Web版本（HTML 和 JavaScrip）為例，整理一下 Blockly 的使用方法及各功能點。
- Blockly 介紹
- 1.1 構建Blockly應用
- 1.2 Blockly與其它方案的比較
- 使用 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應用一般包括以下步驟：
- 集成Blockly編輯器 - 最簡單的Blockly編輯器包含了一個“工具箱”來存儲的塊（block）類型，和一個用於安裝塊的“工作區”。詳細集成方法請參考使用 Blockly，或官方文檔Web和Android
- 創建應用塊 - 集成Blockly後，就需要創建一些用戶代碼塊，並將其添加到Blockly“工具箱”。創建自定義塊參考官方文檔Create Custom Blocks Overview
- 構建應用的其餘部分 - 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則從0開始。默認為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 帶有一個可選的雲存儲功能。它允許用戶保存、加載、共享和發佈程序。如果你的項目是在雲端託管，那麼你可以利用此服務的優勢。
- 更多信息參考雲存儲
閱讀更多 scratch少兒編程教程 的文章
