Electron

Electron이란?

• HTML, CSS, 자바스크립트를 사용해 크로스 플랫폼 데스크탑 애플리케이션을 만들기 위한 오픈 소스 프레임워크
• 크로스 플랫폼을 지원하기 위해 Chromium과 Node.js를 1개의 런타임으로 통합
• Mac, Windows, 리눅스용으로 패키징 가능
• 2013년, GitHub에서는 커스터마이징 가능한 텍스트 편집기인 Atom을 만들기 위해 개발
• Atom과 Electron은 2014년 봄에 오픈소스로 공개

주요 히스토리

• 2013년 4월 Atom Shell 탄생
• 2014년 5월 Atom Shell을 오픈 소스로 공개함
• 2015년 4월 Atom Shell은 Electron으로 이름이 변경됨
• 2016년 5월 Electron v1.0.0 출시
• 2016년 5월 Mac App Store에서 Electron 앱 호환됨
• 2016년 8월 Windows Store에서 Electron 앱 지원 시작

Electorn으로 만들어 진 앱

더많은 앱 보기

앱구조

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

준비하기: 첫 번째 앱 만들기 참고

• 1.node js 설치(npm은 같이 설치됨), nodejs home

• 2.app init

  npm init -y

• 3.electorn 설치: 설치가이드

$ npm install —save-dev electron

• 4.package.json 설정

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

• 5.main.js 구조 보기

• 6.index.html 보기

• 7.앱 실행해보기

  npm start

앱 빌드 : 참고 링크

• 1.앱 빌드하기: 빌더 설치

  > $ npm install --save-dev electron-builder

• 2.앱 빌드하기: 빌드 옵션 커맨드 설정(package.json)

     "scripts": {
          "start": "electron .",
          "build:osx": "build --mac",
          ...
     }

• 3.앱 빌드하기: 빌드 옵션 설정(package.json)

      "build": {
          "productName": "HelloElectron",
          "appId": "com.electron.hello",
          ...
      } 
      ...

• 4.앱 빌드하기: CLI(Command Line Interface)

  $ npm run build:osx

그림판

• mspaint의 javascript 버전

  • Github: https://github.com/1j01/jspaint
  • DemoWeb: https://jspaint.app/#local:979c717d0c8fd

Auto Coloring

• Coloring site

  • Github: https://github.com/pfnet/PaintsChainer
  • Webpage: https://paintschainer.preferred.tech/index_en.html

Mobile Cross platform

• 참고: Xamarin vs. Apache Cordova vs. React Native

참고

• Electorn 문서: Link Electron doc

용어

• npm : Node Package Manager or Node Package Modules