Использование Cursor + Claude для создания полноценных SaaS-приложений

上周, я выпустил видеоурок, в котором я показал, как я использую Cursor и Claude 3.5, а также Open SaaS, чтобы создавать полностейные SaaS приложения.

Оригинальное видео было поделено влиятельным пользователем Rohan Paul и сейчас на нем насчитывается более 200 тысяч просмотров!

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
Полностейная typesafety
Админ-панель
Отправка电子邮件
Полная документация
Простая установка одним законом

Если вы хотите больше информации, посмотрите на домашнюю страницу Open SaaS.

템플릿 это отличный старт, поскольку он включает большое количество заготовки кода, кроме того, он основан на Wasp, полностюка React/NodeJS фреймворке с встроенными батарейками.

Usage of a central config file in Wasp means that you just have to define features in a few lines of code, and Wasp manages them for you, eliminating the need to write a bunch of boilerplate code for things like Auth, for example:

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

This means, when working with AI-assisted coding tools like Cursor and Claude, the AI has to do a lot less work. It writes code that’s a lot simpler and you get code that’s easier to debug!

Советы иtricks Cursor

When I work with Cursor, I notice that there are still some problems with the AI hallucinating or writing buggy code. I solved these issues in two ways:

Add the Wasp docs into Cursor’s context
Instruct Cursor on how to overcome common mistakes it makes in the Cursor Rules settings.
Make sure to Index your entire Codebase

1. Добавьте документацию Wasp в контекст Cursor

Преимущество использования Open SaaS и фреймворка Wasp заключается в том, что их основной код является свободным и открытым. К счастью, это также意味着 мы имеем доступ к исходным файлам документации, написанным на markdown, которые можно найти в соответствующих репозиториях GitHub.

Так что я скопирую markdown-файлы документации Wasp в свой собственный каталог в корне проекта, с которым я работаю. Затем я могу ссылаться на документацию всякий раз, когда у меня есть вопросы или когда я пытаюсь внедрить новые функции.

Тогда, когда я использую интерфейс композера Cursor или чат, я могу использовать символ “@” и выбрать Folder -> Docs и написать такой запрос:

Используя @docs как руководство, помогите мне внедрить функциональность чата с помощью WebSocket-функций Wasp в мою программу. Дайте программе страницу чата…

2. Добавление правил Cursor, чтобы избегать обычных ошибок

Cursor и Claude прекрасно пишут код по всему проекту, но они могут все еще делать маленькие ошибки, такие как иллюзорные импорты или пропуск Wasp-функции, которая сделала бы внедрение быстрее.

Поэтому я люблю идентифицировать эти общие ошибки и добавлять их в раздел «Правила курсора» в настройках Cursor. Alternatively, you can add these rules to a .cursorrules file in the root of your project if you want them to remain project-specific.

Важно, чтобы, если вы обнаружите, что Cursor регулярно допускает те же ошибки, проверить документацию, найти проблему и добавить новый заголовок, как они появляются.

Вот правила, которые, по моему мнению, были полезны пока что:

При импорте функций Wasp из SDK убедитесь, что используется ‘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 внутри директории feature, а не в отдельных файлах queries.ts и actions.ts

3. Индексируйте всю базу кода

Это простой пункт. Убедитесь, что в настройках Cursor у вас есть опция для индексирования базы кода, поскольку это делает труднее для Cursor поддерживать все ваше проектирование (и документационные файлы) в контексте, когда вы просите его сделать что-то для вас.

Также есть опция Индексировать новые папки по умолчанию в выпадающем списке Показать настройки. Убедитесь, что эта опция включена, чтобы автоматически индексировать новые папки и функции, когда Cursor их создает

Теперь приступайте к разработке SaaS-приложений

И это все. Теперь у вас нет оправдывать, что вы не построили эту замечательную идею SaaS-приложения, которую у вас было намного лет.

Использование Cursor, вместе с Open SaaS и Wasp, является как бы “чейт-кодом” для разработки SaaS-приложений, поэтому веселитесь с ним!

Кстати, если вы найдете это полезным, нам очень нравится быть в GitHub с вашим звездочкой 🙏

Лучший способ поддержать open-source инициативы, такие как наша.

Спасибо и на следующий раз!