M2 INTENSE Rabat 2021-2022 Technos Web

Introduction

Dans ce cours nous continuerons l'exploration des technologies front-end avec le framework Angular, et back-end avec nodeJS, BDs NoSQL, hébergement dans le cloud etc.

Séance 1 : introduction à Angular

VIDEO DU COURS du 8/12/2021 :

1. Vidéo 1 (13h-15h15) : https://youtu.be/ABLi7rFkJdg⁸
2. Vidéo 2 (15h30-17h45) : https://youtu.be/NJ8BbRbh43E⁹

• Support de cours angular, qu'on utilisera pendant plusieurs séances¹⁰.
   
• Best of des outils de dev web que j'utilise¹¹ 
   
• Rappel des commandes pour lier le projet généré par ng new assignment-app avec un repo github fraichement créé (ne cliquez aucune option quand vous faites "add repository") :
  • git remote add origin <repo>
  • git branch -M main
  • git push -u origin main
     
• Repository github du programme front-end fait en classe : https://github.com/micbuffa/angularEmsiRabat2021_2022.git¹² 
  • git clone du repo
  • cd dans le dossier
  • Puis ouvrir VS code dans le dossier avec "code ."
  • Puis dans un terminal de VS code : "npm install" puis "ng serve"

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

Séance 2 : communications entre composants, début service angular

Le projet est sur le même lien github, cf lien sur séance 1.

Vidéos du cours :

1. Vidéo 1 (13h15-15h15) : https://youtu.be/sZeb8tpzbFY¹³
2. Vidéo 2 (15h30-16h15) : https://youtu.be/PDsdkATwH_8¹⁴

• Tutorial sur formatage des dates avec le | date : https://www.angularjswiki.com/angula...with-examples/¹⁵
• Petit cours sur async/await/fetch et les promesses¹⁶ 
• Cours avancé sur les promesses (pour les bons...)¹⁷ 
• Bonnes pratiques quand on conçoit des Web Services REST¹⁸ 

On s'est arrêté au transparent No 120

Séance 3 : fin de l'étude des services, router Angular

• Page web avec les meilleurs outils¹⁹ pour faire du développement Web sur MacOS
• Ici les meilleurs outils ligne de commande²⁰ pour le shell Mac (à installer avec "brew install ...")

Vidéos du cours :

• Première partie²¹ : fin de l'implémentation du CRUD dans le service de gestion des assignments.
• Deuxième partie²² : introduction au router d'Angular
• Troisième partie²³ : restriction d'accès aux routes avec le routeur, authentification service et guard.

On s'est arrêté au transparent No 180

Séance 4 : Back end node/express/mongoose + mongoDB

• Cours (en anglais, mais sous-titres multi-langues) sur MongoDB²⁴, donnés par les créateurs de MongoDB (gratuits)
• Repo git du back-end : https://github.com/micbuffa/backEndEmsiRabat2022.git²⁵, faire "git clone" ou "git pull" si vous l'avez déjà récupéré, puis "npm install" dans le dossier, puis "node server.js" ou "npm run start"

Vidéos du cours  :

• Première partie : MongoDB dans le cloud, back end nodeJS + express + Mongoose²⁶ 
• Deuxième partie : Hébergement back-end et front-end sur Heroku²⁷ 

On s'est arrêté au transparent : ah cette fois-ci pas de transparents car on a sauté directement après avoir fini la partie initiale du back end (node/mongoose/mongodb) vers la partie sur l'hébergement sur Heroku.

La prochaine fois il faudra voir le support pour la pagination (back et front).

Séance 5 : Ajout de la pagination dans le back-end et dans le front-end

On reprend au transparent No 212 sur la pagination.

Vidéos du cours :

• Pagination première partie²⁸ 
• Pagination fin²⁹ 

On a fait les transparents 212 à 224

Evaluation du cours

• Le QCM en ligne à faire (vous avez droit aux documents), note de CC (30%)
   
• Modalités de rendu :
  • A RENDRE LE 31 Janvier 2022 : Gadi Mohamed Amine est celui qui m'enverra un google spreadsheet avec les noms des binomes, et les liens remplis
  • En binôme ou seul !
  • Ca doit être un repository github
  • Ca doit être hébergé sur heroku
  • Ca doit avoir une video de 1mn sur YouTube et un Readme

Vous devrez modifier le projet pour ajouter certaines des fonctionnalités suivantes (pas besoin de tout faire sauf si vous êtes super forts :-)

1. Une plus belle présentation (regarder la doc d'angular material, les composants, pour avoir un beau template), mettre en vert les assignments rendus, en rouge les autres, etc.
2. Faire une plus belle pagination/réglages du nombre d'assignments par page etc.

Dans la vue tableau, faites ce que vous pouvez :

1. On avait affiché le détail quand on cliquait sur un assignment dans la liste. Maintenant, on ne va plus faire comme cela, on va à la place afficher une icône dans une colonne supplémentaire à droite, et quand on clique dessus on a le détail. (ici aussi écouter (click) sur la cellule etc.)
    
2. On pouvait supprimer un assignment avec le bouton DELETE qui était dans le composant de détail. Maintenant, EN PLUS, on voudrait une colonne supplémentaire dans le tableau qui présente la liste, et si on clique dessus ça supprime directement (sans passer par le détail)
    
3. Un plus si vous arrivez à afficher un dialogue "êtes vous sur de vouloir supprimer cet assignment / cancel / ok". Aide: utiliser un Dialog aAngular Material ou équivalent (il y a peut-être un composant spécialisé)
    
4. Optionnel : utiliser le composant angular material Snack Bar pour afficher les messages qu'on affiche dans la console (les plus intéressants, comme "assignment ajouté", supprimé, modifié, etc.
    
5. Optionnel (pour les bons) : gérer la connexion login/password

• Vous ne ferez pas la partie back-end. Juste le client angular, avec un tableau de login/password codé en dur dans le service d'authentification.
• Pour l'interface graphique de connexion: coder un formulaire login/password en haut de l'écran, avec un bouton "deconnexion" qui n'apparait que si on est connecté, et un bouton connexion qui apparait que si on n'est pas connecté. FAIRE UN NOUVEAU COMPOSANT.
• On ne pourra editer et supprimer un assignment que si on est connecté en admin. Les boutons serons grisés pour ne pas proposer l'option si on n'a pas le droit. 
   
• SI VOUS VOULEZ RAJOUTER DES CHOSES, faites-le ! J'aime être surpris :-)