部分使用 Claude、Claude-Dev 和 Aider 建構票務系統
- 王林原創
- 2024-08-28 18:30:15709瀏覽
第 1 部分連結
如果你想在家玩的話，該專案已經開源：https://github.com/joegiglio/helpdesk-claude-dev-ai
第 3 部分 -
我現在想在知識庫中加入一些基本功能。 現在，我們只有一個框架 UI。讓我們看看能否讓克勞德用它做一些有用的事情。
[提示]
我現在想為知識庫添加一些基本功能。 現在，知識庫 URL 顯示了一個佔位符 UI，但讓我們開始讓它做一些有用的事情。 讓我們從以下開始：
在左側導覽列中新增「知識庫設定」的連結。 這應該會連結到包含這些設定的新模板。
在知識庫設定頁面內，新增佔位符圖像和占位符文字。
在知識庫設定頁面內，添加“主題”鏈接，該鏈接將由最終用戶創建。 這些主題將包含未來步驟中的文章。 進行必要的資料庫更新以支援這些變更。
[/提示]
Claude 進行了必要的更改，但遇到了缺少庫的問題。 它再次失去了對虛擬環境 .venv 的跟踪，我需要提醒它。
[提示]
請確保您使用的是虛擬環境，目錄名為 .venv
[/提示]
我們最終得到的 UI 缺少圖像，有幾種不同的字體，並且「管理主題」按鈕不起作用。 我請克勞德把它清理乾淨。
[提示]
我們需要對知識庫設定頁面的 UI 進行一些更改。
- 佔位符影像遺失。
- 有幾種不同的字體。 請選擇一個並堅持下去。
- 「管理主題」按鈕不執行任何動作。 看起來它沒有框架，所以讓我們讓它發揮作用。
- 透過建立一個表格來保存主題來更新資料庫。目前只需要一個字段，名為 Topic。
- 建立一個頁面，以便使用者可以建立和刪除新主題。 確認刪除。 [/提示]
Claude 再次嘗試使用本地佔位符影像，但我提醒它使用第 2 部分中討論的 via.placeholder.com 服務。
觀察輸出，我注意到一個資料庫遷移錯誤，Claude 能夠修復該錯誤：
資料庫遷移期間出現異常：
raise ValueError("約束必須有名稱")
ValueError：約束必須有名稱
經過一番清理後，這是我不關心的 UI：
[提示]
請使用整合/slack 頁面作為指導來更新知識庫/設定頁面的 UI。改進字體並用代表知識庫的本地圖像替換佔位符圖像 - 也許是一本書？
[/提示]
API 限制正在收緊！
429 {"type":"error","error":{"type":"rate_limit_error","message":"請求令牌數量已超出您的每分鐘速率限制(https://docs. anthropic.com/en/api/rate-limits）；請查看當前使用情況的回應標頭，請減少提示長度或請求的最大令牌，或稍後再試。限制的選項。
看著請求的經過，我看到 Claude 使用 cURL 指令下載一個代表知識庫的圖示。但是，它沒有加載。 當被問及時，克勞德說下載了一個 SVG 文件，但另存為 PNG。 這是一個新的。 再一次迭代，它就被修復了，留給我的是：
sqlalchemy.exc.IntegrityError：（sqlite3.IntegrityError）唯一約束失敗：knowledge_base_topic.name
[SQL：插入知識庫主題（名稱）值（？）]
[參數：('主題1',)]
[提示]
如果我嘗試建立一個已存在的主題名稱，則會出現異常。 請修復？ sqlalchemy.exc.IntegrityError：（sqlite3.IntegrityError）唯一約束失敗：knowledge_base_topic.name
[SQL：插入知識庫主題（名稱）值（？）]
[參數：('主題1',)]
[/提示]
…還有另一個 429 錯誤：
429 {"type":"error","error":{"type":"rate_limit_error","message":"請求令牌數量已超出您的每分鐘速率限制(https://docs. anthropic.com/en/api/rate-limits）；請參閱目前使用情況的回應標頭。限制的選項。
克勞德一定受到了很大的打擊！ 今晚幾乎無法使用...[提示]
我現在被阻止創建多個同名主題，但存在幾個問題： 1. 缺少「錯誤」閃存訊息的樣式。 背景顏色可能應該是紅色。 2. 主題名稱不區分大小寫。 如果「主題」已經存在，「我也不應該被允許創建「主題」。
[/提示]
我能夠再偷偷提出一個請求，直到我達到每日限制：
429 {"type":"error","error":{"type":"rate_limit_error","message":"請求令牌數量已超出您的每日速率限制(https://docs. anthropic. com/en/api/rate-limits）；請查看目前使用情況的回應標頭，請減少提示長度或請求的最大令牌，或稍後再試。選項。
今晚我沒有和克勞德做太多事情，但很快就達到了我的代幣上限。 我不太確定這是如何計算的，但今晚 API 似乎非常嚴格。 我能做的就是微笑著等待明天。
第二天：
[提示]
讓我們透過進行以下變更來繼續改進知識庫主題 UI： 1. 主題名稱應不區分大小寫。 如果「主題」已經存在，「我也不應該被允許建立「主題」。2. 將可以建立的主題數量限制為 10，並在UI 中顯示此計數。如果有10 個主題，請停用「建立主題”按鈕並顯示相應的訊息。
[/提示]
Claude 提出了一些奇特的類別函數程式碼來檢查主題數量和大小寫不敏感。 相當優雅：
我注意到主題名稱沒有強制執行最大長度，即使我告訴克勞德在我的系統提示中這樣做，這應該適用於我發送的每個提示。 令人失望…
即使資料庫中的欄位配置為接受 100 個字符，我也能夠提交包含數千個字符的主題名稱，並且沒有任何問題。我不確定這一切是如何運作的，但從我的家鄉來看，缺乏強制限制會導致麻煩。
[提示]
[/提示]
Claude 增加了一些程式碼，但它是純 JavaScript，我想要 jQuery，它已經是這個專案的一部分。 我的系統提示字元中也有 jQuery，但它似乎也忽略了這一點。 Claude 將其更改為 jQuery，甚至添加了字元計數器（很棒！）。 但是……這不起作用！
[提示]
我看到您添加了字元計數器，但它不起作用。 我在 Web 控制台中沒有看到任何錯誤。 請修復。
[/提示]
Claude 對腳本標籤的順序做了一些更改，現在它可以工作了。 再次出現與我們之前遇到的類似問題。
[提示]
讓我們在管理主題頁面上進行更多 UI 調整。 1. 依字母順序對主題進行排序，不區分大小寫。 2. 將主題計數移至「現有主題」標題旁邊，將其從「建立主題」按鈕下方刪除。
[/提示]
在這次迭代的中間，我再次達到了每日 API 限制。 無論 Anthropic 最近對「即時快取」進行了哪些更改，都對我沒有任何幫助。 情況似乎變得更糟了。
當然：
400 {"type":"error","error":{"type":"invalid_request_error","message":"您的信用餘額太低，無法存取Claude API。請前往計劃和帳單升級或購買積分。
這是目前的使用者介面。 還不錯！
[提示]
現在我想建立另一個功能，我們可以將文章新增到知識庫中。一些要求：
每篇文章必須有一個主題。
如果某個主題有文章，則在刪除其父主題時，該文章也應該被刪除。 刪除確認應警告用戶有多少文章也將被刪除。如果主題中有文章，使用者需要輸入「刪除」一詞（不區分大小寫）來確認主題刪除。
點擊主題名稱即可查看其中的文章。
在下一個提示中，我們將為文章建立頁面建立 UI。 現在，將佔位符頁面與佔位符圖像和文字放在一起。
請對文件和資料庫結構進行必要的變更以支援此功能。
[/提示]
資料庫遷移出現了一些問題，這似乎是由於 Claude 再次未偵測到 .venv
環境。 我將把它添加到 Claude-Dev 的系統提示設定中。 希望它有幫助。
[提示]
我們需要對文章創建實作進行一些調整。 請進行以下更改：
刪除主題時，我們應該始終顯示確認訊息。 但是，只有當主題包含文章時，我們才應該要求使用者輸入「刪除」一詞（不區分大小寫）進行確認。
新增刪除文章並確認刪除的機制。
在知識庫主頁面上，如果沒有主題，則隱藏搜尋列和占位符訊息。 新增佔位符文本，表示還沒有主題。
新增更進階的文章編輯器，以便使用者可以在建立和編輯期間格式化其文章。 透過在儲存和檢索時對文章文字進行編碼和解碼，防止潛在的危險字元。
[/提示]
[提示]
還需要一些調整：
管理主題頁面應顯示每個主題中有多少篇文章。
如果主題中沒有文章，則不應出現「查看所有文章」按鈕。相反，顯示諸如“該主題中沒有文章”之類的文本。
您嘗試新增 TinyMCE 編輯器來新增和編輯文章，但它沒有出現。 我在控制台中沒有看到任何錯誤。
[/提示]
[提示]
還需要一些調整：
如果主題中沒有文章，則管理主題會顯示文章計數器和文字「該主題中沒有文章」。 無需同時顯示兩者，因此刪除文字「此主題中沒有文章」。
在「知識庫」頁面上，如果該主題中沒有文章，我們仍然顯示「查看所有文章」按鈕。 相反，顯示諸如“該主題中沒有文章”之類的文本。
TinyMCE 編輯器仍然不會出現以新增或編輯文章。 我在控制台中沒有看到任何錯誤。
[/提示]
TinyMCE 編輯器現已出現，但需要 API 金鑰。 我們是否可以使用另一個不需要密鑰的編輯器？ 目前基本的格式選項應該沒問題。 如果你能找到，請用它取代TinyMCE。
[/提示]
[提示]
我可以查看 CKEditor，但遇到一些問題：
我無法保存文章。 開發控制台顯示此錯誤：new:1 name='content' 的無效表單控制項無法聚焦。
我無法上傳圖像。 開發控制台顯示此錯誤：ckeditorerror.ts:140 filerepository-no-upload-adapter
請修復？
[/提示]
克勞德說：
對於您遇到的問題，我深感抱歉。讓我們解決這兩個問題：
錯誤「名稱='內容'的無效表單控制項不可聚焦」可能是由於 CKEditor 會以自己的元素取代文字區域，從而導致表單驗證出現問題。我們需要更新表單提交流程來處理此問題。
出現「filerepository-no-upload-adapter」錯誤是因為我們沒有為 CKEditor 設定上傳適配器。我們需要實作一個簡單的上傳適配器來處理圖像上傳。
第一個修復看起來很簡單，但 Claude 添加了一些非常複雜的 Javascript 程式碼來適應檔案上傳。 我反駁：
[提示]
這看起來像是上傳適配器的一些非常複雜的程式碼。您確定沒有更簡單的解決方案，也許是 CKEditor 內建的東西？
[/提示]
克勞德：
對於複雜性，我深表歉意。你是對的，使用 CKEditor 的內建功能有一個更簡單的解決方案。讓我們使用 CKEditor 的 Basic 套件來簡化我們的方法，它不包括映像上傳，但提供基本的格式化選項。這應該可以解決這兩個問題，而不需要複雜的上傳適配器。
我想要檔案上傳功能，但在本練習中沒有它也可以。 不幸的是，我達到了每日 API 限制，所以今天的活動就到此為止。 如此勢頭殺手…
429 {"type":"error","error":{"type":"rate_limit_error","message":"請求令牌數量已超出您的每日速率限制(https://docs. anthropic. com/en/api/rate-limits）；請查看目前使用情況的回應標頭，請減少提示長度或請求的最大令牌，或稍後再試。選項。
但是，我確實預覽了克勞德的一些修復。 我現在可以儲存文章，但預覽顯示 HTML 程式碼。 也沒有辦法真正查看整篇文章。 我的疏忽。 需要修復！
[提示]
仍有一些錯誤和缺點需要修復：
在建立和編輯文章時，我仍然可以選擇上傳圖像。 嘗試上傳影像顯示錯誤：ckeditorerror.ts:140。 我希望能夠使用編輯器上傳圖像，所以請修復。 如果需要的話，我們可以使用 /static/uploads/ 目錄來儲存上傳的圖片。
當我轉到主題/[主題編號] 頁面時，我會看到文章預覽，但它們會顯示可見的 HTML 程式碼。 此頁面應作為文章預覽，我們也許應該看到本文開頭的純文字版本。 我們稍後可能需要對此進行調整。
我們需要一個新的路線來查看文章，文章應該顯示正確的格式。 現在，當您單擊一篇文章時，它會將您帶入編輯模式。 我們需要將查看和編輯分開。
應該有一種方法可以從管理主題頁面在每個主題中建立新文章。
建立新文章時，頁面底部有一個主題下拉式選單。 此下拉清單無法根據上下文了解使用者所在的主題。下拉清單應反映正確的主題。
[/提示]
[提示]
看起來 new_article.html 和 edit_article.html 檔案中有一些類似的 Javascript 程式碼。 我們可以在一個公共文件中創建它並共享程式碼嗎？
[/提示]
你是對的，這是一個很好的建議。讓我們為 CKEditor 配置建立一個通用 JavaScript 文件，並在 new_article.html 和 edit_article.html 中使用它。
首先，我們在 static/js 目錄中建立一個名為 ckeditor_config.js 的新檔案。
這是很多變化。 在查看程式碼變更時，我注意到差異顯示一堆程式碼被從 app.py 檔案中刪除並替換為文字“# ...（現有程式碼的其餘部分）”。 我以前從未見過這種情況，儘管這可能是克勞德處理大檔案的方式，而且它並不會真正刪除現有程式碼。 嗯，我錯了！
當 Claude 完成這些調整時，我嘗試訪問主頁，結果是 404。大量程式碼和路由被刪除，第 80 行字面意思是「# ...（現有程式碼的其餘部分）」。哇，這太糟糕了！希望我們能解決這個問題，但我聞到了潛在的 API 限制！
[提示]
哦不！ 在您上次更改後，我似乎從 app.py 檔案中丟失了很多程式碼。 許多路由都消失了，並在 app.py 的第 29 行和第 80 行被替換為「# ...（現有程式碼的其餘部分）」。 請修復！
[/提示]
克勞德：
對於疏忽，我深感抱歉。你說得完全正確，我會立即解決這個問題。讓我們恢復 app.py 檔案中遺失的程式碼。
克勞德能夠修復程式碼，但是哇 - 這是一個糟糕的程式碼。 這到底是怎麼回事？
[提示]
如果我嘗試建立「新文章」按鈕，則會收到此錯誤：jinja2.exceptions.UndefinedError：'csrf_token'未定義
[/提示]
Claude 說我們現在需要 Flask-WTF 包，它將使用 pip 安裝它。 讓我們看看系統提示使用 .venv 目錄是否有效…
不可能！ 克勞德又乾了一次，把程式碼合併時的程式碼全部刪除了！ 您確實需要注意，而不僅僅是接受產生的程式碼。
[提示]
我不能接受這個程式碼！ 第 31 行“有 # ...（現有程式碼的其餘部分）”，您再次刪除了其餘程式碼！
[/提示]
當 Claude 完成後，伺服器嘗試重新啟動，但失敗並顯示“ModuleNotFoundError：沒有名為 'flask_wtf' 的模組”，這表明它沒有使用 .venv 目錄，所以我不相信系統提示符正在工作。 這可能是 Claude-Dev 擴充的問題。
[提示]
我收到錯誤“ModuleNotFoundError：沒有名為“flask_wtf”的模組”，因此請確保在添加新庫時使用 .venv 虛擬目錄！
[/提示]
克勞德：
對於疏忽，我深感抱歉。沒錯，我們需要在虛擬環境中安裝Flask-WTF。我們現在就開始吧。
而且…就像發條一樣：
429 {"type":"error","error":{"type":"rate_limit_error","message":"請求令牌數量已超出您的每日速率限制(https://docs. anthropic. com/en/api/rate-limits）；請查看目前使用情況的回應標頭，請減少提示長度或請求的最大令牌，或稍後再試。選項。
好消息是 Claude 能夠使用正確的虛擬環境並且伺服器啟動了。壞消息是，如果我嘗試提交一篇新文章，我會遇到另一個 CSRF 錯誤。 醒來吧，克勞德。 你還有一些工作要做！
請修正以下錯誤：
如果我嘗試提交新文章，則會收到錯誤訊息：「請求錯誤。」RRFRF 令牌遺失。」
如果我嘗試查看一篇文章，HTML 標籤是可見的。 文章應以不含標籤的格式顯示。
[/提示]
429 {"type":"error","error":{"type":"rate_limit_error","message":"請求令牌數量已超出您的每分鐘速率限制(https://docs. anthropic.com/en/api/rate-limits）；請查看當前使用情況的回應標頭，請減少提示長度或請求的最大令牌，或稍後再試。限制的選項。
[提示]
我仍然發現一些錯誤。 這些都是非常基本的，不應該寫入程式碼中。 請更仔細地檢查您的程式碼，因為每次您需要修復它們時都會花費我的錢！ 也許應用程式變得足夠複雜，以至於是時候添加一些將在每次程式碼變更時執行的自動化測試了？ 我發現的問題：
當我嘗試查看一篇文章（例如在article/2 中找到的文章）時，它仍然顯示 HTML 標記，並且不呈現格式化的文章。 也許在保存文章時這會被破壞？ 我看到 lt;和>；在資料庫中，注意 app.py 第 416 行有「content = html.escape(content)」。
如果我嘗試建立一個新主題，我現在會收到“錯誤請求”。 CSRF 令牌丟失。 ”
如果我嘗試建立一篇新文章，我會收到「UndefinedError jinja2.exceptions.UndefinedError：'form'未定義」
[/提示]
看著Claude修改程式碼，我覺得它正在崩潰。 為什麼要又刪除所有這些程式碼？
[提示]
為什麼又刪除所有這些程式碼？ 第 35 行有 # ...（保留所有現有的模型定義和輔助函數）並且刪除所有其他程式碼？ 小心！
[/提示]
克勞德：
對於造成的混亂，我深感抱歉。你說得完全正確，我很欣賞你對細節的關注。讓我們進行必要的更改，同時保持所有現有程式碼完好無損。我們只會更新具體需要修改的部分。
讓我們更新app.py文件，只關注需要更改的部分
429 {"type":"error","error":{"type":"rate_limit_error","message":"請求令牌數量已超出您的每分鐘速率限制(https://docs. anthropic.com/en/api/rate-limits）；請參閱目前使用情況的回應標頭。限制的選項。
嘆息…[提示]
第 35、37 和 46 行仍然有這些註釋，而且您正在刪除大量程式碼。為什麼？
[/提示]
當然 -
429 {"type":"error","error":{"type":"rate_limit_error","message":"請求令牌數量已超出您的每日速率限制(https://docs. anthropic. com/en/api/rate-limits）；請查看目前使用情況的回應標頭，請減少提示長度或請求的最大令牌，或稍後再試。選項。我不可能是唯一遇到這些問題的人。 其他人都說他們透過克勞德賺了數百萬美元，而我似乎發現了所有的錯誤！ 我在 Claude-Dev Github 專案中打開了一個問題，因為我不能這樣生活：Github 連結
經過更多研究後，聽起來我的專案確實達到了某種類型的令牌限制，記錄如下：Github 問題。 這確實限制了您可以使用的項目的複雜性，並且隨著專案變得更加複雜，這可能是導致如此多 API 限制錯誤的原因。
如果我對問題的理解正確的話，為了提高程式碼質量，Claude-dev 在請求中來回發送活動文件的全部內容。 這會耗盡令牌，在某個時候，我的 app.py 檔案變得太大而無法管理。 一種建議是將程式碼分解成更小的檔案。 早在第 1 部分中，這就是我們前進的方向，但在循環導入和 Uvicorn 方面遇到了一些問題，所以我們在這裡......
我想我會暫時擱置這個專案並關注 Github 線程以獲取更新。 這給了我們一些希望，即將到來的克勞德更新將減輕痛苦：Github 評論
下一步：遊標？ 上次我嘗試時，我不太喜歡使用者體驗，但很多人似乎已經做出了轉變。 對於使用 UI 來提高生產力的開發人員來說，Cursor 似乎是新事物。 因為我們現在需要的是另一個IDE。
我們一圈又一圈…
那麼，有一些結論嗎？
Claude 準備好替換軟體工程師了嗎？ 嗯，還沒有，但它可以提高現有工程師的工作效率。 API 限制僅限於小型專案、重構、錯誤修復和用作虛擬配對程式設計師。
我了解到 Claude 可以讀取複雜的程式碼庫並修復其中的錯誤。 根據我的經驗，它遇到了一些錯誤，它無法在一個相當簡單的專案中修復它自己創建的程式碼，因此並沒有給我帶來溫暖和模糊。 對於由數十人編寫的具有複雜文件結構的舊程式碼庫來說，它會表現如何？ Claude 沒有任何業務背景，如果被要求修復 UI 錯誤，它在匹配這個簡單專案中現有的 UI 和 UX 流程方面做得不好。 它需要多次迭代才能自行清理。
我發現後端程式碼比前端程式碼“更容易”，因此我個人會使用它來幫助我建立專案結構和框架 UI。 克勞德的優勢之一是“電腦視覺”，它使您能夠上傳文件並要求克勞德用程式碼重新創建它。 如果您喜歡網站的使用者介面，這應該會給您一個很好的起點。 也許這就是新的「查看原始碼」。 正如他們所說，擁抱並增強。
雖然我最早的提示之一要求Claude 使用Bootstrap 製作響應式UI，但我剛剛第一次檢查了移動視圖，發現它在任何小於iPad Mini 分辨率的設備中都無法真正發揮作用，這並不看起來也很棒。 所以不要做任何假設。 克勞德的程式碼需要與任何其他程式碼相同數量的測試。
事實上，讓它建立一個可以在程式碼簽入之前運行的自動化測試工具是有意義的。沒有人喜歡做這項工作。 讓 Claude 負責編寫、維護和運行測試。 絕對是一條值得探索的途徑。
我要求 Claude 在我的最後一個提示中創建一些自動化的東西，但令牌和 API 限制在我們到達之前就結束了這個實驗。
關於作者
作者簡介
Joe Giglio 是軟體產業 25 年以上的資深人士。在他的職業生涯中，他曾在一家本地撥號 ISP、各種規模的新創公司以及一家成熟、發展緩慢的企業工作。每一站都學到了重要的經驗教訓。
他最近的項目包括：
遠距工作訓練與諮詢：chiefremoteofficer.com
Kindle 書籍《讓遠距工作，為你工作》
遠距公司排名。想想「遠端公司的玻璃門」：remotescorecard.com
Joe 的指導原則是：遠距優先、品質驅動、客戶支援和終身學習。他是一個內向的人，早在它流行之前就練習了社交距離！
他目前住在北卡羅來納州，始終對新的機會、結識優秀人才和了解令人興奮的項目感興趣。
聯絡 Joe Giglio：joe -AT- joegiglio.org |推特 |領英
以上是部分使用 Claude、Claude-Dev 和 Aider 建構票務系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！