 |
Master 2 INTENSE Rabat 2019-2020
De $1
Séance 1 : rappels de JavaScript, introduction au framework VueJS
Supports de cours :
Partie 1 Live coding: rappels de JavaScript
On a vu en live coding des exemples présentant les bases de JavaScript et de son utilisation dans un navigateur. Ex: cliquer sur un bouton et changer le contenu et le style de la page.
On a vu les bases de la POO en JavaScript (objets littéraux, classes), les tableaux, les itérateurs. On a fini en affichant une liste de restaurants dans un élément <table> HTML5, à l'aide de l'API JavaScript de cet élément (en utilisant insertRow(...)).
Travail à faire pour la séance 2 : installer Visual Studio Code, NodeJS, essayer d'installer MongoDB
1 - Installer Visual Studio Code
Vous pouvez utiliser d'autres environnements de travail mais celui-ci est vraiment très bien. Suivez les instructions de cette page : https://code.visualstudio.com/
2 - Installer NodeJS
Allez sur le site https://nodejs.org et installez la version "recommended for most users" (12.13.1 au moment où j'écris...)
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 >= 12 (commande à taper : "node -v)
- Une version de npm >= 6 (commande à taper : "npm -v")
Si jamais vous avez "command not found", ouvre une nouvelle fenêtre et re-testez. Si cela ne marche pas ajoutez le chemin d'installation des binaires de nodejs dans la variable d'environnement PATH, ouvrez une nouvelle fenêtre de terminal, re-testez.
3 - Installez MongoDB
Suivez le guide d'installation que je vous ai préparé.
Séance 2 : de JavaScript aux librairies aux frameworks
Exemples faits en cours :
- Les restaurants avec vueJS : seance2.rar
- Exemples avec fetch: https://jsbin.com/farenik/edit
Autres exemples (pour les curieux) fait en cours à CASA (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) pour tout savoir sur la gestion des événements et sur l'API du DOM.
- 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" VueJS
Séance 3 : introduction à NodeJS et aux Web Services
Supports de cours
Exercice fait en cours le matin : renvoyer des restaurants (sans base de données), avec GET et ajout avec POST, client VueJS:
- Ici archive de cet exercice . Dezipper, aller dans le répertoire seance3NodeWS/serveur, faire "npm install" et lancer le serveur avec "node serveurExpress.js"
Exercice à faire : 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 et on a fait un client en VueJS. A vous de travailler.
- Modifiez la route GET "
/api/restaurants" pour qu'elle renvoie un tableau de 10 restaurants au lieu de 3,
- Modifiez la route GET "
/api/restaurants" pour qu'on puisse lui passer trois paramètres HTTP de cette manière : "/api/restaurants?page=xxx&pagesize=yyy&nom=zzz". page = un nombre entier, pagesize aussi, nom = chaine de caractères :
- Dans un premier temps, tester avec POSTMAN 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 valeurs de page, pagesize, nom).
- Dans un second temps, essayer d'implémenter la fonctionnalité (ex: envoyer 2 restaurants et pas 10 si pagesize = 2)
- Un peu plus difficile : donner des valeurs par défaut (page = 0, pagesize=10, nom="") si des paramètres ne sont pas présents dans l'URI
- Ecrivez la route GET : "/api/restaurants/1" : renvoie le restaurant d'id = 1, attention, ça doit marcher si on met un autre id !
CORRECTION DU PROF :
- Récuperez cette archive, cd dedans, puis "npm install", lancer le serveur avec node serveurExpress.js ou "nodemon serveurExpress.js", et ouvrir http://localhost:8085/clientVueJS
Séance 4 : MongoDB + WS CRUD + client et serveurs séparés
Support de cours :
Travail à faire pour commencer (avec le prof):
- Récupérer cette archive, cd dans le repertoire
serveur, npm install puis node serverCrudWithMongo.js - Vous venez de lancer le serveur. Regardez maintenant le code du fichier
serverCrudWithMongo.js, et ensuite celui de app-module/crud-mongo.js - Testez avec Postman les routes des WebServices. Vous pourrez vérifier avec l'outils d'administration de MongoDB que ça marche, en plus de PostMan (vérifier par ex qu'une insertion a bien eu lieu).
Travail à faire maintenant :
- Copier le client VueJS de la Seance 3 dans le repertoire server/public
- L'afficher à l'écran (
http://localhost:8080/clientVueJS), regarder ce qui fonctionne..... Rappel : il faut mongod lancé, il faut lancer le serveur avec node serverCrudWithMongo.js
- Faire fonctionner la pagination, on récupèrera le nombre de restaurants renvoyés par les requêtes, et on essaiera de mettre le bouton "Précédent" en grisé quand on est à la première page, et "Suivant" en grisé quand on est à la dernière. Aide : utiliser
v-bind:disabled="...." - Ajouter un champ de recherche par nom et faire fonctionner la recherche par nom
- Essayer d'afficher les résultats dans une table utilisant la bibliothèque Vue Material et/ou la bibliothèque Vue Bootstrap, par exemple. Vous aurez à utiliser une de ces librairies pour le TP à rendre.
- Réfléchissez à comment faire la modification d'un restaurant.
CORRECTION DE CE QUI A ETE FAIT EN CLASSE :
A 18h séance de vidéo :-) Pour les absents la vidéo est ici : https://www.youtube.com/watch?v=IwpBluLjynI
Séance 5: QCM examen et publication du sujet du projet
TP à rendre pour dimanche soir (envoyer lien par mail pour télécharger)
- SUJET : reprendre le code du TP long sur les restaurants et le finaliser :
- S'assurer que tout fonctionne correctement : recherche par nom, pagination avec boutons qui se mettent en grisé, etc.
- Ajouter la fonctionnalité de modification, vous utiliserez une requête PUT avec fetch, inspirez-vous de la manière dont on a codé la suppression des restaurants. Vous regarderez comment la route est implémentée côté serveur. Pour vérifier que la modification marche, vous utiliserez aussi l'outil d'administration.
- Je voudrais une GUI JOLIE faite avec la bibliothèque vue-material : jolis formulaires, joli layout, jolie table, jolie titre de la page etc.
- Vous essaierez d'utiliser le composant custom SnackBar pour afficher des messages bref qui donnent le détail sur les opérations ("restaurant supprimé", "restaurant ajouté" etc.) un peu comme les messages que j'avais faits. Vue Material propose en standard ce type de composant.
- Optionnel : recherche par type de cuisine ou par "borough" en plus du nom
- Optionnel : afficher le score du restaurant (sa note) de manière sympa
- Optionnel et plus difficile (pour les bons) : et si je voulais afficher la position du restaurant sur une carte ? J'ai l'adresse, cherchez comment transformer l'adresse en longitude/latitude, et ensuite essayer de voir s'il existe des composants VueJS pour afficher une carte centrée sur la longitude/latitude. Il existe peut être des composants qui prennent directement une adresse.
- Je n'ai pas envie de corriger un seul et même projet. Faites preuve de personnalité.
|
Vous n'êtes pas connecté. Connexion