M2 MIAGE INTENSE 2022-2023: Web Components

Introduction

Dans ce cours, on fera une introduction aux Web Components standards du W3C, et plus si affinités :-)

Séance 1: introduction aux Web Components

• Support de cours 
• Voir aussi le chapitre sur les Web Components et sur le multimedia avancé (Web Audio API) du MOOC "HTML5 Apps and Games".

Séance 2 : fin du TP1 qui sera à rendre pour la prochaine séance

• Regardez rapidement la partie "Web Audio" du MOOC "HTML5 Apps and Games" de Michel Buffa.
• Reprenez le TP1 et essayez d'utiliser Web Audio pour faire un visualiseur de fréquences, de waveform, de volume, un égaliseur de fréquence, etc.

Exemples vus en classe :

• Repository github du WebComponent fait en classe (avec canvas, graphe webaudio etc.) : https://github.com/micbuffa/WebComponentsIntense2022_2023.git
   
• Fait en live coding : https://codepen.io/w3devcampus/pen/GRdQrjx?editors=1111 
   
• Lecteurs audio très jolis en WebComponents (fait par des élèves de l'an dernier) : https://github.com/Dorian-Chapoulie/tp_webcomponents et https://github.com/AntoninLacomme/TPWebComponent 

Modalités de rendu :

• Date limite : Dimanche 16 minuit !
   
• A rendre sous forme de repository git, envoyé par mail ou autres...
   
• README qui explique ce que vous avez fait de personnel et ce que vous avez piqué à droite ou à gauche (ex: j'ai repris un bout de l'exemple de Dorian etc.). Vous vous engagez à ne pas me mentir ici... si vous mentez, vous vous exposez à mes représailles :-)
   
• Je préfère une contribution personnelle dans un résultat moyen à un truc 100% repris avec rien de personnel.

Séance 3 : 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 (qui sera approfondie au second semestre), 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 : 
  •  https://github.com/micbuffa/angularM2Intense2023 
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 54 inclu lors de cette séance.
   
• Best of des outils de dev web que j'utilise. Y ajouter "github copilot" qui est (je crois bien) gratuit pour les étudiants (plugin pour visual studio code: complétion automatique intelligente utilisant un réseau de neurones).
   
• 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 4 : data binding, passage de données entre composants

• Repository github du projet que je ferai en live coding : 
  •  https://github.com/micbuffa/angularM2Intense2023 
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés du transparent 55 jusqu'au transparent 103 inclu lors de cette séance.
   
• Vidéo enregistrée en 2020 de cette séance de cours (j'avais fait à peu près la même chose, à part github...) : https://youtu.be/4SxVqSEB184?t=777 

Séance 5 : utilisation de services, routeur

• Repository github du projet que je ferai en live coding : 
  •  https://github.com/micbuffa/angularM2Intense2023 
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés du transparent 103 jusqu'au transparent 150 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...) : voir Séance 6 j'ai mis les deux vidéos sur le router. Le cours correspond à la première et une partie de la seconde.

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

• Repository github du projet que je ferai en live coding : 
  •  https://github.com/micbuffa/angularM2Intense2023 
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés du transparent 150 jusqu'au transparent 196 inclu lors de cette séance.
  
  Vidéos correspondant au router : 
  • Première partie : introduction au router d'Angular
  • Deuxème partie : 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)

Séance 7 : requêter les Web Services, peupler la BD, pagination

Le cours en classe est allé du transparent 197 au transparent 226.

Vidéos :

1. Module HttpClient : requêter les Web services définis dans l'API REST du back-end (45 premières minutes dans la vidéo).
2. Traiter les erreurs réseau, opérateurs RxJs (non vus en cours, mais intéressant à étudier, c'est assez court) (de 0:45:00 à )
3. Peupler la BD avec de nombreuses données.
4. Pagination et fin Pagination 
5. Peupler la BD et pagination : explications détaillées 
6. 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.

On va du transparent 197 à 226 inclu.

Mini projet à rendre avant le 4/01/2022

• Page du mini projet