Summary

This tutorial will demonstrate how to use Express.js external third-party services. In this tutorial, in addition to Express.js, we’ll use Instagram photos via Storify API, SuperAgent, Consolidate and Handlebars modules.

exercise

Example

The full source code of this example is available at https://github.com/azat-co/sfy-gallery.

Storify runs on Node.js and Express.js; therefore, why not use these technologies to write an application that demonstrates how to build apps that rely on third-party APIs and HTTP requests?

The Instagram Gallery app will fetch a story object and display its title, description, and a gallery of the elements/images like this:

Instagram Gallery: Storify API + Node.js = <3

Instagram Gallery: Storify API + Node.js = <3

1.1 A File Structure

1 - index.js
2 - package.json
3 - views/index.html
4 - css/bootstrap-responsive.min.css
5 - css/flatly-bootstrap.min.css

Where index.js is our main Node.js file and index.html is the Handlebars template.

1.2 Dependencies

Our dependencies include:

  • express: 3.2.5 for Express.js framework
  • superagent: 0.14.6 for making HTTP requests
  • consolidate: 0.9.1 for using Handlebars with Express.js
  • handlebars: 1.0.12 for using Handlebars template engine

The package.json file:

 1 {
 2   "name": "sfy-demo",
 3   "version": "0.0.0",
 4   "description": "Simple Node.js demo app on top of Storify API",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "dependencies": {
10     "express": "3.2.5",
11     "superagent": "0.14.6",
12     "consolidate": "0.9.1",
13     "handlebars": "1.0.12"
14   },
15   "repository": "",
16   "author": "Azat Mardanov",
17   "license": "BSD"
18 }

1.3 Node.js Server

At the beginning of the file, we require dependencies:

1 var express = require('express');
2 var superagent = require('superagent');
3 var consolidate = require('consolidate');
4 
5 var app = express();

Then, configure template engine:

1 app.engine('html', consolidate.handlebars);
2 app.set('view engine', 'html');
3 app.set('views', __dirname + '/views');

Set up a static folder with middleware:

1 app.use(express.static(__dirname + '/public'));

If you want to serve any other story, feel free to do so. All you need is the username of the author and the story slug for my gallery of the capitol of Tatarstan, Kazan. Leave the following:

1 var user = 'azat_co';
2 var story_slug = 'kazan';

Paste your values, i.e., Storify API key, username and _token if you have one. As of this writing, Storify API is public, meaning there is no need for authentication. In case this changes in the future, please obtain your signup for an API key at http://dev.storify.com/request or follow the official documentation at dev.storify.com:

1 var api_key = "";
2 var username = "";
3 var _token = "";

Let’s define the home route:

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

Now we’ll fetch elements from Storify API for the route’s callback:

1   superagent.get("http://api.storify.com/v1/stories/"
2     + user + "/" + story_slug)
3     .query({api_key: api_key,
4       username: username,
5       _token: _token})
6     .set({  Accept: 'application/json' })
7     .end(function(e, storifyResponse){
8       if (e) next(e);

To render the template with the story object which is in the HTTP response body’s content property:

1       return res.render('index', storifyResponse.body.content);
2     })
3 
4 })
5 
6 app.listen(3001);

1.4 Handlebars Template

The views/index.html file:

 1 <!DOCTYPE html lang="en">
 2 <html>
 3   <head>
 4     <link type="text/css"
 5       href="css/flatly-bootstrap.min.css"
 6       rel="stylesheet" />
 7     <link type="text/css"
 8       href="css/bootstrap-responsive.min.css"
 9       rel="stylesheet"/>
10   </head>
11 
12   <body class="container">
13     <div class="row">
14       <h1>{{title}}<small> by {{author.name}}</small></h1>
15       <p>{{description}}</p>
16     </div>
17     <div class="row">
18       <ul class="thumbnails">
19       {{#each elements}}
20         <li class="span3">
21           <a class="thumbnail" href="{{permalink}}"
22           target="_blank">
23             <img src="{{data.image.src}}"
24               title="{{data.image.caption}}" />
25           </a>
26         </li>
27       {{/each}}
28       </ul>
29     </div>
30   </body>
31 
32 </html>

1.5 Conclusion

Express.js and SuperAgent allow developers to retrieve and manipulate data provided by third-party services such as Storify, Twitter and Facebook in just a few lines of code.

information

Note

In most cases, service providers (such as Google, Facebook and Twitter) require authentication (which is not the case with Storify API as of this writing). To make OAuth 1.0, OAuth 2.0 and OAuth Echo requests, consider oauth (GitHub), everyauth (GitHub) and/or Passport(website and GitHub).

Up next

2 Todo App