什麼是blockly？
blockly是google釋出的視覺化程式設計工具，是一個基於web技術構建的庫；blockly的目的是幫助客戶建立app，使得使用者（app的使用者）程式設計就像搭積木一樣的有趣、容易上手，大名鼎鼎的scratch就是一款使用類似技術的少兒程式設計工具。blockly有幾個特點：
它是純粹的javascript庫。它是100%面對客戶端的，沒有任何服務端的依賴。支援各種主流的瀏覽器：Chrome, Firefox, Safari, Opera, and IE。高度可定製和可擴充套件。如果把blockly看作一個黑盒，它的輸入就是使用者拖放的程式碼塊的組合，輸出就是翻譯出的JavaScript/python/PHP/Lua/Dart程式碼。
blockly能做什麼？
近期工作的主要任務是針對公司的自動化測試框架進行改造，目前我司自動化測試就是使用python+selenium的方式進行自動化測試，測試人員需要使用原生的python程式碼進行測試用例的編寫，對程式設計技能要求較高，我希望透過引入blockly為測試人員提供一個視覺化的、搭建積木式的編寫測試用例的GUI介面，降低自動化測試的上手門檻。
blockly上手示例
前提條件：需要對HTML、CSS、JavaScript有基本的瞭解
google官方提供的上手示例教程，這個示例是透過blockly建立一個簡單的創造音樂的app，首先下載如下示例程式碼：git clone https://github.com/google/blockly-samples.git
本示例程式碼路徑如下：
getting-started-codelab
starter-code：為示例的初始程式碼；complete-code：為示例完成後的程式碼，如果自己編寫期間遇到卡殼的地方，可以和官方提供的完成程式碼進行對照。每個目錄都包含同樣的目錄和檔案：
scripts/main.js - app的主邏輯程式碼music_maker.js - 一個小型的用來播放聲音的庫sounds/ - 聲音檔案styles/ - CSS樣式檔案index.html - 首頁瀏覽器開啟starter-code/index.html，顯示如下介面（如果首次開啟不能完整顯示，可能是網路原因，嘗試重新整理瀏覽器試試）starter-code首頁
編輯模式：
編輯模式
Blockly core: 主要的核心程式碼，主要定義了block UI及邏輯Built-in block definitions: 常用的積木塊定義如迴圈, 邏輯, 資料, 和字串操作The JavaScript generator: 將積木塊生成JavaScript程式碼English language files: 積木塊的提示語言使用英語建立blockly工作區：工作區包括程式碼塊編輯區和工具箱兩部分
blocky工作區
編輯index.html在id="blocklyDiv"的div元素中增加如下xml結構：
<xml id="toolbox" style="display: none"> <block type="controls_repeat_ext"> <value name="TIMES"> <shadow type="math_number"> <field name="NUM">5</field> </shadow> </value> </block></xml>編輯scripts/main.js，在程式碼的最後新增如下程式碼
Blockly.inject('blocklyDiv', { toolbox: document.getElementById('toolbox'), scrollbars: false });現在重新整理瀏覽器，點選edit進入編輯模式，點選任意數字，可以發現顯示了blockly工具去，工具箱有一個程式碼塊
toolbox工具箱有一個程式碼塊
建立定製的程式碼塊本示例是一個建立音樂的app，我們需要建立一個能夠播放聲音的程式碼塊，透過下拉選單的方式選擇不同的聲音檔案。
scripts目錄下建立一個js檔案，命名為sound_blocks.js，並在index.html首頁中引入該js檔案
Blockly.defineBlocksWithJsonArray([ { "type": "play_sound", "message0": "Play %1", "args0": [ { "type": "field_dropdown", "name": "VALUE", "options": [ ["C4", "sounds/c4.m4a"], ["D4", "sounds/d4.m4a"], ["E4", "sounds/e4.m4a"], ["F4", "sounds/f4.m4a"], ["G4", "sounds/g4.m4a"], ["A5", "sounds/a5.m4a"], ["B5", "sounds/b5.m4a"], ["C5", "sounds/c5.m4a"] ] } ], "previousStatement": null, "nextStatement": null, "colour": 355 }]);以上js程式碼定義了型別為play_sound的程式碼塊，還需要把它加入到html頁面中才能顯示
play_sound程式碼塊
儲存/載入工作區現在構建好了需要的程式碼塊，已經可以在程式碼編輯區進行編寫了，接下來需要做的是儲存和載入功能。
function save(button) { // 增加的程式碼行 button.blocklyXml = Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()); }儲存成功後，下次進入點選數字進入工作區還需要將工作區的程式碼塊加載出來，繼續編輯main.js,增加如下方法
// 增加的程式碼 --- startfunction loadWorkspace(button) { let workspace = Blockly.getMainWorkspace(); workspace.clear(); if (button.blocklyXml) { Blockly.Xml.domToWorkspace(button.blocklyXml, workspace); } }// 增加的程式碼 --- endfunction enableBlocklyMode(e) { document.body.setAttribute('mode', 'blockly'); currentButton = e.target; loadWorkspace(currentButton); // 這一行是增加的程式碼 }現在嘗試重新整理瀏覽器，點選edit進入編輯模式，點選指定數字進行程式碼塊編輯後點擊save儲存，然後再次返回後工作區仍然保留了上次編輯的程式碼塊。
儲存工作區
生成JavaScript程式碼編輯scripts/sound_blocks.js，增加如下程式碼
Blockly.JavaScript['play_sound'] = function(block) { let value = '\'' + block.getFieldValue('VALUE') + '\''; return 'MusicMaker.queueSound(' + value + ');\n';};這段程式碼的會將play_sound程式碼塊生成如下js程式碼"MusicMaker.queueSound('Sounds/c4.m4a');"（注：這裡展示的程式碼以C4選項為例）。
執行生成的JavaScript程式碼編輯scripts/main.js，handlePlay方法中增加如下程式碼
function handlePlay(event) { // 增加的程式碼 -- start loadWorkspace(event.target); let code = Blockly.JavaScript.workspaceToCode(Blockly.getMainWorkspace()); code += 'MusicMaker.play();'; try { eval(code); } catch (error) { console.log(error); } // 增加的程式碼 -- end}現在music maker的app就全部完成，重新重新整理瀏覽器，點選edit進入編輯模式，然後點選不同的數字進行程式設計，可以根據程式碼塊的提示設定播放什麼聲音，播放的次數，編輯完成後點選Done就進入執行模式，此時點選相應的數字就會播放音樂了，還是蠻好玩的，快試試吧。