Construire une application de bureau avec Electron et Angular –

Dans ce didacticiel, nous allons créer une application de bureau multiplate-forme avec Electron et des technologies Web telles que TypeScript et Angular.

Electron.js est une plate-forme populaire pour la création d’applications de bureau multiplate-forme pour Windows, Linux et macOS avec JavaScript, HTML et CSS. Il est créé et géré par GitHub et est disponible sous licence permissive du MIT. Il a été initialement créé pour l'éditeur Atom de GitHub mais a depuis été utilisé pour créer des applications d'entreprises telles que Microsoft ( de Visual Studio Code ), Facebook, Slack et Docker.

Electron utilise des plates-formes puissantes telles que Google Chromium et Node.js, mais fournit également son propre ensemble d'API riches pour interagir avec le système d'exploitation sous-jacent.

Electron fournit un conteneur natif qui encapsule les applications Web pour leur donner l'aspect des applications de bureau. avec 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 framework JavaScript pour construire notre application. Dans ce didacticiel, nous utiliserons Angular.

Conditions préalables

Pour ce didacticiel, ces prérequis doivent être couverts:

• Connaissance de TypeScript et Angular.
• Node.js et npm installés sur votre machine de développement.

Installer Angular CLI

Commençons par installer Angular CLI, l’outil officiel pour la création et le travail avec des projets Angular. Ouvrez un nouveau terminal et exécutez la commande suivante:

 npm install -g @ angular / cli

Nous allons installer la CLI angulaire de manière globale sur notre système. Si la commande échoue avec l'erreur EACCESS ajoutez sudo avant votre commande sous Linux ou macOS, ou exécutez l'invite de commande en tant qu'administrateur sous Windows.

Si la CLI est installée avec succès, accédez à votre répertoire de travail et créez un nouveau projet Angular à l’aide des commandes suivantes:

 cd ~
Nouvelle démonstration électronique-angulaire

Attendez que les fichiers de votre projet soient générés et que les dépendances soient installées à partir de npm. Ensuite, accédez à la racine de votre projet et exécutez la commande suivante pour installer la dernière version d'Electron à partir de npm en tant que dépendance de développement:

 npm install --save-dev electron @ latest

Au moment d'écrire ces lignes, cette commande installera Electron v4.1.4 .

Créez ensuite un fichier main.js et ajoutez le code suivant:

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

    laisser mainWindow

    fonction createWindow () {
      mainWindow = new BrowserWindow ({
        largeur: 800
        hauteur: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })

      mainWindow.loadURL (
        url.format ({
          chemin d'accès: path.join (__ dirname, `/ dist / index.html`),
          protocole: "fichier:",
          slash: true
        })
      )
      // Ouvre les outils de développement.
      mainWindow.webContents.openDevTools ()

      mainWindow.on ('fermé', fonction () {
        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 ()
    })

Ce code crée simplement une fenêtre graphique et charge le fichier index.html qui devrait être disponible dans le dossier dist après la construction de notre application Angular. Cet exemple de code est adapté du référentiel de démarrage officiel .

Ouvrez ensuite le fichier package.json de votre projet et ajoutez la clé main pour définir le fichier main.js comme point d'entrée principal:

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

Ensuite, nous devons ajouter un script pour lancer facilement l'application Electron après la construction du projet Angular:

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

Nous avons ajouté le script start: electron qui exécute la commande ng build --base-href ./ && electron. :

• The ng build - base-href ./ une partie de la commande crée l'application Angular et définit la base href sur ./ .
• L'électron . de la commande démarre notre Electron app du répertoire en cours.

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

 npm run start: electron

Une fenêtre d'interface graphique Electron sera ouverte, mais sera vide. Dans la console, l'erreur non autorisée à charger la ressource locale: /electron-angular-demo/dist/index.html.

Electron ne parvient pas à charger le fichier à partir de . ] dist parce qu’il n’existe tout simplement pas. Si vous regardez dans le dossier de votre projet, vous verrez que Angular CLI construit votre application dans le dossier dist / electron-angular-demo au lieu du dossier dist .

Dans notre fichier main.js nous demandons à Electron de rechercher le fichier index.html dans le dossier dist sans sous-dossier:

    . ] mainWindow.loadURL (
        url.format ({
          chemin d'accès: path.join (__ dirname, `/ dist / index.html`),
          protocole: "fichier:",
          slash: true
        })
      )

__ dirname fait référence au dossier actuel dans lequel nous exécutons Electron.

Nous utilisons la méthode path.join () pour joindre le chemin du dossier actuel avec le chemin /dist/index.html .

Vous pouvez modifier la deuxième partie du chemin en /dist/electron-angular-demo/index.html ou mieux. cependant, modifiez la configuration angulaire pour générer les fichiers du dossier dist sans utiliser de sous-dossier.

Ouvrez le fichier angular.json localisez le projet → architecte → build → options → outputPath et changez sa valeur de dist / electron-angular-demo à dist :

     "projets": {
        "electron-angular-demo": {
          "racine": "",
          "sourceRoot": "src",
          "projectType": "application",
          "préfixe": "app",
          "schémas": {},
          "architecte": {
            "construire": {
              "constructeur": "@ angular-devkit / build-angular: navigateur",
              "options": {
                "outputPath": "dist",

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

 npm run start: electron

Le script appelle la commande ng build pour créer l'application Angular dans le dossier dist et appelle electron à partir du dossier en cours pour démarrer Electron. fenêtre avec l'application angulaire chargée

Voici une capture d'écran de notre application de bureau sous Angular:

Appel des API Electron depuis Angular

Voyons maintenant comment appeler des API Electron depuis Angular.

Les applications Electron utilisent un processus principal exécutant Node.js et un processus de rendu exécutant le navigateur Chromium. Nous ne pouvons pas accéder directement à toutes les API Electron depuis l’application Angular.

Nous devons utiliser IPC ou Inter-Process Communication qui est un mécanisme fourni par les systèmes d’exploitation permettant la communication entre différents

Il n’est pas nécessaire d’accéder à toutes les API Electron à partir du processus principal. Vous pouvez accéder à certaines API à partir du processus de rendu, et à la fois au processus principal et au processus de rendu.

BrowserWindow utilisé pour créer et contrôler des fenêtres de navigateur, est uniquement disponible dans le processus principal. L'API desktopCapturer (utilisée pour capturer des fichiers audio et vidéo à partir du bureau à l'aide de l'API navigator.mediaDevices.getUserMedia ) est uniquement disponible dans le processus de rendu. Pendant ce temps, l'API de presse-papiers (permettant d'effectuer des opérations de copier-coller sur le presse-papiers du système) est disponible à la fois dans le processus principal et dans le processus de rendu.

Vous pouvez voir la liste complète des API du document officiel . .

Voyons un exemple d'appel de l'API BrowserWindow disponible uniquement dans le processus principal, à partir de l'application Angular.

Ouvrez le fichier main.js et importez-le ipcMain :

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

Ensuite, définissez la fonction openModal () : fonction

     openModal () {
      const {BrowserWindow} = require ('electron');
      let modal = new BrowserWindow ({parent: mainWindow, modal: true, show: false})
      modal.loadURL ('https://www.sitepoint.com')
      modal.once ('prêt à montrer', () => {
        modal.show ()
      })
    }

Cette méthode créera une fenêtre modale enfant, chargera l'URL https://www.sitepoint.com et l'affichera lorsqu'elle sera prête.

Ensuite, écoutez un . ] openModal message qui sera envoyé à partir du processus de rendu et appellera la fonction openModal () à la réception du message:

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

Ouvrez maintenant le fichier src / app / app.component.ts et ajoutez l'importation suivante:

 import {IpcRenderer} à partir de 'electron';

Ensuite, définissez une variable ipc et appelez ** require ** `` ('electron'). IpcRenderer pour importer ipcRenderer dans votre composant angulaire. :

 ipc privé: IpcRenderer
      constructeur(){
        if (( window) .require) {
          essayer {
            this.ipc = ( window) .require ('electron'). ipcRenderer;
          } catch (e) {
            lancer e;
          }
        } autre {
          console.warn ('L'application ne fonctionne pas dans Electron!');
        }
      }

La méthode require () est injectée à l'exécution dans le processus de rendu par Electron et, en tant que telle, elle ne sera disponible que lors de l'exécution de votre application Web dans Electron.

Enfin, ajoutez ce qui suit méthode openModal () :

 openModal () {
        console.log ("Ouvrir un modal");
        this.ipc.send ("openModal");
      }

Nous utilisons la méthode send () de ipcRenderer pour envoyer un message openModal au processus principal.

Ouvrez le src / app / app.component.html et ajoutez un bouton, puis liez-le à la méthode openModal () :

    
       Open Modal.
    

Exécutez maintenant votre application de bureau à l'aide de la commande suivante:

 npm run start: electron

Voici une capture d'écran de la fenêtre principale avec un bouton:

Si vous cliquez sur le bouton Open Modal une fenêtre modale devrait s'ouvrir avec le site Web SitePoint:

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

Conclusion

Dans ce tutoriel, nous avons étudié le fonctionnement d'un site Web. application construite avec Angular comme une application de bureau utilisant Electron. Nous espérons que vous avez appris à quel point il est facile de commencer à créer des applications pour ordinateur de bureau avec votre boîte à outils de développement Web!

Ahmed est un entrepreneur, développeur, concepteur en marketing numérique et blogueur Web. Il écrit sur le développement de logiciels et de sites Web, des astuces pour gagner de l'argent, le référencement, etc. Vous pouvez trouver plus de ses écrits sur son site Techiediaries .