[Blockly] 3. blockly로 사용자 블록 제작 후 등록하기

가장 중요한 사용자 블록을 만드는 방법을 소개하겠습니다.

 

우선 blockly의 블록을 개발하기 전에

blockly가 어떤 방식으로 작동하는지 알아야겠죠?

 

blockly는 블록과 code를 따로 제작해 등록한 것을 

같은 type(쉽게 설명하면 ID? NAME?)으로 지어진 이름을 찾아

 

블록은 블록대로 만들어지고 실질적으로는 code를 통해 작동됩니다.

 

demos\index.html에 들어가보면 

다양한 demo들이 우리를 기다리고 있습니다.

여기서 Blockly Developer Tools에 들어갑니다.

 

왼쪽이 블럭 구조를 잡는 부분

 

Preview : 만들어진 블럭의 모양을 보여주는 부분

Block Definition : 블럭의 모양을 JSON, JS로 만들어준 부분

Generator stub : 블럭의 기능(코드)부분을 다른 언어로 보여주는 부분 

 

---

우선 저희는 가장 기본적인 콘솔 출력 블럭을 만들어보겠습니다.

type명을 Print_block으로 잡아주고

안에 들어오는 값이름을 print로 설정했습니다. 

text에 출력을 적어 Preview보시면 출력이라고 표시가되고

가장 마지막 type에 String,Number 두가지를 받을 수 있도록 설정했습니다.

 

밑에 inputs와 connections는 블럭의 모양과 상하연결을 위해 설정하는 부분이니 필요한것으로 직접 설정변경해가며 확인해보시면 이해가 빠르실겁니다.

 

이제 Block코드와 Gen코드를 따로 JS로 만들어주는 작업을진행합니다.

 

---

Mycode.js (Block코드)

Blockly.Blocks['print_block'] = {
  init: function() {
    this.appendValueInput("print")
        .setCheck(["String", "Number"])
        .appendField("출력");
    this.setColour(230);
 this.setTooltip("출력하는 블럭입니다.");
 this.setHelpUrl("");
  }
};

 

Mycode_gen.js (Gen코드)

Blockly.JavaScript['print_block'] = function(block) {
  var value_print = Blockly.JavaScript.valueToCode(block, 'print', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = 'console.log('+value_print+');';
  return code;
};

위의 코드와 다른점이 보이시나요? 

var value_print = 블럭과 연결된 변수나 숫자가 들어가는 변수

var code = ''; 실질적으로 코드가 작동하는 부분입니다.

 

'console.log('+value_print+');'; 를 넣어 내용을 콘솔출력합니다.

---

이전에 만들어둔 index.html에 방금 만든 js파일을 추가합니다.

<!-- 나만의 코드 -->
<script src="generators\javascript\MyCode.js"></script>
<script src="generators\javascript\MyCode_gen.js"></script>

경로는 각자 알아서 설정해줍니다.

 

툴박스 xml안에 category와 block을 넣어줍니다.

<category name="My" colour="120">
        <block type="print_block"></block>
</category>

index.html을 열어 만들어준 My카테고리에서 출력을 꺼내 조합해봅니다.

그럼 하단에 만든 코드가 보여집니다.

우선 우리는 Run버튼을 따로 만들어두지 않았기때문에

코드를 긁어 개발자 모드에서 확인해봅니다.

 

잘 작동되는것을 확인 할 수 있습니다!

 

이상 기본적인건 다해봤으니 개개인의 역량으로 진화시키길 바랍니다. 감사합니다.