HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)

HTML5를 이용하여 만드는
데스크탑 어플리케이션
컨버전스UI개발팀
이진권
13년 3월 18일 월

어플리케이션 개발자에게
웹 개발이란?
•읭!?
13년 3월 18일 월

웹개발자에게
데스크탑 어플리케이션 개발이란?
13년 3월 18일 월

데스크탑 어플리케이션을
개발 하려면,
• 데스크탑 어플리케이션을 개발하기 위해선,
• 윈도우의 경우
C++ 를 이용하거나 (다른 것도..),
• 맥의 경우
Objective C 를 이용해야 함
13년 3월 18일 월

BUT! 이제 웹개발자도
데스크탑 어플리케이션을
만들 수 있습니다
13년 3월 18일 월

Play! with Node-webkit
App runtime based on Chromium and node.js
https://github.com/rogerwang/node-webkit
13년 3월 18일 월

What is node-webkit?
13년 3월 18일 월

It is run on,
OSX Windows
Linux
13년 3월 18일 월

HTML5 데스크탑 어플리케이션
만들기 공정
• 1. javascript + html + css3 를 이용하여 앱 개발
• 2. package.json 생성
• 3. node-webkit (혹은 다른 것도 있습니다)를
이용하여 어플리케이션 래핑
• 4. 실행 파일 만들기 (Build)
• 5. 배포
13년 3월 18일 월

Directory 구조
• 아래와 같은 세 파일만 있으면 OK!
(실행 파일 제외)
• app/
index.html
script.js
package.json
• nw.exe (or nw.app)
13년 3월 18일 월

Directory 구조
Extension
• app/
app/css
app/script
app/node_modules
/index.html
/script.js
/package.json
• nw.exe (or nw.app)
<< 요기 포인트!
13년 3월 18일 월

먼저 index.html !
<html>
<head>
<title>App</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
13년 3월 18일 월

그리고 script.js
var gui = require('nw.gui');
gui.Window.get().show();
// 기본적으로 포함되어 있는 nw.gui 모듈을
// 이용하여 윈도우 관련한 부분을 핸들링
alert(‘HELLO! WORLD’);
// FILE END
13년 3월 18일 월

Integration Node.js
npm 패키지 매니저로 모듈 설치. 참 쉽죠?
13년 3월 18일 월

또다시 script.js
var gui = require('nw.gui');
gui.Window.get().show();
// 기본적으로 포함되어 있는 nw.gui 모듈을
// 이용하여 윈도우 관련한 부분을 핸들링
var jade = require('jade');
alert(‘HELLO! WORLD’);
// FILE END
<< HERE!
13년 3월 18일 월

마지막 package.json
{
"name": "App Name",
"description": "lee.jinkwon@nhn.com",
"version": "0.2",
"keywords" : ["App "],
"main": "index.html",
"window": {
"icon" : "images/icon.jpg",
"frame": true,
"toolbar": true,
"width": 418,
"height": 418,
"position" : "center",
"resizable" : true
},
"webkit" : {
}
}
main : 시작시 로드할 페이지
window : 창 환경 설정
# frame : 기본 창 틀 Vis/False
# toolbar : 툴바 vis/Fasle
# position : 시작시 윈도우 위치
# resizable : 창의 리사이즈가 가능하게 할지
webkit : 추가적인 옵션 설정
13년 3월 18일 월

Packaging
• 패키지 파일 생성
zip -r ../app.nw *
• (패키징이라고 쓰고 zip 압축이라고 읽습니다)
13년 3월 18일 월

Mac에서는,
클릭!
13년 3월 18일 월

Mac에서는,
복사하여
붙여넣기!
RESULT > app.app
13년 3월 18일 월

Windows
• copy /b nw.exe+app.nw app.exe
RESULT > app.exe
13년 3월 18일 월

More, Native UI API
• https://github.com/rogerwang/node-webkit/wiki/
Native-UI-API-Manual
13년 3월 18일 월

HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)

Similar to HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit) (20)

HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)