Créez des applications GUI de bureau à l'aide de JavaScript et d'Electron.js

À l'ère technologique d'aujourd'hui, les applications de bureau revêtent une importance considérable dans notre vie quotidienne, offrant une expérience utilisateur améliorée et exploitant pleinement les capacités de votre ordinateur local. Traditionnellement, le développement d'applications de bureau nécessitait une expertise dans les langages et frameworks de programmation spécifiques à la plate-forme, ce qui représentait un défi pour les développeurs Web cherchant à se lancer dans le développement de bureau. Cependant, Electron.js résout efficacement ce défi.

Electron.js, anciennement connu sous le nom d'Atom Shell, est un framework open source dérivé de GitHub. Il permet aux développeurs de créer des applications de bureau multiplateformes à l'aide de technologies Web familières telles que HTML, CSS et JavaScript. En comblant le fossé entre le développement Web et le développement d'applications de bureau, Electron.js crée de nouvelles opportunités permettant aux développeurs de créer des applications de bureau puissantes et riches en fonctionnalités.

Architecture Electron.js

Pour comprendre le fonctionnement d'Electron.js, examinons de plus près son architecture. Electron.js combine deux composants principaux : le moteur de rendu Chromium et le runtime Node.js.

• Chromium Rendering Engine−Electron.js utilise le même moteur de rendu - Chromium - que le navigateur Web populaire Google Chrome. Cela permet aux applications Electron.js de restituer et d'afficher du contenu Web avec les mêmes fonctionnalités et performances qu'un navigateur Web.

• Node.js Runtime− span>Electron.js s'intègre au runtime Node.js, donnant accès au système d'exploitation sous-jacent et aux API natives. Cela signifie que les développeurs peuvent profiter de toute la puissance de Node.js et exploiter son vaste écosystème de modules et de bibliothèques pour créer des applications de bureau.

Electron.js utilise une architecture multi-processus, où chaque application Electron.js se compose de deux processus principaux : le processus principal et le processus de rendu.

• Processus principal− Le processus principal s'exécute comme un processus Node.js indépendant et est responsable de la création et de la gestion des fenêtres du navigateur. Il communique avec le processus de rendu, gère les événements au niveau du système et a accès aux API natives. Le processus principal contrôle le cycle de vie de l'application et sert de point d'entrée à l'application Electron.js.

• Processus de rendu − Chaque application Electron.js peut avoir plusieurs processus de rendu, chaque processus correspondant à une fenêtre de navigateur distincte. Le processus de rendu est responsable du rendu et de l'affichage du contenu Web dans chaque fenêtre du navigateur. Ils s'exécutent dans un contexte JavaScript distinct, offrant un niveau d'isolation et de sécurité. Chaque processus de rendu a accès à l'API Electron.js, ce qui lui permet d'interagir avec le processus principal et d'effectuer des tâches telles que la manipulation du DOM, l'envoi de requêtes réseau et la gestion des interactions des utilisateurs.

Créez des applications Electron.js simples

Maintenant que nous avons une bonne compréhension d'Electron.js et de son architecture, passons à la création d'une application Electron.js simple à l'aide de JavaScript. Nous allons créer une application qui affiche une fenêtre avec un message "Bonjour, Electron.js".

Pour commencer, suivez ces étapes -

Configurer l'environnement de développement

Assurez-vous que Node.js est installé sur votre ordinateur car Electron.js est construit sur Node.js. Vous pouvez télécharger et installer la dernière version de Node.js depuis le site officiel (https://nodejs.org).

Créer un nouveau projet Electron.js

Créez un nouveau dossier de projet et accédez au dossier à l'aide de la ligne de commande. Initialisez un nouveau projet Node.js en exécutant la commande suivante -

npm init -y

Cette commande initialise un nouveau projet Node.js avec les paramètres par défaut.

Installer Electron.js

Installez Electron.js en tant que dépendance de développement en exécutant la commande suivante -

npm install electron --save-dev

Cette commande installera le package Electron.js dans votre projet.

Créez le point d'entrée principal

Créez un nouveau fichier appelé index.js dans le dossier du projet et ajoutez le code suivant -

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

function createWindow() {
   // Create the browser window
   const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
         nodeIntegration: true,
      },
   });

   // Load the index.html file
   mainWindow.loadFile('index.html');
}

// When Electron has finished initialising and is ready to create browser windows
app.whenReady().then(() => {
   createWindow();

   app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow();
   });
});

// Quit the application when all windows are closed
app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit();
});

Instructions

Dans ce code, nous importons les modules nécessaires du package Electron.js, définissons la fonction createWindow pour créer la fenêtre du navigateur et configurons les gestionnaires d'événements nécessaires pour la création de la fenêtre et la sortie de l'application.

Créer un fichier HTML

Créez un nouveau fichier appelé index.html dans le dossier du projet et ajoutez le code suivant -

示例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Electron.js Application</title>
   </head>
   <body>
      <h1>Hello, Electron.js</h1>
   </body>
</html>

此 HTML 文件将显示在 Electron.js 应用程序的窗口中。

运行 Electron.js 应用程序

npx electron.

结论

Electron.js 彻底改变了开发人员使用 Web 技术构建桌面应用程序的方式。它提供了一个强大的框架，结合了 Chromium 渲染引擎和 Node.js 运行时，使开发人员能够使用 HTML、CSS 和 JavaScript 创建跨平台桌面应用程序。凭借其丰富的插件和工具生态系统，Electron.js 使开发人员能够构建功能丰富、高性能且具有视觉吸引力的桌面应用程序。

在本文中，我们探讨了 Electron.js 的基础知识，并学习了如何使用 JavaScript 构建简单的 Electron.js 应用程序。我们讨论了 Electron.js 的架构、它的主要进程以及主进程和渲染进程的作用。我们还逐步完成了设置开发环境和构建 Electron.js 应用程序的过程。

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!