Cours pratiques - Data visualization

Intégration de Plotly.js dans Angular 9

Exemple d’un graphique, venant de mon projet Covid19-Vizualisation

 
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

 

Objectifs

  • Intégration de Plotly.js
  • Initialisation d’un graph
  • Ajout de données
  • Customisation du type de graph
  • Customisation de son UI

 

Source du projet

Lien vers le dépôt Github contenant les sources

Lien vers une utilisation possible pour réaliser de la Data vizualisation pour suivre l’évolution de la pandémie du Covid19

 

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.

 

electron jest spectron e2e unitaire test Cours logiciel - Electron

Chap 8 : Tests unitaires & end-2-end ( Spectron…

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 :

  1. 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.
  2. 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.
  3. Donne la couverture de code couvert par les tests
  4. Pas besoin d’un navigateur web pour exécuter les tests, tout se fait depuis la console
  5. 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.

Cours logiciel - Electron

Chap 1 : Fenêtre principale, frameless bar, icon, lancement…

Préface

Je vais vous présenter comme installer votre environnement de développement, et créer votre première fenêtre, avec quelques astuces de dév, vous permettant d’accélérer vos rendus.

Le code source concernant ce chapitre est disponible sur mon Github.

Résultat du cours

 

Installation des pré-requis

Vous devrez avoir NodeJS d’installé. Je vous renvoi sur un précédent article qui vous explique les démarches à suivre.

 

Initialisation d’un nouveau projet

On va initialiser une nouvelle application angular avec tout le squelette de base qui va bien, afin de nous faire gagner du temps :

  • ng new Nom_de_votre_app

note : ng est une commande de la CLI de Angular

Sélectionner Yes pour avoir le routing du module de base,

Sélectionner ensuite votre langage pour les feuilles de style, je prends SCSS pour ma part.

 

On va ajouter Electron à notre projet via :

  • npm install --save-dev electron

 

Création de la fenêtre principale

On va créer un fichier main.js. C’est lui qui va servir de fichier principal pour créer notre fenêtre, avec le code suivant :

On va ensuite mettre à jour notre fichier package.json pour lui indiquer le point principal d’entrée pour Electron an ajoutant la ligne :

"main": "main.js"

 

De retour sur la console, déplacer vous au sein du projet, vous allez pouvoir lancer votre application dans electron via la commande :

  • electron .

 

Tadaaaaaaaaaaaaa. Ça ne casse pas 3 pattes à un canard, mais ça à le mérite d’être du développement plutôt rapide ! 😂

Première fenêtre sous Electron !

 

Liaison du serveur de dév de Angular vers Electron

Nous n’avons fait que lier de façon statique la page index.html. Cependant, pour le bon fonctionnement de Angular, il va nous falloir un serveur HTTP qui gère le typescript. Celui de base de Angular fonctionne très bien.

On va modifier notre fichier main.js pour qu’il prenne non plus un fichier en entrée, mais une URL qui pointe vers notre serveur de développement.

Lancer depuis une console le serveur de développement de Angular :

  • ng serve

 

Lancer ensuite depuis une seconde console electron. Vous avez désormais accès à Angular depuis votre application Electron. Vous pouvez avoir accès au rechargement à chaud ( mise à jour de l’UI en direct dès une modification du code ) directement dans Electron.

Angular tourne dans Electron

 

Lancement parallèle 

Pour éviter d’avoir deux console, on va pouvoir automatiser le lancement de Electron et Angular depuis un script.

Dans le fichier package.json, rajoutez les scripts suivants :

La première permet de lancer electron. La seconde quant à elle permet de lancer le serveur local de développement de Angular et Electron de façon concurrentielle.

 

Customization de la fenêtre

C’est dans l’ère du temps, donnons un peu de style à notre application 😎

On va supprimer la barre d’outils toute moche, et y incorporer une toolbar un poil plus joli, qui nous permettra de déplacer notre app, ainsi que de l’agrandir via une double tap.

Ajoutons la librairie de base pour les material UI :

  • ng add @angular/material

Nous n’avons pas besoin de HammerJS, mais belle et bien cependant des browser animations pour Angular material, qui seront à préciser à la suite de cette commande.

 

On va ajouter notre toolbar à notre fichier HTML du composant App

<mat-toolbar class="menu">My App</mat-toolbar>

 

Ajouter à notre module principal App le bon import pour la librairie Material :

import { MatToolbarModule} from '@angular/material'

 

Et ajouter MatToolbarModule dans la déclaration du Module principal, dans la partie Import

 

 

Lancement instantané de l’app ( white blank screen )

Quand on lance l’application, on a un écran blanc temporaire qui s’affiche. C’est une chose que l’on ne souhaite pas avoir au sein de notre application une fois buildé. C’est pour cela que l’on va modifier notre fichier main.js pour demander à Electron d’afficher notre fenêtre seulement une fois que celle-ci sera entièrement chargé, ce qui nous donnera l’impression d’avoir une ouverture quasi instantané.

Pour cela on va créer notre fenêtre et demander à Electron de la cacher dans un premier temps. Ajoutez la ligne suivante en paramètre de création lors de l’appel de la méthode :

  • show: false

On va ensuite rajouter un event, qui sera appelé une fois que la fenêtre sera prête :

Notre application va désormais se lancer directement.

 

Icone de l’application

Pour changer l’icone de votre application sur le bureau de windows, ajouter l’option lors de la création de la fenêtre avec le lien pointant vers une image placé dans votre dossier d’assets :

  • icon: './src/assets/icon/icon_transparent.png'

 

Conclusion

Nous venons de créer très simplement et rapidement une simple fenêtre, avec un chouette esthétisme.

Le prochain chapitre va permettre d’y ajouter de nouvelles fonctionnalités, concernant la barre d’outils.

 

 

Cours web frontend - Angular 8

Chap 5 : Gestion de la navigation via les…

Nous avons vu au chapitre précédent, l’ajout de deux composants dans notre application web, dont un menu de navigation. On va souhaiter maintenant de pouvoir nous balader à travers notre app pour afficher tel ou tel composant. Le code source du projet est disponible ici sur Github.

 

Routing entre component

On va commencer par créer deux nouveaux composants pour correspondre à nos deux onglets du menu :

  • ng generate component acheter
  • ng generate component vendre

Automatiquement, ces deux composants vont être déclarés dans notre app.module.ts.

 

On va créer deux alias pour deux routes différentes dans notre nav bar qui permettront de rediriger vers un composant :

 

On va aller ajouter cette redirection de route dans notre fichier app-routing.module.ts. On ajoute aussi l’import de nos deux composants. Quand au fichier de routing, celui ci est crée lors de la création du module si vous ajoutez l’attribut --routing.

On va dire de charger tel ou tel composant selon l’alias renvoyé par notre nav bar :

 

Redirection d’une route

Une chose qui peut être intéressant, c’est de pouvoir rediriger une route vers un composant spécifique. Par exemple, au démarrage de l’application, on souhaite charger par défaut un onglet spécifique.  Nous allons ajouter une directive de redirection dans le fichier app-routing.module.ts comme cela :

 

On est alors automatiquement redirigé lorsque l’on ouvre localhost:4200 vers localhost:4200/acheter, avec le composant ‘acheter’ d’ouvert :

 

Routing pour entre module

On va créer un nouveau module pour imager notre navigation entre module :

  • ng generate module login --routing

Ainsi que trois nouveaux composants :

  • ng generate component inscription
  • ng generate component connexion
  • ng generate component login

On va se service de login pour créer une seconde nav bar, nous permettant de naviguer au seins du module Login pour nous permettre de choisir entre la page d’inscription et de connexion.

 

On ajoute le nouvel onglet à notre nav bar principal:

 

On ajoute la nav bar secondaire :

 

N’oubliez pas d’ajouter dans le constructeur de login.component.ts, les items du sous menu :

La balise <router-outlet></router-outlet> va nous permettre d’inclure le code HTML des enfants dynamiquement, soit login/connexion ou login/inscription à tout moment lors de la navigation.

 

Il nous reste plus qu’a ajouter les routes des enfants du module Login dans notre fichier de routing principal qui est dans le module app :

 

Lazy loading, ou chargement à la demande

Au fur et à mesure que vous ajoutez des fonctionnalités à votre application, il se peut que celle-ci prennent de plus en plus de temps à s’ouvrir. En effet, c’est lors du démarrage que l’ensemble des pages sont récupérés, que les objets sont construits, etc. Afin d’alléger cette phase, on peut donner une nouvelle directive à angular, lui demandant de charger les modules à la demande seulement. Ces composants ou modules ne seront donc crée que lorsque l’un de ses composant sera appelé lors de la navigation.

Premièrement on va modifier notre appel à notre module Login  dans le fichier de routing principal de notre application :

 

Ensuite, on a juste à donner les nouvelles routes au sein du module enfant :

 

Pre loading

Nous venons de voir comment charger nos modules séparément et à la demande. On peut encore optimiser ces temps de chargement au démarrage.

En effet, une fois le module principal chargé, on pourrait demander à Angular de pouvoir pré-charger en arrière plan les autres modules de l’application, alors même que l’utilisateur peut dors et déjà interagir avec le module principal de l’application. Cela permettra ainsi d’avoir une navigation quasi instantané des autres modules.

Pour cela, on va modifier la stratégie de pré-chargement dans le fichier de routing principale de l’application :

 

 

Cours web frontend - Angular 8

Chap 3 : Structure d’un application Angular

Nous avons vu au chapitre précédent comment générer le squelette de base d’une application sous Angular 8. Nous avons vu une multitude de fichiers crées lors de cette génération effectue par Angular/Cli.

Sont-ils tous réellement utiles ? A quoi correspondent-ils ? Je vais vous en présenter les principaux à connaître.

Il faut savoir que Angular permet de créer une multitude de brique logiciel ( composant, service, classe…  ) que l’on va assembler entre eux de façon organisé et distincte ( module ).

 

Structure globale

/e2e

Ce dossier va permettre de rédiger divers test end to end par le framework Protractor

 

/package.json

C’est un fichier json qui va contenir la description de l’ensemble des modules NPM utilisé pour notre application. Vous aurez le choix d’installer ou d’update certains packet en comparant ce fichier. Utilise aussi pour gérer les dépendances nécessaires entre packet.

 

/angular.json

Fichier de configuration qui contient certains hyper paramètres important, tel que le dossier de sortir pour les builds de production, les dossiers contenant les fichiers de styles ou encore les assets, la page HTML principal à afficher, etc.

 

/src

Ce dossier va contenir l’ensemble de nos fichiers sources de notre application

 

Module et composition

Un module est un conteneur, un building block. Il permet de créer des packages distant d’un point de vue fonctionnalité. Par exemple pour un site web simple comme le bon coin, on peut avoir un module pour la gestion des annonces, et un module pour la gestion de l’authentification des comptes.

Ces modules nous apportent une plus fine granularité au sein d’un projet. Cela permet plus tard, d’améliorer l’extensibilité et la maintenabilité du code pour l’ajout de nouvelles fonctionnalités.

Vous pouvez créer un module via la commande Cli suivante :

  • ng generate module [nom du module] –routing

L’option –routing est optionnel, mais nous facilite la tâche. Nous le verrons juste après.

 

Cette commande va nous créer plusieurs fichier. On imagine que notre module s’appelle APP.

  • app.module.ts : c’est le fichier centrale de notre module. On y définit l’ensemble des imports qui seront utilisé dans notre module (librairies NPM), on y définit l’ensemble des composants qui y seront déclaré, mais aussi des services.  C’est quelque peu comme les fichiers H/HPP en C/C++.
  • app-routing.module.ts : c’est le fichier responsable de la navigation entre composant, et donc entre les vues.

 

Component et composition

Un composant est une entité dans angular. Il prend la forme que vous lui donnez. Cela peut très bien être une page d’accueil en entier, comme une simple barre de navigation servant de menu. C’est à vous de choisir encore une fois la granularité que vous donnez aux objets de votre application.

 

Vous pouvez créer un composant via la commande Cli suivante :

  • ng generate component [nom du composant]

 

Cette commande va nous créer plusieurs fichier. On imagine que notre module s’appelle comp1.

  • comp1.component.css : c’est la feuille de style de notre component
  • comp1.component.html : c’est la feuille qui correspond à la partie graphique, la vue
  • comp1.component.spec.ts : c’est un fichier permettant de réaliser des tests, qui seront automatisé avec Protractor
  • comp1.component.ts : c’est le contrôleur de notre component. Il va nous permettre d’y ajouter des fonctionnalités entre la vue, les boutons, la base de données, etc.
Cours web frontend - Angular 8

Chap 2 : Initialisation de notre première application

On a vu comment installer les dépendances nécessaires à une application web dans le chapitre précédent.

On va maintenant voir comment générer le squelette de base d’une application en Angular 8.

Création de l’app

On va générer notre application avec la commande CLI suivante :

  • ng new NomdeL’app

 

CLI va nous demander plusieurs questions concernant la génération :

Angular routing : nous le verrons dans un prochain chapitre. Cela permet de gérer la navigation au sein de l’application. On ne va pas s’en servir dans le chapitre actuel, mais vous pouvez mettre Oui.

Choix des feuilles de style : CLI nous propose entre CSS, SCSS et Sass. Le CSS étant le plus commun, on va garder celui-ci. Sachez que le compilateur transformera le SCSS et Sass en CSS. Ces deux derniers permettent juste une écriture des styles de façon plus lisible et rapide. Ce choix n’est pas définitif puisque vous pourrez le changer à n’importe quel moment plus tard dans le développement de votre application.

Comparaison syntaxique entre 3 langages de style

Cli va nous générer des fichiers. Pas besoin de savoir l’utilité de chaque pour le moment, nous le verrons dans le prochain chapitre. On va se déplacer dans le fichier racine du projet :

  • cd NomdeL’app

Pour enfin lancer :

  • ng serve

Cette dernière commande va nous permettre de build notre application. Et celle-ci est pratique, puisqu’il suffira de changer une seule ligne de code dans notre projet, pour que le projet soit re-buildé automatiquement, et que l’on voit les modifications dans le navigateur en temps quasi-réel.

 

Vous n’avez plus qu’a lancer votre navigateur préféré et aller sur :

  • http://localhost:4200/

 

Eeeeeeeeeh TADAAAAAAA

Je vous l’accorde ce n’est pas ouf. Mais c’était rapide non ?

 

Avant d’aller plus loin dans  la customisation de notre application web, dans le prochain chapitre 3, nous ferons une halte pour comprendre l’ensemble des composants crées précédemment.

Cours web frontend - Angular 8

Chap 1 : Installation des pré-requis

Pour créer le frontend d’une application avec le framework Angular, il va nous falloir installer quelques dépendances nécessaires. Rassurez-vous, rien de bien long 🙃

 

Node.Js & NPM

Pour faire simple, c’est un framework en Javascript permettant de réaliser des serveurs pour le backend. On en a besoin puisqu’il va nous fournir NPM. C’est le gestionnaire de packet pour le web, comme NuGet pour le C#, ou encore PiP pour Python. Il va nous permettre d’installer pleins de librairies nous facilitant le développement de notre application.

 

Vous pouvez le récupérer sur son site https://nodejs.org/en/

Installer la version que vous souhaitez cela importe peu. Il va créer un dossier Node sur le disque C. Vous devrez rajouter ce dossier C:\ProgramFiles\Node\ au PATH des variables d’environnement de votre système d’exploitation, pour que nous puissions utiliser les alias dans la console.

On peut alors tester que tout fonctionne correctement :

C’est OK pour nous, on a bien Node.Js et NPM qui sont accessible.

 

Angular & Angular/Cli

La prochaine étape va être d’installer la librairie Angular. Mais pourquoi alors parler de Angular/Cli ? CLI est une interface de ligne de commande pour Angular, une sorte d’extension. Elle va nous permettre de faciliter la création d’une application Angular par la suite en créant à notre place toute sorte d’objets pré codés, nous permettant alors de gagner un certain temps.

Dans une console on va alors se mettre à la racine du projet duquel on souhaite créer, et exécuter :

  • npm i @angular/cli

 

Vous pouvez voir l’ensemble des packets installé via :

  • npm list –depth=0

L’attribut –depth est facultatif. Il permet de réduire l’arbre des dépendances de l’ensemble des packets pour y voir plus claire

 

Nous voilà OK pour le chapitre suivant, auquel on va pouvoir initialiser notre première application !

 

Data visualization Cours pratiques - Data visualization

Introduction à la data visualisation

Dans cet article je vais introduire le sujet autour de la data visualisation. Je ne ferrais qu’introduire et je n’irais pas plus loin car c’est un domaine dans laquelle les formations en mathématiques, statistiques et probabilités sont le cœur du métier et qui forme les data scientist. Ce sont des personnes qui vont analyser des bases de données et extraire des informations, afin de trouver d’éventuelle corrélations entres elle. En effet, il se peut que certains facteurs puissent influer les autres. Connaître ces informations peut ajouter de la plus-value aux entreprises. Mieux vous connaîtrez votre marché et les besoins des clients, plus vous optimiserez les ventes de vos produits.

Prenons un exemple simple. Il y a fort à parier que les ventes de parapluie soient plus importantes en hiver, qu’en été. Et cela peut venir d’un principal facteur, qu’est la météo.

Le secteur étant large, je vais me consacrer qu’a une infime partie du domaine. Je vais me servir de plusieurs bibliothèques, tout cela en python :

  • Matplotlib : la plus connue de toute, elle permet de faire beaucoup, beaucoup de chose. Pour rapidement résumer, elle permet de réaliser très simplement des graphiques 2D.
  • Seaborn : elle se base sur la librairie précédente, et propose des graphiques encore plus détaillés pour pousser d’avantage l’aspect data visualisation.

Comme d’habitude, les sources du dataset utilisé et l’ensemble de mon code est disponible sur mon profil Github.

C’est parti ! 😎

 

Origine du dataset

Nous avons comme jeu de donnée diverses mesures médicales prises sur 768 patients. Celui-ci va vous permettre via 7 attributs différents nous permettre de déceler une quelconque relation si une personne est diabétique ou non. Nous avons les attributs suivants :

  • Pregnancies : nombre d’enfant
  • Glucose : taux de glucose dans le plasma sanguin (mm Hg)
  • Blood pressure : pression artérielle
  • Skin thinckness : épaisseur de peau au niveau du triceps (mm)
  • Insulin : taux d’insuline (mu U/mL)
  • BMI : indice de masse corporel (IMC, poids en kg / ( taille en m)²)
  • Diabete pedigree function
  • Age (année)
  • Outcome : la sortie qui sera 0 pour non diabétique, et 1 pour diabétique

 

On peut noter que le dataset n’est franchement pas équilibré :

Equilibre du dataset 2

 

Premiers pas

 

Graphique tout individu confondu
Graphique tout individu confondu
Graphique non diabetique exclusif
Graphique non diabétique exclusif
Graphique diabetique exclusif
Graphique diabétique exclusif

On comparant les 3 graphiques précédent, on peut réaliser déjà quelques observations qui pourraient influencer ou non le fait d’être diabétique. Cela reste purement statistique et donc n’en fait pas une science absolue :

  • Glucose : il semblerait qu’un taux plus important de glucose dans le sang soit perçue chez une personne diabétique
  • Skin thickness : on peut voir qu’une personne diabétique à une peau plus fine en moyenne
  • Insulin : une valeur légèrement plus forte serait présente chez une personne diabétique

 

Sur certains attributs, on ne peut trouver d’informations concluantes :

  • BMI : Peu/pas d’influence
  • Blood pressure : Peu/pas d’influence
  • Diabete pedigree function : Peu/pas d’influence
  • Pregnancies : Peu/pas d’influence

 

 

 

Pair plot tout individu
Corrélation entre nos deux classes de sortie sur l’ensemble des attributs

 

Matrice de correlation
Matrice de corrélation

Remerciements

Smith, J.W., Everhart, J.E., Dickson, W.C., Knowler, W.C., & Johannes, R.S. (1988). Using the ADAP learning algorithm to forecast the onset of diabetes mellitus. In Proceedings of the Symposium on Computer Applications and Medical Care (pp. 261–265). IEEE Computer Society Press.