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

Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.jsBruno Bonnin
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTtayebbousfiha1
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockageLilia Sfaxi
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSSSamuel Robert
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1Sem Koto
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWSLilia Sfaxi
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesENSET, Université Hassan II Casablanca
 
Formation PHP
Formation PHPFormation PHP
Formation PHPkemenaran
 

Tendances (20)

Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockage
 
Express JS
Express JSExpress JS
Express JS
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Spring ioc
Spring iocSpring ioc
Spring ioc
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
 

En vedette

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
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
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
 

Similaire à Initiation à Express js

Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
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...Microsoft
 
Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022Laurent Guérin
 
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 webmediaMicrosoft
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDOAbdoulaye Dieng
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJSVISEO
 
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)Joffrey LEVEUGLE
 
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...Nathalie Richomme
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linuxKhalid ALLILI
 
cours8-GL-minfo-1718.pdf
cours8-GL-minfo-1718.pdfcours8-GL-minfo-1718.pdf
cours8-GL-minfo-1718.pdfSliimAmiri
 

Similaire à Initiation à Express js (20)

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
 
Remote method invocation
Remote method invocationRemote method invocation
Remote method invocation
 

Plus de Abdoulaye Dieng

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturelAbdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobilesAbdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPressAbdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API RESTAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchronesAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
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-15Abdoulaye Dieng
 
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 2015Abdoulaye Dieng
 
Architecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesArchitecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesAbdoulaye 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