![webapplog [programming weblog]](https://m03s6dh33i0jtc3uzfml36au-wpengine.netdna-ssl.com/wp-content/uploads/webapplog-logo-pink2-50.png "webapplog [programming weblog]"){kind=logo}
and JavaScript
Node.js, React.js and JavaScript courses.
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:
- Intro to Express.js: Parameters, Error Handling and Other Middleware
- Intro to Express.js: Simple REST API app with Monk and MongoDB
- Node.js MVC: Express.js + Derby Hello World Tutorial
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:
[Sidenote]
Reading blog posts is good, but watching video courses is even better because they are more engaging.
A lot of developers complained that there is a lack of affordable quality video material on Node. It's distracting to watch to YouTube videos and insane to pay $500 for a Node video course!
Go check out Node University which has FREE video courses on Node: node.university.
[End of sidenote]
<!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
React and JavaScript
Node.js, React.js and JavaScript courses.
--
Azat Mardan
https://www.linkedin.com/in/azatm
To contact Azat, the main author of this blog, submit the contact form.
Also, make sure to get 3 amazing resources to FREE when you sign up for the newsletter.
Simple.
Easy.
No commitment.
Pingback: Some tutorials for chat. | Some Programming Thoughts
Pingback: /dev | MEAN 2