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.6 KiB
4.6 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 调用可能失败并做好应对
资源
祝你构建出有用且富有创意的作品！🚀
免责声明：
本文件由人工智能翻译服务Co-op Translator翻译。尽管我们努力确保准确性，但请注意，自动翻译可能存在错误或不准确之处。原始语言的文档应被视为权威来源。对于重要信息，建议使用专业人工翻译。因使用此翻译而产生的任何误解或误释，我们概不负责。