iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
0
Modern Web

我每天都接一個API系列 第 16

[30apis] Day 15 : Giphy API

Giphy 是一個匯集各種 GIF 供人使用的平台。使用者們可以在這平台上搜尋 GIF、看看哪些 GIF 正當紅,可以上傳自己的 GIF,或使用 Giphy 提供的工具製作 GIF。

https://media.giphy.com/media/xT9IgpernHLP5eWOY0/giphy.gif

由於現在社群媒體跟聊天應用軟體競爭激烈,在這些平台上開發讓使用者黏著依賴的互動方式非常重要,就像貼圖之於 Line 。而 GIF 圖當然也成為被推廣的工具之一。現在許多聊天軟體或討論區,都會做出易於讓使用者搜尋 GIF 的 UI。這些 GIF 要從哪裡來呢,很多都是從 Giphy 來的。

今天就來使用看看 Giphy API

先取得 API Key:

來看看文件

Giphy 主要有兩種 resource,而使用那個 resource API 有這些功能

  • GIF : 搜尋、翻譯、流行、隨機、使用 ID 尋找
  • Stickers:搜尋、翻譯、流行、隨機

GIF 是什麼大家都知道了吧,而 Stickers 基本上是類似 Line 的動貼圖,可以放在照片上製作 GIF。所以所有的 Endpoint 都是針對這兩種東西去抓相關資料。

來仔細說明一下 GIF 類別裡的 Endpoint:

  • search :使用關鍵字搜尋 Giphy 資料庫裡面的 GIFs
  • translate:將文字或短句轉換成 GIF 來優化搜尋功能
  • trending:呈現 Giphy 編輯群精選的熱門 GIFs
  • random:隨機抓出一個 GIF,可以給出一個 tag 參數過濾特定標籤

不管有沒有選好想要使用的 API Endpoint ,都來使用 Giphy 的 API Explorer 玩一下。

因為 Giphy API 真的很簡單啊,好像沒什麼好講的,就先貼上基礎 API Request 的 code (根本每篇文章都一樣就是了)

var apiKey ='Mrjdc0YDiu0GDGzkciE04Av5N2SJ1zSN';
var query = 'cat';
var url = "https://api.giphy.com/v1/gifs/search?q="+query+"&api_key="+apiKey;

function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response);
  };
  xhr.open(
    "GET",
   url,
    true
  );
  xhr.send();
}
makeRequest();

得到的 Response是這樣:

把 Response loop 出來的部分,跟 Nutritionix API 那一篇一模一樣,我就不重複寫了。

成果

Codepen 連結


上一篇
[30apis] Day 14 : Coinbase API (匯率轉換)
下一篇
[30apis] Day 16 : Last.fm API
系列文
我每天都接一個API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kaichi1216
iT邦新手 5 級 ‧ 2019-10-13 23:31:50

感謝大大分享 最近在研究 giphy 的api 看到這篇 比較有概念

我要留言

立即登入留言