這次搞了個新玩意，先上圖！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 的全部內容了，本次我們閒聊 + 代碼的形式，我們聊的比較開心，身體也不累，比較輕鬆、下飯。
後面還有規劃了其他選題，歡迎關注。