这次搞了个新玩意，先上图！kaiyi 教我做 Qwerty Learner，看我们笑得多开心。
你好我看不到图上的内容，图里有什么呢？图片中是两个男人，图左是 kaiyi，图右是作者辛宝，并排坐在一个桌子前，每个人面前各有一台贴满贴纸的电脑，两个人笑得很开心。图上还有文字，《kaiyi 教我做 Qwerty Learner》，副标题小文字，15K Star 开源项目，MarsCode 带我飞。
视频原始地址：Kaiyi & MarsCode 教我做 Qwerty Learner - 程序员 MVP01
最初的想法：程序员 MVP#
提到 MVP 大家会想到什么？
在互联网领域，MVP 是最小可行产品 Minimum Viable Product 的意思，是指用最小的投入，验证一个需求，产品本身是简单的原型，不包含很多细节，通常用来快速验证用户反馈、市场可行性。比如，我们如果要做一个某个领域的在线商城的 mvp，显然在原型阶段，不需要考虑登录风控、无限瀑布流、商品优惠券这些，核心诉求是商品展示、商品购买。
在 NBA 赛场上，MVP 是最有价值的球员 (Most Valuable Player)，他们的综合水平出色、数据优秀，代表着一种无可指摘的荣誉。
今天我尝试开启一个新的下饭节目形式：《程序员 MVP 》，顾名思义，程序员领域的 MVP，一语双关，是指程序员做最小可行产品，也是指程序员中表现优秀的人。我希望和他们一起做简单的产品，验证各自的想法，让更多人喜欢上某个领域、某个产品，挖掘更多想法。
本次的程序员 kaiyi#
kaiyi 是 Web Worker 播客的主播，他在国际大厂，知名外企工作，他有一个 15k star 的开源项目，也是一款用户产品，Qwerty Learner。代码写得好，用户体验好，开发思路非常清晰，响当当的程序员 MVP。
这一次我邀请到他，让他教我做一个他的得意之作 MVP 版本。
关于 Qwerty Learner#
这个奇怪的单词是什么，很像用手扫键盘扫出来的单词。我问 kaiyi，他说这是一个专有单词，就是键盘布局、键盘的意思。
这源自于 kaiyi 上学时候的一个想法，通过打字的方式练习英语，产品本身受众非常大，很多人乐在其中。他也加入了大量使用功能：发音、词库、打字速度、自定义等功能。已经是一个非常完善的产品了。
AI 工具： MarsCode#
风靡海内外的产品，MarsCode 产品矩阵中，有 vscode 插件，类似 copilot；有在线 ide 版本，背后有容器运行。
通过访问一个浏览器页面，就可以实现在线 Coding，无所谓 Node、Python、前端环境了，用鸿蒙平板都可以运行和访问。
还挺有趣的，谁说 ipad 平板不能办公，这就实现了，还是国内无障碍环境，还合规。这里选择的工具不是排他选项，随便哪一个都可以。
一起联调代码吧#
说是联调，更多是让 kaiyi 配合 MarsCode 一起实现一个简单的 Demo。
快速启动一个项目#
在 MarsCode 中选择 JS 框架 React，快速启动一个项目模版，几秒钟之后页面加载完成，依赖也安装完成，点一下顶部的 Run 就把默认的 rsbuild react 项目运行起来了。
随时还能沟通 AI，相当于 AI IDE 了。
这一个步骤其实已经让很多分歧消失了，我选什么框架、怎么设置模版，怎么设置运行方式？一瞬间，给出了答案：rsbuild + react + npm run dev，别人还在选择项目模版，我都已经跑起来了。
MVP 的 Qwerty Learner 需要什么#
完整版的 Qwerty Learner 功能非常多，那些是本次 MVP 要实现的？
- 我需要翻词典准备词库，需要发音、中文翻译吗？不需要，不重要
- 我需要准备设计风格规划页面吗？不重要，美化专门做
- 我需要准备动效、动画吗？不需要，专门做就行
- 我需要加入打字统计功能吗，不需要，功能小点
剥离了这些额外功能，MVP 版本的功能已经呼之欲出了：
页面中输入一个单词，用户如果输入正确了就显示绿色，如果输入错误就显示红色。输入完单词自动展示下一个单词。
其他的属于附加功能。
如何迈出第一步#
现在有了 AI 很多事情就简单了，直接问 MarsCode
- 给我生成一些单词，包含英文、中文，生成 10 个。OK，单词有了
- 准备一个用来打字的 app，页面显示一个单词，监听用户输入，判断用户输入，展示红色和绿色
- 如果输入都正确，自动跳转到下一个单词
如果 ai 返回的数据符合预期，点击 inset 插入到当前页面就行。
出现了小问题可以随时提问让 ai 修改，也可以让他生成注释和单元测试。因为这个功能并不复杂，很快就可以做出来效果。
样式什么时候美化比较好#
默认情况在页面都是非常简陋的原始风格，我有点迫不及待想美化一下页面，kaiyi 说不着急，核心的功能中页面不是最优先的。
通过刚才的几轮交流，代码中的逻辑展示逐步稳定了，这个时候可以开启一个新的对话，让 ai 尝试美化一下页面。
这里一个小知识点，ai 的多轮对话是有瓶颈的，而且大量的代码夹杂也会快速消耗上下文的 token。
非常合适的方案是：完成一个需求之后，新建一个对话，主动结束历史对话。在这个 mvp 作品中当我们处理用户输入的逻辑处理完善之后，样式就可以来做了，两者并没有紧密的联系。
这里展示了 MarsCode 对这个 mvp 对第一版设计风格。
效果比较朴素，还可以，可用、易用。第一眼并不反感。
尝试分享#
收集用户反馈是非常重要的，得益于 MarsCode 的网络功能完善，可以随时把预览链接发给其他人，快速把玩给出反馈。
避免沉溺在技术细节中，从而缺少对全局的把控，这一点始终需要让技术人保持警惕。
后来我们加入了一个 kaiyi 的得意特色，键盘反馈，每次按键播放一个清脆的键盘敲击声，效果把群！
探索其他功能#
有了 ai 的辅助，可以快速阅读代码、添加注释、抽离功能、补充单元测试。
陈述总结#
kaiyi 当初从想法到诞生初版，花了很久的时间，一方面不知道这个产品最终什么样，另一方面也是前端技能不熟悉，需要学习然后实践。
现在有了前端技能，有了 ai 的辅助，短短十几分钟，就让这个 mvp 版本的 Qwerty Learner 跑起来了，这让我们欣喜又有了更多思考。
- MarsCode 的 在线 ide 可以随时写代码，随时开启一个新的工程
- AI 的辅助变成像一个老师，可以随时阅读、学习其他人的代码，添加注释，补充单元测试，从而让自己更深刻领悟知识
- 另一方面快速验证想法，快速试错，一个脑海中的产品不会产生价值，迈出第一步非常重要，避免完美主义让自己踌躇不前
- 和 ai 做朋友、学习他、理解他的优势，了解他的不足，让自己的想法更快落地
这就是第一期的 程序员 MVP 的全部内容了，本次我们闲聊 + 代码的形式，我们聊的比较开心，身体也不累，比较轻松、下饭。
后面还有规划了其他选题，欢迎关注。