Blockly 알아보기

Notice

Recent Posts

Recent Comments

Link

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Tags more

Archives

Today

Total

관리 메뉴

우기TIL

Blockly 알아보기 본문

클라이언트/BlocklyJS

Blockly 알아보기

우기왕 2016. 9. 4. 16:23

Blockly란 무엇인가 ? 기존의 우리가 알고 있는 언어와 다르게 시각적으로 코드를 편집할 수 있게 해주는 라이브러리
이미 현재 Blockly를 사용하여 스크래치나 Code.o rg 등 같은 곳에서 아이들에 코딩교육을 진행하고 있습니다.
Blockly는 텍스트 방식이 아닌 블록코딩 방식^[각주:1]을 사용함으로써 프로그래밍이 익숙치 않은 아이들은 물론 전 연령이 쉽게 사용할 수 있게 되어 있습니다. 이런 점을 사용하여 어린아이들에게 컴퓨팅적인 사고를 키우기 위한 용도로써 코딩교육이 굉장히 HOT한 상태입니다.
또한 프로그래밍 관련이 없는 사람들도 Blockly를 사용할 줄 안다면 MIT에서 제공하는 앱 인벤터(App Inventor)^[각주:2]를 사용하여 안드로이드 앱을 간단하게 제작 할 수 있습니다.

하지만 우리가 이런것을 할 것은 아니고 우리는 지금부터 코딩교육이나 앱인벤터에서 사용하는 Blockly에 대해서 알아볼려고 합니다.

Blockly 개발자 페이지에 정의되어 있는 Blockly Overview를 한번 보겠습니다.

Blockly는 웹과 안드로이드에서 시각적으로 코드를 편집할 수 있는 라이브러리
변수, 논리적 표현, 루프 등 Code의 개념이 있는 블록으로 구성되어 있습니다.
Block으로 작성한 코드를 다른 언어의 코드로 추출 할 수 있습니다!
Javascript, Python, PHP, Lua, Dart 추출 가능 ~~(2016.06.23 기준)~~
Blockly는 단지 코드를 생성할 뿐 입니다. (로직같은 부분만 처리한다. 그 외에 것은 다른 곳에서 처리하라는 말인 것 같음)
오픈소스를 구성되어 있어, 필요에 따라 사용자가 블록을 직접 정의하거나 삭제할 수 있다.
Block의 언어를 모든언어로 번역이 가능하다.
저장기능을 제외한 모든 기능을 서버의 도움없이 100% 구동이 가능 (오프라인 상태에서 구현 지장 X)

Get Started

Blockly.inject기능을 사용하여 기본적인 뷰의 화면을 설정할 수 있다.

<body>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>

  <script>
    var workspace = Blockly.inject('blocklyDiv', {
      toolbox: document.getElementById('toolbox')
    });
  </script>
</body>
<-- blockly를 구현시키기위해서는 blockly_compressed.js, blocks_compressed.js, ko.js 필요 -->

Blockly.Inject 선언요소 (예제는 toolbox만 사용했는데 무엇이 있는지 살짝 알아보자)

collapse (boolean) - block을 접는 기능 사용여부 (현재 보이는 사이즈보다 작게 변경)
comments (boolean) - workspace에 배치한 블록에 대해서 comment를 작성하는 기능에 대한 사용여부
css (boolean) - Blockly.Css에서 선언하는 CSS에 무시
disabled (boolean) - 블록 사용여부
grid (object) - workspace 배경처리
maxBlocks (number) - 최대 사용할 수 있는 블록의 수
media (string) - Blockly에서 사용하는 media들의 경로, default는 구글데모 경로
readOnly (boolean) - 읽기 전용여부 (toolbox와 trashcan은 자동으로 사라짐)
rtl (boolean) - 기본 value는 false로 상단의 예제이미지처럼 되있는데 true로 할시 ltr->rtl에로 변경되면서 좌우전환
scrollbars (boolean) - workspace Scrollbar 사용여부 (toolbox 사용시 자동으로 true)
sounds (boolean) - 소리 재생여부 (block 조작시 나는 소리)
toolbox (xml Nodes or string) - 위에 예제처럼 상단의 정의한 xml을 사용하거나 또는 string형태로 입력가능한데 (불필요로 생각)
trashcan (boolean) - 블록을 버릴 수 있는 휴지통 사용여부
zoom (object) - object에 내용 크기를 확대하거나 축소할때 변하는 scale여부 등등

*일단 이런것이 있다정도만 알면 되고, 이것을 굳이 외우거나 할 필요는 없다.

(지극히 주관적인 중요한 것 : grid, maxBlocks, toolbox)

그러면 이제 기본적인 것은 알았으니 이것을 한번 만들어보자 !!

위에 말했다시피 Blockly를 실행시키기 위해서는 기본적으로 js파일을 몇개를 추가시켜야 한다.
blockly_compressed.js, blocks_compressed.js, ko.js ( blocks_compressed.js는 상황에 따라서 필요없을수도 있다.)
그럼 이제 위에 3개 파일을 구해야하는데 일단 BlocklyGithub에 접속하면 최상위경로에 blockly_compressed.js^[각주:3], blocks_compressed.js
그리고 ko.js는 msg/js안에 위치에 있다 (눈치 채셨을수도 있지만 굳이 ko가 아니라 원하는 언어 아무거나 사용해도 된다.)
이제 시작하기 전 모든 준비는 끝났다. 위에 예제소스와 똑같이 blockly가 생길 영역을 하나 생성해준다.
그리고 toolbox를 사용하기 위해서 마찬가지로 xml을 똑같이 작성해보자 (여기서 블록의 대한것을 다 설명할수 없으니 일단..똑같이 작성)
그 이후에 script에 Blockly.inject를 해주면 된다.
5번까지 전부 진행하셨으면 위의 있는 창과 똑같은 창을 보실수 있을 겁니다. 그럼 이만..

블록 코딩 방식은 Java, Python, PHP, C등의 프로그래밍 언어와는 달리 컴퓨터 사이언스, 기초코딩능력, 컴퓨팅사고력 등의 향상을 돕는 목적으로 개발된 교육용 프로그래밍 언어 출처 : 엄마들을 위한 방과후학교 (http://blog.naver.com/icongacademy/220795386697) [본문으로]
안드로이드 기반 휴대폰이나 애뮬레이터앱을 개발할 수 있도록 하기위해 MIT에서 블록에디터를 이용하여 누구나 손쉽게 안드로이드용 스마트폰 앱을 만들 수 있도록 제공해주는 스마트폰용 앱 저작도구 [본문으로]
compressed.js파일은 구글에서 제공하는 closure library를 사용하여 만드는 파일. 여러개의 js파일을 하나로 압축시켜 고성능 코드로 변환 https://developers.google.com/closure/library/ [본문으로]