iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
1
Modern Web

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

[30apis] Day 12 : OMDb & TMDb API (電影)

關於電影,大家大概第一個就想到 IMDb 吧? IMDb 是世界最大最受歡迎的電影資料庫。因此一開始選主題時,就把 IMDb 的 API 也列進去了。沒想到 IMDb 是沒有出 API 的,只有一些非官方的可以用。
在尋找過程中,發現了兩個相似的電影資料庫,分別是 OMDb APITMDb API
先從 OMDb 開始講起吧。

Open Movie Database (OMDb)

先申請 API Key:

然後 API Key 會從 Email 裡寄過來:

現在來看看文件。

OMDb 的文件非常簡單,整個文件只有一頁 HTML 而且很短。
基本上就是兩個功能:

  • 使用 ID 或 Title 取得電影資料
    使用時必須加上 t={ 電影名稱 }i={ 電影ID } 的參數,二選一
  • 搜尋電影資料庫
    必須加上 s={ 搜尋關鍵字 } 的參數

剩下的參數都是可選可不選的,像是

  • type : 選擇電影 movie、影集 series、特定集數 episode
  • callback : 如果要使用 JSONP 的 callback 參數
  • y : 釋出年份
  • r:回傳資料格式,json (default)或 xml

現在來實作看看:

var apiKey = "2edf5c13";
var searchTitle = 'harry'
var url = "https://www.omdbapi.com/?apikey="+
    apiKey +
    '&s='+ searchTitle;
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();

我把 searchTitle 作為參數放進 request URL 裡,用哈利波特的 ”harry” 來搜尋,結果如下:

可以看到 Response 裡面回傳的物件裡面,可以抓到電影海報、名稱、年份、跟 IMDb 的 ID。
Response 裡顯示的 totalResult 顯示搜尋結果有 573 項,但 response 裡面只有 10 項,這是因爲 response 只回傳搜尋結果第一頁,可以在 request url 參數裡加上 page={頁數} 來得到其他搜尋結果。

那麼這邊 OMDb 看完了,來看看 TMDb 吧。

The Movie Database (TMDb)

TMDb 的 API 頁面就沒有那麼陽春了,畢竟相較之下 OMDb 的開發者只是一群愛好電影的工程師在撰寫維護,TMDb 有自己的平台、排行榜、APP、討論區,稱得上是 IMDb 的競爭者。

TMDb 可以做到的事情比 OMDb 多得多,來仔細看一下文件

取得 API Key:首先先註冊一個帳號,在右邊大頭貼那裡點一下,會出現一個清單,進去 Settings 裡面,可以看到左邊選單上有個 API 選項。

在這邊申請一個 API Key。

申請起來比 OMDb 麻煩一些呢。

TMDb 光是搜尋電影,就有三種 endpoint:

  • /search:基本的文字搜尋
  • /discover:根據一些其他條件搜尋,像是釋出年份或評分
  • /find:根據 ID 搜尋特定結果

為了跟前面的 OMDb 做個對比,這邊就以 search 為主。其他的 endpoint 比方說抓取其他使用者的電影清單或是討論區的資料不多加贅述。

在 Search enpoint 之下,有更多根據不同條件的搜尋方法:

  • /search/company 公司
  • /search/collection 集合
  • /search/keyword 關鍵字
  • /search/multi 同時搜尋電視電影及演員
  • /search/person 演員
  • /search/tv 電視

唯一必要的參數就是 query 搜尋內容,可選的有languagepageinclude-adultregion

TMDb 的文件上面就有 API Tester,所以可以直接在上面試用:

那麼,最後實作的部分,我想寫一個搜尋電影的功能,同時並列 TMBd 跟 OMBd 的結果來做對比。

var form = document.querySelector("form");
var input = document.querySelector('input[type="text"]');
var resultO = document.querySelector(".omdb-result");
var resultT = document.querySelector(".tmdb-result");

function movieResult(source, poster, name, year) {
  var resultItem = document.createElement("div");
  var movieTitle = document.createElement("h4");
  var releaseYear = document.createElement("p");
  var img = document.createElement("img");

  movieTitle.innerHTML = name;
  releaseYear.innerHTML = year;
  img.src = poster;

  resultItem.appendChild(img);
  resultItem.appendChild(movieTitle);
  resultItem.appendChild(releaseYear);

  if (source === "omdb") {
    resultO.appendChild(resultItem);
  } else {
    resultT.appendChild(resultItem);
  }
}

function search(e) {
  e.preventDefault();
  resultO.innerHTML = "";
  resultT.innerHTML = "";
  var searchTitle = input.value;
  makeTRequest(searchTitle);
  makeORequest(searchTitle);
  input.value = "";
}

// for OMDb
var apiKeyO = "2edf5c13";
var urlO = "https://www.omdbapi.com/?apikey=" + apiKeyO + "&type=movie" + "&s=";

function makeORequest(searchTitle) {
  xhr = new XMLHttpRequest();

  xhr.onload = function() {
    var response = JSON.parse(this.responseText).Search;
    response.map(function(item) {
      movieResult("omdb", item.Poster, item.Title, item.Year);
    });
  };
  xhr.open("GET", urlO + searchTitle, true);
  xhr.send();
}

// for TMDb
var apiKeyT = "0f79586eb9d92afa2b7266f7928b055c";
var urlT =
  "https://api.themoviedb.org/3/search/movie?api_key=" + apiKeyT + "&query=";
function makeTRequest(searchTitle) {
  xhr = new XMLHttpRequest();

  xhr.onload = function() {
    var response = JSON.parse(this.responseText).results;
    response.map(function(item) {
      movieResult(
        "tmdb",
        "https://image.tmdb.org/t/p/w300/" + item.poster_path,
        item.title,
        item.release_date
      );
    });
  };
  xhr.open("GET", urlT + searchTitle, true);
  xhr.send();
}

form.addEventListener("submit", search);

畫面:

Codepen 連結


上一篇
[30apis] Day 11 : Tumblr API
下一篇
[30apis] Day 13 : Google Calendar API
系列文
我每天都接一個API30

1 則留言

0
逮丸逮丸
iT邦大師 1 級 ‧ 2018-01-03 09:06:08

一直想把圖書館裡的電影DVD資料與IMDB的資料來做輔助及其相關資料互相連結,
有你這篇的介紹,可快速利用這API來做串連!

我要留言

立即登入留言