04-25 06:05
Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[WebApp / Node Webkit] Example 1 - HelloWorld 본문

Programming/Web App

[WebApp / Node Webkit] Example 1 - HelloWorld

cinema4dr12 2016. 1. 20. 23:25

이번 글에서는 HTML, CSS, JavaScript로 desktop app를 제작할 수 있는 Node Webkit으로 가장 기초적인 "Hello World" App을 만들어 보도록 하겠다.


우선 Node Webkit 페이지(http://nwjs.io)를 방문하여 자신의 OS 플랫폼에 따라 다운로드를 한다. 그리고나서 npm(node package manager)을 통해 nodewebkit 패키지를 설치하되, -g(global) 옵션으로 설치한다:


$ sudo npm install -g nodewebkit


Example - HelloWorld

Coding의 가장 첫 단계인 HelloWorld 예제를 만들어보자.

Windows

예제를 작성할 폴더를 만든다. 설명을 위해 폴더의 이름을 "nw-hellowworld"라고 하였다. 다운받은 node-webkit 패키지(이글을 쓸 당시에는 안정화 버전이 nwjs-v0.12.3-win-x64.zip 이었다) 압축 파일을 푼다. 압축 파일들 중 다음 파일들을 nw-hellowworld 폴더에 복사한다:


nw.pak

icudtl.dat

nw.exe


흔히 node.js 웹 어플리케이션을 작성할 때 반드시 한 번 이상은 작성했을 package.json 파일을 다음과 같이 작성한다.


package.json:

<span style="font-size: 12pt;">{
  "name": "helloworld",
  "main": "index.html"
}
</span>


다음과 같이 index.html 파일을 작성한다:


index.html

<span style="font-size: 12pt;"><!DOCTYPE html>
  <head>
    <title>Hello World!</title>
  </head>
    <h1>Hello World!</h1>
</span>



이제 nw.exe 파일을 실행하며 다음과 같은 실행화면을 볼 수 있다.



Mac OS

Mac OS에 대한 node-webkit 파일 구성은 Windows의 그것과는 다르다(당연하다). 예제를 작성할 폴더를 만든다. 설명을 위해 폴더의 이름을 "nw-hellowworld"라고 하였다. 다운받은 node-webkit 패키지(이글을 쓸 당시에는 안정화 버전이 nwjs-v0.12.3-osx-x64.zip 이었다) 압축 파일을 푼다. 압축 파일들 중 다음 파일들을 nw-hellowworld 폴더에 복사한다:


nwjs

nwjc



package.json과 index.html은 Windows에서 설명했던 것과 동일하다. 실행결과는 다음과 같다.


Tips

1. window의 default size를 정의

package.json:

{
  "name": "helloworld",
  "main": "index.html",
  "window": {
      "width": 540,
      "height": 360
  }
}


2. Window Toolbar 제거

package.json:

{
  "name": "helloworld",
  "main": "index.html",
  "window": {
      "toolbar": false
  }
}



3. Window Fullscreen

package.json:

{
  "name": "helloworld",
  "main": "index.html",
  "window": {
      "fullscreen": true
  }
}


4. Kiosk Mode

package.json:

{
  "name": "helloworld",
  "main": "index.html",
  "window": {
      "kiosk": true
  }
}


5. Frame 제거

package.json:

{
  "name": "helloworld",
  "main": "index.html",
  "window": {
      "frame": false
  }
}


이로써 node-webkit의 간단한 소개와 가장 심플한 예제 소개를 마치도록 하겠다.

'Programming > Web App' 카테고리의 다른 글

[WebApp / Node Webkit] Example 3 - Using Node.JS API  (0) 2016.01.24
[WebApp / Node Webkit] Example 2 - Context Menu  (0) 2016.01.23
[WebApp / Express] Cookie를 사용하여 데이터 저장하기  (2) 2015.12.26
[WebApp / Express] 간단한 MongoDB Middleware 만들기  (0) 2015.12.19
[Web App / Express] Express에서 서버 열기  (0) 2015.12.13
공유하기 링크
'Programming/Web App' Related Articles more
Comments