M2 Miage MBDS Casablanca 2022-2023 - Introduction à Angular

Introduction

Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.

Séance 1 : découverte d'Angular, mise en place d'un projet, premiers composants

Cette partie du cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB, et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.

• Repository github du projet que je ferai en live coding : 
  • Groupe 1 : https://github.com/micbuffa/AngularFrontMBDSCasa2023.git⁷ 
  • Groupe 2 : https://github.com/micbuffa/angularMBDSCasa2023G2.git⁸
     
  • Pour l'exécuter : faire "git clone" puis cd dans le dossier créé, puis "npm install" puis "ng serve"
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances⁹.
  • Groupe 1 : nous sommes allés jusqu'au transparent 44 inclu lors de cette séance.
  • Groupe 2 : nous sommes allés jusqu'au transparent 69 inclu lors de cette séance.
      
• Best of des outils de dev web que j'utilise¹⁰. Y ajouter "github copilot¹¹" qui est gratuit pour les étudiants¹² (c'est un plugin pour visual studio code: complétion automatique intelligente utilisant un réseau de neurones).
• Best of des outils Mac pour le dev web¹³
   
• Pour lier un projet angular à un repository github, lire ce document¹⁴.
   
• Vidéos enregistrées en 2020 de cette séance de cours (j'avais fait à peu près la même chose, à part github...) : 
  • Vidéo 1¹⁵ 
  • Vidéo 2¹⁶

Séance 2 : formulaires, data binding etc.

• MOOC "JavaScript Introduction" (gratuit) : https://www.edx.org/course/javascript-introduction¹⁷
• CSS Flex tutoriel : https://css-tricks.com/snippets/css/a-guide-to-flexbox/¹⁸
  
   
• Support de cours angular, qu'on utilisera pendant plusieurs séances¹⁹.
   
• Groupe 1 : nous sommes allés jusqu'au transparent 103 inclu lors de cette séance.
• Groupe 2 : nous sommes allés jusqu'au transparent 103 inclu lors de cette séance.

Vidéos enregistrées en 2020 de cette séance de cours (j'avais fait à peu près la même chose, à part github...) : 

• Ce chapitre du cours est traitée dans la vidéo 2²⁰ qu'on avait commencé dans la première partie.

Séance 3 : utilisation de services, routeur  

• Support de cours angular, qu'on utilisera pendant plusieurs séances²¹.
  • Groupe 1 : nous sommes allés du transparent 103 jusqu'au transparent 177 inclu lors de cette séance.
  • Groupe 2 : nous sommes allés du transparent 103 jusqu'au transparent 170 inclu lors de cette séance.
     
• Vidéos enregistrées en 2020 de cette séance de cours (j'avais fait à peu près la même chose, à part github...) : 
  • Première partie²² : introduction au router d'Angular (suite fin vidéo séance 2)

Séance 4 : fin routeur, MongoDB dans le cloud, utilisation d'une API REST, module angular HTTPClient

• Projet GIT du back-end :
  • Groupe 1 : https://github.com/micbuffa/angular2023BackMBDSCasa.git²³ 
  • Groupe 2 : https://github.com/micbuffa/backendmbds2023g2.git²⁴
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances²⁵.
  • Groupe 1 : nous sommes allés du transparent 207 inclu lors de cette séance.
  • Groupe 2 : nous sommes allés du transparent 207  inclu lors de cette séance.
    
     
• Vidéos correspondant au router : 
  • Deuxème partie²⁶ router : restriction d'accès aux routes avec le routeur, authentification service et guard.
  •  
• Vidéos correspondant à la partie du cours sur MongoDB/WebServices et HttpClient :
  • Vidéo 1 : https://youtu.be/ivR5iX5HkUw?t=337²⁷ Création d'une base MongoDB sur mongodb.com, installation du back-end, explications, test des Web Services, début du cours sur le module HttpClient d'Angular pour requêter le back-end
  • Vidéo 2 : https://www.youtube.com/watch?v=MKlA3w0yBq0²⁸ (jusqu'à 1h:00)
     
• Module HttpClient : requêter les Web services²⁹ définis dans l'API REST du back-end (45 premières minutes dans la vidéo).

Séance 5 : peupler BD avec des milliers de données, pagination, utilisation de data tables etc. 

Rappel des projets git :

• Front-end
  • Groupe 1 : https://github.com/micbuffa/AngularFrontMBDSCasa2023.git³⁰ 
  • Groupe 2 : https://github.com/micbuffa/angularMBDSCasa2023G2.git³¹
• Back-end
  • Groupe 1 : https://github.com/micbuffa/angular2023BackMBDSCasa.git³² 
  • Groupe 2 : https://github.com/micbuffa/backendmbds2023g2.git³³

• Support de cours angular, qu'on utilisera pendant plusieurs séances³⁴.
  • Groupe 1 : nous sommes allés du transparent 207 inclu lors de cette séance.
  • Groupe 2 : nous sommes allés du transparent 207  inclu lors de cette séance.

Vidéos :

• Peupler la BD avec de nombreuses données³⁵.
• Pagination³⁶ et fin Pagination³⁷ 
   
• Autre vidéo : peupler la BD et pagination : explications détaillées³⁸ 
   
• Héberger le projet complet sur Heroku.com³⁹ (cloud service), attention, depuis cette année, vos projets ne seront disponibles en ligne que pendant un mois. N'héberger votre projet qu'au dernier moment avant de le rendre. On m'a recommandé une plateforme cloud similaire à heroku, qui s'appelle render.com, je suppose que la procédure d'hébergement doit être similaire. Si vous testez, merci de me le dire et écrire un petit README pour que je puisse m'en servir avec d'autres étudiants.

Non vu en cours, mais compléments intéressants :

• Traiter les erreurs réseau, opérateurs RxJs⁴⁰ (non vus en cours, mais intéressant à étudier, c'est assez court) (de 0:45:00 à )
• Faire un scrolling infini : https://www.youtube.com/watch?v=S24402GlvtU⁴¹ (basé sur une forte adaptation de ce tutoriel⁴²)