Lorsque j’ai voulu me lancer dans la data visualisation intégrée à un site web, j’ai directement voulu utiliser la librairie la plus célèbre en la matière, à savoir D3.js. Mais j’ai trouvé une alternative qui m’a interpellé car basé à la fois sur D3.js ainsi que Stack.gl, permettant de réaliser des graphiques plus interactifs, à première vue.
Celle-ci est disponible à la fois en Python, R, et enfin Javascript, celle qui nous intéresse dans notre article. Et c’est pour cette raison que je l’écris, car celui-ci n’est pas vraiment disponible en Typescript et bien intégré à l’écosystème d’Angular, qui a des notions de modules, de composants, etc.
Comparatif de popularité entre nos deux librairies
On utilisera des données du Covid19 pour alimenter en data nos graphiques. C’est parti !
Quelques infos sur Plotly.js
Pour créer un graphique, on va avoir besoin de trois choses principalement qui se découpe de la façon suivante :
Data
Un objet data qui va contenir l’ensemble des points (ordonnées Y, et abscisse X) que l’on souhaite afficher sur notre graphique.
On le défini dans notre composant en Typescript.
Layout
Un objet layout qui définit les caractéristiques générales au niveau de l’UI de notre graphique, comme le titre, la taille de notre graphique, etc. Si l’on souhaite modifier l’allure d’une courbe en particulier, cela se fera dans l’objet data cependant.
On le défini dans notre composant en Typescript.
Config
C’est l’objet final crée, qui englobe notre objet Data ainsi que notre objet Layout.
On le défini dans notre composant en Typescript, et on ira le binder avec notre fichier de vue en HTML.
Intégration de Plotly.js
Je commence par initialiser un nouveau projet Angular pour illustrer notre exemple. Je vous renvoie sur un précédent article, expliquant comment initialiser une application Angular.
On installe via npm les modules nécessaires :
npm install angular-plotly.js plotly.js
On ajoute le module Plotly à notre module globall App :
Dans votre fichier de configuration tsconfig.json, passez ‘target’ en ‘es5’, si vous avez une erreur dans votre console comme quoi Plotly n’est pas défini dans votre document.
Création d’un graphique avec une courbe
Partie vue
On ajout un composant ‘plotly-plot’. Celui-ci est composé de plusieurs directives et attributs :
fxFlex & Style : directive FlexLayout de Angular, permettant à notre composant de prendre toute la hauteur et largeur du parent disponible
useResizeHandler : directive permettant de resize automatiquement le graphique selon la taille de la fenêtre
data: object contenant l’ensemble des données du graphique
config: object contenant la configuration général de notre graphique
layout: object contenant la configuration graphique de notre graphique
Partie composant
On déclare nos attributs généraux :
J’initialise mes précédents attributs dans le constructeur du composant :
Par la suite, je vais charger mon fichier de données. J’utilise un fichier CSV qui va être lu en local via le httpClient :
Enfin, ma fonction permettant de parser mon fichier CSV de string :
Le plus important sont les lignes suivantes :
4-5 : création de tableau temporaire, contenant nos données
14-15: on remplit nos tableau déclarés précédemment des données du fichier CSV en cours de parsage
23-24: ajout de nos nouvelles données
Voici le résultat de ce que l’on obtient selon le type de graphique que l’on choisit dans notre objet de data :
Vous avez une multitude de type de graphique selon ce que vous voulez donner comme aspect à vos données, je vous laisse lire la doc pour en savoir plus.
Création d’un graphique avec une multitude de courbe
On va reprendre l’exemple précédent, et y ajouter une nouvelle courbe concernant les cas soignés. Je vais enlever quelques données en début de pandémie, étant donné que l’on a eu des cas à partir du 1er Mars à peu près. Cela permettra une meilleure visibilité pour mon tutoriel.
On commence par ajouter une nouvelle courbe en ajoutant une donnée dans notre tableau de données. On fait cela comme précédemment, dans le constructeur du composant :
Vous pouvez apercevoir quelques changements comparé à la première partie de ce tutoriel :
marker : permet d’affecter une couleur à notre courbe
name : nom de la courbe dans la légende
legendgroup : permet de grouper plusieurs courbes dans un même groupe, et de pouvoir les cacher en cliquant dessus dans la légende pour toute les faire disparaître
La dernière étape va être de modifier notre fonction de parsing de notre fichier CSV qui contient nos données, afin de récupérer des informations pour une seconde courbes, qui sera elle concernant les cas soignés :
Lignes 4 : L’axe X des abscisses ne change pas, puisque on veut garder nos dates.
Lignes 6 et 18 : On va créer un nouveau tableau contenant des nombres, et le remplir de la même façon que précédemment, mais avec un indice différent et donc une donnée différente.
Lignes 29-30 : correspond à notre second objet de données créer précédemment. On fait attention de lui affecter en abscisses nos données DATE, et en ordonnés notre tableau contenant le nombre de cas soignés.
Voici le résultat de ce que l’on obtient selon le type de graphique que l’on choisit dans notre objet de data :
Quelques exemples de customisation de l’UI
Je vous présente quelques attributs plutôt chouettes pour changer rapidement le sous type de nos graphiques que je vous ai présenté précédemment, à savoir Scatter et Bar
Vous avez moyen de vraiment poussé beaucoup de chose dans l’UI du graphique, regardez la documentation si vous voulez des envies bien précises.
Sous-type de BAR
L’attribut ‘barmod’ se définit dans l’objet LAYOUT de notre graphique ( attribut ‘layout’ dans nos exemples précédents )
Espacement de BAR
Vous pouvez gérer l’espacement entre les bars pour optimiser la lisibilité de votre graphique. Vous avez deux arguments pour cela :
bargap : espacement entre les bars d’un même groupe
bargroupgap : espacement entre les bars de groupes différents
Ces deux arguments se définissent dans l’objet LAYOUT.
Sous-type de SCATTER
L’attribut ‘mode’ se définit dans l’objet DATA de notre graphique ( attribut ‘allData’ dans nos exemples précédents )
Conclusion
Vous avez donc accès pleinement à la librairie Plotly.js dans votre application Angular.
Rien de bien complexe sur son intégration donc, juste un zeste déroutant d’utiliser du Javascript dans du Typescript, on mélange du typage fort avec des objets que l’on remplit d’attributs à la volé.
Vous pouvez ajouter des events de clic, de listener, pour rendre tout cela un peu plus dynamique comme par exemple divers chargements de données pour combiner plusieurs sources, modifier en temps réel l’allure et l’UI des graphiques, etc.
Je vous propose aujourd’hui de réaliser une carte choroplèthe. C’est une carte de chaleur mettant en évidences certaines zones de différents gradients de couleurs pour montrer une intensité plus ou moins forte sur un type de donnée.
C’est d’actualité, je vous propose une carte de la France, découpé en Région, mettant en évidence l’évolution du COVID-19 sur une date donnée.
Leaflet, Openlayers pour ne citer que les plus grands, sont des librairies javascript permettant d’afficher des cartes, et d’y ajouter une multitude d’actions. Vous pouvez ajouter des dessins, des actions, des couleurs, zones, marqueurs, etc. Le but principal est de les rendre interactives pour mettre en évidences toute sorte de chose.
OpenLayers : considéré comme la référence actuellement, c’est un vrai framework à part entière. Permet donc de réaliser des choses très poussées.
Leaflet : certainement le plus populaire. Certaines fonctionnalités ne pourront pas être aussi poussé que Openlayers, car plus léger. Il marque cependant des points quant à sa prise en main, qui s’en fera plus rapidement.
Intégration de Leaflet
Intégration & affichage du fond de carte
Installation de la librairie
On installe Leaflet et son module NPM facilitant son utilisation via :
On installe les définitions de types pour se faciliter la vie pour coder : npm install --save-dev @types/leaflet
Import de la librairie
On intègre le module Leaflet dans la partie ‘Imports’ de notre fichier de définition de notre module principal :
Ajout du fond de carte
On commence par la mise en place de notre carte dans la vue. Pour cela on créer une division avec un composant leaflet :
Pour la partie back, on va définir un objet contenant les caractéristiques de notre carte qui sera bindé avec la vue :
Rien de bien complexe. On ajoute un layer à nos options qui est le fond de notre carte, en le faisant pointer au service de cartographie de Openstreetmap. On lui définit un niveau de zoom maximum utilisable par l’utilisateur, ainsi qu’un bandeau de droit d’auteur qui s’affichera en bas à droite de la carte.
On ajoute en plus des options d’initialisation que l’on retrouvera par défaut lorsque on arrive sur la page de la carte, à savoir le niveau de zoom actuelle de la carte ainsi que le point (latitude, longitude) à afficher au centre de notre écran.
Style de la carte
Si vous avez suivi les instructions, vous devriez vous retrouver avec une carte bien cassé, et c’est normal 😂
On va y remédier en ajoutant un fichier CSS de style, permettant un affichage correct de notre carte. Cet ajout de ce fichier de style se réalise dans notre fichier de configuration de notre application, à savoir angular.json :
Ajout de données GeoJSON
Type des données
Le GeoJSON est un format de donnée géospatial, suivant le format JSON. Pour faire simple, cela consiste à réunir une multitude de points GPS (latitude et longitude) afin de créer des marqueurs sur la carte. Selon le type des données, vous pouvez ainsi dessiner des traits, rectangle et toute sorte de polygone sur la carte via ces points. On va alors exploiter ces possibilités afin de découper notre France en région.
Il existe déjà une multitude de dataset GeoJSON avec toute sorte de découpage, que ça soit en fonction d’état, de départements, etc. Plus vous aurez de points au sein de votre fichier, et plus vos tracés seront précis. Cependant votre fichier sera alors plus lourd, alourdissant notre page et donc les temps de chargement.
Voici la structure de mon fichier des Régions de France :
Nous avons 18 objets, représentant nos 18 régions.
Chaque région comporte les éléments suivants :
properties : contient des données, comme le nom de la région. C’est ici que nous ajouterons le nombre de cas actifs de patient du Covid19.
geometry : contient les couples Latitude/Longitude de points permettant les tracés de chaque région.
Je vais ajouter mes données à la main dans mon objet properties, en ajoutant un nouvel attribut :
« confirmed »: « 10 »
Je le fais à la main car peu de donnée, et surtout choisit aléatoirement. Le but n’est pas de montrer les vraies stats mais de vous montrer comment afficher ces données. Je vous laisse le soin d’ajouter des vraies données avec des scripts Python pour manipuler ces objets ci 😎
Affichage des données
On va ajouter une nouvelle ‘couche’ contenant nos données des régions sur notre carte. Pour cela on ajout dans notre vue dans notre composant leaflet, l’attribut leafletLayers que l’on va bind avec notre contrôleur :
On initialise ce nouvel attribut dans notre composant :
On ajoute ensuite nos données de nos régions :
J’initialise nos données dans un hook Angular, ngOnInit, pour être sûr que la carte Leaflet soit bien déjà initialisée. J’utilise ensuite le module HttpClient pour lire note fichier de donnée en local, disposé dans mon dossier des Assets. Je vais ensuite les ajouter dans mon attribut layers, via la méthode geoJSON de Leaflet qui permet de lire des données GeoJSON. J’initialise mes régions avec une couleur bleu en fond, une certaine opacité et épaisseur de bordure, qui sert à délimiter les régions entre elle.
Et voilà notre layer des régions superposé au fond de base de Openstreetmap
Changer l’UI d’une région à son survol
On va améliorer l’interface de notre carte, en mettant en évidence la région survolée.
Je vais définir deux objets définissant les états graphiques que peuvent prendre nos régions. Soit elle est normale, soit elle est en cours de survolage par la souris de l’utilisateur. On fait deux style différents afin de remonter l’information à l’utilisateur pour lui montrer sur quoi il pointe :
On va aller modifier la fonction qui ajoute notre layers de données de nos régions afin de lui affecter un style définit précédemment :
On en profite pour leur ajouter des listeners. Vous pouvez voir que sur mon layer des régions, j’ajoute deux listener :
mouseover : quand l’utilisateur passe la souris sur une région
mouseout : quand l’utilisateur enlève la souris d’une région
click : quand un utilisateur clique sur une région, mais je ne l’utiliserais pas pour ce tutoriel ci
On affecte à nos deux listener deux fonctions qui seront appelé à chaque fois qu’un event sera exécuté.
L’event pour mettre en surbrillance une région :
L’event pour rétablir les styles par défaut :
Notez la syntaxe qui diffère entre les deux, mais réalise la même action. a vous de choisir celle que vous préférez.
Coloriser la région en fonction des data
On va pouvoir passer au cœur du projet, à savoir créer nos gradients de couleurs sur nos différentes régions. On va créer une nouvelle méthode qui va être appeler lors de la lecture de notre fichier de donnée GeoJSON, juste après que l’on ait mis nos listener sur l’ensemble de nos régions :
On reviendra un peu plus tard sur l’action qu’effectue l’appel à la méthode updateLegendValues().
On ajoute deux nouveaux attributs à notre classe :
Le premier correspond à un tableau rempli de nombre. Il va nous définir plus tard les intervalles de valeurs, permettant des comparaisons afin de décider si telle région appartient à tel ou tel intervalle selon sa valeur de cas confirmés. Quant au second, il va contenir des string de code hexadécimal de couleur, il en aura autant que d’intervalle défini dans le tableau précédent.
On va les initialiser dans notre constructeur de notre classe :
J’ai crée le gradient de couleur à la main, vous avez des sites sur le net pour vous aider à les faire selon vos couleurs. Je suis parti dans mon exemple autour d’un gradient de rouge.
Pour la suite, on va simplement re-parser notre layer contenant l’ensemble de nos régions, et changer leur style. En parcourant nos régions, on va récupérer notre attribut confirmed représentant le nombre de cas confirmé au Covid19. On souhaite en fonction de leur valeur affecter une couleur différente. On va donc pour l’attribut fillColor, lui passer une fonction qui prendre en entrée l’attribut ‘confirmed‘ :
Cette fonction renvoi en fonction de son entrée, un code hexadécimal de couleur. Je pense que la fonction peut être optimisé. En effet je fais à la main les comparaisons entre 6 intervalles de valeurs, correspondant chacune d’entre elle à 6 couleurs d’intensités différentes.
Il nous manque juste une seule chose, vous vous souvenez de ma fonction updateLegendValues() ? Que j’ai parlé un poil plus haut, et qui est appelé au début de ma fonction updateStyleMap(). Celle-ci va nous permettre de remplir notre tableau des intervalles, que l’on utilise dans la fonction getColor() pour assigner une couleur du tableau selectedLegendColorGradient en comparant aux intervalles de selectedLegendInfos.
On va encore une fois parser notre layer des régions, pour y récupérer la valeur max de l’attribut confirmed. Celle fonction aussi peut être grandement optimisé mais j’ai opté pour la simplicité pour ce tutoriel. Une fois la valeur max récupéré, je vais créer autant d’intervalle que je souhaite pour faire autant de gradient que je souhaite. Je suis partie sur 6 gradients de Rouge différent. Je créer ces intervalles en fonction de ma valeur maximale de cas crée auparavant, de façon linéaire. A vous de choisir quel algorithme vous souhaitez pour créer vos gradients, si vous voulez des intervalles avec autant d’écarts entre eux comme j’ai souhaité le faire ou en fonction d’autre chose. C’est selon vos souhaits selon comment vous souhaitez mettre en valeur vos données une fois sur la carte.
Carte avec lecture de data et colorisation via le GeoJSON
Affichage d’une légende
On vient de coloriser notre carte, mais on ne sait guerre comment elles sont exposées avec des chiffres précis. C’est pour cela que je vous proposer d’ajouter une légende pour préciser à quoi correspond chacun de nos gradients de couleur.
Je commence par ajouter une nouvelle division dans notre vue pour cette légende :
J’y ajoute un titre.
J’y ajoute une première boucle pour itérer sur l’ensemble de nos gradients de couleur, que j’inclus sous forme de petits carrés.
J’y ajout une seconde boucle pour itérer sur l’ensemble de nos intervalles de valeurs.
Vous pouvez voir que j’ai des appels de type fx dans mes balises. C’est du à l’utilisation d’une bibliothèque disponible dans Angular, FlexLayout, permettant de manier les flexbox directement dans le fichier HTML plutôt que de style CSS, je trouve cela un poil plus clair, mais ce n’est que mon opinion. Vous pouvez l’installer via npm (npm i -s @angular/flex-layout @angular/cdk).
Pour finaliser ma légende, et avoir cet effet de superposition de ma légende sur ma carte, on va parler d’index. Pour cela on va ajouter attribuer des classes à nos division dans notre fichier HTML :
Ajout d’une classe lastPlan pour notre carte
Ajout d’une première classe firstPlan et d’une seconde classe legend, pour notre légende
On y ajouter le SCSS suivant :
La classe firstPlan permet de mettre en premier plan notre légende
La classe lastPlan permet de mettre notre carte en second plan. Vous pouvez jouer avec les index de façon infini pour créer autant de plan que vous souhaitez utiliser plus de deux plans.
La classe squareLegend permet de définir la taille des carrés contenant nos couleurs.
La classe legend permet de définir le conteneur de l’ensemble de notre légende, de sa position sur l’écran ainsi que sa taille.
Ajout d’une légende en bas à droite de l’écran
Affichage de data via popup
Je vous propose d’ajouter sur notre carte un popup, qui s’affiche au survol d’une région en affichant le nombre de cas confirmé au Covid19 qu’elle a.
On commence par créer deux nouvelles variables qui seront affiché dans notre vue :
Comme les noms qu’elles portent, la première pour afficher le nom de la région et la seconde pour afficher le nombre de cas. On les initialise à null dans le constructeur de notre composant.
On modifie notre fonction lors de l’événement mouseover, afin qu’elle affecte la valeur de la région et du nombre de cas à nos deux variables précédentes :
On utilise la classe ChangeDetectorRef dans la dernière ligne de notre fonction, qui offre des possibilités pour forcer les mises à jour de l’interface. On n’oublie pas de l’instancier en privée dans le constructeur du composant :
On modifie la fonction concernant l’événement mouseout, afin qu’elle supprime nos deux valeurs lorsque l’on sort d’une région :
Nous venons de modifier la partie du contrôleur, passons à la vue. On va créer une nouvelle division contenant notre popup :
Celle-ci ne s’affiche que si regionName contient une valeur. Vous pouvez voir que l’on a attribuer la classe css firstPlan pour qu’elle s’affiche dessus notre carte Leafleat, ainsi que la classe legendTop, définit dans notre fichier de style scss :
L’article touche à sa fin, vous devriez avoir le résultat suivant 😎
Lecture des données d’une région via popup en haut à droite
Conclusion
Vous avez donc accès pleinement à la librairie Leaflet.js dans votre application Angular.
Rien de bien complexe sur son intégration donc, juste un zeste déroutant d’utiliser du Javascript dans du Typescript, on mélange du typage fort avec des objets que l’on remplit d’attributs à la volé.
Vous pouvez faire des choses bien plus pousser. Réaliser une multitude de layers, que vous pouvez contrôler leur affichage ou non, ajouter une multitude de données dans vos GeoJSON pour binder avec des éléments dans Angular, pour réaliser par exemple un suivi du Covid19 mais sur plusieurs jours pour réaliser quelque chose de plus dynamique. Ou encore dessiner tout une multitude de polygone complexes, rendre leur affichage dynamique au sein même de la carte pour faire bouger automatiquement des marqueurs par exemple.
C’est lassant, ça prend du temps, et c’est bien souvent idiot au premier abord. Je vous présente donc….. les TESTS ! 😒 On les évites bien trop souvent, mais il faut le dire moi le premier, que l’on a tous connus des projets auquel à force de rajouts de fonctionnalités, que certaines unes d’entres elles, ont sans le vouloir casser d’autres fonctionnalités. En effet, quand on est sur une branche et que l’on focus cette nouvelle feature, on test celle-ci exclusivement dans l’environnement de développement. Et il se peut que l’on casse d’autres chose à vouloir bouger, modifier et optimiser notre code. Et on s’en rend bien souvent compte trop tard lors d’éventuelle realease en production, ce qui peut engendrer d’importantes conséquences. Ou dans le meilleur des cas comme moi, passer pour un con lors de mes démos 😅
Objectif
Installer & adapter les environnements Jest et Spectron à Electron
Réaliser des tests end-2-end
Réaliser des tests unitaires
Spectron & Jest : pourquoi et comment
Lors de la création d’un projet Angular via CLI, vous aurez d’avantage de chance de connaître les noms de Karma, Jasmine, ou encore Protractor, qui sont proposé par défaut.
Pourquoi migrer de framework si ceux de base sont proposé par Angular ? 🤔
Et bien pour deux raisons :
Jest est vraisemblablement plus rapide que ses concurrents pour effectuer ses tests, car ils peuvent s’exécuter en parallèle. Vous gagnez donc au change, au fil du temps que votre application se développe.
La seconde est que même si on créer à première vu un site web, il a néanmoins pour but d’être utilisé sous forme d’application bureautique via Electron. Les framework de test cité plus haut sont formidable pour tester des sites web. Cependant, comme on fait appel à des fonctions de l’API de Electron, on ne peut ouvrir notre application Electron convenablement sur notre navigateur favori. Ceux-ci ne vont donc être utile que vous du test unitaire, mais on peut dors et déjà oublier les tests e2e. C’est pour cela que Spectron est idéal, puisque développé pour tester des applications conçu sous Electron.
Donne la couverture de code couvert par les tests
Pas besoin d’un navigateur web pour exécuter les tests, tout se fait depuis la console
Réalisation de ‘snapshot’, afin d’assurer que l’on ait pas de régression d’un point de vue UI
Jest
C’est le moteur de test développé par Facebook. Pratique, car tourne sur Angular, React, Vue.
Spectron
Spectron wrapper de WebDriverIO et Selenium
C’est un wrapper qui embarque à la fois Selenium, et WebDriverIO.
Selenium est un framework de test, qui permet de réaliser des opérations sur le navigateur web.
WebDriverIO quant à lui, est un autre framework de test qui reprend l’API de Selenium de façon customisé, écrit en javascript et exploitable par NodeJS. Il va ainsi ajouter des fonctionnalités de binding. On va pouvoir réaliser des opérations de click de souris sur des éléments, récupérer des champs de valeur, naviguer dans notre application, etc. Concrètement, on va pouvoir reproduire une utilisation du logiciel par un vrai utilisateur, mais en ligne de code.
Spectron, enfin, va ajouter des fonctionnalités pour avoir accès à l’ensemble de l’API de Electron
Optionnel : bibliothèque d’assertions
Lorsque on effectue des tests, on compare un état souhaité, avec l’état réellement obtenue lors de l’utilisation de l’application. J’utilise la librairie de base de NodeJS, à savoir assert. Simple et facile d’utilisation. Mais il est vrai que certains préférerons d’utiliser des styles d’écriture BDD ou TDD. Chai est une librairie que je recommande, qui permet de faire cela, tout en poussant les fonctionnalités de comparaison pour avoir des tests encore plus poussé.
Exemple de style que vous pouvez rencontrez, pour faire une comparaison de base :
Should : foo.should.equal(‘bar’);
Expect : expect(foo).to.equal(‘bar’);
Assert : assert.equal(foo, ‘bar’);
Spectron & Jest : utilisation
Installation
On commence par installer les modules nécessaire, en dépendance de développement via le gestionnaire de packets NPM :
Jest : npm install –save-dev jest
Auto complétion Jest : npm install –save-dev @types/jest
Spectron : npm install –save-dev spectron
/!\ Attention /!\
Veillez à bien respecter les versions entre Electron et Spectron, ou vous risquez d’avoir des soucis de compatibilité :
Electron Version
Spectron Version
~1.0.0
~3.0.0
~1.1.0
~3.1.0
~1.2.0
~3.2.0
~1.3.0
~3.3.0
~1.4.0
~3.4.0
~1.5.0
~3.5.0
~1.6.0
~3.6.0
~1.7.0
~3.7.0
~1.8.0
~3.8.0
^2.0.0
^4.0.0
^3.0.0
^5.0.0
^4.0.0
^6.0.0
^5.0.0
^7.0.0
^6.0.0
^8.0.0
^7.0.0
^9.0.0
^8.0.0
^10.0.0
Configuration
On va créer un fichier de configuration pour jest, jest.config.json, à la racine de notre projet :
testMatch : définit une regexp pour matcher le nom des fichiers de tests. Ici, on garde les fichiers dans le dossier /e2e/, et qui contient le mot .e2e. ou .unit. et qui est un fichier TS ou JS
Ensuite, on va ajouter un nouveau script pour automatiser le lancement de nos tests, dans notre fichier package.json :
config : pour renseigner la configuration crée précédent
runInBand : lancer les tests de façon séquentiel
detectOpenHandles : autorise Jest à fermer une session d’un test automatiquement si celui-ci ne se termine pas correctement, afin de continuer les tests
Squelette de base d’un test
Voici le template de base pour réaliser un test :
describe : c’est le mot clé pour définir un groupe de test
beforeEach : permet de retourner une application lancé a chaque début de test
afterEach : permet de fermer notre application une fois un test exécuté
it : mot clé pour définir un test
Vous pouvez observer la mise en place d’un timeout par Jest, mais aussi dans la définition de notre application. Cela permet de laisser un peu de temps à notre application pour s’ouvrir, avant de pouvoir l’utiliser.
L’ensemble des interactions possible via WebDriverIO sont disponible sur leur page de leur API.
Le code est exécuté de façon asynchrone. Vous allez donc devoir les rédiger soit en utilisant async/await, ou en utilisant des promesses. Chacun ses préférences, même si je trouve le code avec des async/await bien plus lisible et compréhensible.
Exemple de test
Je vous donne quelques exemple de tests simples, pour vous donnez des idées. Vous verrez les tests les plus simple à savoir cliquer sur des bouttons, récupérer des valeurs de champs de texte, accéder à l’API de Electron…
Vérifier que les outils de développement de Chronium ne sont pas ouvert
Lire le contenu d’un champ texte
Vérifier la navigation entre module et composant
Tester l’application en plein écran
Conclusion
Spectron est la librairie officiel pour tester des applications sous Electron.
Nous avons vu précédemment comment build et package l’ensemble de notre application en un .exe ou un installateur, si on souhaite le distribuer dans le chapitre précédent.
Je pensais avoir déjà fait un rapide tour d’Electron en 6 chapitres, mais à force de l’utiliser je pense pouvoir ajouter quelques chapitres supplémentaires qui pourrait bien vous servir et faciliter le développement autour de ce génial framework.
Objectif
Diviser les fonctionnalités de notre unique fichier du backend (main.js) en une multitude de fichiers
Permettre d’écrire le backend en Typescript et plus Javascript via un transpileur (TSC)
Pouvoir transpiler en instantané ( hot reload )
Le code source concernant ce chapitre est disponible sur mon Github.
Passage du Javascript vers le Typescript
Pour le moment, nous avons l’ensemble de notre application du frontend écrit via Angular en Typescript, mais le backend en Javascript. Il faut dire que le TS apporte beaucoup au JS traditionnel, et c’est pour cela que j’ai décider de migrer le backend. Il faut savoir que seul le pure javascript est compréhensible de nos navigateurs.
Comment Angular peut-il alors faire du frontend alors que l’on écrit notre application en TS ? 🤔🤔
De façon invisible, nous avons Webpack, planqué dans Angular, qui nous créer notre bundle en effectuant une multitude de transformation de nos fichiers, donc une que l’on va voir maintenant, est qui est la phase de transpilation. Celui-ci va transpiler l’ensemble de nos fichiers TS. Un mot bien complexe qui n’est rien d’autre que la conversion des fichiers TS en JS.
Script NPM pour la transpilation du typescript
Je suis parti sur TSC, qui est le transpiler de base de Typescript, car il est très simple d’utilisation, pas besoin de s’embêter avec un tas de paramétrage pour transpiler deux pauvres fichiers TS. Si vous souhaitez vous lancer dans des utilisations plus poussés, renseignez vous auprès de Webpack ou encore Babel.
On ajoute premièrement à notre package-json un nouveau script pour nous permettre d’appeler TSC :
backend-serve : nom du script
–project : argument pour fournir un fichier json de description pour le transpiler
–watch : argument pour compiler à la volé, dès qu’une sauvegarde de code est détecté
Si vous souhaitez transpiler seulement une fois sans avoir besoin du rechargement à la demande, vous pouvez supprimer l’argument ‘–watch’.
Une fois le script ajouté, on va créer un nouveau fichier comme vous avez pu le lire précédemment, tsconfig.backend.json, qui va nous permettre de décrire comment nous souhaitons transpiler nos fichiers TS.
Les arguments les plus importants sont :
include : on liste ici l’ensemble des fichiers TS que l’on souhaite transpiler
baseUrl : décrit la base du projet. On s’en servira plus tard lorsque je parlerais d’import de module en absolue ou relatif.
Ré-écrire son Main.js en typescript
Le but va être de ré-écrire son fichier d’entrée de notre application Electron, Main.js, en une version typescripté. Ouais je sais que ce mot existe pas, et alors c’est mon blog !😋
La ligne 5 représente un import de module pour les fichiers JS, la ligne 6 la méthode pour les fichiers TS
On va copier notre fichier Main.js et en faire un nouveau Main.ts. Vous risquez d’avoir quelques erreurs de lancé par votre linter, rien de bien complexe à modifier, vous devriez vous en sortir sans grand soucis. Un exemple dont vous pouvez avoir est la façon dont vous devez importer vos modules.
Je vais néanmoins quand même vous accompagner pour vos premières classes, car vous risquez d’avoir un petit soucis 😜
Architecture du backend
Jusqu’à présent nous n’avions qu’un seul fichier pour le backend, pour la gestion du cycle de vie de notre application. Au fur et à mesure des fonctionnalités que vous allez ajouter au backend, il se peut que vous souhaitiez éclater ce fichier ‘main.js’ en une multitude d’autres afin d’avoir une plus fine granularité, et ainsi d’améliorer l’extensibilité du code dans le futur. Je vous propose de suivre l’architecture suivante :
On va ajouter les deux classes suivantes :
StorageManager : on va lui déléguer l’ensemble des fonctionnalités de Main.js qui touche l’ensemble des serialization des données du module electron-store
CommunicationManager : on va lui déléguer l’ensemble des fonctionnalités de Main.js qui touche à l’échange d’informations entre le render et le main process, soit l’ensemble des fonctions du module IPC.
Erreur du loader/resolveFilename
Vous avez enfin une belle architecture, écrite en TS, et vous avez TSC de configuré. Aucune erreur sur l’ensemble de vos consoles, super, vous pouvez lancer Electron… et BIM ! Une belle erreur devrait apparaître, comme quoi vos nouveaux composants fraîchement crées ne sont pas trouvable 😒. Tsc étant un transpiler simple, il ne fait pas la liaison entre les composants lorsque on utile des imports absolue. Cependant si vous utilisez des importation de module avec des liens relatifs, vous n’aurez pas de soucis. Cependant, l’écriture de ces imports rend leur lecture complexe, en voici un exemple :
import * as test from ‘../../../../../../monModule’;
Mais pourquoi la console de TSC ne m’a pas indiqué d’erreur lors de la transpilation, mais seulement au moment de lancer Electron ? Car nous l’avons paramétré dans le fichier tsconfig.backend.json, avec l’argument ‘baseURL’ souvenez vous.
Si j’ai fais ce tutoriel avec TSC, c’est qu’il existe néanmoins des solutions, même si je vous avoue m’être bien cassé la tête sur ce problème. Pour résoudre ce soucis de chemin dans les require, vous avez deux petits modules à la rescousse disponible sur NPM.
Méthode 1 – La plus simple & basique
Son principe est simple, il va ajouter le répertoire parent de plus haut niveau dans le module de recherche de chemin de Node.
Il suffit d’installer le module suivant :
npm install app-module-path –save
C’est la méthode la plus simple, car il suffit d’ajouter une seule ligne de code, au début de notre fichier main.ts :
Pratique, car fonctionne lors du build, mais aussi en mode hot-reload durant le développement.
Cependant, si vous souhaitez seulement tester un fichier en particulier, une classe par example, et donc ne pas lancer votre application entière via le main.ts (faire simple un => node maclasse.js), cela ne fonctionnera pas car ayant ajouté le code précédent dans le main.ts, celui-ci ne sera pas lu. Pour cela vous êtes soit obligé de toujours lancer le main.ts depuis node pour que l’ensemble des imports soient modifiés, soit ajouter ce code dans l’ensemble des classes, ce qui peut vite devenir lassant. C’est pour cette raison là que je vous conseille la méthode 2.
Méthode 2 (recommandé) – Un poil plus complexe, mais plus flexible
Un second module vient à notre rescousse mais se comporte tout autrement. En effet, il va aller modifier les imports absolue de chaque fichier pour les remplacer par des liens absolue lors du build, dans les fichiers transpilé .js. Terriblement efficace, et pas bien plus complexe en ne nécessitant qu’une petite étape supplémentaire de configuration.
On installe ce module via:
npm install ttypescript --save
npm install @zerollup/ts-transform-paths --save
Héhé, je vous en fait installer un second en cachette car nous allons avoir besoin d’un wrapper, ttypescript, qui va nous permettre d’utiliser des plugins de transformation qui sont supporté dans notre fichier de configuration des options de compilation, disponible dans le fichier tsconfig.json.
Premièrement, on va modifier notre script NPM du fichier package.json de tout à l’heure pour qu’il utilise ttypescript que l’on vient d’installer :
On va ensuite modifier notre fichier de configuration qui permet de transpiler le backend, tsconfig.backend.json, afin de lui ajouter notre transformateur dans l’option ‘plugin’ pour qu’il puisse ré-écrire les imports :
Et on lui dit dans l’argument ‘paths’ de récupérer tout les fichiers à la base du projet et de les importer tel quel.
C’est finit, vous n’avez plus qu’a builder le backend depuis la console, avec notre script npm via la commande :
npm run backend-serve
Pour tester si tout fonctionne lancer le serveur de développement Angular avec:
npm run angular-serve
Ainsi que electron via :
npm run electron-serve
Mise à jour de la configuration du build
Afin de pouvoir continuer à builder, packager et distribuer votre application avec le module electron-builder, n’oubliez pas de modifier votre configuration de build disponible dans le fichier electron-builder.json ( ou dans votre package.json si vous n’avez pas dissocié les fichiers de configuration ). En effet, venant de modifier le backend en une multitude de nouveau fichiers TS et JS, nous devons mettre à jour notre configuration afin que celle-ci les prennes en compte dans le packaging de l’application. Pour cela, on va ajouter un nouvel item dans l’argument ‘files’, afin d’ajouter nos fichiers javascript précédemment transpilé :
Conclusion
On vient de voir la façon la plus simple pour pouvoir transpiler son backend Electron via TSC et un transformateur, pour résoudre les liens des imports absolue en relatif. Cela va nous permettre d’utiliser le typage et ainsi d’avoir un code source plus rigoureux grâce à Typescript.
Nous avons vu au chapitre précédent comment améliorer l’UI de notre application avec un système permettant à l’utilisateur de choisir son thème. Cela se fait beaucoup actuellement sur les applications pour reposer notamment les yeux lors d’une utilisation nocturne. Nous avons aussi vu comment sérialiser simplement et rapidement des données utilisateurs concernant les préférences et paramètres de l’application via de simples fichiers JSON.
Le code source concernant ce chapitre est disponible sur mon Github.
Principe global
Dans ce sixième et dernier chapitre de cette série consacré à l’utilisation de Electron, nous allons voir comment packager notre application afin de la distribuer. Pour cela nous allons utiliser le très bon module Electron-builder pour créer nos installateurs. On va installer ce module en tant que dépendances de dév :
npm i electron-builder -g
Nous allons devoir réaliser deux principales étapes afin de créer notre installateur :
Builder notre application Angular en mode production,
Packager le précédent build via Electron-builder.
Génération du build Angular en mode prod
Cette première étape va consister à créer un bundle de notre application. On va demander à Angular de builder notre application en mode production afin de compiler l’ensemble de nos composants, contrôleurs et pages web avec nos modules NPM, afin de passer d’un dossier de quelques centaines de Mo à un build ne pesant que quelques Mo.
Nous allons devoir effectuer quelques modifications de code, car actuellement on ne fait que build notre application dans un environnement de développement via notre serveur local.
Chargement de la page d’accueil
Pour le moment on demandait à Electron de charger à l’initialisation de la fenêtre, le rendu du serveur local de Angular via :
win.loadURL('https://localhost:4200/')
On va ajouter du code permettant de demander le chargement de index.html de notre build dorénavant :
On va demander de charger un fichier et non plus une URL, en indiquant via le paramètre protocol. Le chemin correspond au fichier index.html dispo dans notre build, situé dans le dossier ‘dist’ de Angular. Le paramètre slashes est extrêmement important pour Angular, afin de permettre le routage des diverses pages au sein de notre application.
Activer le Hash (#)
Etant donnée que l’on crée une SPA ( Single Page Application ), on peut observer des # dans notre URL, mais pas pour tout le monde, puisque Angular le cache dans les dernière version, et cela pose problème.
En effet avec le serveur de dév, tout fonctionne bien. Mais une fois passé en mode production, on arrive plus à afficher nos pages web correctement, car l’URL est faussé sans notre #. Pour cela, on va devoir le spécifier dans notre module principal de routing, d’utiliser le hash :
Base des liens
On va aller modifier la base de l’ensemble des liens de notre application, disponible dans notre index.html afin qu’il corresponde avec Electron :
<base href="./">
Cible de build
Dans le fichier de configuration de build de Angular, tsconfig.json, on va modifier la ligne suivante :
« target »: « es2015 »
par :
« target »: « es5 »
Génération du build
Dernière étape, on va générer le build Angular via :
ng build –prod
Le build est dispo sous /dist.
Pensez à tester ce build de production directement avec Electron avant de passer à l’étape suivante, via la commande :
electron .
Sans utiliser notre arguments –devTools, on demande à electron de tester notre build précédemment crée et non le serveur de développement de Angular.
Tout fonctionne pour moi, on peut passer à l’étape finale 😎
/!\ Attention à bien vérifier les liens vers vos assets, qu’ils soient bien relatif et non absolue, sinon vous risquez d’avoir des soucis et ne seront pas trouvé dans votre app Electron !
Package du build via Electron-builder
Vous avez de disponible quelques modules pour vous permettre de vous faciliter la vie pour créer votre installateur. En voici les principaux :
Comparatif des modules de build/package les plus populaires
Je vous propose de partir sur le plus populaire du moment de Github, à savoir Electron-builder. Mais vous pouvez partir sur celui qui vous fait plaisir, je n’ai pas essayé les autres mais je présume qu’ils doivent chacun faire le boulot !
Du coup avec le notre de module, c’est plutôt simple. On a juste à définir de nouveaux comportements dans notre fichier main.js. Je vous montre la spécification minimal, la plus simple pour générer un installateur. De nombreuses autres options sont disponible sur le site de Electron-builder, que cela soit pour faire un build Window, Linux ou macOS.
appId : nom de l’application
compression : définit le niveau de compression des données de notre application dans l’installateur
win : on définit ici les options pour un build pour window, à savoir la cible ainsi que le fichier d’icone pour notre application
electronDowload : permet de mettre en cache les utils et dépendances nécessaire à Electron builder afin de compiler notre installateur
directories : on définit le dossier d’output pour notre installateur
nsis : c’est la cible concernant un build pour window, on définit les options ici de l’installateur. On lui spécifie que on veut laisser le choix à l’utilisateur pour installer sur une session ou en global, la possibilité de choisir son dossier d’installation ainsi que de supprimer ou non les données de l’application en cache une fois celle-ci de supprimé
files : c’est ici que l’on spécifie à Electron builder les fichiers nécessaires au bon fonctionnement de notre application. On lui donne notre point d’entrée de notre app qui est main.js, ainsi que notre package.json ou l’ensemble du fonctionnement y est spécifié, et enfin le build de production généré par Angular précédemment
Pour générer l’installateur, ouvrez votre console dans le dossier du projet et tapez :
electron-builder
Il va télécharger les dépendances et utilitaires nécessaire pour créer l’installateur. Vous pouvez lui spécifier des arguments pour définir quelle plateforme et quelle architecture cible vous souhaitez pour votre/vos installateurs.
Dans votre dossier de sortie de Electron builder, sous /distElectron, vous aurez à la fois un dossier avec l’ensemble de votre application buildé et packagé prêt à fonctionner ( on peut appeler ça une installation dite portable, d’un simple copié/collé vous partagez votre app) ainsi que d’un installateur au format .exe traditionnel.
Astuce : builder en mode offline
Electron-builder va descendre certaines extension pour réaliser le build. Si vous souhaitez réaliser des builds en mode offline, sur un pc n’étant pas connecté à internet, vous pouvez mettre une variable d’environnement pour forcer le cache de electron builder dans le dossier spécifique de votre choix :
set ELECTRON_BUILDER_CACHE= »votre_dossier »
Vous aurez ainsi dans ce dossier les éléments suivants :
ELECTRON_BUILDER_CACHE :
votre_dossier
nsis
nsis-x.x.x.x
nsis-ressources-x.x.x
winCodeSign
winCodeSign-x.x.x
Vous aurez plus qu’a récupérer ce dossier, et de les déposer via usb sur votre nouvel ordinateur qui ne dispose pas d’un accès internet. N’oubliez pas de re-set la variable d’environnement sur ce dernier pc pour lui indiquer le bon chemin pour accéder à ce même dossier.
Conclusion
On arrive avec de sixième chapitre à la fin de la série consacré à comment débuter sur Electron. Vous êtes désormais capable de :
Initialiser un nouveau projet, développer avec un serveur de dév en local avec hot reload du frontend & backend,
Créer votre première fenêtre avec persistance des données utilisateurs,
Gérer la communication entre render & main process, gérer la communication entre composant de Angular,
Builder un projet Angular, packager votre application Electron.
Nous avons vu au chapitre précédent comment créer notre éditeur de texte, comment communiquer du render au main process via le module IPC afin d’interagir avec les fichiers disques via les API de NodeJS.
Pour ce cours-ci nous allons nous consacrer sur une fonctionnalité apprécié en ce moment, à savoir comment avoir un thème sombre et clair, et comment enregistrer ces données-ci afin de les récupérer à chaque ouverture du logiciel. Une rapide ouverture à la programmation réactive Observer/Observable via la librairie RxJS afin d’implémenter une fonctionnalité pour améliorer l’UX de notre logiciel, afin de renseigner le nom du fichier texte actuellement ouvert par l’utilisateur.
Ce cours sera donc principalement consacré à l’amélioration de l’UI pour l’utilisateur.
Le code source concernant ce chapitre est disponible sur mon Github.
Résultat du cours
Mise en place du système de persistance
Je vous propose d’ajouter une fonctionnalité, permettant de sauvegarder l’état du thème choisit, pour qu’il puisse être à jour à chaque lancement de l’application et que l’on ne soit pas obligé de le re-sélectionner. D’une manière général, je vous propose un moyen simple afin de sauvegarder et charger des paramètres utilisateurs en cache.
Pour sauvegarder des données, vous pouvez très bien créer une base de données plutôt traditionnel afin de stocker vos informations nécessaire au fonctionnement de l’application. Mais pour notre application qui reste extrêmement minimaliste, je vous propose la sérialisation des data dans un simple fichier JSON. Si vous souhaitez néanmoins rester sur une BD traditionnel, vous devriez regarder vers SQLite database, ou encore IndexedDB sur NPM.
Première chose, on va installer un simple module nous permettant de gagner du temps quand à la persistance de fichier JSON.
npm install electron-store –save
Souvenez vous que nos fichiers seront disponible dans le dossier %Appdata% de votre ordinateur, dans le dossier du nom de votre application.
On commence par vérifier si notre fichier JSON de sauvegarde existe au préalable sur l’ordinateur. Si celui-ci existe on ne fait rien en particulier. Dans le cas contraire, on va initialiser les valeurs des nos couples Clés/Valeurs. On souhaite avoir comme paramètre sauvegardé, le type de thème sélectionné ( Light, Dark ou Custom ) mais aussi les codes couleurs hexadécimal de nos différentes parties de notre application customizable, via le thème ‘Custom’. En effet, autant les thèmes Light et Dark sont pré-défini au sein de l’application et non modifiable, autant le thème Custom est modifiable lui.
On ajoute dans notre main process de Electron les bons imports qui vont bien :
L’argument ‘name‘ représente le nom du fichier JSON de sauvegarde, lors de la création de notre objet ‘storage‘.
On définit ensuite une fonction qui sera appelé dans notre fonction ‘createWindow‘ :
Comme je vous ai dit plus haut, si le fichier ‘settings.json‘ existe déjà, on ne fait rien. Dans le cas inverse, on va le créer et initialiser :
SETTINGS : clé
THEME_TYPE : clé, contient le type de thème à appliquer au lancement de notre app
CUSTO_PALETTE : clé, contient d’autres clés qui sont nos variables CSS avec leur code couleur hexadécimal qui leur sont associé
Thème clair & sombre
Il existe plusieurs façon de créer son propre système de thème pour son application. Nous allons voir une méthode très simple qui utilise les variables CSS. Au lieu d’affecter une couleur en dur à un composant HTML via son fichier CSS ( code en hexadécimal ou RGB ), on va désormais lui affecter une variable. C’est celle si que l’on va aller modifier selon no thème. Cela nous permet ainsi de bind plusieurs couleurs au même composant. Je vous propose de créer un thème clair, foncé, et un custom, auquel on pourra lui affecter au sein même de notre application une couleur modifiable à la volée.
Création des différents modèles de thèmes
Premièrement, on va créer une énumération définissant nos différents type de thème que l’on peut choisir:
Ensuite, nous allons créer une interface permettant de créer des objets du même type :
Dans le même fichier précédent, on va maintenant créer 3 objects correspondant à nos 3 thèmes. Nous allons leur affecter un type ( Light, Dark ou Custom ) et leur définir l’ensembles des propriétés CSS que l’on souhaite modifier. Les propriétés CSS ont été réduite volontairement pour gagner en lisibilité, vous pouvez retrouver l’ensemble des propriétés du projet via son dépôt Github. Si on souhaite modifier par exemple seulement la couleur de fond de notre application :
Le mot clés export nous permet d’y accéder en dehors de ce fichier.
Mise en place de l’interface pour la sélection du thème
Pour la vue de notre page de paramètres, faisons quelque chose de simple. On va disposer d’un groupe de bouton radio, permettant une sélection unique du thème. Cela nous rampement de choisir entre Light, Dark et Custom. Les deux premiers thèmes ayant des couleurs définit dans notre application, seul le Custom pourra être modifiable, histoire de laisser un maximum de liberté à l’utilisateur dans le choix de ses couleurs. Pour la vue, rien de bien complexe :
On ajoute juste une condition, dans le cas ou l’utilisateur choisit le thème ‘Custom’, on affiche un sélecteur de couleur pour chaque item modifiable de notre application. Pensez d’ailleurs à installer ce module que j’apprécie fortement, un color picker simple qui permet de choisir une couleur en héxadecimal, en RGB ou via un arc-en-ciel de couleur, et qui propose une multitude de fonctionnalités via son api, installable via :
npm install material-community-components –save
Petit aperçu du module :
Plutôt sympa non ?😎
Passons maintenant au contrôleur de notre page de paramètres. Nous devons définir des attributs pour lier nos boutons précédemment expliqués :
availableTheme : Tableau contenant les thèmes disponible à la séléction, responsable de la création des boutons radio
aliasTypeTheme : cet alias est un bind à notre énumération précédente, qui contient les trois type de thèmes. Cela nous permet de pouvoir faire dans la vue notre comparaison, et afficher le color picker si et seulement si l’utilisateur à sélectionné le thème Custom
activeTheme : c’est le thème actuellement activé
Concernant le constructeur du composant, on va créer une instance de ElectronService, permettant de discuter du render process au main process et vice versa :
On initialise nos thèmes disponible pour créer nos boutons radio.
Système pour initialiser un thème au démarrage de l’app via Electron-store
On va déléguer la gestion des préférence utilisateurs à un service, un singleton. Créons le via la CLI de Angular :
ng generate service ThemeManager
On va lui définir un attribut correspond au thème actif, et un second correspondant lui aussi au thème actif, mais qui sera un BehaviorSubject ( le but de celui-ci et de mettre à jour le thème actif au lancement de l’application , lorsque celle-ci chargement au démarrage les préférences de l’utilisateur) :
Concernant le constructeur du service, on va créer une instance de ElectronService permettant de contacter le main process :
On initialise par des valeurs random nos deux précédents attributs (je vous l’accorde niveau QUALITÉ du code, on a fait mieux hein 😅). et on envoi une notification au main process sur le canal ‘loadUserSettings‘.
On va définir dans le main process la méthode permettant de lire dans notre fichier JSON de sauvegarde, les données des préférences (définit par notre clé ‘SETTINGS’, et de l’envoyer au render process via le cannal ‘responseLoadUserSettings‘:
On réceptionne dans le thème manager les données d’initialisation envoyé par le main process :
On actualise notre thème actif, la palette de couleurs pour le thème ‘CUSTOM’, et on met à jour notre BehaviorSubject pour mettre la vue à jour concernant le thème actif, et enfin on appelle une méthode permettant d’appliquer notre thème :
On parcours les variables CSS du thème actuel, et on va les appliquer à notre document. Voilà, notre thème est appliqué au démarrage ! 😄
La dernière étape consiste à mettre à jour le modèle de nos boutons radio suite au chargement du thème initial. On ajoute une fonction dans le constructeur du composant de la page paramètres, afin qu’il soit notifié dès que le thème actif de notre service ThemeManager change. Voilà pourquoi je l’ai définit en tant que Observable, pour lui attacher un observateur. On va pouvoir subscribe a ce Subject de la façon suivante :
Système pour appliquer le thème courant
Maintenant que au lancement de notre application nos préférences sont lues et appliqués, on souhaite pouvoir changer de thème durant l’utilisation de notre application. On retourne sur le contrôleur de notre page de paramètre, et on ajoute la fonction suivante :
Cela va nous permettre de mettre à jour le thème actif pour nos boutons radio mais aussi de l’appliquer, via le ThemeManager.
Système pour sauvegarder le thème courant
Nouvelle fonctionnalités qui peut être cool, c’est de pouvoir enregistrer l’état courant de notre application, concernant le thème actif actuellement. Très simple, on va ajouter une seule ligne à la méthode expliqué juste avant, changeTheme() disponible dans le contrôleur de notre page ‘SETTINGS‘ :
Cela permet à chaque changement de thème, ou de couleur sur le color picker pour le thème CUSTOM ( car cette méthode d’actualisation est aussi appelé lors d’une modification de couleurs ) d’envoyer une notification à notre main process sur le canal ‘saveSettings‘, avec notre thème actuel en data.
Dans le main process, nous ajoutons une méthode permettant de réceptionner le thème actuel :
Et on met à jour notre fichier JSON contenant nos préférences utilisateurs, via Electron-store.
Indication de la page en cours d’exécution
Vous allez avoir besoin d’un nouveau module, permettant de faire de la programmation réactive :
npm install rxjs –save
Histoire d’améliorer l’interface utilisateur, je vous propose d’ajouter au centre de notre footer, une indication pour rappeler à l’utilisateur sur quel page il se situe au sein de notre application. Pour cela, on va définir une énumération contenant l’ensemble des pages de notre application :
Ainsi lorsque l’utilisateur va changer de page via les boutons de navigation situé en haut de notre application, on demandera une mise à jour du footer. Et pour cela, on va avoir besoin d’un service. On va créer ce service depuis la CLI de Angular :
ng generate service FooterUpdateService
Ce service va nous permettre d’échanger des données entre nos différents composants. Il se compose de la façon suivante :
On définit un BehaviorSubject. Ceci est un type de la librairie RxJs, qui propose de réaliser de la programmation réactive. Cela est grosso modo de la programmation qui suit le paradigme Observable et Observer. Ce menuStateSubject est un observable. Le ‘behavior‘ indique que c’est un observable, qui sera initialisé dès sa création avec un état pré-défini. Vous pouvez le voir dans le constructeur du service, on lui définit l’état HOME. Si vous souhaitez de pas lui définir d’état en particulier à sa création, vous pouvez utiliser simplement un Subject à la place du BehaviorSubject.
On a une première méthode, updateMenuStateSubject, permettant de lui envoyer un nouvel état.
La méthode getMenuStateObservable permet de renvoyer notre observable, nous l’utiliserons juste après.
Le but de ces observables, et d’y attacher des observateurs, ou juste de pouvoir subscribe au sujet. Cela permet de notifier à chaque changement d’état de notre Observable, ses observateurs et de pouvoir faire des actions en conséquence.
On va ajouter dans le contrôleur de notre Header, une fonction permettant de mettre à jour l’état de notre Observable, définit dans le service précédent :
N’oubliez pas d’ajouter au constructeur de notre contrôleur Header, l’appel au singleton de notre service via ‘public footerService: FooterServiceUpdate‘. On ajoute un argument à cette fonction, du type de l’énumération précédemment crée, afin de déterminer quelle page on ouvre.
On ajout ensuite le bind (click) dans notre vue sur chacun de nos boutons, qui nous permettent de changer de page. Ils permettent dorénavant de mettre à jour notre observable :
On ajoute dans la vue du footer une variable permettant d’afficher le contenu d’une variable qui sera définit dans son contrôleur :
On va ajouter dans le contrôleur du footer, l’attribut précédemment utilisé pour l’affichage de l’état courant du menu :
Et voilà le résultat !
Résultat de l’actualisation du footer
Conclusion
Nous venons de voir quelques pistes afin d’améliorer l’UI pour notre application, ainsi qu’une piste pour sauvegarder les préférences de l’utilisateur. Nous aurons aussi vu une rapide approche sur la bibliothèque RxJS, permettant de suivre le paradigme Observable/Observer.
Le 6 eme et dernier chapitre de cette formation est consacré au build & package de notre application, afin de pouvoir la distribuer comme n’importe quel logiciel.
Nous avons vu au chapitre précédent comment réaliser un simple appel à NodeJS via le module de communication IPC, afin d’éffectuer un appel au système de fichiers pour nous remonter des fichiers textes disponible dans un dossier précis.
Nous allons maintenant nous attaquer à une nouvelle fonctionnalité, nous permettant lors qu’un clique sur un fichier affiché dans notre explorateur de fichier, d’afficher son contenu dans un nouvel espace.
Le code source concernant ce chapitre est disponible sur mon Github.
Résultat du chapitre
Affichage d’un fichier
Notifier le main process
On va reset les classes permettant de surligner le fichier sélectionné, sur l’ensemble de nos fichiers listé dans notre explorateur.
On va ensuite activer seulement le surlignage pour le fichier actuellement sélectionné.
On envoi une notification au main process via le module IPC, sur le canal pingDisplayFile, en lui envoyant en donnée le chemin relatif de ce fichier.
Réponse du main process
On écoute sur ce même canal avec le module IPC.
On va lire le contenu du fichier, via son path précédemment envoyé, via le module fs de Nodejs.
Je récupère aussi le nombre de lignes que contient le fichier, cela nous permettra d’indiquer les lignes dans notre éditeur de texte.
Je créer un objet qui réunit ces deux résultats, afin de l’envoyer au render process via le canal responseFileContent.
Affichage du fichier dans le render process
La première fonction me permet de mettre mon attribut fileContent à jour via le nouveau fichier précédemment envoyé, ainsi que l’attribut lineNumber pour le compteur de nombre de ligne.
La seconde fonction va permettre de sauvegarder notre nouveau contenu affiché, et de l’enregistrer sur notre disque à la place de notre ancien fichier. On envoi une notification via le canal saveFile, en lui donnant en paramètre un object qui contient notre fichier, son contenu ainsi que son chemin d’accès.
On va ensuite construire notre page HTML pour affiche d’une part le contenu de notre fichier d’une façon éditable, mais aussi d’avoir à proximité un compteur de ligne pour se référer.
Cette disposition de flexbox me permet d’avoir deux colonne, via fxLayout= »row » :
lineCounterDisplay : est la partie pour le compteur de ligne. Le trick est de créer une division par chiffre de ligne via le bind angular *ngFor. Pour cela j’ai créer un tableau qui contient n item qui est le nombre de ligne du fichier, et qui sont incrémenté de 1 entre chaque item. Le contenu est bindé via J’ai réaliser via la fonction suivante :
textEditorDisplay : est la partie pour l’édition du fichier texte. Rien de bien spécial, c’est juste un textArea, qui permet d’afficher et de taper du texte. On le bind avec [(ngModel)] pour l’associer à l’attribut de notre contrôleur qui contient les données du fichier texte, envoyé auparavant par notre main process. On utilisera un second bind, (input), qui sera affecté à la fonction précédemment présenté. Celle-ci permet de déclencher la fonction à chaque changement fait dans le textArea. Cela permet de recalculer en temps réel le compteur de ligne à afficher.
Sauvegarde du fichier sur le disque
On utile le module fs de NodeJS pour sauvegarder notre fichier fraîchement modifié.
Conclusion
Vous pouvez rendre plus complexe votre éditeur de fichiers en y ajoutant certaines autres fonctionnalités tel que :
Une sauvegarde automatique via un timer, ou même à chaque ajout/suppression du moindre caractère ?
Proposer des outils afin de customiser la couleurs, taille, ou type de police ?
Direction pour le prochain chapitre qui abordera comment créer des thèmes clair et sombre ( pour reposer les yeux la nuit ), comment gérer le stockage de données utilisateurs, et enfin un rapide tour sur la programmation réactive via le paradigme Observer/Observable via la bibliothèque RxJS !
Nous avons vu au chapitre précédent comment réaliser la barre d’outils principal du logiciel.
Nous allons maintenant rentrer dans le vif du sujet pour la réalisation d’un explorateur de fichier texte basique.
Le code source concernant ce chapitre est disponible sur mon Github.
Résultats du cours
Explorateur de fichiers redimensionable
C’est tout bête, mais il va arriver à un moment ou à un autre que l’on tombe sur des noms de fichiers plus ou moins long, donc certains pourrait être tronqué. Autant faire quelque chose de propre, et donner la possibilité à notre explorateur d’être redimensionable par l’utilisateur.
Depuis le dernier chapitre, j’ai légèrement modifié l’architecture du projet afin de le rendre plus maintenable pour la suite des tutoriels. En voici une présentation simplifié :
Diagramme général
Module App
appComponent.ts
appComponent.html
appComponent.scss
appRouting.ts
Module Settings
settingsComponent.ts
settingsComponent.html
settingsComponent.scss
settingsRouting.ts
Module Home
homeComponent.ts
homeComponent.html
homeComponent.scss
homeRouting.ts
Module Projects
projectsComponent.ts
projectsComponent.html
projectsComponent.scss
projectsRouting.ts
File Explorer
fileExplorerComponent.ts
fileExplorerComponent.html
fileExplorerComponent.scss
File Editor
fileEditorComponent.ts
fileEditorComponent.html
fileEditorComponent.scss
Pour la partie graphique de notre file explorer, il va être composé d’une toolbar pour permettre d’ouvrir un dossier, une partie pour afficher nos fichier en colonne, et enfin un grabber nous permettant de modifier la taille de notre fenêtre :
On va utilise une directive de angular pour nous permettre de bind la largeur de notre file explorer [style.width.px]=’divWidth’.
Pour la partie de style, rien de bien sorcier, juste de prévoir de changer le curseur de souris lorsque l’on passera sur le grabber afin de faire remarquer à l’utilisateur que la fenêtre est modifiable :
La partie la plus intéressante et ou se passe la magie de notre grabber est dans notre contrôleur. On va définir :
un boolean, pour savoir si on a le clique enfoncé ou non,
une largeur de fenêtre,
une ancienne largeur de fenêtre pour connaître les déplacements.
Dernière étape, on va devoir ajouter des listener d’actions :
Un pour savoir quand on bouge la souris,
un autre pour savoir quand on enfonce le clic,
et un dernier pour savoir quand on relâche le clic
Dans l’ordre, cela va nous pouvoir de modifier la taille en temps réel, de savoir quand effectuer cette action, et savoir quand l’arrêter :
Explorateur basique de fichier texte
On souhaite avoir un système qui puisse lister l’ensemble des fichiers textes d’un dossier, et nous l’afficher sous une forme de liste au sein de notre logiciel. Cela nous permettra d’un simple clique de pouvoir ouvrir tel ou tel fichier texte à modifier.
Demande de fichier depuis le Frontend
On va ajouter un bouton nous permettant à son click, de notifier le backend afin d’ouvrir une fenêtre de dialogue pour sélectionner un dossier, dans lequel on souhaite récupérer l’ensemble des fichiers textes qui y sont situé. Rien de bien complexe pour la partie graphique, juste un bouton contenant une icone, qui à son click sera bindé avec l’appel de ‘openFolderDirectory()’. L’utilisation de la flexbox nous permet de positionner le boutton sur le côté gauche de la div.
Dans le contrôleur on va ajouter la fonction précédente. Celle-ci fait appel au module ipcRender, qui permet la communication de message du renderProcess vers le mainProcess. Il permet d’envoyer des messages via la fonction ‘send’, ou d’écouter via ‘on’. Cela fonctionne exactement comme des sockets, si vous en avez déjà utilisé. Dans notre cas on va juste envoyer un message vide, une sorte de ping pour exécuter une fonction.
Traitement de la demande par le Backend
On va réceptionner la notification venant du front via le module ipcMain dans notre backend, avec sa méthode ‘on’. La fonction prend un argument ‘event’, permettant de renvoyer un message, ainsi qu’un second argument ‘message’ contenant des données envoyé. Mais rappelez vous, on a juste ping sans envoyer le donnée, cet argument sera donc vide.
Le module dialog va nous permettre de créer une fenêtre de dialogue, avec en argument notre fenêtre principal, suivit d’un dictionnaire d’options permettant de définir si l’on souhaite ouvrir un dossier, un fichier, de définir un nom de fenêtre en particulier, etc.
Cette fonction nous renvoi une promesse, sur laquelle on va pouvoir lui attache deux bloc :
.then() : est appelé si l’ouverture du dialog se passe correctement,
.catch() : est appelé si une erreur est lancé lors de son ouverture.
Dans le cas ou on a une erreur, on la remonte simplement dans la console du back.
Dans le cas ou tout se passe bien, on va vérifier que l’utilisateur à bien choisit un dossier et n’a tout simplement pas annulé son action par la fermeture de boite de dialogue. On va alors appelé le module fs de Node qui permet de réaliser des opérations de lectures et d’écritures sur le disque. On va dans un premier temps récupérer l’ensemble des fichiers contenu dans le dossier renseigné pour l’utiliser, puis lui appliquer un filtre via une regexp, permettant de garder seulement les fichiers dont leurs noms se termine par .txt.
On va utiliser le premier argument pour pouvoir répondre au front, en lui envoyant dans un nouveau canal, un tableau contenant les noms de fichiers textes étant dans son dossier de sélection.
Affichage de la réponse dans le Frontend
On va réceptionner la réponse venant du Backend via une fonction écoutant sur le même canal que celui utilisé pour l’émission. On va récuperer le tableau de données, et l’associer à un attribut de composant que l’on aura déclaré au préalable.
Maintenant que l’on a nos données, on a plus qu’a les afficher comme une liste dans notre vue. On utilisera une mat list item, et on utilisera le bind *ngFor de Angular pour parcourir l’ensemble des items de notre tableau de données.
Un petit plus pour l’ésthetisme
Vous avez vu le binding [ngClass] ? C’est une directive de Angular, permettant de lui associer une classe CSS en plus (highlight, dans mon cas), si la condition file.highlight est respecté, soit si et seulement si le booléan est à true. Lorsque l’utilisateur clique sur un fichier, une fonction sera appelé. Celle-ci mettra à jour le boolean de l’ensemble des fichiers à faux, et mettra à true sur celui qui a été sélectionné.
Si vous regarder le code, concrètement cela permet lors d’une sélection d’un fichier, de lui ajouter une couleur plus clair que les autres, pour renseigner de façon plus jolie à l’utilisateur, sur quel fichier il est. Cela aura d’avantage de sens lors du prochain chapitre vous verrez 😉
Conclusion
Vous pouvez rendre plus complexe votre explorateur en y ajoutant certaines fonctionnalités comme :
Pouvoir remonter dans le dossier parente : pour cela vous n’avez qu’a juste ajouter un bouton ‘parent’, qui va ré-appeler notre fonction de ping du backend, mais en lui envoyant un chemin avec un niveau plus haut.
Possibilité d’ajouter un logo à côté de chaque fichier, en fonction de leur type. Vous aurez juste besoin d’une fonction qui split le nom d’un fichier, et qui compare l’extension, et affiche un type d’icone en fonction de celle-ci. A faire soit directement dans la vue avec un binding *ngSwitch, soit d’ajouter un nouvel attribut dans notre FileType.
Le prochain chapitre portera sur l’ouverture d’un fichier texte dans notre éditeur, pour pouvoir le modifier et le sauvegarder sur le disque.
Electron est un framework permettant de développer des applications bureaux multi plateforme ( Linux, Windows, MacOS ) avec des technologies web ( HTML, CSS et Typescript/Javascript ). Il est open source et permet de réaliser très rapidement des applications. Vous pensez que cela n’est pas possible ? Et pourtant vous en utilisez surement sans même le savoir ; Atom, Visual studio, Slack pour n’en citer que les plus gros.
Vous allez donc développer votre application comme si vous développiez un site web.
Composition de Electron
Electron embarque plusieurs outils/bibliothèque pour permettre d’avoir les mêmes accès qu’un logiciel développé avec un langage plus adapté et/ou de plus bas niveau :
Chronium : c’est le navigateur open source qui sert de base au célèbre Chrome de Google. Il va assurer le rendu visuel de l’application.
NodeJS : c’est un environnement d’exécution de code javascript. Il permet l’accès au système de fichier de l’ordinateur, ainsi que le réseau.
APIs Natives : permet l’accès aux fonctions natives, propres à chacun des OS.
Fonctionnement global
Le développement en est extrêmement simplifié, mais aussi accéléré, car vous aurez accès à plus de 300 000 modules sur NPM. C’est une sorte d’hébergeur de module, qui permet de réaliser certaines tâches. Vous ajoutez donc en quelques secondes de nouvelles fonctionnalité sur votre application.
D’autant plus que vous pouvez ajouter un framework pour le frontend pour structurer votre application : Angular, React, VueJS…
Vous allez avoir deux processus différent pour faire fonctionner une application tournant sous Electron :
Main process
C’est le point d’entrée de votre application. Il va contrôler le cycle de vie de l’application. Vous aurez tout les accès depuis ce processus, via les API native ou de NodeJS. Il peut aussi créer de nouveau processus de rendu, ainsi que de démarrer et de quitter l’application.
Ce processus est unique
Render process
Il va être responsable de la vue de votre application, par le biais d’affichage de vos pages HTML/CSS. Vous aurez accès au javascript pour gérer les contrôleurs et interactions. Mais attention, pas d’accès direct au système.
Chacun des processus de rendu sont indépendant les uns des autres. Si un crash, il n’affecte pas ses voisins. Il peut être caché, permettant d’exécuter du code en arrière plan.
Ce processus peut être multiple.
/!\ L’ensemble des fonctionnalités disponible par l’API de Electron ne sont pas forcement accessible depuis les deux types processus. Certains ne seront garanti que dans un seul des deux type de processus.
Communication entre Render et Main process
Electron à mit en place un module, appelé IPC, permettant de réaliser une communication ainsi qu’un échange de données entre main et render process, qui est appelable depuis chacun des processus. Cette communication fonctionne sous forme de canaux, et l’échange est bi-latéral. Celle-ci s’apparente à des sockets.
Architecture d’une application Electron
Le schéma suivant montre d’une façon simplifié le fonctionnement de base d’une appli Electron.
Architecture simplifiée
Le package.json est le point d’entrée de votre application. Il va indiquer à Electron ou est le main process,
Le main.js définit votre processus principal. Il va créer la fenêtre graphique pour y appeler le render process.
Le index.html définit votre vue.
Le module IPC permet l’échange d’informations entre les divers processus.
Conclusion
Points positifs
Stack web facile à apprendre
Dév rapide ( hot reload, console chronium, modules NPM… )
Cross-platform
Points négatifs
Consommation excessive de RAM
Taille du bundle ( ~100Mo pour un simple ‘Hello World !’ )
Maintenant que vous voyez le fonctionnement global d’un projet sous Electron, je vous propose d’expérimenter vous même, et de réaliser un traitement de texte basique sur le chapitre suivant.
Nous avons vu au chapitre précédent comment créer une frameless window basique.
Nous allons y ajouter quelques fonctionnalités de base que doit avoir un logiciel, via sa barre d’outils.
Le code source concernant ce chapitre est disponible sur mon Github.
Résultats du cours
Hot reloading du backend
Autant le hot reload des pages web du front se font automatiquement via le module Webpack contenu dans Angular, autant le backend ne s’effectue pas. Pour cela on va ajouter un module npm dans notre projet :
npm install electron-reload
Il va nous permettre de créer un nouveau main process de Electron, en lui donnant simplement en argument le chemin de l’exécutable de electron.
Nous lui ajouterons un argument pour permettre un hard reset du module, ce qui évite d’avoir des processus de Electron fantôme qui peuvent persister.
Et enfin un dernier argument, nous permettant de pouvoir injecter des arguments au lancement de electron, et dans notre cas de garder dans notre environnement de dév, le lancement des dev tools de chronium.
Barre d’outils via l’API de Electron
Définition de la vue, via des flexbox
On va introduire des notions de responsive design qui est propre aux stack du web. Ceci nous permet de rendre adaptable la vue d’une page en fonction de la hauteur et largeur de l’écran de l’utilisateur, et ainsi d’en modifier sa disposition. On parle alors de Flexbox. Celles-ci sont déclaré dans les pages CSS, et permette de définir des règles de disposition entre chaque éléments ( des <div> par exemple ). Cela peut définir des règles pour indiquer comment tel ou tel élément doit grossir, réduire, ou encore se disposer en ligne ou colonne avec ses éléments voisin. Un petit module que j’apprécie et qui est disponible sur NPM, va nous permettre d’induire ces flexbox, directement dans les balises du code HTML de la page :
npm install @angular/flex-layout
On souhaite avoir une barre d’outils comme ceci :
Partie gauche :
Une icone du logiciel avec un bouton d’accueil
Partie du milieu :
Le nom du logiciel
Partie droite :
Une barre d’outils avec des boutons permettant de réduire, de minimiser/maximiser la fenêtre, ainsi qu’un dernier pour fermer la fenêtre
1 – Contener Global
On va commencer par créer un contener global ( notre mat-toolbar ), qui va prendre le maximum d’espace possible de son parent, définit par la directive fxFill :
2 – Création des 3 sous conteners (définit précédemment)
On utilise la directive fxLayout=’row’ afin de créer 3 conteners sur la même ligne. Quand a fxLayoutAlign=’space-between’, elle va nous permettre de définir le type d’espacement entre chacun d’eux. Celle-ci nous permet de les espacer au maximum des un aux autres.
3- Alignement vertical d’un des trois sous conteners
On souhaite qu’ils soient aligné au milieu ce leur ligne. On va donner l’exemple pour le contener de droite. Pour cela, on va ajouter au contener précédent, la directive fxLayout=’column’ pour pouvoir créer des conteners de façon vertical ( rappeler vous que le row permet d’aligner des conteners de façon horizontal), avec le bon fxLayoutAlign=’center’ qui va bien, pour permettre de les aligner au milieu au seins de celui-ci.
Si on reprend notre cheminement depuis le début, on doit normalement avoir un contener fixé à droite de la barre, et qui sera aligné au milieu concernant son axe vertical. On souhaite maintenant avoir y incorporer 3 bouttons d’actions.
4 – Boutons d’actions
On va recréer un contener de type row cette fois-ci, nous permettant de grouper l’ensemble de nos trois boutons de façon horizontal. En effet avec le point précédent, nous étions dans un contener de type column, et donc aligné sur l’axe vertical, chose que l’on ne souhaite pas.
Vous n’avez plus qu’a ajouter vos trois boutons, avec l’appel aux fonctions qui seront déclaré dans le contrôleur, via la directive de angular, (click)=’votre_fonction()’.
Pour un peu d’esthétisme, j’ai rajouté une classeclass=‘button hoverBtnWhite‘, lié dans le fichier CSS, permettant qu’au passage de la souris, la couleur de l’icone et de son background change.
Définition du contrôleur, via le service Electron
Maintenant que la partie graphique est mise en place, on va passer au contrôleur, permettant d’ajouter des actions à nos jolis boutons 😉
On va ajouter un nouveau module, nous permettant d’accéder à l’API de Electron directement depuis notre contrôleur.
npm install ngx-electron --save
On l’importe dans notre module principal, soit App :
import {NgxElectronModule} from 'ngx-electron';
Et on le déclare dans la partie des imports :
import: [ NgxElectronModule ]
Dans notre composant Header.ts, nous aurons besoin d’importer le module ElectronService. En créer un attribut de classe, l’instancier lors de la construction du composant, et se servir du module REMOTE de l’API de Electron. On va alors pouvoir utiliser via ce module, les utilitaires du process main, depuis le render process. Le code suivant vous montre comment lier nos boutons créer précedemment pour leur affecter respectivement les actions suivantes :
fermer la fenêtre,
réduire la fenêtre,
maximiser,
unmaximiser.
Materials icons en offline
Si vous utilisez des icons de la librairie Material, soit celle de base de Angular, vous allez les télécharger à chaque lancement de l’app. Cependant, le jour ou vous voulez déployer votre application hors ligne, plus rien de marche, et les messages d’erreurs ne sont pas tellement explicite, vous êtes obligé d’aller chercher dans les requetes HTTP. Pire si comme moi vous avez du déployer une app offline sur iPad, sans n’avoir de console de développeur de iOS, alors autant prévoir les choses à l’avance. On va utiliser un module disponible sur NPM pour pouvoir toujours les avoir dans notre app :
npm install material-design-icons-iconfont --save
Et ajoutez les lignes suivantes dans votre fichier de style globale de votre app, soit style.scss :
Conclusion
Nous venons de voir comment appeler l’API de Electron depuis notre front en Angular, pour lui ajouter des fonctionnalités simple d’un logiciel.
Nous verrons au prochain chapitre comment créer un explorateur de fichier simple, pour présenter le module ipc de Electron, permettant de communiquer et d’échanger des données entre main et render process.
Cours pratiques - Data visualization
