Accueil > Intranet Michel Buffa > Master 2 Miage INTENSE Rabat 2018-2019

Master 2 Miage INTENSE Rabat 2018-2019

De $1

Introduction

Dans ce cours, nous ferons une introduction à JavaScript, à NodeJS/MongoDB et nous verrons les bases de ce qu'on appelle "les frameworks JavaScript" front-end au travers de ReactJS.

Séance 1 : état des lieux du développement Web, intro à VueJS

Supports de cours

Petits exercices JavaScript faits en cours:

  • Changer le contenu de la page par click sur un bouton, du style d'un titre. Bases de la gestion des événements, bonne pratique pour créer un programme principal appelé uniquement quand la page est entièrement chargée, avec ses fichiers css, js, images, vidéos etc. Exemple JsBin ici : https://jsbin.com/waxazaqevo/edit?html,js,output

  • Ici exercice qu'on a codé en classe qui montre des exemples d'objets, de classes, de tableaux, et la construction dynamique d'une table à partir d'un tableau: https://jsbin.com/xuveyay/edit?css,js,output

A faire pour la séance 2

  • Vous inscrire aux MOOCs
     
  • Regarder les bouts de code faits en cours. Essayer de les modifier, essayer de comprendre ce qui a été fait.
     
  • Installer les logiciels suivants :

    • Visual Studio Code

    • NodeJS : allez sur https://nodejs.org/en/ et installez la version "recommended for most users".
       
    • Si vous êtes sous windows, un bon terminal, acceptant le copier/coller, la colorisation, le multi-onglet ou multi-fenêtre, par exemple je vous conseille http://cmder.net/, mais d'autres peuvent faire l'affaire : powershell (de microsoft, déjà installé sous win10), git bash, hyperterminal (payant), console2, powercmd, colorconsole, mobaextrem, terminal wings, conemu, etc.

Séance 2 : Introduction aux frameworks. DOM or not to DOM ?

Ecriture en live coding d'un gestionnaire de todos de différentes manières

Nous allons comparer plusieurs versions:

  1. Pur JavaScript + DOM API : http://jsbin.com/gaqugic/edit
  2. Avec des librairies comme jQuery et Lodash : http://jsbin.com/posowem/edit?html,js et ici exemple fait à Rabat: https://jsbin.com/birijat/edit?js,output
  1. Avec un framework comme vueJS, ici dans un exemple simple : http://jsbin.com/pigolozuva/1/edit?h...console,output Ici l'exemple fait en classe à Rabat : https://jsbin.com/jizokik/edit?html,js,console,output
  2. Idem mais avec des données distantes obtenues par fetch à partir d'une API REST : http://jsbin.com/dizigehata/1/edit?h...console,output ici l'exemple codepen avec juste fetch et des commentaires: https://codepen.io/w3devcampus/pen/eQNxxJ

A propos de REST:

Remarque : on peu faire des requêtes REST avec XhR2fetch API(pour les curieux : quelques mots sur GraphQLet Appolo

On peut aujourd'hui gérer la progression des uploads et downloads avec fetch et l'API des streams (voir https://streams.spec.whatwg.org/demos/)

Séance 2 suite... - présentation de NodeJS et premiers exercices simples

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).
       
    2. Suivez les consignes du prof et les explications au tableau.
    3. Les bonnes pratiques pour créer une API RESThttps://blog.octo.com/designer-une-api-rest/
       

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

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

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)

2 - 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
  • 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: https://studio3t.com/

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

MongoChef1.jpg

MongoChefRequestBuilder.jpg 

5 - Installer le driver MongoDB pour NodeJS

  • Allez dans le répertoire du TP précédent (routage avec express etc)
     
  • Exécutez npm install -save mongodb
    • Cette dernière commande ne fait qu'installer le driver mongodb pour nodeJS dans le répertoire node_modules.

6 - Tester des requêtes CRUD avec NodeJS et express   

FAIT EN LIVE CODING: inserer + supprimer des lignes d'une table HTML depuis JavaScript: http://jsbin.com/hinilet/edit?console,output

  1. Récupérez cette archive qui est une version modifiée de l'exercice précédent :  TPRoutageExpressWithMongo4.zip
     
  2.  Dezipper, allez dans le répertoire créé (TPRoutageExpressWithMongo4) et faites "npm install"
     
  3. Exécutez node serverCrudWithMongo (ou nodemon)
     
  4. Ouvrez localhost:8080

  5. Etudiez le code, regardez en particulier comment, quand on clique sur le premier bouton GET AJAX un tableau est construit dynamiquement. 
     
  6. Etudiez ce que le prof a fait en live coding: la suppression et la modification d'une donnée.

Ajout d'un WebService pour le count et pour le findByName:

Voir la doc de MongoDB pour les requêtes comprenant des expressions régulières: https://docs.mongodb.com/manual/refe...r/query/regex/

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)); 
 	});     	
});

// On va récupérer des restaurants par un GET (standard REST) 
// cette fonction d'API peut accepter des paramètres
// pagesize = nombre de restaurants par page
// page = no de la page
// Oui, on va faire de la pagination, pour afficher
// par exemple les restaurants 10 par 10
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) {
	console.log("DANS COUNT")
	MongoClient.connect(url, function(err, client) {
                var db = client.db(dbName);
		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, client) {
            var db = client.db(dbName);
    	    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
    	//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);
        }
    });
};
 

Travail à faire : début du TP à rendre

  • Récupérez cette archive : projet.zip, dézippez-là, allez dans le répertoire et lisez le fichier A_FAIRE.txt
     

Modalités de rendu

  • Ce travail est à faire en binome, à rendre pour dimanche soir 11/11/2018. Retard = des points en moins.
     
  • Vous devrez le rendre sous la forme d'un repository github public. Vous m'enverrez le lien de votre repository par mail à buffa@unice.fr. Pas de fichier attaché, pas de lien autre que github.
     
  • Dans le GitHub un Readme.md expliquera ce que vous avez fait et ce que vous n'avez pas fait...

Seance  XXX: Introduction à React

Exercices d'introduction, dans une IDE en ligne

On peut faire du react dans JsBin/JsFiddle/CodePen, mais croyez-moi, juste pour de petits exemples !

Exercice à faire en vous aidant des exercices précédents :

Pour vous donner une idée du résultat attendu,voici l'équivalent en VueJS: http://jsbin.com/guwetoy/1/edit?html,output

Je conseille de partir de cet exemple React: le composant en classe ES6

En vous aidant de l'exemple fait en classe en live coding, voud devrez faire incrémentalement, en testant après chaque étape :

  1. Créez un <div> et affichez dedans un composant Root avec React (l'App des exemples)
     
  2. Affichez un tableau de hobbies dans ce <div> (foot, tennis, jeux video, etc.) sous la forme d'une liste. Chaque hobby sera un <li>. Vous fournirez des hobbies par défaut.
     
  3. Ajoutez un bouton 'Nouveau Hobby' et un champ input pour saisir le nom du hobbie à rajouter. La liste doit se mettre à jour.
     
  4. Rendez les hobbies clickables pour qu'on puisse les supprimer
     
  5. Un message <p>Hobby supprimé !</p> devra apparaitre lorsqu'un hobby est supprimé
     
  6. Ajoutez un compteur de hobbies (<p>Hobbies: 4</p>) au-dessus de la liste des hobbies, qui indiquera le nombre de hobbies dans la liste.
     
  7. Vous changerez les styles CSS des éléments de la liste pour qu'ils s'affichent en rouge et vert à chaque ligne, en alternance. Vous utiliserez aussi des classes CSS dynamiques pour afficher le compteur en rouge si le nombre de hobbies est supérieur à trois, en vert sinon. 
     
  8. Chaque <li>, chaque hobby, sera maintenant dans un composant <Hobby/> 

ICI UNE CORRECTIONhttps://codepen.io/w3devcampus/pen/b...m?editors=1010

Exercices avec un environnement "CLI"

Si on va voir la page de facebook sur "how to start with React", il y a un chapitre qui concerne le mode "CLI": https://reactjs.org/docs/add-react-to-a-new-app.html

  1. Vous devez avoir nodeJS correctement installé (node, npm, etc, tout ceci doit fonctionner...)
     
  2. Installez l'extension Google Chrome "React Developer Tools" (https://chrome.google.com/webstore/d...jfkapdkoienihi), elle existe aussi pour Firefox.
     
  3. Installez une bonne fenêtre terminal pour Windows -si vous êtes sous windows comme http://cmder.net/ ou autre (github bash, etc.) si je vous vois avec une fenêtre DOS basique vous allez m'entendre !
     
  4. Installer les packages "babel" et "emmet" si vous êtres sous Sublime Text 3 ou Atom. Ca doit etre ok pour Visual Studio Code, WebStorm etc.
     
  5. 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é "react_cli" et cd dedans,
    • Executez "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.
       
  6. Maintenant on va étudier le code, regardez les fichiers html, js, les configs etc.
     
  7. Essayez de modifier la partie "render" de App.js... hmmm ok. Bon, on va faire un simple composant <Username name="toto"/> qu'on va mettre dans un sous répertoire "components" dans les sources, il va simplement afficher un nom passé en attribut/props dans un paragraphe en couleur. Vous ajouterez dans <App/> Plusieurs instances de ce composant.

Exercice: refaire dans le projet les hobbies en mode CLI !

 

Mots clés:
FichierTailleDateAttaché par 
 Exo1RabatJS.zip
Aucune description
1869 octets13:12, 5 Nov 2018MichelBuffaActions
 projet.zip
Aucune description
49.93 Ko13:04, 7 Nov 2018MichelBuffaActions
 TPRoutageExpressWithMongo4.zip
Aucune description
15.51 Ko12:58, 7 Nov 2018MichelBuffaActions
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.