Electron 기초: Angular Electron 앱을 구성하고 실행하는 방법

Electron 기초: Angular Electron 앱을 구성하고 실행하는 방법

Electron을 사용하면 Windows, Mac 및 Linux용 데스크톱 애플리케이션을 구축할 수 있습니다. Electron을 사용하여 앱을 빌드할 때 데스크톱 애플리케이션 창을 통해 앱을 미리 보고 실행할 수 있습니다.





Electron을 사용하여 일반적인 웹 브라우저 대신 데스크탑 창에서 실행되도록 Angular 앱을 구성할 수 있습니다. 앱 자체 내에서 JavaScript 파일을 사용하여 이 작업을 수행할 수 있습니다.





Electron을 구성하면 일반 Angular 앱에서와 같이 개발을 계속할 수 있습니다. 애플리케이션의 주요 부분은 여전히 ​​동일한 표준 Angular 구조를 따릅니다.





애플리케이션의 일부로 Electron을 설치하는 방법

Electron을 사용하려면 node.js를 다운로드하여 설치하고 npm install을 사용하여 앱에 Electron을 추가해야 합니다.

  1. 다운로드 및 설치 노드.js . 버전을 확인하여 올바르게 설치했는지 확인할 수 있습니다.
    node -v
    노드에는 다음이 포함됩니다. npm, 자바스크립트 패키지 관리자 . npm 버전:
    npm -v를 확인하여 npm이 설치되었는지 확인할 수 있습니다.
  2. 다음을 사용하여 새 Angular 응용 프로그램을 만듭니다. 새로운 명령. 이것은 필요한 모든 것을 포함하는 폴더를 생성합니다 Angular 프로젝트에 필요한 파일
    ng new electron-app
  3. 응용 프로그램의 루트 폴더에서 다음을 사용하십시오. npm Electron.
    npm install --save-dev electron 설치
  4. 앱의 node_modules 폴더에 Electron을 위한 새 폴더가 생성됩니다.   프로젝트 내부의 기본 JS 파일 위치
  5. 컴퓨터에 Electron을 전역적으로 설치할 수도 있습니다.
    npm install -g electron 

각 전자 응용 프로그램의 파일 구조

Electron은 바탕 화면 창을 만들고 관리하기 위해 기본 JavaScript 파일이 필요합니다. 이 창은 그 안에 있는 앱의 콘텐츠를 표시합니다. JavaScript 파일에는 사용자가 창을 닫는 경우와 같이 발생할 수 있는 다른 이벤트도 포함됩니다.



  프로젝트의 색인 HTML 파일 위치

런타임에 표시되는 콘텐츠는 index.html 파일에서 가져옵니다. 기본적으로 index.html 파일은 내부에서 찾을 수 있습니다. src 폴더 및 런타임에 빌드된 복사본이 자동으로 내부에 생성됩니다. 거리 폴더.

  폴더의 기본 앱 구성 요소 위치

index.html 파일은 일반적으로 다음과 같습니다.





<!doctype html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root> </app-root>
</body>
</html>

body 태그 안에는 태그가 있습니다. 그러면 Angular 애플리케이션의 기본 앱 구성 요소가 표시됩니다. 주요 앱 구성 요소는 src/앱 폴더.

  브라우저에서 런타임 시 전자

Electron을 사용하여 데스크탑 창에서 Angular 애플리케이션을 여는 방법

main.js 파일을 만들고 데스크톱 창에서 애플리케이션 콘텐츠를 열도록 구성합니다.





네트워크 암호를 변경하는 방법 Windows 10
  1. 프로젝트의 루트에 파일을 생성합니다. 메인.js . 이 파일에서 Electron을 초기화하여 응용 프로그램 창을 만드는 데 사용할 수 있습니다.
    const { app, BrowserWindow } = require('electron');
  2. 특정 너비와 높이의 새 바탕 화면 창을 만듭니다. 인덱스 파일을 창에 표시할 내용으로 로드합니다. 인덱스 파일의 경로가 앱의 이름과 일치하는지 확인하십시오. 예를 들어 앱 이름을 'electron-app'으로 지정한 경우 경로는 'dist/electron-app/index.html'.
    function createWindow() { 
    win = new BrowserWindow({width: 800, height: 800});
    win.loadFile('dist/electron-app/index.html');
    }
    가 됩니다.
  3. 앱이 준비되면 createWindow() 함수를 호출합니다. 그러면 앱에 대한 애플리케이션 창이 생성됩니다.
    app.whenReady().then(() => { 
    createWindow()
    })
  4. 에서 src/index.html 파일에서 베이스 태그에서 href 속성을 './'로 변경하십시오.
    <base href="./">
  5. ~ 안에 패키지.json , 을 추가하다 기본 필드에 입력하고 main.js 파일을 값으로 포함합니다. 이것은 앱의 진입점이 될 것이므로 애플리케이션이 app.
    { 
    "name": "electron-app",
    "version": "0.0.0",
    "main" : "main.js",
    ....
    }
    를 시작할 때 main.js 파일을 실행합니다.
  6. 에서 .browserslistrc 파일에서 iOS 사파리 버전 15.2-15.3을 제거하도록 목록을 수정합니다. 이렇게 하면 컴파일할 때 콘솔에 호환성 오류가 표시되지 않습니다.
    last 1 Chrome version 
    last 1 Firefox version
    last 2 Edge major versions
    last 2 Safari major versions
    last 2 iOS major versions
    Firefox ESR
    not ios_saf 15.2-15.3
    not safari 15.2-15.3
  7. 에서 기본 콘텐츠를 삭제합니다. src/app/app.component.html 파일. 새로운 콘텐츠로 교체하십시오.
    <div class="content"> 
    <div class="card">
    <h2> Home </h2>
    <p>
    Welcome to my Angular Electron application!
    </p>
    </div>
    </div>
  8. 콘텐츠에 스타일을 추가하십시오. src/app/app.component.css 파일.
    .content { 
    line-height: 2rem;
    font-size: 1.2em;
    margin: 48px 10%;
    font-family: Arial, sans-serif
    }
    .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 85%;
    padding: 16px 48px;
    margin: 24px 0px;
    background-color: whitesmoke;
    font-family: sans-serif;
    }
  9. 전체적인 스타일링을 더해보세요. src/styles.css 기본 여백 및 패딩을 제거하는 파일입니다.
    html { 
    margin: 0;
    padding: 0;
    }

전자 애플리케이션을 실행하는 방법

창에서 애플리케이션을 실행하려면 package.json의 스크립트 배열에서 명령을 구성하십시오. 그런 다음 터미널에서 명령을 사용하여 앱을 실행합니다.

  1. ~ 안에 패키지.json , 스크립트 배열 내부에 Angular 앱을 빌드하고 Electron을 실행하는 명령을 추가합니다. 스크립트 배열의 이전 항목 뒤에 쉼표를 추가해야 합니다.
    "scripts": { 
    ...
    "electron": "ng build && electron ."
    },
  2. 데스크탑 창에서 새 Angular 애플리케이션을 실행하려면 프로젝트의 루트 폴더에 있는 명령줄에서 다음을 실행하십시오.
  3. 애플리케이션이 컴파일될 때까지 기다리십시오. 완료되면 웹 브라우저에서 Angular 앱이 열리는 대신 데스크탑 창이 열립니다. 바탕 화면 창에 Angular 앱의 콘텐츠가 표시됩니다.
  4. 웹 브라우저에서 애플리케이션을 계속 보려면 ng serve 명령을 실행할 수 있습니다.
    ng serve
  5. 사용 중인 경우 봉사의 명령을 실행하면 앱의 콘텐츠가 웹 브라우저에 계속 표시됩니다. 로컬 호스트:4200.

Electron으로 데스크탑 애플리케이션 구축하기

Electron을 사용하여 Windows, Mac 및 Linux에서 데스크톱 애플리케이션을 구축할 수 있습니다. 기본적으로 ng serve 명령을 통해 웹 브라우저를 사용하여 Angular 애플리케이션을 테스트할 수 있습니다. 웹 브라우저 대신 데스크탑 창에서도 열리도록 Angular 애플리케이션을 구성할 수 있습니다.

JavaScript 파일을 사용하여 이 작업을 수행할 수 있습니다. index.html 및 package.json 파일도 구성해야 합니다. 전체 응용 프로그램은 여전히 ​​일반 Angular 응용 프로그램과 동일한 구조를 따릅니다.

데스크톱 응용 프로그램을 빌드하는 방법에 대해 자세히 알아보려면 Windows Forms 앱을 탐색할 수도 있습니다. Windows Forms 앱을 사용하면 C# 파일에 코딩 논리를 추가하는 동시에 UI 요소를 클릭하여 캔버스로 끌 수 있습니다.