Technologies Web M1 Miage 2019-2020

Supports de cours

• Vidéos : présentation générale (bouton vert sur site officiel https://vuejs.org/), cours vidéo pour débuter sur https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/
  • Avancé : tutorial sur VueX  (https://www.youtube.com/watch?v=5lVQgZzLMHc)
• Support vivant : les exemples faits en direct pendant le cours (voir plus loin)
• Transparents pour une introduction rapide et incomplète: https://posva.net/slides/vue/ et https://slides.com/akryum/vue-mixit-2018/fullscreen#/ et https://slides.maxpou.fr/vuejs-training
• Livre très complet : le livre ci-dessous est optionnel, il contient de nombreuses informations sur VueJS que nous n'allons pas avoir le temps de voir pendant le cours.
•  

Partie 1 Live coding: de JavaScript aux librairies aux frameworks

Exemples fait en cours (liste de restaurants, avec ajout et suppression):

1. En pur JavaScript avec utilisation des APIs du DOM (append, createElement, removeChild, innerHTML) et de la sector API (document.querySelector...) : https://jsbin.com/pemaric/edit?html,js,output
   • Voir le chapitre 2 de mon Mooc "JavaScript Introduction" (gratuit) : https://www.edx.org/course/javascript-introduction
      
2. Le même exemple mais en utilisant des librairies pour simplifier certaines parties (ici utilisation de lodash pour la génération d'ids, de jQuery pour simplifier l'utilisation du DOM): https://jsbin.com/tiyirud/1/edit?html,js,output
   • Site web de lodash : https://lodash.com/
   • Site web de jQuery : http://jquery.com/
      
3. Enfin, encore le même exemple mais avec l'utilisation du framework VueJS en mode déclaratif : https://jsbin.com/jiqowib/edit?html,js,output
   • Site web officiel de VueJS: https://vuejs.org/
     
      
4. Un autre exemple mais qui utilise cette fois-ci des "components" : https://jsbin.com/guwetoy/edit?html,js,output

TRAVAIL A FAIRE POUR LA SEMAINE PROCHAINE

Je ferai passer quelques personnes au tableau pour répondre à quelques questions...

1. Terminer l'installation de nodeJS, MongoDB.
    
2. allez voir les sites Web des librairies graphiques pour VueJS sur le site https://risingstars.js.org Plus tard vous aurez à jouer avec alors c'est le moment ! :-)
    

Supports de cours: 

• transparents de présentation de NodeJS
• transparents de présentation de Express 
• MongoDB for NodeJS developers 
• Présentation de la fetch API
• Les bonnes pratiques pour créer une API REST: https://blog.octo.com/designer-une-api-rest/

Live coding, exemples vus en cours

(ceux de la fin du TP 1 qu'on a pas fini, et qui fera partie du TP2)

• Utilisation de fetch
• Web Services REST avec Node + express + MongoDB
• Exemples VueJS avec composants customs

TP2 : on va finir la dernière partie du TP1 (afficher des restaurants à partir de Web Services REST implémentés en Node/express/MongoDB

Travail à faire :

1. Remettre en route la fin du TP1
   
   
   1. S'assurer que Mongo est bien installé (lancez la commande "mongod" dans un terminal)
   2. Que nodeJS est bien installé (lancez la commande "node -v" dans un terminal)
   3. Que vous avez bien les données des restaurants dans mongoDB (lancez l'outil d'administration)

2. Récuperez ce projet  serveurNodeMongoRESTful.zip (le code sera expliqué lors du cours No 2), qui implémente avec NodeJS des WebServices RESTful pour gérer les restaurants situés dans la base MongoDB que nous venons de voir.

   Une fois dezippé allez dans le répertoire obtenu et exécutez les commandes suivantes :
    

   1. npm install
   2. node serverCrudWithMongo.js
   3. Ouvrez http://localhost:8080 dans votre navigateur. Une page Web devrait apparaitre. Cliquez sur un des premiers liens, des données (des restaurants) devraient s'afficher au format JSON.
   4. Regardez le code de serverCrudWithMongo.js en particulier la définition des "URIs" des WebServices (lignes app.get, app.post, app.delete, app.put)

3. Créez ailleurs (pas dans le même répertoire), un dossier "client", dans lequel vous aurez une copie du premier exercice du TP1 (afficher les restaurants dans une table). Lancez ce projet avec l'extension "Web Server for Chrome" (c'est un serveur http séparé). Si vous avez perdu ce projet, ici une correction : Intranet de Michel Buffa/Master 1 Miage 2018-2019/exo1_vueJS_table_corrige.zip 

    

Nous avons donc maintenant un "serveur" qui fournit des WebServices, et qui expose de données situées dans MongoDB, via des WebServices, et un client séparé, qui pour le moment n'utilise pas encore ces Web Services. Nous allons donc "connecter" ce client VueJS avec les WebServices.

1. Ajoutez dans le code JavaScript de ce client une méthode mounted() qui sera appelée juste avant le rendu de la Vue. A l'intérieur, ajoutez un console.log("AVANT RENDU HTML"), et vérifiez dans la console de debug que le message apaprait bien. Ici la page de doc sur le cycle de vie : https://vuejs.org/v2/guide/instance....ifecycle-Hooks
    
2. Creez une méthode getRestaurantsFromServer() qui utilise la fetch API pour récupérer des restaurants sur http:8080/api/restaurants et qui les affiche. Profitez-en pour regarder à nouveau les paramètres possibles quand on fait un GET sur /api/restaurants.
    
3. Regardez à l'aide de la console de debug (onglet "réseau/network"), l'envoi de votre requête et sa réponse. Vous devez savoir debugger des requêtes AJAX.
    
4. On veut afficher dans le H1 le nombre de restaurants correspondant au count de la réponse.
    
5. Ajoutez deux boutons "Précédent" et "Suivant" sous la table, qui vont permettre de faire la pagination.
    
6. Ajoutez un slider HTML qui va entre les valeurs 5 et 100 par pas de 5 et qui va permettre de choisir le nombre de restaurants par page. Quand on bouge ce slider, on veut que la vue se rafraichisse en temps réel.
    
7. Ajoutez un champ de recherche dans votre interface. Quand on saisit une valeur à l'intérieur, ça fait une recherche par nom sur les restaurants. On veut que la vue se mettre à jour en temps réel.
    
8. Utilisation de requête DELETE. Ajoutez une colonne à votre tableau avec un bouton "DELETE", quand on clique dessus cela supprime le restaurant dans la base et rafraichit la vue.
    
9. Utilisation de requête POST pour insérer un nouveau restaurant. Regardez dans la page html qu'on reçoit du serveur (http://localhost:8080), à la fois dans le code HTML et dans le code JavaScript, 1) comment on fait un formulaire pour saisir un nouveau restaurant et 2) comment on envoie la requête de création en AJAX. Modifiez votre code en conséquence pour faire un ajout de restaurant par POST.
    
10. Idem, mais cette fois-ci en PUT pour modifier. On rajoutera une colonne au tableau avec un bouton "Modifier'. Quand on clique dessus, cela affiche et pré-remplit un formulaire de modification. Quand on soumet le formulaire, cela envoie une requête PUT au serveur, modifie les données et rafraichit l'affichage.