View
114
Download
0
Category
Preview:
Citation preview
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
Express.js labs
Aeshan Wijetunge06/ 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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
3
MVC : Model-View-Controller
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
4
Views: Picking a template engine
There are dozens of template engines available online…. But we’ll settle on
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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' );
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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>
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
9
Dustjs: under the hood
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
12
Weather API : the raw dataWe used an online tool to make the API response readable..
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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); } });});
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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;
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
16
The Finished Result
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
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!
Recommended