CodeGenerator 子類別、JSON codelab、DSL/硬體指令
Blockly 內建 5 種語言生成器，每個都是「語言通用規則 + 一組積木生成器」：
| 語言 | import 方式 | 適用 |
|---|---|---|
| JavaScript ES5 | blockly/javascript | 瀏覽器/Node.js |
| Python 3 | blockly/python | 教學、資料、後端 |
| Lua 5.1 | blockly/lua | 遊戲引擎、嵌入式 |
| Dart 2 | blockly/dart | Flutter/App |
| PHP 7 | blockly/php | 網頁後端 |
forBlock['type'] 生成器。內建積木已備齊，自訂積木需自己補。Blockly 用在： MakeCode → 輸出 JavaScript + MicroPython App Inventor → 輸出 .aia（內部 JSON） 自製 IoT 工具 → 輸出 JSON 設定檔給韌體 機器人教學 → 輸出「前進/右轉/角度」指令序列
官方 codelab 以「JSON 語言生成器」示範：積木拼成巢狀 JSON 物件。
import {CodeGenerator} from 'blockly';
import {javascriptGenerator} from 'blockly/javascript';
class JsonGenerator extends CodeGenerator {
constructor() {
super('JSON'); // 名稱
this.isInitialized = false; // 後續 init() 中初始化
}
// 可覆寫語言通用規則，例如縮排
// this.INDENT = ' ';
}
const jsonGenerator = new JsonGenerator();
// 註冊積木生成器
jsonGenerator.forBlock['json_setting'] = function(block, generator) {
const key = block.getFieldValue('KEY');
const value = generator.valueToCode(block, 'VALUE', 0);
return '\n "' + key + '": ' + value + ',';
};
// 積木的 dropdown 存的是語言中立值
options: [['不等於', 'NOT_EQUAL'], ['大於', 'GREATER']]
// 目標語言是 JavaScript → 對照表
const OP = {NOT_EQUAL: '!==', GREATER: '>'};
const op = OP[block.getFieldValue('OPERATOR')]; // '!=='
// 目標語言是 C → 另一張表
const OP_C = {NOT_EQUAL: '!=', GREATER: '>'};
const opC = OP_C[block.getFieldValue('OPERATOR')]; // '!='
// 同一塊積木，不同生成器 → 不同語言！
目標：使用者拼「溫度警報」積木 → 輸出韌體能讀的 JSON
積木：alarm_when (SENSOR dropdown) (THRESHOLD number) (ACTION dropdown)
JsonGenerator.forBlock['alarm_when'] = function(block, generator) {
const sensor = block.getFieldValue('SENSOR'); // 'temperature'
const action = block.getFieldValue('ACTION'); // 'sound'
const threshold = generator.valueToCode(block, 'THRESHOLD', 0);
return '{\n "sensor": "' + sensor + '",\n "threshold": ' +
threshold + ',\n "action": "' + action + '"\n}';
};
// 輸出：
// {
// "sensor": "temperature",
// "threshold": 40,
// "action": "sound"
// }
// 韌體拿到 JSON → 直接套用設定！這就是「積木 → 你要的格式」。