m4201 javascript technologiesjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-cm3.pdf · 2...

M4201 Javascript Technologies

NodeJS

Jérôme Landré & Fabrice Meuzeret

DUT Métiers du Multimédia et de l'InternetI.U.T. de Troyes

Université de Reims Champagne-Ardenne

2

Overview

I- A video to begin with…

II- Introduction to Node.js

III- Blocking vs. Non-blocking code

IV- First example with Node.js

V- Web pages with Node.js

VI- Routes with Node.js

VII- MEAN

VIII- Interactions MySQL/Node.js

IX- Interactions AngularJS/Node.js

3

I- A video to begin with...

4

Node.js● There exist many video resources to learn

Node.js on YouTube● Among them, The codeSchool course on

Node.js is excellent:

https://www.youtube.com/watch?v=GJmFG4ffJZU

https://www.youtube.com/watch?v=GJmFG4ffJZU

5

II- Introduction to Node.js

6

Introduction to Node.js● Node.js allows to create non-blocking network

applications on the server-side● Node.js uses javascript

● Node.js is not:– A web framework

– For beginners (low-level)

– Multi-thread

Node.jsGoogle Chrome

V8 JavaScript Runtime Quick because written in C !

7

Node.js

8

Node.js

10

III- Blocking vs. Non-blocking Code

11

Print a file● Blocking code:

read the file, "fill" the content variable

print "content"

do something else

12



print "content"

do something else

13



print "content"

do something else

14



print "content"

do something else

15



print "content"

do something else

● Non-blocking code:read the file

when it's done, print "content"

do something else

16



print "content"

do something else



do something else

17



print "content"

do something else



do something else

18



print "content"

do something else



do something else

"callback" function(event programming)

19

In Javascript:● Blocking code:

var content = fs.readFileSync('/tmp/toto.txt');

console.log(content);

console.log('Do something else');

● Non-blocking code:fs.readFile('/tmp/toto.txt', function(err, content) {


});

console.log('Do something else');"callback" function

(event programming)

20

In Javascript:● Blocking code:

var content = fs.readFileSync('/tmp/toto.txt');



● Non-blocking code:fs.readFile('/tmp/toto.txt', function(err, content) {


});


21

In Javascript:● Non-blocking code:

fs.readFile('/tmp/toto.txt', function(err, content) {


});


● Non-blocking code with a function as a variable:var callback = function(err, content) {


};

fs.readFile('/tmp/toto.txt', callback);



22

In Javascript:● Non-blocking code:

fs.readFile('/tmp/toto.txt', function(err, content) {


});


● Non-blocking code with a function as a variable:var callback = function(err, content) {


};

fs.readFile('/tmp/toto.txt', callback);



"callback" functionas a variable

(event programming)

23

IV- First example with Node.js

24

Hello World!var http = require('http');

http.createServer(function(request, response) {response.writeHead(200);response.write("Hello World!");response.end();

}).listen(8080);

console.log('Listening on port 8080...');

node

01.js

25



}).listen(8080);


node

01.js

26



}).listen(8080);


node

01.js

27

Hello World!

28

Hello World!

Problem: it is not a web page!

29

V- Web pages with Node.js

30

Hello World! (web)var http = require('http');

http.createServer(function(request, response) {response.writeHead(200, {'Content-Type':'text/html'});response.write("<p>Hello <em>World</em>!</p>");response.end();

}).listen(8080);


node

02.js

31

Hello World! (web)

It's betterBUT

still not a web page!

32

Hello World! (web)var http = require('http');http.createServer(function(request, response) {

response.writeHead(200, {'Content-Type':'text/html'});response.write("<!DOCTYPE html>\n"+"<html lang='en'>\n<head>"+

"<meta charset=\"utf-8\" /></head>\n"+"<body>\n<p>Hello <em>World</em>!</p>\n</body>\n"+"</html>");response.end();

}).listen(8080);console.log('Listening on port 8080...');

node

03.js

33

Hello World! (web)var http = require('http');http.createServer(function(request, response) {

response.writeHead(200, {'Content-Type':'text/html'});response.write("<!DOCTYPE html>\n"+"<html lang='en'>\n<head>"+

"<meta charset=\"utf-8\" /></head>\n"+"<body>\n<p>Hello <em>World</em>!</p>\n</body>\n"+"</html>");response.end();

}).listen(8080);console.log('Listening on port 8080...');

node

02.js

34

VI- Routes with Node.js

35

Routes with Node.js● The "url" module permits to analyse data from the

URL

var url = require('url');

…

var page = url.parse(request.url).pathname;

if (page=='home') {

console.log('Page home!');

}

if (page=='details') {

console.log('Page details!');

}

36

Routes with Node.js● To get parameters passed with the GET

method (in the URL), we can use the "querystring" module:

var querystring = require('querystring');

var params = querystring.parse(url.parse(request.url).query)

if ('firstName' in params) {

console.log('Your firstName: '+params['firstName']);

}

37

VII- MEAN

38

MEAN● MEAN stands for MongoDB, Express, Angular,

Node.js● It is a set of tools to develop web applications● Some interesting sites (among others):

http://meanjs.org, http://mean.io● (We can replace MongoDB by MySQL)

http://meanjs.org/

http://mean.io/

39

VIII- Interactions MySQL/Node.js

40

Interactions MySQL/Node.js● Node.js is able to communicate with MySQL

(module 'sql')● We start with the database of teachers:

41

var express = require("express");var mysql = require("mysql");

var app = express();

var connexion = mysql.createConnection({ host : "localhost", user : "root", password : "", database : "testnode"});

connexion.connect(function(error){ if(error) { console.log("Problem with MySQL : "+error); } else { console.log("Connection to database OK..."); }});...

mea

n.jsmean.js

42

app.get('/', function(req, res) { res.end('<p>Bienvenue !</p>');});/* Launching request and getting response in a JSON variable */app.get('/charge',function(req, res){ connexion.query("SELECT * FROM personnes", function(error,rows){ if (error) { console.log("Problem with MySQL : "+error); connexion.end(); } else { res.end(JSON.stringify(rows)); } });});/* Starting the server */app.listen(3000, function(){ console.log("Server started on port 3000...");});

mea

n.jsmean.js

43

IX- Interactions AngularJS/Node.js

44

<!doctype html><html lang="fr" ng-app="appliEnseignants">

<head> <meta charset="utf-8" /><title>Les enseignants du département</title><script

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script><script src="enseignants_module.js"></script><link rel="stylesheet" type="text/css" href="style.css">

</head> <body>

<header> <h1>Les enseignants du département</h1></header><div class="page">

<div class="principal"><div ng-controller="EnseignantsController">

<p ng-repeat="enseignant in enseignants"> <span>{{enseignant.prenom}}{{enseignant.nom}}</span><br /> <span>{{enseignant.age}} ans.</span><br /> </p></div>

</div></div><footer>MMI3 - IUT de Troyes</footer>

</body></html>

teachers.html

45

var app=angular.module('appliEnseignants',[ ]);

app.controller('EnseignantsController',['$scope', '$http', function ($scope, $http) { $http.get('http://localhost:3000/charge') .success(function(data){ $scope.enseignants=data; });

}]);

enseignants_module.js

46

Security problem

● Security problem:Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:3000/charge. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS.

47

Security problem

● Security problem:Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:3000/charge. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS.

res.setHeader('Access-Control-Allow-Origin', '*');

res.setHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS, PATCH');

res.setHeader('Access-Control-Allow-Headers', 'origin, x-requested-with, content-type');

48

Final result

● Node.js reads data and AngularJS print them!

49

Partie non traduite en anglaismais à apprendre quand même !

50

I- Les modules de Node.js

51

1) Les modules de NodeJS● NodeJS permet d'importer des « modules »● C'est la fonction require() qui permet de les

charger● Exemple :

var url = require('url');

var http = require('http');

● Les modules contiennent des fonctions facilitant la programmation

● C'est l'utilitaire npm (Node Package Manager) qui permet de gérer les modules de NodeJS

52

2) Chercher des modules● Pour chercher un module, on utilise l'instruction

npm search suivie du nom du module à rechercher

● Exemple :

53

3) Installer un module● Pour installer un module, on utilise l'instruction

npm install suivie du nom du module à installer● Exemple :

54

La page des modules● La page des modules est : « www.npmjs.com »

55

4) Mettre à jour les modules● Pour mettre à jour les modules, on utilise

l'instruction npm update

56

5) Créer un module● Pour créer un module, on crée des fonctions

Node.js dans un fichier module, on les exporte afin qu'elles soient visibles

● On importe le fichier dans une application et on peut utiliser les fonctions du module

57

5) Créer un module● Module « mon_module.js » :

● Fichier de test « testmodule.js » :

var arriver=function() {console.log("Coucou, je suis arrivé !");

}

var partir=function() {console.log("Je rentre à la maison !");

}

exports.arriver = arriver;exports.partir = partir;

var monmodule=require('./mon_module.js');

monmodule.arriver();monmodule.partir();

58

5) Créer un module

59

6) Créer son module● Afin de gérer les dépendances de ses modules,

on va créer un fichier « package.json » dans le répertoire de notre module

● Ce fichier va servir à gérer les modules dont dépend notre application Node.js

{"name":"monappli","version":"0.1.2","dependencies": {

"http":"~4","url":"~0.10"

}}

60

Exercice :● 1) Ecrire et tester le module « mon_module.js »

présenté dans les pages précédentes● 2) Ajouter une fonction « moyenne » qui calcule

la moyenne de deux nombres passés en paramètres et qui affiche le résultat dans la console. Tester votre nouvelle fonction.

61

II- Le module « express »

62

1) Le module « express »● « express » est un module qui fournit un

framework simple pour créer des applications Node.js plus facilement

● Installer le module express avec la commande npm

63

2) Les routes avec « express »● On va créer des routes facilement avec

express :var express = require('express');var app = express(); app.get('/', function (req, res) { res.send('Hello World !');})app.get('/route1', function (req, res) { res.send('Route 1 !');})app.get('/route2', function (req, res) { res.send('Route 2 !');})app.use(function(req,res,next) {

res.setHeader("Content-type","text/html");res.send(404, "Page introuvable !");

})app.listen(3000);

express1.js

64

2) Les routes avec « express »● On peut aussi écrire tout à la suite :

var express = require('express');var app = express(); app.get('/', function (req, res) { res.send('Hello World !');}).get('/route1', function (req, res) { res.send('Route 1 !');}).get('/route2', function (req, res) { res.send('Route 2 !');}).use(function(req,res,next) {


})app.listen(3000);

express2.js

65

2) Les routes paramétrées● On peut aussi paramétrer facilement les

routes :var express = require('express');var app = express(); app.get('/', function (req, res) { res.send('Hello World !');})app.get('/route:numroute', function (req, res) { res.send('Route '+req.params.numroute+' !');})app.use(function(req,res,next) {


})app.listen(3000);

express3.js

66

Exercice :● 1) Tester les exemples précédents● 2) Ajouter une route « /age/:val » dans

laquelle :val est la valeur de l'age et afficher « Votre age est : » suivi de cette valeur à l'écran lors de l'appel à cette route

67

1) Le module mysql● Le module mysql permet de se connecter à une

base MySQL

68

1) le module mysql● a) Créer une base de données « testnode »● b) Créer une table « personnes » avec

phpMyAdmin :

● c) Remplir la table :

69

2) Interroger les données● On se connecte à la base et on définit la

requête :

var mysql = require('mysql');

var mySqlClient = mysql.createConnection({ host : "localhost", user : "root", password : "", database : "testnode", port : "3306"});

var selectQuery = 'SELECT * FROM personnes';...

connexion1.js

Attention, pour les utilisateurs de MAMP : port : "8889" et password : "root" !

70

2) Interroger les données● Lancer la requête et récupérer les résultats :

…mySqlClient.query( selectQuery, function select(error, results, fields) { if (error) { console.log(error); mySqlClient.end(); return; } if ( results.length > 0 ) { var firstResult = results[ 0 ]; console.log('numero : ' + firstResult['numero']); console.log('nom : ' + firstResult['nom']); console.log('prenom : ' + firstResult['prenom']); console.log('age : ' + firstResult['age']); } else { console.log("Pas de données"); } mySqlClient.end(); });

connexion1.js(suite)

71

2) Interroger les données● Lancer la requête et récupérer les résultats :

72

Exercice :● 1) Créer la base, la table, les données dans un

MySQL local (WAMP, MAMP, LAMP)● 2) Tester l'exemple d'utilisation du module

mysql précédent

73

Exercice :● 1) Créer la base, la table, les données dans un

MySQL local (WAMP, MAMP, LAMP)● 2) Tester l'exemple d'utilisation du module

mysql précédent

● 3) Ajouter une boucle pour afficher TOUS les résultats

Problème : ça ne sort que le premier résultat !

74

3) Récupérer toutes les données● On va utiliser des évènements :

var mysql = require('mysql');

var mySqlClient = mysql.createConnection({ host:"localhost", user:"root", password:"",database:"testnode"});

var selectQuery = 'SELECT * FROM personnes'; var sqlQuery = mySqlClient.query(selectQuery); sqlQuery.on("result", function(row) { console.log('nom : ' + row.nom);}); sqlQuery.on("end", function() { mySqlClient.end();}); sqlQuery.on("error", function(error) { console.log(error);});

connexion2.js

75

Exercice :● 1) Tester le programme précédent● 2) Modifier et tester ce programme pour qu'il

affiche toutes les informations sur les utilisateurs : numéro, nom, prénom et age

76

4) Inclure la requête dans une route● On veut appeler la requête depuis une route

Node.js :var express = require('express');var app = express(); app.get('/', function (req, res) { res.send('Bienvenue !');})app.get('/select', function (req, res) { ... res.send(...);})app.use(function(req,res,next) {

res.setHeader("Content-type","text/html");res.send(404, "Erreur 404 : page introuvable !");

})app.listen(3000);

connexion3.js

77

Exercice :● 1) Créer une route '/select' qui lance la requête

précédente (version page 5 sans les évènements)

● 2) Tester votre programme

78

Any questions?

m4201 javascript technologiesjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-cm3.pdf · 2...

Documents