HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
1. HTML5를 이용하여 만드는 데스크탑 어플리케이션 컨버전스UI개발팀 이진권 13년 3월 18일 월
2. 어플리케이션 개발자에게 웹 개발이란? •읭!? 13년 3월 18일 월
3. 웹개발자에게 데스크탑 어플리케이션 개발이란? 13년 3월 18일 월
4. 데스크탑 어플리케이션을 개발 하려면, • 데스크탑 어플리케이션을 개발하기 위해선, • 윈도우의 경우 C++ 를 이용하거나 (다른 것도..), • 맥의 경우 Objective C 를 이용해야 함 13년 3월 18일 월
5. BUT! 이제 웹개발자도 데스크탑 어플리케이션을 만들 수 있습니다 13년 3월 18일 월
6. Play! with Node-webkit App runtime based on Chromium and node.js https://github.com/rogerwang/node-webkit 13년 3월 18일 월
7. What is node-webkit? 13년 3월 18일 월
8. It is run on, OSX Windows Linux 13년 3월 18일 월
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일 월
14. Integration Node.js npm 패키지 매니저로 모듈 설치. 참 쉽죠? 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일 월
18. Mac에서는, 클릭! 13년 3월 18일 월
19. Mac에서는, 복사하여 붙여넣기! RESULT > app.app 13년 3월 18일 월
20. Windows • copy /b nw.exe+app.nw app.exe RESULT > app.exe 13년 3월 18일 월
21. More, Native UI API • https://github.com/rogerwang/node-webkit/wiki/ Native-UI-API-Manual 13년 3월 18일 월
22. More, Native UI API Extended
반응형
'정보공유' 카테고리의 다른 글
| JIRA 업무 생산성 향상 및 프로젝트 관리 (0) | 2018.11.13 |
|---|---|
| 암호화 이것만 알면 된다. (0) | 2018.11.13 |
| React Native를 사용한 초간단 커뮤니티 앱 제작 (0) | 2018.11.12 |
| Next Javascript ES2015 시작하기 (0) | 2018.11.12 |
| 이력서 강의 (0) | 2018.11.09 |
| 입사지원서류 작성법 자기소개서 (0) | 2018.11.09 |