前面幾天已經實際使用過 Open Library 的書籍 API，
從第一次查詢書籍，到使用不同的搜尋關鍵字，再進一步分析 API 回傳的 JSON 結構。

不過之前的操作主要都是直接在瀏覽器輸入 API 網址，再觀察 API 回傳的資料。

今天決定把前面學到的內容真正做成一個可以操作的小工具，
讓使用者不用直接接觸複雜的 JSON，而是可以透過自己建立的網頁搜尋書籍。

⸻

一、實作目標

這次實作的目標是製作一個簡單的「書籍搜尋工具」。

使用者可以在搜尋框輸入書名或關鍵字，按下搜尋後，網頁會將這個關鍵字傳送給 Open Library API，再把 API 回傳的資料整理後顯示在畫面上。

整個流程可以整理成：

使用者輸入關鍵字 → JavaScript 發送 Request → Open Library API → 回傳 JSON → 程式取得書籍資料 → 顯示搜尋結果

例如輸入：Harry Potter

程式就會將這個關鍵字加入 API 的搜尋參數，向 Open Library 發送查詢。
這和前面直接把 API 網址貼到瀏覽器的方式不同，這次是由自己製作的網頁負責與 API 溝通。

⸻

二、建立網頁基本架構

這次使用 HTML、CSS 和 JavaScript 三個部分完成。
HTML 負責建立網頁上的基本內容，例如標題、搜尋框、搜尋按鈕以及放置搜尋結果的位置。
CSS 則負責調整網頁的外觀，讓原本只有文字和輸入框的畫面看起來比較完整。
最後是 JavaScript，也是這次實作最重要的部分。

JavaScript 負責取得使用者輸入的搜尋關鍵字，
建立 API Request，取得 API 回傳的 JSON，再從 JSON 中找出需要顯示的資料。

因此三個部分可以簡單理解成：
HTML → 建立畫面
CSS → 調整外觀
JavaScript → 讓 API 真正運作

實際製作時，
我也會把這三個部分分別建立成 index.html、style.css 和 script.js。

【HTML 程式碼】
這張截圖可以看到自己建立的 HTML 結構，包括書籍搜尋工具的標題、搜尋框、搜尋按鈕，以及顯示結果的區域。

【CSS 程式碼】
CSS 則用來調整搜尋工具的版面，例如搜尋框、按鈕、書籍資料和圖片的排列方式。

⸻

三、JavaScript 連接書籍 API

完成基本的網頁畫面後，接下來就是讓網頁真的可以使用 API。
JavaScript 會先取得使用者在搜尋框中輸入的內容。

例如輸入：Harry Potter
接著將這個關鍵字放入 Open Library API 的搜尋網址中。
程式使用 fetch() 發送 Request，
再透過：response.json()
將 API 回傳的資料轉換成可以在 JavaScript 中處理的 JSON。

取得 JSON 後，再從前面分析過的 docs 裡取得書籍資料。
例如可以從每一本書的資料中取得：

• title：書名
• author_name：作者
• first_publish_year：第一次出版年份
• cover_i：封面相關資料

最後再把這些資料整理成比較容易閱讀的形式，顯示在自己的網頁上。



【JavaScript 程式碼】

從這張程式碼截圖可以看到，這次實作真正使用了前面學過的 API 概念。
其中 fetch() 負責向 API 發送請求，而 response.json() 則負責處理 API 回傳的 JSON。
這也讓前面幾天分析 JSON 時看到的 docs、title、author_name 等欄位，
在這次實作中真正派上用場。

⸻

四、實際搜尋Harry Potter

完成程式後，
先使用前面一直操作過的關鍵字：Harry Potter
在搜尋框輸入後按下搜尋，網頁就會向 Open Library API 發送 Request。
這次不需要自己打開 API 網址，也不用直接閱讀一大串 JSON。
程式會自動取得資料，再將搜尋結果整理成比較容易閱讀的書籍資訊。

【搜尋 Harry Potter 的實際畫面】

從這次結果可以看到，
原本需要在 API Response 裡尋找的資料，
現在已經可以直接透過自己製作的網頁看到。
這也是這次實作和前面單純查詢 API 最大的不同。

⸻

五、更換關鍵詞

為了確認這個搜尋工具不是只顯示固定的 Harry Potter 資料，
再使用另一個不同的書名進行測試。
這次搜尋：The Little Prince
輸入新的關鍵字後，搜尋結果也會跟著改變。

【搜尋 The Little Prince 的實際畫面】

這個測試可以確認網頁並不是把某一本書的資料直接寫死在程式裡，
而是會根據使用者輸入的內容重新向 API 查詢。

也就是：
Harry Potter → API 回傳 Harry Potter 相關資料
The Little Prince → API 回傳 The Little Prince 相關資料
因此，這個網頁已經可以完成基本的「輸入 → 查詢 → 顯示結果」流程。

⸻

六、實作內容與之前所學觀念

完成這次實作後，可以發現前面學過的許多概念其實都串在一起了。
之前學到的 Endpoint，這次被 JavaScript 用來建立 API 請求。
之前學到的 Parameter，這次則是使用者輸入的搜尋關鍵字。
之前學到的 GET Request，則透過 fetch() 向 Open Library API 取得資料。
API 回傳 Response 後，再使用 JSON 的結構找到需要的資料。
最後將資料顯示在自己的網頁上。

整個流程可以整理成：
搜尋關鍵字 → Parameter → GET Request → API Response → JSON → 取得資料 → 網頁顯示
這也讓我第一次比較完整地體會到，
API 不只是可以直接在網址中查看資料，
也可以成為自己製作網站或工具時取得資料的來源。

⸻

七、總結

今天第一次把前面學習的書籍 API 實際做成一個可以操作的小工具。

從建立 HTML、CSS 和 JavaScript，
到使用 fetch() 向 Open Library API 發送 Request，
再從 JSON 的 docs 中取得書籍資料，最後顯示在自己的網頁上，
完整走過了一次 API 的實際應用流程。

這次也特別使用 Harry Potter 和 The Little Prince 兩個不同的關鍵字進行測試，
確認搜尋結果會根據使用者輸入的內容改變。

前面學習 API 時，
看到一大串 JSON 可能會覺得資料很多，也不太容易直接想像這些資料可以拿來做什麼。

但完成這次實作後，
我開始比較能理解，API 提供的是資料，
而我們可以透過程式決定要取得哪些資料，以及最後要用什麼方式呈現。

今天完成的是第一個書籍 API 實作。
下一篇會繼續使用前面學過的電影 API，嘗試用類似的方法建立另一個可以實際操作的功能。