MBDS Madagascar 2020-2021

Introduction

Dans ce cours on va utiliser la "MEAN STACK" dans le cloud, c'est-à-dire MongoDB + Express + Angular + NodeJS. Ce sera l'occasion de voir les avantages et les inconvénients de cette solution, et comparer Angular + TypeScript à des solutions concurrentes.

Outils nécessaires

Pour ce cours vous aurez besoin des outils suivants :

• NodeJS et npm à jour (installer depuis Nodejs.org)
• Visual Studio Code ou équivalent (WebStorm par ex.)
• Une connexion internet.

Séance 1 (lundi 8h-12h): introduction aux WebComponents et aux front-ends modernes

• Transparents de présentation sur les WebComponents standards du W3C 
• Support de cours Google slides utilisés pendant le cours, valable pour toutes les séances sur Angular.

• Vidéo du cours 
   
• Fichier zip de l'exemple vu en cours. Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"

Séance 2 (lundi 13h-16h): communications père-fils et fils-père, début services

• Vidéo du cours
   
• Fichier zip de l'exemple vu en cours à mi-parcours. Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"
• Fichier zip de fin de séance. Idem.

Séance 3 (mardi 8h-12h): services et router angular

Support de cours :

• Mon cours sur les promesses JavaScript / TypeScript 
• Cours sur fetch/async/await 

• Vidéo du cours
  
   
• Fichier zip de l'exemple vu en cours avant exercice du DELETE dans le service. Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"
• Fichier zip de fin de séance. Idem.

Séance 4 (mardi 13h-16h):

• Vidéo du cours 
   
• Fichier zip de l'exemple vu en cours à mi-parcours (avec authentification et auth guard). Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"
   
• Meilleurs outils pour le développeur Web 
• Bonnes pratiques pour écrire des Web Services REST/RESTful 

Séance 5 (mercredi 8h-12h):

• Vidéo 1 du cours
• Vidéo 2 du cours
   
• Fichier zip de l'exemple vu en cours avec http client rxjs. Le dezipper, faire cd dans le dossier, puis "npm install" et "ng serve"
   
• Zip de la version avec pagination dans le back-end + service modifié dans le front et composant qui affiche la liste modifié aussi. Il ne manque que la GUI pour faire la pagination. Faire npm install, puis node server.js dans le dossier api, et faire "npm install" et "ng serve" dans le dossier client assignment-app.
  
   
• Lien vers le plugin de pagination mongoose utilisé : https://www.npmjs.com/package/mongoo...te-paginate-v2

Séance 6 (mercredi 13h-16h): pagination, ajouter page= limit= dans les URLs, heroku

• Vidéo du cours
  
   
• Mes repositories github pour le front et le back, attention, le front utilise l'URI du back dans heroku chez moi (modifiez si vous voulez tester en local, ou avec votre back end sur heroku -> dans le service de gestion des assignements) :
  
  
  • https://github.com/micbuffa/MBDS_Mad...1_frontend.git
     
  • https://github.com/micbuffa/MBDS_Mad...21_backend.git

Séance 7 (jeudi 13h-16h): scrolling inifini et operateurs rxJS

• Tutoriel (en anglais) sur comment ajouter un scrolling infini et détecter qu'on arrive à la fin (pour charger de noveaux assignments)
   
• Vidéo 1 du cours