Ite express labs

© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
Express.js labs
Aeshan Wijetunge
06/ 11 / 2015 ITE

© 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 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

MVC : Model-View-Controller

Views: Picking a template engine
There are dozens of template engines available online…. But we’ll
settle on

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

Update app.js with the dust view-engine
app.engine('dust', adaro.dust());
app.set('view engine', 'dust');
app.set('views', __dirname +'/public/views' );

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

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>

Dustjs: under the hood

Challenge : A Weather App
We’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

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

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

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=Si
ngapore', 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

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);
}
});
});

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;

The Finished Result

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

Troubleshooting ports
Some networks block ports aggressively. So if you
encounter such issues you may need to use
Modify this code in app.js to use port 80.
app.listen(600180, function() {
sudo service apache2 stop
sudo node app.js
visit aeshanw.koding.io/weather

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!

Ite express labs

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (12)

Similaire à Ite express labs

Similaire à Ite express labs (20)

Dernier

Dernier (20)

Ite express labs