第2级：中级项目

相关源文件

• Projects/1-Beginner/Calendar-App.md
• Projects/2-Intermediate/Chrome-Theme-Extension.md
• README.md

目的与范围

本文档详细介绍了“App Ideas Collection”中的中级项目（第二层），专为已超越基础知识、准备应对更复杂挑战的开发者设计。这些项目旨在面向熟悉 UI/UX 原则、现代开发工具以及构建利用 API 服务的应用程序的开发者。

有关初学者项目，请参阅第一层：初学者项目。有关需要后端专业知识的高级项目，请参阅第三层：高级项目。

来源：README.md36-38

中级开发者画像

第二层项目面向以下特征的开发者

• 能够熟练创建精美的用户界面
• 熟悉开发工具和工作流程
• 有 API 集成经验或愿意学习
• 希望通过更复杂的应用程序来丰富自己的作品集
• 对开发跨平台或基于扩展的应用程序感兴趣

来源：README.md36-38

项目特点

技能领域覆盖

技术要求

第二层项目通常涉及

1. 与外部 API 和服务的集成
2. 更复杂的 UI 交互和状态管理
3. 数据转换和处理
4. 浏览器扩展开发
5. 高级前端技术
6. 中等级别的算法挑战

来源：README.md84-118

项目类别

根据仓库的结构，第二层项目可分为以下几类

类别	描述	示例项目
API 集成	连接到第三方服务的项目	图书查找器 App、慈善机构查找器 App、GitHub 用户资料
数据处理	转换或生成数据的应用程序	Markdown 表格生成器、密码生成器
交互式应用程序	具有复杂用户交互的 App	卡牌记忆游戏、绘图 App、梗图生成器
浏览器扩展	网页浏览器插件	Chrome 主题扩展
工具型应用程序	用于特定任务的实用程序	RegExp 助手、待办事项 App、打字练习

来源：README.md84-118

技术实现模式

典型第二层应用程序的架构

通用实现技术

第二层项目通常使用

• 现代 JavaScript (ES6+) 功能
• 前端框架（React、Vue、Angular）
• RESTful API 集成
• 本地存储或 IndexedDB 用于数据持久化
• CSS 框架或自定义样式
• JSON 用于数据交换
• 正则表达式
• 浏览器API

来源：README.md84-118 Projects/2-Intermediate/Chrome-Theme-Extension.md5-9

精选项目示例：Chrome 主题扩展

Chrome 主题扩展项目是典型的第二层项目，它需要

1. 理解浏览器扩展的架构
2. JSON manifest 配置
3. DOM 操作和样式
4. 潜在的 API 集成，例如夜间模式定时等功能

Chrome 扩展架构

用户故事

Chrome 主题扩展项目专注于

• 创建自定义浏览器主题
• 解决可访问性需求（例如，色盲）
• 添加蓝光过滤等功能以提高视觉舒适度
• 将扩展部署到 Chrome 网上应用店

来源：Projects/2-Intermediate/Chrome-Theme-Extension.md1-29

项目选择策略

选择第二层项目进行开发时，请考虑

1. 技能提升：选择能够巩固现有技能并引入新挑战的项目
2. API 熟悉度：从文档完善且有免费套餐的 API 入手
3. 作品集影响力：选择能展示多功能性和解决问题能力的 P 项目
4. 项目可扩展性：寻找可以添加奖励功能进行扩展的项目
5. 技术兴趣：选择您有兴趣进一步探索的技术

来源：README.md10-17

项目实现方法

标准实现流程

1. 项目设置：初始化仓库，配置开发环境
2. 核心功能：优先实现基本用户故事
3. API 集成：根据需要连接外部服务
4. UI 优化：改进用户体验和界面
5. 测试与调试：确保功能在不同浏览器/设备上正常运行
6. 奖励功能：添加附加功能以增强学习效果
7. 部署：将项目提供给用户

来源：README.md20-26 Projects/2-Intermediate/Chrome-Theme-Extension.md16-20

迈向高级项目

完成几个第二层项目后，开发者通常会获得

• 熟练掌握前端框架和库
• API 集成模式的经验
• 对更复杂应用程序架构的理解
• 数据转换和处理技能

这些技能将使开发者能够进入第三层：高级项目，这些项目侧重于全栈开发、数据库集成和更复杂的系统架构。

来源：README.md38-39 README.md120-143

所有第二层项目列表

App Ideas Collection 包含以下第二层项目

项目名称	描述	关键技能
位掩码	使用位掩码处理条件	位运算，逻辑
图书查找器 App	按多项标准搜索图书	API 集成，搜索 UI
命令行计算器	命令行计算器	CLI 开发，数学运算
卡牌记忆游戏	记忆并匹配隐藏的图片	游戏逻辑，UI 动画
慈善机构查找器 App	查找全球慈善机构进行捐赠	API 集成，搜索筛选
Chrome 主题扩展	构建自定义浏览器主题	浏览器扩展，JSON
货币转换器	货币之间进行转换	API 集成，实时数据
绘图 App	创作数字艺术作品	Canvas API，UI 交互
Emoji 翻译器 App	将文本翻译成 Emoji	字符串操作，映射
抽认卡 App	用抽认卡复习知识	状态管理，学习算法
翻转艺术 App	为图像序列添加动画	动画，图像处理
游戏推荐 App	为游戏选择创建投票	投票系统，社交功能
GitHub 用户资料	搜索 GitHub 用户	API 集成，用户资料展示
高力锤游戏	嘉年华力量测试游戏模拟	物理模拟，游戏机制
图像扫描器	扫描和处理图像	图像处理，设备 API
Markdown 预览器	预览 Markdown 格式的文本	文本解析，实时渲染
Markdown 表格生成器	将数据转换为 Markdown 表格	数据转换，格式化
数学编辑器	面向学生的数学符号编辑器	自定义输入处理，数学渲染
梗图生成器 App	创作自定义梗图	图像处理，文本叠加
使用 RNN 生成姓名	使用神经网络生成姓名	机器学习，文本生成
密码生成器	生成安全密码	加密基础，安全性
播客目录	整理喜欢的播客	媒体管理，搜索/筛选
QR 码徽章生成器	为徽章生成 QR 码	QR 码生成，SVG/Canvas
正则表达式助手	测试和构建正则表达式模式	正则表达式，模式匹配
销售收据 App	在数据库中记录销售	数据录入，报表，CRUD
简易在线商店	电子商务商店模拟	产品目录，购物车功能
体育比赛分组生成器	生成比赛分组	比赛逻辑，可视化
字符串艺术	动画彩色字符串图案	动画，几何算法
这个还是那个游戏	简单的决策游戏	游戏逻辑，用户偏好
时区 Slackbot	显示团队成员时区	机器人集成，时间转换
待办事项 App	管理个人任务	CRUD 操作，状态管理
打字练习	提高打字速度	输入处理，性能指标
投票 App	创建和管理投票	投票机制，结果展示

来源：README.md84-118