- 1. Introduction
- 2. Séance 1 : introduction à Angular
- 3. Séance 2 : fin communication entre composants, services, début du router
- 4. Séance 3 : fin router, autentification, autorisations, création base de données cloud, api
- 5. Séance 4 : HttpClient, hébergement heroku du back-end
- 6. Séance 5 : Pagination, Datatable, hébergement du client sur Heroku, RxJs, scrolling infini
- 7. Sujet du mini projet : améliorer le TP sur les Assignments
- 8. Détail du travail attendu
Séance 2 : fin communication entre composants, services, début du router
VIDEO DU COURS du 8/03/2022 8h-12h : https://youtu.be/rvxkpdV0cDw
On est allé jusqu'au transparent No 145
Séance 3 : fin router, autentification, autorisations, création base de données cloud, api
VIDEO DU COURS du 9/03/2022 8h-12h : https://youtu.be/Q1cS6E28xlA
On est allé jusqu'au transparent No 193
Séance 4 : HttpClient, hébergement heroku du back-end
VIDEO DU COURS du 9/03/2022 13h-16h : https://youtu.be/15dADRKBWDc
On est fait les transparents 194-205, puis on a sauté pour voir l'hébergement du back-end sur Heroku (slides 225-233)
Séance 5 : Pagination, Datatable, hébergement du client sur Heroku, RxJs, scrolling infini
VIDEO DU COURS du 11/03/2022 8h-12h : https://youtu.be/dK4v6VKvuiw
On est fait les transparents sur la pagination (212-224) puis hébergement client sur Heroku (223-238), RxJs (206-211) et ensuite TP ci-dessous sur le scrolling infini
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 github et 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 30 Avril 2022, non négociable. Je mets zéro après cette date.
- Mr Randrianimanana Toky doit me renvoyer une feuille excel ou google spreadsheet avec colonnes pour groupe, github front, github back, video, lien heroku).
- 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 (qui lui seul peut faire EDIT et DELETE).
- Ajouter de nouvelles propriétés au modèle des Assignments:
- Auteur (nom ou photo 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 OBLIGATOIRE
- 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.