Cursor + Claudeを使用してフルスタックSaaSアプリを作成する

チュートリアル

先週、私はCursorとClaude 3.5を使用し、Open SaaSをフルスタックSaaSアプリを作成する方法を説明したビデオチュートリアルをリリースしました。

元のビデオは、影響者のRohan Paulにリポストされ、20万以上の視聴を集めました。

https://x.com/hot_town/status/1831679375269310890

多くの人が興味を持っているようですので、ビデオとともに詳細な情報やアドバイスを提供し、SaaSアプリの構築を速く始めることができるように、おそらくお金を稼ぐのを助けることができることを思いました。

最も重要なのは、私が基盤として使用しているOpen SaaSです。無料の開源のフルスタックReact、NodeJS、およびPrisma SaaSスターターです。

Open SaaSは、以下のような素晴らしい機能をオーバードラックしています。

  • フルスタック認証

  • Open AI APIアプリの例

  • AWS S3ファイルアップロードの例

  • StripeまたはLemon Squeezyの支払い統合

  • フルスタックの型安全

  • 管理者ダッシュボード

  • メール送信

  • 完全なドキュメント

  • 簡単な一つのコマンドでデプロイメント

もっと詳しく知るには、Open SaaS ホームページをご覧ください。

テンプレートが素晴らしい始めの手がかりになるだけでなく、大量のステータスコードを含んでいますが、Waspに基づいており、React/NodeJSのフルスタックフレームワークで batteries included です。

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: {...} }
  }
}

これは、AIアシスタントのコーディングツールとしてCursorやClaudeを使用する際に、AIがより少しの作业を行わないため、簡単なコードを書いたり、デバッグがより容易になります。

Cursorと工作时、AIが幻覚や不具合のあるコードを書く問題が依然として残っていることに気づいた。これらの問題を2つの方法で解決しました。

  1. WaspのドキュメントをCursorのコンテキストに追加する

  2. Cursor Rules設定でAIが常见するミスをどのように対処するか指示する

  3. コードベース全体をインデックス化してください

Open SaaSとWaspを基盤としたことの利点は、両者も同様に無料でオープンソースであることです。幸いなことに、それは私たちが彼らの原始的なドキュメントファイルにもアクセスできることを意味します。これらのファイルはMarkdownで書かれており、GitHubのリポジトリにあります。

私は、WaspのMarkdownドキュメントファイルを現在のプロジェクトのルートディレクトリ内の独自のディレクトリにコピーすることにします。そうすると、質問があるか新しい機能を実装しようとするたびに、ドキュメントを参照できます。

そして、Cursorのコンポーザーやチャットインターフェースを使用して、「@」記号を使い、Folder -> Docsを選択し、このようなプロンプトを書くことができます:

@docsを参考に、WaspのWebsockets機能をアプリにチャット機能として実装してください。アプリにチャットページを追加してください…

CursorとClaudeは複数のファイル間でコードを書くのに最適ですが、彼らはまだ小さなミスをしかけることがあります。たとえば、インポートを幻想したり、Waspの機能を使用することで実装が速くなるのを省略したりです。

だから私はこれらの一般的なミスを特定し、Cursorの設定のCursor Rulesセクションに追加するのが好きです。また、プロジェクト固有に保持したい場合は、.cursorrules ファイルにrootに追加してください。

重要なのは、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操作（クエリとアクション）を作成する際に、クエリ.tsとアクション.tsのファイルを個別に保持する代わりに、特徴ディレクトリ内のoperations.tsファイルに結合してください。

これは簡単なことです。Cursor設定において、コードベースを索引化するオプションを有効にしていることを確認してください。これにより、Cursorはあなたがそれに要求するたびに、プロジェクト全体（そしてドキュメントファイル）をコンテキストに含めることができます。

また、新しいフォルダーをデフォルトで索引化のオプションも設定を表示のドロップダウン内にあります。これを有効にして、新しいフォルダーと機能をCursorが作成するたびに自動的に索引化してください。

それはそれで終わりです。これで、あなたはずっと持っていた素晴らしいSaaSアプリのアイデアを実現する理由がなくなります。

Cursorを使用し、Open SaaSとWaspを使用することは、SaaSアプリ開発のチートコードのようなものですので、それを楽しんでください！

ただし、これが有用と感じた場合、GitHubにスターをいくつかいただけますよ 🙏

OSSのような私たちのプロジェクトをサポートする最も簡単な方法です。

ありがとうございます。次回にお会いしましょう！

Source:
https://wasp-lang.hashnode.dev/using-cursor-claude-to-make-full-stack-saas-apps