漫威API示例

漫威API示例

几天前,整个互联网上最棒的API——Mavel API发布。我喜欢API,也喜欢漫画,二者的结合就是行星吞噬者级别的新闻。(此处我所指的行星吞噬者是那紫色的大家伙,而不是神奇四侠电影中的无定形巨云。)

API支持获取人物、漫画、创建者、事件、故事、系列和故事的数据。您可以尝试从他们的互动文档中获取具体的调用方法,也可以先注册一个密钥来看结果。这些文档很好,但是目前有一个愚蠢的CSS bug阻止你从中拷贝文本。(你可以通过DevTools来更正它——如果你不知道怎么做,就在文档末尾给我留言吧)。API还不支持基于文本的搜索,所以如果你想找到所有的“Spider”字符,很遗憾它不能如你所愿(但这也是一项需求)。

除此之外,API非常强大,提供多种选择。您可以在客户端和服务器端应用程序中使用一个非常简单的GET请求来使用API,每天最多请求1000次。许多人要求提高这一上限,而Marvel的人说他们会考虑这个问题。我能理解他们这也是谨慎起见。然而,他们还没有一个合适的API讨论论坛。尽管他们有一评论页,但无法形成规模。这个评论页已经变得有点混乱了,我希望他们能赶紧改进成其他的样子(即使是简单的谷歌论坛样式也会很酷)。

Marvel 开发者中心:https://developer.marvel.com/

我用漫画API做了一个简单的演示。API允许您获取漫画数据并应用多个不同的过滤器。所以你可以请求作品集而不是单个漫画——请求某指定日期的漫画或者甚至寻找某个特定的角色。返回的每本漫画的有关数据非常详细。

我的第一个演示中,我认为做一个各日期的漫画间的比较更有意思。我写了一个示例,获得一年里的100本漫画,并计算出平均价格和页数,并显示5个漫画中的随机图像。我好奇地想看看这些年来物价和页数是如何变化的。让我们看一下代码。首先,我的HTML。

漫威API示例

这里没有很复杂,只是用一个Handlebars模板来处理结果。现在让我们来看一下JavaScript。

漫威API示例漫威API示例
漫威API示例

实现这个并不用费很大功夫。我只是遍历了一年的时间,并启动异步请求来获取数据。我计算出每年的物价、页数平均值,收集图像,挑选5个随机插图,最后将结果打印到屏幕上。这个应用程序是缓慢的,因为要等所有63个请求完成之后再渲染。一个更美观的演示会按正确的顺序呈现出来。这结果是迷人的。

我知道价格会随着时间推移而上升,这并不奇怪。在2013,我的数据显示平均为4.12美元,而1950仅要十美分。页数有点随时间变少,但不是很明显。真正的史诗通过封面反映出来。我的意思是,我知道风格随着时间的推移而改变,但它们同时陈列一处时的样子是震撼人心的!例如,这里是我得到的2013年的封面。

漫威API示例

接着是1985年版:

漫威API示例

最后是1960年版:

漫威API示例

由于API限制,我不能共享动态应用程序,但我确实渲染页面并输出、保存了。如果你好奇这些,你可以通过简单地打开控制台并通过$(body).html来获得动态生成的HTML。您也可以在https://static.raymondcamden.com/demos/2014/jan/31/report.html查看静态报表。

最令我自豪的是最后一个演示中酷炫的封面。我在那上面建立了第二个演示。我创建了一个Node.js/Express应用程序,做了一件事:选择一个随机的年份,选择一个随机的月份,并选择一个随机的封面。然后将其显示给用户,同时在左下角显示标题/发布日期。因为它是服务器端,所以我可以使用缓存。时间范围我选取了1960年到2013年。这是756个不同的API调用。从理论上讲,我应该能够运行应用程序,永远不会达到调用上限。我还内置了代码来处理API调用上限被击中的情况。如果我有5个月以上的缓存,我将只使用现有的缓存。我将分享整个代码库,但应用程序需要用marvel.js模块返回封面。

漫威API示例漫威API示例
漫威API示例漫威API示例

这是截图:

漫威API示例

你可在这里亲自一探:marvel.raymondcamden.com。请注意,我还没有让“Data by Marvel”属性标签显示出来,我需要添加它使之符合Marvel的API规则。(我只是不想重新启动服务器!)

我知道我所作的这些工作有些片面,但我爱我的演示。当我完成它时,感觉自己仿佛拥有了之前从未听说过的头衔。我不知道自己是不是一个“严谨”的漫画收藏家,我只是买得随性。但此刻,我被藏在Marvel时间线里的深邃历史所震撼。这实际上鼓励着我去收集更多的老漫画。我已经把这两个演示的完整源代码作为这个博客帖子的附件(放在了阅读原文中)。密钥已被去除。

英文原文:https://www.raymondcamden.com/2014/02/02/Examples-of-the-Marvel-API
译者:盈韬


分享到:


相關文章: