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
Vous n'êtes pas connecté. Connexion 