Blockly 개발환경 구축

Blockly는 오픈소스로 소스가 모두 개방되어 있다. 이를 가져와 개발자의 의도 및 용도에 맞게 수정하여 사용 가능하다. Blockly는 미들웨어 성격으로, 사용자의 어플리케이션에 맞게끔 수정 및 기능 추가가 용이하다.

일단 Blockly 소스를 가져와 빌드해보도록 한다. Javascript의 빌드 결과물은 주로 xxxx_compressed.js의 이름으로 저장되며, 여러개로 분산된 코드를 하나의 파일에 압축(정확히는 함축)하여 저장한다.

먼저 소스를 가져온다. github의 Blockly 레포지토리 (https://github.com/google/blockly/releases) 에서 최신 릴리즈 소스 (https://github.com/google/blockly/archive/1.20190215.0.tar.gz)를 다운로드한다.

받은 압축 파일을 임의의 디렉토리로 이동한 후 압축을 푼다. (본 포스팅에선 ~/Developer 를 사용.)

$ cd ~/Developer
$ tar zxf blockly-1.20190215.0.tar.gz

빌드하기 위해선 일단 python2.7이 설치되어 있어야 한다. (macOS엔 python 2.7이 기본 설치되어 있으므로 괜찮음. Windows에선 따로 설치 필요)

$ cd blockly-1.20190215.0
$ ./build.py

이때 다음과 같은 에러가 발생하면, closure-library가 필요하다.

Error: Closure not found.  Read this:
developers.google.com/blockly/guides/modify/web/closure

위 에러 메시지에서 알려준 링크 (developers.google.com/blockly/guides/modify/web/closure)로 가서 압축 파일을 다운로드 한다.

받은 파일을 ~/Developer에 풀고, 디렉토리 이름을 closure-library로 변경한다.

$ cd ~/Developer
$ tar zxf ~/Downloads/google-closure-library-v20190301-20-gde66a8a.tar.gz 
$ mv google-closure-library-de66a8a closure-library

이제 다시 blockly 디렉토리로 이동하여 빌드한다.

$ cd blockly-1.20190215.0
$ ./build.py

여러 메시지가 쭈욱 나오고, 에러가 없이 마무리되면 다음과 같은 파일이 생성된다. (이미 컴파일된 파일이 있긴 하지만, 업데이트 된다) 만약 java.lang.RuntimeException: INTERNAL COMPILER ERROR와 같은 에러가 발생한다면, 잠시후 다시 실행하면 정상적으로 빌드 된다.

...

SUCCESS: msg/js/tlh.js
SUCCESS: msg/js/ba.js
SUCCESS: blockly_uncompressed.js
SUCCESS: blockly_accessible_uncompressed.js
SUCCESS: blockly_compressed.js
Size changed from 2637 KB to 780 KB (30%).
SUCCESS: blockly_accessible_compressed.js
Size changed from 2739 KB to 826 KB (30%).
SUCCESS: blocks_compressed.js
Size changed from 154 KB to 74 KB (48%).
SUCCESS: javascript_compressed.js
Size changed from 85 KB to 47 KB (56%).
SUCCESS: python_compressed.js
Size changed from 71 KB to 36 KB (51%).
SUCCESS: php_compressed.js
Size changed from 74 KB to 38 KB (52%).
SUCCESS: lua_compressed.js
Size changed from 66 KB to 33 KB (50%).
SUCCESS: dart_compressed.js
Size changed from 78 KB to 41 KB (52%).

빌드 완료.

생성된 파일의 용도를 설명하면…

  • blockly_compressed.js : Blockly 코어 파일
  • blocks_compressed.js : 기본 블럭
  • javascript_compressed : Javascript 코드 제너레이터
  • python_compressed.js : Python 코드 제너레이터
  • php_compressed.js : PHP 코드 제너레이터
  • lua_compressed.js : Lua 코드 제너레이터
  • dart_compressed.js : Dart 코드 제너레이터

끗!

Advertisements

납걸이 (릴납 스탠드)

인두기를 구입할 때 납걸이 (릴납 스탠드)를 같이 구매했어야 됐는데, 시기를 놓치니 그냥 귀찮더라도 릴납에서 납을 조금씩 풀어서 사용하고 있었습니다. 대충 6,000원 정도 하는데 그것만 주문하기도 좀 애매하기도 했고, 다른 것 주문할 땐 꼭 까먹더라고요.

3D 프린터도 요즘 슬슬 사용하고 있겠다, 모델링 하는 것도 어렵진 않아서 사용하고 있는 릴납 기준으로 납걸이를 만들어보았습니다. 사용하고 있는 실납입니다, (http://eleparts.co.kr/goods/view?no=3224253)유연 실납으로 땜질할 때도 냄새도 거의 나지 않고, 품질도 좋습니다. 저정도 양이면… 특별한 일이 없는 한 거의 평생 사용할 것 같네요.

크기는 자를 이용해서 가운데 봉이 들어갈 부분의 지름과 전체 길이, 전체 지름 등을 재고, onshape.com에서 모델을 만듭니다. 총 3개의 파트로 구성되고, 베이스, 릴납이 끼워질 부분, 양쪽으로 움직이지 못하게 하는 마개 부분이네요.

이제 이것을 STL 파일로 변환해서 슬라이서 툴에 넣고, gcode를 생성합니다. 워낙 단순 생김새이니 infill은 15%, 적층두께는 0.2mm로 좀더 빠르게 설정했습니다. 필라멘트 색상을 교환해 가면서 뽑으면 좀더 이쁘겠지만, 역시 귀차니즘에 의해서 그레이 색상으로 통일.

출력 결과는…..

짜잔!!

이제 자알 조립해 보면,

파는 제품에 비교해봐도 손색이 없는 품질! 생긴것도 깔끔하고요..^^ 끗!

Blockly 소개

Blockly (블럭클리?, 블로키?)는 구글에서 오픈소스로 개발하고 있는  visual programming editors (소위 블럭코딩)을 개발하기 위한 Javascript 라이브러리이다. Scratch 3.0도 블럭을 제어하기 위한 부분은 Blockly 라이브러리를 가져와 수정하여 사용하고 있다.

대다수의 블럭코딩 툴들이 Blockly를 기반으로 개발되고 있다. 라이센스는 Apach 2.0을 사용하며, 소스는 https://github.com/google/blockly에 있다. 상업적 사용이 가능하고, 변경 및 배포에 아무런 제약이 없다.

Scratch 3.0이 그만의 프레임웍에 맞추어 개발해야 했다면, Blockly는 사용자가 자유롭게 변형하여 목적에 맞는 프로그램을 개발 가능하다.

블럭으로 만들어놓은 부분을 각종 언어 (Javascript, Pythom, Lua, Dart 등)로 생성이 가능하다. 또 사용자가 원하는 블럭도 생성이 가능하다. 코어가 Javascript로 되어 있어, 웹은 물론 Android, iOS에서도 WebView를 통해 실행이 가능하다. (동일한 코드로)

https://developers.google.com/blockly/ 이 메인 싸이트이며, Blockly에 대한 설명, 사용방법, 개발 방법 등에 대한 부분이 상세하게 적혀있다.

https://groups.google.com/forum/#!forum/blockly 는 Blockly 사용자들이 모여 있는 포럼으로 다수의 사용자들이 Blockly를 Customizing하고, 다양한 사례에 적용할 때 발생하는 문제점을 제시하고 서로 논의 하는 곳이다.


Scratch 3.0 exe, app으로 패키징하기

모든 개발이 완료되고, 배포를 해야 하는 경우에 윈도우의 경우 exe 파일, macOS의 경우 .app으로 패키징하여야 한다. 물론 소스 파일을 배포하고 사용자가 지난번 포스팅(https://ahnbk.com/?p=366, https://ahnbk.com/?p=383)과 같이 개발환경을 갖추어서 실행할 수 있지만 매우 복잡하고, 릴리즈 모드가 아닌 관계로 살짝 느린 면이있다.

Scratch 3.0은 React.js를 사용하여 개발되었다. 즉 이를 실행하기 위해선 웹브라우저가 필요하다. 개발 시에는 webpack-dev-server를 이용하였다. 이를 대체할 것이 필요한데, 이때 필요한 것이 Electron(https://electronjs.org)이다.

Electron은 NodeJS, Chromium을 이용하여 JavaScript, HTML, CSS를 이용하여 동일한 소스로 Windows, macOS, Linux 등에서 실행 가능한 Desktop 앱을 개발할 수 있는 플랫폼이다.

Electron은 npm을 이용하여 쉽게 설치할 수 있다.

$ npm install -g electron

다음으로 지금까지 개발한 Scratch 3.0을 릴리즈 형태로 빌드한다. Scratch-gui 디렉토리로 이동하여 다음과 같이 입력한다.

$ cd scratch-gui
$ npm run-script build

이제 빌드가 완료되면, build 디렉토리에 release 모드로 빌드된 파일들이 생성되어 있음을 볼 수 있다.

이제 편의상 scratch-app 디렉토리를 하나 생성하고 위 build 디렉토리를 복사한다. 다음으로 election 앱을 만들기 위해 다음과 같이 입력한다.

$ cd scratch-app
$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (scratch-app) 
version: (1.0.0) 
description: Scratch 3.0 for OROCA Edubot
entry point: (index.js) main.js
test command: 
git repository: 
keywords: scratch, oroca, edubot, block-coding
author: Byeong-Kyu Ahn
license: (ISC) BSD-2-Clause
About to write to /Users/byeongkyu/Developer/scratch/scratch-app/package.json:

{
  "name": "scratch-app",
  "version": "1.0.0",
  "description": "Scratch 3.0 for OROCA Edubot",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "scratch",
    "oroca",
    "edubot",
    "block-coding"
  ],
  "author": "Byeong-Kyu Ahn",
  "license": "BSD-2-Clause"
}


Is this OK? (yes) 

위와 같이 사용자의 환경에 맞추어 입력하게 되면, package.json 파일이 생성되어 있음을 볼수 있다. package.json 파일을 에디터를 이용해 다음과 같이 수정한다.

{
  "name": "scratch-app",
  "version": "1.0.0",
  "description": "Scratch 3.0 for OROCA Edubot",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "scratch",
    "oroca",
    "edubot",
    "block-coding"
  ],
  "author": "Byeong-Kyu Ahn",
  "license": "BSD-2-Clause"
}

이제 main.js 파일을 생성하고 다음과 같이 입력한다.

const { app, BrowserWindow } = require('electron')
var path = require('path')

let win

function createWindow () {
  win = new BrowserWindow({
    frame: true,
    width: 1200,
    height: 800,
    icon: path.join(__dirname, 'assets/icons/png/64x64.png')
  })

  win.loadFile('./build/index.html')

  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

다음과 같이 입력하여 실행해 본다.

$ npm start

정상적으로 되었다면, 앱이 실행 됨을 볼 수 있다.

이제 이렇게 생성된 electron 앱을 패키징하는 과정만 남아 있다. 먼저 앱의 아이콘을 생성한다. 기본값은 Electron의 기본 아이콘이다. 이미지 편집기 등을 이용하여 1024×1024 크기의 png 파일을 생성한다.

윈도우 앱의 경우 ico 파일을 사용하고, macOS의 경우 icn 파일을 사용한다. https://icoconvert.com, https://iconverticons.com/online 등의 웹페이지에서 변환이 가능하다. 생성된 파일을 scratch-app 디렉토리에 복사한다.

다음으로 electron-packager를 설치한다. npm을 이용하여 쉽게 설치할 수 있다.

$ npm install -g electron-packager

다음으로 패키징에 필요한 electron을 설치한다.

$ cd scratch-app
$ npm install --save-dev electron

마지막으로 macOS용 앱을 패키지할 경우 다음과 같이 입력한다.

$ electron-packager . --overwrite --platform=darwin --arch=x64 --icon=./assets/icons/edubot_icon.icns --prune=true --out=release-builds

다음과 같은 메시지가 나오면 성공

Packaging app for platform darwin x64 using electron v4.0.8
Wrote new app to release-builds/scratch-app-darwin-x64

이제 위에서 알려준 디렉토리로 이동해 보면 .app 파일이 생성되어 있음을 볼 수 있다. macOS의 경우 /Application으로 복사하여 사용하면 된다.

윈도우용 앱을 패키징 할 때, macOS에서 진행하는 경우 wine 툴이 필요하다. homebrew를 이용하여 쉽게 설치가 가능하다.

$ brew install wine

설치가 완료되면, 다음과 같이 입력하여 윈도우용 앱을 패키징한다.

$ electron-packager . scratch-edubot-app --overwrite --platform=win32 --arch=x64 --icon=assets/icons/edubot_icon.ico --prune=true --out=release-builds --version-string.CompanyName="OROCA" --version-string.FileDescription="OROCA Edubot" --version-string.ProductName="Scratch Edubot"

다음과 같은 메시지가 나오고 해당 디렉토리로 이동하면 exe 파일이 생성됨을 볼 수 있다.

Packaging app for platform win32 x64 using electron v4.0.8
Wrote new app to release-builds/scratch-edubot-app-win32-x64

위 디렉토리를 압축하여 윈도우 환경에서 exe 파일을 실행한다.

끝!

Scratch 3.0 확장블럭 종류

Scratch엔 다양한 종류의 블럭들이 존재한다. 사용자가 확장 블럭을 만들 경우, 제공되는 데이터의 종류에 맞추어 블럭을 만들어야 하는데, 반드시 다음의 종류 중 하나 이어야 한다.

참고할 파일은 scratch/scratch-vm/src/extension-support/block-type.js이다.

1.BOOLEAN

육각형 모양으로 되어 있으며, 출력 결과는 true or false 두개의 값만을 가진다. 주로 논리(If else 등)에서 사용된다.

2.COMMAND

위와 아래에 다른 블럭을 연결할 수 있으며, 주로 어떠한 명령을 내리기 위해 사용한다.

3.CONDITIONAL

COMMAND 블럭의 특수한 형태로, 주어진 조건에 맞을 시, 바로 아래에 연결된 블럭을 실행한다. 조건이 맞든 맞지 않든, 다음 블럭으로 무조건 실행한다. (Non blocking 실행이라는 의미인듯)

4.HAT

위와 같이 생긴 블럭으로 스택 (블럭들이 연결되어 있는 모듬)의 처음에만 위치 할 수 있다. 한마디로 특정 기능의 맨처음에 위치

5.EVENT

HAT 블럭의 특수한 형태로, 특정 이벤트를 만족하면 실행하는 블럭. 거의 대부분의 HAT 블럭이 이와 같은 형태임.

6.LOOP

위아래 블럭 연결이 가능하고, Child 블럭을 포함하는 블럭. Child 블럭을 반복하여 실행함. 횟수나 조건식 등을 포함하여 Loop를 제어할 수 있음.

7. REPORTER

숫자나 문자등 값을 저장하고 있는 블럭. 단일값인 경우 앞쪽에 체크 박스가 존재하며 이를 클릭하면 Sprite 화면에서 값을 모니터링 가능. 배열값인 경우는 체크박스가 존재하지 않으며, 블럭을 터치하는 경우 값 확인 가능.