9. HTML5 데스크탑 어플리케이션
만들기 공정
• 1. javascript + html + css3 를 이용하여 앱 개발
• 2. package.json 생성
• 3. node-webkit (혹은 다른 것도 있습니다)를
이용하여 어플리케이션 래핑
• 4. 실행 파일 만들기 (Build)
• 5. 배포
13년 3월 18일 월
10. Directory 구조
• 아래와 같은 세 파일만 있으면 OK!
(실행 파일 제외)
• app/
index.html
script.js
package.json
• nw.exe (or nw.app)
13년 3월 18일 월
11. Directory 구조
Extension
• app/
app/css
app/script
app/node_modules
/index.html
/script.js
/package.json
• nw.exe (or nw.app)
<< 요기 포인트!
13년 3월 18일 월
12. 먼저 index.html !
<html>
<head>
<title>App</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
13년 3월 18일 월
13. 그리고 script.js
var gui = require('nw.gui');
gui.Window.get().show();
// 기본적으로 포함되어 있는 nw.gui 모듈을
// 이용하여 윈도우 관련한 부분을 핸들링
alert(‘HELLO! WORLD’);
// FILE END
13년 3월 18일 월
15. 또다시 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일 월
16. 마지막 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일 월
17. Packaging
• 패키지 파일 생성
zip -r ../app.nw *
• (패키징이라고 쓰고 zip 압축이라고 읽습니다)
13년 3월 18일 월