If you can build a website, you can build a desktop app.

Javascript 코드를 작성하는 방법을 알고 있다면 기본 애플리케이션처럼 보이고 작동하는 데스크톱 애플리케이션을 빌드할 수 있습니다. 뿐만 아니라 Angular의 힘을 데스크톱 앱의 세계로 가져와 IU를 멋지게 보이게 할 수도 있습니다 😍 충분히 이야기하고 커피 한 잔 마시고 시작합시다.

우리 뭐 할까?!!

Electron 및 Angular을 사용하여 기본 데스크톱 애플리케이션을 빌드할 것입니다.

Before we start I expect that you have some basic knowledge of NodeJs and Angular.

각도 설정

Angular CLI가 아직 설치되어 있지 않은 경우 다음 명령을 실행하여 설치합니다.

$ npm install -g @angular/cli

이제 새로운 Angular 애플리케이션을 시작하겠습니다.

$ ng new angular-electron

사용하려는 스타일 컴파일러에 대해 묻고 Angular 라우터 등을 사용하려는 경우 이 구성은 전혀 중요하지 않습니다.

다음을 실행하여 애플리케이션이 작동하는 것을 볼 수 있습니다.

$ cd angular-electron
$ ng serve

그런 다음 http://localhost:4200/에서 브라우저를 엽니다. 어쨌든 가장 재미있는 부분은 아닙니다. 계속 진행하겠습니다.

프로젝트의 src 폴더에 있는 index.html 파일을 수정하고 기본 태그에 마침표를 추가하여 앱이 정적 파일을 찾을 수 있도록 해야 합니다. 이 단계를 건너뛰지 마세요. 매우 중요합니다.

<base href="./">

전자 설정

이제 애플리케이션에 Electron을 추가하겠습니다.

$ npm install --save-dev electron

그리고 약간의 종속성도 필요합니다.

$ npm install --save-dev app-root-path

이제 Electron 애플리케이션을 위한 새 폴더를 생성해 보겠습니다.

$ mkdir bin && cd bin && touch main.ts

보시다시피 우리는 main.ts 파일이 있는 bin 폴더를 만들었고 ts가 아닌 js 확장자로 기본 파일을 만든 이유는 이미 Angular 응용 프로그램에 Typescript를 사용하고 있기 때문입니다. 전체 프로젝트에 대한 Typescript?!!

이제 main.ts 파일에 코드를 추가해 보겠습니다(마지막으로 코드를 작성합니다 😅).

import { app, BrowserWindow } from 'electron';
import { resolve } from 'app-root-path';

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win: BrowserWindow;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600
  });

  // Load the angular app.
  // Make sure that this path targets the index.html of the
  // angular application (the distribution).
  win.loadFile(resolve('dist/angular-electron/index.html'));

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi-windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}

// This method will be called when the Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On macOS, it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});

// In this file, you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

위의 코드는 official website에서 언급한 것과 정확히 동일하지만 Typescript 구문에서 Angular 응용 프로그램의 항목 파일에 연결되는 win.loadFile 함수가 "아직 빌드하지 않았습니다"라는 점에 유의하십시오.

자, 우리가 하고 있는 일이 제대로 작동하는지 확인해야겠죠!!

이 응용 프로그램을 빌드하고 실행할 수 있도록 package.json 파일에 스크립트를 추가해 보겠습니다.

"main" : "bin/main.js",
"scripts": {
 ...
   “electron”: “tsc bin/main.ts && ng build && electron bin/main.js”
}

이제 실제로 작동하는 것을 봅시다.

$ npm run electron

지금은 각진 로고가 있는 응용 프로그램이 실행되고 있는 것을 볼 수 있습니다. 지금까지는 아주 좋았습니다 😉.

자, 이제 애플리케이션이 실행되고 있지만 Angular 애플리케이션 자체 내에서 누가 Electron API를 사용할 수 있습니까?!!

당황하지 마세요. 달리기만큼 쉽습니다…

$ npm install --save-dev ngx-electron

Angular 애플리케이션 내에서 Electron API에 액세스합니다.

삶을 훨씬 더 쉽게 만들어 줄 ngx-electron을 방금 설치했으므로 사용 방법을 살펴보겠습니다.

Angular 내부app.module.ts 파일과 함께 사용했던 다른 모듈처럼 이 모듈을 가져와야 합니다.

import { NgxElectronModule } from 'ngx-electron';
@NgModule({
imports: [
  ...
  NgxElectronModule
]
})
export class AppModule {}

이제 우리는 다음과 같은 구성 요소에서 사용할 수 있습니다.

import { ElectronService } from 'ngx-electron';
export class AppComponent {
   constructor(private _electronService: ElectronService) {
   // now we have access to electron api through this service
   }
}

우리가 실제로 Electron API에 접근할 수 있는지 봅시다.
app.component.ts 파일의 내용을 다음으로 바꿉니다.

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-electron';

  versions = { node: '', chrome: '', electron: '' };

  constructor(private _electronService: ElectronService) {
    // Make sure that app is being executed inside of electron.
    if (this._electronService.isElectronApp) {
      // We have access to node process.
      this.versions.node = this._electronService.process.versions.node;
      this.versions.chrome = this._electronService.process.versions.chrome;
      this.versions.electron = this._electronService.process.versions.electron;
    }
  }
}

그리고 app.component.html 파일의 내용을 다음으로 바꿉니다.

<!--The content below is only a placeholder and can be replaced.-->

<div style="text-align:center">

  <h1>Welcome to {{ title }}!</h1>

  <ul>
    <li>Node version {{ versions.node }}</li>
    <li>Chrome version {{ versions.chrome }}</li>
    <li>Electron version {{ versions.electron }}</li>
  </ul>

</div>

그래서 당신은 어떻게 생각하십니까? 많이 생각하지 말고 행동으로 봅시다 😅.

$ npm run electron

지금은 우리가 사용하는 코드, 크롬 및 전자 버전으로 응용 프로그램이 실행되고 실행되는 것을 볼 수 있습니다. 음, 해냈습니다 😉.

결론

데스크톱 앱을 구축하는 것은 그리 어렵지 않으며 노드, 각도, 전자 및 TypeScript와 같은 몇 가지 강력한 도구를 사용하여 멋진 작업을 수행할 수 있습니다. 당신이 웹 개발자라도 여가 시간에 새로운 기술을 시도하는 것은 나쁘지 않습니다. 새로운 기술을 시도함으로써 새로운 것을 배울 것이라고 확신합니다 😉.

여유 시간이 있으면 응용 프로그램에 대한 몇 가지 단위 테스트를 작성하기 위해 새 게시물을 추가할 수 있습니다.

막히면 언제든지 이 응용 프로그램의 Github repo을 참조할 수 있습니다.

이 게시물은 원래 Medium에 게시되었습니다.