Creeu una aplicació d'escriptori multiplataforma amb Electron.js

Bloc

Creeu una aplicació d'escriptori multiplataforma amb Electron.js

En aquest tutorial crearem una aplicació d'escriptori multiplataforma amb electrons i tecnologies web com TypeScript i Angular.

Electron.js és una plataforma popular per construir multiplataforma aplicacions d'escriptori per Windows, Linux i macOS amb JavaScript , HTML , i CSS . És creat i mantingut per GitHub i està disponible sota la llicència permissiva del MIT. Inicialment es va crear per a GitHub Editor d’àtoms , però des de llavors s'ha utilitzat per crear aplicacions per empreses com Microsoft (Visual Studio Code), Facebook , Fluix , i Docker .

Electrons fa ús de plataformes potents com Google Chromium i Node.js , però també proporciona el seu propi conjunt de rics API per interactuar amb el sistema operatiu subjacent.

Electrons proporciona un contenidor natiu que s'embolica aplicacions web de manera que tenen aspecte i sensació aplicacions d'escriptori amb accés a les funcions del sistema operatiu (similar a Cordova per aplicacions mòbils ). Això significa que podem utilitzar qualsevol Biblioteca JavaScript o bé marc per construir el nostre aplicació . En aquest tutorial , farem servir angular .

Requisits previs

Per a aquest tutorial, haureu de cobrir aquests requisits previs:

  • Familiaritat amb TypeScript i angular .
  • Node.js i npm instal·lats a la màquina de desenvolupament.

Instal·lació de CLI Angular

Comencem per instal·lant CLI angular , que és l'eina oficial per crear i treballar Projectes angulars . Obriu un terminal nou i executeu l'ordre següent:

npm install -g @angular/cli

Instal·larem el CLI angular globalment al nostre sistema. Si l'ordre falla amb el fitxer EACCESS error, afegiu sudo abans del vostre comandament Linux o bé macOS , o executeu el símbol del sistema com a administrador a Windows .

Si la CLI s'ha instal·lat correctament, aneu al directori de treball i creeu-ne un de nou Projecte angular utilitzant les ordres següents:

cd ~ ng new electron-angular-demo

Espereu a que es generin els fitxers del vostre projecte i a què s’instal·lin les dependències sobre el nivell del mar . A continuació, aneu a l'arrel del projecte i executeu l'ordre següent per instal·lar la versió més recent de Electrons des de sobre el nivell del mar com a dependència del desenvolupament:

npm install --save-dev electron@latest

A partir d’aquest escrit, aquesta ordre s’instal·larà Electró v4.1.4 .

Llegiu també: Creeu una aplicació bàsica CRUD amb Node i React

A continuació, creeu un main.js i afegiu el codi següent:

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 }) ); // Open the DevTools. 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() })

Aquest codi simplement crea una finestra GUI i carrega el index.html que hauria d'estar disponible a dist després de crear la nostra carpeta Aplicació angular . Aquest codi d'exemple s'adapta del fitxer repositori inicial inicial .

A continuació, obriu el package.json del vostre projecte i afegiu el main per configurar el main.js com a punt d'entrada principal:

{ 'name': 'electron-angular-demo', 'version': '0.0.0', 'main': 'main.js', // [...] }

A continuació, hem d'afegir un script per iniciar fàcilment l'aplicació Electron després de construir el projecte Angular:

{ 'name': 'electron-angular-demo', 'version': '0.0.0', 'main': 'main.js', 'scripts': { 'ng': 'ng', 'start': 'ng serve', 'build': 'ng build', 'test': 'ng test', 'lint': 'ng lint', 'e2e': 'ng e2e', 'start:electron': 'ng build --base-href ./ && electron .' }, // [...] }

Hem afegit el start:electron script que executa el ng build --base-href ./ && electron . comandament:

  • El ng build --base-href ./ part de l'ordre construeix l'aplicació Angular i estableix la base href a ./.
  • El electron . part de l'ordre inicia la nostra aplicació Electron des del directori actual.

Ara, al terminal, executeu l'ordre següent:

npm run start:electron

An GUI d’electrons s'obrirà la finestra, però quedarà en blanc. A la consola, veureu el fitxer No es permet carregar el recurs local: /electron-angular-demo/dist/index.html error.

Electrons no pot carregar el fitxer des del dist carpeta perquè simplement no existeix. Si mireu a la carpeta del vostre projecte, ho veureu CLI angular crea la vostra aplicació a dist/electron-angular-demo carpeta en lloc de només el dist carpeta.

Al nostre main.js arxiu, ho estem dient Electrons buscar el index.html al fitxer dist carpeta sense subcarpeta:

mainWindow.loadURL( url.format({ pathname: path.join(__dirname, `/dist/index.html`), protocol: 'file:', slashes: true }) );

__dirname fa referència a la carpeta actual des de la qual estem executant Electron.

Utilitzem el path.join() per unir el camí de la carpeta actual amb el /dist/index.html Camí.

Podeu canviar la segona part del camí a /dist/electron-angular-demo/index.html o, millor encara, canvieu la configuració angular per generar els fitxers a dist sense utilitzar cap subcarpeta.

azure-devops-node-api

Obriu el angular.json fitxer, localitzeu el projects → architect → build → options → outputPath clau i canvieu el seu valor de dist/electron-angular-demo a només dist:

'projects': { 'electron-angular-demo': { 'root': '', 'sourceRoot': 'src', 'projectType': 'application', 'prefix': 'app', 'schematics': {}, 'architect': { 'build': { 'builder': '@angular-devkit/build-angular:browser', 'options': { 'outputPath': 'dist',

Torneu al vostre terminal i torneu a executar l'ordre següent:

npm run start:electron

El guió cridarà el ng build ordre per construir el fitxer Aplicació angular al dist carpeta i truqueu electron des de la carpeta actual per iniciar el fitxer Electrons finestra amb el Aplicació angular carregat.

Aquesta és una captura de pantalla del nostre ap de l'escriptori p corrent angular :

Creeu una aplicació d'escriptori multiplataforma amb Electron.js

Crida a les API Electron des d’Angular

Vegem ara com podem trucar a les API Electron des d’Angular.

Llegiu també: Tutorial d'aplicacions Node.js, ExpressJs, MongoDB i Vue.js (MEVN Stack)

Aplicacions Electron fer ús d’un procés principal en execució Node.js i un procés de renderització que executa el fitxer Navegador Chromium . No podem accedir directament a tots API d’Electron des del Aplicació angular .

Hem de fer ús de IPC o Comunicació entre processos , que és un mecanisme proporcionat pels sistemes operatius per permetre la comunicació entre diferents processos.

No tot API d’electrons cal accedir-hi des del procés principal. Es pot accedir a algunes API des del procés de renderització i a algunes API, tant des del procés principal com des del renderitzat.

Finestra del navegador , que s’utilitza per crear i controlar les finestres del navegador, només està disponible al procés principal. El desktopCapturer L'API (que s'utilitza per capturar àudio i vídeo des de l'escriptori mitjançant l'API navigator.mediaDevices.getUserMedia) només està disponible al procés de renderització. Mentrestant porta-retalls L’API (per realitzar operacions de còpia i enganxa al porta-retalls del sistema) està disponible tant als processos principals com al renderitzador.

Podeu veure la llista completa de API des del documents oficials .

Vegem un exemple de trucada al BrowserWindow API, disponible només al procés principal, des de Aplicació angular .

Obriu el main.js fitxer i importació ipcMain:

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

A continuació, definiu el openModal() funció:

function openModal(){ const { BrowserWindow } = require('electron'); let modal = new BrowserWindow({ parent: mainWindow, modal: true, show: false }) modal.loadURL('https://www.sitepoint.com') modal.once('ready-to-show', () => { modal.show() }) }

Aquest mètode crearà una finestra modal infantil, carregarà el [https://www.sitepoint.com](https://www.sitepoint.com) URL que hi ha al seu interior i mostreu-lo quan estigui a punt.

Llegiu també: Aplicació web Node, Express, React.js, Graphql i MongoDB CRUD

A continuació, escolteu un openModal missatge que s'enviarà des del procés de renderització i trucarà al openModal() funció quan es rep el missatge:

ipcMain.on('openModal', (event, arg) => { openModal() })

Ara, obriu el src/app/app.component.ts i afegiu la importació següent:

import { IpcRenderer } from 'electron';

A continuació, definiu un ipc variable i crida require('electron').ipcRenderer per importar ipcRenderer al component Angular:

private ipc: IpcRenderer constructor(){ if ((window).require) { try { this.ipc = (window).require('electron').ipcRenderer; } catch (e) { throw e; } } else { console.warn('App not running inside Electron!'); } }

El require() El mètode s'injecta en temps d'execució en el procés de renderització per Electron i, com a tal, només estarà disponible quan s'executi el vostre aplicació web dins Electrons .

Llegiu també: WebSocket + Node.js + Express: tutorial pas a pas mitjançant Typescript

Finalment, afegiu el següent openModal() mètode:

openModal(){ console.log('Open a modal'); this.ipc.send('openModal'); }

Utilitzem el send() mètode de ipcRenderer enviar un openModal missatge al procés principal.

Obriu el src/app/app.component.html fitxer i afegiu un botó i, a continuació, lligueu-lo al openModal() mètode:

Open Modal

Ara, executeu l'aplicació d'escriptori mitjançant l'ordre següent:

millor constructor de gui de pitó
npm run start:electron

Aquesta és una captura de pantalla de la finestra principal amb un botó:

Creeu una aplicació d'escriptori multiplataforma amb Electron.js

Podeu trobar el codi font d'aquesta demostració des d'aquesta pàgina Dipòsit de GitHub .

Conclusió

En aquest tutorial, hem analitzat com executar un aplicació web construït amb angular tenir un aplicació d'escriptori que utilitza Electron.js . Esperem que hàgiu après el fàcil que pot ser començar creació d'aplicacions d'escriptori amb el teu desenvolupament web joc d'eines

#electron #angular #typescript # desenvolupament web

www.sitepoint.com

Creeu una aplicació d'escriptori multiplataforma amb Electron.js

En aquest tutorial crearem una aplicació d'escriptori multiplataforma amb electrons i tecnologies web com TypeScript i Angular.