01 我的第一個Web:Bit積木

(2020/08/19)

每次上完法蘭斯的課，回來一定要馬上做筆記，不然過兩天就會忘記了，上課的內容實在太多、太精彩了，所以回家要再好好演練一下，順便記錄，免得下次又忘了！！

一、上課講義

• https://github.com/fustyles/Workshop 下的2020.8.19_blockly.zip

二、Web:Bit自製積木架構

• 在WebBit的package.nw 下

• • 架構如下:

• • • 匯出toolbox.xml檔，存到blockly資料夾下，把原本的覆蓋掉

四、修改檔案內容

• 修改myBlocks下的blockly.json (自訂積木佈署檔)

1. {

2. "types": ["square_area", "circle_area"],

3. "category": "catPlus",

4. "scripts": [

5. "blockly/blocks.js",

6. "blockly/javascript.js"

7. ],

8. "dependencies": [

9. "myBlocks.js"

10. ],

11. "msg": "blockly/msg",

12. "blocksMsg": "blockly/msg/blocks",

13. "toolbox": "blockly/toolbox.xml"

14. }

• 只要修改第2行的內容即可，改成自己的積木名稱，如果有更多積木就再增加

• 修改myBlocks\blockly\blocks.js

  • 原本程式

    1. Blockly.Blocks['square_area'] = {

    2. init: function() {

    3. this.appendDummyInput()

    4. .appendField("四邊形面積");

    5. this.appendValueInput("NAME1")

    6. .setCheck("Number")

    7. .appendField("長度");

    8. this.appendValueInput("NAME2")

    9. .setCheck("Number")

    10. .appendField("寛度");

    11. this.setInputsInline(true);

    12. this.setOutput(true, "Number");

    13. this.setColour(290);

    14. this.setTooltip("");

    15. this.setHelpUrl("");

    16. }

    17. };

    18. Blockly.Blocks['circle_area'] = {

    19. init: function() {

    20. this.appendDummyInput()

    21. .appendField("圓形面積");

    22. this.appendValueInput("NAME3")

    23. .setCheck("Number")

    24. .appendField("半徑");

    25. this.setInputsInline(true);

    26. this.setOutput(true, "Number");

    27. this.setColour(290);

    28. this.setTooltip("");

    29. this.setHelpUrl("");

    30. }

    31. };

  • 修改成動態語系文字

• • 1. Blockly.Blocks['square_area'] = {

    2. init: function() {

    3. this.appendDummyInput()

    4. .appendField(Blockly.Msg.square_area);

    5. this.appendValueInput("NAME1")

    6. .setCheck("Number")

    7. .appendField(Blockly.Msg.square_length);

    8. this.appendValueInput("NAME2")

    9. .setCheck("Number")

    10. .appendField(Blockly.Msg.square_width);

    11. this.setInputsInline(true);

    12. this.setOutput(true, "Number");

    13. this.setColour(290);

    14. this.setTooltip("");

    15. this.setHelpUrl("");

    16. }

    17. };

    18. Blockly.Blocks['circle_area'] = {

    19. init: function() {

    20. this.appendDummyInput()

    21. .appendField(Blockly.Msg.circle_area);

    22. this.appendValueInput("NAME3")

    23. .setCheck("Number")

    24. .appendField(Blockly.Msg.circle_radius);

    25. this.setInputsInline(true);

    26. this.setOutput(true, "Number");

    27. this.setColour(290);

    28. this.setTooltip("");

    29. this.setHelpUrl("");

    30. }

    31. };

• • 這與blockly/msg/blocks下的語系內容有關 (積木內的文字)

• 修改myBlocks\blockly\javascript.js (點上方【程式碼】所顯示的內容)

  • 原本程式

    1. Blockly.JavaScript['square_area'] = function(block) {

       1. var value_name1 = Blockly.JavaScript.valueToCode(block, 'NAME1', Blockly.JavaScript.ORDER_ATOMIC);

       2. var value_name2 = Blockly.JavaScript.valueToCode(block, 'NAME2', Blockly.JavaScript.ORDER_ATOMIC);

       3. // TODO: Assemble JavaScript into code variable.

       4. var code = '...';

       5. // TODO: Change ORDER_NONE to the correct strength.

       6. return [code, Blockly.JavaScript.ORDER_NONE];

       7. };

       8. Blockly.JavaScript['circle_area'] = function(block) {

       9. var value_name3 = Blockly.JavaScript.valueToCode(block, 'NAME3', Blockly.JavaScript.ORDER_ATOMIC);

       10. // TODO: Assemble JavaScript into code variable.

       11. var code = '...';

       12. // TODO: Change ORDER_NONE to the correct strength.

       13. return [code, Blockly.JavaScript.ORDER_NONE];

       14. };

  • 將面積的公式帶入，修改成以下

• • 1. Blockly.JavaScript['square_area'] = function(block) {

    2. var value_name1 = Blockly.JavaScript.valueToCode(block, 'NAME1', Blockly.JavaScript.ORDER_ATOMIC);

    3. var value_name2 = Blockly.JavaScript.valueToCode(block, 'NAME2', Blockly.JavaScript.ORDER_ATOMIC);

    4. // TODO: Assemble JavaScript into code variable.

    5. var code = value_name1 + ' * '+ value_name2;

    6. // TODO: Change ORDER_NONE to the correct strength.

    7. return [code, Blockly.JavaScript.ORDER_NONE];

    8. };

    9. Blockly.JavaScript['circle_area'] = function(block) {

    10. var value_name3 = Blockly.JavaScript.valueToCode(block, 'NAME3', Blockly.JavaScript.ORDER_ATOMIC);

    11. // TODO: Assemble JavaScript into code variable.

    12. var code = value_name3 + '*' + value_name3 + '*'+ 3.14;

    13. // TODO: Change ORDER_NONE to the correct strength.

    14. return [code, Blockly.JavaScript.ORDER_NONE];

    15. };

• • • 剛又經法蘭斯指導了一下，又把上面程式改的更好一點

• 修改myBlocks下的myBlocks.js

• • • 此程式為函式庫，因本積木沒有用到函式庫，因此此檔可以留白

• • 展示成果

• • • 移除積木