Blockly란?
블록프로그래밍을 구현 할 수 있게 만들어주는 라이브러리? 라고 생각하시면됩니다.
HTML, JS, CSS 지식을 필요로 합니다.
https://developers.google.com/blockly
우선 이 사이트의 가이드를 보면 blockly에 대한 설명과 가이드가 나옵니다.
가이드를 아무리 봐도 어떻게 시작해야할까? 고민인 분들을 위해 글을 작성합니다.
-
blockly파일 다운로드
-
blockly가 작동되는 사이트 제작
-
blockly 코드가 보여지는 공간 만들기
-
blockly로 사용자블록 제작 후 등록
1. blockly 파일 다운로드
Get the Code 쪽의 zip file을 다운받아 zip파일을 풀어줍니다.
2. blockly가 작동되는 사이트 제작
html5를 사용해 blockly가 작동되는 사이트를 제작합니다.
https://developers.google.com/blockly/guides/configure/web/fixed-size
이 부분을 참조 하면 쉽게 만들 수 있지만 그것 조차 처음엔 쉽지않습니다.
위의 사이트에서 보여지는 코드를 작성하면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- 블록 불러오는 js -->
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<!-- 언어 설정-->
<script src="msg/js/en.js"></script>
</head>
<body>
<!-- 툴 박스 -->
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<!-- 기본 div -->
<div id="blocklyDiv" style="height: 480px; width: 600px;">
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
</div>
</body>
</html>
왼쪽에 만든 툴박스내용이 보이고 오른쪽에 블럭을 놓을 수 있는 div가 만들어집니다.
https://developers.google.com/blockly/guides/configure/web/toolbox
이곳에 툴박스에 대한 자세한 설명이 나옵니다.
카테고리를 만들어준다거나 그 카테고리를 꾸며준다거나하는 다양한 기능이 있습니다.
반응형
'사용하지않는공간 > Blockly' 카테고리의 다른 글
[Blockly] 3. blockly로 사용자 블록 제작 후 등록하기 (0) | 2020.08.25 |
---|---|
[Blockly] 기본 버튼 만들기 (0) | 2020.08.22 |