TP 5 : Framework Express et Mongodb

Ce TP s’intéresse à l’implémentation de la partie Backend (server-side) du notre

application à travers une architecture moderne construite sur une API RESTful (un
serveur API). Cette API va alimenter notre client (Frontend) développé dans les TPs
précédents. Nous prévoyons les étapes suivantes :

• Mise en place d’un serveur de données Mongodb.

• Création d’un serveur NodeJS en utilisant le Framework Express.
• Définition de l’API Backend avec des routes via le module Router Express.
• Utilisation de module Mongoose comme passerelle entre NodeJS et Mongodb
afin de créer les fonctions de manipulation (CRUD).
• Tester notre API Backend avec l’outil Postman.

Etapes d’implémentations

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 1

 1. Mise en place de Mongodb.
a. Télécharger et installer Mongodb depuis le lien Télécharger et installer
Mongodb depuis le lien
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-
windows/#install-mdb-edition
Téléchargement : https://www.mongodb.com/download-
center?jmp=nav#community
b. Configurer Mongodb en utilisant la documentation officielle (pour Windows):
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-
windows/#start-mdb-edition-from-the-command-interpreter
i. Créer les répertoires C:\data\db (c’est le répertoire du travail de
MongoDB)

ii. Démarrer Mongodb (le chemin C:\data\db comme stockage par

défaut). Le serveur Mongodb utilise par défaut le port 27017.

c. Dans une autre fenêtre, créer votre première base de données (en utilisant la
commande use)

2. Mise en place du Framework Express.

a. Créer un répertoire (training-app) de travail pour héberger votre application.
b. Utiliser la commande npm init afin de créer le fichier de
configuration package.json pour votre application. Cette commande vous
invite à saisir un certain nombre d’informations (nom, auteurs, description,
etc.). Appuyer sur la touche ENTRER pour accepter les valeurs par défaut, à
l’exception de fichier JavaScript principal (propriétés entry point).Vous pouvez
fournir app.js comme point d’entrée pour votre application.

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 2

 c. Installer le Framework Express dans le répertoire training-app en utilisant la
commande npm install express –save. Cette commande permet de
sauvegarder Express dans la liste des dépendances.

Remarque

Une autre option consiste à mettre en place le Framework Express en utilisant l’outil
Générateur d’applications. Cet outil permet de créer rapidement une arborescence
d’application en incluant un modèle de Template pour la partie Vue (appelé souvent moteur
de modèles comme Jade, Pug, EJS, etc.). Pour plus d’informations, visitre la page officielle
d’Express :

http://expressjs.com/fr/starter/generator.html

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 3

 3. Installer les dépendances mongoose, cors et body-parser.
a. Mongoose est un object document mapper qui va servir de passerelle entre
notre NodeJS et MongoDB.
b. Le module cors (Cross-Origin Resource Sharing) fournit un moyen aux
serveurs web de contrôler les accès en mode cross-site et aussi d'effectuer
des transferts de données sécurisés en ce mode. Les requêtes HTTP de
type Cross-site sont des requêtes pour des ressources localisées sur un
domaine différent de celui à l'origine de la requête. Dans notre application on
active le cross-site car notre client Angular (Frontend) est lancé sur un
localhost:4200 et que notre serveur NodeJS (Backend) tourne sur
localhost:3000. Et donc le fait de l'activer nous permet de faire des requêtes
entre ces différents ports.
c. Le module body-parser permet de récupérer une réponse JSON sous forme
d'objet.
4. Implémenter l’application.
a. Créer le fichier app.js
//import dependencies modules
const express = require('express');
const path = require('path');
const cors = require('cors');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

//init express (create the server)

var app = express();

// adding middlewares cors and body-parser

app.use(cors());
app.use(bodyParser.json());

//port number
const port =3000;
app.listen(port,function(){
console.log('Server started at port:'+port);
});

//Testting server
app.get('/', (req, res)=>{res.send('Hi NTS!');});
b. Exécuter le script app.js et tester le serveur Express.
c. En utilisant le module Mongoose, créer le modèle (schéma) de la base de
données Mongodb.
i. Créer le dossier models.

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 4

 ii. Créer un nouveau schéma Session sauvegardé dans le fichier
sessions.js. Pour plus d’informations sur les schémas consultez le lien
http://mongoosejs.com/docs/guide.html
const mongoose = require('mongoose');
const SessionSchema = mongoose.schema({

name:{type: String,
required: true
},
track:{type: String,
required: true
},
date:{type: Date,
required: true
},
duree:{type: Number,
required: true
},
adress:{type: String,
required: true
},
participants:{type: Number , min : 0, max : 20,
required: true
},
isCompleted: {
type: Boolean,
default: false
}
});
const Session = module.exports = mongoose.model('Session',
SessionSchema);
iii. On veut maintenant se connecter à notre base de données MongoDB.
Insérer le code suivant dans le fichier app.js.
//connect to mongodb
mongoose.connect('mongodb://localhost:27017/training
-app', {useMongoClient: true});
//on connection ok
mongoose.connection.on('connected',()=>{
console.log('Connected to mongodb server at
27017 port');
});
//on connection error
mongoose.connection.on('error',(err)=>{
if (err)
{
console.log('Error connection to mongodb
server at 27017: '+err);
}
});

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 5

 d. On veut maintenant développer nos fonctions de manipulation (CRUD) pour
gérer les sessions de formation. Ces fonctions sont appelées souvent des
middlewares. Chaque fonction va correspondre à une route (souvent appelée
api qui sera consommée par le client frontend).
i. Créer un nouveau dossier routes
ii. Dans routes, créer le fichier routes.js avec le contenu suivant.
const express = require('express');
const router = express.Router();

//API get all sessions

router.get('/sessions', function(req, res, next) {
res.send('Liste des sessions de formations');
});

//API ajouter session

router.post('/session', (req, res, next)=>{

});

//API supprimer session

router.delete('/session/:id', (req, res, next)=>{

});
module.exports = router;

iii. Importer le fichier route.js dans le fichier app.js.

//import routes
const route = require('./routes/route');
app.use('/api', route);
iv. Exécuter le script app.js afin de tester les routes.
e. Compléter l’implémentation de la route /session qui permettra d’ajouter une
nouvelle session de formation dans la base de données Mongodb.
i. Importer le modèle Mongodb dans le fichier routes.js :
const Session = require('../models/sessions');
ii. L’api pour ajouter une session :
// API ajouter session
router.post('/session', (req, res, next)=>{
// res.send('Ajouter une session');
//create new session from request
let newSession = new Session();
newSession.name = req.body.name;
newSession.track = req.body.track;
newSession.date = req.body.date;
newSession.duree = req.body.duree;
newSession.adress = req.body.adress;
newSession.participants = req.body.participants;
newSession.isCompleted = req.body.isCompleted;

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 6

 //insert into database
newSession.save((err,session)=>{
if (err)
{
res.json({msg: 'Failed to add session'});
}
else {
res.json({msg: 'Session added
successfully'});
}
});
});

iii. Utiliser l’outil Postman pour tester l’api développée. Postamn est disponible
sur Google Chrome.
• Installer et configurer Postman :

• Ajouter le Header content-type JSON :

• Tester la requête POST en utilisant l’URL localhost :3000/api/session:

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 7

 • Vérifier l’ajout dans la base de données Mongodb.

f. Compléter l’implémentation de la route /sessions qui permettra de récupérer

la liste des formations depuis la base de données Mongodb.
i. L’api pour afficher les sessions :
//get all sessions
router.get('/sessions', function(req, res, next) {
// res.send('Liste des sessions de formations');
Session.find(function(err, sessions){
res.json(sessions);

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 8

 });
});
ii. Tester avec Postman

g. Compléter l’implémentation de la route /session/:id qui permettra de

supprimer une formation à partir de son ID.
i. L’api pour supprimer une session :
//supprimer session
router.delete('/session/:id', (req, res, next)=>{
Session.remove({_id: req.params.id}, function(err,
result){
if (err)
{
res.json(err);
}
else
{
res.json(result);
}
});
});

ii. Tester avec Postman

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 9

 • Faire une requête GET pour récupérer l’ID de la session à
supprimer.

• Lancer la requête DELETE

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 10

 • Refaire une requête GET pour vérifier la suppression.

Ens. Walid SAAD Mat. Web Avancé Sec. Génie Informatique 11