前一天實際完成了書籍 API 的小實作，
將 Open Library API 串接到自己建立的網頁中，讓使用者可以輸入書名並取得搜尋結果。

今天則延續相同的方式改使用前面學習過的 TVMaze 節目 API，建立一個簡單的節目搜尋工具。
這次同樣使用 HTML、CSS 和 JavaScript，
讓網頁可以根據使用者輸入的關鍵字向 API 發送 Request，
再將回傳的節目資料整理後顯示在畫面上。

⸻

一、實作目標

這次實作的目標是做出一個「節目搜尋工具」。
使用者可以在搜尋框輸入節目名稱或關鍵字，
按下搜尋後，JavaScript 會將輸入的內容加入 TVMaze API 的搜尋網址，
再向 API 發送 Request。

API 回傳資料後程式會從 JSON 中取得需要的節目資訊，
例如節目名稱、類型、語言、播出狀態和首播日期等，最後顯示在自己的網頁上。

整個流程可以整理成：
輸入關鍵字 → JavaScript 建立 Request → TVMaze API → 回傳 JSON → 取得節目資料 → 顯示在網頁上

這次的做法和前一天的書籍 API 實作很相似，
但資料來源和回傳的內容不同，因此也可以藉此觀察不同 API 的使用方式。

⸻

二、建立節目搜尋網頁

這次同樣將網頁分成 HTML、CSS 和 JavaScript 三個部分。

HTML 負責建立基本的網頁結構，
包括「節目搜尋工具」的標題、搜尋框、搜尋按鈕，以及放置搜尋結果的區域。
CSS 則負責調整網頁的版面與外觀，讓搜尋結果比較容易閱讀。
JavaScript 則是這次實作的主要部分。它會取得搜尋框中的文字，
將關鍵字加入 TVMaze API 的查詢網址，再使用 fetch() 發送 Request。

【HTML 程式碼】

從 HTML 可以看到這次建立的搜尋介面，使用者只需要在搜尋框輸入關鍵字即可。

【截圖二：CSS 程式碼】

CSS 則負責調整搜尋工具的顯示方式，讓 API 回傳的資料不會全部擠在一起。

【截圖三：JavaScript 程式碼】

JavaScript 會使用 fetch() 取得 API 回傳的資料，
再從每一筆搜尋結果中的 show 取得節目資訊。

這裡也再次使用到前面學過的 JSON 結構。
TVMaze 的搜尋結果中，
每一筆資料並不是直接把節目名稱放在最外層，而是可以在 show 裡找到節目的詳細資料。

⸻

三、第一次搜尋：Harry Potter

完成網頁後，
首先使用前面操作 TVMaze API 時曾經使用過的Harry Potter進行搜尋。

輸入關鍵字並按下搜尋後，
JavaScript 會將這個關鍵字傳送給 TVMaze API，再將搜尋結果顯示在網頁上。

這次可以看到搜尋結果中的第一筆資料就是與 Harry Potter 相關的節目。
這也表示自己的網頁已經成功完成從「輸入關鍵字」到「取得 API 資料」的流程。

⸻

四、改變關鍵字

為了確認這個搜尋工具真的會根據使用者輸入的內容重新查詢，我又測試了另外兩個關鍵字：

Harry

以及：

Potter

這三次搜尋的關鍵字只有些微不同，但搜尋結果並不完全相同。
搜尋 Harry Potter 時，第一筆結果是 Harry Potter。
搜尋 Harry 時，API 會找到名稱中符合 Harry 的其他節目，因此第一筆結果也會跟前一次不同。
而搜尋 Potter 時，則會出現符合 Potter 的節目，第一筆結果同樣與前兩次不同。
這個結果也讓我更直接看到搜尋參數對 API Response 的影響。
當 Request 中的 q 改變時，API 進行搜尋的條件也會跟著改變，因此回傳的資料也會不同。

⸻

五、從三次搜尋發現什麼？

這次實際測試三個關鍵字後，可以更明顯地理解 API 搜尋功能。

如果直接搜尋「Harry Potter」，
API 會尋找與這個完整關鍵字相關的節目；
改成只搜尋「Harry」後搜尋範圍就會改變；
而搜尋「Potter」時，又會得到另一組結果。

即使使用的是同一個 API、同一個 Endpoint，
只要改變搜尋參數，就可能得到不同的 Response。

這也和前面學習過的 Parameter 有直接關係。
可以把這三次操作理解成：
相同 Endpoint
＋
不同的搜尋 Parameter
↓
不同的 API Response

這讓我發現API 的實際應用不只是「把資料拿回來」，
使用者提供的條件也會影響最後取得的資料。

⸻

六、這次實作與前一天不同之處

前一天製作的是書籍搜尋工具，使用 Open Library API 取得書籍資料。
今天則改成 TVMaze API，取得節目相關資料。

兩個實作的基本流程其實非常接近：
使用者輸入 → JavaScript → API Request → JSON Response → 整理資料 → 網頁顯示

但兩個 API 提供的資料不同，因此程式需要取得的欄位也不同。
書籍 API 可以取得書名、作者和出版年份等資料，
而節目 API 則可以取得節目名稱、類型、語言、狀態和首播日期等資訊。

透過連續做兩個實作，
我發現只要了解 API 的 Endpoint、Parameter 和 JSON 結構，
就可以依照不同 API 提供的資料設計不同的小工具。

————

七、總結

今天延續前一天的方式，
完成了第二個 API 小實作，
使用 TVMaze 節目 API 建立自己的節目搜尋工具。

這次除了成功讓網頁取得 API 資料之外，也實際測試了三個不同的搜尋關鍵字：
Harry Potter、Harry、Potter
三次搜尋使用相同的 API，但因為搜尋參數不同，第一筆搜尋結果也跟著改變。

這次實作讓我更清楚看到前面學過的 Request、Parameter、Response 和 JSON 之間的關係。

目前已經完成書籍 API 和節目 API 兩個實作，
下一篇會繼續使用第三種資料來源——天氣 API，
嘗試建立另一個可以實際查詢不同地點天氣資料的小工具。