上周,我发布了一个视频教程,展示了如何使用 Cursor 和 Claude 3.5 以及Open SaaS制作全栈 SaaS 应用程序。
因此,由于这似乎是很多人感兴趣的话题,我想我会提供一些额外的信息和提示来配合视频,帮助您快速开始构建 SaaS 应用程序,并希望能帮助您赚取一些额外的现金!
利用 Open SaaS 和 Wasp
最重要的是,我使用Open SaaS(一个免费、开源、全栈的 React、NodeJS 和 Prisma SaaS 启动器)作为我的基础。
Open SaaS 附带一系列很酷的现成功能:
-
全栈认证
-
开放 AI API 应用程序示例
-
AWS S3 文件上传示例
-
Stripe 或 Lemon Squeezy 支付集成
-
全栈类型安全
-
管理仪表板
-
电子邮件发送
-
完整文档
-
简单的一键部署
如果您想了解更多信息,请查看Open SaaS 主页。
该模板不仅是一个很好的开始,因为它带有大量样板代码,而且它还建立在Wasp之上,Wasp 是一个包含电池的全栈 React / NodeJS 框架。
Wasp 使用中央配置文件意味着您只需用几行代码定义功能,Wasp 会为您管理它们,从而无需为 Auth 之类的功能编写一堆样板代码,例如:
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 的工作量会大大减少。它编写的代码会简单得多,您获得的代码也更容易调试!
光标提示和技巧
当我使用 Cursor 时,我注意到 AI 仍存在一些问题,比如产生幻觉或编写错误代码。我通过两种方式解决了这些问题:
-
将 Wasp 文档添加到 Cursor 的上下文中
-
指导 Cursor 如何克服在 Cursor 规则设置中常见的错误。
-
确保索引整个代码库
1. 将 Wasp 文档添加到 Cursor 的上下文中
使用 Open SaaS 和 Wasp 作为底层框架的好处是它们都是免费且开源的。幸运的是,这意味着我们还可以访问它们的原始文档文件,这些文件以 markdown 编写,可以在各自的 GitHub Repos 上找到。
因此,我要做的是将Wasp docs markdown 文件复制到我正在处理的项目的根目录中。这样,当我有问题或尝试实现新功能时,我就可以参考这些文档。
然后,当我使用 Cursor 的编写器或聊天界面时,我可以使用“@”符号并选择Folder -> Docs
并编写如下提示:
使用@docs作为指南,帮助我使用 Wasp 的 Websockets 功能在我的应用程序中实现聊天功能。为应用程序提供一个聊天页面...
2. 添加游标规则以避免常见错误
Cursor 和 Claude 非常擅长跨多个文件编写代码,但他们仍然会犯一些小错误,例如对导入产生幻觉,或者跳过可以加快实现速度的 Wasp 功能。
这就是为什么我喜欢识别这些常见错误并将它们添加到“光标设置”中的“光标规则”部分。或者,.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 和 action.ts 文件
3. 索引整个代码库 www.cqzlsb.com
这很简单。请确保在 Cursor 设置中,您可以选择索引代码库,因为这样当您要求 Cursor 为您执行某些操作时,它就可以更轻松地将整个项目(以及文档文件)保存在上下文中。
Index new folders by default
下拉菜单下还有一个选项Show settings
。确保启用此选项,以便在 Cursor 创建新文件夹和功能时自动索引它们
立即获取 SaaSin'
就是这样。现在你没有理由不去实现你一直以来的那个很酷的 SaaS 应用创意了。