碰了不少壁，跟 AI 一問一答，來來往往了好多次，才終於把最一開始想做的功能給實現了。

好像也沒什麼問題？現在覺得自己很有信心，好像已經對 AI 下指令很熟了，可以繼續往下個功能邁進，應該也不用特別分析需求了吧！？

加上新功能

總之先加上功能！

上次使用者故事，總共列了 3 個需求，目前「算是」完成了第一個：

作為一個 [重度記帳軟體的使用者]，我想要 [單手完成記帳操作]，以便 [節省記帳時間且避免忘了記帳]。

基本的數字記帳和選擇帳目種類，都已經可以辦到了，滿足了第一則使用者故事的需求。緊接著，第二項使用者故事：

作為一個 [重度記帳軟體的使用者]，我想要 [快速編輯 / 刪除記帳]，以便 [節省記帳修改時間]。

看起來應該蠻單純的，是個還蠻明確的需求，反正就是要能夠 編輯 / 刪除，如同基本 CRUD 中的 Update / Delete，應該沒什麼困難的吧？

感覺這次也不必付上什麼截圖之類的，給一點具體的指令便足矣。

我想要新增功能，希望每條帳目可以做到：
- 雙擊可以編輯帳目之金額與種類。
- 帳目旁邊新增一個 Delete Button ，可以刪除該帳目。

以上這樣的指令，應該夠清楚了吧！挑選 Claude-3.5 的模型，把這個指令餵給 AI 之後，得到了看似蠻可靠的程式碼修改答覆。但唯有一處沒幫我調整好，AI 忘記自己把 function 給砍了 😂。

導致編譯出現了錯誤，因為找不到這個 function 在哪…。

試著補救

從 commit 回頭看被修改的程式碼，可以看到是以下這個組件內的 method，因為不明原因被移除掉，看看直接把這個 method 加回來是不是就好囉？

const handleCancelCategorySelection = () => {
    setPendingAmount(null);
    setShowCategorySelector(false);
};
//...

修改了之後，看了一下程式碼，嗯！ 沒有編譯錯誤了，local 跑起來的網頁也沒問題，沒毛病。

而功能上確實也都滿足需求，雙擊會跳出選擇種類的介面，在種類介面點擊取消之後，可以回頭編輯金額。而刪除按鍵也都有作用，且 AI 還幫我們「自己調整了一下程式碼」，因應刪除功能，將帳目多了 id 的屬性。

這些修改實現了以下功能：
- 每個帳目項目現在都有一個唯一的 id。
- 雙擊帳目可以編輯金額和類別。
- 每個帳目旁邊都有一個刪除按鈕。
- 編輯和刪除功能都會相應地更新總金額。

回頭仔細看一下 run 起來的網頁，實際試用了一下，基本上與提供的指令相符，該做的都有做到。

可以雙擊數字回頭編輯金額，而且可以修改帳目的種類，單以功能來講的話，足以說是「滿分」，我提的要求都有做到。

至於畫面流程上呢，我沒有提到的，AI 就沒有幫忙做到，也是合情合理嘛。

比預期得還要好，但還可以更好

所以說，在指令中沒詳細提到的部分，根據實際產出的結果來看，這邊列舉了幾個功能上還可以改善的小問題，讓使用者體驗變得更好。

• 修改的順序流程：希望是可以先調整金額，再來才調整種類。
• 種類選擇：種類的部分可以先幫我把「前一個種類」給選起來，因為我不一定要修改帳目的種類。

試著將其化為指令，提供給 AI 看看，看能修改程式碼到什麼程度。以下是我提供給 AI 的指令：

1. 首先是調整順序

   請幫我修改功能：
   - 在雙擊修改金額的部分，我希望可以先調整金額，再來才調整種類。
   - 請修改 App 裡面的程式碼
   

   AI 如預期那樣幫我做了調整，可以先編輯金額（數字），再來才是開啟選擇帳目種類的介面來做修改。

   

   程式碼的部分，AI 幫我多了一個 isEditingAmount 的 state，用來記憶「是否正在編輯」的狀態，如以下節圖所示。雖然程式碼並不是很美觀，但至少功能已經如期運行，至於整理美化的工作…就晚一點再來做吧！

   

2. 接下來是「預設種類選擇」

   請幫我修改功能：
   - 在修改種類的時候，我希望可以預設幫我選擇該帳目「原本的種類」。
   - 包括但不限於 App 和 CategorySelector 組件的程式碼
   

   看起來是有做到，但… AI 把上一個功能給改壞了 🤔 回頭看一下 AI 給的程式碼，看看哪裡有問題。

   修改的地方，主要有 3 個部分：

   

   以上這一部分是把「預設 Category」給傳入，跟這個應該無關。

   

   而以上兩個定睛一看…，就是新增的 setShowCategorySelector(true) 這部分在搞鬼！

   因為只要 showCategorySelector 是 true，選擇帳目類型的組件就會被渲染，因此在修改帳目時，就會先跳出帳目類型的組件了。

   既然找到病灶源頭，立刻將這一段程式碼給移除，接著看一下成效…，嗯！ 果然如推測一般，這樣就一樣可以先修改金額，接著有預設選擇的帳目種類，編輯起來就方便多了呢。

   

尾聲

難以「設想周全」

如果全都相信 AI，不如不要用。雖然可以如指令那樣生成「符合需求」的程式碼，乍看是很完美地達成需求，但「沒有提到」的部分，就很難說有沒有如預期那樣了。

最近與 AI 頻繁打交道之後，一方面覺得 AI 大幅加快開發速度，帶來的開發效率提升的體驗頗為滿意；但另一方面，也被 AI 的「猜測」給害慘了，一些原本該有的功能，在重構或改寫之後，就莫名其妙消失，甚至是被擅自修改了！

如今天這篇的最後一個範例，AI 生成的程式碼，「不小心」就動到了原本的操作邏輯，要不是有實際測試，才發現 AI 改到不該改的地方！而且與 AI 合作寫程式，不小心改壞程式了，還不能推卸責任（笑

然而，不只有與 AI 合作才會遇上這種事，自己或是與他人合作修改程式碼，也常常會碰到這種「改 A 壞 B」…的窘境。

那要怎麼預防呢？ 接下來的篇幅，會接著介紹如何用「測試」來保護我們程式的重要邏輯，避免修改調整程式碼的時候，不小心就改壞，還要花時間去 debug！

就是因為沒寫測試，才會沒時間 by Kuma