Week4 解題思考、想法、心得

hw1：來自秋秋鞋的任務

有一天，住你隔壁的鄰居秋秋鞋跑來按門鈴，說有事想要找你討論，他最近在做一個知識型的 YouTube 頻道，可是快要沒有靈感了。

這時，他想到一個好主意！他只要能夠看到書店提供的書籍相關資訊，就可以從中汲取靈感，之後就可以發想相關題材，頻道就不會一直不更新了。

身為秋秋鞋的好朋友，這個重責大任當然就交給你了！

請閱讀開頭給的 API 文件並串接，用 node.js 寫出一個程式，執行後會在 console 列出前十本書籍的 id 以及書名。

順帶一提，叫做秋秋鞋是因為他很喜歡秋天。

範例：

node hw1.js
1 克雷的橋
2 當我想你時，全世界都救不了我
3 我殺的人與殺我的人
....

對於這題實在有點沒想法，所以先試著取得 header。

翻了技術文件還是不太明白。後來看了一下 api 文件原來就是透過改網址，這是 REST 的方式。

const request = require('request');
request('https://lid*******store.herokuapp.com/books?_limit=10', (_error, _response, body) => {
  console.log(body);
});

hw2：不滿足的秋秋鞋

雖然說上次你幫秋秋鞋完成了列出書籍清單的程式，但是一次列出十本實在是太少了，大概一個禮拜就可以把這些資訊消化完，但是經營頻道卻是長期的事情，他需要更多更多的資料才行。例如說一次應該要輸出二十本書，然後可以輸入一個 id 就返回書籍資料，這樣他就可以隨便想一個數字，然後看看是哪本書，對於靈感很有幫助。

請你閱讀開頭給的 API 文件並串接，用 node.js 寫出一個程式並接受參數，輸出相對應的結果，範例如下：

node hw2.js list // 印出前二十本書的 id 與書名
node hw2.js read 1 // 輸出 id 為 1 的書籍資料

因為對傳入參數完全不懂意思，所以去找網路上的資源。原來就是之前介紹的 argv 指令。參考一 參考二

所以根據題目我需要 傳入 list 就顯示前 20 本書名

如果傳入的是 read 就開始導到找書籍資料

在測試之後發現，多輸入的參數是判定為字串，所以就可以利用 === 判斷字串即可

思考過後發現無法把 if 寫在視窗內，所以就是分開來寫

const request = require('request');
const process = require('process');
if (process.argv[2] === 'list') {
  request('https://lide********re.herokuapp.com/books?_limit=20', (_error, _response, body) => {
    console.log(body);
  });
}
if (process.argv[2] === 'read') {
  request(`https://lid****ore.herokuapp.com/books/${process.argv[3]}`, (_error, _response, body) => {
    console.log(body);
  });
}

hw3：最後的考驗

原本以為上次就已經是最後一次幫忙，沒想到秋秋鞋還是又跑來找你了。他說他想要更多功能，他想把這整個書籍資料庫當作自己的來用，必須能夠刪除、新增以及修改書本，這樣他就可以管理自己的書籍了。

雖然你很想問他說為什麼不用 Excel 就好，但你問不出口，再加上你最近剛學成是需要練習的機會，於是你就答應了。

請閱讀開頭給的 API 文件並串接，用 node.js 寫出一個程式並接受參數，輸出相對應的結果，範例如下：

node hw3.js list // 印出前二十本書的 id 與書名
node hw3.js read 1 // 輸出 id 為 1 的書籍
node hw3.js delete 1 // 刪除 id 為 1 的書籍
node hw3.js create "I love coding" // 新增一本名為 I love coding 的書
node hw3.js update 1 "new name" // 更新 id 為 1 的書名為 new name

這次要實現多功能，所以就必須要多寫一些判斷式，然後我再去一個個實現我所需要的功能。

create 利用 post 功能 必須要符合該網站的格式

delete：request.delete() 後面發現其實也不需要 function 所以直接刪除 function。

update： request.patch() 語法跟 post 差不多，所以直接使用 post 來修改

const request = require('request');
const process = require('process');
if (process.argv[2] === 'list') {
  request('https://li********.herokuapp.com/books?_limit=20', (_error, _response, body) => {
    console.log(body);
  });
}
if (process.argv[2] === 'read') {
  request(`https://li********.herokuapp.com/books/${process.argv[3]}`, (_error, _response, body) => {
    console.log(body);
  });
}
if (process.argv[2] === 'delete') {
  request.delete(`https://li********.herokuapp.com/books/${process.argv[3]}`);
}
if (process.argv[2] === 'create') {
  request.post(
    {
      url: 'https://li********.herokuapp.com/books/',
      form: {
        name: process.argv[3],
      },
    },
    (_error, _response, body) => {
      console.log('你已成功新增\n', body);
    },
  );
}
if (process.argv[2] === 'update') {
  request.patch(
    {
      url: `https://li********.herokuapp.com/books/${process.argv[3]}`,
      form: {
        name: process.argv[4],
      },
    },
  );
}

hw4：探索新世界

上次幫秋秋鞋做完那個小程式以後，你會寫程式的消息似乎就傳開了，有一位 Twitch 平台實況主果凍跑來聯繫你，想請你幫忙做個東西。

事情是這樣的，他原本是 LOL 的玩家，但因為某些原因帳號被 ban 掉了，為了維持實況的熱度，需要去找其他遊戲來玩，可是他又不知道哪些遊戲比較熱門，會有比較多人觀看。

因此，他寫請你寫一個小程式，能夠去撈取 Twitch 上面受歡迎的遊戲，他就能夠參考這個列表來決定要實況哪個遊戲。

由於你偶爾也會看他的實況，所以你欣然接受了這個挑戰，準備來串串看真實世界的 API。

請參考 Twitch API 的文件，寫一隻程式去呼叫 Twitch API，並拿到「最受歡迎的遊戲列表（Get Top Games）」然後依序印出 id 跟遊戲名稱。

node hw4.js
21779 League of Legends
29595 Dota2
511224 Apex Legends
33214 Fortnite
....

直接看文件，需要先註冊之後再 app 那邊註冊，但看不懂網址要弄甚麼，於是上網查詢可以直接輸入 http://localhost:8000 來源

印出的東西必須要是 ID 跟遊戲名字，然後自己有點無頭緒的亂找。

先理清頭緒，首先必須要找到 api 的地址的大致形式，試著把網址利用瀏覽器開啟，它會回應 401 也就是沒有授權，所以還必須想看看怎麼樣給予伺服器授權碼。

因為 twitch 上面都是使用 curl 所以決定找個指令對照表來看看。參考

需先認證或登入才能使用的service

許多服務，需先進行登入或認證後，才能存取其API服務，依服務要求的條件，的curl可以透過cookie，session或加入在header加入session key，api key或認證的token來達到認證的效果。

session 例子:

後端如果是用session記錄使用者登入資訊，後端會傳一個 session id給前端，前端需要在每次跟後端的requests的header中置入此session id，後端便會以此session id識別前端是屬於那個session，以達到session的效果

但是完全看不出來要怎麼樣使用 request 來放置 header

回去看技術文件

const request = require('request');
const options = {
  url: 'https://api.twitch.tv/kraken/streams/',
  headers: {
    'Client-ID': '7jnow7dr6xs9f979a40a1rbd3rlim6'
  }
};
function callback(error, response, body) {
  if (!error && response.statusCode == 200) {
    const info = JSON.parse(body);
    console.log(info);
  }
}
request(options, callback);

目前已經有辦法撈資料，但現在還在看怎麼樣取得 top game 的資料

const request = require('request');
// 題目要求要直接輸出所需要的結果
const options = {
  url: 'https://api.twitch.tv/helix/games/top',
  headers: {
    'Client-ID': '7jnow7dr6xs9f979a40a1rbd3rlim6'
  }
};
function callback(error, response, body) {
  if (!error && response.statusCode == 200) {
    const info = JSON.parse(body);
    console.log(info.data);
  }
}
request(options, callback);

這樣可以取得 top game 的所有資料，但看了一下資料它是物件裡面包陣列，所以得想辦法存取物件裡面的陣列

{ data:
   [ { id: '21779',
       name: 'League of Legends',
       box_art_url:
        'https://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends-{width}x{height}.jpg' },
     { id: '33214',
       name: 'Fortnite',
       box_art_url:
        'https://static-cdn.jtvnw.net/ttv-boxart/Fortnite-{width}x{height}.jpg' },]

本來是把 data 給另外命名一個變數就發現可以直接存取，後來抱著試試看的心態去測，就直接把陣列的地方給用陣列的 index 取值，發現也可以這樣使用。餘是就是解答了。

const request = require('request');
const options = {
  url: 'https://api.twitch.tv/helix/games/top',
  headers: {
    'Client-ID': '7jnow7dr6xs*************0a1rbd3rlim6',
  },
};
function callback(error, response, body) {
  if (!error && response.statusCode === 200) {
    const info = JSON.parse(body);
    for (let i = 0; i < info.data.length; i += 1) {
      console.log(info.data[i].id, info.data[i].name);
    }
  }
}
request(options, callback);

hw5：簡答題

請將答案寫在 hw5.md。

1. 請以自己的話解釋 API 是什麼？
2. 請找出三個課程沒教的 HTTP status code 並簡單介紹
3. 假設你現在是個餐廳平台，需要提供 API 給別人串接並提供基本的 CRUD 功能，包括：回傳所有餐廳資料、回傳單一餐廳資料、刪除餐廳、新增餐廳、更改餐廳，你的 API 會長什麼樣子？請提供一份 API 文件。

## 請以自己的話解釋 API 是什麼
API 就是一種溝通用的介面，介面原始的定義也是使兩個電子設備可以彼此溝通所使用的方式，但它是屬於較抽象化的概念，所以很難可以界定它是怎麼樣的東西。不過可以說 API 就是一個可以讓兩個不同的軟體去取得或修改資料的方法，在現在的話，則是很多平台可以讓其他人與之交換資料，或是修改資料的方式。
## 請找出三個課程沒教的 HTTP status code 並簡單介紹
502 Bad Gateway
這個產生的問題是比較複雜的，就是中間的閘道器有問題，因為網路連線會經過很多的閘道，只要其中的一個閘道有問題，就有可能導致錯誤，像是防火牆的阻擋，或是主機太爛無法承受太多連線都有可能會產生這種情況。
505 HTTP Version Not Supported
伺服器不支援，或者拒絕支援在請求中使用的HTTP版本。在這個回應中，是伺服器不支持該 HTTP 版本，經過查詢網路，有時候在使用指令的時候，如果多打一些空格，也可能會導致伺服器回應這樣的錯誤訊息。
414 Request-URI Too Long
指的是 url 連結的長度太長了
其實一般來說會出現Requsest-URI Too Long。就是代表了url連結長度太長了。 一般會發生這樣的情況，大多數是發生在用get方式傳送資料時發生的，get處理的容量太大時就會有這樣的錯誤。
## 假設你現在是個餐廳平台，需要提供 API 給別人串接並提供基本的 CRUD 功能，包括：回傳所有餐廳資料、回傳單一餐廳資料、刪除餐廳、新增餐廳、更改餐廳，你的 API 會長什麼樣子？請提供一份 API 文件。
http://www.goodfood.com/
```
"restaurant" [
  {
    "id": "1",
    "restaurant_name": "KFC",
    "restaurant_classification": "fastfood",
    "restaurant_address": "Zhongzheng Dist., Taipei City",
  },
   {
    "id": "2",
    "restaurant_name": "McDonald's",
    "restaurant_classification": "fastfood",
    "restaurant_address": "Zhongzheng Dist., Taipei City",
  },
   {
    "id": "3",
    "restaurant_name": "TGI FRIDAYS",
    "restaurant_classification": "diner",
    "restaurant_address": "Wanhua Dist., Taipei City",
  },
   {
    "id": "4",
    "restaurant_name": "FLORONSGARDEN",
    "restaurant_classification": "Restaurant & Cafe",
    "restaurant_address": "Zhongzheng Dist., Taipei City",
  },
   {
    "id": "5",
    "restaurant_name": "TASTY",
    "restaurant_classification": "bistro",
    "restaurant_address": "Wenshan Dist., Taipei City",
  },
],
```
| 說明 | Method | path | 參數 | 範例 |
|--------|--------|------------|----------------------|----------------|
| 獲取所有餐廳 | GET | /restaurant | _limit:限制回傳資料數量 | /restaurant?_limit=5 |
| 獲取單一餐廳 | GET | /restaurant/:id | 無 | /books/10 |
| 新增餐廳 | POST | /restaurant | name: 餐廳名稱 | 無 |
| 刪除餐廳 | DELETE | /restaurant/:id | 無 | 無 |
| 更改餐廳資訊 | PATCH | /restaurant/:id | 變更的項目: 內容 | 無 |
取得所有餐廳時：GET /restaurant
```
GET http://www.goodfood.com/restaurant
```
獲取其中一個餐廳時： GET /restaurant/:id 
```
GET http://www.goodfood.com/restaurant/1
```
新增餐廳：POST /restaurant 
```
POST http://www.goodfood.com/restaurant/
```
刪除餐廳：DELETE /restaurant/:id 
```
DELETE http://www.goodfood.com/restaurant/1
```
變更餐廳資訊：PATCH restaurant/:id 
```
PATCH http://www.goodfood.com/restaurant/1
```