这次搞了个新玩意，先上图！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 的全部内容了，本次我们闲聊 + 代码的形式，我们聊的比较开心，身体也不累，比较轻松、下饭。
后面还有规划了其他选题，欢迎关注。
