Pourquoi Electron ?
Electron est une plateforme pour développer des applications en utilisant le JavaScript, HTML et CSS. Ce qui rend Electron particulièrement attrayant c'est qu'il permet aux développeurs de créer des applications sur ordinateur (Windows, Mac, Linux), tablettes et smartphones avec les mêmes compétences que celles nécessaires pour créer des sites Web.
Un cas d'usage concret est le développement d'applications de bureau qui doivent être installées localement sur un ordinateur. Par exemple, une application de gestionnaire de tâches ou un éditeur de texte personnalisé.
Prerequis
Pour commencer avec Electron, vous aurez besoin des éléments suivants :
Node.js : Electron est basé sur Node.js, donc vous devez d'abord l'installer. La version recommandée est la plus récente LTS (Long Term Support).
- Téléchargez et installez Node.js depuis nodejs.org.
npm : C'est le gestionnaire de packages Node.js qui va vous aider à installer des dépendances pour votre projet.
- npm est généralement installé avec Node.js. Vous pouvez vérifier si npm est installé en tapant
npm -vdans la console.
- npm est généralement installé avec Node.js. Vous pouvez vérifier si npm est installé en tapant
Concepts fondamentaux
1. Projet Electron
Un projet Electron se structure autour d'un fichier principal (main.js) qui gère le rendu de l'application et des interactions avec le système d'exploitation.
// main.js
const { app, BrowserWindow } = require('electron');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
2. Fichiers HTML et CSS
Les fichiers HTML et CSS sont utilisés pour le rendu de l'interface utilisateur.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première application Electron</title>
</head>
<body>
<h1>Bienvenue sur ma première application Electron!</h1>
</body>
</html>
3. Scripts JavaScript
Les scripts JavaScript sont utilisés pour ajouter des fonctionnalités interactives à l'application.
// renderer.js
document.getElementById('myButton').addEventListener('click', () => {
alert('Bouton cliqué!');
});
Mise en pratique : projet fil rouge
Étape 1 : Créer un nouveau projet Electron
- Créez un nouveau dossier pour votre projet :
mkdir mon-premier-app-electron
cd mon-premier-app-electron
- Initialisez un nouveau projet Node.js :
npm init -y
- Installez Electron comme dépendance :
npm install electron --save-dev
- Créez le fichier
main.jsavec le contenu suivant :
// main.js
const { app, BrowserWindow } = require('electron');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
- Créez le fichier
index.htmlavec le contenu suivant :
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Premier App Electron</title>
</head>
<body>
<h1>Bienvenue sur ma première application Electron!</h1>
<button id="myButton">Cliquez moi</button>
<script src="renderer.js"></script>
</body>
</html>
- Créez le fichier
renderer.jsavec le contenu suivant :
// renderer.js
document.getElementById('myButton').addEventListener('click', () => {
alert('Bouton cliqué!');
});
- Ajoutez un script dans votre
package.jsonpour lancer l'application Electron :
"scripts": {
"start": "electron ."
}
- ** Lancez votre application Electron** :
npm start
Étape 2 : Ajouter une interface utilisateur
- Modifier
index.htmlpour ajouter un champ de texte et un bouton :
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Premier App Electron</title>
<style>
#output {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Bienvenue sur ma première application Electron!</h1>
<input type="text" id="myInput" placeholder="Entrez quelque chose...">
<button id="myButton">Cliquez moi</button>
<div id="output"></div>
<script src="renderer.js"></script>
</body>
</html>
- Modifier
renderer.jspour afficher ce qui est entré dans le champ de texte :
// renderer.js
document.getElementById('myButton').addEventListener('click', () => {
const input = document.getElementById('myInput');
const output = document.getElementById('output');
output.textContent = 'Vous avez saisi : ' + input.value;
});
Erreurs frequentes et debugging
Erreur 1 : Uncaught ReferenceError: require is not defined
Cette erreur se produit si vous essayez d'utiliser require dans un fichier qui n'est pas exécuté par Node.js (par exemple, un fichier HTML).
Code incorrect :
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Premier App Electron</title>
</head>
<body>
<h1>Bienvenue sur ma première application Electron!</h1>
<script src="renderer.js"></script>
</body>
</html>
Code correct :
// renderer.js
document.getElementById('myButton').addEventListener('click', () => {
alert('Bouton cliqué!');
});
Erreur 2 : Cannot read property 'length' of undefined
Cette erreur se produit si vous essayez d'accéder à une propriété sur un objet qui n'est pas défini.
Code incorrect :
// renderer.js
document.getElementById('myButton').addEventListener('click', () => {
const input = document.getElementById('myInput');
if (input.value.length > 0) {
alert(input.value);
}
});
Code correct :
// renderer.js
document.getElementById('myButton').addEventListener('click', () => {
const input = document.getElementById('myInput');
if (input && input.value && input.value.length > 0) {
alert(input.value);
} else {
alert('Veuillez entrer quelque chose.');
}
});
Erreur 3 : Electron app is not defined
Cette erreur se produit si vous essayez d'utiliser les modules Electron sans avoir correctement importé app et d'autres modules.
Code incorrect :
// main.js
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
Code correct :
// main.js
const { app, BrowserWindow } = require('electron');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
Pour aller plus loin
1. Ajouter une interface utilisateur avec React ou Vue.js
Vous pouvez utiliser des bibliothèques comme React ou Vue.js pour créer une interface utilisateur plus sophistiquée et modulaire.
2. Utiliser des APIs externes
Intégrez des API externe pour récupérer des données en temps réel ou effectuer des opérations en ligne.
3. Ajouter une base de données locale
Utilisez des bases de données comme SQLite pour stocker des données localement.
Un défi pratique à réaliser seul serait d'ajouter une fonctionnalité pour sauvegarder et charger des données dans une base de données locale lorsque l'utilisateur clique sur un bouton.