전자 및 각도로 데스크톱 응용 프로그램을 구축하십시오

크로스 플랫폼 데스크톱 응용 프로그램 빌드 : 전자와 각도의 완벽한 조합 이 튜토리얼은 전자 및 각도를 사용하여 크로스 플랫폼 데스크톱 응용 프로그램을 구축하는 방법을 보여줍니다. Electron.js는 JavaScript, HTML 및 CSS를 사용하여 Windows, Linux 및 MacOS 용 데스크탑 응용 프로그램을 작성하는 인기있는 플랫폼입니다. Google Chromium 및 Node.js와 같은 강력한 플랫폼을 활용하고 운영 체제와 상호 작용하기위한 자체 API 세트를 제공합니다.

우리는 각도 CLI를 설치하고 새로운 각도 프로젝트를 만들고 NPM에서 최신 전자 버전을 개발 종속성으로 설치하는 방법을 배웁니다. 또한 자습서에는 GUI 창 생성 및 index.html 파일로드, main.js 파일을 메인 엔트리 포인트로 설정하고 각도 프로젝트를 구축 한 후 전자 응용 프로그램을 시작하기 위해 스크립트를 추가합니다.

또한, 우리는 IPC를 사용하여 Angular에서 Electron API를 호출하는 방법을 배우고, 이는 다른 프로세스 간의 통신을 허용합니다. Angular Application에서 BrowserWindow API를 호출하는 방법과 URL이로드 된 서브 모달 창을 작성하여 준비 할 때 표시하는 방법을 보여줍니다. 전자의 장점

Electron은 Google Chromium 및 Node.js와 같은 강력한 플랫폼을 사용하면서 기본 운영 체제와 상호 작용할 수있는 Rich API를 제공합니다. 웹 애플리케이션을 캡슐화하여 데스크탑 애플리케이션처럼 보이고 느껴지고 운영 체제 기능 (모바일 응용 프로그램 용 Cordova와 유사)에 액세스 할 수있는 기본 컨테이너를 제공합니다. 즉, JavaScript 라이브러리 또는 프레임 워크를 사용하여 응용 프로그램을 구축 할 수 있습니다. 이 튜토리얼에서는 Angular를 사용합니다.

예방 조치

이 튜토리얼은 다음과 같은 전제 조건을 충족해야합니다

TypeScript 및 Angular에 익숙합니다.

<.> 개발 시스템에 node.js 및 npm을 설치하십시오.

각도 cli의 설치

먼저, 각도 프로젝트를 만들고 사용하기위한 공식 도구 인 Angular CLI를 설치하십시오. 새 터미널을 열고 다음 명령을 실행하십시오.

우리는 전 세계적으로 각도 CLI를 설치합니다. EACCESS 오류로 인해 명령이 실패한 경우 Linux 또는 MacOS의 명령 전에 Sudo를 추가하거나 Windows의 관리자로 명령 프롬프트를 실행하십시오.

CLI가 성공적으로 설치된 경우 작업 디렉토리로 이동하여 다음 명령을 사용하여 새 각도 프로젝트를 만듭니다.

프로젝트 파일 생성 및 종속성이 NPM에서 설치되기를 기다리고 있습니다. 다음으로 프로젝트의 루트 디렉토리로 이동하여 다음 명령을 실행하여 NPM의 최신 전자 버전을 개발 종속성으로 설치하십시오. 이 글을 쓰는 시점 에서이 명령은 전자 v4.1.4를 설치합니다. main.js 파일을 작성

다음, main.js 파일을 만들고 다음 코드를 추가하십시오 :

.

npm install -g @angular/cli

이 코드는 단순히 GUI 창을 생성하고 index.html 파일을로드합니다 (Angular 응용 프로그램이 구축 된 후 Dist 폴더에서 사용할 수 있어야 함). 이 샘플 코드는 공식 입문 저장소에서 적용됩니다.

구성 package.json

다음, 프로젝트의 package.json 파일을 열고 기본 키를 추가하여 main.js 파일을 메인 엔트리 포인트로 설정하십시오.

시작 스크립트를 추가하십시오

다음, Angular Project를 구축 한 후 전자 응용 프로그램을 쉽게 시작하려면 스크립트를 추가해야합니다.

우리는 시작 : base-href ./ && 전자 스크립트를 추가했습니다

ng 빌드 -Base-href ./ 명령의 일부는 각도 응용 프로그램을 빌드하고 기본 href를 ./로 설정합니다.

cd ~
ng new electron-angular-demo

명령의 전자는 현재 디렉토리에서 전자 응용 프로그램을 시작합니다. 이제 터미널에서 다음 명령을 실행하십시오

는 전자 GUI 창을 열지 만 비워집니다. 콘솔에는 "로컬 리소스로드 :/Electron-angular-demo/dist/index.html"오류가 표시됩니다.

전자는 파일이 전혀 존재하지 않기 때문에 Dist 폴더에서 파일을로드 할 수 없습니다. 프로젝트 폴더를 보면 Angular CLI가 Dist 폴더가 아닌 Dist/Electron-angular-demo 폴더에서 응용 프로그램을 구축하는 것을 볼 수 있습니다.

<..> main.js 파일에서 Electron에게 Subfolders가없는 Dist 폴더에서 index.html 파일을 찾도록 알려줍니다.

npm install --save-dev electron@latest

는 전자를 실행하는 현재 폴더를 나타냅니다.

우리는 path.join () 메소드를 사용하여 현재 폴더의 경로를 /dist/index.html 경로에 연결합니다.

당신은 path의 두 번째 부분을 /dist/electron-angular-demo/index.html로 변경하거나 서브 폴더를 사용하지 않고 Dist 폴더의 파일을 출력하도록 각도 구성을 변경할 수 있습니다.
• angular.json 파일을 열고 프로젝트를 찾으십시오. → 아키텍트 → 빌드 → 옵션 → 출력 경로 키를 찾고 Dist/Electron-angular-demo에서 dist로 값을 변경하십시오.
터미널로 돌아가 다음 명령을 다시 실행하십시오.
• 스크립트는 NG 빌드 명령을 호출하여 Dist 폴더에서 각도 응용 프로그램을 빌드하고 현재 폴더에서 전자를 호출하여 각도 응용 프로그램을로드하는 전자 창을 시작합니다.
이것은 Angular를 실행하는 데스크탑 응용 프로그램의 스크린 샷입니다 :

(다음은 원본 텍스트와 일치하지만 단락과 제목은 읽고 이해하기 쉽도록 조정되었습니다.)

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

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

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

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

angular에서 전자 API를 호출합니다 이제 각도에서 전자 API를 호출하는 방법을 봅시다.

전자 응용 프로그램은 Node.js를 실행하는 기본 프로세스와 크롬 브라우저를 실행하는 렌더러 프로세스를 사용합니다. 우리는 Angular Application에서 직접 모든 전자 API에 액세스 할 수 없습니다.

우리는 IPC 또는 프로세스 간 통신을 사용해야합니다.이 통신은 운영 체제가 제공하는 메커니즘으로 다른 프로세스 간의 통신을 허용합니다.

모든 전자 API가 기본 프로세스에서 액세스 할 필요는 없습니다. 렌더러 프로세스에서 일부 API에 액세스 할 수 있으며 일부 API는 기본 프로세스 및 렌더러 프로세스에서 액세스 할 수 있습니다.

BrowserWindow (브라우저 Windows를 작성하고 제어하는 ​​데 사용)는 기본 프로세스에서만 사용할 수 있습니다. Desktopcapturer API (navigator.mediadevices.getUsermedia API를 사용하여 데스크탑에서 오디오 및 비디오를 캡처하기 위해 렌더러 프로세스에서만 사용할 수 있습니다. 한편, 클립 보드 API (시스템 클립 보드에서 복사 및 붙여 넣기 작업을 수행하기위한)는 기본 프로세스 및 렌더러 프로세스 모두에서 사용할 수 있습니다.

공식 문서에서 API의 전체 목록을 볼 수 있습니다.

각도 응용 분야에서 브라우저 위도우 API를 호출하는 예를 살펴 보겠습니다 (기본 프로세스에서만 사용할 수 있음).

<.> main.js 파일을 열고 ipcmain을 가져옵니다 :

다음, OpenModal () 함수를 정의하십시오

이 방법은 https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a Url이로드되어 준비된 경우 표시되는 서브 모달 창이 생성됩니다.

다음, 렌더러 프로세스에서 보낸 OpenModal 메시지를 듣고 메시지를받을 때 OpenModal () 함수를 호출하십시오.

이제 SRC/App/App.component.ts 파일을 열고 다음 가져 오기를 추가하십시오.

다음, IPC 변수를 정의하고 Call 요구 사항 ( 'Electron'). IPCrenderer는 각도 구성 요소에서 IPCRENDERER를 가져 오려는 IPCRENDERER : 입니다.

require () 메소드는 런타임시 전자에 의해 렌더러 프로세스에 전자를 주입하므로 전자에서 웹 응용 프로그램을 실행할 때만 사용할 수 있습니다.

마지막으로 다음 OpenModal () 메소드를 추가하십시오

우리는 ipcrenderer의 send () 메소드를 사용하여 기본 프로세스에 OpenModal 메시지를 보냅니다.

npm install -g @angular/cli

src/app/app.component.html 파일을 열고 버튼을 추가하고 OpenModal () 메소드에 바인딩합니다.

이제 다음 명령으로 데스크탑 응용 프로그램을 실행하십시오.

이것은 버튼이있는 기본 창의 스크린 샷입니다.

cd ~
ng new electron-angular-demo

"모달 오픈"버튼을 클릭하면 itepoint 웹 사이트가있는 모달 창이 열려야합니다. 이 GitHub 저장소 에서이 데모의 소스 코드를 찾을 수 있습니다.

결론

이 튜토리얼에서는 Angular를 전자를 사용하여 데스크톱 응용 프로그램으로 사용하여 구축 된 웹 응용 프로그램을 실행하는 방법을 살펴 보았습니다. 웹 개발 키트로 데스크탑 애플리케이션을 구축하는 것이 얼마나 쉬운 지 배웠기를 바랍니다.

(다음 내용은 원래 FAQ 부분이며 중국 표현 습관에 더 잘 맞도록 약간 조정됩니다.) faqs (faqs)

전자 및 각도 응용을 디버그하는 방법은 무엇입니까? 디버깅은 개발 프로세스의 중요한 부분입니다. 전자 및 각도 응용 분야의 경우 Chrome 개발자 도구를 사용할 수 있습니다. 개발자 도구를 열려면 바로 가기 키 Ctrl Shift I을 사용할 수 있거나 main.js 파일에 코드 줄을 추가 할 수 있습니다. 응용 프로그램이 시작될 때 개발자 도구가 열립니다. 그런 다음 웹 애플리케이션에서와 마찬가지로 요소를 확인하고 콘솔 로그를보고 디버그 코드를 할 수 있습니다.

분포를위한 전자 및 각도 응용 프로그램을 포장하는 방법은 무엇입니까?

전자 및 각도 응용 분배는 전자-패커거 또는 전자 빌더를 사용하여 분포를 위해 포장 될 수 있습니다. 이 도구를 사용하면 응용 프로그램을 다양한 운영 체제를위한 실행 파일로 패키지하는 데 도움이됩니다. 이름, 설명, 버전 및 더 많은 응용 프로그램을 사용자 정의 할 수 있습니다. 이 패키지를 DevDependencies로 설치 한 다음 Package.json 파일에 스크립트를 추가하여 패키지 명령을 실행해야합니다. 전자에서 각도 재료를 사용할 수 있습니까?

예. Angular Materials는 각도의 재료 설계를 구현하는 UI 구성 요소 라이브러리입니다. 사용자 친화적이고 반응 형 애플리케이션을 만드는 데 사용할 수있는 다양한 사전 제작 된 구성 요소를 제공합니다. Angular Material을 사용하려면 NPM 또는 원사를 사용하여 설치 한 다음 응용 프로그램에서 필요한 모듈을 가져와야합니다. 전자 및 각도에서 파일 시스템 작업을 처리하는 방법은 무엇입니까? 전자는 파일 읽기 및 쓰기와 같은 파일 시스템 작업을 처리하는 데 사용할 수있는 FS (파일 시스템)라는 내장 모듈을 제공합니다. 전자 적용의 주요 과정에서 사용할 수 있습니다. 그러나 렌더러 프로세스 (Angular)에서 사용하려면 기본 프로세스와 렌더러 프로세스간에 전자를 통신하기 위해 Electron의 IPC (프로세스 간 통신)를 사용해야합니다.

전자 및 각도 응용 분야에서 Node.js 모듈을 사용하는 방법은 무엇입니까?

전자를 사용하면 응용 프로그램에서 node.js 모듈을 사용할 수 있습니다. 주요 프로세스에서 직접 사용할 수 있습니다. 그러나 렌더러 프로세스 (Angular)에서 사용하려면 전자 구성에서 Nodeintegration을 활성화해야합니다. 응용 프로그램이 원격 컨텐츠를로드하면 NodeIntegration을 활성화하면 보안 위험이 발생하므로 ContextSolation 및 Preload Scripts와 같은보다 안전한 옵션을 사용하는 것이 좋습니다. mainWindow.webContents.openDevTools() 전자 및 각도 응용 프로그램을 업데이트하는 방법은 무엇입니까?

전자 및 각도 응용 분야는 Electron의 Autoupdater 모듈을 사용하여 업데이트 할 수 있습니다. 이 모듈을 사용하면 백그라운드에서 업데이트를 자동으로 다운로드하고 설치할 수 있습니다. 또한 사용자가 업데이트를 수동으로 확인할 수있는 사용자 인터페이스를 제공 할 수도 있습니다.

전자와 함께 각도 CLI를 사용할 수 있습니까?

예. Angular CLI는 Angular의 명령 줄 인터페이스입니다. 각도 응용 프로그램을 작성, 개발 및 유지 관리하는 데 도움이됩니다. 이를 사용하여 구성 요소, 서비스, 모듈 등을 생성 할 수 있습니다. 전자로 실행하기 전에 각 응용 분야를 구축하는 데 사용할 수도 있습니다. 전자 및 각도 응용의 보안을 보호하는 방법은 무엇입니까?

전자 및 각도 응용 분야의 보안 보호는 사용자 데이터를 보호하는 데 필수적입니다. Electron은 컨텍스트 분리 활성화, 샌드 박스 모드를 사용하여 노드 인드 그레이션 비활성화 등과 같은 보안 제안을 제공합니다. 또한 사용자 입력 청소, HTTPS 프로토콜 사용 등의 각도 보안 모범 사례를 따라야합니다.

전자 및 각도 응용 프로그램을 테스트하는 방법은 무엇입니까?

Jasmine 및 Karma (Angular) 및 Spectron (전자)과 같은 테스트 프레임 워크를 사용하여 전자 및 각도 응용을 테스트 할 수 있습니다. 이러한 프레임 워크를 사용하면 단위 테스트 및 엔드 투 엔드 테스트를 작성하여 응용 프로그램이 예상대로 작동하는지 확인할 수 있습니다.

전자는 다른 프레임 워크 나 라이브러리와 함께 사용할 수 있습니까? 예. 전자는 프레임 워크에 관한 것이 아니므로 JavaScript 프레임 워크 또는 라이브러리와 함께 사용할 수 있습니다. Angular 외에도 React, Vue.js, Svelte 등과 함께 사용할 수 있습니다. 원하는 경우 기본 JavaScript와 함께 사용할 수도 있습니다.

위 내용은 전자 및 각도로 데스크톱 응용 프로그램을 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!