# 採用 API

## 概覽

API 為創意網站開發帶來無限可能！在此作業中，你將選擇一個外部 API，然後建立一個解決實際問題或為用戶提供有價值功能的瀏覽器擴充功能。

## 指示

### 第 1 步：選擇你的 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/) ，有趣的數字知識

### 第 2 步：規劃你的擴充功能
在撰寫程式碼前，回答以下規劃問題：
- 你的擴充功能解決了什麼問題？
- 目標用戶是誰？
- 會在本地儲存什麼資料？
- 如何處理 API 故障或速率限制？

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

**必要功能：**
- 表單輸入，用於任何必要的 API 參數
- API 整合及完善的錯誤處理
- 本地儲存使用者偏好或 API 金鑰
- 清晰且響應式的使用者介面
- 載入狀態與使用者回饋

**程式碼要求：**
- 使用現代 JavaScript（ES6+）功能
- 使用 async/await 來呼叫 API
- 以 try/catch 區塊實作適當的錯誤處理
- 添加有意義的註解說明程式碼
- 遵守一致的程式碼格式

### 第 4 步：測試與完善
- 使用各種輸入測試你的擴充功能
- 處理邊緣狀況（無網路、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. **規劃 UI**：先手繪擴充功能介面再寫程式碼
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 -->