原始影片被影響者 Rohan Paul 轉發，目前已超過 200,000 次觀看！
{% embed https://x.com/hot_town/status/1831679375269310890 %}
因此，因為這似乎是一個許多人感興趣的話題，我想提供一些額外的信息和技巧，來輔助這部影片，幫助你快速開始建置 SaaS 應用程式，並希望能幫助你賺取一些額外的收入！
利用 Open SaaS 和 Wasp
最重要的是，我使用 Open SaaS，一個 免費、開源 的全端 React、NodeJS 和 Prisma SaaS 起始架構作為我的基礎。
Open SaaS 預先整合了一堆很酷的功能：
- 全端身份驗證
- Open AI API 應用範例
- AWS S3 文件上傳範例
- Stripe 或 Lemon Squeezy 付款整合
- 全端類型安全
- 管理儀表板
- 郵件發送
- 完整的文件
- 簡易的一鍵部署
如果你想了解更多，請查看 Open SaaS 首頁。
這個範本不僅是個很好的起點，因為它有大量的範本代碼，而且它還基於 Wasp，這是一個包含各種元件的全端 React/NodeJS 框架。
Wasp 使用一個中心設定檔，意味著你只需要用幾行代碼定義功能，Wasp 就會為你管理這些功能，省去編寫大量的範本代碼的需要，例如身份驗證：
app todoApp {
title: "待辦事項應用程式", // 在瀏覽器標籤中可見
auth: { // 預設的全端身份驗證
userEntity: User,
methods: { google: {}, gitHub: {}, email: {...} }
}
}這意味著，當使用像 Cursor 和 Claude 這樣的 AI 輔助編程工具時，AI 需要做的工作少得多。它編寫的代碼簡單很多，你得到的代碼也更容易除錯！
Cursor 提示與技巧
當我使用 Cursor 時，注意到 AI 偶爾會產生幻覺或編寫有錯誤的代碼。我用兩種方法解決了這些問題：
- 將 Wasp 文件添加到 Cursor 的上下文中
- 在 Cursor 規則設置中指導 Cursor 如何克服其常見錯誤。
- 確保為你的整個代碼庫建立索引
1. 將 Wasp 文件添加到 Cursor 的上下文中
使用 Open SaaS 和 Wasp 作為底層框架的好處在於，它們都是免費且開源的。幸運的是，這意味著我們也可以訪問它們的原始文檔文件，這些文件是用 Markdown 編寫的，可以在各自的 GitHub 倉庫中找到。
所以我會把 Wasp 文檔 Markdown 文件 複製到我正在工作的專案根目錄中的一個單獨目錄。然後，每當我有問題或嘗試實現新功能時，我就可以參考這些文檔。
然後，當我使用 Cursor 的作曲家或聊天介面時，我可以使用 "@" 符號並選擇 Folder -> Docs，然後寫下這樣的提示：
使用 @docs 作為指南，幫助我在我的應用程式中實現帶有 Wasp Websockets 功能的聊天功能。給應用程式一個聊天頁面...
2. 添加 Cursor 規則以避免常見錯誤
Cursor 和 Claude 在跨多個文件寫代碼方面非常出色，但它們仍然可能會犯小錯誤，例如產生錯誤的導入或跳過某個 Wasp 特性，使實現變得更快。
這就是為什麼我喜歡識別這些常見錯誤並將它們添加到 Cursor 設定中的 Cursor 規則部分。或者，如果你希望這些規則保持專案特定，可以將這些規則添加到專案根目錄中的 .cursorrules 文件中。
重要的是，如果你發現 Cursor 一直犯相同的錯誤，請檢查文檔，找出問題，並隨著錯誤的出現添加新的規則。
以下是我至今發現的有用規則：
- 從 SDK 導入 Wasp 函數時，確保使用 'wasp' 而不是 '@wasp'，例如
import { Task } from 'wasp/entities'，import { type GetTasks } from 'wasp/server/operations'，import { getTasks, useQuery } from 'wasp/client/operations' - 在
schema.prisma中添加新實體（即模型），而不是main.wasp文件 - 不要在
main.wasp文件中添加依賴項，而是指示通過npm install來安裝它們。 - 在創建 Wasp 操作（查詢和動作）時，將它們合併到特性目錄中的 operations.ts 文件中，而不是分開的 queries.ts 和 actions.ts 文件中
3. 為你的整個代碼庫建立索引
這是一個簡單的步驟。確保在你的 Cursor 設定中，你有選項來對代碼庫進行索引，因為這會讓 Cursor 更容易保持整個專案（加上文檔文件）的上下文，當你請求它為你做某事時。
在 顯示設定 下拉選單中，還有一個選項可以 預設索引新資料夾。確保這個選項已啟用，以便在 Cursor 創建新資料夾和功能時自動索引它們。
現在開始進行 SaaS 開發吧！
這就是全部內容。現在你沒有理由不去實現你一直想要的酷炫 SaaS 應用程式創意。
使用 Cursor、Open SaaS 和 Wasp 就像是 SaaS 應用程式開發的作弊碼，所以好好享受吧！
哦，順便說一下，如果你覺得這篇文章有用，我們希望你能在 GitHub 上給我們一顆星。
{% cta https://www.github.com/wasp-lang/wasp %} ⭐️ 在 GitHub 給 Wasp 點星 🙏 {% endcta %}
這是支持我們這樣的開源計畫的最簡單方式。
原文出處：https://dev.to/wasp/using-cursor-claude-to-make-full-stack-saas-apps-2aj3
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式