Getting Started with nw.js
여기에서는 nw.js 개발을 시작하기 위한 약간의 튜토리얼이 첨가된 안내서입니다. 먼저 nw.js 바이너리를 준비하세요. (“Downloads” 섹션에서 다운받으세요. 또는 nw.js 를 직접 빌드하길 원한다면, nw.js 빌드하기 문서를 참조하세요.)
nw.js 는 Chromium 과 io.js 기반으로 만들어졌습니다. node.js 모듈과 HTML5 DOM 모듈 간의 교환으로 웹 기술을 앱에 그대로 개발할 수 있는 환경을 제공합니다. 게다가 쉽게 웹 앱을 네이티브처럼 패키지를 만들 수 있습니다.
nw.js 를 시작하기 위해 한번 간단한 프로그램을 만들어보도록 하겠습니다.
예제 1. Hello World
index.html 파일을 만드세요:
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>package.json 파일을 만드세요:
{
"name": "nw-demo",
"main": "index.html"
}index.html 과 package.json 둘을 ZIP 압축하고 app.nw 로 이름을 바꾸세요:
app.nw
|-- package.json
`-- index.html
빌드된 바이너리를 다운받고 app.nw 를 실행하세요:
$ ./nw app.nw참고: 윈도우에서는 app.nw 를 nw.exe 파일로 드래그하여 실행이 가능합니다.
예제 2. Native UI API
nw.js 에서는 네이티브 UI를 다루는 API를 제공합니다. 여기서 윈도우, 메뉴 등 여러가지를 제어할 수 있습니다.
이번 예제를 통해 메뉴를 생성해 보도록 하겠습니다.
<html>
<head>
<title> Menu </title>
</head>
<body>
<script>
// native UI library를 로드합니다.
var gui = require('nw.gui');
// 빈 메뉴를 생성합니다.
var menu = new gui.Menu();
// 몇가지 명명된 메뉴를 생성합니다.
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.MenuItem({ label: 'Item C' }));
// 하나를 지워보죠.
menu.removeAt(1);
// 메뉴 아이템을 나열해 보겠습니다.
for (var i = 0; i < menu.items.length; ++i) {
console.log(menu.items[i]);
}
// 메뉴명 하나를 추가하고 클릭 시 콜백을 구성합니다.
menu.append(new gui.MenuItem({
label: 'Click Me',
click: function() {
// HTML 본문에 내용을 추가합니다.
var element = document.createElement('div');
element.appendChild(document.createTextNode('Clicked OK'));
document.body.appendChild(element);
}
}));
// 컨텍스트 메뉴로 등록합니다.
document.body.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
// 클릭한 곳으로 팝업 띄웁니다.
menu.popup(ev.x, ev.y);
return false;
}, false);
// 현재 윈도우를 불러옵니다.
var win = gui.Window.get();
// 윈도우 메뉴를 위한 메뉴바를 생성합니다.
var menubar = new gui.Menu({ type: 'menubar' });
// 빈 아이템을 만들죠.
var sub1 = new gui.Menu();
sub1.append(new gui.MenuItem({
label: 'Test1',
click: function() {
var element = document.createElement('div');
element.appendChild(document.createTextNode('Test 1'));
document.body.appendChild(element);
}
}));
// 서브메뉴도 생성 가능합니다!
menubar.append(new gui.MenuItem({ label: 'Sub1', submenu: sub1}));
//윈도우 메뉴를 생성된 메뉴바로 할당합니다.
win.menu = menubar;
// 기존 메뉴 요소에 대한 콜백을 변경합니다.
menu.items[0].click = function() {
console.log("CLICK");
};
</script>
</body>
</html>예제 3. node.js 사용하기
node.js 모듈을 DOM 스크립트에서 바로 불러올 수 있습니다. nw.js의 이 기능을 통해 무한한 가능성으로 앱을 제작할 수 있습니다.
<html>
<body>
<script>
// node.js 모듈을 불러옵니다.
var os = require('os')
document.write('Our computer is: ', os.platform())
</script>
</body>
</html>이제 여러분은 간단한 nw.js 앱을 만들 수 있습니다. 다음에는 실행하고 패키징하는 방법을 배우도록 하겠습니다.
앱 실행하기
There are two general ways to run apps for all platforms. 모든 플랫폼에서 앱을 실행하는 방법은 보통 2가지가 있습니다.
- 폴더일 경우 앱 루트 폴더를 지정합니다.
- .nw 파일일 경우(zip에서 확장자 변경), 파일이 있는 폴더를 지정합니다.
예를 들면:
nw path_to_app_dir
nw path_to_app.nw문제해결 란에서 일반적으로 발생하는 문제를 해결할 수 있습니다.
다시 Wiki 로 돌아가서 더 많은 것들을 경험하세요.