MBDS Madagascar 2020-2021

Introduction

Dans ce cours on va utiliser la "MEAN STACK" dans le cloud, c'est-à-dire MongoDB + Express + Angular + NodeJS. Ce sera l'occasion de voir les avantages et les inconvénients de cette solution, et comparer Angular + TypeScript à des solutions concurrentes.

Outils nécessaires

Pour ce cours vous aurez besoin des outils suivants :

• NodeJS et npm à jour (installer depuis Nodejs.org)
• Visual Studio Code ou équivalent (WebStorm par ex.)
• Une connexion internet.

Séance 1 (lundi 8h-12h): introduction aux WebComponents et aux front-ends modernes

• Transparents de présentation sur les WebComponents standards du W3C 
• Support de cours Google slides utilisés pendant le cours, valable pour toutes les séances sur Angular.

• Vidéo du cours 
   
• Fichier zip de l'exemple vu en cours. Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"

Séance 2 (lundi 13h-16h): communications père-fils et fils-père, début services

• Vidéo du cours
   
• Fichier zip de l'exemple vu en cours à mi-parcours. Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"
• Fichier zip de fin de séance. Idem.

Séance 3 (mardi 8h-12h): services et router angular

Support de cours :

• Mon cours sur les promesses JavaScript / TypeScript 
• Cours sur fetch/async/await 

• Vidéo du cours
  
   
• Fichier zip de l'exemple vu en cours avant exercice du DELETE dans le service. Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"
• Fichier zip de fin de séance. Idem.

Séance 4 (mardi 13h-16h):

• Vidéo du cours 
   
• Fichier zip de l'exemple vu en cours à mi-parcours (avec authentification et auth guard). Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"
   
• Meilleurs outils pour le développeur Web 
• Bonnes pratiques pour écrire des Web Services REST/RESTful 

Séance 5 (mercredi 8h-12h):

• Vidéo 1 du cours
• Vidéo 2 du cours
   
• Fichier zip de l'exemple vu en cours avec http client rxjs. Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"
   
• Zip de la version avec pagination dans le back-end + service modifié dans le front et composant qui affiche la liste modifié aussi. Il ne manque que la GUI pour faire la pagination. Faire npm install, puis node server.js dans le dossier api, et faire "npm install" et "ng serve" dans le dossier client assignment-app.
  
   
• Lien vers le plugin de pagination mongoose utilisé : https://www.npmjs.com/package/mongoo...te-paginate-v2

Séance 6 (mercredi 13h-16h): pagination, ajouter page= limit= dans les URLs, heroku

• Vidéo du cours
  
   
• Mes repositories github pour le front et le back, attention, le front utilise l'URI du back dans heroku chez moi (modifiez si vous voulez tester en local, ou avec votre back end sur heroku -> dans le service de gestion des assignements) :
  
  
  • https://github.com/micbuffa/MBDS_Mad...1_frontend.git
     
  • https://github.com/micbuffa/MBDS_Mad...21_backend.git

Séance 7 (jeudi 13h-16h): scrolling inifini et operateurs rxJS

• Tutoriel (en anglais) sur comment ajouter un scrolling infini et détecter qu'on arrive à la fin (pour charger de noveaux assignments)
   
• Vidéo 1 du cours

Sujet du mini projet : améliorer le TP sur les Assignments

A faire an Angular.

Contraintes :

• A faire en binôme.
   
• Au moins 500 assignments dans la base de données (utilisez un générateur de données)
   
• A rendre sur githubet hébergé sur Heroku.com. Penser à faire un README qui détaille vos contributions et qui m'explique en détail ce que je dois faire pour le faire tourner sur ma machine.
   
• facultatif : Vidéo pas trop longue illustrant une démo et un point remarquable de votre projet (ce que vous avez fait mais que les autres n'ont pas fait, un point difficile dont vous êtes fiers, etc.)
   
• Date de rendu : le XXX 2021, non nénociable. Je mets zéro après cette date.
  
• Pompage = zéro (je l'ai fait pour 4 personnes l'an dernier)  Vous avez le droit de récupérer des bouts d'un autre groupe mais en le disant clairement ("J'ai repris ce bout de code ici sur le net voilà l'URL, et ça du groupe xxx et yyy qui m'ont aidé")

Détail du travail attendu

Vous apporterez les améliorations optionnelles suivantes à ce TP :

• Ajouter une gestion de login/password
  • Cas simple : vous codez en dur dans le service d'authentification une liste de login/passwords valides.
     
  • Cas mieux (mais pas mal de travail sur back-end): en créant une collection Utilisateurs dans MongoDB, et en validant que le user/password est correct.
     
  • Pour les très forts: regardez comment utiliser l'authentification à l'aide de Json Web Tokens (JWT), en suivant par exemple ce tutoriel. 
     
  • Comme dans le TP on gérera le cas particulier admin.
     
• Ajouter de nouvelles propriétés au modèle des Assignments:
  • Auteur (nom de l'élève)
  • Matière (Base de données, Technologies Web, Grails, etc.)
    • Une image sera associée à chaque matière et une photo du prof
  • Note sur 20, on ne peut marquer "rendu" un Assignment qui n'a pas été noté.
  • Remarques
     
• Améliorer l'affichage des Assignments
  • Puisqu'on a ajouté de nouvelles propriétés, il faudra mettre à jour les différents endroits où les Assignments sont affichés/édités/saisis, en particulier :
    • Par exemple, afficher dans la liste des Assignments chaque Assignment sous forme d'une Material Card, avec le titre, la date, l'élève, une petite image illustrant la matière, la photo du prof en petit en haut à droite.
  • La vue détails montrera en plus les remarques, la note s'il a été rendu, etc.
  • Les formulaires d'ajout et de détails proposeront un choix fixe de matières (et associeront automatiquement le prof et l'image illustrant la matière)
     
• Afficher les Assignments dans deux onglets séparés selon qu'ils ont été rendus ou pas encore rendus
  • Lorsqu'on met une note à un Assignment et il devient rendu et apparaitra dans l'onglet "Rendu"
     
• Optionnel (mais simple à faire): utiliser un Formulaire de type Stepper (formulaire en plusieurs étapes) pour l'ajout d'Assignments (éventuellement pour la modification)
   
• Rendre le tout plus joli, essayez de ne faire tous la même chose.
   
• Hébergement sur Heroku.com
  
  
• Le sujet est ouvert, vous pouvez ajouter ce qui vous semble amusant/pertinent:
  • (difficulté moyenne) drag and drop entre la liste des Assignments non rendus et rendus, qui déclenchera la notation,
  • (facile) Ajout de messages de notification (SnackBar Material)
  • (bcp de travail) Collection d'élèves et de profs pour faciliter l'association devoir/élève et matières/profs
  • Etc.