SlideShare une entreprise Scribd logo
1  sur  27
Initiation
à
Abdoulaye DIENG
Objectif général
Prendre en main Express js, le mini-framework
de Node js le plus utilisé
Objectifs spécifiques
• Installer Node js et Express js
• Créer une application Express js
• Router les requêtes
• Recevoir des données à partir de l’URL d’une requête
• Recevoir des données à partir du corps d’une requête
• Traiter des fichiers uploadés
• Utiliser un moteur de template
• Utiliser une base de données
• Utiliser des middlewares
Sommaire
1) Présentation de Node js
2) Présentation de Express js
3) Installation de Express js
4) Création d’une application Express js
5) Routage des requêtes
6) Réception des données à partir de l’URL
7) Réception des données à partir du corps
8) Traitement des fichiers uploadés
9) Utilisation d’un moteur de template
10) Persistance des données
11) Utilisation des middlewares
Présentation de Node js
• Node est non bloquant : idéal pour les
applications en temps réel
• Node est très bas niveau : rapidité mais
difficulté de prise en main (intérêt des
framework comme Express js)
• Adopté par Microsoft, Yahoo!, Groupon,
LinkedIn, PayPal, …
• Pb-déclic : le navigateur ignore l’état de progression, en temps
réel, de l’upload d’un fichier
• Sol : créer une application permettant au serveur de pousser, à
temps réel, de l'information au navigateur.
• Node js : plate-forme construite sur le moteur JavaScript V8 de
Google Chrome pour développer facilement des applications
de réseau rapides et évolutives.(Créateur : Ryan Dahl en 2009)
https://blog.newrelic.com/2012/07/11/recap-of-nodeconf-2012/
Présentation de Express js
• Express est un framework Node.js minimal et flexible
• Il permet d'utiliser plusieurs fonctionnalités très utiles et
puissantes sans avoir à réinventer la roue
• Il facilite l’organisation de l’application en partant de la
requête à la réponse, en passant par la pile de middlewares,
le routage et les templates.
Installation de Express js
• Prérequis
télécharger et installer le binaire (msi) nodeJS depuis :
http://nodejs.org/
• Installer localement express js avec les commandes suivantes
– mkdir myapp
Créer un dossier pour l’app
– cd myapp
Se mettre sur ce dossier
– npm install express
lancer l’installation
• Vérifier la création du dossier node_modules contenant
express
Création d’une application
• Saisir dans un fichier app.js (par exple) du dossier myapp
1) var express = require('express');
Importer le module express dans l’applicaton
2) var app = express();
Créer l’application app qui est une instance de express
3) var server = app.listen(xxxx)
instancier un serveur Web qui écoute sur le n° de port
xxxx spécifié
• Démarrer l’application avec la commande :
node app.js
Routage des requêtes
présentation
• Le routage permet de déterminer comment l’application doit
répondre à une requête en fonction de l’URL
• Syntaxe de la définition d’une route :
app.method(path, handler)
– app : instance de express
– method : méthode HTTP (GET, POST, PUT, DELETE, …)
– path: adresse relative de la ressource
– handler : traitement ou fonction à exécuter
• Exemple
app.get('/contact', function(req, res) {
res.send("Bienvenue sur la page de contact !");
});
Routage des requêtes
route dynamique
• Route dynamique : route avec portion(s) variable(s)
• La syntaxe d’une portion variable est :nomVariable
• Exemple
app.get('/users/:name', function(req, res) {
res.send("Vous êtes sur le compte
de"+req.params.name);
});
Réception des données à partir de l’URL
• Données transmises via l’URL
Ex : http://www.animaux.com:8080/felins/search?q=tigre
• Paramètre du chemin (path) :
– Syntaxe d’accès : req.params.nomVariable
– Exemple : avec la route "GET /:type/search" et
l’URL "/:felins/search", req.params.name contient "felins"
• Paramètre de la requête (query)
– Syntaxe d’accès : req.query.nomVariable
– Exemple : avec l’URL "/search?q=tigre",
req.query.q contient "tigre"
path query
Réception des données à partir du corps
• Données incluses dans le corps (body) de la requête avec les
méthodes POST, PUT ou DELETE.
• Installer localement le module body-parser
• Importer body-parser dans l’application
var bodyParser = require('body-parser');
• Définir body-parser comme middleware
app.use(bodyParser.urlencoded({ extended: false }))
• Syntaxe :
– Toutes les données : req.body
– Une seule donnée : req.body.nomVariable
Traitement des fichiers uploadés
• Installer localement le module multer
• Importer multer dans l’application
• Définir multer comme middleware et configurer la
nomenclature et la destination des fichiers uploadés
app.use(multer({
dest : './uploads/',
rename : function (fieldname, filename,req,res) { return …
}
}));
• L’objet req.files stocke les infos (fieldname, originalname, name,
mimetype, path, extension, size, …) sur chaque fichier uploadé
• req.body est aussi analysé mais seulement après l’upload
complète du fichier
Utilisation d’un moteur de template
présentation
• Template : modèle décrivant la manière dont les données sont
composées pour former l'aspect final d'une page Web ou d'une
partie d’une page Web
• Installer localement le module (jade, ejs, mustache, …)
• Préciser le répertoire de stockage des templates
Ex : app.set('views', __dirname + '/views');
• Préciser le moteur de template à utilser
Ex : app.set('view engine', 'jade');
• Créer un fichier dans le dossier des templates
Ex : index.jade dans le dossier views
• Définir une route pour proposer le fichier template avec
res.render(view [, local variables] [, callback])
Ex : app.get('/', function (req, res) {
res.render('index', { title: ‘Accueil', msg: 'Bjr Visiteur!'});
});
Utilisation d’un moteur de template
syntaxe de jade
• Élements html : Indenter (au moins 2 espaces) pour hiérarchiser
• Text interne
– 1 ligne : suffixer l’elt HTML d’un espace suivi du texte
– +sieurs lignes : suffixer l’elt HTML d’un point et commencer
le texte à la ligne suivante avec des indentations à chaque
ligne
• Attributs : liste entre-parenthèses devant l’élément HTML
• id : suffixer l’elt HTML d’un # suivi de l’identifiant
• class : suffixer l’elt HTML d’un . suivi du nom de la classe
• Variable
– Suffixer l’elt HTML d’un = suivi d’un espace et de la variable
– Suffixer l’elt HTML d’un != suivi d’un espace et de la variable
– #{nomVariable} n’importe où dans le texte
Utilisation d’un moteur de template
jade et structures de contrôle
• Condition
• Itération
//- Syntaxe
if (condition)
element text
else
element autreText
//- Exemple
- badge=true
if (badge)
p Bienvenu
else
p Accès interdit
//- Syntaxe
for item in list
element= item
//- Exemple
- list_nbr= {1:'one',2:'two',3:'three'}
ul
each val, index in list_nbr
li= index + ': ' + val
//- autre syntaxe
each val[, index] in list
element= utiliser val et index
<ul>
<li>1: one</li>
<li>2: two</li>
<li>3: three</li>
</ul>
Utilisation d’un moteur de template
exemple : index.jade
//- views/index.jade
doctype html
html
head
title!= title
body
h1!= message
res.render('index', { title: 'Accueil', message: 'Bonjour visiteur!'});
<doctype html>
<html>
<head>
<title>Accueil</title>
<body>
<h1>Bonjour visiteur ! </h1>
</body>
et
donnent
Persistance des données
présentation
• Express peut communiquer avec plusieurs SGBD dont
Cassandra, SQLite, Redis, MySQL, PostgreSQL, MongoDB, …
• Il suffit juste d’installer le driver du SGBD
• Quelques drivers de mongoDB (le plus utilisé avec Express)
– node-mongodb-native
• La plupart des autres reposent sur ce driver
• Inconvénient : multiplicité des callbacks
– mongoose
• Pour créer un ORM (object-relational mapping) pour une
bdd à schéma
– mongoskin
• Enveloppe de node-mongodb-native pour le simplifier
• Plus léger que mongoose
Persistance des données
avec mongoskin
1) On suppose le serveur mongodb installé et opérationnel
(cf. http://fr.slideshare.net/adieng/introduction-mongodb)
2) Installer localement le module mongoskin
npm install mongoskin
3) Importer mongoskin dans l’application
4) Se connecter au serveur mongodb et sélectionner une bdd
var
DB_NAME=mongo.db("mongodb://[user:pass@]host:port/DB_NAME");
5) Choisir une collection
var COLL_NAME = DB_NAME.collection('COLL_NAME');
Exemple
var mongo = require('mongoskin');
var usersdb=mongo.db("mongodb://localhost:27017/usersdb");
var users=usersdb.collection('users');
Persistance des données
insérer des données
• Syntaxe
collection.insert( <doc or array of docs)>, function(err,
doc_ins){
// Erreur ou ajout
});
NB : collection est une variable qui stocke la collection choisie
• Exemple
var $someusers =[
{ prenom:"moussa", sexe:true, age:30, taille:1.85 },
{ prenom:"sokhna", sexe:false, age:34 }
];
var usersdb=mongo.db("mongodb://localhost:27017/usersdb");
var users=usersdb.collection('users');
users.insert($someusers, function(err, doc_ins) {
if(err) console.log (err);
if (doc_ins) console.log(doc_ins);
Persistance des données
consulter des données
• Syntaxe
collection.find((<query>, <fields>).toArray(function(err, rslt){
// Erreur ou traitement de rslt
});
• Exemple
var usersdb=mongo.db("mongodb://localhost:27017/usersdb");
var users=usersdb.collection('users');
users.find({sexe:false},{prenom:1,_id=0}).toArray(function(err,
rslt) {
if(err) console.log (err);
if(rslt) console.log(rslt);
});
Persistance des données
modifier des données
• Syntaxe
collection.update(<query>,<updates>,<options>,
function(err, nombre){
// Erreur ou modif
});
• Exemple
var usersdb=mongo.db("mongodb://localhost:27017/usersdb");
var users=usersdb.collection('users');
users.update({prenom:'nafi'},{$inc:{age:8}},function(err,nbr) {
if (err) console.log(err);
if(nbr) console.log(nbr+' doc (s) modifié(s)');
});
Persistance des données
supprimer des données
• Syntaxe
collection.remove(<query>,function(err, nombre){
// Erreur ou suppression
});
• Exemple
var usersdb=mongo.db("mongodb://localhost:27017/usersdb");
var users=usersdb.collection('users');
users.remove({prenom:'moussa'},function(err, nbr) {
if (err) console.log(err);
if(nbr) console.log(nbr+' doc (s) supprimé(s)');
});
Persistance des données
autres méthodes
• collection.findById(id, <fields>, function(err, rslt){ … });
• collection.updateById(id, <updates>,<options>,
function(err, nbr){ … });
• collection.removeById(id, function(err, nbr){ … });
• Exemple
var usersdb=mongo.db("mongodb://localhost:27017/usersdb");
var users=usersdb.collection('users');
users.findById(req.params.id, {prenom:1},function(err, user) {
if(err) throw(err);
if(apprenant) console.log(rslt);
});
Utilisation des middlewares
présentation
• Middleware : ensemble de fonction(s) invoquée(s) entre une
requête et une réponse pour fournir une fonctionnalité
Ex : body-parser, multer, cookie-session, morgan, serve-favicon.
• Un middleware peut :
– agir sur les objets req et res ;
– arrêter le cycle requête-réponse
– appeler le middleware qui le suit sur la pile
• Syntaxe de définition :
app.use([/mount/path,] nomMdw());
ou app.use([/mount/path,] function([err,] req,res,next){…});
– mount/path : limite l’exécution du mdlw à certaines requêtes
– err : paramètre réservé aux traitements des erreurs
– next : callback vers le prochain middleware
Utilisation des middlewares
exemple
…
app.use(bodyParser.urlencoded({ extended: false }));
…
// mettre la connexion à la bdd à la disponibilité du router
app.use(function(req,res,next) {
req.db=db;
next();
});
…
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(404).send('Ressource introuvable !');
});
Documentation
• http://en.wikipedia.org/wiki/Node.js
• http://www.infoq.com/interviews/node-ryan-dahl
• http://openclassrooms.com/courses/des-applications-ultra-
rapides-avec-node-js
• http://expressjs.com/4x/api.html
• https://github.com/expressjs/body-parser
• https://github.com/expressjs/multer/
• http://naltatis.github.io/jade-syntax-docs/#basics
• http://webapplog.com/express-js-4-node-js-and-mongodb-
rest-api-tutorial/
• https://www.omniref.com/js/npm/mongoskin/0.5.0/files

Contenu connexe

Tendances

Sécurité des Applications WEB -LEVEL1
 Sécurité des Applications WEB-LEVEL1 Sécurité des Applications WEB-LEVEL1
Sécurité des Applications WEB -LEVEL1
Tarek MOHAMED
 

Tendances (20)

React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Gestion comptes bancaires Spring boot
Gestion comptes bancaires Spring bootGestion comptes bancaires Spring boot
Gestion comptes bancaires Spring boot
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
 
Nest.js Introduction
Nest.js IntroductionNest.js Introduction
Nest.js Introduction
 
Modele mvc
Modele mvcModele mvc
Modele mvc
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Sécurité des Applications WEB -LEVEL1
 Sécurité des Applications WEB-LEVEL1 Sécurité des Applications WEB-LEVEL1
Sécurité des Applications WEB -LEVEL1
 
Marzouk architecture encouches-jee-mvc
Marzouk architecture encouches-jee-mvcMarzouk architecture encouches-jee-mvc
Marzouk architecture encouches-jee-mvc
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Support Java Avancé Troisième Partie
Support Java Avancé Troisième PartieSupport Java Avancé Troisième Partie
Support Java Avancé Troisième Partie
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 

En vedette

souvenirs 2007
souvenirs 2007souvenirs 2007
souvenirs 2007
kivars
 

En vedette (20)

Présentation de Node.js
Présentation de Node.jsPrésentation de Node.js
Présentation de Node.js
 
Cours uml
Cours umlCours uml
Cours uml
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
 
Modélisation avec UML
Modélisation avec UMLModélisation avec UML
Modélisation avec UML
 
In01 - Programmation Android - 07 - techniques avancées
In01 - Programmation Android - 07 - techniques avancéesIn01 - Programmation Android - 07 - techniques avancées
In01 - Programmation Android - 07 - techniques avancées
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Getting Tech Right
Getting Tech Right Getting Tech Right
Getting Tech Right
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
AngularJS
AngularJSAngularJS
AngularJS
 
El mundo esta cambiando
El mundo esta cambiandoEl mundo esta cambiando
El mundo esta cambiando
 
Test 1
Test 1Test 1
Test 1
 
souvenirs 2007
souvenirs 2007souvenirs 2007
souvenirs 2007
 
2010 hiver-5.2
2010 hiver-5.22010 hiver-5.2
2010 hiver-5.2
 
Mini site 20141216 mini-sites-j3
Mini site 20141216 mini-sites-j3Mini site 20141216 mini-sites-j3
Mini site 20141216 mini-sites-j3
 
Competencias (2)
Competencias (2)Competencias (2)
Competencias (2)
 
Cours fle
Cours fleCours fle
Cours fle
 
SIMU INSTRUCTOR STATION
SIMU INSTRUCTOR STATIONSIMU INSTRUCTOR STATION
SIMU INSTRUCTOR STATION
 
Ben moussa hamza
Ben moussa hamzaBen moussa hamza
Ben moussa hamza
 

Similaire à Initiation à Express js

Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
Abdoulaye Dieng
 
cours8-GL-minfo-1718.pdf
cours8-GL-minfo-1718.pdfcours8-GL-minfo-1718.pdf
cours8-GL-minfo-1718.pdf
SliimAmiri
 

Similaire à Initiation à Express js (20)

Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022
 
Azure Camp 9 Décembre - slides session développeurs webmedia
Azure Camp 9 Décembre - slides session développeurs webmediaAzure Camp 9 Décembre - slides session développeurs webmedia
Azure Camp 9 Décembre - slides session développeurs webmedia
 
YaJUG - Spring 3.0
YaJUG - Spring 3.0YaJUG - Spring 3.0
YaJUG - Spring 3.0
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
nodejs.pdf
nodejs.pdfnodejs.pdf
nodejs.pdf
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)
 
spring.pdf
spring.pdfspring.pdf
spring.pdf
 
Serveurs
ServeursServeurs
Serveurs
 
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...
 
Workshop - Lightning Web Components
Workshop - Lightning Web ComponentsWorkshop - Lightning Web Components
Workshop - Lightning Web Components
 
Workshop Lightning Web Components
Workshop Lightning Web ComponentsWorkshop Lightning Web Components
Workshop Lightning Web Components
 
Introduction à node.js
Introduction à node.js Introduction à node.js
Introduction à node.js
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linux
 
cours8-GL-minfo-1718.pdf
cours8-GL-minfo-1718.pdfcours8-GL-minfo-1718.pdf
cours8-GL-minfo-1718.pdf
 

Plus de Abdoulaye Dieng

Plus de Abdoulaye Dieng (20)

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
 
Architecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesArchitecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donnees
 

Initiation à Express js

  • 2. Objectif général Prendre en main Express js, le mini-framework de Node js le plus utilisé
  • 3. Objectifs spécifiques • Installer Node js et Express js • Créer une application Express js • Router les requêtes • Recevoir des données à partir de l’URL d’une requête • Recevoir des données à partir du corps d’une requête • Traiter des fichiers uploadés • Utiliser un moteur de template • Utiliser une base de données • Utiliser des middlewares
  • 4. Sommaire 1) Présentation de Node js 2) Présentation de Express js 3) Installation de Express js 4) Création d’une application Express js 5) Routage des requêtes 6) Réception des données à partir de l’URL 7) Réception des données à partir du corps 8) Traitement des fichiers uploadés 9) Utilisation d’un moteur de template 10) Persistance des données 11) Utilisation des middlewares
  • 5. Présentation de Node js • Node est non bloquant : idéal pour les applications en temps réel • Node est très bas niveau : rapidité mais difficulté de prise en main (intérêt des framework comme Express js) • Adopté par Microsoft, Yahoo!, Groupon, LinkedIn, PayPal, … • Pb-déclic : le navigateur ignore l’état de progression, en temps réel, de l’upload d’un fichier • Sol : créer une application permettant au serveur de pousser, à temps réel, de l'information au navigateur. • Node js : plate-forme construite sur le moteur JavaScript V8 de Google Chrome pour développer facilement des applications de réseau rapides et évolutives.(Créateur : Ryan Dahl en 2009) https://blog.newrelic.com/2012/07/11/recap-of-nodeconf-2012/
  • 6. Présentation de Express js • Express est un framework Node.js minimal et flexible • Il permet d'utiliser plusieurs fonctionnalités très utiles et puissantes sans avoir à réinventer la roue • Il facilite l’organisation de l’application en partant de la requête à la réponse, en passant par la pile de middlewares, le routage et les templates.
  • 7. Installation de Express js • Prérequis télécharger et installer le binaire (msi) nodeJS depuis : http://nodejs.org/ • Installer localement express js avec les commandes suivantes – mkdir myapp Créer un dossier pour l’app – cd myapp Se mettre sur ce dossier – npm install express lancer l’installation • Vérifier la création du dossier node_modules contenant express
  • 8. Création d’une application • Saisir dans un fichier app.js (par exple) du dossier myapp 1) var express = require('express'); Importer le module express dans l’applicaton 2) var app = express(); Créer l’application app qui est une instance de express 3) var server = app.listen(xxxx) instancier un serveur Web qui écoute sur le n° de port xxxx spécifié • Démarrer l’application avec la commande : node app.js
  • 9. Routage des requêtes présentation • Le routage permet de déterminer comment l’application doit répondre à une requête en fonction de l’URL • Syntaxe de la définition d’une route : app.method(path, handler) – app : instance de express – method : méthode HTTP (GET, POST, PUT, DELETE, …) – path: adresse relative de la ressource – handler : traitement ou fonction à exécuter • Exemple app.get('/contact', function(req, res) { res.send("Bienvenue sur la page de contact !"); });
  • 10. Routage des requêtes route dynamique • Route dynamique : route avec portion(s) variable(s) • La syntaxe d’une portion variable est :nomVariable • Exemple app.get('/users/:name', function(req, res) { res.send("Vous êtes sur le compte de"+req.params.name); });
  • 11. Réception des données à partir de l’URL • Données transmises via l’URL Ex : http://www.animaux.com:8080/felins/search?q=tigre • Paramètre du chemin (path) : – Syntaxe d’accès : req.params.nomVariable – Exemple : avec la route "GET /:type/search" et l’URL "/:felins/search", req.params.name contient "felins" • Paramètre de la requête (query) – Syntaxe d’accès : req.query.nomVariable – Exemple : avec l’URL "/search?q=tigre", req.query.q contient "tigre" path query
  • 12. Réception des données à partir du corps • Données incluses dans le corps (body) de la requête avec les méthodes POST, PUT ou DELETE. • Installer localement le module body-parser • Importer body-parser dans l’application var bodyParser = require('body-parser'); • Définir body-parser comme middleware app.use(bodyParser.urlencoded({ extended: false })) • Syntaxe : – Toutes les données : req.body – Une seule donnée : req.body.nomVariable
  • 13. Traitement des fichiers uploadés • Installer localement le module multer • Importer multer dans l’application • Définir multer comme middleware et configurer la nomenclature et la destination des fichiers uploadés app.use(multer({ dest : './uploads/', rename : function (fieldname, filename,req,res) { return … } })); • L’objet req.files stocke les infos (fieldname, originalname, name, mimetype, path, extension, size, …) sur chaque fichier uploadé • req.body est aussi analysé mais seulement après l’upload complète du fichier
  • 14. Utilisation d’un moteur de template présentation • Template : modèle décrivant la manière dont les données sont composées pour former l'aspect final d'une page Web ou d'une partie d’une page Web • Installer localement le module (jade, ejs, mustache, …) • Préciser le répertoire de stockage des templates Ex : app.set('views', __dirname + '/views'); • Préciser le moteur de template à utilser Ex : app.set('view engine', 'jade'); • Créer un fichier dans le dossier des templates Ex : index.jade dans le dossier views • Définir une route pour proposer le fichier template avec res.render(view [, local variables] [, callback]) Ex : app.get('/', function (req, res) { res.render('index', { title: ‘Accueil', msg: 'Bjr Visiteur!'}); });
  • 15. Utilisation d’un moteur de template syntaxe de jade • Élements html : Indenter (au moins 2 espaces) pour hiérarchiser • Text interne – 1 ligne : suffixer l’elt HTML d’un espace suivi du texte – +sieurs lignes : suffixer l’elt HTML d’un point et commencer le texte à la ligne suivante avec des indentations à chaque ligne • Attributs : liste entre-parenthèses devant l’élément HTML • id : suffixer l’elt HTML d’un # suivi de l’identifiant • class : suffixer l’elt HTML d’un . suivi du nom de la classe • Variable – Suffixer l’elt HTML d’un = suivi d’un espace et de la variable – Suffixer l’elt HTML d’un != suivi d’un espace et de la variable – #{nomVariable} n’importe où dans le texte
  • 16. Utilisation d’un moteur de template jade et structures de contrôle • Condition • Itération //- Syntaxe if (condition) element text else element autreText //- Exemple - badge=true if (badge) p Bienvenu else p Accès interdit //- Syntaxe for item in list element= item //- Exemple - list_nbr= {1:'one',2:'two',3:'three'} ul each val, index in list_nbr li= index + ': ' + val //- autre syntaxe each val[, index] in list element= utiliser val et index <ul> <li>1: one</li> <li>2: two</li> <li>3: three</li> </ul>
  • 17. Utilisation d’un moteur de template exemple : index.jade //- views/index.jade doctype html html head title!= title body h1!= message res.render('index', { title: 'Accueil', message: 'Bonjour visiteur!'}); <doctype html> <html> <head> <title>Accueil</title> <body> <h1>Bonjour visiteur ! </h1> </body> et donnent
  • 18. Persistance des données présentation • Express peut communiquer avec plusieurs SGBD dont Cassandra, SQLite, Redis, MySQL, PostgreSQL, MongoDB, … • Il suffit juste d’installer le driver du SGBD • Quelques drivers de mongoDB (le plus utilisé avec Express) – node-mongodb-native • La plupart des autres reposent sur ce driver • Inconvénient : multiplicité des callbacks – mongoose • Pour créer un ORM (object-relational mapping) pour une bdd à schéma – mongoskin • Enveloppe de node-mongodb-native pour le simplifier • Plus léger que mongoose
  • 19. Persistance des données avec mongoskin 1) On suppose le serveur mongodb installé et opérationnel (cf. http://fr.slideshare.net/adieng/introduction-mongodb) 2) Installer localement le module mongoskin npm install mongoskin 3) Importer mongoskin dans l’application 4) Se connecter au serveur mongodb et sélectionner une bdd var DB_NAME=mongo.db("mongodb://[user:pass@]host:port/DB_NAME"); 5) Choisir une collection var COLL_NAME = DB_NAME.collection('COLL_NAME'); Exemple var mongo = require('mongoskin'); var usersdb=mongo.db("mongodb://localhost:27017/usersdb"); var users=usersdb.collection('users');
  • 20. Persistance des données insérer des données • Syntaxe collection.insert( <doc or array of docs)>, function(err, doc_ins){ // Erreur ou ajout }); NB : collection est une variable qui stocke la collection choisie • Exemple var $someusers =[ { prenom:"moussa", sexe:true, age:30, taille:1.85 }, { prenom:"sokhna", sexe:false, age:34 } ]; var usersdb=mongo.db("mongodb://localhost:27017/usersdb"); var users=usersdb.collection('users'); users.insert($someusers, function(err, doc_ins) { if(err) console.log (err); if (doc_ins) console.log(doc_ins);
  • 21. Persistance des données consulter des données • Syntaxe collection.find((<query>, <fields>).toArray(function(err, rslt){ // Erreur ou traitement de rslt }); • Exemple var usersdb=mongo.db("mongodb://localhost:27017/usersdb"); var users=usersdb.collection('users'); users.find({sexe:false},{prenom:1,_id=0}).toArray(function(err, rslt) { if(err) console.log (err); if(rslt) console.log(rslt); });
  • 22. Persistance des données modifier des données • Syntaxe collection.update(<query>,<updates>,<options>, function(err, nombre){ // Erreur ou modif }); • Exemple var usersdb=mongo.db("mongodb://localhost:27017/usersdb"); var users=usersdb.collection('users'); users.update({prenom:'nafi'},{$inc:{age:8}},function(err,nbr) { if (err) console.log(err); if(nbr) console.log(nbr+' doc (s) modifié(s)'); });
  • 23. Persistance des données supprimer des données • Syntaxe collection.remove(<query>,function(err, nombre){ // Erreur ou suppression }); • Exemple var usersdb=mongo.db("mongodb://localhost:27017/usersdb"); var users=usersdb.collection('users'); users.remove({prenom:'moussa'},function(err, nbr) { if (err) console.log(err); if(nbr) console.log(nbr+' doc (s) supprimé(s)'); });
  • 24. Persistance des données autres méthodes • collection.findById(id, <fields>, function(err, rslt){ … }); • collection.updateById(id, <updates>,<options>, function(err, nbr){ … }); • collection.removeById(id, function(err, nbr){ … }); • Exemple var usersdb=mongo.db("mongodb://localhost:27017/usersdb"); var users=usersdb.collection('users'); users.findById(req.params.id, {prenom:1},function(err, user) { if(err) throw(err); if(apprenant) console.log(rslt); });
  • 25. Utilisation des middlewares présentation • Middleware : ensemble de fonction(s) invoquée(s) entre une requête et une réponse pour fournir une fonctionnalité Ex : body-parser, multer, cookie-session, morgan, serve-favicon. • Un middleware peut : – agir sur les objets req et res ; – arrêter le cycle requête-réponse – appeler le middleware qui le suit sur la pile • Syntaxe de définition : app.use([/mount/path,] nomMdw()); ou app.use([/mount/path,] function([err,] req,res,next){…}); – mount/path : limite l’exécution du mdlw à certaines requêtes – err : paramètre réservé aux traitements des erreurs – next : callback vers le prochain middleware
  • 26. Utilisation des middlewares exemple … app.use(bodyParser.urlencoded({ extended: false })); … // mettre la connexion à la bdd à la disponibilité du router app.use(function(req,res,next) { req.db=db; next(); }); … // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers app.use(function(err, req, res, next) { console.error(err.stack); res.status(404).send('Ressource introuvable !'); });
  • 27. Documentation • http://en.wikipedia.org/wiki/Node.js • http://www.infoq.com/interviews/node-ryan-dahl • http://openclassrooms.com/courses/des-applications-ultra- rapides-avec-node-js • http://expressjs.com/4x/api.html • https://github.com/expressjs/body-parser • https://github.com/expressjs/multer/ • http://naltatis.github.io/jade-syntax-docs/#basics • http://webapplog.com/express-js-4-node-js-and-mongodb- rest-api-tutorial/ • https://www.omniref.com/js/npm/mongoskin/0.5.0/files