Instagram Gallery Example App with Storify API – webapplog [tech blog]

3 min read Original article ↗

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?

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.

Other posts include topics such as:

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
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

Techie, entrepreneur, 20+ years in tech/IT/software/web development, Microsoft Most Valuable Professional, expert in NodeJS, JavaScript, TypeScript, React, MongoDB, Ruby on Rails, PHP, SQL, HTML, CSS. 500 Startups (batch Fall 2011) alumnus. http://azat.co http://github.com/azat-co