- 1. Introduction
- 2. Séance 1 : découverte d'Angular, mise en place d'un projet, premiers composants
- 3. Séance 2 : communication entre composants, début des services
- 4. Séance 3 : fin des services, routeur, début back-end et cloud
- 5. Séance 4 : fin de l'étude du back-end, HttpClient, Peupler la BD avec générateur de données, pagination
- 6. Séance 5 : hébergement dans le cloud, pagination avec angular material paginator, scrolling infini, opérateurs RxJS
- 7. Sujet du mini projet : améliorer le TP sur les Assignments
- 8. Détail du travail attendu
Introduction
Lien ZOOM valable toute la semaine
Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.
Notez que nous utiliserons Angular dans sa version 17, avec des composants standalone. Pour ceux qui veulent avoir une formation sur les précédentes versions d'Angular, allez voir le cours des années précédentes.
NOTE : si vous allez voir le cours de l'année dernière, il est accompagné de nombreuses vidéos complètes du cours (où je live code et j'explique tout. Je m'étais filmé durant les cours en visio pendant le COVID), mais il ne couvre pas les nouveautés d'Angular 17. Par contre, 95% de ce que je montre n'a pas changé.
Séance 1 : découverte d'Angular, mise en place d'un projet, premiers composants
Cette partie du 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, 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 2 : communication entre composants, début des services
Séance 3 : fin des services, routeur, début back-end et cloud
Séance 4 : fin de l'étude du back-end, HttpClient, Peupler la BD avec générateur de données, pagination
- VIDEOS ENREGISTREE DE CETTE SEANCE :
- Repository github du projet FRONT que je mets à jour en live coding :
- Repository github du projet BACK que je mets à jour en live coding :
- https://github.com/micbuffa/-AngularESTATIC2024Back.git
- Pour l'exécuter : faire "git clone" puis cd dans le dossier créé, puis "npm install" puis "node server.js" (ou "npm run start")
- ATTENTION : il se peut que la connexion à la base du back-end ne marche pas avec votre wi-fi de l'école. Les ports ne doivent pas êtes filtrés. Si c'est le cas et qu'il y a erreur de connexion : utiliser un partage de connexion avec votre téléphone portable ou un VPN (de la maison ça devrait marcher).
- Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 236 inclu lors de cette séance.
Séance 5 : hébergement dans le cloud, pagination avec angular material paginator, scrolling infini, opérateurs RxJS
VIDEOS ENREGISTREE DE CETTE SEANCE :
Pour une raison inconnue, cette vidéo a été perdue. Je mets les liens vers les vidéos équivalentes du cours que j'avais donné au MBDS Madagascar en 2024.
Sujet du mini projet : améliorer le TP sur les Assignments
Contraintes :
- A faire en binôme.
- Au moins 1000 assignments dans la base de données (utilisez un générateur de données), déjà fait dans les TPs qu'on a eu ensemble. Utilisez votre propre base de données dans le cloud, PAS LA MIENNE !
- A rendre sur GitHub et hébergé sur render.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.
- Obligatoire : Vidéo pas trop longue (2minutes maxi), sur YouTube, 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 1er Juin 2024, non négociable. Je mets zéro après cette date.
- Richmond Yebouet doit me renvoyer une feuille google spreadsheet avec des colonnes pour le groupe, l'url github front, l'url github back, url lien video, url lien du projet testable sur render.com).
- 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é", chatGPT m'a aidé ici...).
Détail du travail attendu
Vous apporterez les améliorations optionnelles suivantes à ce TP :
- Ajouter une Toolbar et une SideBar/Sidenav pour la présentation. Voir vidéos sur YouTube.
- 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.
- Encore mieux : authentification à l'aide de JSON Web Tokens (JWT), par exemple 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 des assignments).
- 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)
- 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 render.com ou autre OBLIGATOIRE (je ne vais pas installer et compiler tous vos projets localement)
- Le sujet est ouvert, vous pouvez ajouter ce qui vous semble amusant/pertinent:
- (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.
-
Vous n'êtes pas connecté. Connexion 