Express.js Tutorial: Instagram Gallery Example App with Storify API

Note: This text is a part of Express.js Guide: The Comprehensive Book on Express.js.

An example of an Express.js app using Storify API as a data source is a continuation of introduction to Express.js tutorials.

Instagram 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 to them?

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

Express.js Tutorial: Instagram Gallery Example App with Storify API

A File Structure

index.js
package.json
views/index.html
css/bootstrap-responsive.min.css
css/flatly-bootstrap.min.css

GitHub is at github.com/storify/sfy-gallery.

Dependencies

express: 3.2.5
superagent: 0.14.6
consolidate: 0.9.1
handlebars: 1.0.12

package.json:

{
  "name": "sfy-demo",
  "version": "0.0.0",
  "description": "Simple Node.js demo app on top of Storify API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "express": "3.2.5",
    "superagent": "0.14.6",
    "consolidate": "0.9.1",
    "handlebars": "1.0.12"
  },
  "repository": "",
  "author": "Azat Mardanov",
  "license": "BSD"
}

Node.js Server

Require dependencies:

var express = require('express');
var superagent = require('superagent');
var consolidate = require('consolidate');

var app = express();

Configure template engine:


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

Set up a static folder middleware:

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

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

Paste your values, i.e., Storify API key, username and _token:


var api_key = "";
var username = "";
var _token = "";

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

Fetch elements from Storify API:

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

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

      return res.render('index', storifyResponse.body.content);      
    })

})

app.listen(3001);

Handlebars Template

The views/index.html file content:

<!DOCTYPE html lang="en">
<html>
  <head>
    <link type="text/css" href="css/flatly-bootstrap.min.css" rel="stylesheet" />
    <link type="text/css" href="css/bootstrap-responsive.min.css" rel="stylesheet"/>
  </head>

  <body class="container">
    <div class="row">
      <h1>{{title}}<small> by {{author.name}}</small></h1>
      <p>{{description}}</p>
    </div>
    <div class="row">
      <ul class="thumbnails">
      {{#each elements}}
        <li class="span3"><a class="thumbnail" href="{{permalink}}" target="_blank"><img src="{{data.image.src}}" title="{{data.image.caption}}" /></a></li>
      {{/each}}
      </ul>
    </div>
  </body>

</html>

Conclusion

Storify API allows developers to retrieve and manipulate stories and elements within the stories. The full description is available at dev.storify.com.

Try it Yourself!

https://gist.github.com/azat-co/5725820

--
Best Regards,
Azat Mardan
Microsoft MVP | Book and Course Author | Software Engineering Leader

https://www.linkedin.com/in/azatm
To contact Azat, the main author of this blog, submit the contact form or schedule a call at clarity.fm/azat and we can go over your bugs, questions and career.

webapplog [tech blog]

Book author Azat Mardan writes about apps, startups and technology

Express.js Tutorial: Instagram Gallery Example App with Storify API

Instagram Gallery

A File Structure

Dependencies

Node.js Server

Handlebars Template

Conclusion

Try it Yourself!

2 thoughts on “Express.js Tutorial: Instagram Gallery Example App with Storify API”

Leave a Reply Cancel reply