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
• Recevoi...
Sommaire
1) Présentation de Node js
2) Présentation de Express js
3) Installation de Express js
4) Création d’une applicat...
Présentation de Node js
• Node est non bloquant : idéal pour les
applications en temps réel
• Node est très bas niveau : r...
Présentation de Express js
• Express est un framework Node.js minimal et flexible
• Il permet d'utiliser plusieurs fonctio...
Installation de Express js
• Prérequis
télécharger et installer le binaire (msi) nodeJS depuis :
http://nodejs.org/
• Inst...
Création d’une application
• Saisir dans un fichier app.js (par exple) du dossier myapp
1) var express = require('express'...
Routage des requêtes
présentation
• Le routage permet de déterminer comment l’application doit
répondre à une requête en f...
Routage des requêtes
route dynamique
• Route dynamique : route avec portion(s) variable(s)
• La syntaxe d’une portion vari...
Réception des données à partir de l’URL
• Données transmises via l’URL
Ex : http://www.animaux.com:8080/felins/search?q=ti...
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 ...
Traitement des fichiers uploadés
• Installer localement le module multer
• Importer multer dans l’application
• Définir mu...
Utilisation d’un moteur de template
présentation
• Template : modèle décrivant la manière dont les données sont
composées ...
Utilisation d’un moteur de template
syntaxe de jade
• Élements html : Indenter (au moins 2 espaces) pour hiérarchiser
• Te...
Utilisation d’un moteur de template
jade et structures de contrôle
• Condition
• Itération
//- Syntaxe
if (condition)
elem...
Utilisation d’un moteur de template
exemple : index.jade
//- views/index.jade
doctype html
html
head
title!= title
body
h1...
Persistance des données
présentation
• Express peut communiquer avec plusieurs SGBD dont
Cassandra, SQLite, Redis, MySQL, ...
Persistance des données
avec mongoskin
1) On suppose le serveur mongodb installé et opérationnel
(cf. http://fr.slideshare...
Persistance des données
insérer des données
• Syntaxe
collection.insert( <doc or array of docs)>, function(err,
doc_ins){
...
Persistance des données
consulter des données
• Syntaxe
collection.find((<query>, <fields>).toArray(function(err, rslt){
/...
Persistance des données
modifier des données
• Syntaxe
collection.update(<query>,<updates>,<options>,
function(err, nombre...
Persistance des données
supprimer des données
• Syntaxe
collection.remove(<query>,function(err, nombre){
// Erreur ou supp...
Persistance des données
autres méthodes
• collection.findById(id, <fields>, function(err, rslt){ … });
• collection.update...
Utilisation des middlewares
présentation
• Middleware : ensemble de fonction(s) invoquée(s) entre une
requête et une répon...
Utilisation des middlewares
exemple
…
app.use(bodyParser.urlencoded({ extended: false }));
…
// mettre la connexion à la b...
Documentation
• http://en.wikipedia.org/wiki/Node.js
• http://www.infoq.com/interviews/node-ryan-dahl
• http://openclassro...
Prochain SlideShare
Chargement dans…5
×

Initiation à Express js

854 vues

Publié le

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

Publié dans : Logiciels
1 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
854
Sur SlideShare
0
Issues des intégrations
0
Intégrations
16
Actions
Partages
0
Téléchargements
7
Commentaires
1
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Initiation à Express js

  1. 1. Initiation à Abdoulaye DIENG
  2. 2. Objectif général Prendre en main Express js, le mini-framework de Node js le plus utilisé
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×