Ite express labs

© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.

Express.js labs

Aeshan Wijetunge06/ 11 / 2015 ITE


2

Middleware

A function with access to the request object, the response object, and the next middleware in line in the request-response cycle of an application.

Middleware

Middleware

Application

Request Response


3

MVC : Model-View-Controller


4

Views: Picking a template engine

There are dozens of template engines available online…. But we’ll settle on


5

DustJS : adding a template engine

Be sure to read-up on their awesome documentation when using dust.js http://akdubya.github.io/dustjs/#guide

We’ll be adding dust-support using the adaro node-module. Installing it is as easy as running...

npm install adaro --save

http://akdubya.github.io/dustjs/%23guide


6

Update app.js with the dust view-engine

app.engine('dust', adaro.dust());app.set('view engine', 'dust');

app.set('views', __dirname +'/public/views' );


7

Update app.js with a route

app.get('/home',function(req, res) {

req.model = {};

req.model.name = 'ITE';

res.render('index',req.model);

});

This renders a dust-template located :

/views/index.dust


8

Our 1st dust template

Save it under /public/views/index.dust

Let's get it running :

node --debug app.js

Visit your VM

aeshanw.koding.io:6001/home

<html> <body> <div>Hello {name}!</div> </body></html>


9

Dustjs: under the hood


10

Challenge : A Weather AppWe’re going to use a weather-api to fetch the latest updates for some cities of our choice.

With a bit of googling we find a site with some open APIs (not requiring API secret keys etc) which is great for our example

http://openweathermap.org/current

http://openweathermap.org/current


11

Mashups : Using APIs

We want to use this API to fetch the latest singapore weather details:

http://api.openweathermap.org/data/2.5/weather?q=Singapore

http://api.openweathermap.org/data/2.5/weather?q=Singapore


12

Weather API : the raw dataWe used an online tool to make the API response readable..


13

Request: the API client

npm install request --save

Googling for API clients will uncover many though we’ll be using the request module to consume our weather API.

request('http://api.openweathermap.org/data/2.5/weather?q=Singapore', function (error, response, body) { if (!error && response.statusCode == 200) { console.log(body) // Weather Data for Singapore } })

Hitting your koding.io url should populate the console.log in your koding terminal.

http://aeshanw.koding.io:6001/weather


14

Populate the view model

To display on the dust template let’s add the following to the app.js

app.get('/weather', function(req, res){ …….. //Populate the view model used to display req.model = {}; req.model.temp = Math.floor(result.main.temp/10.0), req.model.country = result.name, req.model.weather = result.weather; ……... res.render('weather',req.model); } });});


15

View : Presenting the data

With a better understanding of the API’s data response we can modify our dust template to render it in a more presentable form to the user.

In public/views/weather.dust

<html> <body> <h1>Weather for {country}</h1> {#weather} <ul> <li>{main}</li> <li>{description}</li> </ul> {/weather} </body></html>

/app.js

req.model.country = result.name,req.model.wind = result.wind, req.model.weather = result.weather;


16

The Finished Result


17

Try it yourself

The complete code for the lab is in the github repo:

https://github.com/node-workshop-ite/express-weather-lab

git clone https://github.com/node-workshop-ite/express-weather-lab.git

cd express-weather-lab

npm install

npm start




18

Troubleshooting ports

Some networks block ports aggressively. So if you encounter such issues you may need to use port 80

Modify this code in app.js to use port 80.app.listen(600180, function() {

sudo service apache2 stopsudo node app.js

visit aeshanw.koding.io/weather


19

Conclusion● Use frameworks like Express to organize your development● Add features using node modules via npm● Extend your web app functionality via external APIs

If you liked ExpressJS, and desire more features we strongly suggest you try Kraken.js. It originated from PayPal and has more advanced features for more scalable web apps.

http://krakenjs.com/

Thank you & Happy Hacking!



Technology

Ite express labs