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

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 ?

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Pros and Cons of Ionic Development

If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development. 

Web Design and Development Services

Get Best out from Web Design and Development Services from Vinew Technologies,We have a dedicated team of experienced and knowledgeable web developers, designers and testers. Therefore, we have proficiency in analyzing, developing and designing the necessity of intricate Website Development projects.