일렉트론(Electron)은 웹 프론트엔드 기술(HTML, CSS, 자바스크립트)를 활용하여 데스크탑 어플리케이션을 개발 할 수 있도록 해주는 도구로써, Electron SAPUI5 데스크앱 즉, SAPUI5 화면을 붙힌 Electron 데스크탑앱의 quick start를 정리해 보았습니다.
일렉트론의 주요 특징으로는 다음과 같습니다.
- 크로미움(Chromium)과 Node.js 환경에서, 프론트엔트 기본 기술 HTML, CSS, 자바스크립트)를 활용하여 앱을 만들 수 있습니다. 즉, 내장된 크롬브라우저로 화면을 표시하고 os레벨의 파일시스템은 Node.js로 접근하여 처리하는 개념입니다.
- GitHub가 관리하는 오픈소스 프로젝트이며, 대표적으로 Visual Studio Code 에디터, 슬랙, github 데스크탑앱 등 이 일렉트론으로 개발되었습니다.
- 동일한 코드로 개발/빌드하여 맥, 윈도우, 리눅스에서 사용할 수 있는 크로스플랫폼 개발 환경입니다.
일렉트론의 경우 화면 구성을 브라우저 기반의 html, css, 자바스크립트를 활용하기 때문에, 바닐라 자바스크립트 뿐만 Vue.js, React 등의 자바스크립트 라이브러리도 사용 가능합니다.
그러므로 sapui5 역시 자바스크립트 라이브러리이므로 일렉트론을 통해 화면을 구성을 할 수 있습니다.
Electron SAPUI5 개발을 위한 환경 – Node.js 설치
우선 먼저, 일렉트론을 개발하기 위해서는 node.js를 설치해야 합니다.
Node.js 홈페이지 : https://nodejs.org/ko/
SAPUI5 개발을 위한 Visual Studio Code 셋팅법은 여기 문서를 참조할 수 있습니다.
일렉트론 hello-world 출력하기
가장 먼저, 앱을 생성할 폴더를 미리 만들어 둡니다.
mkdir
윈도우 터미널 등을 이용하여 해당 폴더로 이동한 후, npm을 초기화하고 프로젝트를 생성합니다. 콘솔창에 다음과 같이 입력합니다.
npm init
그런 후 앱 정보를 입력합니다.
package name: (folder-select-app)
version: (1.0.0)
description: folder-selector
entry point: (index.js)
test command:
git repository:
keywords:
author: User
입력이 완료되면 아래와 같이 Package.json 파일이 생성됩니다.
{
"name": "folder-select-app",
"version": "1.0.0",
"description": "folder-selector",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "User",
"license": "ISC"
}
일렉트론이 구동되기 위해서는, 해당 디렉토리에서 일렉트론 패키지를 설치해야 합니다.
npm install --save-dev electron
해당 디렉토리에서 노드 모듈이 설치되었음을 확인할 수 있습니다.
Package.json에 script 항목에 “start” : electron . “ 를 추가합니다.
{
"name": "folder-select-app",
"version": "1.0.0",
"description": "folder-selector",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "User",
"license": "ISC"
이제 아래에서 생성하는 폴더 구조는 다음과 같이 구성이 됩니다.
App-folder
-- package.json
-- index.html
-- index.js
-- preload.jspackage.json과 동일한 app폴더에 index.html 생성합니다.
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>app폴더에 index.js 파일을 생성합니다. 쉽게 설명해서, 이 파일이 C, Java 등에서의 main(), ABAP의 경우 start-of-selection 의 역할이라고 볼 수 있습니다.
const { app, BrowserWindow } = require('electron')
// include the Node.js 'path' module at the top of your file
const path = require('path')
// modify your existing createWindow() function
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app폴더에 preload.js 파일을 작성합니다.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
이제 hello world를 출력하기 위한 파일은 모두 셋팅이 되었습니다. npm start를 통해 실행합니다.
npm start
Electron SAPUI5 앱 생성
여기까지는 일반 html 파일을 사용해서 일렉트론 앱을 실행시킨 상황이며 이제 SAPUI5 앱을 스캐폴딩하거나 구조화 해보도록 합니다.
터미널 창에서 앱 폴더로 이동한 후 요먼을 실행합니다.
yo
What would you like to do? (Use arrow keys)
Run a generator
> @sap/fiori
Ui5 Boilerplate
Easy Ui5
Opensapui5
Sap Ui5 App
Template Ui5 Project
(Move up and down to reveal more choices)
옵션은 적당히 아래와 같이 선택하였으며, module name만 신경써서 입력해 줍니다.
? Application Type SAPUI5 freestyle
? Which floorplan do you want to use? SAPUI5 Application
? Data source None
? View name View1
? Module name webcontent
? Application title App Title
? Application namespace
? Description A Fiori application.
? Project folder path D:\gdv\source\electron\electron_sapui5\folder-select-app
? Minimum SAPUI5 version 1.99.0
? Add deployment configuration No
? Add FLP configuration No
? Configure advanced options No
참고로 Visual Studio Code를 통해 GUI 형태로 스캐폴딩하고자 한다면 여기 방법을 참조할 수 있습니다. 또는 SAPUI5 Scaffolding 방법을 확인해 보시면 됩니다.
SAPUI5 앱의 설치가 완료되면 Visual Studio Code에서 정상적으로 설치가 되었는지 아래와 같이 확인할 수 있습니다.
Visual Sudio Code >> 좌측 탐색기에서 webcontent 하위에서 마우스 우클릭 >> Preview Applicattion >> 파레트에서 Fiori start 선택 합니다.
start를 선택하여 fiori 앱을 실행하면 정상적으로 앱이 실행됨을 확인할 수 있습니다.
그럼 이제까지 현재 폴더 구조는 다음과 같습니다.
main-app // 일렉트론 앱 메인
-- webcontent // SAPUI5 앱 폴더
-- wepapp
-- controller, view, model...UI5 App
-- index.html // TO-BE SAPUI5 메인 html
-- index.html // AS-IS html
-- index.js // 일렉트론 main 파일
-- package.json
-- preload.js
-- ...이제 일렉트론 앱의 main 진입점 파일인 index.js에서, Front-end 참조 부분을 SAPUI5를 바라보도록 수정을 합니다.
현재는 일렉트론 밑에 index.html을 참조하고 있으므로, 이를 SAPUI5 webapp 폴더 밑에 참조하도록 바꾸어주면 됩니다.
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});
// 이부분을 SAPUI5앱을 참조하도록 수정
// mainWindow.loadFile("index.html");
// SAPUI5 경로의 index.html로 변경
mainWindow.loadFile('webcontent/webapp/index.html');
sapui5로 index.html을 변경한 후 다시 일렉트론 앱을 실행합니다.( 아래 실행화면은 sapui5 버튼을 추가한 상태입니다.)
일렉트론 앱을 exe 파일로 변경하기
가장 쉽게 exe로 변환할 수 있는 방법 중 하나는 electron forge를 활용하는 것입니다.
app폴더로 이동하여, 아래의 명령을 차례대로 실행합니다.
npm install --save-dev @electron-forge/cli
npx electron-forge import
electron-forge dependency 추가가 완료되면 다음을 입력합니다.
npm run make
일렉트론으로 빌드시 용량은 기능에 비해 크지(?)만 자바 스크립트 및 cli을 통해 빌드할 수 있어 유용합니다.
out 폴더를 확인하면 exe 파일이 생성되어 있음을 확인 할 수 있습니다.
아래의 quick start 문서를 참고하여 작성되었습니다.
electron quick start : https://www.electronjs.org/docs/latest/tutorial/quick-start