M1 MIAGE 2022-2023 - Technologies Web - Angular

Introduction

Ce cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB (qui sera approfondie au second semestre), et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.

Séance 1 : découverte d'Angular, mise en place d'un projet, premiers composants

• Repository github du projet que je ferai en live coding : https://github.com/micbuffa/angularFrontM1Miage2022_2023 
  • "git clone" du repo, puis aller dans le dossier assignment-app, faire "npm i" puis "ng serve" (conseil : le faire depuis le terminal de VS code)
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 54 inclu lors de cette séance.
   
• Best of des outils de dev web que j'utilise. Y ajouter "github copilot" qui est (je crois bien) gratuit pour les étudiants (plugin pour visual studio code: complétion automatique intelligente utilisant un réseau de neurones).
   
• Vidéos enregistrées en 2020 de cette séance de cours (j'avais fait à peu près la même chose, à part github...) : 
  • Vidéo 1 
  • Vidéo 2

Séance 2 : correction du TP2 en live coding, communication entre composants, introduction aux services

• Repository github du projet qui contient une correction du TP2 : https://github.com/micbuffa/angularFrontM1Miage2022_2023 
  • Une fois "git pull" effectué, faire "ng serve" (conseil : le faire depuis le terminal de VS code)
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 122 inclu lors de cette séance.

Séance 3 : requêtes AJAX, Web Service, NodeJS, MongoDB et le module HTTPClient

• Repository github du projet qui contient une correction des TPs 3 et 4 : https://github.com/micbuffa/angularFrontM1Miage2022_2023 
  • Une fois "git pull" effectué, faire "ng serve" (conseil : le faire depuis le terminal de VS code)
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés du transparent 187 jusqu'au transparent 207 inclu lors de cette séance.
• Vidéos qui montrent cette partie du cours (datant de 2020) : 
  • Vidéo 1 : https://youtu.be/ivR5iX5HkUw?t=337 Création d'une base MongoDB sur mongodb.com, installation du back-end, explications, test des Web Services, début du cours sur le module HttpClient d'Angular pour requêter le back-end
  • Vidéo 2 : https://www.youtube.com/watch?v=MKlA3w0yBq0 (jusqu'à 1h:00)

TP5 : faire fonctionner le CRUD avec MongoDB, API REST et utilisation de HttpClient, peupler la base, début pagination

Dans ce TP je vous demande de :

• Faire marcher le CRUD avec votre propre base de données mongoDB (je rappelle que pour que le back-end y accède, vous devez passer par un VPN ou un partage de connexion avec votre téléphone, si vous êtes à l'Université, le wifi filtre les ports) :
  • Reprendre les transparents du cours (187/207) et implémentez dans le service de gestion des assignments et dans les composants les fonctionnalités d'affichage (GET), ajout (POST), modification (PUT) et suppression (DELETE)
     
• Ensuite poursuivre le cours, oubliez la partie RxJS, et reprenez au transparent No 214
  • Ajout de code pour pouvoir peupler la base de données distante avec un grand nombre de données.
  • Le site https://mockaroo.com/ permet de générer des données gratuitement et en grand nombre, dans divers formats, dont JSON. Il sait générer des noms, des dates, des valeurs numériques dans certains intervalles etc.
  • Dans la suite du cours on vous prépare à l'implémentation de la pagination, essayez de modifier le back-end comme indiqué et testez bien les valeurs de retour. On vous donne aussi le code pour modifier le composant qui affiche tous les assignments. Appliquez ces modifications et essayez d'implémenter une GUI de pagination comme indiqué dans les transparents. 

TP6 : fin du TP précédent, hébergement du back end et du front-end sur le cloud

Pagination :

• A partir du transparent 221. Intégrez la pagination dans le back-end et testez les valeurs renvoyées par le serveur (par ex, en entrant des URLs à la main dans la barre de votre navigateur)
• Si vous suivez le cours, vous disposerez de nouvelles propriétés dans la classe du composant qui affiche la liste des assignments. Modifiez son template html pour ajouter des boutons "page suivante" et "page précédente", "première page" et "dernière page".
• Quand on cliquera sur ces boutons on renverra une requête au serveur pour obtenir de nouvelles données et l'affichage se mettra à jour.

Vidéos de correction (2021) :

1. Module HttpClient : requêter les Web services définis dans l'API REST du back-end (45 premières minutes dans la vidéo).
2. Traiter les erreurs réseau, opérateurs RxJs (non vus en cours, mais intéressant à étudier, c'est assez court) (de 0:45:00 à )
3. Peupler la BD avec de nombreuses données.
4. Pagination et fin Pagination 
5. Peupler la BD et pagination : explications détaillées 
6. Héberger le projet complet sur Heroku.com (cloud service), attention, depuis cette année, vos projets ne seront disponibles en ligne que pendant un mois. N'héberger votre projet qu'au dernier moment avant de le rendre. On m'a recommandé une plateforme cloud similaire à heroku, qui s'appelle render.com, je suppose que la procédure d'hébergement doit être similaire. Si vous testez, merci de me le dire et écrire un petit README pour que je puisse m'en servir avec d'autres étudiants.

 Mini projet à rendre le 4/1/2022

• Page du mini projet