WeblocklyNaver D2 Campus Fest 2016by 계성혁 (@lawrence-kaybob), 주현수 (@DogFooter), 최홍범 (@credtiger96)

Weblockly?

Block Coding 환경에서간단한Web Page 제작을도와주는툴

Goals of Weblockly

● Scratch 에서추구하고자했던것을 Web Page 구성에적용● 누구나언어에종속되지않고웹에대한이해를제공

Architecture

CodeMirror

Pug (a.k.a. Jade)

Blockly?

● Google 에서 개발한 Block Coding 을 위한 Open Source Project

● Block 을 이용하여 Javascript, Python, Lua, PHP,Dart Code 생성이 가능함

● Scratch, App Inventor, code.org 등 많은 코딩 교육프로젝트에서 사용● Web(Javascript), Android, iOS Library 를 제공하여 코딩 교육을위한

Blockly App 을 제작할수 있음● http://developer.google.com/blockly

How?

● Blockly 에서 기본적으로 Javascript Code 생성이 가능하므로 Vanilla

JS Code 생성 가능● Blockly 에서는 Block 을 정의하면 이를 사용할 수 있도록 API 제공

● jQuery, Node.js Code 는 이를 이용해 직접 정의● https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

실행화면

DOM Object 에 특정 Script 를 블럭을 이용해 할당할 수 있습니다 .

실행화면

이러한 Script 는 ID 별로 구분되어 작성 가능합니다 .

실행화면

이렇게 구성된 Block 들은 실제 Javascript 코드로 변 환되어 사용 가능합니다 .

실행화면

생성되는 Javascript Code 의 다양한Scope 를 사용할 수 있습니다 .

실행화면

Frontend 뿐만 아니라 Backend(Node.js) Server 의 간단한 코드도 생성 가능합니다 .

실행화면

간단한 Routing Rule 을 정해주어 Frontend 에서 제 작한 페이지를 제공하게 할 수 있습니다 .

Dependencies

● Blockly (Apache License v2.0)

º Block Coding 환경 제작을 위한 Library

● Node.js (MIT License) along with Express.js & npm (Artistic License 2.0)

º Dependency 관리 및 Page 제공을 위한 서버● JSZip (GNU General Public License v3.0)

º 생성한 Code 를 Package 단위의 압축 파일로 내보내기 (Export) 기능을 위한 Library

● CodeMirror (MIT License)

º 완벽한 Block Coding 환경만으로 HTML, CSS 파일 구성이 힘들어 현재 단 계에서는 HTML, CSS Code 를 작성할 수 있는 환경을 임시로 제공

Coming Soon...

● Block Coding 만으로 HTML Code 와 DOM Object 들에 대한Javascript Code Binding 구현

● 현재 작업중인 사이트에 대해서 Package 단위로 다운로드 기능º 다운받은 Package 는 몇 번의 추가 설정 이후 간편하게 사용 가능한

수준으로 구성º PasS 에 배포까지 해주는 기능도 구상 중

감사합니다 :)