Morioh
Login
Thierry Perret

Thierry Perret

3 years ago

Créer depuis zéro une application Angular pour Tracker les statistiques du COVID-19 c’est possible ?

Les données que j’ai utilisé:

Les outils et techo que j’ai utilisé:

  • Angular 9 pour la logique applicative
  • Ionic 5 pour implémenter des vues responsive
  • RxJs pour la manipulation des données
  • OpenLayer Map pour l’implémentation de la carte
  • La librairie Chart.js pour les diagrammes de visualisation
  • Github public repo pour le versionnage
  • Github Action pour orchestrer de deployement sur FTP

Et le backend??

  • pas besoin de backend pour le moment! J’ai simplement consommer les données directement depuis le repository GitHub via une requête HTTP pour récupérer le contenu des documents qui m’intéressent.

Voici comment j’ai fait:

  1. mettre en place l’architecture basic
  2. créer les services pour récupérer les données total par région
  3. mettre en place un Component principal pour tester le formating de donnée
  4. mettre en place un Component pour la barre latérale avec la liste des pays
  5. mettre en place un Component pour afficher une Map
  6. tester d’afficher des données dans la Map (markeur, event)
  7. implémenter les données du service dans le Component un Map
  8. créer les service pour pour récupérer les données par tranche de temps et par région sélectionné
  9. mettre en place un Component pour afficher un Chart pour le pays sélectionné
  10. tester d’afficher des données dans un chart
  11. implémenter les données du service dans le Component un Chart
  12. ajouter les outils de deploy et tester le fonctionnement du deploy
  13. créer les actions Github pour le deploy
  14. mettre en place un flow de deployement continue.
  15. je cois qu’on est au bout… on devrait avoir un projet terminé et fonctionnel à ce niveau là.
  16. refactoring et ajout de fonctionnalité ??

Cela m’as pris presque 6h mais le résultat et là.
J’ai mis en ligne sur mon hébergement perso la démo de l’application:
https://covid19.nicolasfazio.ch

Je te met aussi le détail avec les marqueurs pour te rendre sur les points clés du développement:

  • 2:01 : création projet Angular 9
  • 3:30 : explication du lots de données
  • 6:10 : création provider GithubService
  • 18:31 : essai du provider GithubService dans AppComponent
  • 28:23 : decodage de la réponse de Github API
  • 31:06 : convertire CSV en JSON
  • 33:10 : convertir service GithubService en service Observable
  • 35:55 : utiliser service GithubService avec les Observable dans AppComponent
  • 42:57 : création d’un Pipe GroupBy
  • 50:53 : Présentation de OpenLayer Map
  • 51:57 : installation de OpenLayer Map dans Angular 9
  • 52:48 : création d’un composant OlMapComponent
  • 1:11:10 : logique pour ajouter les marqueurs sur la map
  • 1:13:44 : création des évènement sur la map (click sur un marqueur)
  • 1:21:19 : formatage des données pour gestion de la dimension des marqueurs
  • 1:28:45 : installation et ajout de Ionic 5 dans un projet Angular 9
  • 1:33:30 : utilisation de Ionic pour la gestion des Vues (DOM)
  • 1:36:45 : ajout du composant SplitPan de Ionic (menu latéral)
  • 1:39:50 : gestion des évènements (click) dans AppComponent
  • 1:44:36 : création d’une modal avec Ionic
  • 1:52:08 : présentation et installation de Chart.js
  • 1:53:20 : création d’un composant pour Chart.js ChartComponent
  • 2:13:58 : formatage des données pour Chart.js
  • 2:25:21 : gestion des erreurs avec l’API Gtihub
  • 2:28:28 : mise en forme de la modal du Chart
  • 2:37:38 : mise en forme du menu SplitPan
  • 2:41:09 : calcul du nombre total de cas par pays
  • 2:53:40 : organisation des fichier et dossiers de l’application
  • 3:01:40 : decomposition du service GithubService en plusieurs services (multi service injection)
  • 3:36:48 : ajout du package de deployement
  • 3:40:25 : configuration pour le deployement sur FTP
  • 3:44:46 : ajout des Github Action pour automatiser le deployement
  • 4:00:22 : preview de l’application en prod
  • 4:01:10 : blabla de fin et debref

Et le code source sur mon compte Github:
https://github.com/fazionico

J’ai corrigé entre temps les derniers bug qu’il y avait dans l’application et ai plublié la mis à jours sur github. Tu retrouvera tous l’historique de développement dans la liste des commits du projet.

#angular #ionic #developer #web-development

COVID-19 application avec Angular 9, Ionic 5, Openlayer Map & Chart.js

youtube.com

COVID-19 application avec Angular 9, Ionic 5, Openlayer Map & Chart.js

COVID-19 application avec Angular 9, Ionic 5, Openlayer Map & Chart.js - Créer depuis zéro une application Angular pour Tracker les statistiques du COVID-19 c'est possible ?

7.90 GEEK