AI 程式碼生成實戰：單一提示詞打造 CRUD、SSR 與多工應用

如果你要求 AI 建立一個書籍管理功能，你期望得到什麼？是一組 API 和幾個原始碼檔案，還是一個可以在瀏覽器中開啟並實際使用的管理頁面？

讓我們先在 CabloyJS 中嘗試看看。我們將給 Codex 一個提示詞，讓它開發並測試一個書籍的 CRUD 模組。

接著，我們將啟動伺服器，開啟管理介面，建立一本書籍，並同時保持編輯、詳細資料和建立任務開啟。你將看到的不僅是 AI 如何編寫程式碼，還能體驗到完成後的功能：例如重新整理列表時會發生什麼、如何在任務之間切換，以及未提交的表單是否會保留輸入內容。

1. 從一個提示詞開始

在一個現有且已配置好的 CabloyJS 專案中開啟 Codex，並輸入：「建立一個獨立的 demo-book 模組，以實現書籍的 CRUD 操作。」

這給了 Codex 兩個明確的目標：建立一個獨立的 demo-book 模組，以及為書籍實作 CRUD（建立、讀取、更新和刪除）功能。

我們使用的是 Cabloy Basic 專案，後端採用 Vona，前端則使用 Zova。該專案已經具備模組結構、開發指令和管理介面。

我們的工作是在這個基礎上增加一個業務功能。提示詞不需要指定每個控制器、資料模型、表單元件或頁面佈局。Codex 會首先讀取專案慣例，檢查現有結構和工具，並遵循專案的開發工作流程。

AI 實際做了什麼？

對於這個功能，Codex 的工作遵循四個步驟：理解專案 → 執行 CRUD 生成器 → 優化欄位和整合 → 執行測試和檢查。

它會檢查專案和生成器指令，然後使用 Vona 的 CRUD 生成器來建立模組。接著，它會優化書籍的欄位、驗證、選單整合和支援程式碼，使該資源在現有的管理介面中可用。

最終的書籍表單包含三個欄位：標題（書名，必填）、作者（書籍作者，必填）和描述（書籍描述，選填）。

開發體驗中一個顯而易見的優點是：一旦業務資源定義完成，列表、詳細檢視和表單就可以重複使用 CabloyJS 現有的模式驅動 CRUD 頁面。無需從頭開始建立新的管理介面。

AI 負責新增業務模組，而框架則提供可重複使用的功能。兩者結合，讓你能夠專注於書籍所需的欄位和操作，而不是為每個資源重複建構頁面結構和基本互動。

2. 開發包含測試

建立模組後，Codex 會繼續執行測試、TypeScript 檢查、程式碼風格檢查（linting）和格式檢查。這項開發任務耗時 13 分 57 秒。

Codex 的完成摘要報告顯示：所有五個書籍模組測試均通過。後端測試套件有 269 個通過、10 個跳過、0 個失敗。TypeScript、程式碼風格和格式檢查也全部通過。

實作的功能包括建立、分頁列表、詳細檢視、更新、刪除和事務性批次刪除。至此，一個單一的業務請求已經產生了模組實作和自動化檢查。現在，讓我們啟動伺服器，看看這個功能在介面中的實際體驗。

3. 兩個指令開啟書籍管理

在專案根目錄中，開啟第一個終端機並啟動後端開發伺服器：npm run dev。

開啟第二個終端機並啟動管理前端開發伺服器：npm run dev:zova:admin。伺服器準備就緒後，開啟管理介面並從左側選單中選擇「書籍」。書籍列表已經是現有管理介面佈局的一部分。

左側有管理選單，主區域有搜尋篩選器和記錄，上方則有頁面導航。建立、搜尋和處理記錄都在同一個介面中進行。這是新增模組後的第一個實際成果：你不僅僅是獲得了原始碼檔案，還擁有了一個可以開啟和使用的新業務功能。

重新整理列表並體驗 SSR

書籍列表支援 SSR，即伺服器端渲染。在列表頁面時重新整理瀏覽器，佈局在重新整理期間沒有明顯的閃爍，並保留了熟悉的管理結構。

對於應用程式的使用者來說，第一印象不是 SSR 的實作細節，而是頁面開啟或重新整理時的呈現方式。對於開發人員而言，書籍模組現在已成為 CabloyJS 支援 SSR 的管理介面的一部分，無需為此 CRUD 功能專門建立 SSR 機制。

4. 建立一本書：從表單到列表

點擊「建立」開啟書籍表單並輸入：標題：Book One，作者：Kevin。描述是選填的，所以暫時留空，然後點擊「提交」。

回到列表中，你將看到 Book One，作者為 Kevin。這是一個簡單的操作，但它將前端和後端連接起來：開啟表單、輸入欄位、提交資料，並在列表中看到結果。

AI 剛剛建立的模組現在可以執行實際的業務操作。接下來，我們不急著完成這本書，而是將其作為一個開放任務繼續處理。

5. 保持三個任務開啟而不遺失輸入

在管理應用程式中，常見的情況是開始編輯一筆記錄後，需要檢查其詳細資料。或者，你可能已經開始填寫新表單，但在提交之前需要處理其他事情。如果離開頁面意味著需要重新開啟或再次輸入所有內容，你的工作就會被打斷。

CabloyJS 的管理介面提供第二排任務分頁。讓我們使用 Book One 和 Book Two 來看看它們如何運作。

從列表中開啟 Book One 的編輯頁面，其標題和作者已經填寫完畢。現在返回書籍列表，查看上方的分頁：Book One 的編輯任務仍然開啟。返回列表並不意味著你必須關閉編輯頁面。

接下來，從列表中開啟 Book One 的詳細資料頁面。你現在針對同一本書有兩個任務：一個用於編輯，一個用於查看詳細資料。你可以根據需要選擇任何一個，而無需每次都返回列表尋找記錄。

返回列表，點擊「建立」，然後輸入第二本書：標題：Book Two，作者：Tom。這次不要提交，將表單保留為草稿。

任務分頁現在包含三個開啟的任務：編輯（Book One 的編輯表單）、詳細資料（Book One 的詳細檢視）和建立（Book Two 未提交的表單）。

切換回 Book One 的編輯任務，然後是其詳細資料任務，最後再切換回 Book Two 的建立任務。標題仍然是 Book Two，作者仍然是 Tom。

編輯和詳細資料任務也保持開啟，因此你可以繼續在所有三個任務之間切換。Book Two 尚未提交，但切換任務並未遺失輸入內容。這使得任務分頁不僅僅是導航捷徑。

每個任務都保留其當前的工作上下文。你可以檢查其他資訊，然後返回完成表單，而無需為了離開頁面而提前提交，或在回來時重新輸入所有內容。

這種體驗更接近桌面應用程式中的多工處理：多個工作可以同時保持開啟，而不是強迫你在完成一個任務後才能進行下一個。

6. CabloyJS 開發的實用介紹

回顧整個過程，我們只從一個業務請求開始：「建立一個獨立的 demo-book 模組，以實現書籍的 CRUD 操作。」AI 開發並檢查了該模組。啟動伺服器後，我們就能開啟書籍列表、建立記錄，並使用支援 SSR 的頁面和任務分頁。

這次的實作展示讓你直接體驗了 CabloyJS 的幾個方面：模組化開發（新的書籍功能被組織為一個獨立的 demo-book 模組）、AI 與現有工具協作（AI 檢查專案並使用其生成器和指令，而不是引入單獨的實作方法）。

還有模式驅動的管理頁面（業務欄位成為列表、詳細檢視和表單的一部分，具有可重複使用的頁面功能）、SSR 頁面體驗（新資源加入現有的支援 SSR 的管理介面）以及多工處理（編輯、詳細資料和建立任務同時保持開啟，切換時保留表單輸入）。

CRUD 是本次實作的核心業務功能。SSR 和多工處理則展示了在實際管理應用程式中使用該功能的體驗。這些並非 AI 從頭重寫的基礎設施功能，而是 CabloyJS 已經提供的能力。

AI 在框架內開發業務功能，而新功能則受益於框架現有的頁面和互動。如果你想探索 CabloyJS，像這樣的小功能是一個很好的起點。

給 AI 一個明確的請求，看看它是如何建立模組、優化欄位並執行檢查的。然後開啟瀏覽器，自己建立一筆記錄，重新整理列表，並同時保持幾個任務開啟。

從「它生成了什麼程式碼？」轉變為「這個功能用起來感覺如何？」，將模組、模式和 SSR 從抽象術語轉化為具體的開發和應用體驗。

這就是 AI 程式碼生成實作的重點：將請求轉化為可操作的功能，並讓框架的能力變得可見且可用。

延伸閱讀：GitHub: https://github.com/cabloy/cabloy Docs: https://cabloy.com Demo: https://cabloy.com/demo