Aller au contenu principal

Prérequis

Electron est un framework pour 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.

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, bien que vous puissiez 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: 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 couramment utilisé pour le code source, 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 versions 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, et de commiter votre code après chaque étape.

Installation de Git via GitHub Desktop

GitHub Desktop installera la dernière version de Git sur votre système si vous n’avez pas déjà installé.

Nodes.js et npm

Pour commencer à développer une application Electron, vous devez installer le runtime Node.js et son gestionnaire de paquets npm fourni sur votre système. Nous vous recommandons d’utiliser la dernière version du support à long terme (LTS).

astuce

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 permission de dossier.

Pour vérifier que Node.js a été installé correctement, 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
attention

Bien que vous ayez besoin de Node.js installé localement pour échafauder un projet Electron, Electron n’utilise pas l’installation Node.js de votre système pour exécuter son code. Au lieu de cela, il est livré avec son propre runtime Node.js. Cela signifie que vos utilisateurs finaux n’ont pas besoin d’installer Node.js eux-mêmes comme condition préalable à 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 vous référer à la liste des versions dans le dépôt electron/releases.