Electron으로 웹 서비스를 데스크탑 애플리케이션으로 쉽게 만들기

* 개발 목표  : Build cross platform desktop apps with JavaScript, HTML, and CSS

one source, multi use 란 말이 하나의 소설이 만화, 영화, 웹툰, 드라마 등 여러곳으로 파장되듯 소프트웨어 개발에도 적용하면 사용 확장성이 늘어날 것 같다.

HTML, CSS, JavaScript 등을 이용해서  만든 ChatASTRO라는 AI 점성술사 웹 서비스를 데스크탑 애플리케이션으로 만들고자 한다. 이렇게 만든 데스크탑 애플리케이션은 윈도우, 맥, 리눅스에서 설치할 수 있다.

 

* 

 * 프로젝트 내용 :  챗아스트로 웹 서비스를 데스크탑 애플리케이션으로 만들기 

챗아스트로 웹서비스 : https://chatastro.pages.dev 

ChatASTRO, AI Astrologer

* 사용 기술 및 플랫폼 : Electron 

* 개발 절차 

1.  Node.js 설치 : https://nodejs.org/ko/download

다운로드 | Node.js

2. 프로젝트 폴더 생성 및 이동 

        mkdir chatastro-electron-app
        cd chatastro-electron-app

3. package.json 파일 초기화 

     npm init

    package name : chatastro_electron_app

    version : 1.0.0

   description : chatastro electron app

   entry point : index.js

   ...

4. 프로젝트에 Electron 설치

    npm install electron --save-dev

5. index.js 파일 만들고 기본 코드 작성

6. index.html 파일 작성 대신 chatastro 의 웹서비스 load

 

* index.js 파일은 https://chatastro.pages.dev 페이지를  electron의 BrowerWindow 에 로드하는 코드가 기본으로 들어감

const { app, BrowserWindow } = require('electron');

function createWindow() {
    // 브라우저 창을 만들기
    const mainWindow = new BrowserWindow({
        width: 400,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            // 여기에 partition 설정을 추가
            // partition: 'persist:chatastro_electron_app'
        }
    });

    // index.html 파일대신, 여기서는 https://chatastro.pages.dev 사이트 불러오기 실행
    //   mainWindow.loadFile('index.html');
    mainWindow.loadURL('https://chatastro.pages.dev');

	// 새 창에서 링크가 열릴 때마다 이벤트를 처리.
  	mainWindow.webContents.setWindowOpenHandler(({ url }) => {
    	const newWindow = new BrowserWindow({
      		width: 800,
      		height: 600,
      	webContents: { ...mainWindow.webContents },
    });
   	newWindow.loadURL(url);
    return { action: 'deny' }; // deny을 반환하면 기본 창을 새로 만드는 것을 막는다.
  });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

* 특이 사항 :  웹페이지에서 <a href="xxx"> 새로운 창을 띄울 때 target="_blank" 태그를 꼭 넣어줘야 함.

                      target="_blank" 옵션을 넣어야 별도창에서 실행이 되고 원래 화면의 내용이 유지가 됨. 

웹브라우저에서는 이전가기 버튼 실행시 이전 화면의 내용이 잘 유지가 되도록 설계가 되어있어서 차이를 모르겠지만 웹뷰앱이나 electron 애플리케이션에서는 별도창에 뜨지 않을 경우 원래 화면으로 갈 때 데이터를 캐쉬해주는 복잡한 작업이 이루어 져야 함. 위 소스에서는 newWindow 만드는 부분이 별도 창 띄우는 코드임.

 

7. package.json 파일의 scripts 부분에 아래 코드 넣기

"scripts": {
  "start": "electron ."
}

8.  실행

npm start

9. electron-builder 이용한 배포/빌드

electron-builder

   

💕 다음편에 계속됩니다....