Master INTENSE Maroc 2020-2021

Introduction

Dans ce cours nous verrons comment développer une application avec Angular + WebServices + MongoDB dans le cloud + hébergement dans le cloud + authentification etc.

Première séance (mardi 9h-12h) "intro à Angular"

• Vidéo du cours 
• Fichier zip de l'exemple fait en live coding (faire unzip, aller dans le dossier créé, puis "npm install", puis "ng serve"

Deuxième séance (mardi 14h-16h) "communication entre composants"

• Vidéo du cours 
• Fichier zip de l'exemple fait en live coding (faire unzip, aller dans le dossier créé, puis "npm install", puis "ng serve"

Troisième séance (mercredi matin 9h-12h) : services angular

• Vidéo du cours 
• Fichier zip de l'exemple fait en live coding (faire unzip, aller dans le dossier créé, puis "npm install", puis "ng serve"
• JsBin exemple fetch avec promesses et async/await 

Quatrième séance (mercredi 14h-16h): angular router

• Vidéo du cours 
• Fichier zip de l'exemple fait en live coding (faire unzip, aller dans le dossier créé, puis "npm install", puis "ng serve"

Cinquième séance (jeudi AM 14h-18h) : MongoDB + NodeJS + cloud + generer données de test

• Vidéo du cours 
• Fichier zip de l'exemple fait en live coding (faire unzip, aller dans le dossier créé, puis "npm install", puis "ng serve"
   
• Ici mon cours sur les promesses JavaScript 
• Et ici sur fetch/async/await 
  
   
• Selection d'outils de tueurs pour le dev Web 

Sixième séance (vendredi 9h-12h)

• Vidéo du cours
• Fichier zip de l'exemple fait en live coding (faire unzip, aller dans le dossier créé, puis "npm install", puis "ng serve". BACK et FRONT pour Heroku. ON A  AUSSI MIS EN PLACE LA PAGINATION côté BACK et avec des boutons de navigation côté front.
   
• TP sur l'ajout d'un scrolling infini à l'application (et aussi : comment peupler la base de données avec des données générées automatique)

Septième séance (vendredi matin 14h-18h) : implémentation d'un scrolling infini

• Vidéo du cours
• Fichier zip de l'exemple fait en live coding (faire unzip, aller dans le dossier créé, puis "npm install", puis "ng serve"

Sujet du mini projet (vous ferez ce que vous pouvez, mais au moins une ou deux choses !)

Sujet du projet : améliorer le TP sur les Assignments

Contraintes :

• A faire an Angular.

• A faire en binôme.
   
• A rendre sur github, gros bonus si hébergé sur Heroku.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.
   
• Facultatif ( 1-2mns maxi) Vidéo pas trop longue 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 XXX 2021, ingénociable. Je mets zéro après cette date.
  
  
  
• 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é"), ou de l'internet (mais soyez intelligent, prenez des trucs bien, qui respectent les bonnes pratiques, pas un truc pourri d'il y a 10 ans)

Détail du travail attendu

Vous apporterez certaines de ces améliorations au TP fait en classe. Celles en vert sont plus simples qie celles en rouge. Celles en noir = difficile.

• Ajouter une gestion de login/password
  • Coder en dur dans le service d'authentification un tableau de logins/passwords valides, ajouter un bandeau à l'application avec un formulaire de connexion. Vous gèrerez la connexion et la deconnexion.
  • Ajouter le cas de l'administrateur (pas que loggedIn, mais aussi loggedInAsAdmin, par exemple), et seul l'adim pourra editer ou supprimer des assignments. Seule une personne loggée pourra accèder à la liste et au détails.
     
  • PAS OBLIGATOIRE : Cas simple : en créant une collection Utilisateurs dans MongoDB, et en validant que le user/password est correct.
  • DIFFICILE MAIS UTILE SI VOUS UTILISEZ ANGULAR EN STAGE par ex. Cas plus évolué : regardez comment utiliser l'authentification à l'aide de Json Web Tokens (JWT), en suivant par exemple ce tutoriel. 
     
• Ajouter de nouvelles propriétés au modèle des Assignments:
  • Auteur (nom 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)
     
• Afficher les Assignments dans deux onglets séparés selon qu'ils ont été rendus ou pas encore rendus
  • Lorsqu'on met une note à un Assignment et il devient rendu et apparaitra dans l'onglet "Rendu"
     
• Utiliser un Formulaire de type Stepper (formulaire en plusieurs étapes) pour l'ajout d'Assignments (éventuellement pour la modification)
   
• Rendre le tout plus joli
   
• Bonus : hébergement sur Heroku.com
  
  
• Le sujet est ouvert, vous pouvez ajouter ce qui vous semble amusant/pertinent:
  • drag and drop entre la liste des Assignments non rendus et rendus, qui déclenchera la notation,
  • Ajout de messages de notification (SnackBar Material)
  • LONG A FAIRE : Collection d'élèves et de profs pour faciliter l'association devoir/élève et matières/profs
  • Etc.