Master 2 INTENSE CASABLACA 2019-2020

Pages récentes

Séance 1: Single page webapps avec VueJS, bases de données synchronisées dans le cloud

Supports de cours

Etat des lieux des technologies front-end, de l'écosystème JavaScript. Transparents vus en cours.
Vidéos Vue JS: 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):

En pur JavaScript avec utilisation des APIs du DOM (append, createElement, removeChild, innerHTML) et de la selector API (document.querySelector...) : https://jsbin.com/kurovin/edit?html,js
- Voir le chapitre 2 de mon Mooc "JavaScript Introduction" (gratuit) : https://www.edx.org/course/javascript-introduction
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/
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/
Un autre exemple mais qui utilise cette fois-ci des "components" :
- Fait à casa 2019-2020 avec vous : https://jsbin.com/jiqowib/edit?html,js,console,output
- Exemple de l'an dernier https://jsbin.com/guwetoy/edit?html,js,output

Partie 2 : découverte de VueJS en mode CLI (command line interface)

Travail à faire :

suivre ce tutorial , choisissez npm comme outil d'installation des modules lorsque vous aurez le choix yarn/npm
Ici autre tuto du même auteur qui montre comment gérer l'autthentification avec FireCloud : https://codeconstructionahead.com/vue-authentication-with-firebase-auth/
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.

Ici exercice chat multi-participants

Suivre ce tuto (chat multi room avec Google Firebase - moins puissante que Firecloud). Attention, la partie sur le routeur n'est pas à jour car la commande "vue add router" installe une version un peu plus récentte. Voir dans la correction faite en classe le fichier router/index.js qui est légèrement différent.

Correction : téléchargez cette archive, lisez le README.txt.
Une fois que l'appli fonctionne, essayez de comprendre dans le détail comment elle fonctionne.

ETAPE 3 : installer MongoDB sur votre machine

Support de cours pour apprendre MongoDB avec NodeJS : https://university.mongodb.com/ et suivez "MongoDB for javaScript Developpers"

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 update

brew install mongodb

mkdir -p /data/db

chmod 777 /data/db (pour autoriser un user lambda à écrire dedans)

mongod (pour exécuter MongoDB)

ETAPE 4 : - 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" :
- ```
mongoimport --db test --collection restaurants --drop --file primer-dataset.json
```

ETAPE 5 : 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 6 : 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:

Séance 3 : introduction à NodeJS et aux Web Services

Supports de cours

Transparents de présentation de NodeJS
Transparents de présentation de Express
Vous êtes curieux de savoir si NodeJS est une technologie d'avenir ? Regardez la vidéo suivante : https://www.youtube.com/watch?v=IwpBluLjynI
MOOC MongoDB for NodeJS developers (ouvre le 16 Octobre)
Les bonnes pratiques pour créer une API REST: https://blog.octo.com/designer-une-api-rest/

Exercices faits en classe (exercices du support de cours, et deux exemples faits avec express...)

Exercices de base NodeJS et Express : télécharger cette archive, dezippez-là, allez dans les répertoires, faites "npm install" avant de lancer les exercices avec node exo1.js etc....

Création de WebServices avec NodeJS, aujourd'hui en GET

On a fait ensemble, en live coding, des routes dans le code serveur, et on les a testées avec un petit programme JavaScript et aussi avec POSTMAN.
1. /api/restaurants : renvoie un tableau de 10 restaurants
2. /api/restaurants?page=xxx&pagesize=yyy&nom=zzz : dans un premier temps montrer qu'on a bien reçu les paramètres (renvoyer une réponse JSON qui contient un message qui montre qu'on a bien reçu les params). Dans un second temps, essayer d'implémenter une fonctionnalité (ex: envoyer 2 restaurants et pas 10 si pagesize = 2)
  - Un peu plus difficile : donner des valeurs par defaut (page = 0, pagesize=10, nom="") si des paramètres ne sont pas présents dans l'URI
3. /api/restaurants/1 : renvoie le restaurant d'id = 1, attention, ça doit marcher si on met un autre id

Séance 4: affichage des restaurants à partir de Web Services REST implémentés en Node/express/MongoDB

Travail à faire :

Vérifier que tout va bien...
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)
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)
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.

Vous allez travailler dans le dossier "client", et modifier le code du fichier JS qui utiulise VueJS.
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 FAITE EN CLASSE (client vueJS + serveur REST Node avec GET/POST/DELETE)

Récupérez cette archive, dezippez là et allez dans le répertoire ainsi créé.
Lisez bien le fichier README.txt toutes les explications sont présentes pour exécuter la correction.
Je vous ai fourni aussi un client avec plus de fonctionnalités... faites le marcher.

Séance 5 : fin du TP de la veille, vidéo sur NodeJS, Examen et TP à rendre

Client fait en classe avec pagination, search, messages, insert, delete etc. téléchargez cette archive.
Vidéo sur NodeJS, l'impact qu'il a sur l'industrie etc. : https://www.youtube.com/watch?v=IwpBluLjynI (celle qu'on a regardé en cours)
Liste des meilleures librairies graphiques pour VueJS:
- Partie 1 : https://blog.bitsrc.io/11-vue-js-component-libraries-you-should-know-in-2018-3d35ad0ae37f
- Partie 2 : https://morioh.com/p/<wbr/>f1a422130d85/best-vue-ui-<wbr/>component-libraries-for-2019
- Voir aussi https://risingstars.js.org/2018/en/
- La lib la plus complète/puissante : elements, ici en français https://element.eleme.io/#/fr-FR, peut fonctionner sans compiler (cf les exemples fonctionnent sur codepen.io)

TP à rendre pour dimanche soir (envoyer lien par mail pour télécharger)

Les deux sujets sont des applications "clientes" en vueJS. Elle utiliseront le code du serveur node/mongoDB qui est dans la correction de la section précédente.
Vous devrez coder ce client dans un dossier "client". C'est la seule chose que vous devrez me rendre.

Deux sujets au choix selon que vous êtes plus ou moins à l'aise :

SUJET 1 : Reprendre l'exemple des restaurants et le faire marcher dans un projet compilé, avec fichiers .vue etc. Vous regarderez le premier tutorial sur les "expenses", mais n'utiliserez pas Firecloud. A la place vous devrez ajouter des requêtes fetch dans un composant ListeRestaurant qui sera ajouté dans le template de App.vue. Faites un affichage des restaurants avec pagination, réglage du nombre de restaurants affichés, affichage du nombre de restaurants.
Optionnel : essayer d'utiliser un composant custom <Restaurant> pour l'affichage d'un restaurant,
Optionnel : ajouter un formulaire et coder l'ajout d'un restaurant. Vous pourrez metttre le code HTML dans le composant ListeRestaurants,
Optionnel : utiliser à la place un composant <FormRestaurant> pour gérer l'ajout. Rappelez-vous comment on avait fait pour communiquer avec un event custom entre deux composants...
Optionnel : idem pour suppression (icone dans le tableau à droite, dans la liste), et modification
SUJET 2 : Si le projet précédent vous fait peur, faites ce projet à la place :
Reprendre le code du TP non compilé qui affichait des restaurants à partir de Mongo DB,
Regarder le projet exemple qui fait la pagination etc. dans la correction du paragraphe précédent.
Essayer de faire pareil mais mieux présenté, et en utilisant quelques composants custom de la biubliothèque vue-material (on peut l'utiliser sans compiler)