02 principles-of-agentic-code-development
在我們開始之前，我想與你分享一些關於如何使用 Repl.it Agent 成為一名成功的應用程式開發者的秘訣。
保持精確
首先，請務必保持精確。確保每次只給 Repl.it Agent 一個任務。如果你有一個複雜的任務，請將其分解為更小的部分。否則，你很快就會發現，對於當今的程式碼代理來說，同時處理多個複雜任務可能真的極具挑戰性。同樣地，讓你的提示具體且詳細。就像人類開發者一樣，程式碼代理在收到清晰明確的指令時，工作效率最高。
保持條理
接下來，保持良好的組織習慣。我希望你盡可能地保持專案整潔。逐步添加功能，在每次添加後進行徹底測試，並且在出現問題時，不要猶豫回溯。然後，對於每個新功能，你總是希望從一個全新的會話開始。這樣一來，就能更容易地回到之前運作良好的版本。最後但同樣重要的是，不要猶豫回到你上一個正常運作的版本。如果你不斷堆積不穩定的程式碼和功能，你很可能會陷入一團混亂，阻礙你穩步前進。
保持耐心
現在，最重要的建議是：保持耐心。即使你不是技術人員，也要盡力在過程中建立對應用程式及其組件的理解。Replit Agent 會詳細解釋其每個動作背後的原理，描述其思考過程以及對程式碼所做的更改。仔細閱讀 Repl.it Agent 的輸出，你將快速學習到你正在創建的應用程式的一切。
因此，作為自然的後續步驟，請花點時間審查建議再接受它們。一方面，質疑那些不合理的地方。但另一方面，也要相信 Repl.it Agent 常常會給你帶來意想不到的有效解決方案，來解決你所面臨的問題。
我再怎麼強調這點都不為過：在除錯時保持耐心。這是開發複雜功能過程中的一部分。即使是最優秀的軟體開發人員，大部分時間也花在除錯上。Replit Agent 每天都在進步，但它仍然不完美。因此，花時間用不同的策略進行除錯，將使你比預期更成功。
Repl.it 平台與 AI 工具簡介
現在，我將把時間交給 Matt，這樣你就可以開始使用 Replit Agent 進行建構了。在本課程中，我們將探索 Repl.it 平台及其AI 驅動的工具，這些工具可以加速開發。我們將討論有效 AI 協作背後的基本概念，以及我在使用 AI 助理建構應用程式時所使用的關鍵策略。我們還將熟悉 Repl.it 並逐步完成設定。
關於 Matt
首先，簡單介紹一下我自己。我是 Matt，我在 Repl.it 負責開發者關係。你可以在社群媒體、X 或 YouTube 上透過這些 QR 碼找到我。現在，我們將直接進入入門環節。
什麼是 Vibe Coding？
首先，重要的是要談談 vibe coding 究竟是什麼，以及它在今天代表什麼。當我們談論 vibe coding 時，通常是指依賴我們的 AI 代理和 AI 工具來編寫程式碼，而不是我們自己動手寫。這意味著生產力的大幅提升，許多人發現他們能夠建立以前從未創建過的應用程式。這表示它可以將你腦海中的想法轉化為部署在網路上的真實應用程式。Repl.it 在這方面提供了很大的幫助。
然而，從根本上說，我們發現 vibe coding 受限於開發者體驗。如果你以前沒有聽過「開發者體驗」這個詞，或者你不是專業的軟體開發人員，請不要擔心。它只是指開發應用程式的體驗，或者開發人員用來建構事物的工具、技術和環境。這些工具可能令人望而生畏，這正是我們今天將要討論的內容：如何充分利用這些工具，開始建構應用程式，並再次創建最好的應用程式。
但更重要的是，vibe coding 有其陷阱，這些也是我們今天將要討論的內容。我們將探討規劃和邏輯思考的方法，以克服其中一些限制，並從根本上產生更好的結果。
課程目標
那麼，在本課程中，我們將：
- 使用 AI 建構真實的、已部署的應用程式。
- 學習工具的重要性以及如何充分利用我們正在使用的工具。
- 學習如何與 AI 溝通，因為有一些基本技能可以幫助你再次充分利用這些工具。它只是一個工具，但它需要一些知識，並且理解如何與 AI 溝通可能需要一些學習曲線。
- 最後，我們將獲得有效建構的技能，你可以將這些技能從本課程中帶走，並應用於你生活的各個領域。你將能夠自動化你不想做的事情，或者創造你認為不可能的事情，或者提高你的工作效率，或者提高你的生活效率。
我在自己的生活中看到了這些事情，這就是為什麼我非常興奮能夠分享它們。這就是為什麼我非常感謝我所從事的工作。
Repl.it 平台與 AI 工具概述
首先，我們將討論 Repl.it 是什麼，以及 AI 工具如何融入我們的平台。你可以將 Repl.it 視為開發環境。在 Repl.it 之上，我們有 Agent，它是我們的自動化開發者；還有 Assistant，它是我們用於快速編輯和聊天的工具。
Repl.it：獨特的開發環境
Repl.it 是一個獨特的環境，它與你過去可能使用過的其他工具不同。如果你曾經需要編寫程式碼或安裝程式碼編輯器，你就會知道需要大量的設定。你必須下載這個東西，將它安裝到你的電腦上，這甚至還不包括安裝套件、配置語言、配置你的環境。這可能是一個真正的麻煩。
因此，Repl.it 無需安裝。它完全在你的瀏覽器的一個分頁中運行，並且在每個步驟都包含 AI 工具。但它不僅僅處理套件和語言，並且是零設定，它還擁有你建構全端應用程式所需的一切。這包括資料庫、物件儲存、身份驗證以及一系列其他工具和服務。從那裡，你只需點擊幾下即可部署這些應用程式，這就是我們今天將要看到的。Repl.it 真正強大的原因在於你無需花時間擔心設定。這將使我們能夠在本課程中快速推進。我希望你也這麼認為。
Repl.it Agent：自動化開發者
現在，在 Repl.it 之上，我們建構了 Agent，也就是 Repl.it Agent，它是我們的自動化開發者。它允許你僅憑聲音從頭開始建構和配置整個專案，並為你的專案建立計劃（我們今天將會看到），以及對你的程式碼進行複雜的多步驟更改。
Repl.it Assistant：輕量級工具
現在，如果我不提及 Repl.it Assistant，那將是我的疏忽。它是我們用於聊天和快速編輯的更輕量級工具。透過 Assistant，你可以：
- 與 AI 討論任何話題。
- 請求對程式碼進行快速的一次性編輯。
- 詢問有關你專案的問題。
因此，我們今天將看到一個相當常見的模式：使用 Agent 來搭建專案骨架，使其達到 MVP（最小可行產品）狀態並使其運作起來，然後切換到 Assistant 來精確調整功能並建構專案的其餘部分。
免費方案與廣泛適用性
在我們進入白板環節並討論提示和 vibe coding 的一些基礎知識之前（這將主要延續 Michaela 已經討論過的內容），還有一件重要的事情要提：Repl.it 提供免費方案。我們將能夠在本課程的大部分甚至全部內容中使用免費方案。你將能夠在 Repl.it 上免費註冊。你的第一個專案，你在 Repl.it 上最多可以有三個免費專案，這符合免費方案的條件，並且你將獲得一定數量的點數和檢查點，無需付費即可使用 Agent 和 Assistant。
更重要的是，本課程中的所有概念都完全適用，不僅適用於 Repl.it，也適用於你使用 AI 和這些新工具進行建構的任何情況。因此，有很多東西可以學習，有很多收穫，我相信你將從本課程中獲益良多。
Vibe Coding 的五項關鍵技能
現在我們將進入一個白板環節，我將分解一些我認為對 AI 和 Repl.it 普遍有用的建構概念。現在我們將探討 vibe coding 中的五項技能，我對這些技能思考了很多，它們確實幫助我將我的應用程式提升到一個新的水平。這些技能是：
- 思考 (Thinking)
- 框架 (Frameworks)
- 檢查點 (Checkpoints)
- 除錯 (Debugging)
- 上下文 (Context)
我們將保持這些內容簡短而直接。但我希望你將這些概念牢記在心，因為當我們開始建構這些專案時，你會開始注意到一些模式和概念，這樣在未來，你就能真正精確調整你的應用程式。我認為使用 AI 進行 vibe coding 是一個全新的概念，因此最好的學習方式是透過實踐，透過參加這樣的課程，以及透過自己實驗。
思考的層次
現在我們將談談思考，希望這是你一生中大部分時間都在做的事情。我知道有些時候我不太思考，但我一直在努力改進。我們可以將思考分解為一個層次結構。
邏輯思考非常重要。我們將其比作一盤西洋棋。邏輯思考可能就像問問題：「西洋棋是什麼遊戲？」或者實際玩遊戲，這就更深入到分析思考。你們大多數人可能都熟悉分析思考，即分解遊戲，學習如何玩好它們，分解問題並學習如何解決它們。
但是，當我們談論使用 AI 進行建構時，我想介紹兩種思考類型：計算思考 (computational thinking) 和程序思考 (procedural thinking)。
- 計算思考的一個例子可能是：「西洋棋遊戲背後的模式是什麼？」這可能會引導你做一些事情，例如編程電腦來執行西洋棋的規則。當我們建構 AI 應用程式時，我們不只是邏輯思考。我們實際上是在創造性地思考，或者計算性地思考如何將一組邏輯（實際上是一個應用程式）融入一個複雜的問題中。
- 程序思考是更高層次的思考，它可能是編程電腦來玩競技西洋棋。這不僅要求我們理解西洋棋的規則以及如何編程電腦來執行這些規則，還要求我們如何編程電腦在高水平上進行競技。因此，它確實要求我們問：「我如何才能在遊戲中脫穎而出？遊戲的邊界是什麼？以及我需要考慮哪些邊緣情況才能建構這個東西？」最後，「我如何將這些東西轉化為程式碼，或轉化為自然語言，以便 AI 隨後實施？」
框架的應用
接下來，我想談談框架 (frameworks)。如果你對框架（無論是語言還是套件）沒有高層次的理解，請不要擔心，因為這更偏向於概念性。
重要的是要開始思考你的應用程式如何運作。這與我們剛才討論的思考方式一脈相承。開始思考你的應用程式如何運作，我們如何實施這些問題的解決方案，然後思考已經存在的解決方案，因為人們已經編寫了大量的程式碼。AI 能夠為你編寫程式碼的原因是它理解人們已經編寫的程式碼。
因此，如果你能理解一個問題領域並開始思考你不了解的事物，這可能意味著：
- 詢問 AI：「嘿，這個問題有哪些常見的解決方案？」
- 或者詢問 AI：「嘿，有哪些真正好的套件可以幫助我解決這個問題？」
然後你就能理解如何做你想做的事情，或者在問題領域中定位自己。這可能意味著向 AI 提出問題，例如：「什麼框架可以讓我做那件事？」例如，如果你想在你的應用程式中實施拖放介面，你可以說：「幫助我提出用於在此應用程式中實施拖放的 React 框架」，然後實施一個。
以這種方式與 AI 互動，不僅是學習框架如何運作以及這些事物如何融入語言、套件和所有其他結構的絕佳方式，而且也是更快完成工作的絕佳方式。這就是我完全透過 AI 學習前端開發的方式。我只是問很多問題，我試圖理解它正在建構的東西，而核心是，我試圖理解我所不知道的。這涉及一個回饋過程，即不斷向 AI 提問並迭代。
善用檢查點
接下來，我們來談談檢查點 (checkpoints)。在建構過程中，一個不幸的事實是事物會損壞。無論有沒有 AI，這都是事實，而且當我們使用 AI 進行建構時，這種情況更為常見。因此，本課程中很有可能會出現問題。
但一個真正重要的概念是版本控制 (version control)。Repl.it 中的每個專案都預設具有版本控制。你無需設定，也無需擔心。正因為如此，當我們使用 AI 進行建構時，我們將擁有檢查點。我們將分塊我們正在建構的內容，將其分解為邏輯步驟，然後在短衝刺中快速推進，並在任何東西損壞時利用這些檢查點。
這意味著，即使我們想實驗一個新功能，即使我們想提示 AI 並學習或嘗試新事物，如果我們的應用程式中有些東西不太奏效，我們也可以回到舊狀態，從我們離開的地方繼續。更重要的一點是，這是一種非常好的建構和開發方式：
- 利用檢查點。
- 測試你正在建構的內容。
- 如果有效，則繼續。
- 如果無效，則返回並重試。
除錯的藝術
好的，這裡還有幾個概念要討論，然後我們將開始建構。首先是除錯 (debugging)。正如我所說，事情往往會出錯。除錯的過程就是找出事物為何出錯的過程。這可能看起來有點過於直接，但我保證它值得我們仔細探討。
所以，如果你有一盞不亮的燈，你可能會先問：「燈插電了嗎？」如果沒有，你會插上燈。如果這不是問題所在，你可能會問：「燈泡燒壞了嗎？」如果是，你會更換燈泡。如果不是，你需要繼續除錯或找到另一種修理燈的方法。這正是我們在建構應用程式時將要經歷的相同過程。
現在，你可能會說：「嘿，那其實有點無聊。」但你真的可以讓任何事情變得有趣。對我來說，當我正在建構一些讓我興奮或我知道會產生非常酷的結果的東西時，除錯真的很有趣。
因此，最好的除錯是：
- 有條不紊的 (methodical)
- 徹底的 (thorough)
- 從第一原理 (first principles) 開始
所以，除錯的目標是：
- 首先了解我們的應用程式如何運作。
- 其次了解錯誤在哪裡。
- 然後問自己：「嘿，我們如何找到這個問題的根源？」
最後一步，這有點跳躍，是我們如何告訴 LLM 哪裡出錯了，以便它解決我們的問題？我們如何告訴 Agent 哪裡出錯了，以便它理解問題？
理解上下文
這就是上下文 (context) 發揮作用的地方。如果你一直在使用 AI 進行建構，如果你一直在使用 LLM 進行建構，你可能聽過上下文視窗 (context window) 或上下文這個詞。那麼，當我們說上下文時，我們指的是什麼？
上下文視窗是 LLM 在給定時間可以處理的令牌 (tokens) 數量。你可以將其想像成你可以提供給我們的 Agent 或模型的字數或資訊量，它可以在任何一次聊天實例中思考。我喜歡將其想像成多任務處理，對吧？作為一個人，如果你要求我做很多事情，我可能會開始忘記你要求我做的一些事情。我可能會開始忘記。
因此，當我們與 LLM 聊天時，一個一致的主題將是我們需要確保上下文與我們正在嘗試做的事情相關。現在，上下文可以是我們提供給 LLM 的提示 (prompt)，它也可以是圖像，對吧？那可能是你提供的文件。我們將討論一些這方面的例子。它可能是錯誤或有關你的應用程式、環境或偏好的詳細資訊。對，這就是我們剛才在除錯中討論的內容。當我們遇到錯誤時，我們必須嘗試將這些錯誤納入我們與 LLM 溝通的上下文中，這樣我們才能克服這些問題。我們可以理解問題是什麼並繼續前進，或者我們可以讓 LLM 修正它正在做的工作。
一個非常重要的一點是，因為這些 AI 模型，即為 Repl.Agent 提供動力的底層模型，可能訓練資料過時，或者它們可能是在幾個月或幾年前建構的，所以我們可能需要提供額外的上下文，特別是如果我們正在做一些以前從未做過的新穎事物。或者如果我們正在使用的套件、函式庫或框架是模型不熟悉的。
使用 AI 建構 MVP 的策略
那麼，將所有這些聯繫起來，這對於我們使用 AI 建構 MVP（最小可行產品）意味著什麼呢？
初始 MVP 的建構
我們將只提供 AI 相關於 MVP 的資訊，讓 Agent 只擁有這些資訊。我們將從小處著手，就像 Mikayla 提到的那樣，然後逐步發展到一個功能齊全的產品。在我們製作第一個提示時，我們將提供基礎上下文和重要細節。
實施新功能
從那裡，我們將開始實施新功能。我們將提供與新功能相關的上下文。我們將提及框架，提供詳細的實施文件，以確保 Agent 真正理解我們正在嘗試做什麼。我們將進行增量更改，達到檢查點，然後在出現任何問題時回溯。
除錯與問題解決
當我們除錯錯誤時，當出現一些小障礙時，我們將弄清楚事物如何運作。我們將弄清楚哪裡出錯了，我們將弄清楚如何將資訊提供給 LLM 以擺脫困境，並弄清楚如何引導該上下文來解決我們的問題。請記住，它們不是錯誤，它們只是快樂的小意外。如果我能被稱為 vibe coding 的 Bob Ross，我會完全接受。
迭代開發循環
這是我在開始建構之前要說的最後一件事，我保證。在建構時，我們可以考慮我們的最小可行產品 (MVP)，或者向該 MVP 添加新功能。
我們將從提示 AI 開始，然後我們將測試我們的應用程式，我們可能會嘗試破壞它，我們可能會遇到錯誤，並且必須除錯該應用程式。但是一旦我們這樣做了並且有了一個可運作的版本，我們就會達到一個檢查點。也許我們沒有遇到任何錯誤，我們可以直接從測試進入我們的檢查點。但下一步是再次重複所有這些。
所以，看起來我們的流程是：
- 提示以獲得我們的 MVP 或功能。
- 然後測試它。
- 我們可能會遇到錯誤，然後除錯它，修復它（或者沒有）。
- 然後我們繼續進行下一個 MVP 或功能。
這種回饋循環，這種循環，很大程度上是我在使用 AI 進行建構時所遵循的模式。
Repl.it 平台導覽與首個專案
現在，讓我們直接開始吧。我們將快速導覽 Repl.it 並開始我們的第一個專案。
Repl.it 入門指南
在我們跳轉到應用程式之前，我只想快速引導你如何到達這個畫面。要看到這個頁面，這個首頁，你所要做的就是在 Repl.it.com 上創建一個帳戶。你可以使用你的 Gmail，你可以使用另一個帳戶，你可以使用你的電子郵件和密碼。非常簡單。然後你就會直接來到這裡。
這是我們的首頁，這是我們的概覽頁面。你可以看到它非常以聊天為先。所以這是我們輸入提示與 Agent 互動的地方。但任何時候你想管理你的應用程式，我們都有一個側邊面板，你可以在其中查看你製作的所有應用程式、你部署的應用程式。你可以查看你的使用情況、編輯你的設定，或以其他方式管理你的帳戶。