iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0
Modern Web

與 AI 一起開發 Side Project 吧!系列 第 15

Day15 — 馬不停蹄 | 下一個故事,請說

  • 分享至 

  • xImage
  •  

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

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

加上新功能

總之先加上功能!

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

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

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

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

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

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

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

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

https://ithelp.ithome.com.tw/upload/images/20240925/20168308axqUYi5kBV.png

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

試著補救

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

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

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

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

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

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

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

gif1

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

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

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

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

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

  1. 首先是調整順序

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

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

    螢幕錄影 2024-09-24 下午10.47.38.gif

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

    https://ithelp.ithome.com.tw/upload/images/20240925/20168308oXSN9zto6W.png

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

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

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

    修改的地方,主要有 3 個部分:

    https://ithelp.ithome.com.tw/upload/images/20240925/201683081QhaIHCdtk.jpg

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

    https://ithelp.ithome.com.tw/upload/images/20240925/20168308Qf7fmksKa4.jpg

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

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

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

    3.gif

尾聲

難以「設想周全」

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

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

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

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

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

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


上一篇
Day14 — 馬不停蹄 | 下個功能,精準打擊
下一篇
Day16 — 馬不停蹄 | 很久很久以前…,忘了之前寫的東西了嗎? 沒關係,AI 講故事給你聽
系列文
與 AI 一起開發 Side Project 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言