|
Server-side JavaScript
De $1
Séance 2 - routage avec le module ExpressJS, Web Services RESTFUL
Séance 3 - WebSockets avec socket.io
- Support de cours : transparents ici
- TP sur les WebSockets version simple (chat multi participants mais sans salles virtuelle, montre aussi comment syncrhoniser des positions dans un jeu).
Séance 4 - MongoDB
Vous allez, dans cette séance apprendre les bases de l'utilisation de MongoDB depuis une application écrite en JavaScript et exécutée avec NodeJS. Dans un second temps, vous ré-utiliserez le code qui fait le CRUD sur une base d'exemples de MongoDB, en le déplaçant dans des méthodes app.get, app.post etc du TP de la séance 3, pour faire une application utilisable depuis des URLs.
1 - 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.
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)
2 - Créer et peupler une collection par défaut (avec un dataset issu du tutorial MongoDB officiel)
- Suivre les instructions situées sur cette page. 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" :
- Une fois l'importation faite, garder l'onglet ouvert sur cette page, car on va continuer le tutorial à l'étape 5.
3 - 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: http://3t.io/mongochef/
4 - Ouvrir MongoChef 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 Mongo Chef, connectez-vous sur MongoDB. Les valeurs par défaut doivent être Ok, normalement.
- Ouvrir la collection "restaurants" dans la base "test"
Quelques screenshots:
5 - Installer le driver MongoDB pour NodeJS
- Créez un répertoire
tpmongo cd tpmongo npm install mongodb
Ca doit télécharger le module driver mongodb dans un sous-répertoire node_modules .
6 - Tester des bouts de code JavaScript qui font le CRUD dans cette base
Suivre la suite du tutorial MongoDB, en commençant par la page montrant comment se connecter à la base restaurant. Vous devez copier/coller le code dans un fichier connect.js puis l'exécuter avec node connect.js . Si vous suivez bien les instructions de la page vous devriez obtenir:
connect.js :
var MongoClient = require('mongodb').MongoClient;
var assert = require('assert');
var url = 'mongodb://localhost:27017/test';
MongoClient.connect(url, function(err, db) {
assert.equal(null, err);
console.log("Connected correctly to server", url);
db.close();
});
Vous le testerez en exécutant node connect.js et ça devrait afficher sur la console "Connected correctly to server".
Vous passerez ensuite à la page de tutorial suivante, et ainsi de suite...
Chaque page va vous proposer des bouts de code JavaScript pour chercher, modifier, supprimer et insérer des données dans la base des restaurants. Je vous conseille à chaque fois de faire un fichier différent et le tester ensuite avec la commande node:
node connect.js node insert_document.js node find_all.js node find_some.js node update.js node delete.js node aggregation.js node indexes.js
Correction de cette partie:
7 - Intégrer le code dans une application Node/Express qui fait du routage
- A étudier: findServer.js et mettre dans public le fichier : restaurants.html en le renommant restaurants.html.
- Testez en lançant
node findServer.js
Ce sera le TP à rendre pour la semaine prochaine ! Je passerai lundi ou mardi vous voir en classe.
Vous devrez insérer le code qui fait le CRUD dans MongoDB dans les fonctions de routage vues lors du cours sur Express. Vous renverrez les résultats en JSON. Pour les POSTs vous devrez produire un formulaire et vous pourrez tester dans un premier temps les updates et delete via GET, en tapant l'URL dans votre navigateur.
Allez-y incrémentalement, petit à petit.
- Mettez un bouton "connexion à MongoDB" dans la page d'accueil. On clique dessus et ça doit renvoyer "connexion effectuée".
- Ajoutez un bouton "voir 10 données" qui doit afficher les 10 premiers restaurants, pour voir si cela fonctionne.
- Maintenant on essaie d'envoyer une requête en Ajax et on essaie de retourner les résultats en JSON. On les affichera avec console.log dans un premier temps.
- Maintenant on essaie de les afficher dans un tableau HTML construit dynamiquement en utilisant l'API du DOM.
- Maintenant on essaie de rajouter dans le tableau un bouton "supprimer" et quand on clique dessus ça appelle l'URL pour supprimer une donnée. On re-affichera les données pour vérifier que le restaurant a disparu.
- On fera un formulaire pour ajouter un restaurant, un autre pour modifier un restaurant..
Rappels sur l'objet en JS et sur l'héritage
Hhéritage :
- Le plus simple pour commencer est de tester des exemples simples que je vous ai préparé sur JsBin:
- Exemple 1 qui couvre les cas "classiques" : classes et sous-classes, héritage de propriété et de méthodes. Différentes syntaxe d'appel des constructeurs hérités (avec et sans utilisation de la méthode
call ) - Exemple 2 qui montre comment redéfinir une méthode héritée sans changer son nom, et en gardant la possibilité d'appeler la méthode de la classe dont on hérite (équivalent du
super.methode ...) - Exemple 3 avec le Black Box model (qui n'est pas de l'héritage mais de la composition, on peut quand même simuler l'héritage et la redéfinition, vous verrez, mais l'opérateur instanceof ne donnera plus l'appartenance des instances à plusieurs types en même temps).
- Pour en savoir plus sur la l'héritage et la définition de pseudo-classes avec la syntaxe JavaScript classique, voir ce cours en français sur le Mozilla Developer Network
Début du mini projet : un outil de groupware synchrone
Durant les prochaines séances, il y aura du cours magistral, mais vous développerez au fil de l'eau un mini projet ayant pour thème un outil de groupware incluant :
- Possibilité de créer une équipe de travail (un projet). Le créateur est le "propriétaire du projet". Le projet a un nom et une description. Eventuellement un logo (facultatif).
- Lorsque on se connecte pour la première fois sur le site, on nous demande notre nom, comme dans le TP sur les WebSockets. On voit ensuite la liste des projets. En cliquant sur un nom de projet (un lien), on peut "rejoindre" le projet. Pour le moment on ne se préoccupe pas de problèmes d'authentification.
- Quand on est dans la "salle virtuelle d'un projet" (au sens WebSockets), on peut chatter avec les personnes dans la salle, on ne peut pas chatter avec les autres personnes dans les autres salles. (facultatif, mais ça complique : on peut participer à plusieurs salles en même temps et switcher de projet/conversation)
- On peut afficher une carte avec la position (longitude/latitude) des personnes dans le projet, voir leur profil (si on complique le projet, si on gère l'authentification -tout ceci est optionnel-, on pourra voir nom, email, photo, spécialité etc.)
- On peut démarrer une visio conférence et les gens du projet peuvent la rejoindre. On utilisera une librairie WebRTC simple à intégrer comme Twilio ou appear.in ou autre...
- le projet partagera un disque distant avec des fichiers. On pourra voir/explorer le répertoire partagé (et voir les sous-répertoires et fichiers), downloader un fichier (lien HTTP classique), uploader un fichier avec XhR2 ou fetch, voir une barre de progression (si XhR2, pas supporté par fetch encore). Vous pourrez éventuellement utiliser des modules npm comme https://www.npmjs.com/package/fs-extra pour vous simplifier la vie...
- Pour les très bons : utilisation de framework, version mobile, version hybride, version compilée en natif (cours à venir où je vous parle de ces technologies)
Resources externes
MOOCS SUR MONGODB
MOOC pour bien débuter, donné par les auteurs de MongoDB
Créer un server Web (routage, Web Services, etc.)
Bases de données relationnelles
- Module Knex (http://knexjs.org/), permet de manipuler des données relationnelles avec Postgres, MySQL, MariaDB, SQLite3, et Oracle. Supporte les transactions via des promesses, très bien adapté à JavaScript.
|