M2 INTENSE Rabat 2021-2022 Technos Web

De $1

Version de 02:51, 20 Aoû 2022

cette version.

Revenir à liste des archives.

Voir la version actuelle

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

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

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

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

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

Vidéos du cours  :

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%)
     
  • 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 :-)