[Blockly] 1~2. blockly 시작하기, blockly 사이트만들기

[Blockly] 1~2. blockly 시작하기, blockly 사이트만들기사용하지않는공간/Blockly2020. 8. 25. 23:06@반나무

Table of Contents

Blockly란?

블록프로그래밍을 구현 할 수 있게 만들어주는 라이브러리? 라고 생각하시면됩니다.

HTML, JS, CSS 지식을 필요로 합니다.

https://developers.google.com/blockly

Blockly | Google Developers

A JavaScript library for building visual programming editors.

developers.google.com

우선 이 사이트의 가이드를 보면 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

Fixed-sized Workspace | Blockly | Google Developers

The simplest way to put Blockly into a webpage is to inject it into an empty 'div' tag. Injection First, include the core Blockly script and the core blocks set. Note that the path may vary, depending on where your page is in relation to Blockly: Then incl

developers.google.com

이 부분을 참조 하면 쉽게 만들 수 있지만 그것 조차 처음엔 쉽지않습니다.

위의 사이트에서 보여지는 코드를 작성하면

<!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

Toolbox | Blockly | Google Developers

The toolbox is the side menu from whence the user may create new blocks. The structure of the toolbox is specified with XML, which may be either a tree of nodes, or a string representation. This XML is passed to Blockly when it is injected into the page. I

developers.google.com

이곳에 툴박스에 대한 자세한 설명이 나옵니다.

카테고리를 만들어준다거나 그 카테고리를 꾸며준다거나하는 다양한 기능이 있습니다.

저작자표시 비영리 변경금지

'사용하지않는공간 > Blockly' 카테고리의 다른 글

[Blockly] 3. blockly로 사용자 블록 제작 후 등록하기 (0)	2020.08.25
[Blockly] 기본 버튼 만들기 (0)	2020.08.22

@반나무 :: 반나무_뿌리

3년차 WPF 개발자입니다.

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

Blockly란?

1. blockly 파일 다운로드

2. blockly가 작동되는 사이트 제작

'사용하지않는공간 > Blockly' 카테고리의 다른 글

티스토리툴바