Prérequis
Ceci est la partie 1 du tutoriel Electron.
Electron est un framework permettant de créer des applications de bureau en utilisant JavaScript, HTML et CSS. En intégrant Chromium et Node.js dans un seul fichier binaire, Electron vous permet de créer des applications multi-plateforme pour Windows, macOS et Linux avec une seule base de code Javascript.
Ce tutoriel vous guidera à travers le processus de développement d'une application de bureau avec Electron et de sa distribution aux utilisateurs finaux.
Objectifs
Ce tutoriel vous guidera tout au long du processus de constitution d’une application Electron minimale à partir de zéro, puis vous apprendrez à l’empaqueter et à la distribuer aux utilisateurs à l’aide d’Electron Forge.
Si vous préférez démarrer un projet avec un squeltte passe-partout à commande unique, nous vous recommandons de commencer par la commande create-electron-app d’Electron Forge.
Hypothèses
Electron est une surcouche native pour les applications web et est exécuté dans un environnement Node.js. Par conséquent, ce tutoriel suppose que vous êtes complètement familiarisé avec Node et les bases du développement Web coté frond. Si vous avez besoin de faire des lectures préliminaires sur le sujet avant de vous lancer, nous vous recommandons les ressources suivantes :
Outils nécessaires
Éditeur de code
Vous aurez besoin d’un éditeur de texte pour écrire votre code. Nous vous recommandons d’utiliser Visual Studio Code, mais vous pouvez bien sur choisir celui que vous préférez.
Ligne de commande
Tout au long du tutoriel, nous vous demanderons d’utiliser différentes interfaces de ligne de commande (CLIs). Vous pouvez écrire ces commandes dans le terminal par défaut de votre système :
- Windows : Invite de commandes ou PowerShell
- macOS : Terminal
- Linux: cela varie en fonction de la distribution (par exemple, GNOME Terminal, Konsole)
La plupart des éditeurs de code disposent d'un terminal intégré, que vous pouvez également utiliser.
Git et GitHub
Git est un système de contrôle de version du code source couramment utilisé et GitHub est une plate-forme de développement collaborative construite sur celui-ci. Bien que ni l’un ni l’autre ne soit strictement nécessaire pour créer une application Electron, nous utiliserons les "releases" de gitHub pour configurer les mises à jour automatiques plus tard dans le tutoriel. Par conséquent, nous vous demanderons de :
Si vous n’êtes pas familier avec le fonctionnement de Git, nous vous recommandons de lire les guides Git de GitHub. Vous pouvez également utiliser l’application GitHub Desktop si vous préférez utiliser une interface visuelle à la place de la ligne de commande.
Nous vous recommandons de créer un référentiel Git local et de le publier sur GitHub avant de commencer le tutoriel, puis de commiter votre code après chaque étape.
GitHub Desktop installera sur votre système , la dernière version de Git si ce n'est pas déja fait.
Nodes.js et npm
Pour développer une application Electron, vous devez commencer par installer sur votre système le runtime Node.js et son gestionnaire de paquets intégré npm. Nous vous recommandons d’utiliser la dernière version du support à long terme (LTS).
Veuillez installer Node.js en utilisant des installateurs pré-compilés pour votre plate-forme. Sinon, vous risquez de rencontrer des problèmes d'incompatibilité avec différents outils de développement. Si vous utilisez macOS, nous vous recommandons d’utiliser un gestionnaire de paquets tel que Homebrew ou nvm pour éviter tout problème de droit d'accès aux dossiers.
Pour vérifier que Node.js a été correctement installé , vous pouvez utiliser l’indicateur -v lorsque exécutez les commandes node et npm . Celles-ci doivent afficher les versions installées.
$ node -v
v16.14.2
$ npm -v
8.7.0
Bien que Node.js doive être installé localement pour échafauder un projet Electron, Electron n’utilise pas la version installée sur votre système pour exécuter son code. Au lieu de cela, il est livré avec son propre runtime Node.js. Cela signifie que les utilisateurs finaux n’auront pas à installer Node.js préalablement à l’exécution de votre application.
Pour vérifier quelle version de Node.js s’exécute dans votre application, vous pouvez accéder à la variable globale process.versions dans le processus principal ou le script de préchargement. Vous pouvez également consulter https://releases.electronjs.org/releases.json.