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.

Video du cours du XXX :

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

Evaluation du cours

• Le QCM en ligne à faire (vous avez droit aux documents), note de CC (30%)
• Vous devrez modifier le projet pour ajouter certaines des fonctionnalités suivantes (pas besoin de tout faire sauf si vous êtes super forts :-)

A ajouter au projet :

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. Gérer un login/password et pas juste le slider pour le login
3. Faire une plus belle pagination/réglages du nombre d'assignments par page etc.
4. Bref, je veux que chaque groupe fasse une, deux, trois, quatre modifications, les documente dans un petit Readme + fasse une vidéo de 1mn sur YouTube, qui explique (démo et code) ce que vous avez fait.