M2 Miage NTDP : Server Side JS, MongoDB, frameworks JS

Ressource : des MOOCS!

• MongoDB for NodeJS developers (ouvre le 17 Octobre) 
• Introduction à JavaScript (ouvre le 1er Octobre) 

Il y a d'excellents cours JS avancés sur udacity.com (je recommande pour ceux qui se débrouillent pas mal celui-ci: https://www.udacity.com/course/objec...ascript--ud015)

TP - routage avec le module ExpressJS, Web Services RESTFUL

Supports de cours: transparents de présentation de Express 

• TP:
  1.  Récupérez cette archive, dezippez là quelque part, avec la ligne de commande, faites cd dans le répertoire TP_ROUTAGE_EXPRESS_CRUD_AJAX créé, et exécutez la commande "npm install".
     
     Ceci devrait créer un sous directory node_modules contenant les modules nécessaires (dans notre cas: express et multer).
     
     AIDE: tutorial CRUD avec fetch API (note il utilise PATCH et pas PUT pour les updates, c'est pareil à quelques subtilités près)
      
  2. Suivez les consignes du prof et les explications au tableau.
     
      
  3. FACULTATIF: Avec Multer on peut aussi uploader des fichiers Testez cet exemple qui fait de l'upload de fichiers. Pensez à installer les modules express et multer dans le répertoire avant d'exécuter.

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" :

  • mongoimport --db test --collection restaurants --drop --file primer-dataset.json

• 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.

5bis pour Rabat

Récupérez les fichiers suivants:
 

• serverCrudWithMongo.js 
   
• Et un autre à mettre dans un sous répertoire app_modules: crud-mongo.js 
• Allez dans le répertoire du TP précédent (avec serverCrud.js), et copiez les deux fichiers précédents dedans, mais mettez crud-mongo.js dans un sous -répertoire app_modules.
• Faites npm install -save mongodb
• executez node serverCrudWithMongo (ou nodemon)

Jeudi:

• Telechargez le fichier suivant: crudAvecFetchAvecTable.js 
• Mettez-le à côté du fichier public/js/crudAvecFetch.js
• Modifier le nom du fichier à inclure dans public/index.html et ajoutez l'attribut id="formulaireModification" dans le formulaire de modification du PUT
• Executez node serverCrudWithMongo.js
• Etudiez le code, regardez en particulier comment, quand on clique sur le premier bouton GET AJAX un tableau est construit dynamiquement. 
• Etudiez ce que le prof a fait en live coding: la suppression et la modification d'une donnée.

Vendredi:

A lire à la maison, un tuto en français qui donne des conseils pour créer une API REST: https://blog.octo.com/designer-une-api-rest/

Corrections pour le count et pour le findByName:

Dans serverCrudWithMongo.js:

// ICI c'est autorisé par la norme REST car
// "count" est un mot réservé, on ne risque pas de
// le prendre pour une TABLE ou une collection
// cf la partie "reserved words" de
// https://blog.octo.com/designer-une-api-rest/ 
app.get('/api/restaurants/count', function(req, res) { 
    // on renvoie le nombre de restaurants
    mongoDBModule.countRestaurants(function(data) {

    var objdData = {
       msg:"Count effectué avec succès",
       data: data
   }
   res.send(JSON.stringify(objdData)); 
 });     
});  app.get('/api/restaurants', function(req, res) {     // Si présent on prend la valeur du param, sinon 1    let page = parseInt(req.query.page || 0);    // idem si present on prend la valeur, sinon 10    let pagesize = parseInt(req.query.pagesize || 10);    let nom = req.query.nom;     if(nom) {        // find by name        mongoDBModule.findRestaurantsByName(nom, page, pagesize, function(data) { 	 var objdData = { 	     msg:"restaurant recherchés par nom avec succès", 	     data: data 	 } 	 res.send(JSON.stringify(objdData));         });      } else {        // find normal        mongoDBModule.findRestaurants(page, pagesize, function(data) { 	 var objdData = { 	     msg:"restaurant recherchés avec succès", 	     data: data 	 } 	 res.send(JSON.stringify(objdData));         });      } }); 

Dans app_modules/crud-mongo.js:

exports.countRestaurants = function(callback) { MongoClient.connect(url, function(err, db) {        db.collection('restaurants')        .count(function(err, res) {           console.log("COUNT = " + res)           callback(res);        }); }); };  exports.findRestaurantsByName = function(nom,page, pagesize, callback) {     MongoClient.connect(url, function(err, db) {         console.log("pagesize = " + pagesize);     	console.log("page = " + page);         console.log("FIND BY NAME nom=" + nom);      	// syntaxe recommandée     	// Cf doc mongodb: https://docs.mongodb.com/manual/reference/operator/query/regex/     	// The $regex value needs to be either the string      	// pattern to match or a regular expression object.      	// When passing a string pattern, you don't include      	// the / delimitters     	// VERSION avec $regexp et $options     	let myquery = {     	   "name": {                 $regex: ".*" + nom + ".*",      		$options:"i"     	    }     	}      	// VERSION avec objet RegExp, plus compliquée à utiliser     	//let myquery =  {'name' : new RegExp('^.*'+nom+'.*$',"i")};     	// ou, si on veut être "case sensitive"       	//let myquery =  {'name' : new RegExp('^.*'+nom+'.*$')};         if(!err){             db.collection('restaurants')             .find(myquery)             .skip(page*pagesize)             .limit(pagesize)             .toArray()             .then(arr => callback(arr));         }         else{             callback(-1);         }     }); };

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:

• connect_driver.js
• find_all.js
• find_some.js
• insert_document.js avec vella.js qui contient la définition d'un restaurant (utilisé par insert_document.js)
• aggregate.js

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



VERSION FAITE EN COURS LE MARDI 3/10/2017, qui pourra vous aider: FindServerNextButtonTable.zip, regarder aussi les exemples dans le cours JavaScript Intro sur edX.org. Partie sur DOM (Week 2) et API table HTML (Week 5).

Les classes ou pseudo classes en JavaScript

• A FAIRE : vous inscrire au MOOC JavaScript Intro, les objets sont détaillés tout au long du MOOC, mais pour gagner du temps, le plus intéressant est dans le module 4 et le module 5. Ce cours d'intro ne parle pas de l'héritage ou de design patterns. C'est pourquoi je vous donne des exemples ci-dessous que nous détaillerons en classe.

Ressources pour l'héritage :

• Le plus simple pour commencer est de tester des exemples simples que je vous ai préparé sur JsBin:
• ES5 :
  
  1. 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)
     
      
  2. 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...)
      
  3. 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

• ES6 :
  • Exemples avec ES6, la nouvelle version de JavaScript. Attention, ES6 ne support pas vraiment les classes, il s'agit ici d'un "sucre syntaxique" permettant d'avoir une syntaxe plus proche de ce que l'on connait en Java/C#, mais en coulisse, on a toujours affaire à des "prototypes".
    
    
    
    1. Ici un tutoriel plus détaillé pas trop dur à digérer... 
        
    2. Et ici un article très détaillé si vous voulez connaitre toutes les subtilités de cette syntaxe 

Introduction aux frameworks

• Transparents de présentation sur "l'état de JavaScript en 2017-2018" et des frameworks JS / Outils de build

A faire avant le TP:

1. Vous devez avoir nodeJS correctement installé (node, npm, etc, tout ceci doit fonctionner...)
    
2. Installer l'extension Google Chrome "React Developer Tools" (https://chrome.google.com/webstore/d...jfkapdkoienihi), elle existe aussi pour Firefox
    
3. Installer une bonne fenêtre terminal pour Windows, si vous êtes sous windows, comme Hyperterminal ou http://cmder.net/
    
4. Installer les package "babel" et "emmet" pour Sublime Text 3 ou pour Atom, selon l'éditeur de code que vous utilisez
    
5. Récupérez les sources du cours React (cd dans le répertoire du TP -creez-le!- et exécutez git clone https://github.com/wesbos/React-For-...-Starter-Files)
    
6. Ouvrir la ligne de commande et exécuter la commande "npm install -g create-react-app", 
   • Pour vérifier que ça fonctionne, créez un autre répertoire nommé "helloWorld" et cd dedans,
   • executer "create-react-app hello-world" (ça prend du temps, quelques minutes)...
   • Allez dans le répertoire créé (cd hello-world), et faites "npm install" (là aussi, quelques minutes)
   • Exécutez le progralle en tapant "npm start", ça doit ouvrir automatiquement le browser sur le port 3000 et afficher une page avec le logo React qui tourne.
   • Editez le code du fichier src/App.js, changez le texte et sauvez -> la page Web de l'application doit se rafraichir automatiquement.

A faire pour la séance de vendredi :

•  Aller jusqu'à la vidéo no 15 incluse, elles sont sur la clé de Manon mais aussi sur ce channel YouTube: https://www.youtube.com/channel/UCBM...IkZ_YKA/videos (nom de la personne: Mushfiqur Rahman)