Sst hackathon express

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

© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
Why a Web Framework?
A framework provides the scaffolding for web developers aiming to build an
application in an organized manner.
Express is one of the most popular node.js frameworks and you might find it
handy in your hackathon for the following reasons:
● Lightweight
● Routing support
● Well documented
● Many modular features available (e.g: express-session)
● Very active user community with a great deal of online material
2

© 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 3
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
Applicatio
n
Request Response

Views: adding a templating engine
Why a templating engine? Static HTML is very restrictive and as we’re
creating a web application we’ll need something more dynamic.
Template engines compile template written in one markup to HTML which is
rendered on the user’s browser.
There are many templating engine options that can be added to express.
● HAML
● jade
● dustJS
● handlebars
● …
For the sake of convenience, we’ll be using dust.js views in this example and
will be relying on a module created by PayPal as the template-engine for the
rendering of the page.
Be sure to read-up on their awesome documentation when using dust.js
http://akdubya.github.io/dustjs/#guide

Views: adding a template engine
var options = {
helpers: [
//NOTE: function has to take dust as an argument.
//The following function defines @myHelper helper
function (dust) { dust.helpers.myHelper = function (a, b, c, d) {} },
'dustjs-helpers' //So do installed modules
]
};
app.engine('dust', adaro.dust(options));
app.set('view engine', 'dust');
app.set('views', __dirname + '/public/views');
npm install adaro --save
<html>
<body>
<div>Hello {name}!</div>
</body>
</html>

Adding Features : module by module
A web-application that just serves HTML pages may not be all that useful.
Thankfully express is easily extensible thanks to npm.
As discussed earlier the node community has populated a massive variety of
modules on npm to suit almost any requirement you might come up with
during your hackathon.
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
When developing applications we’d not only want to reuse functionality via
npm modules. We’d also like to access external data which would make our
web apps even more useful.
Many companies & organizations expose their data to developers via APIs.
For our weather app consider this API call to fetch Singapore weather
http://api.openweathermap.org/data/2.5/weather?q=Singapore
You can view the JSON response in your browser.
Not all APIs are open. Other may require client secret keys but a good API
provider would document how to use their API.

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

API Debugging
JSON can be a bit difficult to read at times so we rely on some online tools to better
understand the API response.
http://jsonformatter.curiousconcept.com/

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.
<html>
<body>
<h1>Weather for {country}</h1>
{#weather}
<ul>
<li>{main}</li>
<li>{description}</li>
</ul>
{/weather}
</body>
</html>

Try it yourself
The complete code for the lab is in the github repo:
https://github.com/node-workshop-sst/sst-weather-lab
$ cd ~/node
$ git clone https://github.com/node-workshop-sst/sst-weather-lab.git
$ cd sst-weather-lab
$ npm install
$ node app.js
SST blocks certain ports so we’ll need to override our koding ports
Modify this code in app.js to use port 80.
app.listen(appEnv.port80, function() {
$ sudo service apache2 stop
$ sudo node app.js
visit aeshanw.koding.io/weather

Deploying to Bluemix
You’ll need to git add & commit all your code changes except the node_modules folder.
Then simply git push to your bluemix git repo to deploy the app to staging.
git push origin master
And you should see activity on your bluemix dashboard and once its deployed you can hit your
own url to view the result
http://sst-express-lab.eu-gb.mybluemix.net/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
● use web tools & console.log to better debug and better consume 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!

Sst hackathon express

More Related Content

What's hot (20)

Similar to Sst hackathon express (20)

Recently uploaded (20)

Sst hackathon express

Editor's Notes