你是否曾经想开发一些东西但苦于无从下手？就像文学创作者会遭遇写作瓶颈，开发人员也不例外。
我跟我的朋友吉姆 Jim一起，创作了一个collection of application ideas【应用创意想法集锦】，旨在一劳永逸地解决这个问题。
这些应用可以：
- 很好地提升你的编程技能
- 很好地接触新技术
- 成为你简历里打动下任老板或客户的经历
- 成为辅导材料（文章或者视频形式）里面的例子
- 很快完成，新性能扩展也十分容易
这不仅仅是一个项目的简单罗列。这份集锦详细地描述了每个项目，足够你从零开始。
每份项目规格包含：
- 一个清晰描述对象
- 需执行的用户需求清单（这些用户需求更像是一个行为准则而非必做事项。如果你有需要的话也可以根据自己的需要添加）
- 追加选项清单。这个不仅可以改良基础项目，同时你的编程技巧也会有所提高
- 所有能帮你发现完成项目所需物料的资源和链接
项目综述
根据完成项目所需的知识储备和经验，所有的项目分为三个层级：
- 初级 针对的是刚刚起步的开发人员，特别是专注于开发面向用户应用的人员。
- 中级 针对的是已经有学习和开发经验的老学员。他们在案例法过程中对用户界面和用户体验较为熟悉，会使用开发工具，会开发使用应用编程接口服务的应用。
- 高级 针对的开发人员包含初级和中级提到的所有特点。他们还会额外学习高级技术，例如执行后端应用和数据库服务。
接下来，每个层级中都会包含五个项目，总共十五个项目。但在我写文章时，在这个 Github 仓库中共有三十多个项目。一定要确保你把这些项目都烂熟于心，因为未来我们计划增加更多的项目，非常欢迎你出一份力！（更多信息请关注下文的“贡献”部分）
1. 笔记应用
层级: 1-初级
任务描述: 可以按照需求创建和存储笔记
用户需求
- 用户可以创建笔记
- 用户可以编辑笔记
- 用户可以删除笔记
- 浏览页面关闭时笔记可以自动存储；用户返回页面时，数据可以自行修复。
追加选项
- 用户可以以Markdown格式创建和编辑笔记，存储以后内容会转换为HTML格式。
- 用户可以看见创建笔记的日期
可以提供帮助的链接和资源
项目示例
2. 圣诞彩灯秀
层级: 1-初级
任务描述 ：圣诞彩灯秀应用需要利用你的编程开发能力来创造一个光彩炫目的灯光秀。你的任务是连续画出七个彩色光圈，然后根据时间变化每个光圈的亮度有所变化。一个光圈变亮时，前一个变亮的光圈恢复正常亮度。
在这个应用中，灯光就像涟漪一样一层一层荡漾开，好比圣诞节的灯光秀。
用户需求
- 用户可以通过按钮控制灯光秀
- 用户可以控制灯光秀亮度变化的时间间隔
追加选项
- 用户可以选择每个光圈的颜色
- 用户可以控制光圈亮度
- 用户可以改变每个光圈大小
- 用户可以在1-7范围内设定灯光秀中的光圈个数
可以提供帮助的链接资源
项目实例
3. 图片翻转
层级: 1-初级
任务描述: 因为大量应用依靠图片来呈现更丰富的用户界面、提供更棒的用户体验，所以对于开发人员来说，理解图片操作的基础非常重要。
图片翻转应用探索图片操作的一个方向-图片旋转。应用上显示一个方框，一张图片以2*2矩阵形式呈现。用户通过控制图片周围上下左右四个箭头来垂直或水平翻转图片。
必须使用原生HTML,CSS和Javascript语言来执行此应用。图像包和图像库均不允许使用。
用户需求
- 用户可以看见一个窗口，里面的单个图片一直以2*2矩阵分布
- 通过点击图片旁边的上下左右按钮，用户可以任意垂直或水平翻转任意图片
追加选项
- 通过统一资源定位器（URL）查找别的图片，用户可以在输入栏更改默认图片
- 用户可以点击输入栏旁边的“秀”按钮，展示新图片
- 如果在统一资源定位器（URL）中没有找到新图片，用户可以看到错误信息提醒（error message）
可以提供帮助的链接资源
项目示例
4. 问答应用
层级: 1-初级
任务描述: 通过在问答应用上回答问题，来训练和测试你的知识存储。
作为一名开发人员，你可以开发一个能够测试其他开发人员编程知识的问答应用，诸如HTML, CSS, Javascript, Python, PHP知识等等。
用户需求
- 用点击按钮开始答题
- 用户面对的每个问题有四个答案选项
- 用户选中一道题的答案后，自动进行到下一题，直到整个问答结束
- 问答结束时，用户可以看到以下数据：
- 完成问答所耗时间
- 答对的问题个数
- 是否通过问答
追加选项
- 用户可以在社交媒体分享问答结果
- 在应用上增加多份问答，用户可以决定做哪个问答
- 用户可以创建账户，存储所有得分结果。用户可以多次进行同一个问答
可以提供帮助的链接资源
项目示例
Quiz app built with React （应用已在 Heroku 上线，可下载）
5. 罗马-十进制数字转换器
层级: 1-初级
任务描述: 罗马数字源于古罗马。直到中世纪后期，罗马数字系统一直是数字书写的主流，至今仍在使用。罗马数字包含七个符号，每个都有确定的整数值。
下表为罗马符号-整数值对应：
- I — 1
- V — 5
- X — 10
- L — 50
- C — 100
- D — 500
- M — 1000
用户需求
- 用户可以在输入栏里输入一个罗马数字
- 点击按钮，用户可以在输出栏看见之前输入的罗马数字对应的十进制数字
- 如果输入罗马符号错误，用户可以看见错误提示
追加选项
- 用户可以看见转换过程自动完成
- 用户可以完成十进制-罗马数字的逆过程转换
可提供帮助的链接资源
项目示例
6. 寻书应用
层级: 2-中级
任务描述: 创建一个用户可以搜寻书的应用。用户在输入相关书名、作者等信息后，网页上会排列出现所有相关书籍。
用户需求
- 用户可以在输入栏输入要查询的信息
- 用户可以提交查询信息。这就叫做应用编程接口（API），返回结果是与所有输入信息（例如名称，作者，出版日期，图像等）相关联的书籍
- 用户可以在页面上看到搜索出来的书籍清单
追加选项
- 搜索清单上每个书籍条目要增加一个用户可以直达的外部站点链接，以便得到更多关于书的信息。
- 执行一个响应设计
- 增加预载动画
可提供帮助的链接资源
项目示例
7. 卡片记忆游戏
层级: 2-中级
任务描述: 在卡片记忆游戏中，你需要点击一张卡片看是什么图形，然后努力在其余卡片中发现匹配的图形。
用户需求
- 用户可以看到一个包含有n*n张卡片的方格（n是整数）。所有的卡片一开始都是图形面朝下的状态（隐藏状态）
- 用户点击按钮开始游戏，同时计时器开始计时
- 用户可以点击任意一张卡片查看图形，这张卡片就处于可见状态，一直持续到用户点击第二张卡片
用户点击第二张卡片后：
- 如果两张卡片图形匹配，这两张卡片就会消失（或是隐藏或是移除，也可以让他俩处于可见状态）
- 如果跟第一张卡片图形不匹配，两张卡片就会恢复初始 隐藏状态
- 所有匹配结束以后，用户可以看见对话框显示“祝贺”信息，同时也会显示完成游戏所耗费的时间
追加选项
- 用户可以自己选择游戏难度等级（易中难）。难度增加意味着：完成游戏的规定时间缩短或者图片个数增加
- 用户可以看见游戏数据（不是输赢次数，而是每个难度所对应的最好成绩）
可提供帮助的链接资源
项目示例
8. Markdown表格生成器
层级: 2-中级
任务描述: 创建一个可以将包含用户数据的常规表格（或者不包含，看用户需求）转换成Markdown形式表格的应用
用户需求
- 用户可以创建包含有特定行数或列数的HTML表格
- 用户可以在HTML表格中的每个单元格插入文本
- 用户可以生成包含有HTML表格数据的Markdown形式表格
- 用户可以预览Markdown形式表格
追加选项
- 用户可以一键复制Markdown形式表格到剪切板
- 用户可以在特定区域插入行或者列
- 用户可以彻底删除某行某列
- 用户可以将某个单元格、某列、某行向左、向右或者居中对齐。
可以提供帮助的链接资源
项目示例
Tables Generator / Markdown Tables
9. 弦乐艺术
层级: 2-中级
任务描述: 弦乐艺术应用的目的在于让开发人员练习，创建简便动画图表，在动画算法中运用几何知识，创造出富有视觉美感的画面。
弦乐艺术中，会有一条五彩斑斓的线条平稳地移动，直到它的一端碰到封闭窗口的一边。此时，线条就会因为反弹效应改变方向。
线条移动时，如果可以保留10-20张线条移动时的图形，便会出现涟漪效应。稍早出现的图形会慢慢消失不见。
不可以使用动画库。只可以使用Vanilla HTML/CSS/Javascript.
用户需求
- 在封闭窗口界限内的任意位置，用户以画一条五彩斑斓的线开始
- 每隔二十毫秒，在别的位置，按照前一条线条的轨迹复制一条-以端点作为标记，距离前一线条要越来越远
- 不论线条的哪个端点碰到封闭窗口的边界，都要改变线条的方向，角度随机改变
- 慢慢降低起初画的线条的亮度，确保最近画的10-20线条可见，这样才可以呈现动感或者涟漪效应
追加选项
- 用户可以设定线条的长度和移动速度
- 用户可以设定窗口内的线条数量，所有线条可以按照不同轨迹和速度移动
可以提供帮助的链接资源
项目示例
这个项目非常封闭，包含一个小窗口，很单一。Daniel Cortes
10. 计划清单应用
层级: 2-中级
任务描述: 经典的计划清单应用：用户可以记下所有的待办事项。
用户需求
- 用户可以看见输入框，从而输入待办事项
- 点击“进入”按钮，用户可以提交待办事项，并且看见其已经进入待办事项清单
- 用户可以在待办事项上标注“已完成”
- 用户可以通过点击按钮取消待办事项，或者是在待办事项条目上直接操作
追加选项
- 用户可以编辑待办事项
- 用户可以看见所有已完成待办事项的清单
- 用户可以看见所有自己创立的待办事项清单
- 用户可以看见创立待办事项的日期
- 关闭浏览窗口时，待办事项可以自动保存；用户返回页面时，数据可自行恢复
可提供帮助的链接资源
项目示例
11. 战舰游戏引擎
层级: 3-高级
任务描述: 战舰游戏引擎采用了回合制棋盘游戏的模式，与所有表示层（presentation layer）分离。它属于一种建筑模式类型，因为其允许无数的应用使用同一种服务，这种模式在很多应用上都十分有用。
战舰游戏引擎本身是一系列函数调用的结果，而非终端用户直接动作产生。从这个方面讲，使用战舰游戏引擎，与使用应用编程接口或者使用网络浏览器公开的一系列线路是相似的。
这个挑战不仅要求你开发出战舰游戏引擎，还要求你开发出非常精细的、基于文本的表示层，以检测表示层与引擎互不干涉。因此，用户需求包含两套：战舰游戏引擎一套，基于文本的表示层一套
战舰游戏引擎需要负责维持整个游戏的状态。
用户需求
战舰游戏引擎
- 召集者调用
startGame()函数开始单人游戏。此函数可以创立一个8*8的游戏阵地，阵地上有三艘船，他们的尺寸为：
- 驱逐舰：一方格宽，两方格长
- 巡洋舰：一方格宽，三方格长
- 战舰：一方格宽，四方格长
startGame()函数会随机地把这些战船放在阵地的任意方向，随后给出船的部署情况。
- 召集者调用
shoot()函数可以袭击阵地上的特定行和列构成的方格坐标。shoot()函数还会显示袭击是否成功，剩余战船数量，战船安置排列，以及更新袭击成功或者失败数据。
某个方格被设为攻击目标后，会有所提示。 O代表方格被瞄准，但此地没有战船；X代表此地有战船。
基于文本的表示层
- 通过返回
startGame()函数，用户可以看见命中或者未命中数值在阵地上以二维字符展示。 - 用户可以受鼓舞进入阵地上特定坐标。
- 在袭击之后，用户可以看见命中或未命中数值更新。
- 袭击结束后，不论命中与否，用户都可以看见信息提示。
- 在击中最后一艘战船时，用户可以看见“祝贺”信息
- 每局游戏结束后，用户都可以受鼓舞再来一局。拒绝再来一局则会结束游戏。
追加选项
BGE战舰游戏引擎
- 召集者可以指定阵地上行与列的具体数值，这也是
startGame()函数的参数。 - 召集者可以调用
gameStats()函数，返回到Javascript对象，显示最近游戏数据，比如打了几局，命中数等。 - 在调用
startGame()函数时，召集者可以指定玩家数量。此函数也可以为每个玩家创立阵地，随机安排战舰数量。
shoot()函数会计算做出特定坐标袭击的玩家数量。函数返回的数据针对某个特定玩家。
基于文本的表示层
- 用户在目标坐标进入
stats相位，可以随时查看最近游戏数据。（注意此项操作需要战舰游戏引擎的gameStats()函数） - 用户可以指定两人游戏模式，每个玩家在同一终端会话均可更改比赛回合。（注意此项操作需要战舰游戏引擎追加选项的相应配合）
- 用户在每个回合的输入提示中都可以看到玩家数量。
- 用户在每个回合结束时可以看见两个玩家的阵地。
可以提供帮助的链接资源
项目示例
YouTobe上的这个视频展示了基于文本的战舰游戏是怎么玩的。Battleship Game
如果你对战舰游戏不熟悉，下面这个例子就是一个范例。记住你要实施一个基于文本的表示层用于测试。Battleship Game by Chris Brody
12. 聊天应用
层级: 3-高级
任务描述: 此项任务是创建一个可以支持多名用户互相发送信息的 实时聊天互动界面。 作为一个最小可行化产品，你可以关注聊天界面开发。实时性可作为追加选项稍后添加。
用户需求
- 用户在浏览聊天应用时根据提示输入用户名，用户名会在应用中保存
- 用户可在输入框中输入新信息
- 通过点击“进入”或者“发送”按钮，文本会出现在用户名旁边的聊天框中（比如：
John Doe: Hello World!）
追加选项
- 信息对于聊天应用（采用WebSockets）的所有用户可见
- 每当有一名新用户加入时，所有老用户都会受到提示信息
- 所有信息会存储在一个数据库中
- 用户可以发送图片，视频和链接。所有这些会以合适的形式展示
- 用户可以挑选，然后发送表情。
- 用户可以私聊
- 用户可以加入特定话题的频道
可以提供帮助的链接资源
项目示例
13. GitHub时间线
层级: 3-高级
任务描述: 应用程序接口和信息图示是当代应用的特点。 GitHub时间线整合这两个特点，力求创造一个用户GitHub活动的可视历史。
GitHub时间线的目标是，存储GitHub用户的姓名，制作一条时间线，包含每个存储库，像他们的名字，创立的时间，和相关描述。未来可以将时间线分享给老板。时间线需易于阅读，可以有效利用颜色和字体排版。
只有面向公众的存储库可以展示。
用户需求
- 用户可以提交GitHub用户名
- 用户可以通过点击“生成”按钮创建和展示已命名的用户存储库时间线
- 如果用户名在GitHub中无效的话，用户可以看到提示信息。
追加选项
- 用户可以看见当年创建的存储库数量总结
可以提供帮助的链接资源
GitHub提供了两个你们可能用到的接触存储库数据的应用程序接口。你也可以采用Node包管理器（NPM）接触GitHub应用程序接口。
GitHub应用程序接口说明可以在以下两个链接中找到：
使用GitHub应用程序接口的样本代码如下：
你可以用CURL命令看V3 REST应用程序接口返回的JSON，这个程序接口就跟你的存储库有关：
curl -u "user-id" https://api.github.com/users/user-id/repos
项目示例
14. 拼读拼写
层级: 3-高级
任务描述: 懂得如何拼读拼写拼写是流利掌握每门语言的基础要求。不论你是牙牙学语的孩童或者正在接触一门新语言的个体，练习拼读拼写会强化你的语言技能。
拼读拼写应用播放单词录音，用户用电脑键盘将单词拼写出来，从而帮助用户锻炼拼读拼写能力
用户需求
- 用户点击“播放”按钮，听到要拼写的单词录音
- 用户在键盘上打完单词后，可以在输入框里看到他们打出的单词
- 用户点击“输入”健提交已在输入框里的单词
- 如果提交单词正确，用户可以看到确认信息
- 如果提交单词错误，应用提示用户再次输入单词
- 用户可以看到拼写正确的单词总数，拼写过的单词总数和成功提交的单词占比。
追加选项
- 单词拼写正确时用户可以听到确认声音
- 单词拼写错误时用户可以听到警示声音
- 用户可以点击“提示”按钮查看输入框中哪些字母出错
- 用户可以敲键盘上的“输入”健或者点击窗口“提交”按钮提交单词
可以提供帮助的链接资源
项目示例
15. 调查应用
层级: 3-高级
任务描述: 调查应用可谓开发人员工具箱必备。通过这些应用，开发人员可以获得用户的各种反馈，例如对应用满不满意、有没有新要求或者新需求，急需解决的问题是什么，有没有一些变得严重的问题。
全功能调查应用的开发给你机会让你去学习，看你会不会把自己开发的应用加入工具箱。它也帮助你提升多方面的能力，如如何定义调查；让用户在预先设定的时间内回应；将结果做成表格并且展示。
应用的用户可以鲜明地分为两组，每组都有不同的要求：
- 调查协调组--制定并实施调查。他们有普通用户没有的管理员权限。
- 调查受访者--完成调查并查看结果。在应用内部他们没有管理员权限。
商业调查工具包括分布功能，以此公众会发调查邮件给调查受访者。简单说来，应用网页可以直达对回应开放的调查。
用户需求
综述
- 调查协调组和调查受访组可以在一般网站上制定、实施、查看调查和调查结果。
- 调查协调可以登录应用获得管理员权限，比如可以制定调查。
制定调查
- 调查协调组负责制定调查，其中包含有1-10个多项选择问题。
- 调查协调组可以在每个问题下设定1-5个相互排斥的选项。
- 调查协调组可以给调查设定题目。
- 调查协调组可以点击“撤销”按钮，不保存调查，返回主页。
- 调查协调组可以点击“保存”按钮保存调查。
实施调查
- 调查协调组可以从先前设定好的调查中选择一个调查并打开
- 调查协调组可以从已打开的调查中选择一个关闭
- 调查受访组可以从已打开的调查中选择一个完成
- 调查受访组可以通过点击复选框选择调查问题的回答
- 调查受访组可以看见，如果一道题在第二次选择时选择了跟第一次不同的答案，那先前的答案会自动消除
- 调查受访组可以点击“撤销”按钮不提交调查，返回主页
- 调查受访组可以点击“提交”按钮提交回答
- 如果调查未完成就点击“提交”按钮提交，调查受访组会看到提示“错误”信息
查看调查结果
- 调查协调组和受访组可以从已关闭的调查中选择调查展示
- 调查协调组和受访组在表格形式下查看调查结果，表格可以显示每个问题的每个答案有多少人选择
追加选项
- 调查受访组可以在应用中创立一个独有账户
- 调查受访组可以登录应用
- 调查受访组每个调查只能做一次
- 调查协调组和受访组可以查看以图表形式呈现的调查结果（类似饼状图，条形图等表格）
可以提供帮助的链接资源
制定调查的图书馆资源库： SurveyJS
商业调查服务包括： Survey Monkey 和 Typeform
项目示例
贡献
非常欢迎大家在 GitHub 仓库中为这个项目做出一些贡献！任何形式任何贡献我们都非常欢迎~
贡献有两种方式：
- 你可以创立一个新话题并且告诉我们你的想法。一定要确保你采用了 新想法标签；
- 将项目拆分，并且提交一份性能要求。在做这个工作之前，要确保你已经读过贡献指南，并且你也是这么做的（在存储库中你可以找到贡献指南）；
添加你的个人实例项目
在你完成项目以后，一也可以把自己做出来的成果添加到项目上。非常鼓励你们这样做，这也向其他人展示了你创造出了多么精彩的应用！
帮忙扩散我们的文章
如果这片文章或者存储库中的信息对你有所帮助，一定要记得给个星星哦，这样其他人才能找到它，从中受益。让我们一起成长，把我们的社区建立得更好。
你有没有什么建议能帮我们总体提升我们的项目吗？有的话不要谦虚哦，非常期待你的反馈。
主要作者
Florin Pop: Twitter & website.
每周编程挑战
作为额外福利，这里有一个每周编程挑战，你可以通过实战项目训练切实提升自己的编程技巧。
原文：Here are some app ideas you can build to level up your coding skills，作者：Florin Pop