You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5.1 KiB
5.1 KiB
採用 API
概述
API 為創意網頁開發開啟了無限可能！在這項作業中，您將選擇一個外部 API，並建立一個瀏覽器擴充功能，解決實際問題或為使用者提供有價值的功能。
指示
第一步：選擇您的 API
從這份精選的免費公共 API 清單中選擇一個 API。可以考慮以下類別：
適合初學者的熱門選擇：
- 娛樂：Dog CEO API 提供隨機狗狗圖片
- 天氣：OpenWeatherMap 提供即時天氣數據
- 名言：Quotable API 提供激勵人心的名言
- 新聞：NewsAPI 提供最新頭條新聞
- 趣味知識：Numbers API 提供有趣的數字知識
第二步：規劃您的擴充功能
在開始編碼之前，請回答以下規劃問題：
- 您的擴充功能解決了什麼問題？
- 您的目標使用者是誰？
- 您會在本地存儲中保存哪些數據？
- 您如何處理 API 故障或速率限制？
第三步：建立您的擴充功能
您的擴充功能應包含以下內容：
必要功能：
- 用於輸入 API 參數的表單
- 與 API 的整合並具備適當的錯誤處理
- 用於保存使用者偏好或 API 金鑰的本地存儲
- 簡潔且響應式的使用者介面
- 加載狀態和使用者反饋
程式碼要求：
- 使用現代 JavaScript (ES6+) 功能
- 使用 async/await 進行 API 呼叫
- 使用 try/catch 塊進行適當的錯誤處理
- 添加有意義的註解來解釋您的程式碼
- 遵循一致的程式碼格式
第四步：測試與完善
- 使用各種輸入測試您的擴充功能
- 處理邊界情況（例如無網路、無效的 API 回應）
- 確保您的擴充功能在瀏覽器重啟後仍然正常運作
- 添加使用者友好的錯誤訊息
額外挑戰
讓您的擴充功能更上一層樓：
- 添加多個 API 端點以提供更豐富的功能
- 實現數據快取以減少 API 呼叫
- 為常用操作創建鍵盤快捷鍵
- 添加數據匯出/匯入功能
- 實現使用者自定義選項
提交要求
- 可運行的瀏覽器擴充功能，成功整合您選擇的 API
- README 文件，說明：
- 您選擇了哪個 API 以及原因
- 如何安裝和使用您的擴充功能
- 任何需要的 API 金鑰或設置
- 擴充功能運行中的截圖
- 乾淨且有註解的程式碼，遵循現代 JavaScript 實踐
評分標準
| 評分標準 | 優秀 (90-100%) | 良好 (80-89%) | 發展中 (70-79%) | 初步 (60-69%) |
|---|---|---|---|---|
| API 整合 | 完美的 API 整合，具備全面的錯誤處理和邊界情況管理 | 成功的 API 整合，具備基本的錯誤處理 | API 運作正常，但錯誤處理有限 | API 整合存在重大問題 |
| 程式碼品質 | 乾淨、註解清晰的現代 JavaScript，遵循最佳實踐 | 良好的程式碼結構，註解充分 | 程式碼可運作，但需要更好的組織 | 程式碼品質差，註解很少 |
| 使用者體驗 | 精緻的介面，提供出色的加載狀態和使用者反饋 | 良好的介面，提供基本的使用者反饋 | 基本的介面，功能尚可 | 使用者體驗差，介面令人困惑 |
| 本地存儲 | 高級的本地存儲使用，具備數據驗證和管理 | 正確實現本地存儲的關鍵功能 | 基本的本地存儲實現 | 本地存儲使用有限或不正確 |
| 文件 | 詳盡的 README，包含設置說明和截圖 | 良好的文件，涵蓋大部分要求 | 基本文件，缺少部分細節 | 文件不完整或缺失 |
入門提示
- 從簡單開始：選擇不需要複雜身份驗證的 API
- 閱讀文檔：徹底了解您選擇的 API 的端點和回應
- 規劃您的 UI：在編碼之前先繪製擴充功能的介面草圖
- 頻繁測試：逐步構建並在添加每個功能後進行測試
- 處理錯誤：始終假設 API 呼叫可能失敗並提前做好計劃
資源
祝您創建出有用且創意十足的作品！🚀
免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。