<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "25b8d28b8531352d4eb67291fd7824c4",
  "translation_date": "2025-10-22T22:57:02+00:00",
  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
  "language_code": "mo"
}
-->
# 採用 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. **規劃您的 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)

祝您創建出有用且創意十足的作品！🚀

---

**免責聲明**：  
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。