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.
4.7 KiB
4.7 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 的端點與回應
- 規劃介面：撰寫介面草圖再開始編碼
- 頻繁測試：逐步建立並測試各項功能
- 錯誤處理：隨時假設 API 呼叫可能失敗並做好準備
資源
祝你打造出有用且富創意的作品！🚀
免責聲明： 本文件使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所引起的任何誤解或誤譯負責。