Catégories
Plugin et site web

Créer des applications de bureau avec Electron et Vue – Smashing Magazine

A propos de l'auteur

Développeur front-end basé à Lagos, au Nigeria. Il aime convertir les conceptions en code et créer des éléments pour le Web.
Plus à propos
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 lors de la création d'une application de bureau avec Vue.js à l'aide du plug-in Vue CLI Electron Builder.

JavaScript était autrefois connu comme le langage de création de sites Web et d'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 s'exécuter en dehors du navigateur avec le 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 des 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 didacticiel, nous allons apprendre à créer des applications de bureau à l'aide d'Electron, nous allons également apprendre à utiliser Vuejs pour créer des applications Electron.

Remarque: Une connaissance de base de Vue.js et de la CLI Vue est requise pour suivre ce tutoriel. Tout le code utilisé dans ce didacticiel se trouve sur mon GitHub. N'hésitez pas à 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 effectuent 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:

  1. Java
    Java est un langage de programmation généraliste basé sur les classes, orienté objet et conçu pour avoir le moins de dépendances d'implémentation possible. Il est destiné à permettre aux développeurs d'applications écrivez une fois, exécutez partout (WORA), ce qui signifie que le code Java compilé peut s'exécuter sur toutes les plates-formes prenant en charge Java sans nécessiter de recompilation.
  2. 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.
  3. C #
    C # est un langage de programmation multi-paradigme polyvalent englobant des disciplines de programmation à typage fort, à portée lexicale, impérative, déclarative, fonctionnelle, générique, orientée objet et orientée composants.
  4. .NET
    .NET est une plate-forme de développement open source multiplateforme gratuite permettant de créer 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'IoT.

Qu'est-ce que l'électron?

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. Les exemples d'applications créées avec Electron incluent le populaire éditeur Atom, Visual Studio Code, WordPress pour le bureau et Slack.

Installation

Vous pouvez installer Electron dans votre projet en utilisant NPM:

npm install electron --save-dev

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

npm install electron -g

Création d'applications Vuejs pour ordinateur de 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 à l'aide de Vuejs. Tout ce dont vous avez besoin pour cela est le plug-in Electron Builder Vue CLI.

Le générateur d'électrons du plugin Vue CLI

Cet outil vous permet de créer des applications Vue pour le bureau avec Electron, cela signifie qu'il fait fonctionner votre application Vue 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 News à l'aide de 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 d'ici.

Nous allons créer une application simple qui offre les éléments suivants:

  1. Une page qui affiche les principaux titres et les plus récents d'un pays sélectionné avec la possibilité de choisir un pays à l'aide de leur /top-headlines point final. L'API News fournit des actualités à partir d'une liste de pays pris en charge, trouvez la liste ici.
  2. Actualités d'une catégorie sélectionnée en utilisant une combinaison de leurs /everything point de terminaison et un paramètre de requête q avec laquelle nous spécifierons notre catégorie.

Après avoir obtenu votre clé API, nous pouvons créer notre application à l'aide de la CLI Vue. 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
# OR
yarn global add @vue/cli

Une fois que cela est fait, créez votre application News à l'aide de 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 install axios
// YARN
yarn add axios

L'étape suivante serait de configurer une instance Axios pour la configuration globale dans notre application. Nous allons créer un plugins dossier dans le src dossier dans lequel nous allons créer ceci axios.js fichier. Après avoir créé le fichier, ajoutez les lignes de code suivantes:

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

Ici, nous définissons notre baseURL et apiKey que nous avons obtenu de l'API News et l'avons transmis à une nouvelle instance d'Axios. Cette instance accepte le baseURL et apiKey avec un timeout propriété. L'API News vous oblige à ajouter votre clé API lorsque vous faites une demande à son API et propose 3 façons de la joindre à votre demande, mais ici, nous l'ajoutons à l'en-tête X-Api-Key propriété après laquelle nous exportons instance. Une fois que cela est 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 c'est 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 à l'aide de cette commande:

Using Yarn(strongly recommended)
yarn electron:serve
OR NPM
npm run electron:serve

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

état d'ouverture par défaut de votre application électronique
État d'ouverture automatique de votre application électronique. (Grand aperçu)

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

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

Ce plugin électronique 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 comprendra trois parties:

  1. Une page de destination qui présente les principales actualités d'un pays choisi au hasard.
  2. Une page pour afficher les principales actualités du pays choisi par l'utilisateur.
  3. Une page qui affiche les principales actualités d'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 Composants dossier 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 mon 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 du style pour l'ensemble de l'application dans la section style.

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

page de destination vide
Page de destination vide. (Grand aperçu)

La prochaine étape serait d'ajouter du contenu à notre Accueil.vue fichier. Cette page hébergerait la première section de notre application; Top actualités d'un pays sélectionné au hasard. Mettez à jour votre Accueil.vue fichier 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 NewsCard composant (nous le créerons ensuite) qui rendrait tous les titres d'actualité sur cette page. Nous utilisons ensuite le fetchTopNews méthode pour récupérer les dernières nouvelles d'un pays sélectionné au hasard dans le tableau de countries dans notre magasin. Ce pays est passé à notre getTopNews action, cela serait ajouté à la baseURL comme une 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 transmettons au article accessoire de notre Newscard composant dans la section modèle. Nous avons également un paragraphe qui indique de quel pays proviennent les principales nouvelles.

La prochaine chose serait de mettre en place notre NewsCard composant qui affichera cette actualité. Créez un nouveau fichier dans votre Composants dossier, nommez-le NewsCard.vueet ajoutez-y les lignes de code suivantes:



Ici, nous affichons les données transmises à ce composant à l'aide du article accessoire d'objet. 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 mettre en place notre boutique afin que nous puissions commencer à recevoir les dernières nouvelles. Ajoutez les lignes de code suivantes à votre index.js fichier:

import Vue from "vue";
import Vuex from "vuex";
import axios from "../plugins/axios";
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        countries: ({
                name: "United States of America",
                value: "us",
            },
            {
                name: "Nigeria",
                value: "ng",
            },
            {
                name: "Argentina",
                value: "ar",
            },
            {
                name: "Canada",
                value: "ca",
            },
            {
                name: "South Africa",
                value: "za",
            },
        ),
        categories: (
            "entertainment",
            "general",
            "health",
            "science",
            "business",
            "sports",
            "technology",
        ),
    },
    mutations: {},
    actions: {
        async getTopNews(context, country) {
            let res = await axios({
                url: `/top-headlines?country=${country}`,
                method: "GET",
            });
            return res;
        },
    },
});
export default store;

Nous ajoutons deux propriétés à notre magasin, l'une de ces propriétés est countries. Cette propriété contient un tableau d'objets de pays. Nous avons également le categories propriété; 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 un getTopNews méthode qui récupère les meilleures nouvelles d'un pays (ce pays a été transmis par le 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
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 valeur par défaut height et width pour votre application. Jetons un coup d'œil à certaines des actions que vous pouvez effectuer 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 cela n'est pas activé après l'installation. Ceci est dû à un bogue existant sur Windows 10, donc si vous vous ouvrez background.js fichier, vous trouverez du code commenté avec des commentaires expliquant pourquoi ils sont commentés:

// Install Vue Devtools
// Devtools extensions are broken in Electron 6.0.0 and greater
// See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
// Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
// If you are not using Windows 10 dark mode, you may uncomment these lines
// In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
// try {
//   await installVueDevtools()
// } catch (e) {
//   console.error('Vue Devtools failed to install:', e.toString())
// }

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

Vuejs dans devtools
Vuejs dans devtools. (Grand aperçu)
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éfinir votre propre icône personnalisée. Pour ce faire, déplacez votre icône dans votre Publique dossier, et renommez-le en icon.png. La prochaine chose à faire serait d'ajouter la dépendance requise, electron-icon-builder.

Vous pouvez l'installer à l'aide de l'une des commandes suivantes:

// With Yarn:
yarn add --dev electron-icon-builder
// or with NPM:
npm install --save-dev electron-icon-builder

Une fois que cela est fait, vous pouvez exécuter cette 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
Informations générées dans le terminal. (Grand aperçu)

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

// Add this to the top of your file
/* global __static */
// import path
import path from 'path'

// Replace
win = new BrowserWindow({ width: 800, height: 600 })
// With
win = new BrowserWindow({
  width: 800,
  height: 600,
  icon: path.join(__static, 'icon.png')
})

Maintenant si nous courons yarn run electron:build et consultez 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 modifier. Pour ce faire, nous devons ajouter un title propriété à la BrowserWindow méthode dans notre background.js fichier comme celui-ci:

win = new BrowserWindow({
        width: 600,
        height: 500,
        title: "News App",
        icon: path.join(__static, "icon.png"),
        webPreferences: {
            // Use pluginOptions.nodeIntegration, leave this alone
            // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
        },
    });

Ici, nous définissons le titre de notre application sur «News App». Mais si votre index.html le fichier a un titre sélectionné ou 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 title 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 trouvé dans index.html fichier.

Une autre chose qui pourrait valoir la peine de changer 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 vue.config.js et ajoutez-y les lignes de code suivantes:

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

Ici, nous définissons productName pour être "News App" de sorte que lorsque nous exécutons la commande build 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 qui est 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:

  1. mac
  2. win
  3. linux

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

// NPM
npm electron:build -- --win nsis
// YARN
yarn electron:build --win nsis

Conclusion

L'application terminée 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:

  1. Personnalisation de votre dock sur macOS – https://www.electronjs.org/docs/tutorial/macos-dock.
  2. 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, leurs documents officiels sont un bon point de départ.

  1. Node.jshttps: //en.wikipedia.org/wiki/Node.js
  2. Java (langage de programmation) https://en.wikipedia.org/wiki/Java_ (programmation_language)
  3. Electron (framework logiciel)
  4. JavaFX 14
  5. electronjs
  6. Documentation électronique
  7. Vue CLI Plugin Electron Builder
  8. Chargement paresseux d'images pour des performances à l'aide d'Intersection Observer par Chris Nwamba
  9. axios
  10. Premiers pas avec Axios dans Nuxthttps: //www.smashingmagazine.com/2020/05/getting-started-axios-nuxt/) par Timi Omoyeni
Éditorial fracassant(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *