 |
Master 1 Miage 2018-2019
De $1
Introduction
Nous n'avons que trois cours et trois séances de TP cette année. C'est peu. Nous allons donc essayer de faire une introduction au technologies front-end et back end émergentes.
Séance 1: Web Services RESTFUL et single page webapps
Supports de cours
Live coding: back end RESTFUL et clients légers.
Exemples fait en cours (liste de restaurants, avec ajout et suppression):
- 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
- 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
- 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
TP 1 : Exercices avec VueJS, Firebase et WebServices RESTFUL
Partie 1 : Faire fonctionner l'exemple VueJS vu en classe, mais avec des fichiers et une table HTML
Ceci est le dernier exemple vu en classe dans JsBin: https://jsbin.com/jiqowib/edit?html,js,output
Ici vous trouverez le fichier exo1_vueJS_table.zip qui contient le même exemple mais fonctionnant avec des fichiers. Dezippez-le et utilisez un serveur Web pour ouvrir le fichier index.html. Je vous suggère d'utiliser un serveur ultra léger comme Web Server For Chrome (extension pour Google Chrome)
Travail à faire :
- Générer la liste des restaurants non pas dans une liste mais dans un tableau à deux colonnes.
- Utiliser quelques règles CSS pour que le tableau soit plus joli
- Afficher dans le H1 le nombre de restaurants. Ce nombre devra être mis à jour automatiquement lorsqu'on ajoute ou enlève des restaurants à la liste
- Utiliser la syntaxe v-bind:style="{proprieteCSS:valeur}" pour changer le style des restaurants dynamiquement. La valeur peut être retournée par une fonction ou une expression comme par exemple: v-bind:style="{color:getColor(index)}". Essayez donc d'afficher de cette manière les lignes paires d'une certaine couleur, les lignes impaires d'une autre couleur.
- Idem, mais avec une classe CSS. Vous créerez la classe CSS "bordureRouge" dans le fichier css/styles.css, et vous n'ajoutrez cette classe CSS qu'à la 4ème ligne du tableau (qui s'affichera donc encadrée en rouge). Lisez donc la page de documentation suivante : https://vuejs.org/v2/guide/class-and-style.html
CORRECTION FAITE EN CLASSE (ne pas regarder avant d'avoir fini):
Partie 2 : utilisation d'une base de données synchronisée dans le cloud (FireBase)
ETAPE 1 : on va créer une base sur FireBase
- Allez sur https://firebase.google.com/
- Cliquez sur "accèder à la console" ou "Get Started" selon la langue...
- Cliquez sur "+" pour ajouter un projet, appelez-le "M1MiageRestaurants" par exemple. Dans les fenêtres de dioaglogue ne cochez que la dernière case dans la première fenêtre, aucune dans la seconde.
- Cliquez à gauche sur "database" et créer une "realtime database".
- Choisissez le mode "test" sans authentification.
- Cliquez sur "ignorer" pour virer le warning.
- Cliquez à gauche sur l'icône à droite de "Project Overview", et au milieu de la page sur "Ajouter Firebase à votre application Web", une fenêtre s'ouvre avec des bouts de JS. Voir cette image
- Gardez cet onglet ouvert, vous allez devoir coller la configuration à votre application.
ETAPE 2 : ajouter le support pour FireBase à votre application
Si vous aviez fait l'exercice 1 avec jsBin, voici ici une version avec des fichiers, que je vous conseille de récupérer: exo1_vueJS_table_corrige.zip
On va donc utiliser FireBase mais aussi une librairie spéciale pour utiliser FireBase avec VueJS: vue-fire (documentation sur https://github.com/vuejs/vuefire).
Pour cela vous allez ajouter ces lignes à votre page HTML (dans le <head>...</head>, avant votre script à vous (script.js) :
Mettez-les AVANT l'inclusion de votre fichier script.js !!! Ce dernier utilise des variables définies dans ces deux fichiers.
Ensuite, dans le fichier script.js, vous allez ajouter ces lignes (configuration de firebase) : pensez à mettre entre parenthèse une copie de la valeur de la BD que vous aurez créée :
window.onload = init;
// FIREBASE INIT
var firebaseApp = firebase.initializeApp(
// ICI COPIER LA VALEUR DE LA VARIABLE CONFIG DE FIREBASE (A PRENDRE SUR LE SITE DE VOTRE BD)
);
var db = firebaseApp.database();
var restaurantsRef = db.ref('restaurants');
Et enfin, voici le nouveau code de la vue :
function init() {
new Vue({
el: "#app",
data: {
nom: "",
cuisine:""
},
firebase: {
restaurants: restaurantsRef
},
methods: {
supprimerRestaurant: function (r) {
//this.restaurants.splice(index, 1);
// each elem of the array has a .key property generated by vue-fire
restaurantsRef.child(r['.key']).remove();
},
ajouterRestaurant: function () {
let nouveauRestaurant = {
nom:this.nom,
cuisine:this.cuisine,
id:_.uniqueId("restaurant_")
}
restaurantsRef.push(nouveauRestaurant);
// on remet à zéro les champs
this.nom = "";
this.cuisine = "";
}
}
});
Notez l'apparition d'une propriété "firebase" dans la l'objet passé en paramètre à la Vue. On travaillera dans le template HTML avec la propriété/modèle "restaurants" et dans le code JS sur la variable restaurantsRef qui correspond à la BD distance. Voir documentation de vue-fire pour plus de détails : https://github.com/vuejs/vuefire
ETAPE 3 : testez cette version en ouvrant :
- Dans un onglet, la page sur le site de FireBase où vous voyez votre BD,
- Dans un autre onglet votre application
- Dans un autre onglet, et même dans un autre navigateur, encore une fois votre application.
- Ajoutez / supprimez des restaurants, les vues doivent se mettre à jour en synchro.
- Utilisez l'interface FireBase pour modifier des valeurs -> les vues doivent se mettre à jour.
Partie 3 : installation de NodeJS et MongoDB
ETAPE 1 : installation de NodeJS
Allez sur le site https://nodejs.org et installez la version "recommended for most users".
Si tout se passe bien, après l'installation, ouvrez une fenêtre de terminal et tapez la commande "node -v". Ca doit afficher la version de nodeJS que vous venez d'installer.
ETAPE 2 : installer MongoDB sur votre machine
Suivez les installations propres à votre système d'exploitation situées sur cette page du site officiel. Ne choisissez pas l'installation manuelle.
Une fois installé lancez la commande "mongod" en ligne de commande. Si le daemon mongoDB ne se lance pas, regardez les erreurs.
Sur mon Mac j'ai fait:
brew updatebrew install mongodbmkdir -p /data/dbchmod 777 /data/db (pour autoriser un user lambda à écrire dedans)mongod (pour exécuter MongoDB)
ETAPE 3 : - Créer et peupler une collection par défaut (avec un dataset issu du tutorial MongoDB officiel)
- Récupérez donc ce fichier : primer-dataset.json. Vous allez devoir récupérer le fichier primer-dataset.json (assez gros, attention, ne pas faire copier/coller), et exécuter la commande suivante, qui créer une bd "test" et ajoute dedans la collection "restaurants" :
ETAPE 4 : Installer un outil d'administration sympa
Je vous recommande fortement MongoChef, un produit commercial mais gratuit pour utilisation non commerciale. Le télécharger sur: https://studio3t.com/
ETAPE 5 : Ouvrir 3T STudio et voir la collection que l'on vient d'importer
- S'assurer que MongoDB tourne (mongod doit être lancé, ou bien vous devez avoir installé MongoDB en service)
- Lancer l'application 3T Studio, connectez-vous sur MongoDB. Les valeurs par défaut doivent être Ok, normalement.
- Ouvrir la collection "restaurants" dans la base "test"
Quelques screenshots:
ETAPE 6: test de WebServices RESTful sur les restaurants
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 :
- npm install
- node serverCrudWithMongo.js
- 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.
- Regardez le code de serverCrudWithMongo.js en particulier la définition des "URIs" des WebServices (lignes app.get, app.post, app.delete, app.put)
ETAPE 7: branchement de votre application sur ces Web Services
TRAVAIL A FAIRE POUR LA SEMAINE PROCHAINE
Je ferai passer quelques personnes au tableau pour répondre à quelques questions...
- Terminer l'installation de nodeJS, MongoDB, faire tourner les WebServices (étape 6), regarder le code source même si vous ne comprenez pas tout.
- Idem, même si vous ne comprenez pas tout, 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 ! :-)
- Lisez ou du moins parcourez ces lectures:
Séance 2: intro à NodeJS / Express / MongoDB / compléments VueJS
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 :
- Remettre en route la fin du TP1
- S'assurer que Mongo est bien installé (lancez la commande "
mongod" dans un terminal) - Que nodeJS est bien installé (lancez la commande "
node -v" dans un terminal) - Que vous avez bien les données des restaurants dans mongoDB (lancez l'outil d'administration)
-
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 :
npm installnode serverCrudWithMongo.js- 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. - Regardez le code de
serverCrudWithMongo.js en particulier la définition des "URIs" des WebServices (lignes app.get, app.post, app.delete, app.put) -
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.
- 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
- 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.
- 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.
- On veut afficher dans le H1 le nombre de restaurants correspondant au count de la réponse.
- Ajoutez deux boutons "Précédent" et "Suivant" sous la table, qui vont permettre de faire la pagination.
- 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.
- 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.
- 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.
- 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.
- 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.
Correction de ce qui a été fait en classe pendant le TP
A RENDRE (C'EST NOTE!) POUR LA SEANCE 3
CHOIX 1 : pour ceux qui ont déjà fait du JS et qui m'ont eu en cours l'an dernier
Vous allez devoir terminer le TP précédent :
- Proposer une application VueJS qui permet d'insérer, supprimer, modifier et rechercher des restaurants, en utilisant les bonnes pratiques REST (toutes les requêtes AJAX devront être réalisées à l'aide de l'API fetch, avec des GET/PUT/POST/DELETE)
- Vous implémenterez la pagination (page précédente / suivante) mais aussi, première et dernière page. Vous veillerez à ce qu'on ne puisse pas aller au-delà de la dernière page ou avant la première.
- La recherche sera incrémentale, sur le nom. Un plus pour ceux qui arrivent à utiliser la fonction _.debounce de lodash pour ne lancer une requête que lorsqu'on a arrêter de taper des caractères pendant plus de 300ms.
- Bonus pour ceux qui vont regarder le site https://risingstars.js.org et réussir à utiliser une bibliothèque de composants graphiques pour VueJS (par ex: Vue Material, mais les autres sont très bien aussi).
Modalités de rendu :
- A rendre via github, à faire en binome. Vous m'envoyez par mail le lien github. Le sujet du mail sera [TP M1 MIAGE] nom1-nom2
- Vous ne me rendez pas le code serveur sauf si vous l'avez modifié.
CHOIX 2 : pour les débutants en JS (mais si vous vous sentez, le choix 1 représente sans doute moins de travail)
- Suivre le module 5 du MOOC "JavaScript Introduction", et faire EN PARTIE (ce que vous pouvez) le projet proposé à la fin de la section 5.5. Ce n'est pas difficile. Vous pouvez éventuellement sauter des parties du 5.2 qui est plus une référence qu'autre chose.
- Répondre au quizz du chapitre 5.
Séance 3 : on va plus loins avec VueJS et on se familiarise avec un environnement "CLI" (Command Line Interface) comme vous aurez à utiliser si vous faites de l'Angular ou du React
Suite de l'étude de VueJS
Créer des composants avec VueJS
On va reprendre en live coding un des exemples simples fait lors des derniers TPs, et coder un composant <app-restaurant> custom, qui aura son propre template HTML, et ses propres attributs.
Exercice à faire: inspirez-vous de cet exemple pour gérer une liste de hobbies, mais avec les contraintes indiquées dans les commentaires HTML de ce squelette d'application: http://jsbin.com/guwetoy/edit?html,js,output
Correction (ne regarder qu'après avoir vraiment essayé, ou vu la correction en live conding) : http://jsbin.com/guwetoy/1/edit
Développer en mode "CLI" avec un environnement de build/testy
Cette fois-ci, pour terminer l'introduction à VueJS, le plus élégant/simple des trois gros frameworks "industriels" modernes (React, VueJS, Angular), nous allons regarder comment on peut développer avec "un environnement de développement", qu'on appelle "CLI" pour "Command Line Environment".
Les trois frameworks cités, mais aussi Polymer dont on vient de parler, proposent un environnement "CLI".
Travail à faire :
- Installer Vue-cli: exécuter "
npm install -g vue-cli", si vous êtes sous Linux ou Mac OS, il se peut que vous deviez faire "sudo npm install -g vue-cli" (essayez d'abord sans le sudo).
Idem, sous windows il se peut que vous deviez avoir ouvert le terminal DOS en mode "administrateur".
- Créez un répertoire pour le TP
- Allez dans ce répertoire en mode ligne de commande, depuis votre terminal
- On va maintenant créer une application VueJS avec le mode "webpack-simple" (cf la page de doc: https://github.com/vuejs/vue-cli), on peut en effet créer plusieurs types de projets avec vue-cli.
La commande à exécuter est "vue init webpack-simple nom_de_votre_app", je suggère quelques chose comme nom qui ressemble à "my-app-vue-cli1" par exemple. Vous exécuterez donc la commande : "vue init webpack-simple my-app-vue-cli1"
Vous devrez alors répondre à un petit questionnaire, en général vous faites "enter", répondez "non" si on vous demande d'utiliser "SAAS" (un pré-processeur CSS comme LESS).
Cela va créer un sous-répertoire my-app-vue-cli qui contiendra tout ce qu'il faut pour démarrer : - Une application exemple,
- un environnement de développement,
- Des fichiers de configuration pour webpack etc.
- Allez dans le répertoire de l'application et faites "
npm install" pour installer les dépendances (de l'environnement de développement, et du framework)
- Exécutez l'application de test avec "
npm run dev". Si jamais vous avez une page qui affiche "ERR EMPTY RESPONSE", il se peut que vous deviez changer le port du serveur de dev. Allez dans le fichier webpack.config.js et ajoutez une ligne "port:3000" par exemple, dans la config du devserver.
Voici ce que j'ai dans ma config:
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
port:3000
},
- Etudier le code du fichier main.js, index.html et App.vue
- Créer un composant User.vue qui affiche le nom d'un utilisateur
Ici un exemple de code: User.vue
- Créer un composant Info.vue qui affiche juste des infos supplémentaires sous forme de <p>, et qui soit LOCAL à User.vue (voir Live Coding)
- Ajouter dans App.vue un <p>Ceci est un test<p>. Que fait le CSS de User.vue ? Supprimer l'attribut "scoped" de la balise <style> de User.vue, que se passe-t-il ?
- En étant sûr d'être dans le répertoire du projet faites "
npm install -save vue-router" pour installer le module de routage de vueJS.
- Dans main.js ajoutez les lignes relatives au routeur (import, Vue.use, définition des routes, etc.) pour que le fichier ressemble à ceci :
import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; import User from './components/User.vue'; import Blog from './components/Blog.vue'; import Compte from './components/Compte.vue'; // Définition des routes Vue.use(VueRouter); const routes = [ {path:'/blog', component: Blog}, {path:'/compte', component: Compte}, {path:'/', component: User}, ] const router = new VueRouter({ routes: routes, mode:'history' }) // La ligne ci-dessous rend le composant User utilisable // partout, dans tous les fichiers .vue // C'est un GLOBAL COMPONENT Vue.component("app-user", User); new Vue({ el: '#app', router:router, render: h => h(App) }) - Remplacez le template de App.vue par le code suivant et testez:
<template>
<div id="app">
Hello {{msg}}
<div>
<router-link to="/">Home</router-link>
<router-link to="/blog">Blog</router-link>
<router-link to="/compte">compte</router-link>
</div>
<router-view></router-view>
<app-user></app-user>
<p>Ceci est un test</p>
</div>
</template>
Correction de l'exercice: VueJSExoCli.zip, faire "npm install" et "npm run dev" une fois dezippé.
Exercice à faire : refaire l'exemple du TP2 des restaurants avec Vue JS en mode CLI et en utilisant un composant <app-restaurant> pour afficher les restaurants.
Mini projet à rendre à la rentrée (pour le jeudi 10 Janvier), en binôme
OBLIGATOIRE : à rendre via github !!!
Sujet 1 (pour tous ceux que j'ai eu en cours en L3 Miage ou qui ont une expérience JavaScript)
Cette application reprendra le TP que vous avez rendu, mais avec des fonctionnalités supplémentaires et des contraintes supplémentaires.
Contraintes :
Fonctionnalités complémentaires obligatoires:
- Affichage détaillé d'un restaurant: lorsqu'on clique sur un restaurant, on pourra voir un affichage détaillé. Pour cela vous utiliserez les données non exploitées dans la BD.
- Vous créerez un composant custom <app-restau-detail>, et éventuellement des sous composants pour cet affichage.
- Suggestion : ajouter une photo prise au hasard du restaurant, pour faire joli.
- Pour les forts : utiliser l'adresse pour interroger le Reverse Geocoder de Google ou de Open Street Map et afficher la position du restaurant sur une carte.
- Dans l'affichage détaillé : ajouter un bouton ou un lien pour voir la carte/menu du restaurant. Vous trouverez un moyen de générer des menus/cartes aléatoirement avec des entrées / plats / desserts. Au minimum il faudra une description et un prix pour les entrées de la carte/menu.
- Affichage du menu d'un restaurant :
- Composant <app-menu-restaurant> et vous créerez un composant <app-entree-menu> pour afficher les entrées du menu.
- On pourra cliquer sur des entrées pour les commander, et également préciser le nombre, si on est plusieurs à manger
- Affichage du récapitulatif de la commande
- Composant custom <app-commande> qui affichera un récapitulatif, sorte de "notes" qu'on peut avoir comme justificatif. Le prix total sera calculé.
- On peut imaginer afficher ce composant en même temps qu'on passe la commande, il se mettra à jour en temps réel. Mais cette suggestion n'est pas obligatoire.
Voilà... vous me rendrez le projet avec un lien github QUI NE CONTIENT PAS LE REPERTOIRE NODE_MODULES, pour ne pas être trop gros.
Pour tester je ferais exactement ceci :
- git clone de votre repository
- Lire le Readme.md, indiquer si vous utilisez tel quel le serveur du TP ou un serveur custom dont vous livrerez le code. Si jamais vous avez généré des données dans une nouvelle base, dites moi également comment la récupérer et l'importer. NE PAS LA NOMMER RESTAURANTS SVP pour ne pas casser la mienne.
- Si serveur custom -> je ferai cd dans le répertoire de la partie serveur de votre projet (s'il y en a une), "npm install" et je lancerai avec node votre serveur.
- S'il n'y a pas de partie serveur je supposerai que c'est le serveur du TP qu'il faut lancer.
- J'irai dans la partie "client" de votre projet, et je ferais "npm install" puis "npm run dev" et je testerai votre projet.
VEILLEZ A REFAIRE VOUS MEME CES ETAPES POUR VERIFIER QUE VOTRE PROJET MARCHERA QUAND JE LE TESTERAI !
Sujet No 2 pour ceux qui débutaient en JavaScript
A partir de l'exemple de jeu fil rouge du MOOC JavaScript intro, développer un jeu avec des niveaux, scores, timer, bref, faire quelque chose d'amusant. Essayez de trouver un scénario original pour que le jeu soit prenant.
Essayez de mettre un menu principal par exemple, et un écran de game over.
Mêmes modalités de rendu que pour le projet 1. Via github.
|
Vous n'êtes pas connecté. Connexion 