Configurer Electron et créer une application Hello World sous Linux

Cet article couvrira un guide sur l'installation d'Electron et la création d'une simple application Electron "Hello World" sous Linux.

À propos d'Electron

Electron est un cadre de développement d'applications utilisé pour créer des applications de bureau multiplateformes à l'aide de technologies Web dans un navigateur Web autonome. Il fournit également des API spécifiques au système d'exploitation et un système d'emballage robuste pour une distribution plus facile des applications. Une application Electron typique nécessite trois choses pour fonctionner :.js runtime, un navigateur autonome basé sur Chromium fourni avec des API spécifiques à Electron et au système d'exploitation.

Installer le nœud.js

Vous pouvez installer Node.js et le gestionnaire de packages « npm » en exécutant la commande suivante dans Ubuntu :

$ sudo apt installer nodejs npm

Vous pouvez installer ces packages dans d'autres distributions Linux à partir du gestionnaire de packages. Vous pouvez également télécharger les binaires officiels disponibles sur Node.js site Web.

Créer un nouveau nœud.Projet js

Une fois que vous avez installé Node.js et "npm", créez un nouveau projet nommé "HelloWorld" en exécutant successivement les commandes suivantes :

$ mkdir HelloWorld
$ cd HelloWorld

Ensuite, lancez un terminal dans le répertoire "HelloWorld" et exécutez la commande ci-dessous pour initialiser un nouveau package :

$ npm init

Parcourez l'assistant interactif dans le terminal et entrez les noms et les valeurs selon vos besoins.

Attendez la fin de l'installation. Vous devriez maintenant avoir un « paquet.json" dans le répertoire "HelloWorld". Avoir un « paquet.json" dans votre répertoire de projet facilite la configuration des paramètres du projet et rend le projet portable pour un partage plus facile.

Le paquet.json" devrait avoir une entrée comme celle-ci :

"principal": "index.js"

"Indice.js" est l'endroit où toute la logique de votre programme principal serait située. Vous pouvez créer des ".js", ".html" et ".css” selon vos besoins. Aux fins du programme "HelloWorld" expliqué dans ce guide, la commande ci-dessous créera trois fichiers requis :

$ indice tactile.index js.index html.css

Installer Electron

Vous pouvez installer Electron dans votre répertoire de projet en exécutant la commande ci-dessous :

$ npm install electron --save-dev

Attendez la fin de l'installation. Electron sera maintenant ajouté à votre projet en tant que dépendance et vous devriez voir un dossier "node_modules" dans votre répertoire de projet. L'installation d'Electron en tant que dépendance par projet est la méthode recommandée pour installer Electron conformément à la documentation officielle d'Electron. Cependant, si vous souhaitez installer Electron globalement sur votre système, vous pouvez utiliser la commande mentionnée ci-dessous :

$ npm installer electron -g

Ajoutez la ligne suivante à la section "scripts" dans "package.json" pour terminer la configuration d'Electron :

"start": "électron ."

Créer une application principale

Ouvrez « index.js" dans l'éditeur de texte de votre choix et ajoutez-y le code suivant :

const app, BrowserWindow = require('electron');
fonction createWindow ()
const window = new BrowserWindow(
largeur: 1600,
hauteur : 900,
Préférences Web :
nodeIntegration : vrai

);
la fenêtre.loadFile('index.html');

application.quandPrêt().then(createWindow);

Ouvrir « index.html" dans votre éditeur de texte préféré et mettez-y le code suivant :

Bonjour le monde !!

Le code javascript est assez explicite. La première ligne importe les modules Electron nécessaires au fonctionnement de l'application. Ensuite, vous créez une nouvelle fenêtre du navigateur autonome fourni avec Electron et chargez le "index.html" dedans. Le balisage dans le « index.html" crée un nouveau paragraphe "Hello World !!" enveloppé dans le "

" étiqueter. Il comprend également un lien de référence vers « l'index.css" fichier de feuille de style utilisé plus loin dans l'article.

Exécutez votre application Electron

Exécutez la commande ci-dessous pour lancer votre application Electron :

$ npm début

Si vous avez suivi correctement les instructions jusqu'à présent, vous devriez obtenir une nouvelle fenêtre semblable à celle-ci :

Ouvrez « index.css" et ajoutez le code ci-dessous pour changer la couleur de "Hello World !!" chaîne.

#hmonde
La couleur rouge;

Exécutez à nouveau la commande suivante pour voir le style CSS appliqué à "Hello World !!" chaîne.

$ npm début

Vous disposez maintenant du strict minimum de fichiers requis pour exécuter une application Electron de base. Vous avez « index.js" pour écrire la logique du programme, "index.html" pour ajouter un balisage HTML et "index.css" pour styliser divers éléments. Vous disposez également d'un « forfait.json" et le dossier "node_modules" contenant les dépendances et modules requis.

Application d'électrons de paquet

Vous pouvez utiliser Electron Forge pour packager votre application, comme recommandé par la documentation officielle d'Electron.

Exécutez la commande ci-dessous pour ajouter Electron Forge à votre projet :

$ npx @electron-forge/cli@dernière importation

Vous devriez voir une sortie comme celle-ci :

Vérification de votre système
Initialisation du référentiel Git
Rédaction du package modifié.fichier json
Installation des dépendances
Rédaction du package modifié.fichier json
Fixation .gitignore
Nous avons ESSAYÉ de convertir votre application pour qu'elle soit dans un format qu'électron-forge comprend.
Merci d'avoir utilisé "electron-forge"!!!

Revoir « forfait.json" et modifiez ou supprimez les entrées des sections "makers" en fonction de vos besoins. Par exemple, si vous ne souhaitez pas créer un fichier « RPM », supprimez l'entrée liée à la création de packages « RPM ».

Exécutez la commande suivante pour créer le package d'application :

$ npm exécuter faire

Vous devriez obtenir une sortie semblable à celle-ci :

> [email protected] faire /home/nit/HelloWorld
> fabrication de forge à électrons
Vérification de votre système
Résoudre la configuration de Forge
Nous devons emballer votre demande avant de pouvoir la faire
✔ Préparation de l'application de package pour arch : x64
Préparation des dépendances natives
Application d'emballage
Vers les cibles suivantes : deb
✔ Making for target : deb - Sur plateforme : linux - Pour arch : x64

J'ai édité le "paquet.json" pour construire uniquement le package "DEB". Vous pouvez trouver des packages construits dans le dossier "out" situé dans votre répertoire de projet.

Conclusion

Electron est idéal pour créer des applications multiplateformes basées sur une base de code unique avec des modifications mineures spécifiques au système d'exploitation. Il a ses propres problèmes, le plus important d'entre eux est la consommation de ressources. Étant donné que tout est rendu dans un navigateur autonome et qu'une nouvelle fenêtre de navigateur est lancée avec chaque application Electron, ces applications peuvent être gourmandes en ressources par rapport à d'autres applications utilisant des kits d'outils de développement d'applications spécifiques au système d'exploitation natif.