Accueil > Intranet Michel Buffa > M2 MBDS CASABLANCA 2021-2022 Technos Web

M2 MBDS CASABLANCA 2021-2022 Technos Web

De $1

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 29/11/2021 14-18h : https://www.youtube.com/watch?v=5b3STnGBta0 

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

Séance 2 : communication entre composants, services

VIDEO DU COURS 1/2 (17-19h) : https://youtu.be/xSUTgatD_gw

VIDEO DU COURS 2/2 (19-21h) : https://youtu.be/qLy-5QZOwPE

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

Séance 3 : service fin, router

ICI le repo github du projet : https://github.com/micbuffa/AngularM..._2021_2022.git

VIDEO DU COURS : https://youtu.be/mDf3YqVYjHw

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

Séance 4 :

Repo github Back-end : https://github.com/micbuffa/EMSI_Backend_2021_2022 

Forkez mes repos si vous voulez héberger sur VOTRE compte Heroku.

VIDEO du cours : https://youtu.be/PM83nxZ86pU

Séance 5 : pagination, présentation du projet...

VIDEO DU COURS : https://youtu.be/BaKc7gDkt30

Rien de spécial.

Ici pour les curieux un tutoriel qui montre comment faire l'authentification côté serveur avec JWT (Json Web Tokens) et avec angular.

Examen QCM sur le cours

  • A venir....

Mini projet à rendre :

Modalités de rendu

  • A faire en binôme ou seul
  • Date de rendu : lundi 13 Décembre
  • Comment le rendre :
    1. m'envoyer par mail votre repo github (back et front), INDIQUER CLAIREMENT LES NOMS DU BINOME
       
    2. Le repo github doit avoir un README qui indique clairement vos contributions (en gros, ce que vous avez fait en plus par rapport à la correction que je vous ai donnée pendant le cours)
       
    3. des points en plus si vous m'envoyez les deux URLs sur heroku pour que je teste directement sans avoir besoin de builder chez moi (je regarderai le code).

Travail à faire

  1. Rendre la présentation plus jolie, notamment je voudrais les assignments dans une table angular material, avec si possible l'élément paginator pour faire la pagination (il y a un exemple dans la page de documentation des tables.
    • Optionnel : table de hauteur fixe, qui scrolle les éléments, mais qui laisse le header fixe.... (chercher dans la doc ou sur google "sticky row")
    • Optionnel : colonnes triables (juste sur la vue, on n'envoie pas de requêtes etc.)
    • Optionnel : mettre en surlignage la ligne sur laquelle on déplace la souris (y'a un exemple dans la doc)
       
  2. 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 aussin écouter (click) sur la cellule etc.)
     
  3. 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)
     
  4. 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é)
     
  5. 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.
     
  6. 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 :-)
Mots clés:
FichierTailleDateAttaché par 
 assignment-app.zip
Aucune description
469.93 Ko17:02, 29 Nov 2021MichelBuffaActions
 assignment-appService.zip
Aucune description
475.11 Ko20:02, 30 Nov 2021MichelBuffaActions
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.