Electron: créer une application desktop avec React
Introduction
Bienvenue dans notre tutoriel express sur la création d’une application de bureau avec Electron.js. Apprenez rapidement à installer Electron, à crée une application desktop avec React et à build le projet.
- Comprendre les fondamentaux – Familiarisez-vous avec les bases de Node.js et son intégration avec Electron.
- Prérequis – Découvrez ce dont vous avez besoin pour démarrer, y compris la configuration initiale.
- Création de l’application – Suivez les étapes pour la conception de votre application mobile
- Le Build – Apprenez à créer un fichier .exe pour exécuter votre application
Comprendre les fondamentaux
Qu’est ce que Electron ?
Electron est une plateforme de développement logiciel qui permet de faire des applications de bureau multiplateformes en utilisant des technologies web comme HTML, CSS et JavaScript. Contrairement aux applications de bureau traditionnelles qui nécessitent des langages de programmation spécifiques à chaque système d’exploitation, Electron permet aux développeurs de concevoir une seule application compatible avec Windows, macOS et Linux.
Il combine le moteur de rendu Chromium pour afficher l’interface utilisateur avec Node.js pour exécuter du code côté serveur. Cela signifie que les développeurs peuvent utiliser les mêmes technologies qu’ils utilisent pour créer des sites web et développer des applications de bureau.
Qu’est ce que React ?
React est une bibliothèque JavaScript open-source développée par Facebook. Elle est utilisée pour la création d’interfaces utilisateur (UI) interactives et dynamiques, en particulier pour les applications web. React se distingue par son approche déclarative et sa capacité à créer des composants réutilisables.
Il est souvent utilisé avec Electron pour créer des applications de bureau réactives et performantes. En combinant la puissance de React avec les capacités de développement multiplateforme d’Electron, les développeurs peuvent créer des interfaces utilisateur dynamiques et interactives pour leurs applications de bureau. L’architecture à composants de React permet également une gestion efficace de l’interface utilisateur, ce qui est particulièrement utile dans le contexte des applications de bureau complexes.
Prérequis
Configuration de l’Environnement pour Node.js
Node.js est un environnement d’exécution JavaScript côté serveur, construit sur le moteur JavaScript V8 de Google Chrome. Il permet d’exécuter du code JavaScript côté serveur, ce qui signifie que vous pouvez créer des applications web dynamiques et des serveurs en utilisant JavaScript.
Il joue un rôle crucial dans le fonctionnement d’Electron car il fournit l’environnement d’exécution côté serveur, l’accès aux fonctionnalités système et un écosystème de modules étendu, ce qui permet aux développeurs de créer des applications de bureau riches et fonctionnelles en utilisant des technologies web familières.
Dans un premier allez sur le site officiel de Node.js et téléchargez la version recommandée pour votre système d’exploitation :
Création de l’application
1. Ouvrez un terminal et exécutez cette commande qui ajoute un nouveau répertoire pour votre projet en React:
Remplacez « mon-projet-electron » par le nom de votre projet.
2. Une fois que l’installation est finie, dirigez-vous sur ce répertoire de votre application avec cette commande
3. Exécutez cette commande afin de lancer le serveur de développement de votre application
Si le projet est correctement installé cela ouvrira un navigateur web et affichera l’interface de votre projet à cette adresse: http://localhost:3000
4. Arrêtez de faire tourner le serveur sur le terminal avec un Crtl+C
5. Installez les paquets nécessaires pour Electron en tant que dépendance de développement en exécutant :
Cette commande installe deux paquets : electron et electron-is-dev.
L’option -D est un raccourci pour –save-dev, ce qui signifie que ces paquets seront ajoutés en tant que dépendances de développement dans le fichier package.json de votre projet. Les dépendances de développement sont des paquets nécessaires uniquement lors du développement, mais pas lors du déploiement ou de l’exécution de l’application.
Puis exécutez cette commande :
Cette commande installe également deux paquets : electron et electron-builder.
L’option –save-dev est explicitement utilisée ici pour ajouter ces paquets en tant que dépendances de développement dans le fichier package.json
6. A la racine, créez un fichier qui sera le point d’entrée de votre application Electron: Index.js
7. Dans ce fichier vous pouvez collez ce script de démarrage pour votre application:
const { app, BrowserWindow } = require(‘electron’); : Cette ligne importe les modules app et BrowserWindow du package electron. app est utilisé pour contrôler le cycle de vie de l’application Electron, tandis que BrowserWindow est utilisé pour créer des fenêtres natives.
function createWindow() {…} : Cette fonction crée une nouvelle fenêtre de navigateur avec certaines options. La fenêtre a une largeur de 800 pixels et une hauteur de 600 pixels. L’option nodeIntegration: true permet à la fenêtre d’utiliser les fonctionnalités de Node.js.
win.loadURL(‘http://localhost:3000’); : Cette ligne charge une URL spécifique dans la fenêtre. Dans ce cas, il charge ‘http://localhost:3000’. C’est généralement l’URL où votre application front-end est servie.
app.whenReady().then(createWindow); : Cette ligne s’assure que la fonction createWindow est appelée une fois que l’application Electron est prête. C’est généralement le point d’entrée de l’application.
8. Après ceci dirigez vous dans votre json à la racine de votre projet. Vous devriez avoir dans la balises scripts les informations suivantes:
Ajoutez ces deux lignes pour qu’Electron reconnaisse le fichier principale d’exécution de votre projet et le lancer:
9. Vous pouvez ainsi exécuter Electron en démarrant dans un premier temps le serveur de l’application avec la commande que nous avons utilisé précédemment :
10. Puis ouvrez un autre terminale et exécutez cette commande qui lancera l’application Electron
Le Build
Création d’un fichier .exe pour une application de bureau avec Electron
1. Electron Packager est un outil qui vous permet de créer des exécutables pour différentes plateformes à partir de votre application Electron.
Vous pouvez l’installer via npm (Node Package Manager) en utilisant la commande suivante :
2. Dans votre package.json, ajoutez une information supplémentaire dans le script afin d’automatiser la création de l’exécutable.
–platform=win32 spécifie la plateforme cible (Windows).
–arch=x64 spécifie l’architecture cible (64 bits, vous pouvez changer cela selon vos besoins).
3. Exécutez le script de construction en utilisant la commande npm :
4. Cela créera un dossier à la racine de votre projet avec le nom que vous avez choisi pour votre application.
En ouvrant ce dossier un fichier .exe est créé avec le même nom de votre application. En exécutant ce fichier vous exécutez votre application desktop.
Merci d’avoir suivi ce tutoriel ! Si vous avez envie d’en savoir plus sur le développement d’applications web, sur le dev/ops ou la conception d’applications,inscrivez-vous à notre formation Développeur web et web mobile ou Concepteur Développeur d’Application (CDA) afin de viser l’excellence, acquérir un savoir-faire concret dans le développement web et d’obtenir un diplôme national RNCP reconnus par l’État.
