Développement d’applications de bureau avec Angular et Electron / Blogs / Perficient

Électron est un framework qui vous permet d’utiliser des paradigmes de développement Web (c’est-à-dire HTML, CSS, JavaScript) pour développer des applications de bureau multiplateformes. En règle générale, les applications de bureau sont développées dans des langages compilés de niveau inférieur tels que Java, C# et C++, il est donc intéressant que cela soit possible.

Il est assez simple de créer une application Electron qui utilise HTML, CSS et JavaScript « vanille », mais que se passe-t-il si nous voulons utiliser un framework de développement Web, comme Angular ou React ?

Dans cet article, je vais montrer comment cela se fait. Nous allons détailler la configuration d’une application de bureau Electron-backend Angular-frontend.

Nœud et npm

Electron fonctionne sur node.js. (Si vous ne connaissez pas déjà node.js, sachez que node.js est essentiellement « du JavaScript qui s’exécute sur un serveur plutôt que dans un navigateur ».)

Puisque c’est le cas, nous devrons installer Node Package Manager, ou npm. Si vous ne disposez pas déjà de npm, un moyen simple de l’obtenir consiste à exécuter l’un des exécutables du programme d’installation de Node.js. L’exécution d’un tel exécutable installera à la fois Node.js et npm.

Angulaire

• Une fois npm installé, nous pouvons l’utiliser pour installer Angular. Ouvrez une invite de commande et exécutez npm install -g @angular/cli faire cela. Une fois l’exécution de cette commande terminée, vous pouvez vérifier qu’Angular est bien installé en exécutant ng version; cela devrait afficher des informations sur la version d’Angular que vous avez maintenant installée.

• Accédez à l’endroit où vous souhaitez stocker le dossier de projet pour l’application de démonstration que nous allons créer. Puis exécutez ng new ae_demo. Choisir y lorsqu’on vous demande si vous souhaitez ajouter le routage angulaire (nous n’utiliserons pas cette fonctionnalité, mais en général, vous souhaiterez probablement l’utiliser), et choisissez CSS lorsqu’on lui a demandé quel format de feuille de style devait être utilisé (pour plus de simplicité).

• Cela crée un dossier de projet intitulé ae_demo et le remplit de plusieurs fichiers. Le dossier ae_demo et les fichiers qu’il contient constituent ensemble un projet Angular, c’est à dire une webapp Angular.

• Pour exécuter l’application Web Angular, exécutez cd ae_demo et puis ng serve. Après la sortie de ng serve indique que l’application Web est en ligne, visitez-la vous-même en accédant à http://localhost:4200/ dans votre navigateur Internet. Vous pouvez également arrêter l’application Web en appuyant sur CTRL + C pendant que votre curseur est capturé par la fenêtre de ligne de commande.

• À ce stade, nous pourrions passer beaucoup de temps à apprendre à écrire du code angulaire et ainsi augmenter la sophistication de notre application Web. Pour les besoins de ce didacticiel, voici un aperçu des parties pertinentes de l’écriture de code angulaire :

  • Vous développez votre application Angular en modifiant les fichiers dans le dossier ae_demo/src/app.

  • Une fois votre développement terminé, vous exécutez ng build. Cela produit un sous-dossier d’ae_demo nommé dist qui contient un index.html déposer un .css fichier, et trois .js des dossiers. Ainsi, en fin de compte, votre application Angular est conforme à une application Web classique qui utilise JavaScript. Ce sont les fichiers que vous fourniriez à un serveur Web de production si vous souhaitiez y exécuter votre application.

Électron

• Maintenant que nous avons une idée de la façon d’écrire le frontend de notre application en Angular, nous allons apprendre à utiliser Electron pour le backend. La première étape consiste bien sûr à installer Electron avec npm : cd dans ae_demo et exécutez npm install electron --save-dev.

• Maintenant, dans ae_demo/src, créez un dossier appelé electronic. Dans le dossier electronic, créez un fichier appelé main.js avec le contenu suivant :

  
  
  
  ​
  const {app, BrowserWindow} = require('electron');
  const url = require("url");
  const path = require("path");
  ​
  let mainWindow; 
  ​
  
  function loadIndexHtml(win) {
    win.loadURL(
      url.format({
        pathname: path.join(__dirname, `../../dist/ae_demo/index.html`),
        protocol: "file:",
        slashes: true
      })
    );
  }
  ​
  
  function configLoadRendererAfterDOMContentLoaded(win) {
    
    win.webContents.on("dom-ready", function() {
      const jsCode = `document.addEventListener('DOMContentLoaded', function() { 
        platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err)); });`
      win.webContents.executeJavaScript(jsCode);
    });
  }
  ​
  function createWindow () {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true 
      }
    });
  ​
    mainWindow.on("closed", function () { mainWindow = null });
    configLoadRendererAfterDOMContentLoaded(mainWindow);
    loadIndexHtml(mainWindow);
    mainWindow.webContents.openDevTools();
  }
  ​
  app.whenReady().then(function() {  
    createWindow();
  })
  ​
  app.on('window-all-closed', function () {
    if (process.platform !== "darwin") app.quit();
  });
  ​
  app.on('activate', function () {
    if (mainWindow === null) createWindow();
  });

• Une fois cela fait, vous devez modifier le fichier de configuration node.js, package.json, afin que le JSON qu’il contient ait la forme suivante :

  {
    ...,
    "main": "./src/electron/main.js",
    "scripts": {
      ...,
      "devStart": "ng build --base-href . && electron .",
      ...
     },
     ...
  }  

• Vous pouvez maintenant créer et exécuter votre application Electron-backend Angular-frontend en exécutant la séquence de commandes suivante :

  • cd ae_demo

  • ng build --base-href . (comme décrit précédemment, cela produit un dossier nommé dist contenant le .html, .csset .js fichiers qui constituent le frontend)

  • ./node_modules/.bin/electron . (cela amène Electron à rechercher le dist dossier dans le dossier actuel ; une fois qu’il aura trouvé ce dossier, il exécutera l’application constituée par ces fichiers)

• Alternativement, vous pouvez créer et exécuter l’application en exécutant npm run devStart.

  • Une bizarrerie est que nous obtiendrons une erreur si nous définissons devStart être "ng build --base-href . && electron node_modules/.bin/electron ."; spécifier le chemin explicite vers l’exécutable Electron ne fonctionne pas ! Seul le chemin implicite ne provoque aucune erreur, pour une raison quelconque.

Parfois, nous devons être capables d’effectuer des tâches dans le frontend Angular (par exemple, faire une requête HTTP) que seul le backend Electron peut généralement faire.

Pour y parvenir, nous définirons les fonctions qui effectuent les tâches souhaitées dans le backend Electron et spécifierons dans un nouveau fichier, ae_demo/electron/preload.js, que ces fonctions doivent être mises à disposition du frontend.

Par exemple, supposons que nous souhaitions utiliser la bibliothèque axios dans node.js pour effectuer une requête HTTP.

Pour ce faire, nous devons ajouter ce qui suit à main.js :

app.whenReady().then(function() {  
  ipcMain.handle("httpRequest1", httpRequest);
}
​
async function httpRequest(event, requestConfig) {
  return (await axios(requestConfig)).data;
}

Créez ensuite un fichier appelé preload.js dans le dossier électronique qui a le contenu suivant :

​
const { contextBridge, ipcRenderer } = require("electron")
​
contextBridge.exposeInMainWorld("api", { 
  httpRequest2: (requestConfig) => ipcRenderer.invoke("httpRequest1", requestConfig)
});

Ajouter preload: path.join(__dirname, "preload.js") à webPreferences dans le createWindow() fonction de main.js:

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: true,
        preload: path.join(__dirname, "preload.js")
    }
  });

Maintenant, pour faire une requête HTTP dans notre code Angular, nous procédons simplement comme suit :

(<any> window).api.httpRequest2(requestConfig)

Cela fonctionne parce que :

• Le script de préchargement expose un api objet qui a une fonction appelée httpRequest2 au frontend angulaire.

• Dans le script de préchargement, il est précisé que httpRequest2(requestConfig) est égal au résultat de l’envoi du requestConfig objet comme un message au canal nommé httpRequest1.

• Appel ipcMain.handle("httpRequest1", httpRequest) dans main.js précise que chaque fois que le httpRequest1 le canal reçoit un objet obj comme message, il devrait appeler httpRequest(obj).

Ainsi, nous pouvons appeler(<any> window).api.httpRequest2(requestConfig) dans le code angulaire comme moyen d’appeler efficacement httpRequest(obj).