M2 Miage 2023-2024 - Angular/NodeJS/Express/MongoDB + Cloud

De $1

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/Express, 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

Séance 2 : on continue avec les directives, stylage conditionnel de composants, data binding et formulaires et début communication inter composants

On utilise le même support de cours (on commence slide 41) et le même repository GitHub. Les vidéos postées dans la séance 1 couvrent une grande partie de cette séance aussi.

On s'est arrêté au transparent No 74.

Video enregistrée pendant le cours : https://www.youtube.com/watch?v=h0JrgAjdQGk 

TP1 : on continue l'exemple du cours....

Je vous l'avais demandé lors du dernier cours : refaites ce que j'ai fait en live coding pendant la première séance en amphi. Pour cela, reprenez les transparents du cours, et faites les opérations décrites jusqu'au transparent No 54 inclu !

Travail à faire :

  1. Effectuer les opérations décrites dans les transparents 55 à 73 inclu (attention, parfois il faut regarder les transparents en mode diaporama, car un seul transparent peut décrire plusieurs étapes). 
     
  2. On regarde la documentation d'Angular material sur "toolbar" et "sidenav" pour faire une barre de menus et une barre latérale de navigation sur la gauche. Inspirez-vous des exemples proposés mais aussi de ces deux vidéos pour ajouter ces éléments à votre application
    • Vidéo sur Toolbar : https://www.youtube.com/watch?v=7VZYM267xs0
    • Vidéo sur Sidebar : https://www.youtube.com/watch?v=IU0SU4lbAwY
       
    • Réfléchissez bien : dans quel composants allez-vous ajouter la tooldbar et la sidenav ?
    • Dans la toolbar on aimerait : une icone en forme de maison qui servira plus tard à revenir à la page d'accueil, un bouton ou un lien ou une icone de connexion qui servira plus tard à s'identifier
    • Dans la sidebar on aimerait pour le moment :
      • un lien "Liste des devoirs
      • un  lien "Ajout d'un devoir"
      • un lien "Modification d'un devoir"
      • un lien "Suppression d'un devoir"
      • un lien "Génération de données de test"

Séance 3 : on continue avec la communication inter composants

On est allé du transparent 74 jusqu'au transparent 102.

 

TP2 : on continue à coder l'exemple du cours.... communication entre composants

Ce TP vous propose de créer dans l'applications des composants spécialisés, fils du composant qui gère les "assignments". On va faire un composant pour afficher les détails d'un assignment quand on clique dessus, un composant pour ajouter un assignment, un composant pour supprimer un assignment etc. Et on verra un problème très courant dans la programmation par composants : la communication père - fils et la communication fils - père, qui pourra se généraliser à "communication avec d'autres composants".

Dans la suite du cours on verra une manière plus confortable de centraliser les données manipulées (ici les assignments). 

Travail à faire :

  • Avancez votre projet angular, si possible en continuant votre propre TP (celui avec sidenav et toolbar) en suivant les transparents du cours du No 74 à 103 inclu.
  • Vous essaierez de faire l'exercice proposé à la fin (suppression d'un assignment / DELETE).

TP 3 : Implémention de services

TP4 : Utilisation d'un routeur 

ATTENTION : TP A RENDRE POUR LE 12/11, VOIR MOODLE !

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

Support de cours

 

TRAVAIL A FAIRE

  • 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