Tutorial de Express.js:aplicación de ejemplo de galería de Instagram con Storify API

Nota: Este texto es parte de Express.js Guide:The Comprehensive Book on Express.js.

Un ejemplo de una aplicación Express.js que utiliza Storify API como fuente de datos es una continuación de los tutoriales de introducción a Express.js.

Otras publicaciones incluyen temas como:

  • Introducción a Express.js:parámetros, manejo de errores y otro middleware
  • Introducción a Express.js:aplicación API REST simple con Monk y MongoDB
  • Tutorial de Node.js MVC:Express.js + Derby Hello World

Galería de Instagram

Storify se ejecuta en Node.js y Express.js, por lo tanto, ¿por qué no usar estas tecnologías para escribir una aplicación que demuestre cómo crear aplicaciones que se basen en API de terceros y solicitudes HTTP?

La aplicación Galería de Instagram buscará el objeto de la historia y mostrará el título, la descripción y una galería de elementos/imágenes como esta:

Tutorial de Express.js:aplicación de ejemplo de galería de Instagram con Storify API

Una estructura de archivos

  • index.js
  • paquete.json
  • vistas/index.html
  • css/bootstrap-responsive.min.css
  • css/flatly-bootstrap.min.css

GitHub está en github.com/storify/sfy-gallery.

Dependencias

  • expreso:3.2.5
  • superagente:0.14.6
  • consolidar:0.9.1
  • manillares:1.0.12

paquete.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"
}

Servidor Node.js

Requerir dependencias:

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

var app = express();

Configurar motor de plantillas:


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

Configure un middleware de carpeta estática:

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

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

Pegue sus valores, es decir, clave API Storify, nombre de usuario y _token:


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

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

Obtener elementos de la API de Storify:

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

Representar la plantilla con el objeto de la historia que se encuentra en la propiedad de contenido del cuerpo de la respuesta HTTP:

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

})

app.listen(3001);

Plantilla de manillar

Las vistas/index.html contenido del archivo:

[Nota al margen]

Leer publicaciones de blog es bueno, pero ver cursos en video es aún mejor porque son más atractivos.

Muchos desarrolladores se quejaron de la falta de material de video de calidad asequible en Node. Es una distracción ver videos de YouTube y una locura pagar $ 500 por un curso de video de Node.

Visite Node University, que tiene cursos de video GRATUITOS en Node:node.university.

[Fin de la nota al margen]

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

Conclusión

Storify API permite a los desarrolladores recuperar y manipular historias y elementos dentro de las historias. La descripción completa está disponible en dev.storify.com.

¡Pruébalo tú mismo!

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