Construisez une application de bureau avec électron et angulaire

Créer des applications de bureau multiplateforme: la combinaison parfaite d'électrons et angulaires

Ce tutoriel montre comment créer des applications de bureau multiplateforme à l'aide d'électron et d'angulaires. Electron.js est une plate-forme populaire pour créer des applications de bureau pour Windows, Linux et MacOS à l'aide de JavaScript, HTML et CSS. Il exploite des plates-formes puissantes telles que Google Chromium et Node.js et fournit son propre ensemble d'API pour interagir avec le système d'exploitation.

Nous apprendrons à installer la CLI angulaire, à créer un nouveau projet angulaire et à installer la dernière version de Electron à partir de NPM en tant que dépendance de développement. Le tutoriel comprend également la création d'une fenêtre GUI et le chargement du fichier index.html, la définition du fichier main.js comme point d'entrée principal et l'ajout d'un script pour démarrer l'application Electron après la création du projet angulaire.

De plus, nous apprendrons à appeler l'API Electron à partir d'Angular en utilisant IPC (Interprocess Communication), qui permet la communication entre différents processus. Nous allons montrer comment appeler l'API Browserwindow à partir d'une application angulaire, et comment créer une fenêtre sous-mobile où l'URL est chargée et l'afficher lorsqu'il est prêt.

Avantages de l'électron

Electron utilise des plates-formes puissantes telles que Google Chromium et Node.js, tout en fournissant des API riches pour interagir avec le système d'exploitation sous-jacent. Il fournit un conteneur natif pour encapsuler les applications Web, les faire ressembler et se sentir comme des applications de bureau, et avoir accès aux fonctionnalités du système d'exploitation (similaire à Cordova pour les applications mobiles). Cela signifie que nous pouvons utiliser n'importe quelle bibliothèque ou cadre JavaScript pour créer nos applications. Dans ce tutoriel, nous utiliserons Angular.

Précautions

Ce tutoriel doit répondre aux conditions suivantes:

• familier avec TypeScript et Angular.
• Installez Node.js et NPM sur la machine de développement.

Installation de CLI angulaire

Tout d'abord, installez la CLI angulaire, l'outil officiel pour créer et utiliser des projets angulaires. Ouvrez un nouveau terminal et exécutez la commande suivante:

<code class="language-bash">npm install -g @angular/cli</code>

Nous allons installer la CLI angulaire à l'échelle mondiale. Si la commande échoue en raison d'une erreur EACCESS, ajoutez Sudo avant la commande dans Linux ou MacOS, ou exécutez une invite de commande en tant qu'administrateur dans Windows.

Si la CLI est installée avec succès, accédez à votre répertoire de travail et créez un nouveau projet angulaire en utilisant la commande suivante:

<code class="language-bash">cd ~
ng new electron-angular-demo</code>

En attente de l'installation de la génération de fichiers de projet et des dépendances à partir de NPM. Ensuite, accédez au répertoire racine du projet et exécutez la commande suivante pour installer la dernière version de Electron à partir de NPM en tant que dépendance de développement:

<code class="language-bash">npm install --save-dev electron@latest</code>

À ce jour, cette commande installera Electron v4.1.4.

Créer un fichier main.js

Ensuite, créez un fichier main.js et ajoutez le code suivant:

<code class="language-bash">npm install -g @angular/cli</code>

Ce code crée simplement une fenêtre GUI et charge le fichier index.html (qui devrait être disponible dans le dossier DIST après la construction de l'application angulaire). Cet exemple de code est adapté du référentiel d'introduction officiel.

Package de configuration.json

Ensuite, ouvrez le fichier package.json du projet et ajoutez la clé principale pour définir le fichier main.js comme point d'entrée principal:

<code class="language-bash">cd ~
ng new electron-angular-demo</code>

Ajouter un script de démarrage

Ensuite, nous devons ajouter un script pour démarrer facilement l'application Electron après la création du projet angulaire:

<code class="language-bash">npm install --save-dev electron@latest</code>

Nous avons ajouté le script START: Electron, qui exécute Ng Build - Base-Href ./ && Electron.

La construction NG --Base-Href ./ Une partie de la commande

construit l'application angulaire et définit la base href sur ./.
• L'électron de la commande
.

Maintenant, dans votre terminal, exécutez la commande suivante:

<code class="language-javascript">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()
})</code>

ouvrira une fenêtre de GUI électronique, mais elle sera vide. Dans la console, vous verrez l'erreur "Chargement Resources: /electron-angular-demo/dist/index.html".

Electron ne peut pas charger le fichier du dossier DIST car il n'existe pas du tout. Si vous regardez le dossier de votre projet, vous verrez que la CLI angulaire construit votre application dans le dossier DIST / Electron-Angular-Demo, pas le dossier dist.

Dans notre fichier Main.js, nous disons à Electron de trouver le fichier index.html dans le dossier dist sans sous-dossiers:

<code class="language-json">{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}</code>

fait référence au dossier actuel où nous exécutons l'électron. __dirname

Nous utilisons la méthode Path.Join () pour connecter le chemin d'accès du dossier actuel avec le chemin /dist/index.html.

Vous pouvez modifier la deuxième partie du chemin vers /dist/electron-angular-demo/index.html, ou mieux encore, modifiez la configuration angulaire en fichiers de sortie dans le dossier dist sans utilisation des sous-dossiers.

Ouvrez le fichier angular.json, trouvez les projets → Architecte → Build → Options → Key OutputPath et modifiez sa valeur de Dist / Electron-Angular-Demo to Dist:

<code class="language-json">{
  "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 ."
  },
  // [...]
}</code>

Retournez à votre terminal et exécutez à nouveau la commande suivante:

<code class="language-bash">npm run start:electron</code>

Le script appelle la commande NG Build pour créer l'application angulaire dans le dossier DIST et appelle l'électron du dossier actuel pour démarrer la fenêtre électronique chargeant l'application angulaire.

Il s'agit d'une capture d'écran de notre application de bureau exécutant Angular:

(Ce qui suit est cohérent avec le texte d'origine, mais les paragraphes et les titres ont été ajustés pour les rendre plus faciles à lire et à comprendre.)

Appelant l'API électronique à partir d'Angular

Voyons maintenant comment appeler l'API Electron d'Angular.

L'application Electron utilise le processus principal exécutant Node.js et le processus de rendu exécutant le navigateur de chrome. Nous ne pouvons pas accéder à toutes les API d'électron directement à partir de l'application angulaire.

Nous devons utiliser la communication IPC ou inter-processus, qui est un mécanisme fourni par le système d'exploitation pour permettre la communication entre différents processus.

Toutes les API électroniques ne doivent pas être accessibles à partir du processus principal. Certaines API sont accessibles à partir du processus de rendu, et certaines API sont accessibles à partir du processus principal et du processus de rendu.

BrowserWindow (utilisé pour créer et contrôler les fenêtres du navigateur) n'est disponible que dans le processus principal. L'API de bureau (pour capturer l'audio et la vidéo depuis le bureau à l'aide de Navigator.Mediadevices.getUserMedia) n'est disponible que dans le processus de rendu. Pendant ce temps, l'API du presse-papiers (pour effectuer des opérations de copie et de coller sur le presse-papiers système) est disponible à la fois dans le processus principal et le processus de rendu.

Vous pouvez afficher la liste complète des API à partir de la documentation officielle.

Regardons un exemple d'appel de l'API Browserwindow à partir d'une application angulaire (disponible uniquement dans le processus principal).

Ouvrez le fichier main.js et importez ipcmain:

<code class="language-bash">npm install -g @angular/cli</code>

Ensuite, définissez la fonction OpenModal ():

<code class="language-bash">cd ~
ng new electron-angular-demo</code>

Cette méthode créera une fenêtre sous-mobile où le https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a URL est chargé et l'affiche quand il est prêt.

Ensuite, écoutez le message OpenModal envoyé à partir du processus de rendu et appelez la fonction openModal () lorsque le message est reçu:

<code class="language-bash">npm install --save-dev electron@latest</code>

Maintenant, ouvrez le fichier src / app / app .....ts et ajoutez l'importation suivante:

<code class="language-javascript">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()
})</code>

Ensuite, définissez une variable IPC et un appel requis ('Electron'). Ipcrederer pour importer ipcrendererer dans votre composant angulaire:

<code class="language-json">{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}</code>

La méthode

require () est injectée par Electron dans le processus de rendu à l'exécution, il n'est donc disponible que lors de l'exécution d'une application Web dans Electron.

Enfin, ajoutez la méthode OpenModal () suivante:

<code class="language-json">{
  "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 ."
  },
  // [...]
}</code>

Nous utilisons la méthode Send () d'IPCRenderer pour envoyer un message OpenModal au processus principal.

Ouvrez le fichier src / app / app .....html et ajoutez un bouton et liez-le à la méthode OpenModal ():

<code class="language-bash">npm run start:electron</code>

Maintenant, exécutez votre application de bureau avec la commande suivante:

<code class="language-javascript">mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);</code>

Il s'agit d'une capture d'écran de la fenêtre principale avec des boutons:

Si vous cliquez sur le bouton "Ouvrir le modal", une fenêtre modale avec le site Web SitePoint doit ouvrir:

Vous pouvez trouver le code source de cette démo à partir de ce référentiel GitHub.

Conclusion

Dans ce didacticiel, nous avons examiné comment exécuter une application Web construite à l'aide d'une application Angular en tant que bureau à l'aide d'électron. Nous espérons que vous avez appris à quel point il est facile de commencer à créer des applications de bureau avec le kit de développement Web!

(Le contenu suivant est la partie FAQ d'origine, et il est légèrement ajusté pour le rendre plus conforme aux habitudes d'expression chinoises.)

FAQS (FAQ)

Comment déboguer les applications d'électrons et angulaires?

Le débogage est une partie importante du processus de développement. Pour les applications d'électrons et angulaires, vous pouvez utiliser des outils de développeur Chrome. Pour ouvrir l'outil de développeur, vous pouvez utiliser la clé de raccourci Ctrl Shift I, ou vous pouvez ajouter une ligne de code au fichier main.js: mainWindow.webContents.openDevTools(). Cela ouvrira les outils du développeur au début de l'application. Vous pouvez ensuite vérifier les éléments, afficher les journaux de console et déboguer le code comme vous le feriez dans votre application Web.

Comment emballer des applications électroniques et angulaires pour la distribution?

Les applications électroniques et angulaires peuvent être emballées pour la distribution à l'aide d'électrons-emballage ou d'électrons. Ces outils vous aident à emballer vos applications dans des fichiers exécutables pour différents systèmes d'exploitation. Vous pouvez personnaliser le nom, la description, la version et plus de l'application. Vous devez installer ces packages sous forme de DevDependces, puis ajouter un script dans le fichier package.json pour exécuter la commande Package.

Pouvez-vous utiliser des matériaux angulaires dans l'électron?

Oui. Le matériau angulaire est une bibliothèque de composants d'interface utilisateur qui implémente la conception du matériau en angulaire. Il propose une variété de composants prédéfinis que vous pouvez utiliser pour créer des applications conviviales et réactives. Pour utiliser des matériaux angulaires, vous devez l'installer à l'aide de NPM ou de fil, puis d'importer les modules nécessaires dans l'application.

Comment gérer les opérations du système de fichiers en électron et angulaire?

Electron fournit un module intégré appelé FS (Système de fichiers) que vous pouvez utiliser pour gérer les opérations du système de fichiers telles que la lecture et la rédaction de fichiers. Vous pouvez l'utiliser dans le processus principal de l'application électronique. Cependant, si vous souhaitez l'utiliser dans un processus de rendu (Angular), vous devez utiliser l'IPC d'Electron (communication inter-processus) pour communiquer entre le processus principal et le processus de rendu.

Comment utiliser le module Node.js dans les applications électroniques et angulaires?

Electron vous permet d'utiliser le module Node.js dans votre application. Vous pouvez les utiliser directement dans le processus principal. Cependant, si vous souhaitez les utiliser dans le processus de rendu (Angular), vous devez activer la node-intégration dans votre configuration d'électrons. Notez que l'activation de NodeAlectation pose un risque de sécurité si votre application charge le contenu distant, il est donc recommandé d'utiliser des options plus sûres telles que le contexte et les scripts de précharge.

Comment mettre à jour les applications électroniques et angulaires?

Les applications électroniques et angulaires peuvent être mises à jour à l'aide du module AutoupDater d'Electron. Ce module vous permet de télécharger et d'installer automatiquement les mises à jour en arrière-plan. Vous pouvez également fournir une interface utilisateur pour les utilisateurs pour vérifier manuellement les mises à jour.

Pouvez-vous utiliser une CLI angulaire avec un électron?

Oui. Angular CLI est l'interface de ligne de commande d'Angular qui vous aide à créer, développer et maintenir des applications angulaires. Vous pouvez l'utiliser pour générer des composants, des services, des modules, etc. Vous pouvez également l'utiliser pour créer des applications angulaires avant de fonctionner avec un électron.

Comment protéger la sécurité des applications électroniques et angulaires?

La protection de la sécurité des applications électroniques et angulaires est essentielle pour protéger les données des utilisateurs. Electron fournit certaines suggestions de sécurité, telles que l'activation du contexte, la désactivation de la node-intégration, l'utilisation du mode sandbox, etc. Vous devez également suivre les meilleures pratiques de sécurité angulaire telles que le nettoyage de l'entrée des utilisateurs, en utilisant le protocole HTTPS, et plus encore.

Comment tester les applications d'électrons et angulaires?

Vous pouvez utiliser des cadres de test tels que le jasmin et le karma (pour Angular) et Spectron (pour l'électron) pour tester les applications électroniques et angulaires. Ces cadres vous permettent d'écrire des tests unitaires et des tests de bout en bout pour vous assurer que votre application fonctionne comme prévu.

Les électrons peuvent-ils être utilisés avec d'autres frameworks ou bibliothèques?

Oui. L'électron ne concerne pas les frameworks, ce qui signifie que vous pouvez l'utiliser avec n'importe quel framework JavaScript ou bibliothèque. En plus d'Angular, vous pouvez également l'utiliser avec React, Vue.js, Svelte et plus encore. Vous pouvez également l'utiliser avec JavaScript natif si vous préférez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!