Skip to content

19.md

Latest commit

 

History

History
237 lines (159 loc) · 7.63 KB

19.md

File metadata and controls

237 lines (159 loc) · 7.63 KB

十九、Instagram 图库

如果你按时间顺序阅读这本书，你已经了解了 API 参考的重要但有些枯燥的细节，并且只接触了抽象的解决方案。现在你已经到了第 4 部分，激动人心的事情开始了，因为这一部分的五章都是关于编码和例子的！

本章中的教程演示了如何将 Express.js 与外部第三方服务(Storify API)一起使用。该应用的目的是从 Storify 获取 Instagram 照片，并将其显示在图库中。除了 Express.js，我们还将使用以下三个模块:

  • superagent ( https://www.npmjs.org/package/superagent)
  • consolidate ( https://www.npmjs.org/package/consolidate)
  • handlebars ( https://www.npmjs.org/package/handlebars)

我选择这些模块是因为它们在 Node.js 开发圈子里有些流行，所以你将来很有可能会遇到或使用它们。

Image 注意这个例子的完整源代码可以在https://github.com/azat-co/sfy-gallery找到。

Storify ( http://storify.com)运行在 Node.js ( http://nodejs.org)和 Express.js ( http://expressjs.com)上。因此，为什么不使用这些技术来编写一个应用，演示如何构建依赖于第三方 API 和 HTTP 请求的应用呢？

启动 Instagram 图库

Instagram Gallery 应用将获取一个故事对象，并显示其标题、描述和元素/图像的图库，如图 19-1 所示的示例。

9781484200384_Fig19-01.jpg

图 19-1 。Instagram 图库

Image 注如果你想知道喀山是什么，它是鞑靼共和国(鞑靼斯坦)有 1000 年历史的首都。

该应用的文件结构如下所示:

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

CSS 文件来自引导库(http://getbootstrap.com)和 Flatly theme ( http://bootswatch.com/flatly)。index.js文件是我们的主 Node.js 文件，其中包含了大部分逻辑，而index.html是 Handlebars 模板。这个应用使用了来自css文件夹中两个文件的普通 CSS。

我们的依赖包括

  • 用于 Express.js 框架的 4.8.1 版
  • 用于发出 HTTP(S)请求的 v0.18.2
  • consolidate v0.10.0 用于使用带有 Express.js 的把手
  • handlebarsv 2 . 0 . 0-beta 1 用于使用车把模板引擎

package.json文件的内容如下:

{
  "name": "sfy-gallery",
  "version": "0.2.0",
  "description": "Instagram Gallery: Storify API example written in Node.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "consolidate": "0.10.0",
    "express": "4.8.1",
    "handlebars": "2.0.0-beta.1",
    "superagent": "0.18.2"
  },
  "repository": "https://github.com/storify/sfy-gallery",
  "author": "Azat Mardan",
  "license": "BSD"
}

让我们继续安装模块

$ npm install

NPM 完成后，创建index.js。在文件的开头，我们需要以下依赖项:

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

var app = express();

然后，我们配置模板引擎:

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

接下来，我们用中间件建立一个静态文件夹:

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

如果你想提供任何其他的故事，请随意。所有你需要的是作者的用户名和故事鼻涕虫为我的鞑靼斯坦首都喀山画廊。留下以下内容:

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

如下所示粘贴您的值:Storify API key、username 和 _token(如果有)。在撰写本文时，Storify API 是公开的，这意味着不需要认证(即不需要密钥)。如果将来这种情况发生变化，请在http://dev.storify.com/request请求 API 密钥或在http://dev.storify.com遵循官方文档:

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

让我们定义回家的路线(/):

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

现在，我们将使用superagent get()方法从 Storify API 中获取路由回调的元素:

superagent.get("http://api.storify.com/v1/stories/"
  + user + "/" + story_slug)

Storify API 端点是" http://api.storify.com/v1/stories/ " + user + "/" + story_slug，在本例中是http://api.storify.com/v1/stories/azat/kazan。superagent的一个优点是我们可以编写链式方法。例如，query()在查询字符串中发送数据:

.query({api_key: api_key,
  username: username,
  _token: _token})

set()方法指定了请求头:

.set({Accept: 'application/json'})

并且end()在收到响应时执行回调:

.end(function(e, storifyResponse){
  if (e) return next(e);

要使用 HTTP 响应主体的 content 属性中的 story 对象来呈现模板，我们使用以下代码:

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

})

app.listen(3001);

Storify API 将数据作为 JSON 返回。您可以通过进入https://api.storify.com/v1/stories/azat_co/kazan来查找格式(假设 API 仍然是公共的，在撰写本文时就是如此)。你可以在图 19-2 的中看到收缩的(即不显示每个嵌套的对象)JSON。

9781484200384_Fig19-02.jpg

图 19-2 。story 实体的约定 Storify API 输出示例

查看画廊

现在，我们已经有了从 Storify 获取数据并调用index模板来呈现数据的应用，让我们来看看位于views/index.html文件中的 Handlebars 模板:

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

现在，我们使用{{title}}来显示 Storify 故事的标题，使用{{author.name}}来显示其作者姓名:

  <h1>{{title}}<small> by {{author.name}}</small></h1>
  <p>{{description}}</p>
</div>
<div class="row">
  <ul class="thumbnails">

下一行是一个内置的handlebars构造，它遍历数组项。并且，随着每一次迭代，我们打印一个新的<li>标签:

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

当你用$ node .启动应用时，你会在http://localhost:3000看到图片。发生的情况是，当你进入页面时，本地服务器迅速向 Storify 发出请求，并从 Instagram 获取图片的链接。

摘要

Express.js 和superagent让开发者只需几行代码就可以检索和操作 Storify、Twitter 和脸书等第三方服务提供的数据。本章给出的例子相当简单，因为它不使用数据库。但是，在下一章，Todo 应用将向您展示如何利用 MongoDB。

Image 注意在大多数情况下，服务提供商(如谷歌、脸书和 Twitter)需要认证(在撰写本文时，Storify API 并非如此)。要使 OAuth 1.0、OAuth 2.0 和 OAuth Echo 请求，考虑 OAuth(https://www.npmjs.org/package/oauth；GitHub: https://github.com/ciaranj/node-oauth)、every auth(https://www.npmjs.org/package/everyauth)；GitHub: https://github.com/bnoguchi/everyauth)和/或护照(网址:http://passportjs.org/；GitHub: https://github.com/jaredhanson/passport)。