Sst hackathon express

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

Express.js labs

Aeshan Wijetunge06/ 3 / 2015 SST


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


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

Application

Request Response


4

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

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


5

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>


6

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

http://openweathermap.org/current


7

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.

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


8

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


9

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/

http://jsonformatter.curiousconcept.com/


10

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>


11

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




12

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


13

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

Technology

Transcript of Sst hackathon express