什么是blockly？

blockly是google發(fā)布的可視化編程工具，是一個(gè)基于web技術(shù)構(gòu)建的庫片仿；blockly的目的是幫助客戶創(chuàng)建app，使得用戶（app的使用者）編程就像搭積木一樣的有趣尤辱、容易上手舷嗡，大名鼎鼎的scratch就是一款使用類似技術(shù)的少兒編程工具未蝌。blockly有幾個(gè)特點(diǎn)：

1. 它是純粹的javascript庫捆交。
2. 它是100%面對(duì)客戶端的疫蔓，沒有任何服務(wù)端的依賴。
3. 支持各種主流的瀏覽器：Chrome, Firefox, Safari, Opera, and IE结借。
4. 高度可定制和可擴(kuò)展筐摘。

如果把blockly看作一個(gè)黑盒，它的輸入就是用戶拖放的代碼塊的組合，輸出就是翻譯出的JavaScript/python/PHP/Lua/Dart代碼蓄拣。

blockly能做什么扬虚？

近期工作的主要任務(wù)是針對(duì)公司的自動(dòng)化測(cè)試框架進(jìn)行改造，目前我司自動(dòng)化測(cè)試就是使用python+selenium的方式進(jìn)行自動(dòng)化測(cè)試球恤，測(cè)試人員需要使用原生的python代碼進(jìn)行測(cè)試用例的編寫辜昵，對(duì)編程技能要求較高，我希望通過引入blockly為測(cè)試人員提供一個(gè)可視化的咽斧、搭建積木式的編寫測(cè)試用例的GUI接口堪置，降低自動(dòng)化測(cè)試的上手門檻。

blockly上手示例

前提條件：需要對(duì)HTML张惹、CSS舀锨、JavaScript有基本的了解

google官方提供的上手示例教程，這個(gè)示例是通過blockly創(chuàng)建一個(gè)簡(jiǎn)單的創(chuàng)造音樂的app宛逗，首先下載如下示例代碼：

git clone https://github.com/google/blockly-samples.git

本示例代碼路徑如下：

getting-started-codelab

• starter-code：為示例的初始代碼坎匿；
• complete-code：為示例完成后的代碼，如果自己編寫期間遇到卡殼的地方雷激，可以和官方提供的完成代碼進(jìn)行對(duì)照替蔬。

每個(gè)目錄都包含同樣的目錄和文件：

• scripts/main.js - app的主邏輯代碼
• music_maker.js - 一個(gè)小型的用來播放聲音的庫
• sounds/ - 聲音文件
• styles/ - CSS樣式文件
• index.html - 首頁

瀏覽器打開starter-code/index.html，顯示如下界面（如果首次打開不能完整顯示屎暇，可能是網(wǎng)絡(luò)原因承桥，嘗試刷新瀏覽器試試）

starter-code首頁

編輯模式：

點(diǎn)擊edit進(jìn)行編輯模式，按照提示點(diǎn)擊下方的任意數(shù)字進(jìn)行代碼編輯

編輯模式

點(diǎn)擊任意一個(gè)數(shù)字之后根悼，將顯示一篇空白區(qū)域凶异，這里就是我們需要使用blockly進(jìn)行編碼的地方

點(diǎn)擊數(shù)字進(jìn)行代碼編輯

編輯index.html，在如下兩行script代碼之前增加一行代碼挤巡，引入blockly庫剩彬，

<script src="https://unpkg.com/blockly"></script>   <!-- 這一行是增加的代碼 -->
<script src="scripts/music_maker.js"></script>
<script src="scripts/main.js"></script>

blockly將引入四個(gè)模塊：

• Blockly core: 主要的核心代碼，主要定義了block UI及邏輯
• Built-in block definitions: 常用的積木塊定義如循環(huán), 邏輯, 數(shù)據(jù), 和字符串操作
• The JavaScript generator: 將積木塊生成JavaScript代碼
• English language files: 積木塊的提示語言使用英語

創(chuàng)建blockly工作區(qū)：

工作區(qū)包括代碼塊編輯區(qū)和工具箱兩部分

blocky工作區(qū)

編輯index.html在id="blocklyDiv"的div元素中增加如下xml結(jié)構(gòu)：

<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
  });

現(xiàn)在刷新瀏覽器襟衰，點(diǎn)擊edit進(jìn)入編輯模式贴铜，點(diǎn)擊任意數(shù)字粪摘，可以發(fā)現(xiàn)顯示了blockly工具去，工具箱有一個(gè)代碼塊

toolbox工具箱有一個(gè)代碼塊

創(chuàng)建定制的代碼塊

本示例是一個(gè)創(chuàng)建音樂的app绍坝，我們需要?jiǎng)?chuàng)建一個(gè)能夠播放聲音的代碼塊徘意，通過下拉菜單的方式選擇不同的聲音文件。

scripts目錄下創(chuàng)建一個(gè)js文件轩褐，命名為sound_blocks.js椎咧，并在index.html首頁中引入該js文件

<script src="https://unpkg.com/blockly"></script>
<script src="scripts/music_maker.js"></script>
<script src="scripts/sound_blocks.js"></script>   <!--這是增加的代碼行-->
<script src="scripts/main.js"></script>

然后在sound_blocks.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頁面中才能顯示

<div id="blocklyDiv" style="height: 480px; width: 400px;">
    <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>
        <block type="play_sound"></block>   <!-- 這是新增加的代碼行 -->
    </xml>
  </div>

再次刷新瀏覽器，打開工具箱發(fā)現(xiàn)多了一個(gè)紅色的代碼塊勤讽，該代碼塊可以用來播放sounds目錄的聲音文件

play_sound代碼塊

保存/加載工作區(qū)

現(xiàn)在構(gòu)建好了需要的代碼塊蟋座，已經(jīng)可以在代碼編輯區(qū)進(jìn)行編寫了，接下來需要做的是保存和加載功能脚牍。

編輯scripts/main.js向臀，save方法中增加如下代碼，改代碼實(shí)現(xiàn)用戶點(diǎn)擊保存是將工作區(qū)的代碼塊保存為xml格式

function save(button) {
    // 增加的代碼行
    button.blocklyXml = Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace());
  }

保存成功后诸狭，下次進(jìn)入點(diǎn)擊數(shù)字進(jìn)入工作區(qū)還需要將工作區(qū)的代碼塊加載出來券膀，繼續(xù)編輯main.js,增加如下方法

// 增加的代碼 --- start
function loadWorkspace(button) {
    let workspace = Blockly.getMainWorkspace();
    workspace.clear();
    if (button.blocklyXml) {
      Blockly.Xml.domToWorkspace(button.blocklyXml, workspace);
    }
  }
// 增加的代碼 --- end

function enableBlocklyMode(e) {
    document.body.setAttribute('mode', 'blockly');
    currentButton = e.target;
    loadWorkspace(currentButton);   // 這一行是增加的代碼
  }

現(xiàn)在嘗試刷新瀏覽器，點(diǎn)擊edit進(jìn)入編輯模式驯遇，點(diǎn)擊指定數(shù)字進(jìn)行代碼塊編輯后點(diǎn)擊save保存芹彬，然后再次返回后工作區(qū)仍然保留了上次編輯的代碼塊。

image

保存工作區(qū)

生成JavaScript代碼

編輯scripts/sound_blocks.js叉庐，增加如下代碼

Blockly.JavaScript['play_sound'] = function(block) {
  let value = '\'' + block.getFieldValue('VALUE') + '\'';
  return 'MusicMaker.queueSound(' + value + ');\n';
};

這段代碼的會(huì)將play_sound代碼塊生成如下js代碼"MusicMaker.queueSound('Sounds/c4.m4a');"（注：這里展示的代碼以C4選項(xiàng)為例）舒帮。

運(yùn)行生成的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
}

現(xiàn)在music maker的app就全部完成陡叠，重新刷新瀏覽器会前，點(diǎn)擊edit進(jìn)入編輯模式，然后點(diǎn)擊不同的數(shù)字進(jìn)行編程匾竿，可以根據(jù)代碼塊的提示設(shè)置播放什么聲音瓦宜，播放的次數(shù)，編輯完成后點(diǎn)擊Done就進(jìn)入運(yùn)行模式岭妖，此時(shí)點(diǎn)擊相應(yīng)的數(shù)字就會(huì)播放音樂了临庇，還是蠻好玩的，快試試吧昵慌。