Créer une application avec Electron

Electron est un environnement permettant de créer des applications de bureau cross-platform avec seulement du HTML, du CSS et du Javascript. Si vous savez développer pour le Web, alors vous saurez aussi créer une application pour PC ou Mac, en utilisant Electron.

Une application Electron ressemble aux applications créées avec d’autres langages et frameworks comme React ou VueJS mais vous n’avez pas besoin de lancer de navigateur. Elle peut être lancée comme n’importe quelle application que vous possédez sur votre PC.

Prérequis pour la création d'une application avec Electron

• Node JS avec une version stable (ex : 18.14.2)
• Visual Studio Code ou n’importe quel éditer de code

Introduction

Electron est fondé sur deux technologies puissantes : NodeJS et Chromium. Node.js pour créer un serveur local, accéder aux fichiers, gérer les modules (back) et Chromium pour la gestion de l’affichage et interface utilisateur (front). C’est un logiciel Open Source développé par Github.

Quelques applications populaires développées sous Electron que vous connaissez sûrement déjà :

• VS Code
• Slack
• L’application de bureau de Github
• etc.

Mise en place

Nous allons créer un dossier ‘electron-tuto’. Pour ce faire, vous allez initialiser un nouveau projet Node via la commande suivante :

Après avoir rempli toutes les questions d’initialisation (nom du package, description, version, auteur…) un fichier package.json sera créé.

Puis on va ajouter la dépendance d’Electron. Après cette commande, un fichier package-lock.json sera créé.

Dans le fichier package.json. Il faudra créer un script de lancement pour Electron pour que notre application se lance depuis le dossier ‘electron-tuto’.

Après toute cette initialisation, notre fichier devra ressembler à cela :

Le script que l’on vient de rajouter va prendre comme point d’entrée de l’application le fichier qui se trouve dans la propriété "main" ici main.js. Lorsque l’on fera la commande npm start, cela va exécuter le fichier main.js.

Création d’une première fenêtre

Pour commencer, nous allons pouvoir créer notre première page index.html toute simple qui sera donc à la racine de notre projet. Elle sera le visuel de notre première page. Si vous le souhaitez, vous pouvez rajouter un fichier style.css lié à cette page pour que cela rende mieux visuellement.

Nous allons ensuite créer un fichier main.js à la racine de notre projet. Il est défini comme point d’entrée de l’application dans le package.json. Ce point d’entrée va créer notre première fenêtre.

La classe BrowserWindow va nous permettre de créer une fenêtre avec différents paramètres. Ici, nous pouvons définir la taille de notre écran lorsque l’application se lance. On pourrait aussi très bien définir directement la couleur de fond de notre application, ou encore l’icone de celle-ci dans le BrowserWindow. Il y a énormément de fonctionnalités disponibles grâce à cette classe, pour avoir tout en détail, consultez le menu BrowserWindow du site Electron.

Pour tester ce que l’on vient de créer, on pourra directement lancer la commande que l’on a définie précédemment dans le package.json, à savoir : npm start.
Elle va lancer automatiquement l’application, voici ce qu’elle censé nous rendre :

Gestion des menus

Lors du lancement d’une application sans modification du menu, Electron en possède déjà un par défaut. Il contient tous les menus de base. Les menus de « Dev ».

• File permet de sortir de l’application avec un submenu Exit
• Edit va contenir toutes les fonctionnalités Copy, Cut, Undo…
• View va nous donner accès à la console développeur et par exemple rafraîchir de la page.
• Window va permettre de réduire la page ou de l’agrandir
• Le menu Help va nous aider à trouver documentation Electron et le lien vers la coomunauté

Même s’ils sont présents par défaut, Electron nous permet de créer des menus personnalisés. On pourra définir ici nos propres menus comme par exemple gérer la navigation, recharger la page, etc.

Par exemple nous pourrions log dans le terminal une phrase au moment de l’activation du bouton.

Enormément de choses sont possibles pour le menu.

Voici le nouveau menu que l’on obtient :

Code spécifique à une plateforme

Electron propose une solution à l’écriture de code spécifique suivant la plateforme utilisée par l’utilisateur. Si l’on prend l’exemple de MacOS, les comportements des applications sont très différents comparés à Windows ou Linux, même niveau de l’UX (boutons, menus…).

Exemple : Sur un Windows ou Linux, il est d'usage de fermer une application lorsque toutes les fenêtres sont fermées. Sur Mac, l'application reste ouverte et peut être réouverte, ce qui ouvre une fenêtre.

Ainsi Electron utilise des conditions qui vont vérifier sur quelle plateforme se trouve l’utilisateur. On va utiliser process.platform de NodeJS. Process.platform peut prendre plusieurs valeurs tels que :

• Apple --> Darwin
• Windows --> win32
• Linux --> linux

On peut donc personnaliser le comportement de notre application grâce à une condition. Ici par exemple, nous allons afficher une partie du menu si l’utilisateur est sur MacOS. Cette fonctionnalité évite aux entreprises de devoir faire des doubles développements pour les différentes plateformes. On gagne ainsi beaucoup de temps.

Packager une application avec Electron

Nous allons voir comment packager notre application pour pouvoir l’utiliser en local, c’est-à-dire avoir l’application sur notre ordinateur comme n’importe quelle autre. Vous allez voir, c’est assez simple !

Pour cela nous aurons besoin d’installer un nouveau package, electron-packager.

Une fois ceci fait, nous allons pouvoir ajouter dans notre package.json une ligne dans notre script :

Cette ligne va nous permettre de "builder" notre application pour en sortir un .exe. Si on rentre dans les détails, la commande va aller chercher tout le dossier dans lequel on se trouve (electron-tuto) grâce aux guillemets présents dans la commande, et nommer notre application "FirstApp".

Pour exécuter cette ligne il faudra lancer la commande : npm run build. Celle-ci nous créera un dossier contenant notre application.

Nous pouvons lancer cette application et nous aurions la même que celle lancée depuis le terminal. Nous pourrions même l’épingler à notre barre des tâches.

Conclusion

Pour conclure, l’utilisation d’Electron ne nécessite pas d’être expert en NodeJS car beaucoup d’éléments ne sont pas spécifiques à Node mais à Electron. De plus, son utilisation est très complète, on peut y faire énormément de chose différentes.

Electron possède aussi une documentation très large avec énormément de choix et de possibilités.

On pourrait approfondir ce tuto avec l’utilisation de framework Javascript tels que React ou VueJS pour construire notre application car c’est une des nombreuses possibilités avec Electron !

On pourrait aussi voir comment déployer une application qui possède l’auto-update grâce à electron-builder dans un prochain article !

Retour page précédente Retour au Wiki

Vous souhaitez bénéficier d'experts, de développeurs, ou en savoir plus sur les créations d'applications ? Rendez vous sur la page Contact