Introduction
Dans ce cours nous continuerons l'exploration des technologies front-end, back-end avec nodeJS, BDs NoSQL, hébergement dans le cloud etc.
Séance 1 : introduction aux Web Components (standards du W3C)
TP1 : écriture d'un générateur de logos
Vous le savez, on peut faire de très jolies choses pour transformer un texte (une chaîne de caractères) en logo coloré, texturé, avec des bordures, des ombres, des animations etc. Uniquement avec HTML et CSS ont peut faire des choses assez impressionnantes. Mais si on met JavaScript et si on utilise par exemple le canvas HTML5 alors on peut faire des animations et des effets encore plus complexes.
L'idée de ce TP est de commencer à voir comment écrire un composant <app-logo> qui accepte un certain nombres d'attributs, par exemple :
- taille, couleur, couleur bordure, texture, transparence texture, ombre, animation (="rebond" ou "rotationZ", etc.)
- Et affiche aussi (plus tard optionnellement) quelques champs <input> pour pouvoir aussi modifier cela une fois le logo affiché.
Dans un premier temps on génèrera le logo en utilisant depuis la classe JS du WebComponent l'attribut style de l'élément HTML utilisé dans le template (un <span> ou un <div> par exemple)... dans un second temps vous essaierez d'animer le logo (toujours via CSS)
Enfin, et ce sera à rendre pour la semaine prochaine, vous ajouterez une option pour un logo sous forme de canvas HTML5 et proposerez des animations plus évolués avec des effets plus rigolos.
API JavaScript de votre composant :
- Alors, avez-vous bien conçu votre WebComponent ? Avez-vous pensé à proposer une API pour que lui-aussi puisse être controlé de l'extérieur par du code JavaScript (par exemple, par quelqu'un qui l'aurait inclu dans sa propre page et qui voudrait démarrer l'animation en cliquant sur un bouton et en appelant logo.startAnim(20); (20 étant par exemple une vitesse de rotation ou d'animation)... Vous pourrez vous aider par exemple de ce site qui propose des animations CSS .
- Avez-vous utilisé le MVC (le fait que certains attributs puissent être "surveillés"), si on change par programme la couleur, il faudrait que l'
<input type="color"> se mette à jour, si on change la vitesse, que le <input type="range"> se mette à jour etc.
Voilà, cela fait pas mal de choses à faire.... c'est un bon départ avant d'attaquer les frameworks plus connus...
Séance 2 : on continue l'étude des WebComponents
TP2 - On continue le TP1 mais vous commencez à faire votre propre générateur de logo, ajoutez plein d'options :-)
Ici une version du TP1 faite en live coding, un peu plus complète (avec attributs et background image, utilisation de getBaseURL() etc :
A FAIRE POUR LA SEMAINE PROCHAINE :
- Finir le TP qui est à rendre et qui donnera la note de CC de ce module (m'envoyer par mail votre repository github)
- Vous assurer que vous avez bien une version récente de NodeJS installée, et qu'elle est reconnue en ligne de commande (par ex, si vous exécutez "
node -v" en ça doit répondre)
- Installer depuis un terminal en mode administrateur "Angular CLI" en exécutant la commande :
npm install -g @angular/cli
- Si vous avez le temps, installez aussi un outil d'administration pour MongoDB comme par exemple NoSQLBooster, ou MongoDBCompass (ou autre)
Séance 3 : introduction à Angular
Zip du programme fait en live coding pendant le cours (dezipper, faire "npm i" dans le dossier, puis ng serve)
Séance 4 : on continue...
On utilise le même support de cours à partir du transparent 52 (là où on s'était arrêté lors de la séance 1)
On est allé jusqu'au transparent 86....
Zip du programme fait en live coding. Faire "npm i" et "ng serve" pour exécuter.
Séance 7 et 8 en vidéo : utilisation de Web Services, hébergement sur Heroku, pagination
La vidéo suivante (utilisée avec un cours en ligne du MBDS Maroc) explique les choses suivantes, en suivant à la lettre les transparents du cours (à partir du transparent No 180)
- Vidéo 1 : https://www.youtube.com/watch?v=PM83nxZ86pU
- Création d'une base de données MongoDB dans le cloud,
- Explication d'un projet simple d'API (Web Services permettant le CRUD sur la base) à l'aide de NodeJS et Mongoose,
- Implémentation de la recherche, modification, suppression et insertion de nouveaux assignments dans le client Angular: modification du service de gestion des assignments pour utiliser le module HttpClient d'angular pour envoyer des requêtes AjaX vers les web services du back-end,
- Hébergement sur Heroku du back-end et du front-end.
- Vidéo 2 : https://youtu.be/BaKc7gDkt30
- Implémentation de la pagination à l'aide d'un plugin pour Mongoose,
- Utilisation de datatable,
- Présentation de ce qu'on attend du mini projet...
Vous pouvez retrouver le programme fait en cours (tel qu'il est à la fin de ces deux vidéos) sur ces repositories github :
Pour exécuter le projet sur votre machine, je conseille de cloner le repository, d'en faire une copie à vous quelque part, de faire cd dans ce dossier, puis d'ouvrir Visual Studio Code. Une fois ceci fait, dans deux terminaux séparés de Visual Studio Code (pas powershell, privilégiez gitbash si vous êtes sous windows), suivez la procédure suivante :
- Back-End : aller dans "api" et faire "npm i" puis "node server.js". Vous pouvez tester que cela fonctionne en ouvrant l'URL affiché dans le terminal.
- Front-end : faire "npm i" puis "ng serve". Ouvrez dans votre navigateur l'URL indiqué.
Mini projet (à faire seul ou en binôme)
Modalités de rendu
- A faire en binôme ou seul
- Date de rendu : Le XXX
- Comment le rendre :
- m'envoyer par mail votre repo github (back et front), INDIQUER CLAIREMENT LES NOMS DU BINOME
- 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)
- 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).
- Des points en plus si vous faites une vidéo YT qui présente vos contributions au projet (max 5mns)
Travail à faire
- 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)
- 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 aussi, écouter (click) sur la cellule etc.)
- 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)
- Un plus si vous arrivez à afficher un dialogue "êtes vous sur de vouloir supprimer cet assignment / cancel / ok". Aide: utiliser un Dialog Angular Material ou équivalent (il y a peut-être un composant spécialisé)
- 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.
- Optionnel (pour les bons) : gérer la connexion login/password
- 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.
- 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.
- Optionnel++ (pour les très bons) : utiliser une authentification à l'aide de JWT (Json Web Tokens), attention, cela oblige à modifier le back-end. Suivre un des nombreux tutos disponibles sur YouTube (chercher "NodeJS JWT")
- 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 :-)
Vous n'êtes pas connecté. Connexion 