introduction to node.js

Introduction to node.js

… and Express, Jade, mongoDB, mongoose

February 2013

The "teacher"

SUPINFO

B1 – B2 Caen (France)

B3 San Francisco (California)

M1 – M2 London (UK)

Web developer

Global Lab Manager of SUPINFO Web Laboratory

Games oriented developer and Vanilla JavaScript lover

http://adriengueret.no-ip.org/

https://twitter.com/AdrienGueret

A busy program

Some JavaScript revisions

Look at node.js

Discovery of Express framework

HTML templates with Jade

NoSQL and mongoDB

Using databases with mongoose

JavaScript remindersIt could be useful…

Functions are variables like other

//We store a function

var hello = function (name) {

alert('Hello ' + name + '!');

};

//We call this variable-function !

hello('World'); //Display«Hello World!»

Go further…

//A function with a function as parameter…

var callFunction = function (callback) {

callback('World');

};

callFunction(hello);

//Also display«Hello World!»

JSON format

var user = {

"first_name": "Jean",

"last_name": "Peplu",

"age": 22

};

alert('Hello ' + user.first_name + '!');

// «Hello Jean!»

JavaScripts objects

var user = {

first_name: "Jean",

last_name: "Peplu",

sayHello: function () {alert('Hello ' + this.first_name +

'!');}

};

user.sayHello(); // «Hello Jean!»

Discovery of node.jsA wonderful technology!

A young technology

Created by Ryan Dahl in 2009

Current version: 0.8.21

A "package" containing V8 JavaScript engine

Allow us to develop server-side with JavaScript!

Let’s install node.js!

Go to: http://nodejs.org/

Click on Install

What has been installed

A simple Web servervar http = require('http'),

port = 1337,

server = http.createServer(function (request, response) {

response.writeHead(200, {'Content-Type': 'text/plain'});

response.end('Hello World!');

});

server.listen(port);

//A nice log in the terminal

console.log('Server listening at port ' + port + '.');

>node server.js

request and response are useful parameters

request Give some information about HTTP request request.method, request.url…

response Send information to the client response.writeHead()…

Read the doc! http://nodejs.org/api/http.html

Your turn!

Create a basic Web server

3 different pages Home page when visitor is on the root of your

server

A test page on the URL /test

An error page (404) otherwise

Using ExpressFor a more efficient development!

What is Express?

Web application framework Current version: 3.0

http://expressjs.com/

Very simple installation:

Previous exercise with Expressvar port = 1337,

express = require('express'),server = express(),writePage = function (title, body) {

//We admit this function returns an HTML string

};

server.get('/', function (req, res) {

res.send(200, writePage('Home', 'Welcome home!'));

}).get('/test', function (req, res) {

res.send(200, writePage('Test page', 'It works!'));

}).listen(port);

Retrieve GET parameters

//Listen for localhost:1337/farms/?id=Xserver

.get('/farms/', function (req, res) {res.writeHead(200, {'Content-Type':

'text/plain'});res.end(Farm id: #' + req.query.id);

});

We get values thanks to req.query[parameter name]

Sexier: parameters in the URL

//Listen for localhost:1337/farms/X

server.get('/farms/:id', function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end(Farm id: #' + req.params.id);});

: + parameter name We get values thanks to req.params[parameter name]

Retrieve POST parameters

server.post('/farms/add', function (req, res) {

res. send(200, 'Nom reçu : ' + req.body.farm_name);

});

Tell the server we want to get these parameters:

We’ll use the post() method (no longer get()) We get values thanks to req.body[parameter name]

server.use(express.bodyParser());

Public files

server.use(

'/static',express.static( __dirname + '/public')

);

Also called "static" files Images, CSS, JavaScript…

How to link them with our HTML files? Put them in a folder name /public (or another name, it’s your choice!)

Find an alias (once again, you choose which one!) to this folder Indicate the use of this alias to serve this folder

Diagram of a typical case

Main server

Manages the HTTP server

The visitor

Requests

Works withSends therequested

information

The arrival of JadeBecause HTML is too complicated…

Jade

HTML template http://jade-lang.com/

Another simple installation:

Documentation: https://github.com/visionmedia/jade#a6 Interactive doc:

http://naltatis.github.com/jade-syntax-docs/

Why using a template?

To be more with the spirit of MVC architecture "Cleaner" code

doctype 5

html(lang="en")

head

title My page title

body

h1#title Jade - node template engine

p.desc Hello World! <br />

img(src="/static/images/ocarina.png")

Call a Jade template with Express

Put .jade files in the folder /views Tell the server to use Jade engine Call render() to display a .jade file

server.engine('jade', require('jade').__express).get('/', function (req, res) {

res.render('./sample.jade');//Path of the file :

/myProject/views/sample.jade });

Display variables with Jade Send variables thanks to the method render():

With Jade: use the #{variable_name} syntax:

server.get('/farms/:id', function (req, res) {

res.render('./farm_details.jade', { "farm_name" : "My wonderful farm", "farm_value" : 30000

});});

h1 #{farm_name}

p Value of this farm is:

strong #{farm_value}

€

Display a list of values

In Jade: use the each … in syntax:

server.get('/farms/', function (req, res) {

res.render('./all_farms.jade', { "all_farms_id" : [1, 6, 15, 21, 34, 42,

55]});

});

ul

each farm_id in all_farms_id

li Farm ##{farm_id}

Your turn! Install Express

Install Jade

Create a “Register user” form This form must redirect to its own page It sends data with POST method The target page just displays sent data

Oh, and please display a nice picture

HTML template

Asks for a template

Send HTML

Diagram of a typical case

Main server

Manages the HTTP server

The visitor

Requests

Works withSends therequested

information

A database with mongoDBForget SQL, long live NoSQL!

What is mongoDB?

A document-oriented database

Use the JSON format

http://www.mongodb.org/

{

"first_name": "Jean",

"last_name": "Peplu",

"age": 22

}

A bit of vocabulary…

SQL term mongoDB term

Database Database

Table Collection

Row / Entry Document

Column Field

Let’s install mongoDB http://www.mongodb.org/downloads

Extract the archive where you want to

Optional: add mongoDB path to your system PATH

Let’s install mongoDB (we’ve almost done!)

Create C:\data\db folder (or /data/db according to your OS)

Run mongoDB server via the console: use the mongod command

DO NOT CLOSE THE CONSOLE ONCEMONGODB IS LAUNCHED!

The communication node.js/mongoDB

We need a driver

Once again, we install it with npm!

?

Database

Works with database

Send data

HTML template

Asks for a template

Send HTML

Diagram of a typical case

Main server

Manages the HTTP server

The visitor

Requests

Works withSends therequested

information

One more tool: mongooseBecause we love to install stuff!

What is mongoose?

An ODM (Object Data Modeling)

Allow us to manipulate "real" objects

Current version: 3.5

Another very easy installation with npm:

http://mongoosejs.com/

A basic project structure

We have already created a /views folder Let’s create a /models one!

Let’s create our own module /models/getMongoose.js

To use it in another file:

The connection file to the database

var mongoose =require('mongoose');

mongoose.connect('localhost', 'myDatabase');

exports.mongoose = mongoose;

var mongoose = require('./models/getMongoose.js').mongoose;

Model construction

var mongoose = require('./getMongoose.js').mongoose,

PlayerSchema= mongoose.Schema({

first_name : String,

last_name : String,

age : Number

}),

PlayerModel = mongoose.model('Player', PlayerSchema);

exports.Player = PlayerModel;

1) Define a schema 2) Link this schema to a new model

Create a document

var Player = require('./models/Player.Model.js').Player,

jean = new Player({

"first_name": "Jean",

"last_name": "Peplu",

"age": 22

});

jean.save(function (error, user) {if (error) { console.log(error); }

else { console.log(Player "' + user.first_name + '"  added!'); }});

1) Get the model to use

2) Create a new instance from this model ( = a document)

3) And save it!

How to check everything went well Using mongoDB in the console:

A little more structurevar PlayerSchema= mongoose.Schema({

email : {type : String,required : true,unique : true,trim : true

},age: {

type : Number,default : 13,min :

13,max : 110

}});

List of setters for Strings:http://mongoosejs.com/docs/api.html#schema-string-js

Your turn!

Install mongoDB and mongoose

Modify your code from previous exercise in order to save data sent by your form

Check with your console that users are saved!

Retrieve data Usage of queries builders

var Player = require('./models/Player.Model.js').Player,

query = Player.find();

query.exec(function (error, players) {if (error) { console.log(error); }else {

//Do something with the list of all players}

});

Filter data Directly with find()

Or with where()

Using several where()

var Player = require('./models/Player.Model.js').Player,

query = Player.find({"first_name":

"Jean" });

query = Player.where('first_name', 'Jean');

query = Player.where('first_name', 'Jean') .where('age', 20);

Filter data: other methods Greater or equal than, lower or equal than:

Get by id:

And a lot of other methods… Read the documentation!http://mongoosejs.com/docs/api.html#model_Model.findhttp://mongoosejs.com/docs/api.html#query-js

query = Player.where('age').gte(18).lte(40);

var user_id = '5117ac79cf85d67c21000001';Player.findById(user_id, function (error, player) {

if (error) { console.log(error); }else if (!player) { console.log(‘Player not found'); }else { //Do something with the user }

});

Your turn!

Update your code from the previous exercise in order to match these requirements:

Home page displays all your users Below this list is a link to the register form If an error occurs while an user is being added to the

database, visitor is redirected to the form In order to know how to perform redirections, you

should read Express documentation! http://expressjs.com/api.html

Tables relations

Using the ObjectId type Indicate a reference model

var mongoose = require('./getMongoose.js').mongoose,

FarmSchema = mongoose.Schema({owner : {

type :mongoose.Schema.Types.ObjectId,

ref : 'Player'}

});

Linked documents need to be "populated" Get an owner from one of his farm:

To know more, once again… Documentation! http://mongoosejs.com/docs/populate.html

Farm.findById(farm_id)

.populate('owner') .exec(function (error, farm) {

if (error) { console.log(error); }else if (!farm) { console.log('Farm not

found'); }else {

console.log(farm.owner.first_name);}

});

And now, the reverse… Get a player’s farms:

Think MVC: separate Models from Controllers!

Farm.where('owner', player_id) .exec(function (error, farms) {

if (error) { console.log(error); }else {

//Do something with the list of farms

} });

Static methods Using the property statics from schemas

http://mongoosejs.com/docs/guide.html#statics

FarmSchema = mongoose.Schema({owner : {

type :mongoose.Schema.Types.ObjectId,

ref : 'Player'}

});

FarmSchema.statics.findByOwnerId = function (owner_id, callback) {

this.where('owner', owner_id).exec(callback);};//Call the static methodFarm.findByOwnerId('1R@nD0m!d', function (error, farm) {

//Do something});

Your turn!

Update your code from the previous exercise in order to manage farms:

Create a model for these farms On Home page, each username you have displayed

must now be a link to the list of farms owned by this user

Below this list is another link to a form allowing to create and add a new farm to the corresponding user

Database

Object Data Modeling

Interacts

Diagram of a typical case

Works with database

Send data

HTML template

Asks for a template

Send HTML

Main server

Manages the HTTP server

The visitor

Requests

Works withSends therequested

information

Thank you!

Do you have any questions?

adrien.gueret@supinfo.com

And don’t forget: read documentations!