html5로 만드는 데스크탑 어플리케이션 (node-webkit)
DESCRIPTION
HTML5로 만드는 데스크바 어플리케이션 소개. (With Node-Webkit)TRANSCRIPT
HTML5를 이용하여 만드는 데스크탑 어플리케이션
컨버전스UI개발팀이진권
13년 3월 18일 월
어플리케이션 개발자에게웹 개발이란?
•읭!?
13년 3월 18일 월
웹개발자에게데스크탑 어플리케이션 개발이란?
13년 3월 18일 월
데스크탑 어플리케이션을 개발 하려면,
• 데스크탑 어플리케이션을 개발하기 위해선,
• 윈도우의 경우
C++ 를 이용하거나 (다른 것도..),
• 맥의 경우
Objective C 를 이용해야 함
13년 3월 18일 월
BUT! 이제 웹개발자도데스크탑 어플리케이션을 만들 수 있습니다
13년 3월 18일 월
Play! with Node-webkitApp 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/cssapp/scriptapp/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.jsnpm 패키지 매니저로 모듈 설치. 참 쉽죠?
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": "[email protected]", "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일 월
More, Native UI APIExtended����������� ������������������ Window����������� ������������������ APIs-����������� ������������������ Window-����������� ������������������ Frameless����������� ������������������ Window
Menus-����������� ������������������ Menu-����������� ������������������ MenuItem-����������� ������������������ Window����������� ������������������ menu����������� ������������������ -����������� ������������������ notes����������� ������������������ on����������� ������������������ window's����������� ������������������ menubar
Platform����������� ������������������ Services-����������� ������������������ App����������� ������������������ -����������� ������������������ per-app����������� ������������������ global����������� ������������������ functions-����������� ������������������ Clipboard����������� ������������������ -����������� ������������������ or����������� ������������������ Pasteboard-����������� ������������������ Tray����������� ������������������ -����������� ������������������ or����������� ������������������ Status����������� ������������������ Icon,����������� ������������������ Status����������� ������������������ Item,����������� ������������������ Notification����������� ������������������ Area����������� ������������������ Icon-����������� ������������������ File����������� ������������������ dialogs-����������� ������������������ Shell����������� ������������������ -����������� ������������������ platform-dependent����������� ������������������ desktop����������� ������������������ functions
-����������� ������������������ Handling����������� ������������������ files����������� ������������������ and����������� ������������������ arguments
13년 3월 18일 월
Practice
• PLAY TIME : )
13년 3월 18일 월
Show Time!
http://www.youtube.com/watch?v=YrBU-Aqtvrk&feature=youtu.be
Web RTC를 이용한 멀티 화상 대화
13년 3월 18일 월
Show Time!
http://briefmsg.org/
Web Messanger
13년 3월 18일 월
Show Time!CSS-Shark
http://css-shack.herokuapp.com/
13년 3월 18일 월
Hope you Enjoy!
13년 3월 18일 월
Another?
http://www.tidesdk.org/
Create multi-platform desktop apps with HTML5, CSS3 and JavaScript
13년 3월 18일 월
Tide SDK
13년 3월 18일 월
Tide SDK
13년 3월 18일 월
