Créer des applications de bureau avec Electron et Vue

juillet 21, 2020

À propos de l'auteur

Développeur front-end basé à Lagos, Nigeria. Il aime convertir les conceptions en code et créer des éléments pour le Web.
En savoir plus sur
Timi
…

Electron est un framework logiciel open source développé et maintenu par GitHub. Il permet le développement d'applications GUI de bureau à l'aide des technologies Web. Dans ce didacticiel, Timi Omoyeni explique ce que vous devez garder à l'esprit lorsque vous créez une application de bureau avec Vue.js à l'aide du Vue CLI Plugin Electron Builder .

JavaScript était auparavant connu comme le langage de construction sites Web et applications Web en particulier avec certains de ses frameworks tels que React, Vue et Angular, mais avec le temps (dès 2009), il est devenu possible pour JavaScript de fonctionner en dehors du navigateur avec l'émergence de Node.js un environnement d'exécution JavaScript open source et multiplateforme qui exécute du code JavaScript en dehors d'un navigateur Web. Cela a conduit à la possibilité d'utiliser JavaScript pour bien plus que de simples applications Web, et l'une d'entre elles consiste à créer des applications de bureau à l'aide d'Electron.js.

Electron vous permet de créer des applications de bureau avec du JavaScript pur en fournissant un environnement d'exécution avec API natives riches (système d'exploitation). Vous pouvez le voir comme une variante du runtime Node.js qui se concentre sur les applications de bureau plutôt que sur les serveurs Web.

Dans ce tutoriel, nous allons apprendre à créer des applications de bureau à l'aide d'Electron, nous allons également pour apprendre à utiliser Vuejs pour créer des applications Electron.

Remarque : Une connaissance de base de Vue.js et de la Vue CLI est requise pour suivez ce tutoriel. Tout le code utilisé dans ce didacticiel se trouve sur mon GitHub . N'hésitez pas à le cloner et à jouer avec!

Que sont les applications de bureau?

Les applications de bureau sont des applications qui s'exécutent de manière autonome sur des ordinateurs de bureau ou portables. Ce sont des applications qui exécutent des tâches spécifiques et qui sont installées uniquement à cette fin.

Un exemple d'application de bureau est votre Microsoft Word qui est utilisé pour créer et taper des documents. Les navigateurs Web, Visual Studio Code et Adobe Photoshop sont d'autres exemples d'applications de bureau courantes. Les applications de bureau sont différentes des applications Web car vous devez installer l'application de bureau pour pouvoir y accéder et l'utiliser, et elles n'ont parfois pas besoin d'un accès Internet pour fonctionner. Les applications Web, en revanche, sont accessibles en visitant simplement l'URL sur laquelle une telle application est hébergée et ont toujours besoin d'un accès Internet avant de pouvoir y accéder.

Exemples de frameworks utilisés dans la création d'applications de bureau:

Java
Java est un langage de programmation polyvalent qui est basé sur les classes orienté objet et conçu pour avoir le moins d'implémentations dépendances que possible. Il est prévu de permettre aux développeurs d'applications d'écrire une fois, de s'exécuter n'importe où (WORA), ce qui signifie que le code Java compilé peut s'exécuter sur toutes les plates-formes prenant en charge Java sans recompilation.
Java FX
Selon leur documentation officielle il s'agit d'une plate-forme d'application client open-source de nouvelle génération pour les systèmes de bureau, mobiles et embarqués basés sur Java.
C # [19659014] C # est un langage de programmation multi-paradigme polyvalent englobant des disciplines de programmation à typage fort, à portée lexique, impérative, déclarative, fonctionnelle, générique, orientée objet et orientée composants.
.NET
.NET est une plateforme de développement open source multiplateforme et gratuite pour la création de nombreux types d'applications. Avec .NET, vous pouvez utiliser plusieurs langues, éditeurs et bibliothèques pour créer pour le Web, les appareils mobiles, les ordinateurs de bureau, les jeux et l'IdO.

Qu'est-ce qu'Electron?

Electron est un framework open-source pour la création d'applications de bureau. Il était anciennement connu sous le nom de «Atom shell» et est développé et maintenu par GitHub. Il vous permet d'écrire des applications de bureau multiplateformes à l'aide de HTML, CSS et JavaScript. Cela signifie que vous pouvez créer des applications de bureau pour Windows, MacOS et d'autres plates-formes en utilisant une base de code. Il est basé sur Node.js et Chromium . Des exemples d'applications construites avec Electron incluent le éditeur Atom populaire Visual Studio Code WordPress for desktop et Slack .

Installation

Vous pouvez installer Electron dans votre projet à l'aide de NPM:

 npm install electron --save-dev

Vous pouvez également l'installer globalement si vous allez beaucoup travailler avec des applications électroniques en utilisant cette commande :

 npm install electron -g

Construire des applications Vuejs pour le bureau avec Electron

Si vous êtes familiarisé avec la création d'applications Web à l'aide de Vuejs, il est possible de créer des applications de bureau en utilisant Vuejs. Tout ce dont vous avez besoin pour cela est le Plugin Vue CLI Electron Builder .

Le Plugin Vue CLI Electron Builder

Cet outil vous permet de créer des applications Vue pour le bureau avec Electron, cela signifie qu'il rend votre L'application Vue fonctionne comme une application électronique. Cela signifie que votre application Vue, qui est probablement une application Web, peut être étendue pour fonctionner dans des environnements de bureau sans qu'il soit nécessaire de créer une application de bureau distincte dans un autre cadre. Cela donne aux développeurs Vue la possibilité et le pouvoir d'aller au-delà du Web. À l'avenir, vous pouvez travailler sur cette idée que vous avez et offrir aux utilisateurs une option d'application de bureau – une option qui peut fonctionner sous Windows, macOS et Linux.

Pour voir cela en action, nous allons créer une application Actualités en utilisant l'API News . L'application fournira des titres d'actualité de dernière minute et vous permettra de rechercher des articles provenant de sources d'actualités et de blogs partout sur le Web avec leur API. Tout ce dont vous avez besoin pour commencer avec eux est votre clé API personnelle qui peut être obtenue à partir de ici .

Nous allons créer une application simple qui offre ce qui suit:

Une page qui affiche le haut et faire les gros titres d'un pays sélectionné avec la possibilité de choisir un pays en utilisant son point de terminaison / top-headlines . L'API News fournit des nouvelles d'une liste de pays pris en charge, recherchez la liste ici .
Actualités d'une catégorie sélectionnée en utilisant une combinaison de leur point de terminaison / tout et d'un paramètre de requête q avec lequel nous spécifierons notre catégorie.

Après avoir obtenu votre clé API, nous pouvons créer notre application en utilisant la Vue CLI . Assurez-vous que Vue CLI est installé sur votre système, si vous ne le faites pas, installez-le à l'aide de cette commande:

 npm install -g @ vue / cli
# OU
yarn global add @ vue / cli

Une fois cela fait, créez votre application News en utilisant la CLI:

 vue create news-app

Nous allons récupérer les données de l'API News en utilisant Axios pour ce didacticiel, mais vous pouvez utiliser n'importe quelle alternative avec laquelle vous êtes plus à l'aise. Vous pouvez installer Axios à l'aide de l'une des commandes suivantes:

 // NPM
npm installer axios
// FIL
yarn add axios

La prochaine étape serait de configurer une instance Axios pour la configuration globale dans notre application. Nous allons créer un dossier plugins dans le dossier src où nous créerons ce fichier axios.js . Après avoir créé le fichier, ajoutez les lignes de code suivantes:

 import axios from "axios";
laissez baseURL = `https: // newsapi.org / v2`;
let apiKey = process.env.VUE_APP_APIKEY;
const instance = axios.create ({
    baseURL: baseURL,
    timeout: 30000,
    en-têtes: {
        "X-Api-Key": apiKey,
    },
});
export default instance;

Ici, nous définissons notre baseURL et apiKey que nous avons obtenu de News API et la passons à une nouvelle instance d'Axios. Cette instance accepte les baseURL et apiKey avec une propriété timeout . L'API News vous oblige à ajouter votre clé API lorsque vous faites une requête à son API et propose 3 façons de la joindre à votre requête mais ici, nous l'ajoutons à l'en-tête X-Api- Propriété clé après laquelle nous exportons l'instance . Une fois cela fait, nous pouvons maintenant utiliser cette configuration pour toutes nos requêtes Axios dans notre application.

Lorsque cela est fait, vous pouvez ajouter le générateur Plugin Electron avec la CLI en utilisant cette commande:

 vue add electron-builder

Vous serez invité à sélectionner votre version Electron préférée, j'ai sélectionné la version 9.0.0 car il s'agit de la dernière version d'Electron (au moment de la rédaction de cet article).

Lorsque cela est fait , vous pouvez maintenant servir votre application en utilisant cette commande:

 Using Yarn (fortement recommandé)
électron de fil: servir
OU NPM
npm run electron: serve

Cela prendra un certain temps pour compiler et servir votre application. Lorsque cela est fait, votre application s'ouvrira sur votre système, cela devrait ressembler à ceci:

état d'ouverture automatique de votre application d'électrons. ( Grand aperçu )

Si vous fermez les outils de développement de votre application, cela devrait ressembler à ceci:

Page de destination de votre application. ( Grand aperçu )

Ce plugin d'électrons est super utile et facile à utiliser car chaque partie du développement de cette application fonctionne de la même manière qu'une application Vue. Cela signifie que vous pouvez avoir une base de code pour votre application Web et votre application de bureau. Notre application se composera de trois parties:

Une page de destination qui restitue les principales nouvelles d'un pays choisi au hasard.
Une page pour afficher les principales nouvelles du pays choisi par l'utilisateur.
Une page qui affiche les principales nouvelles de une catégorie de la sélection de l'utilisateur.

Pour cela, nous allons avoir besoin d'un composant d'en-tête pour tous nos liens de navigation. Alors créons un fichier dans le dossier components et nommez-le header.vue puis ajoutez-y les lignes de code suivantes:

Ici, nous créons un composant d'en-tête qui a le nom et le logo de notre application (l'image peut être trouvée sur my GitHub ) avec une section de navigation qui contient des liens vers les autres parties de notre application. La prochaine chose serait d'importer cette page sur notre page de mise en page – App.vue afin que nous puissions voir notre en-tête sur chaque page.

Ici, nous remplaçons le contenu par défaut dans la section modèle par notre composant d'en-tête nouvellement créé après l'avoir importé et déclaré dans la section script. Enfin, nous ajoutons un style pour toute l'application dans la section style.

Maintenant, si nous essayons de voir notre application, elle devrait ressembler à ceci:

Page de destination vide. ( Grand aperçu )

La prochaine étape serait d'ajouter du contenu à notre fichier Home.vue . Cette page hébergerait la première section de notre application; Top actualités d'un pays sélectionné au hasard. Mettez à jour votre fichier Home.vue avec les lignes de code suivantes:

Dans la section script de ce fichier, nous importons mapState et mapActions de Vuex, que nous utiliserons plus tard dans ce fichier. Nous importons également un composant NewsCard (nous le créerons ensuite) qui afficherait tous les titres des actualités de cette page. Nous utilisons ensuite la méthode fetchTopNews pour récupérer les dernières nouvelles d'un pays sélectionné au hasard dans la liste de pays de notre magasin. Ce pays est passé à notre action getTopNews ceci serait ajouté à baseURL comme requête pour un pays comme celui-ci baseURL / top-news? Country = $ {randomCountry } . Une fois que cela est fait, nous parcourons ces données et les passons à l'accessoire article de notre composant Newscard dans la section template. Nous avons également un paragraphe qui indique de quel pays proviennent les principales nouvelles.

La prochaine chose à faire serait de configurer notre composant NewsCard qui affichera ces nouvelles. Créez un nouveau fichier dans votre dossier components nommez-le NewsCard.vue et ajoutez-y les lignes de code suivantes:

Ici, nous affichons les données passées dans ce composant à l'aide de l'objet article object prop. Nous avons également une méthode qui charge paresseusement les images attachées à chaque article. Cette méthode parcourt le nombre d'images d'articles que nous avons et les charge paresseusement lorsqu'elles deviennent visibles. Enfin, nous avons des styles ciblés sur ce composant dans la section style.

La prochaine chose à faire sera de configurer notre boutique afin que nous puissions commencer à recevoir les dernières nouvelles. Ajoutez les lignes de code suivantes à votre fichier index.js :

 import Vue from "vue";
importer Vuex depuis "vuex";
importer axios depuis "../plugins/axios";
Vue.use (Vuex);
const store = new Vuex.Store ({
    Etat: {
        pays: [{
                name: "United States of America",
                value: "us",
            },
            {
                name: "Nigeria",
                value: "ng",
            },
            {
                name: "Argentina",
                value: "ar",
            },
            {
                name: "Canada",
                value: "ca",
            },
            {
                name: "South Africa",
                value: "za",
            },
        ],
        catégories: [
            "entertainment",
            "general",
            "health",
            "science",
            "business",
            "sports",
            "technology",
        ],
    },
    mutations: {},
    Actions: {
        async getTopNews (contexte, pays) {
            laissez res = attendre axios ({
                url: `/ top-headlines? country = $ {country}`,
                méthode: "GET",
            });
            return res;
        },
    },
});
exporter le magasin par défaut;

Nous ajoutons deux propriétés à notre magasin, l'une de ces propriétés est pays . Cette propriété contient un tableau d'objets de pays. Nous avons également la propriété categories ; cela contient un tableau de catégories disponibles sur l'API News. Le lecteur appréciera la liberté de voir les principales nouvelles de pays et de catégories spécifiques; cela sera également nécessaire dans plus d'une partie de l'application et c'est pourquoi nous utilisons la boutique. Dans la section actions de notre boutique, nous avons une méthode getTopNews qui récupère les principales nouvelles d'un pays (ce pays a été passé du composant qui a appelé cette action).

À ce stade, si nous ouvrons notre application, nous devrions voir notre page de destination qui ressemble à ceci:

Page de destination mise à jour. ( Grand aperçu )

Le fichier background.js

Ce fichier est le point d'entrée d'Electron dans votre application. Il contrôle tous les paramètres de type application de bureau pour cette application. L'état par défaut de ce fichier peut être trouvé sur mon GitHub .

Dans ce fichier, nous avons des configurations prédéfinies pour l'application telles que la hauteur par défaut et width pour votre application. Jetons un coup d'œil à certaines des choses que vous pouvez faire dans ce fichier.

Activation des outils de développement Vuejs

Par défaut, vous avez accès aux outils de développement dans Electron mais ils ne sont pas activés après l'installation. Ceci est dû à un bogue existant sur Windows 10, donc si vous ouvrez votre fichier background.js vous trouverez du code commenté avec des commentaires expliquant pourquoi ils sont commentés:

 // Installer Vue Devtools
// Les extensions Devtools sont cassées dans Electron 6.0.0 et supérieur
// Voir https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 pour plus d'informations
// Electron ne se lancera pas avec les extensions Devtools installées sur Windows 10 en mode sombre
// Si vous n'utilisez pas le mode sombre de Windows 10, vous pouvez décommenter ces lignes
// De plus, si le problème lié est clos, vous pouvez mettre à niveau électron et décommenter ces lignes
// essayez {
// attend installVueDevtools ()
//} catch (e) {
// console.error ('Échec de l'installation de Vue Devtools:', e.toString ())
//}

Donc, si vous n'êtes pas affecté par ce bogue, vous pouvez décommenter le bloc try / catch et rechercher également installVueDevtools dans ce même fichier (ligne 5) et aussi décommenter. Une fois cela fait, votre application redémarrera automatiquement, et lorsque vous vérifierez vos outils de développement, vous devriez voir le Vuejs Devtools .

Sélection d'une icône personnalisée pour votre application

Par défaut, l'icône Electron est définie comme icône par défaut pour votre application, et la plupart du temps, vous souhaitez probablement définissez votre propre icône personnalisée. Pour ce faire, déplacez votre icône dans votre dossier public et renommez-la en icon.png . La prochaine chose à faire serait d'ajouter la dépendance requise, electron-icon-builder .

Vous pouvez l'installer en utilisant l'une des commandes suivantes:

 // With Yarn:
yarn add --dev electron-icon-builder
// ou avec NPM:
npm install --save-dev electron-icon-builder

Une fois cela fait, vous pouvez exécuter la commande suivante. Il convertira votre icône au format Electron et imprimera ce qui suit dans votre console lorsque cela sera fait.

Informations générées dans le terminal. ( Grand aperçu )

La prochaine chose serait de définir l'option icône dans le fichier background.js . Cette option entre dans l'option BrowserWindow qui est importée de Electron . Pour ce faire, mettez à jour BrowserWindow pour qu'il ressemble à ceci:

 // Ajoutez ceci en haut de votre fichier
/ * global __statique * /
// chemin d'importation
importer le chemin depuis 'chemin'

// Remplacer
win = new BrowserWindow ({largeur: 800, hauteur: 600})
// Avec
win = new BrowserWindow ({
  largeur: 800,
  hauteur: 600,
  icon: path.join (__ static, 'icon.png')
})

Maintenant, si nous exécutons yarn run electron: build et visualisons notre application, nous devrions voir l'icône mise à jour utilisée comme icône d'application, mais elle ne change pas au cours du développement. Ce problème permet de résoudre manuellement le problème sur macOS.

Définition du titre de votre application

Vous remarquerez que le titre de votre application est défini sur le nom de l'application (news-app dans ce cas ) et nous devrons le changer. Pour ce faire, nous devons ajouter une propriété title à la méthode BrowserWindow dans notre fichier background.js comme ceci:

 win = new BrowserWindow ( {
        largeur: 600,
        hauteur: 500,
        titre: "News App",
        icon: path.join (__ static, "icon.png"),
        webPreferences: {
            // Utilisez pluginOptions.nodeIntegration, laissez cela seul
            // Voir nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration pour plus d'informations
            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
        },
    });

Ici, nous définissons le titre de notre application sur "News App". Mais si votre fichier index.html a un titre sélectionné ou que votre titre ne change pas, essayez d'ajouter ce code à votre fichier:

 win.on ("page-title-updated", (event) => event.preventDefault ());

Nous sommes à l'écoute d'un événement qui se déclenche lorsque notre titre est mis à jour à partir de BrowserWindow . Lorsque cet événement est déclenché, nous demandons à Electron de ne pas mettre à jour le titre avec celui qui se trouve dans le fichier index.html .

Une autre chose qui pourrait valoir la peine d'être modifiée est le productName cela contrôle le nom qui apparaît lorsque vous passez la souris sur l'icône de votre application ou ce que votre ordinateur reconnaît comme l'application. À l'heure actuelle, le nom de notre application est Electron . Pour changer ce nom en production, créez un fichier vue.config.js et ajoutez-y les lignes de code suivantes:

 module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                productName: "News App",
            },
        },
    },
};

Ici, nous définissons productName comme "News App" de sorte que lorsque nous exécutons la commande de construction pour notre application, le nom passe de "Electron" à "News App".

Construction multi-plateforme

Par défaut, lorsque vous exécutez la commande de génération, l'application créée dépend de la plate-forme sur laquelle elle est exécutée. Cela signifie que si vous exécutez la commande build sous Linux, l'application créée sera une application de bureau Linux. La même chose s'applique également à d'autres plates-formes (macOS et Windows). Mais Electron est livré avec l'option de spécifier une plate-forme (ou deux plates-formes) que vous souhaitez générer. Les options disponibles sont:

mac
win
linux

Ainsi, pour créer la version Windows de votre application, exécutez la commande suivante:

 // NPM
électron npm: construire - --win nsis
// FIL
yarn electron: build --win nsis

Conclusion

L'application complète peut être trouvée sur mon GitHub . La documentation officielle d'Electron fournit des informations et un guide qui vous aide à personnaliser votre application de bureau comme vous le souhaitez. Certaines des choses que j'ai essayées mais qui ne sont pas incluses dans ce didacticiel sont:

Personnalisation de votre dock sur macOS – https://www.electronjs.org/docs/tutorial/macos-dock .
Paramètre redimensionnable, maximisable et bien d'autres – https://github.com/electron/electron/blob/master/docs/api/browser-window.md#new-browserwindowoptions .
.

] Donc, si vous cherchez à faire beaucoup plus avec votre application Electron, leur documentation officielle est un bon point de départ.

(ks, ra, yk, il)

Source link