Créez des applications de nœud de bureau multiplateforme avec électron

Les plats clés

• Electron, un outil développé par GitHub, permet aux développeurs de créer des applications de bureau multiplateforme à l'aide de JavaScript et Web Technologies. Il offre une solution plus stable et sécurisée que les options précédentes telles que Flash, Air, Java et Silverlight.
• Un projet Electron nécessite trois fichiers: index.html, main.js et package.json. Le fichier index.html est la page Web rendue par défaut, le fichier main.js démarre l'application et crée une fenêtre de navigateur pour rendre HTML et le fichier package.json répertorie les dépendances d'application, les métadonnées et les fichiers nécessaires.
• Les applications électroniques peuvent être emballées dans des applications «natives» à l'aide d'outils comme le module NPM Electron-Packager. Cela crée un binaire exécutable qui peut fonctionner sur diverses plates-formes, notamment Windows, MacOS et Linux.
• L'électron n'est pas seulement pour les applications simples. Il peut gérer des fonctionnalités complexes et offre un accès à des fonctionnalités telles que l'accès au presse-papiers, des outils de barre de menu d'application et les outils Chrome Dev pour le débogage. Plusieurs applications populaires comme Atom, Slack et Kitematic sont construites avec l'électron.

Appelez-moi à l'ancienne, mais j'ai toujours préféré utiliser une application de bureau adaptée à chaque objectif. Je pense que si tout ce que je vais utiliser est un navigateur pour tout ce que je fais, alors pourquoi un ordinateur «approprié»? Sur le plan pratique, je voyage fréquemment et je suis généralement «entre» la connectivité Internet ou l'utilisation de connexions Internet instables, et les applications «réelles» sont généralement bien meilleures pour permettre un travail hors ligne efficace.

J'apprécie à quel point le développement et le maintien des applications de bureau natifs sont complexes et je peux comprendre pourquoi les entreprises poussent les utilisateurs vers des versions Web ou multiplateforme. Il y a eu une pléthore d'options pour y parvenir au fil des décennies. Flash, Air, Java et Sliverlight sont toutes des options qui ont promis cette capacité avec divers degrés de succès.

Le principal problème avec ces options est qu'ils impliquaient généralement d'apprendre une autre langue (qui bat le point) ou des utilisateurs forcés à installer des plugins en proie à des problèmes de stabilité, de performances et de sécurité.

Nous connaissons tous la puissance des technologies JavaScript et Web et avons vu une vague d'options pour développer et emballer des applications de bureau multiplateforme en utilisant ces connaissances.

Electron, par Github est une option, mais comme j'utilise déjà avec plaisir plusieurs applications construites avec elle, il semblait une bonne option pour enquêter. Après deux ans de développement, y compris un changement de nom (à partir de la coquille d'atom), Electron a récemment atteint la version 1.0, toujours une étape importante dans l'existence de tout projet. Quel meilleur moment pour voir de quoi il est capable.

Installation d'électrons

Electron a un projet de démarrage rapide et des versions pré-construites disponibles, mais plongeons directement dans l'extrémité profonde et installons l'électron via NPM:

<span>npm install electron-prebuilt -g
</span>

ou pour les amateurs de homebrew Mac, via le fût:

<span>npm install electron-prebuilt -g
</span>

Quelle que soit l'option que vous suivez, vous devez vous retrouver avec un binaire électronique exécutable.

Cette application est uniquement utilisée pour regrouper et exécuter votre projet final, pas pour en créer un. Pour cela, vous pouvez utiliser n'importe quel éditeur de texte ou IDE standard.

Un projet d'électrons nécessite trois fichiers:

• index.html: la page Web rendue par défaut.
• main.js: démarre l'application et crée une fenêtre de navigateur pour rendre html.
• package.json: répertorie les dépendances des applications, les méta-données et les fichiers nécessaires.

Vous avez besoin d'un héros

Dans cet exemple, je vais créer une application simple qui se connecte à l'API Marvel, attire 25 super héros et affiche leur nom et leur image de vignette. Il affichera une notification système lorsque le processus sera terminé et aura une icône d'application de type OS. Un utilisateur final ne sera pas au courant de la façon dont l'application a été créée ou pourra afficher le code source.

Vous pouvez trouver le projet final sur GitHub.

ouvrir package.json et ajouter ce qui suit:

brew <span>install Caskroom/cask/electron
</span>

Il s'agit d'un fichier package.json standard et suit le même format et les mêmes options que node.js. Ici, la définition du nom de l'application, de la version, du fichier et des dépendances JavaScript principal.

Exécutez l'installation de NPM après les ajouter pour vous assurer que les dépendances sont installées.

main.js gère les interactions entre le système d'exploitation hôte et votre code JavaScript. Ce sera un exemple simple, vous pouvez en savoir plus sur ce qui est possible dans la documentation d'Electron.

Tout d'abord, configurons les exigences nécessaires (c'est-à-dire électron), créez une application, une fenêtre de navigateur native et un espace réservé de la fenêtre principale avec qui travailler.

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

PROPOITION SUIVANCE QUITTER QUITTER L'APPLICATION si les fenêtres sont fermées. Si la plate-forme est OS X, les applications restent généralement ouvertes après la fermeture des fenêtres et que les utilisateurs quittent normalement explicitement, alors gérez ce cas d'utilisation.

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

Une fois l'électron initialisé, créez la fenêtre du navigateur et chargez le code d'application. Si la fenêtre est fermée, déréférencez l'objet de fenêtre.

app<span>.on('window-all-closed', function() {
</span>    <span>if (process.platform != 'darwin') {
</span>        app<span>.quit();
</span>    <span>}
</span><span>});
</span>

Créez un sous-dossier appelé App. Dans app / index.html, ajoutez des références aux feuilles de style et aux fichiers javascript nécessaires et configurez la structure HTML de l'interface.

app<span>.on('ready', function() {
</span>  mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span>  mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
  mainWindow<span>.on('closed', function() {
</span>    mainWindow <span>= null;
</span>  <span>});
</span><span>});
</span>

Créer des applications / css / index.css et ajoutez quelques CSS de base pour aider à la mise en page.

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Marvel Super Hero Browser<span><span></title</span>></span>
</span>    <span><span><span><link</span> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span>/></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>Marvel Super Hero Browser<span><span></h1</span>></span>
</span>    <span><span><span><em</span>></span>Thanks to Marvel for their API.<span><span></em</span>></span>
</span>
    <span><span><span><div</span> id<span>="character_list"</span>></span><span><span></div</span>></span>
</span>
    <span><span><span><script</span> src<span>="js/index.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Créer des applications / js / index.js. Ce sera là que la majeure partie de la fonctionnalité d'application aura lieu. Commencez par configurer les dépendances et les variables nécessaires:

<span>npm install electron-prebuilt -g
</span>

L'API Marvel est une API amusante à utiliser, mais c'est l'authentification et la structure des données peut être déroutante. Inscrivez-vous ici pour une clé et suivez ces instructions pour obtenir les trois paramètres nécessaires ci-dessus. Les clés publiques et privées requises pour l'authentification sont stockées dans un fichier .env et accessibles à l'aide du package Dotenv.

brew <span>install Caskroom/cask/electron
</span>

La valeur limite définit le nombre d'enregistrements à demander et il existe d'autres paramètres qui peuvent être définis.

Si vous préférez sauter la connexion et l'authentification avec l'API Marvel, j'ai créé un fichier JSON de données à utiliser à la place. Remplacez le code JavaScript ci-dessus par:

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

Ensuite, créez les variables HTML et d'espace réservé nécessaires pour la sortie de chaque caractère dans le caractéristique div:

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

Ensuite, appelez à l'API et traitez la réponse, en se délirant dans la structure JSON pour la liste réelle des caractères à l'intérieur de resp.ata.results.

Créer des éléments HTML pour chaque personnage, en les appuyant sur caractères_list. Les images de l'API Marvel sont séparées en un nom de fichier et une extension. S'il n'y a pas d'image disponible, il affiche une image «pas d'image disponible», nous pourrions gérer cela, mais pas dans cet exemple.

À la fin de la boucle, affichez une notification système, fermez les méthodes et gérez les erreurs de potentiel se connectant à l'API.

app<span>.on('window-all-closed', function() {
</span>    <span>if (process.platform != 'darwin') {
</span>        app<span>.quit();
</span>    <span>}
</span><span>});
</span>

Exécutez l'application en exécutant la commande ci-dessous dans le répertoire racine du projet:

app<span>.on('ready', function() {
</span>  mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span>  mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
  mainWindow<span>.on('closed', function() {
</span>    mainWindow <span>= null;
</span>  <span>});
</span><span>});
</span>

Emballage de l'application

Emballage du code dans une application «native» est simple mais nécessite quelques pièces. D'abord une icône pour l'insigne d'application. Le type de look et de fichier dépendra des systèmes d'exploitation que vous ciblez, mais voici l'icône que j'ai utilisée, tirée de l'application Android officielle de Marvel.

Remarque: nous utilisons ici des propriétés Marvel protégés par le droit d'auteur à des fins illustratives. Veuillez ne pas les distribuer comme le vôtre!

J'ai ensuite utilisé des iconverticons.com/online/ pour convertir la PNG en fichier d'icône Mac, mais il existe d'autres outils disponibles.

La façon la plus simple de former le projet consiste à utiliser le module NPM Electron-Packager (Remarque: Cela doit être installé séparément). Il peut générer de grands binaires, pour les applications de bureau, ce n'est peut-être pas un problème, mais si c'est le cas, d'autres options sont décrites ici.

Si vous emballez pour Windows sur une plate-forme non Windows, vous devrez installer du vin, ce qui est une grande dépendance.

Ces mises en garde à part, voici comment créer l'application binaire. Dans votre dossier de projet, exécutez ( Remplacement par des valeurs pertinentes pour votre projet ):

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Marvel Super Hero Browser<span><span></title</span>></span>
</span>    <span><span><span><link</span> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span>/></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>Marvel Super Hero Browser<span><span></h1</span>></span>
</span>    <span><span><span><em</span>></span>Thanks to Marvel for their API.<span><span></em</span>></span>
</span>
    <span><span><span><div</span> id<span>="character_list"</span>></span><span><span></div</span>></span>
</span>
    <span><span><span><script</span> src<span>="js/index.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Dans l'ordre, ces paramètres définissent:

• le dossier du projet.
• le nom de l'application généré.
• La plate-forme: ce sont Win32 pour Windows, Linux, Darwin pour Vanilla Mac OS X et MAS pour une version Mac App Store. Définir tout, générera un binaire pour toutes les plates-formes.
• L'architecture: IA32 et X64 pour les architectures CPU 32 et 64 bits, ou à tous.
• la version électronique à utiliser.
• l'emplacement binaire de sortie et pour écraser les fichiers existants.
• les icônes à utiliser.

Remarque: tous les paramètres peuvent être séparés par les virgules pour plusieurs valeurs et si vous souhaitez générer toutes les plates-formes et architectures, vous pouvez remplacer les paramètres pertinents par - all.

étapes supplémentaires

Ce fut un exemple simple pour illustrer le potentiel de l'électron et bien plus est possible. Mettre de côté ce qui peut être accompli avec un JavaScript pur, vous aimerez peut-être jeter un œil à:

• Mac App Store Store.
• en utilisant des outils de développement chromés.
• Accès du presse-papiers.
• Création d'un outil de barre de menu d'application.
• La nouvelle API interactive de l'électron.
• Devtron, une extension des outils de développement chromés, en particulier pour le développement d'électrons.

toujours sceptique? Je voudrais souligner que lors de la rédaction de cet article dans Atom, j'ai communiqué avec le rédacteur en chef de cet article dans Slack et testé l'application dans des conteneurs Docker créés dans Kitematic. Tous sont des applications générées par électrons. Ok, ils ont leurs problèmes, mais c'est assez impressionnant!

J'aimerais entendre parler des applications que vous construisez avec Electron dans les commentaires ci-dessous.

Des questions fréquemment posées sur les applications de nœuds de bureau avec électron

Quelles sont les conditions préalables pour développer des applications de bureau avec Electron?

Avant de commencer à développer des applications de bureau avec Electron, vous devez que Node.js et NPM (Node Package Manager)) soient installés sur votre système. Node.js est un runtime JavaScript qui vous permet d'exécuter JavaScript sur votre serveur ou votre machine, tandis que NPM est un gestionnaire de packages pour les packages Node.js. Vous pouvez télécharger Node.js et NPM sur le site officiel de Node.js. Une fois que vous les avez installés, vous pouvez ensuite installer un électron à l'aide de NPM.

Comment installer l'électron sur mon système?

L'installation d'électron est assez simple. Une fois que Node.js et NPM sont installés, vous pouvez installer Electron globalement sur votre système en utilisant la commande suivante dans votre borne ou votre invite de commande: NPM Install -g Electron. Cette commande installe Electron à l'échelle mondiale, vous permettant d'y accéder à partir de n'importe quel répertoire de votre système.

Comment créer un nouveau projet Electron?

Pour créer un nouveau projet Electron, d'abord, créez un nouveau répertoire pour votre projet. Accédez à ce répertoire dans votre terminal ou votre invite de commande, puis initialisez un nouveau projet Node.js à l'aide de la commande npm init. Cette commande crée un nouveau fichier package.json dans votre répertoire de projet. Vous pouvez ensuite installer Electron dans votre projet à l'aide de la commande NPM Installer - Save Electron.

Quelle est la structure d'une application électronique?

Une application électronique se compose généralement de trois types de fichiers: package.json, main.js et index.html. Le fichier package.json contient des métadonnées sur votre application et ses dépendances. Le fichier main.js est le point d'entrée de votre application, où vous pouvez contrôler les événements du cycle de vie de votre application. Le fichier index.html est la page Web qui s'affiche lorsque votre application démarre.

Comment exécuter mon application Electron?

Pour exécuter votre application Electron, accédez à votre répertoire de projet dans votre Terminal ou invite de commande, puis utilisez l'électron de commande. Cette commande démarre votre application.

Comment puis-je emballer mon application électronique pour la distribution?

Pour emballer votre application électronique pour la distribution, vous peut utiliser un module comme un packageur électronique ou un constructeur électronique. Ces modules vous permettent d'emballer votre application dans un fichier exécutable qui peut être exécuté sur diverses plates-formes.

Puis-je utiliser des modules node.js dans mon application électronique?

Oui, vous pouvez utiliser Node Modules .js dans votre application électronique. Electron utilise Runtime Node.js, afin que vous puissiez utiliser n'importe quel module Node.js dans votre application.

Puis-je utiliser des technologies Web dans mon application Electron?

Oui, vous pouvez utiliser des technologies Web dans votre application électronique. Electron est essentiellement un navigateur Web qui vous permet de créer des applications de bureau à l'aide de technologies Web comme HTML, CSS et JavaScript.

Comment puis-je déboguer mon application Electron?

Vous pouvez déboguer votre application Electron Utilisation des outils de développeur Chrome. L'électron est construit sur le chrome, il comprend donc un outil de développeur intégré que vous pouvez utiliser pour déboguer votre application.

Puis-je créer des applications multiplateformes avec électron?

Oui, vous pouvez Créez des applications multiplateformes avec électron. Electron vous permet de créer des applications qui s'exécutent sur Windows, MacOS et Linux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!