實作 API 練習

Huli 課堂作業練習 :

參考 Twitch API v5 的文件，寫一隻程式去呼叫 Twitch API，並拿到「最受歡迎的遊戲列表（Get Top Games）」，並依序印出目前觀看人數跟遊戲名稱

不用新版的 Twitch API 來串是因為它實作上比較麻煩，所以使用舊版的 Twitch API v5 來練習吧, 看到別人文章寫 Twitch developers 有提供非常詳細的串接說明，對於第一次串接 API 的人來說實在是相當友善。不過我怎麼感受不到QQ

目標 :

會使用 node.js 的 request 這個 library 來串 API
懂得看 Twitch API 的文件

step1 : 拿到 client ID

從 Twitch API v5 文件裡的 Getting a client ID 這個項目，了解串 API 前必須先拿到 client ID (沒有 Twitch 帳號要先註冊一下)

點它給的連結 : register your application on the Twitch developer portal.

開放授權（OAuth）是一個開放標準，允許用戶讓第三方應用存取該用戶在某一網站上儲存的私密的資源（如相片，影片，聯絡人列表），而無需將用戶名稱和密碼提供給第三方應用。

OAuth允許用戶提供一個權杖，而不是用戶名稱和密碼來存取他們存放在特定服務提供者的資料。每一個權杖授權一個特定的網站（例如，影片編輯網站)在特定的時段（例如，接下來的2小時內）內存取特定的資源（例如僅僅是某一相簿中的影片）。這樣，OAuth讓用戶可以授權第三方網站存取他們儲存在另外服務提供者的某些特定資訊，而非所有內容。 OAuth 維基百科

在這次練習 OAuth redirect URI 不會用到，因此可以隨便亂填或填 http://localhost 就好。建立好後按管理可以看到一些資訊，便可以看到 client ID

step2 : 從 API 列表中找到對的 API

因為我們要拿到「最受歡迎的遊戲列表（Get Top Games）」所以就直覺選 Games Reference 吧，進去後看到以下資訊，訊息不多太好了，有 URL 、參數(只有兩個 limit 和 offset)，跟 Errors 三個部分。

step3 使用 node.js 的 request 這個 library

下載指令 npm install requst
基本用法 request(input, init)
request 文件

step4 : 寫一隻程式去呼叫 Twitch API

注意的是 Twitch API 有告訴你當你拿到 Client-ID，可以放在 Request header 或是 Query-string。可以回去看文件，或這篇文章我放的第一張圖就有說明。

如何把 Client-ID 當成一個 header 傳送給 API ? 還需要帶一個：Accept 的 header。至於怎麼帶 header，請參考：request 文件
如果要把 Client-ID 放在 Query-string，就要遵循它參數格式是怎麼放。

通常帶資訊會用 post 帶資訊到 server 去，因為當我用 get 拿一些資訊，其實還是需要帶一些額外資訊，用 Header 會很麻煩，所以用 post (有隱藏含意,可能要新增資訊)。不過還是要看每個 API 文件， API 文件會跟你說要把資訊帶到 Header 還是 Query-string，這次的 Twitch API 則是兩個都可以。

const request = require('request');

const CLIENT_ID = '99pjv6inn1ogsvbt'; //放來文章這的 CLIENT_ID 我亂放，請放自己的
const BASE_URL = 'https://api.twitch.tv/kraken';


request({
  method: 'GET',
  url: `${BASE_URL}/games/top`,
  headers: {
    'Client-ID': CLIENT_ID,
    'Accept': 'application/vnd.twitchtv.v5+json'
  }
}, function(err, res, body) {
  if (err) {
    return console.log(err)
  }

  const data = JSON.parse(body)
  const games = data.top
  for(let game of games) {
    console.log(game.viewers + ' ' + game.game.name)
  }
})

step5 : 執行看看

恩恩~抓到了，第一是 Just Chatting，第二名是英雄聯盟，十年遊戲歷久不衰好強阿。
串 API 練習就到這邊為止啦~

這邊練習用的 request 那個 library 只能在 node.js 環境上執行
但瀏覽器使用不一樣的環境，所以從電腦發出的 request 和瀏覽器發出 request 是不一樣的事情。

用 node.js 呼叫 API 與在網頁上呼叫的根本差異是什麼？連結

Node.js 程式直接發 request 給 server 然後可以直接拿到 server 的 response，中間的東西都是不會被改過的，也沒有任何的限制。

瀏覽器上的 JS 會先透過瀏覽器，然後瀏覽器發 request 給 server，接著 server 在發 response 給瀏覽器，瀏覽器在把資料給 JS。