Master 2 Miage INTENSE Casablanca 2018-2019

Pages récentes

EMSI CENTRE

Séance 1 : rappels JavaScript, introdution à VueJS, comparaison avec JavaScript pur.

Petits exercices JavaScript faits en cours:

GROUPE EMSI CENTRE : exercices faits en cours (changer titre, générer une liste de restaurants avec VueJS etc.): Exo1JavaScriptCasa.zip
Ici le tout petit exemple qui montrait comment faire fetch et récupérer des infos sur Master of Puppets de Metallica: https://jsbin.com/sitoxijidu/1/edit?js,output en utilisant l'API de http://wasabi.i3s.unice.fr la BD de chansons que j'ai développée avec mon équipe de recherche.

A faire pour la séance 2

Vous inscrire au MOOC
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,

Séance 2 : introduction à NodeJS et aux Web Services

Supports de cours

Transparents de présentation de NodeJS
Transparents de présentation de Express
Vous êtes curieux de savoir si NodeJS est une technologie d'avenir ? Regardez la vidéo suivante : https://www.youtube.com/watch?v=IwpBluLjynI
MOOC MongoDB for NodeJS developers (ouvre le 16 Octobre)
Les bonnes pratiques pour créer une API REST: https://blog.octo.com/designer-une-api-rest/

TP création de WebServices avec NodeJS, aujourd'hui en GET

Vous allez créer des routes qui répondent en GET aux URIs suivants :
1. /api/restaurants : renvoie un tableau de 10 restaurants
2. /api/restaurants?page=xxx&pagesize=yyy&nom=zzz : dans un premier temps 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 params). Dans un second temps, essayer d'implémenter une fonctionnalité (ex: envoyer 2 restaurants et pas 10 si pagesize = 2)
  - Un peu plus difficile : donner des valeurs par defaut (page = 0, pagesize=10, nom="") si des paramètres ne sont pas présents dans l'URI
3. /api/restaurants/1 : renvoie le restaurant d'id = 1, attention, ça doit marcher si on met un autre id

CORRECTION FAITE EN CLASSE (client vueJS + serveur REST Node avec GET/POST/DELETE)

Récupérez cette archive, dezippez là et allez dans le répertoire ainsi créé.
Allez dans le répertoire serveur
faites "npm install"
Lancez le serveur : "node server.js" ou "nodemon server.js"
Ouvrez le fichier restaurantsVueJS.html dans le répertoire du client avec votre navigateur.

Séance 3: installation de MongoDB et d'un outil d'administration

Voir cette page dédiée à l'installation de MongoDB et à l'importation d'une base de données de restaurants.

TP : connexion du code serveur NodeJS à MongoDB

Tout d'abord, allez dans le répertoire "serveur" du TP, c'est là que nous allons travailler.
Ensuite, vous allez installer le driver MongoDB pour NodeJS dans le projet en exécutant la commande suivante : "npm install -save mongodb". Cette commande n'installe pas MongoDB, elle installe juste le serveur.
Créez un répertoire serveur/app_modules qui contiendra des "modules" que nous allons écrire, dans le code de notre application serveur.
Dans ce répertoire, créez un fichier crud-mongo.js dans lequel nous allons mettre le code spécifique aux requêtes MongoDB
Recopiez dans ce fichier le code suivant :

var MongoClient = require('mongodb').MongoClient;

// Connection URL
const url = 'mongodb://localhost:27017';

// Database Name
const dbName = 'test';

exports.findRestaurants = function findRestaurants(callback) {
MongoClient.connect(url, (err, client) => {
// On est connecté à la base
var db = client.db(dbName);

if (!err) {
db.collection('restaurants')
.find()
.limit(10)
.toArray()
.then(resultats => {
callback(resultats);
});
}else {
callback(-1);
}
});
};

Enfin, nous allons relier ce code avec le fichier server.js afin de pouvoir exécuter la fonction findRestaurant qui envoie une requête à la base, lorsque l'uri /api/restaurants est invoqué par une requête HTTP GET.

Je vous propose pour cela de rajouter en haut de votre fichier server.js les lignes pour importer le module crud-mongo.js dans le fichier server.js:

server.js (seules les deux dernières lignes sont nouvelles) :

var express = require('express');
var app = express();

// pour les formulaires multiparts
var multer = require('multer');
var multerData = multer();

// Mon module de connexion à MongoDB
const mongoDBModule = require('./app_modules/crud-mongo');

Et voici par exemple une route supplémentaire pour tester si cela fonctionne :

app.get('/api/restaurantsbd', (req, res) => {
// paramètres optionnels passé en tant que 
// query strings: ex /api/restaurants?page=2@pagesize=5&nom=Pizza

let page = req.query.page || 0;
let pagesize = req.query.pagesize || 10;
let nom = req.query.nom || "";
let cuisine = req.query.cuisine || "";

mongoDBModule.findRestaurants((data) => {
var reponse = {
msg: "restaurant recherchés avec succès",
data: data,
}
res.send(JSON.stringify(reponse));
});
})

Que remarquez-vous ? Comment est-ce qu'on appelle la fonction findRestaurants ? Quel est le paramètre d'appel de cette fonction ? Comment récupère-t-on les données en provenance de la base ?

Travail à faire avec le prof en live coding: implémenter la prise en compte des paramètres de pagination, la recherche par nom, coder le findRestaurantById, et voir comment faire les autres opérations du CRUD (insertion, modification, suppression)

CORRECTION FAITE EN CLASSE

Récupérez et dezippez NodeMongoDBVueEMSI_CENTRE.zip
allez dans serveur et faites "npm install"
lancez server.js
Ouvrez le fichier client/restaurantsVueJS.html avec un browser

Séance 4 : on finit le CRUD, on apprend à faire des composants et à réutiliser des composants avec VueJS

Première partie du TP :

On implémente la recherche "débouncée", c'est-à-dire qui se déclenche que quand on a arrêté de taper plus de 300ms. Pour cela on va utiliser la librairie JS "à tout faire" LODASH (https://lodash.com/) qui est quasiment indispensable à toute application front-end JavaScript tellement elle est pratique.
- On télécharge lodash et on copie le fichier obtenu dans le répertoire lib du projet client (depuis la page d'accueil, prenez la version complète zippée de 24k, cela doit télécharger le fichier lodash.min.js.
- On insère la ligne <script src="lib/lodash.min.js"></script> dans le fichier restaurantsVue.html
- Enfin, on ajoute la méthode suivante dans le fichier restaurantsVueJS.js :
  
  // _.debounce vient de lodash et permet de n'appeler getRestaurantsFromServer que lorsqu'on a arrêté de taper
  
  // pendant 300ms, ça évite d'envoyer une requête au serveur à chaque touche...
  
  chercherRestaurants: _.debounce(
  
  function () {
  
  this.getRestaurants();
  
  }, 300),
- Enfin, modifiez l'attribut v-on:input du champ de recherche, dans le fichier restaurantsVue.html, comme ceci: v-on:input="chercherRestaurants()" pour que lorsque on tape des caractères on appelle la fonction ci-dessus, au lieu d'appeler getRestaurants.
- Sauvez, testez en tapant vite dans le champ de recherche... Vous verrez que les requêtes ne partent que quand on a arrêté de taper vite.
On implémente l'ajout et la suppression de restaurants (live coding avec le prof)
On va commencer à voir comment on peut créer des composants custom avec VueJS. Par exemple :

Vue.component('app-restaurant', {
props: ['nom', 'cuisine', 'id'],
data: function () {
return {}
},
template: '<li v-on:click="removeRestaurant">{{ nom }}, cusine : {{cuisine}}</li>',
methods: {
removeRestaurant: function () {
this.nom = "Restaurant supprimé!"
// pas de majuscules dans le nom du restaurant
this.$emit('restaurantclicked', this.id);
}
}
});

CORRECTION PARTIELLE (delete, composant <app-restaurant>, debounce quand on recherche)

Récuperez cette archive, puis npm install dans le serveur, nodemon serveur.js et ouvrez le fichier restaurantsVueJS.html

Séance 5 : exemple avec FireBase, on avance le TP puis vidéo sur NodeJS dans le monde... QCM/examen

Exemple d'application 100% client utilisant FireBase comme back-end

Récupérez cette archive, ouvrez le fichier index.html. Si vous êtes connectés, ça va afficher des restaurants venant d'une base de données FireBase dans le cloud. Vous pouvez ouvrir plusieurs fenêtres avec le même fichier index.html ouvert, elles seront synchronisées. Supprimez, insérez des restaurants... regardez :-)
- Lien vers la page du cours de Master 1 Miage de Nice qui explique comment refaire ce TP : comment recréer une base de données dans le site de FireBase, etc.

EMSI MAARIF

Séance 1 - présentation de NodeJS et premiers exercices simples

Transparents de présentation de NodeJS
Transparents de présentation de Express
Vous êtes curieux de savoir si NodeJS est une technologie d'avenir ? Regardez la vidéo suivante : https://www.youtube.com/watch?v=IwpBluLjynI

Ressource : des MOOCS!

Outils à installer

Un bon éditeur de code prêt pour le dev front-end: sublime text 3, visual studio code, atom, etc. Pensez à installer les packages emmet, babel, etc.
Si vous êtes sous windows, un bon terminal, acceptant le copier/coller, la colorisation, le multi-onglet ou multi-fenêtre, par exemple http://cmder.net/, powershell (de microsoft, déjà installé sous win10), hyperterminal (payant), console2, powercmd, colorconsole, mobaextrem, terminal wings, conemu,

Exemples JsBin sur les objets JavaScript, fait en cours:

Affichage du disque de Mettalica : https://jsbin.com/?js,output
Petit exercice avec des objets et des tableaux : https://jsbin.com/womesusaju/edit?html,js,console

Séance 2 TP - routage avec le module ExpressJS, Web Services RESTFUL

Vous allez créer des routes qui répondent en GET aux URIs suivants :

/api/restaurants : renvoie un tableau de 10 restaurants
/api/restaurants?page=xxx&pagesize=yyy&nom=zzz : dans un premier temps 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 params). Dans un second temps, essayer d'implémenter une fonctionnalité (ex: envoyer 2 restaurants et pas 10 si pagesize = 2)
- Un peu plus difficile : donner des valeurs par defaut (page = 0, pagesize=10, nom="") si des paramètres ne sont pas présents dans l'URI
/api/restaurants/1 : renvoie le restaurant d'id = 1, attention, ça doit marcher si on met un autre id

On fera aussi une route en POST sur /api/restaurants pour insérer une restaurant, et on la testera avec l'outil POSTMAN

On fera une route en DELETE sur /api/restaurant/xxx pour supprimer un restaurant par id

On fera une route en PUT sur /api/restaurant/xxx pour modifier un restaurant dont on passe l'URI.

Correction faite en classe :

Telechargez cette archive
Allez dans "serveur" et faites "npm install" pour installer les modules nécessaires (express et multer)
Lancez "node serveur.js" ou "nodemon serveur.js"
Ouvrez le fichier restaurantVue.html dans le répertoire client. Il y a aussi le client "pur JS" dans restaurants.html