Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction to node.js                        … and Express, Jade, mongoDB, mongooseFebruary 2013
The "teacher"   SUPINFO       B1 – B2 Caen     (France)       B3 San Francisco (California)       M1 – M2 London (UK)...
A busy program   Some JavaScript revisions   Look at node.js   Discovery of Express framework   HTML templates with Ja...
JavaScript remindersIt could be useful…
Functions are variables like other   //We store a function   var hello = function (name) {        alert(Hello  + name + !)...
Go further…   //A function with a function as parameter…   var callFunction = function (callback) {        callback(World)...
JSON format   var user = {        "first_name": "Jean",        "last_name": "Peplu",        "age": 22   };   alert(Hello  ...
JavaScripts objects   var user = {        first_name: "Jean",        last_name: "Peplu",        sayHello: function () {   ...
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 engi...
Let‟s install node.js!   Go to: http://nodejs.org/   Click on Install
What has been installed
A simple Web server var http    = require(http),     port    = 1337,     server = http.createServer(function (request, res...
request and response are useful parameters   request     Give    some information about HTTP request     request.method...
Your turn!   Create a basic Web server   3 different pages     Home     page when visitor is on the root of your server...
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 Express  var port      = 1337,      express = require(express),      server    = express(),      wr...
Retrieve GET parameters   We   get values thanks to req.query[parameter name]         //Listen for localhost:1337/farms/?...
Sexier: parameters in the URL   : + parameter name     We   get values thanks to req.params[parameter name]           //...
Retrieve POST parameters   Tell   the server we want to get these parameters:         server.use(express.bodyParser());  ...
Public files   Also   called "static" files   Images,    CSS, JavaScript…  How to link them with our HTML files?   Put ...
Diagram of a typical case                     Requests                                       Main server       The visitor...
The arrival of JadeBecause HTML is too complicated…
Jade   HTML template   http://jade-lang.com/   Another simple installation:   Documentation: https://github.com/vision...
Why using a template?   To be more with the spirit of MVC architecture   "Cleaner" code    doctype 5    html(lang="en") ...
Call a Jade template with Express   Put .jade files in the folder /views   Tell the server to use Jade engine   Call re...
Display variables with Jade   Send variables thanks to the method render():    server        .get(/farms/:id, function (r...
Display a list of values    server        .get(/farms/, function (req, res) {            res.render(./all_farms.jade, {   ...
Your turn!   Install Express   Install Jade   Create a “Register user” form       This form must redirect to its own p...
Diagram of a typical case                          Requests                                              Main server      ...
A database with mongoDBForget SQL, long live NoSQL!
What is mongoDB?   A document-oriented database   Use the JSON format                                   {   http://www....
A bit of vocabulary…               SQL term                mongoDB term Database                 Database Table           ...
Let‟s install mongoDB   http://www.mongodb.org/downloads   Extract the archive where you want to   Optional: add mongoD...
Let‟s install mongoDB            (we‟ve almost done!)   Create C:datadb folder (or /data/db according to your OS)   Run ...
The communication node.js/mongoDB                            ?   We need a driver   Once again, we install it with npm!
Diagram of a typical case                   Requests                                       Main server The visitor        ...
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   Ano...
A basic project structure   We have already created a /views folder   Let‟s create a /models one!
The connection file to the database   Let‟s create our own module /models/getMongoose.js             var mongoose =      ...
Model construction   1) Define a schema   2) Link this schema to a new model        var mongoose = require(./getMongoose...
Create a document   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 structure       var PlayerSchema = mongoose.Schema({                   email : {                       type ...
Your turn!   Install mongoDB and mongoose   Modify your code from previous exercise in order to save    data sent by you...
Retrieve data   Usage of queries builders    var Player      =   require(./models/Player.Model.js).Player,        query  ...
Filter data   Directly with find()    var Player       =   require(./models/Player.Model.js).Player,        query        ...
Filter data: other methods   Greater or equal than, lower or equal than:    query   =    Player.where(age)               ...
Your turn!   Update your code from the previous exercise in order to    match these requirements:       Home page displa...
Tables relations   Using the ObjectId type   Indicate a reference model      var mongoose      =     require(./getMongoo...
Linked documents need to be "populated"   Get an owner from one of his farm:    Farm.findById(farm_id)        .populate(o...
And now, the reverse…   Get a player‟s farms:    Farm.where(owner, player_id)        .exec(function (error, farms) {     ...
Static methods   Using the property statics from schemas   http://mongoosejs.com/docs/guide.html#statics    FarmSchema =...
Your turn!   Update your code from the previous exercise in order to    manage farms:       Create a model for these far...
Diagram of a typical case                   Requests                                       Main server The visitor        ...
Thank you! Do you have any questions?             adrien.gueret@supinfo.com       And don‟t forget: read documentations!
Upcoming SlideShare
Loading in …5
×

Introduction to node.js

3,272 views

Published on

A quick introduction to node.js in order to have good basics to build a simple website.

This slide covers:

- node.js (you don't say?)
- express
- jade
- mongoDB
- mongoose

Published in: Technology
  • Be the first to comment

Introduction to node.js

  1. 1. Introduction to node.js … and Express, Jade, mongoDB, mongooseFebruary 2013
  2. 2. 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
  3. 3. 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
  4. 4. JavaScript remindersIt could be useful…
  5. 5. 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!»
  6. 6. Go further… //A function with a function as parameter… var callFunction = function (callback) { callback(World); }; callFunction(hello); //Also display«Hello World!»
  7. 7. JSON format var user = { "first_name": "Jean", "last_name": "Peplu", "age": 22 }; alert(Hello + user.first_name + !); // «Hello Jean!»
  8. 8. JavaScripts objects var user = { first_name: "Jean", last_name: "Peplu", sayHello: function () { alert(Hello + this.first_name + !); } }; user.sayHello(); // «Hello Jean!»
  9. 9. Discovery of node.jsA wonderful technology!
  10. 10. 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!
  11. 11. Let‟s install node.js! Go to: http://nodejs.org/ Click on Install
  12. 12. What has been installed
  13. 13. A simple Web server var 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
  14. 14. 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
  15. 15. 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
  16. 16. Using ExpressFor a more efficient development!
  17. 17. What is Express? Web application framework Current version: 3.0 http://expressjs.com/ Very simple installation:
  18. 18. Previous exercise with Express var 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);
  19. 19. Retrieve GET parameters  We get values thanks to req.query[parameter name] //Listen for localhost:1337/farms/?id=X server .get(/farms/, function (req, res) { res.writeHead(200, {Content-Type: text/plain}); res.end(Farm id: # + req.query.id); });
  20. 20. Sexier: parameters in the URL : + parameter name  We get values thanks to req.params[parameter name] //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); });
  21. 21. Retrieve POST parameters  Tell the server we want to get these parameters: server.use(express.bodyParser());  We‟ll use the post() method (no longer get())  We get values thanks to req.body[parameter name] server .post(/farms/add, function (req, res) { res.send(200, Nom reçu : + req.body.farm_name); });
  22. 22. Public files  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 server .use( /static, express.static( __dirname + /public) );
  23. 23. Diagram of a typical case Requests Main server The visitor Works with Manages the HTTP server
  24. 24. The arrival of JadeBecause HTML is too complicated…
  25. 25. 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/
  26. 26. 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")
  27. 27. 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 });
  28. 28. Display variables with Jade Send variables thanks to the method render(): server .get(/farms/:id, function (req, res) { res.render(./farm_details.jade, { "farm_name" : "My wonderful farm", "farm_value" : 30000 }); }); With Jade: use the #{variable_name} syntax: h1 #{farm_name} p Value of this farm is: strong #{farm_value} €
  29. 29. Display a list of values server .get(/farms/, function (req, res) { res.render(./all_farms.jade, { "all_farms_id" : [1, 6, 15, 21, 34, 42, 55] }); }); In Jade: use the each … in syntax: ul each farm_id in all_farms_id li Farm ##{farm_id}
  30. 30. 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 
  31. 31. Diagram of a typical case Requests Main server The visitor Works with Asks for a template Manages the HTTP server Send HTML HTML template
  32. 32. A database with mongoDBForget SQL, long live NoSQL!
  33. 33. What is mongoDB? A document-oriented database Use the JSON format { http://www.mongodb.org/ "first_name": "Jean", "last_name": "Peplu", "age": 22 }
  34. 34. A bit of vocabulary… SQL term mongoDB term Database Database Table Collection Row / Entry Document Column Field
  35. 35. Let‟s install mongoDB http://www.mongodb.org/downloads Extract the archive where you want to Optional: add mongoDB path to your system PATH
  36. 36. Let‟s install mongoDB (we‟ve almost done!) Create C:datadb folder (or /data/db according to your OS) Run mongoDB server via the console: use the mongod command DO NOT CLOSE THE CONSOLE ONCE MONGODB IS LAUNCHED!
  37. 37. The communication node.js/mongoDB ? We need a driver Once again, we install it with npm!
  38. 38. Diagram of a typical case Requests Main server The visitor Works with Asks for a template Works with database Manages the HTTP server Send HTML Send data DatabaseHTML template
  39. 39. One more tool: mongooseBecause we love to install stuff!
  40. 40. 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/
  41. 41. A basic project structure We have already created a /views folder Let‟s create a /models one!
  42. 42. The connection file to the database Let‟s create our own module /models/getMongoose.js var mongoose = require(mongoose); mongoose.connect(localhost, myDatabase); exports.mongoose = mongoose; To use it in another file: var mongoose = require(./models/getMongoose.js).mongoose;
  43. 43. Model construction 1) Define a schema 2) Link this schema to a new model 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;
  44. 44. Create a document 1) Get the model to use 2) Create a new instance from this model ( = a document) 3) And save it! 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!); } });
  45. 45. How to check everything went well Using mongoDB in the console:
  46. 46. A little more structure var 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
  47. 47. 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!
  48. 48. 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 } });
  49. 49. Filter data Directly with find() var Player = require(./models/Player.Model.js).Player, query = Player.find({ "first_name": "Jean" }); Or with where() query = Player.where(first_name, Jean); Using several where() query = Player.where(first_name, Jean) .where(age, 20);
  50. 50. Filter data: other methods Greater or equal than, lower or equal than: query = Player.where(age) .gte(18) .lte(40); Get by id: 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 } }); And a lot of other methods… Read the documentation! http://mongoosejs.com/docs/api.html#model_Model.find http://mongoosejs.com/docs/api.html#query-js
  51. 51. 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
  52. 52. 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 } });
  53. 53. Linked documents need to be "populated" Get an owner from one of his farm: 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); } }); To know more, once again… Documentation! http://mongoosejs.com/docs/populate.html
  54. 54. And now, the reverse… Get a player‟s farms: Farm.where(owner, player_id) .exec(function (error, farms) { if (error) { console.log(error); } else { //Do something with the list of farms } }); Think MVC: separate Models from Controllers!
  55. 55. 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 method Farm.findByOwnerId(1R@nD0m!d, function (error, farm) { //Do something });
  56. 56. 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
  57. 57. Diagram of a typical case Requests Main server The visitor Works with Database Asks for a template Works with database Interacts Manages the HTTP server Send HTML Send data Object Data ModelingHTML template
  58. 58. Thank you! Do you have any questions? adrien.gueret@supinfo.com And don‟t forget: read documentations!

×