使用 AI 結對程式設計建立應用程式：我們 Sprint 的經驗教訓

身為開發人員，我們一直在尋找提高生產力和簡化工作流程的方法。隨著人工智慧的最新進展（並且我堅信這些技術將改變遊戲規則），我決定在現實世界的開發場景中測試這些工具。

• 我的目標：在短短 7 小時內建立一個全端人工智慧驅動的食物追蹤應用程式 PoC。

• 結果：效果非常好！但並非沒有挑戰。

這是我作為開發夥伴所學到的關於使用 AI 的知識。

專案

目標雄心勃勃但重點突出：創建一款行動應用程序，讓用戶拍攝食物並使用人工智慧識別自動將其記錄到食物追蹤器中。技術堆疊包括我的首選：Quasar Framework（VueJS 框架）、Google Firebase 和 Capacitor（行動開發框架），以及 AI 推理的 Google Gemini 2.0 Flash。

沒什麼特別花俏的，但夠複雜來測試人工智慧輔助。

人工智慧工具

我使用了人工智慧工具的組合來協助專案的不同方面：

1. ChatGPT（o1 模型）：用於高層規劃、需求收集和一般指導
2. Claude 3.5 Sonnet via WindSurf/Cascade：對於程式碼產生和特定的開發任務，我使用了 Codeium 的一個名為 WindSurf 的工具。它本質上是一個基於 Visual Studio Code 構建的 IDE，具有 A.I.內建程式碼編寫器。它可以直接存取文件，並且可以透過版本控制快速編寫和編輯整個文件。
3. Google Gemini 2.0 Flash：用於影像辨識和食物分類。這個型號超級強大而且超級便宜。

“AI 作為開發實習生”的方法

我獲得的最有價值的見解之一是將人工智慧視為初級開發人員或實習生。這種思維模式完全改變了我處理合作的方式。正如您不會將整個專案放在新實習生的辦公桌上並期望完美的結果一樣，我學會了：

• 明確說明
• 將任務分解為可管理的區塊
• 審查輸出並提供回饋
• 不要一次期待太多
• 需要時給予指導與指示

這種方法帶來了更好的回報，並且比將人工智慧視為「無所不知」或「完全不可靠」更有效。

什麼效果好

規劃和要求

事實證明，人工智慧在規劃階段非常有幫助。我從一個粗略的專案大綱開始，並使用迭代提示來完善它。例如，我最初的提示之一是：

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.
</information>

這引發了反覆討論，幫助明確了專案範圍和時間表，從而製定了更現實和詳細的計劃。

文件

人工智慧工具擅長產生和維護文件。它可以快速建立全面的 Markdown 文件，並隨著專案的發展不斷更新。這為實際開發工作騰出了寶貴的時間。

迭代開發

將開發分解為更小、更有針對性的提示被證明是非常有效的。我沒有嘗試立即產生整個元件，而是使用了一系列提示，每個提示都建立在前一個提示的基礎上。例如：

1. 首先，設定 Firebase 後端基礎設施
2. 然後，建構前端樣板
3. 接下來是相機捕捉螢幕等特定功能
4. 最後，新增資料處理與顯示功能

我發現的一個巧妙的技巧是讓 A.I.記錄進度和後續步驟，以便在提示之間可以有一些參考內容。由於我使用的是 WindSurf，因此我可以使用「主提示」來保持對話繼續進行。主提示將指示人工智慧。在編寫程式碼時回顧筆記並添加內容。

錯誤修復和後期開發

WindSurf 的另一個亮點是錯誤修復和開發後任務。

測試我的應用程式並注意到一些錯誤後，我將清單傳遞給 WindSurf，它可以快速識別和修正問題，甚至產生測試案例以確保修復有效。這節省了我大量的時間和精力。

我有以下錯誤列表，只有少數情況我需要手動修復它們：

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.
</information>

• [x] BUG>拍照並點擊取消後相機一片空白（網頁實作）
• [x] BUG> 在檢測到的食物視圖中如果沒有檢測到食物，列表為空白，這很好，但我們應該顯示某種圖標和文本來解釋沒有食物被檢測到。新增或偵測到
• [x] BUG> 在「偵測到的食物」檢視中，最好將每個項目（文字標題、置信度、刪除按鈕、選擇相符的食物下拉清單）更好地分組以清楚地表明所有這些元素都是同一食品檢測的一部分。這可以透過 q 卡、一些更好的樣式或其他方式來完成
• [ * ] BUG> 在「偵測到的食物」檢視中，嘗試開啟僅透過搜尋新增的內容（而不是透過相機新增的項目）的下拉清單時，「選擇符合食物」下拉清單無法正確重新開啟)
• [x] BUG> 在「偵測到的食物」檢視中，「取消」按鈕應讓使用者返回儀表板 如果輸入為空，則 debounceSearch 不應觸發
• [-] 功能>參賽作品提交（後端） - 取得IMG，並調整大小、裁剪、壓縮等，使圖像很好地適合128*128的正方形。為圖像建立多種尺寸，並在提交記錄中添加圖像連結（旁邊是imageUrl）
• [x] 功能> 儀表板 - 顯示每個捕獲的膳食條目的 IMG，加載適當的大小
• [x] 功能> 新增查看餐點頁面 ->顯示所有詳細資訊、圖表和內容
• [x] 功能> 新增編輯膳食功能 ->從相機頁面視圖帶回模態，但僅使用模態。不要啟動相機。
• [x] 功能> 新增刪除餐點功能
• [x] 功能>歷史檢視餐點：能夠按天查看所有餐食條目，分頁。使用類星體時間軸 ->選單中有「用餐」按鈕，請前往此頁面。此頁面應顯示與 IndexPage.vue 上的膳食條目相同類型的卡片
• [x] 功能>歷史檢視水：能夠查看所有水條目，分頁，按天，使用類星體時間線 ->選單中有「水」按鈕，請前往此頁面。此頁面應顯示與 IndexPage.vue
上的水條目顯示的相同類型的卡片
• [x] BUG>水歷史編輯不起作用
• [x] BUG>水歷史資料很奇怪

挑戰和陷阱

並非一切都一帆風順。出現了一些關鍵挑戰：

文件編輯問題

我在文件修改方面發現了一些限制：

• 開啟的檔案有時看似被 WindSurf 鎖定/變得不可編輯
• 較長的對話絕對會降低程式碼編輯的品質

注意：在撰寫本文時，文件鎖定/歸檔編輯失敗的錯誤似乎已在最新版本的 WindSurf 中修復。

情境管理

人工智慧輔助的品質在較長的對話中會下降。我學會了為新元件開始新的對話​​並提供簡潔的上下文，而不是試圖維持一個漫長的會話。

隨著程式碼變得越來越長、越來越複雜，人工智慧很難跟上。我必須將任務分解為更小、更易於管理的區塊以保持質量，或者必須提供大量細節和上下文以保持 AI 正常運作。

偏離軌道意味著刪除功能、刪除相關程式碼，或有時完全建構錯誤的東西。這是一個很大的時間消耗，我必須非常小心地讓人工智慧保持在正軌上，或者決定手動編碼。

知道何時手動編碼

有時，自己做會比較快。學會識別這些時刻可以節省大量時間並減少挫折感。正如我的開發日誌中所述：「當它工作時，它工作得很好。當它不工作時，它可能會浪費時間。」

出現的最佳實踐

1. Git 經常提交：在讓 AI 做出重大更改之前，提交您目前的狀態。如果出現問題，這可以提供簡單的後備方案。

2. 準備樣板程式碼：在使用 AI 輔助之前設定專案結構和基本配置。就我而言，這意味著：

   • 設定 Quasar/Vue CLI
   • 設定 Firebase CLI 和元件
   • 建立基本項目結構

3. 清晰詳細的提示：盡可能具體地表達您的要求。包括相關背景和範例。在需求和設計階段花費盡可能多的時間，並提供盡可能多的細節。這些註釋和指導不僅可以幫助您更好地執行項目，還可以大大提高人工智慧生成的程式碼的品質。

4. 迭代回饋：毫不猶豫地修正或指導人工智慧。例如，當我收到與要求不太相符的輸出時，我提供了具體的回饋：
   

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.
</information>

這種特定的回饋通常會帶來快速、準確的修正。

判決

使用人工智慧絕對加速了開發。雖然需要指導和偶爾的糾正，但 ChatGPT 和 Claude 以及 WindSurf 的結合使我比在同一時間範圍內單獨取得的進步要大得多。

也就是說，成功需要了解這些工具的功能和限制。關鍵是在人工智慧協助和人類專業知識之間找到適當的平衡，充分發揮各自的優勢。

期待

這個實驗表明，未來人工智慧工具將成為開發工作流程中不可或缺的一部分——目前，不是取代開發人員，而是增強他們的能力。關鍵在於學習有效地使用這些工具，了解它們的優點和局限性，並開發能夠最大限度地發揮其優勢並同時最大限度地減少其缺點的工作流程。

對於有興趣將 AI 融入其工作流程的開發人員，我建議從小處開始，建立清晰的互動模式，並隨著您對 AI 的功能和限制更加熟悉而逐漸擴大 AI 的作用。

這些工具處於初級開發人員的水平，很快就有了足夠的訓練資料和迭代，他們將能夠做更多的事情。我可以看到這些工具最終編寫整個應用程式並處理大部分開發過程。在模型能夠模擬高級開發人員之前，我們仍然需要人工監督和指導。

優勢：

• 文件：產生與維護文件
• 小錯誤修復/故障排除：辨識與修正錯誤
• 單元測試：產生測試案例並確保程式碼品質
• 程式碼產生/小組件：編寫樣板程式碼和基本元件以幫助您入門
• 規劃與需求收集：概述專案範圍與時間表
• 基礎設施設置：配置基本專案結構和設置，包括 Terraform、Dockerfile 等
• 快速學習與原型產生：快速學習新框架並產生原型

弱點：

• 複雜邏輯：處理複雜的業務邏輯或複雜的演算法
• 設計與使用者體驗：創建具有視覺吸引力的介面或使用者體驗
• 寫更大的元件：端到端地寫複雜的模組或更大的元件
• 上下文/記憶：在長時間對話或跨多個組件中維持上下文
• 複雜調試：解決複雜問題或邊緣情況，通常需要指導才能發揮作用
• 了解最新技術：跟上最新的框架、庫和最佳實踐

我很高興看到這項技術的發展方向以及它將如何塑造軟體開發的未來。

圖片！ ！ ！

以下是我在 7 小時內建立的應用程式的一些快速螢幕截圖。雖然不完美，但這是一個堅實的開始！

（用相機捕捉食物）

（將影像傳送給AI進行食物辨識）

（查看結果 - 將食物添加到追蹤器）

（確認食物入境）

（儀表板視圖）

（食物入口視圖）

無恥但相關的插件：

雖然我仍在開發本文中提到的食品應用程序，但我能夠使用 WindSurf 和 A​​.I. 快速完成另一個項目

如果您對人工智慧驅動的 Git CLI 幫助程式感興趣，以便更輕鬆地維護提交訊息和發行說明，請查看 eGit

以上是使用 AI 結對程式設計建立應用程式：我們 Sprint 的經驗教訓的詳細內容。更多資訊請關注PHP中文網其他相關文章！