塊的定義一般用json文件來表示，如下圖所示中由“_blocks”結尾的json文件。
當然，我們注意到了這點，那麼我們也要規範自己的命名方式，自定義塊文件以“_blocks”結尾
對於初次接觸塊文件的人來說，json的內容讓我們不明所以。
其實，我們大可不必強行理解它。因爲Google爲我們提供了圖形化編程工具Blockly Developer Tools來生成這些block、toolbox、workspace並且自動生成解析generator模板，非常方便。
打開如下圖所示：
接下來，我們來學習Blockly Developer Tools的使用方法
1.工作模式切換
如下三個選項卡用於切換工作模式：
Block Factory用於製造block塊
Block Exporter用於將製造好的block塊導出至文件
Workspace Factory用於製造toolbox以及workspace
2.使用Block Factory製作block塊
製作區同樣也是一個可視化模塊化編程區域，它同樣擁有Toolbox，左側的Input、Filed、Type、Colour就是分類
(Category)：
Input代表可輸入的塊，塊必須基於它而製造，它有三種類型：
value input：用於接收一些值
statement input：用於接收一些動作
dummy input：“空輸入”，它不接收輸入，可用於定義變量或聲明明某一動作等，如下是對ture的定義：
Field代表字段，返回一些諸如字符串、數字之類的值
Type代表類型，一般用於對value input接收的值的類型進行限定
Colour代表顏色，用於塊顏色的定義
認識基本塊：
name用於定義模塊的名稱
inputs僅用於接收input塊
第一下拉框用於設定input塊的展示樣式，包括自動、拓展顯示、行內顯示
第二下拉框用於設置塊的可連接方向
colour用於設置塊的顏色，顏色採用HSV(Hue-Saturation-Value )顏色空間定義，H代表色調，S代表飽和度，V代表明度，具體詳見https://baike.baidu.com/item/HSV/547122?fr=aladdin&fromid=12630604&fromtitle=HSV%E9%A2%9C%E8%89%B2%E7%A9%BA%E9%97%B4
如下以if else模塊爲例，我們就可以貫通上面所有的講述：
製作過程：
首先，if需要接收Boolean類型的參數，所以我們選擇value input,並設置type爲Boolean，加入文字顯示“if”
其次，if執行的語句我們需要用statement input來接收，並加入文字顯示“do”
再次，else部分無需任何輸入，我們使用dummy input，加入顯示文字“else”即可
最後，else執行的語句我們同樣用statement input來接收，並加入文字顯示“do”
點擊上方的保存，保存到Block Library中，下次打開網頁依然可以進行編輯
到這裏，你會發現預覽模塊和我們要做的樣子並不完全一樣，是的，我們還需要處理一些細節：
設置連接方式，這裏設置爲上下皆可連接：top+bottom connections
設置顏色，輸入或拖動色彩盤，設置爲345即可
至此，我們就完成了一個模塊的創造，我們在右側Block Definition中可以看到實時生成的代碼，我們將其複製到我們項目的塊定義文件中，並將此塊添加到toolbox對應的分類中，即可在App中顯示。
{
"type": "if_else",
"message0": "if %1 do %2 else %3 do %4",
"args0": [
{
"type": "input_value",
"name": "if_param",
"check": "Boolean"
},
{
"type": "input_statement",
"name": "if_do"
},
{
"type": "input_dummy"
},
{
"type": "input_statement",
"name": "else_do"
}
],
"previousStatement": null,
"nextStatement": null,
"colour": 345,
"tooltip": "",
"helpUrl": ""
}代碼的解析就依賴於右下角的Generator stub中生成的模板代碼，我們將其複製到我們項目的代碼解析文件中，進行鍼對行的修改，即可讓此模塊在App上轉換成對應代碼，如：
Blockly.JavaScript['if_else'] = function(block) {
var value_if_param = Blockly.JavaScript.valueToCode(block, 'if_param', Blockly.JavaScript.ORDER_ATOMIC);
var statements_if_do = Blockly.JavaScript.statementToCode(block, 'if_do');
var statements_else_do = Blockly.JavaScript.statementToCode(block, 'else_do');
var code = 'if('+value_if_param+') {\n'+statements_if_do+'} else {\n'+statements_else_do+'};\n';
return code;
};3.使用Block Exporter導出塊至文件
切換到Block Exporter，我們可以看到左邊會將我們在Block Library中創造的Block全部展示出來，勾選我們需要的Block，並設置文件名稱（需含拓展名），即可點擊Export按鈕進行導出塊定義文件與解析模板文件
4.使用Workspace Factory製作toolbox和workspace
切換到Block Exporter，我們通過中部幾個符號進行創建分類、刪除分類、上下移動分類。
創建分類後，可將左側toolbox中的模塊拖入其中，右側可實時預覽，製作完成後，可通過上方的Export按鈕進行導出
5.使用生成的文件
將以上生成的塊定義文件、代碼解析文件、Toolbox文件、workspace文件複製到我們項目的資產目錄中，在代碼中增加對這些文件的關聯（見第一篇文章）後即可使用
製作區同樣也是一個可視化模塊化編程區域，它同樣擁有Toolbox，左側的Input、Filed、Type、Colour就是分類
(Category)：
Input代表可輸入的塊，塊必須基於它而製造，它有三種類型：
value input：用於接收一些值
statement input：用於接收一些動作
dummy input：“空輸入”，它不接收輸入，可用於定義變量或聲明明某一動作等，如下是對ture的定義：
製作過程：
首先，if需要接收Boolean類型的參數，所以我們選擇value input,並設置type爲Boolean，加入文字顯示“if”
其次，if執行的語句我們需要用statement input來接收，並加入文字顯示“do”
再次，else部分無需任何輸入，我們使用dummy input，加入顯示文字“else”即可
最後，else執行的語句我們同樣用statement input來接收，並加入文字顯示“do”
點擊上方的保存，保存到Block Library中，下次打開網頁依然可以進行編輯
到這裏，你會發現預覽模塊和我們要做的樣子並不完全一樣，是的，我們還需要處理一些細節：
設置連接方式，這裏設置爲上下皆可連接：top+bottom connections
設置顏色，輸入或拖動色彩盤，設置爲345即可
至此，我們就完成了一個模塊的創造，我們在右側Block Definition中可以看到實時生成的代碼，我們將其複製到我們項目的塊定義文件中，並將此塊添加到toolbox對應的分類中，即可在App中顯示。