漫威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
譯者:盈韜


分享到:


相關文章: