Configuration de l'électron et créez une application Hello World dans Linux

Cet article couvrira un guide sur l'installation d'électrons et la création d'une application électronique simple «Hello World» dans Linux.

À propos de l'électron

Electron est un cadre de développement d'applications utilisé pour créer des applications de bureau multiplateforme à 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 électronique typique nécessite trois choses pour fonctionner: Node.JS Runtime, un navigateur autonome basé sur le chrome qui est livré avec des API spécifiques aux électrons et au système d'exploitation.

Installer le nœud.js

Vous pouvez installer le nœud.JS et «NPM» Package Manager en exécutant la commande suivante dans Ubuntu:

$ sudo apt install nodejs npm

Vous pouvez installer ces packages dans d'autres distributions Linux à partir du gestionnaire de packages. Alternativement, télécharger les binaires officiels disponibles sur le nœud.Site Web JS.

Créer un nouveau nœud.projet JS

Une fois que vous avez installé le nœud.JS et «NPM», créez un nouveau projet nommé «Helloworld» en exécutant les commandes suivantes successivement:

$ 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

Passez par l'assistant interactif dans le terminal et entrez des noms et des valeurs au besoin.

Attendez la fin de l'installation. Vous devriez maintenant avoir un «package.Fichier JSON "dans le répertoire" Helloworld ". Avoir un «package.Le fichier JSON »dans votre répertoire de projet facilite la configuration des paramètres du projet et rend le projet portable pour plus de partage plus facile.

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

"Main": "Index.JS "

"Indice.JS ”est l'endroit où toute logique pour votre programme principal serait localisé. Vous pouvez créer un supplément ".JS ",".html »et«.CSS "Fichiers en fonction de vos besoins. Aux fins du programme «Helloworld» expliqué dans ce guide, la commande ci-dessous créera trois fichiers requis:

$ Index Touch.Index JS.index html.CSS

Installer un électron

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

$ npm install electron --seave-dev

Attendez la fin de l'installation. Electron sera désormais 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'électron en tant que dépendance par projet est le moyen recommandé d'installer l'électron selon la documentation officielle d'électrons. Cependant, si vous souhaitez installer un électron à l'échelle mondiale sur votre système, vous pouvez utiliser la commande mentionnée ci-dessous:

$ npm install electron -g

Ajoutez la ligne suivante à la section «scripts» dans «package.Fichier JSON ”pour terminer la configuration des électrons:

"Démarrer": "Electron ."

Créer une application principale

Index ouvert.Fichier 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,
webPreferences:
nodeintegration: vrai

);
fenêtre.chargement ('index.html ');

appliquer.Quand est-il ().alors (createwindow);

Index ouvert.Fichier html »dans votre éditeur de texte préféré et y mettre le code suivant:

Bonjour le monde !!

Le code JavaScript est assez explicite. La première ligne importe des modules d'électrons nécessaires pour que l'application fonctionne. Ensuite, vous créez une nouvelle fenêtre du navigateur autonome qui est livré avec un électron et charger l'index.Fichier HTML ". Le balisage dans «l'index.Le fichier html »crée un nouveau paragraphe« Hello World !!"Enveloppé dans le"

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

Exécutez votre application Electron

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

$ npm start

Si vous avez suivi correctement les instructions jusqu'à présent, vous devriez obtenir une nouvelle fenêtre similaire à ceci:

Index ouvert.CSS "et ajoutez le code ci-dessous pour modifier la couleur de" Hello World !!" chaîne.

#hworld
La couleur rouge;

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

$ npm start

Vous avez maintenant l'ensemble minimum nu de fichiers requis pour exécuter une application électronique de base. Vous avez «Index.JS "pour écrire la logique du programme," Index.HTML "pour ajouter le balisage HTML et" Index.CSS »pour styliser divers éléments. Vous avez également un «package.Fichier JSON »et dossier« node_modules »contenant des dépendances et des modules requis.

Application d'électrons de package

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

Exécutez la commande ci-dessous pour ajouter d'électron forge à votre projet:

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

Vous devriez voir une sortie comme ceci:

✔ Vérification de votre système
✔ Initialisation du référentiel GIT
✔ Écriture du package modifié.fichier json
✔ Installation des dépendances
✔ Écriture du package modifié.fichier json
✔ Fixation .gitignore
Nous avons tenté de convertir votre application pour être dans un format que Electron-Forge comprend.
Merci d'avoir utilisé "Electron-Forge"!!!

Examen «Package.Fichier JSON »et modifier ou supprimer les entrées des sections« fabricants »en fonction de vos besoins. Par exemple, si vous ne souhaitez pas construire un fichier «RPM», supprimez l'entrée liée à la construction de packages «RPM».

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

$ npm run make

Vous devriez obtenir une sortie similaire à ceci:

> helloworld @ 1.0.0 Make / Home / Nit / Helloworld
> maquilleur d'électrons-forge
✔ Vérification de votre système
✔ Résolution de la configuration de forge
Nous devons emballer votre application avant de pouvoir le faire
✔ Préparation de l'application de package pour Arch: x64
✔ Préparer les dépendances natives
✔ Application d'emballage
Faire pour les cibles suivantes: Deb
✔ Making For Target: Deb - Sur la plate-forme: Linux - pour Arch: x64

J'ai édité le «package.Fichier JSON "pour créer uniquement le package" Deb ". Vous pouvez trouver des packages construits dans le dossier «Out» situé à l'intérieur de votre répertoire de projet.

Conclusion

L'électron est idéal pour créer des applications multiplateformes basées sur une seule base de code avec des modifications spécifiques du système d'exploitation mineures. 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 électronique, ces applications peuvent être à forte intensité de ressources par rapport à d'autres applications à l'aide de kits d'outils de développement d'applications spécifiques au système d'exploitation natif.