# 採用 API

## 概述

API 為創意網頁開發開啟無限可能！在此作業中，你將選擇一個外部 API 並構建一個瀏覽器擴充功能，解決實際問題或為使用者提供有價值的功能。

## 指示

### 第一步：選擇你的 API
從此精選的[免費公共 API 清單](https://github.com/public-apis/public-apis)中選擇一個 API。考慮以下分類：

**新手熱門選項：**
- **娛樂**：使用 [Dog CEO API](https://dog.ceo/dog-api/) 取得隨機狗狗圖片
- **天氣**：使用 [OpenWeatherMap](https://openweathermap.org/api) 獲取當前天氣資料
- **語錄**：使用 [Quotable API](https://quotable.io/) 取得勵志語錄
- **新聞**：使用 [NewsAPI](https://newsapi.org/) 獲取即時頭條
- **趣味事實**：使用 [Numbers API](http://numbersapi.com/) 獲得有趣的數字事實

### 第二步：規劃你的擴充功能
開始編碼前，請回答下列規劃問題：
- 你的擴充功能解決了什麼問題？
- 目標使用者是誰？
- 你會將哪些資料存放在本地儲存？
- 你將如何處理 API 錯誤或速率限制？

### 第三步：建立你的擴充功能
你的擴充功能應包含：

**必備功能：**
- 表單輸入以填寫必要的 API 參數
- API 整合並包含適當的錯誤處理
- 本地儲存使用者偏好或 API 金鑰
- 簡潔且響應式的用戶介面
- 載入狀態與使用者回饋

**程式碼要求：**
- 使用現代 JavaScript (ES6+) 特性
- 使用 async/await 實作 API 呼叫
- 使用 try/catch 區塊妥善處理錯誤
- 添加有意義的註解說明程式碼
- 遵循一致的程式碼格式

### 第四步：測試與修飾
- 用多種輸入測試你的擴充功能
- 處理邊界狀況（無網路、API 回應無效）
- 確保瀏覽器重啟後擴充功能仍可正常運作
- 新增使用者友善的錯誤訊息

## 額外挑戰

讓你的擴充功能更上一層樓：
- 新增多個 API 端點以提供更豐富功能
- 實作資料快取以減少 API 呼叫
- 建立常用功能的鍵盤快捷鍵
- 新增資料匯入/匯出功能
- 實作使用者自訂選項

## 提交需求

1. **可運作的瀏覽器擴充功能**，成功整合你選擇的 API
2. **README 檔案**說明：
   - 你選擇了哪個 API 以及原因
   - 如何安裝及使用你的擴充功能
   - 任何 API 金鑰或設定需求
   - 擴充功能操作截圖
3. **乾淨且有註解的程式碼**，遵循現代 JavaScript 實務

## 評分標準

| 標準 | 優異 (90-100%) | 精通 (80-89%) | 發展中 (70-79%) | 初階 (60-69%) |
|----------|---------------------|---------------------|---------------------|--------------------|
| **API 整合** | 完美的 API 整合，含全面錯誤及邊界案例處理 | 成功整合 API，具基本錯誤處理 | API 可用但錯誤處理有限 | API 整合存在嚴重問題 |
| **程式碼品質** | 乾淨、注釋完善的現代 JavaScript 符合最佳實務 | 良好的程式結構與適當注釋 | 程式碼可用但需更好組織 | 程式碼品質差且注釋少 |
| **使用者體驗** | 精緻介面，載入狀態及使用者回饋優秀 | 良好介面，基本使用者回饋 | 基本功能介面可用 | 使用者體驗差且介面混亂 |
| **本地儲存** | 精細運用本地儲存並含資料驗證與管理 | 為主要功能正確實作本地儲存 | 基本使用本地儲存 | 本地儲存使用極少或錯誤 |
| **文件** | 詳盡 README 含安裝說明及截圖 | 良好文件，涵蓋多數需求 | 基本文件缺部分細節 | 文件缺失或不足 |

## 入門提示

1. **從簡單開始**：選擇不需複雜認證的 API
2. **閱讀文件**：徹底了解所選 API 的端點與回應
3. **規劃介面**：撰寫介面草圖再開始編碼
4. **頻繁測試**：逐步建立並測試各項功能
5. **錯誤處理**：隨時假設 API 呼叫可能失敗並做好準備

## 資源

- [瀏覽器擴充功能文件](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
- [Fetch API 指南](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
- [本地儲存教學](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
- [JSON 解析與處理](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)

祝你打造出有用且富創意的作品！🚀

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所引起的任何誤解或誤譯負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->