 |
Technologies Web M1 Miage 2019-2020
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: Single page webapps avec VueJS, bases de données synchronisées dans le cloud
Supports de cours
Partie 1 Live coding: de JavaScript aux librairies aux frameworks
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
- Un autre exemple mais qui utilise cette fois-ci des "components" : https://jsbin.com/guwetoy/edit?html,js,output
Partie 2 : découverte de VueJS en mode CLI (command line interface)
ETAPE 1 : installation de NodeJS (nécessaire pour développement CLI)
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.
Vérifiez que vous avez bien:
- Une version de node >= 10.16 (commande à taper : "node -v)
- Une version de npm >= 6.11 (commande à taper : "npm -v")
Etape 2 : Création d'une application simple en mode CLI, utilisant la base de données synchronisée Google Firestore
Travail à faire :
- suivre ce tutorial , choisissez npm comme outil d'installation des modules lorsque vous aurez le choix yarn/npm
- Essayez de modifier ce tutorial pour faire la création et la modification non pas "d'expenses" mais d'une liste de restaurants/cuisines, on pourra rajouter le prix moyen du menu aux propriétés des restaurants. Je vous conseille de travailler sur une nouvelle collection "restaurants" dans FireStore.
Pour ceux qui vont vite ou qui ont déjà installé MongoDB :
- Suivre ce tuto (chat multi room avec Google Firebase - moins puissante que Firecloud)
- Une fois que l'appli fonctionne, essayez de comprendre dans le détail comment elle fonctionne.
ETAPE 3 (à terminer pour la semaine prochaine) : 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:
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.
- 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 ! :-)
Séance 2: intro à NodeJS / Express / MongoDB / compléments VueJS Live coding, exemples vus en cours ... 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 client vueJS des restaurants (afficher les restaurants dans une table). Lancez ce projet avec l'extension "Web Server for Chrome" (c'est un serveur http séparé) ou la commande npm http-server ou serve (npm install -g http-server oui npm install -g serve). 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.
CORRECTION FAITE EN CLASSE DU CLIENT DU GROUPE1 : Intranet de Michel Buffa/Technologies Web M1 Miage 2019-2020/groupe1.zip
- 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.
TRAVAIL A FAIRE pour la prochaine séance(optionnel) : essayer d'afficher une belle table avec la librairie vue-material. Regarder dans le Getting Started comment utiliser vue-material à partir d'un CDN.
OPTIONNEL de l'optionnel : refaire votre projet en mode compilé, avec des fichiers .vue. Voir comment on avait créé les projets lors du TP1 (expenses et chat). TP3 et Mini Projet - un gestionnaire de menus / cartes pour des restaurants
ICI PROJET SQUELETTE QUI PEUT VOUS AIDER :
- Affichage des restaurants et lien vers page de détail en passant l'id du restaurant
- Montre comment utiliser le router
- Télécharger cette archive, puis
npm install, npm run serve. Vous devez avoir le serveur node qui tourne sur le port 8080 (node serverCrudWithMongo.js) et mongod lancé. - DOC SUR LE ROUTER ici : https://router.vuejs.org/ et vidéo de tutoriel ici : https://www.youtube.com/watch?v=nnVVOe7qdeQ
AIDE pour faire marcher les console.log dans votre code: quand vous créez un projet avec "vue create miniprojet", cela va générer le code pour un projet de départ. Editez le fichier package.json et modifiez la ligne "rules:{}" pour la remplacer par
"rules": {
Cela vous permettra d'utiliser des console.log dans votre code.... Si vous être partis du projet squelette, pas la peine.
Autre chose: les iterateurs avec plusieurs variables doivent mettre ces variables entre parenthèses comme ici:
v-for="(r,index) in restaurants"
au lieu de : v-for="r,index in restaurants"
Vous allez développer une appplication VueJS et à l'aide de la base de données MongoDB.
Objectifs : Refaire le TP en cours sur les restaurant en mode compilé, en utilisant au maximum les données non encore exploitées dans la BD, et en utilisant des composants customs pour voir le détail des restaurants, et une librairie de composants graphiques (vue material, vuetify, vue elements, vue-bootstrap etc. au choix.)
Contraintes: vous devrez développer une application VueJS en mode CLI ! Avec des fichiers .vue et un environnement de développement comme celui des premiers TPs, et en utilisant le code serveur et la base MongoDB du dernier TP (vous avez le droit de modifier le code si besoin).
Details :
- Regardez le modèle de données, vous verrez que les restaurants ont une adresse physique et même une longitude et une latitude, une description du quartier (borough), et des notes données par les évaluations des clients (grades). On va devoir les afficher pour chaque restaurant.
- Vous devrez avoir toutes les fonctionnalités du dernier TP (affichage de la liste des restaurants, insertion, suppression, modification du nom et de la cuisine, recherche par nom, pagination...) mais avec des composants graphiques jolis.
- Vous créerez des composant custom <restaurants-liste>, <restaurant-details>, <restaurant-map>, <restaurant-evaluation> pour afficher ces données...
- Affichage aussi d'une photo aléatoire d'un restaurant,
- Affichage pour chaque restaurant d'une carte des plats, même si ces données ne sont pas dans la BD. Vous pourrez au choix générer ces données à la volée, ou bien les ajouter à l'avance dans la BD, à vous de voir...
- Un restaurant a plusieurs menus
- Un menu a un nom (ex: menu simple, menu gastronomique....), un prix, et propose un choix restreint de hors d'oeuvres, de plats et de desserts
- Un restaurant a une carte (un ensemble de hors d'oeuvres, de plats et de desserts) et on pourra choisir librement de manger ce que l'on veut.
- Les plats sont décrits comme suit :
- Un nom: exemple "avocats mayonnaise"', "tomates en salade" pour un hors d'oeuvre, "entrecote de boeuf sauce au poivre" pour un plat, "tarte au citron" pour un dessert, etc.,
- Un type (hors d'oeuvre, plat, dessert),
- Une description un peu plus détaillée (1 ligne de texte),
- Une photo (un URL), optionnellement regarder comment uploader des photos sur firebase, sinon utiliser des URLs vers des images existantes,
- Un prix
Optionnel 1: en mode utilisateur, on pourra passer une commande : choisir un ou plusieurs menus, et des plats à la carte... la liste des plats ou menus sera ajouté à la commande, qui sera en temps réel mise à jour et affichée à l'écran avec le prix total.
Optionnel 2 : proposer mode admin (sans authentification pour cette année) pour créer des cartes, des menus, ajouter/modifier des plats. On doit pouvoir supprimer un élément de la commande une fois choisi (on a le droit de se tromper).
L'idéal serait qu'on ait à l'écran un moyen de consulter la carte et les menus, on clique sur les menus ou les plats et à droite de l'écran on voit la commande se mettre à jour...
CONTRAINTES :
- Au moins 50 restaurants, et au moins 3 menus par restaurants et au moins 30 plats par restaurant.
- Utiliser des sites pour générer les données, comme https://www.json-generator.com/ ou https://generatedata.com/, vous pouvez aussi essayer de récupérer des menus ou des plats sur OpenFoodFacts ou des sources de données de l'Open Data. Ou bien vous pouvez écrire un générateur en JavaScript (c'est assez simple).
- A faire en binome.
- Si vous utiliser des tutoriaux, des exemples du Web : donner les références !
- Vous devez aussi faire une contribution personelle et montrer que vous avez utilisé des techniques vues pendant le cours. Ca ne m'intéresse pas de voir un tuto utilisant des mauvaises pratiques, adapté à l'arrache.
- Vous devez utiliser une bibliothèque pour les éléments de GUI (vuetify, react material, etc...).
Vous rendrez ce projet sur github, un gros plus si il est hébergé quelque part pour que je puisse le tester directement. (par exemple sur sur heroku.com ou autres...)
Un README avec toutes les explications nécessaires.
Date limite de rendu : Le 13 Janvier, début de seconde semaine semaine de Janvier. Vous m'enverrez par mail vos noms, repo github, URL d'hébergement.
|
Vous n'êtes pas connecté. Connexion 