使用 Cursor + Claude 制作全栈 SaaS 应用

上周，我发布了一个视频教程，展示了如何使用Cursor和Claude 3.5，以及Open SaaS，來建造全栈SaaS應用程式。

原视频被影响者Rohan Paul轉發，现在浏览量已经超过20萬！

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支付集成
全栈类型安全
管理仪表板
邮件发送
完整文件
簡單，一命令部署

如果你想了解更多，請查看開源 SaaS 首頁。

不僅模板是一個很好的開始，因為它帶有一個大量的样板代碼，而且它還建立在Wasp上，一個带有全套功能的 React/NodeJS 框架。

Wasp 使用集中的配置文件意味著你只需要在幾行代碼中定義功能，Wasp 會為你管理它們，從而消除了寫一大堆样板代碼的需要，例如认证：

app todoApp {
  title: "ToDo App",  // visible in the browser tab
  auth: { // full-stack auth out-of-the-box
    userEntity: User, 
    methods: { google: {}, gitHub: {}, email: {...} }
  }
}

這意味著，當使用像 Cursor 和 Claude 這樣的 AI 相助程式設計工具時，AI 必須做的工作變少了。它寫的代碼更簡單，你得到的代碼也更易於 debug！

Cursor 技巧與窍門

當我與 Cursor 合作時，我發現 AI 仍然會有一些幻覺或写出有瑕疵的代碼的問題。我通過兩種方式解決了這些問題：

將 Wasp 文档加入到 Cursor 的上下文中
指示 Cursor 如何在 Cursor 規則設定中克服它常犯的常見錯誤。
請確保索引你的整個代碼庫

1. 將 Wasp 文檔加入 Cursor 的上下文

使用開源的 Open SaaS 和底層框架 Wasp 的好处是它們都是免费的。幸運的是，這意味著我們也可以訪問它們的原始文檔文件，這些文件是用 markdown 寫的，可以在它們各自的 GitHub 倉庫中找到。

所以我會將 Wasp 的 markdown 文档文件複製到正在處理的项目的根目錄中的一個獨立目錄中。然後我可以在有問題或者嘗試實現新功能時參考這些文档。

然後，當我使用 Cursor 的作曲器或聊天界面時，我可以用 “@” 符號並選擇 文件 -> 文档 並寫下像這樣的提示：

使用 @docs 作為指導，幫助我將 Wasp 的 WebSocket 功能實現到我的應用中。為應用創建一個聊天頁面…

2. 添加 Cursor 規則以避免常見錯誤

Cursor 和 Claude 很擅長在多個文件中寫代码，但它們仍然可能犯一些小錯誤，比如誤導導入，或者省略了一個會讓實現更快速的 Wasp 功能。

那是為什麼我喜歡識別這些常見錯誤，並將它們添加到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 更容易在您請求它為您做事情時，將您的整個項目（加上文件说明文件）保持在上下文中。

此外，在 `Show settings` 下拉列表中還有一個 `Index new folders by default` 的選項。確保此選項已啟用，以自動索引 Cursor 創建的新的文件庫和功能。

現在開始建构 SaaS 應用程序

就是这样。現在您沒有借口不去建造您永遠都有過的酷炫 SaaS 應用程序想法了。

使用 Cursor 以及 Open SaaS 和 Wasp 就像是 SaaS 應用程序開發的作弊碼，所以請盡情享用！

順便說一下，如果您發現這有用，我們很樂意在 GitHub 上得到一個星號 🙏

这是支持像我們這樣的開放源始碼計劃最容易的方式。

感謝您的支持，下次再見！