[Electron] Hello world

2017-02-09

Electron은 뜨고있는 JavaScript 기반의 Cross Platform Desktop Application 제작 툴이다.

홈페이지에서 직접 다음과 같이 설명하고 있다.

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

Download

http://electron.atom.io/releases/에서 직접 Download가 가능하다. (하지만 나는 네트워크가 잘 안 맞는지 계속 실패해서 화가 치밀었다.)

중국 서버 (https://npm.taobao.org/mirrors/electron/) 는 좀 받을만하다.

PC에 npm이 설치되어 있다면, 아래 명령어로 Download 받을 수도 있다.

# Install as a development dependency
npm install electron --save-dev
# Install the `electron` command globally in your $PATH
npm install electron -g

한글로 된 튜토리얼 문서가 있으니 보시라.

설치

Windows 기준으로 설치는 압축만 풀면 된다.

압축을 풀면 electron.exe 파일이 생성되고, 아래처럼 실행된다.

아직 아무것도 모르지만 뭔가 잘 해놨다는 느낌이 온다.

Hello world

Electron application의 기본 구성은 다음과 같다.

your-app/
├── package.json
├── main.js
└── index.html

package.json

Application 정보를 나타내며, 여기서 main에 지정하는 .js 파일 은 entry point를 의미한다.

main 지정한 main.js에서 Window를 만들고 System event를 처리해야 한다.

main 에서 아무런 .js파일을 지정하지 않았다면, 자동으로 index.js파일이 있는지 찾게 된다.

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

main.js

일단 모를 때는 베끼고 보자.

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
let win
function createWindow () {
  // 새로운 브라우저 창을 생성합니다.
  win = new BrowserWindow({width: 800, height: 600})
  // 그리고 현재 디렉터리의 index.html을 로드합니다.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  // 개발자 도구를 엽니다.
  win.webContents.openDevTools()
  // 창이 닫히면 호출됩니다.
  win.on('closed', () => {
    // 윈도우 객체의 참조를 삭제합니다. 보통 멀티 윈도우 지원을 위해
    // 윈도우 객체를 배열에 저장하는 경우가 있는데 이 경우
    // 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다.
    win = null
  })
}
// 이 메서드는 Electron의 초기화가 끝나면 실행되며 브라우저
// 윈도우를 생성할 수 있습니다. 몇몇 API는 이 이벤트 이후에만
// 사용할 수 있습니다.
app.on('ready', createWindow)
// 모든 창이 닫히면 애플리케이션 종료.
app.on('window-all-closed', () => {
  // macOS의 대부분의 애플리케이션은 유저가 Cmd + Q 커맨드로 확실하게
  // 종료하기 전까지 메뉴바에 남아 계속 실행됩니다.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // macOS에선 보통 독 아이콘이 클릭되고 나서도
  // 열린 윈도우가 없으면, 새로운 윈도우를 다시 만듭니다.
  if (win === null) {
    createWindow()
  }
})
// 이 파일엔 제작할 애플리케이션에 특화된 메인 프로세스 코드를
// 포함할 수 있습니다. 또한 파일을 분리하여 require하는 방법으로
// 코드를 작성할 수도 있습니다.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>헬로 월드!</title>
  </head>
  <body>
    <h1>헬로 월드!</h1>
    이 애플리케이션은 node <script>document.write(process.version)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    Electron <script>document.write(process.versions.electron)</script>을 사용합니다.
  </body>
</html>

Build

아까 위에서 electron.exe를 실행시켰을 때 나온 가이드처럼 빌드해본다.

electron.exe 내가앱을넣어둔경로

해보고 나서 깨닫는다. ‘아 이거 빌드가 아니네.’ (…)

그렇다. 바로 실행된 화면이다.

다시 한 번, 배포를 위해 Build 도전

애플리케이션 배포 를 참고하여 진행해본다.

1. 처음 Electron을 Downlaod 받은 폴더로 이동한다. (`electron.exe`가 있는 곳)
2. 그 아래 `/resources` 로 가서 `/app` 이라는 이름의 폴더를 생성한다.
3. 그리고 그 아래 위에서 만들었던 Application 파일 세 개를 넣는다.
4. 다시 `electron.exe` 가 있던 폴더로 이동하여 `electron.exe`를 실행시켜본다. 실행되는 것을 확인할 수 있다.
5. 그러면 이제 이 폴더들을 통째로 압축하여 전달하면 된다.

아… 뭔가 이상하다. 내가 원하는 건 이런게 아니다. Hello world가 134 MB라니?

게다가 이것도 Build라고 하기엔 좀 그렇다.

Packaging을 해본다.

애플리케이션 패키징 을 보니… asar 을 설치해야 한다.

설치하자.

npm install asar -g

처음에 Application을 만들었던 디렉토리로 이동하여 아래 명령어를 실행한다.

asar pack helloworld(디렉토리명) helloworld.asar

helloworld.asar 파일이 생기긴 했는데, 알고보니 이것도 실행 파일은 아니고 electron.exe 실행 후 넣으면 되는 것이다. 그냥 소스를 숨기는 용도이다.

electron-packager 사용

npm install electron-packager -g

이번 삽질이 마지막이기를 바라며 명령을 실행해본다.

electron-packager에 대한 명령어는 https://github.com/electron-userland/electron-packager/blob/master/usage.txt 에서도 확인할 수 있다.

electron-packager [App 경로] --platform=win32 --arch x64 --out dist

아래와 같은 에러가 발생했다. 야호 신난다.

Unable to determine Electron version. Please specify an Electron version
For more information, please see
https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#version

electron version까지 지정해줘야 하나보다.

불안하니 최신 말고 이전 버전을 넣어보자.

electron-packager [App 경로] --platform=win32 --arch x64 --out dist --electron-version 1.4.13

무언가 실행이 된다. 굉장히 오래 걸린다.

Downloading electron-v1.4.13-win32-x64.zip
[=>                                        ] 5.6% of 54.34 MB (25.18 kB/s)

그러더니 에러가 났다…

안해!!!!

Downloading electron-v1.4.13-win32-x64.zip
Error: read ENCONNRESET
read ECONNRESET

Devetc