カーソルを使用してバックエンドを構築する方法？

現代のウェブおよびモバイルプロジェクトは、アイデアを生産準備が整ったバックエンドに変えるという最初のハードルでしばしば停滞します。 データモデルを手動で設計し、ボイラープレートのcrudロジックを書き、インフラを展開し、フロントエンドを同期させることは、貴重なエンジニアリング時間を数日または数週間消費する可能性があります。 このチュートリアルでは、back4appのバックエンドプラットフォーム、model context platform (mcp) プロトコル、およびcursorのai支援ideがどのようにその摩擦を排除するかを示します。 シンプルなイベント管理アプリの作成を通じて、これらのツールがどのようにして完全に機能するバックエンドと対応するフロントエンドをスキャフォールディング、展開、統合できるかを確認できます。 主なポイント cursorのaiエージェントとmcpプロトコルを使用して、数分でback4app上に生産準備が整ったバックエンドをスキャフォールディングする方法を発見します。 主催者と参加者のワークフローをきれいに分離する再利用可能なvalidateuserroleヘルパーを使用して、クリーンな役割ベースのアクセス制御を強制する方法についての洞察を得ます。 back4appのrest apiを自動的に利用するレスポンシブなnext jsフロントエンドを生成し、配線する方法を学びます。 back4appコンテナを使用して、githubからフルスタックのイベントマネージャーアプリを記録的な時間で展開するためのコンテナ化とワンクリック展開を探ります。 プロジェクト概要 このチュートリアルでは、ユーザーがイベントを作成し、興味のあるイベントに登録し、今後のイベントや登録済みのイベントを表示し、必要に応じて登録をキャンセルできるシンプルな イベントマネージャーアプリ を構築します。 このアプリのバックエンドは、back4appのmcpツールを使用して構築します。mcpツールは、 大規模言語モデル（llms） https //en wikipedia org/wiki/large language model のようなclaude 4ソネットや、cursorのようなaiエージェント/ツールとシームレスにバックエンドと対話できるようにします。 mcpを使用すると、aiコードアシスタントはアプリを作成し、データベースを管理（crud操作、クエリ）、クラウドコードをデプロイし、ユーザー認証を処理するなど、back4appプロジェクトでさまざまなことができます。 このチュートリアルでは、 cursor を使用します。これは、大規模言語モデルを統合したai駆動のコードエディタで、開発環境内でコードを書く、リファクタリングする、理解するのを助けます。 cursorとmcpを使用すると、自然言語を使ってバックエンドアクションを促すことができ、開発プロセスがより迅速で直感的になります。 プロジェクトのセットアップ このチュートリアルで達成することについてより良い理解を得たので、cursorとmcpを使用してバックエンドを構築するためのプロジェクト要件を設定してください。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウント。まだお持ちでない場合は、 無料でサインアップできます https //www back4app com/signup 。 cursor https //www cursor com/ が開発マシンにインストールされていること。 バックエンド開発の基本的な概念に慣れていること。 node js v22以上。 ステップ1 back4appプロジェクトを作成する 最初のステップは、back4appアカウントにサインインし、「 eventmanager。 ステップ2 アカウントキーを作成する cursor内でmcpを設定し、mcpサーバーにback4appアカウントへのアクセスを許可するために、back4appアカウントキーを生成する必要があります。 アカウントキー設定に移動します。そこにいるとき、アカウントキーに名前を付け、「 + 」ボタンをクリックして生成します。 生成されたアカウントキーとその有効期限が表示されるはずです。 ステップ3 cursor内でmcpを設定する このビデオを見て、cursorとback4appを接続する方法を学びましょう。 cursorアプリを開き、「 設定 > cursor設定 > mcp、 」に移動すると、cursor aiでmcpサーバーを設定するページが見つかります。 「 新しいグローバルmcpサーバーを追加 」ボタンをクリックして、 mcp json ファイルを作成します。このファイル内にmcpの設定を書き込みます。 cursorでback4app mcpサーバーを構成するには、次の構成を mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } 次に、ステップ3で生成した保存済みのback4appアカウントキーで \<account key> を置き換えます。 このチュートリアルをwindowsマシンで実行している場合は、 command キーの値を npx cmd に変更します。これらの構成が整ったら、back4app mcpとcursorを使用してback4appバックエンドの構築を開始する準備が整いました。 cursorとback4appでバックエンドを構築する あなたのイベントマネージャーには次の機能があります； ユーザーは新しいイベントを作成できます ユーザーはイベントに登録できます ユーザーが登録しているイベントのリストを表示します ユーザーの今後のイベントのリストを表示します ユーザーはイベント登録をキャンセルできます これらの機能を満たすために、サンプルデータベーススキーマを以下に示します カーソルを開く チャット を切り替え、 aiパネル、 を選択して エージェント モードに進み、アプリを変更します。さらに、新しい claude 4 sonnet モデルなど、好みのllmを選択します。 チャットボックス内に、設計されたスキーマを生成するためのプロンプトを書きます。 これを達成するための例のプロンプトは design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships mcpのツールを使用するリクエストを承認する必要があります。承認されると、リクエストが実行されます。データベースが正常に作成されたという応答が得られるはずです。 新しく作成されたクラスを確認するには、アプリの dashboard をチェックしてください。 バックエンドを作成し、アプリケーションのデータベーステーブルを追加したので、アプリケーションロジックを実装します。 mcpを使用したユーザー機能の実装 アプリケーションの説明では、このアプリは異なるタイプのユーザーがイベントを作成したり、登録したりするなどの異なるタスクを実行できるようにする必要があります。ここでは、これらの機能を処理するために構築された関数を定義します。 アクセス制御の実装 アプリの主なユーティリティ関数は validateuserrole と呼ばれます。 この関数は、どの機能がどのユーザーロールに利用可能かを検証する役割を担っています。 次のプロンプトを使用してこの関数を作成できます \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error 進んで utils js が validateuserrole で作成されたことを確認してください。 ユーザー機能の作成 create user 機能を実装するには、 username , password , email, および role を渡す必要があります。誰でもこの関数を呼び出すことができます。 以下のプロンプトを使用してユーザー作成ロジックを実装します \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames 関数が正常に作成されたことを示す応答を受け取る必要があります。これで、あなたの イベントマネージャー のために新しいユーザーを作成できます。 イベント作成機能 「 オーガナイザー 」の役割は新しいイベントを作成できます。これを行うために、関数は新しいイベントオブジェクトを作成し、「 オーガナイザー 」の役割を持つユーザーが関数を呼び出していることを検証します。以前に作成したユーティリティ関数を使用してこの検証を行います。 以下のプロンプトを使用してこのロジックを実装します create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed 関数は main js ファイル内に作成されます。ダミーデータを使用してcursor内で簡単なテストを促し、公開されたback4app rest apiを呼び出すことができます。 イベント機能に登録する ユーザーがイベントに登録するには、 attendee の役割を持っている必要があります。この役割を持つすべてのユーザーは、3つの機能にアクセスできます。最初の機能は、作成されたイベントに登録することです。 この機能は、新しいregistrationオブジェクトを作成し、ユーザーの登録ブール値をtrueに設定します。 このロジックを実現するために、次のプロンプトまたは類似のものを入力してください generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message 次に、ユーザーが登録しているすべてのイベントをクエリするための関数が必要です。この関数を listupcomingevents と呼びます。 この関数を次のようなプロンプトで作成します create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found 関数が main js 内に正常に作成されたことを確認し、必要に応じて手動でまたはカーソルプロンプトを使用してコードを修正します。 このプロンプトでは、cursorのaiエージェントに関数のパラメータが指定されていないことに注意してください。これは、エージェントがデータベーススキーマを調べることによって関数が必要とするパラメータを推測する方法を示しています。 しかし、プロンプトには必要なだけのコンテキストを提供することが常に良い習慣です。 登録キャンセル機能 アプリの要件を満たす最後の機能は、登録キャンセル機能です。これを実装するために、関数は選択されたイベント登録の eventid と userid を取得し、そのブール値を更新します。 上記のロジックを、次のようなプロンプトを使用してバックエンドアプリケーションに追加します create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure cursorとmcpによって作成されたすべてのコードを確認し、必要に応じてあなたの app dashboard → cloud code , 下の画像に示すように修正できます。 これらの機能を使用して、あなたの event manager アプリケーションのバックエンドに対するすべての要件を満たしました。 cursorを使用してmcpでバックエンドのためのフロントエンドを構築する バックエンドが正常に構築され、デプロイされたので、アプリのフロントエンドuiをスキャフォールドします。このuiは、back4appのrest apiエンドポイントを使用してあなたのback4appバックエンドを消費します。 これを行うために、mcpはあなたのバックエンドスキーマメタデータを取得し、cursorはこのメタデータを使用してあなたのアプリケーションのuiを次のプロンプト仕様で構築します。 build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive このプロンプトは、単一のステップでnext jsフロントエンドをスキャフォールドすることを目的としています。cursorの生成に満足できない場合は、常にさらなる変更を促すことができます。 parseが正しく初期化されていることを確認してください。 アプリケーションid と javascriptキー がcursorがこれを処理できない場合に備えて必要です。これらの変数を使用すると、バックエンドアプリケーションにリクエストを送信できます。 上の画像は、cursorとback4appのmcpを使用して単一のコマンドで生成されたnext jsアプリケーションを示しています。 アプリケーションをデプロイする 最後に、back4appsのウェブホスティング機能を使用して、フルスタックアプリケーションをデプロイします。 next jsアプリケーションをデプロイするには、プロジェクトのルートディレクトリに dockerfile を作成し、以下のコードを貼り付けます \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] このdockerfileは以下のことを行います 公式のnode js 14ランタイムから始まります。 作業ディレクトリを /app に設定します。 dockerイメージに package json と package lock json をコピーし、依存関係をインストールします。 残りのアプリケーションコードをdockerイメージにコピーします。 next jsアプリケーションをビルドします。 アプリケーションのためにポート3000を公開します。 アプリケーションを起動するためのコマンドを定義します。 また、 dockerignore ファイルも必要です。プロジェクトのルートディレクトリに作成し、これらのコマンドを追加します \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore 次に、ターミナルで以下のコマンドを実行してdockerイメージをビルドし、テストします docker build t event manager frontend docker run p 3000 3000 event manager frontend ビルドしたdockerイメージは http //localhost 3000 にあります。アプリケーションが意図した通りに動作することを確認したら、コードをgithubリポジトリにプッシュし、back4appを通じてデプロイする時です。 back4appダッシュボードでevent managerアプリを開き、 webデプロイメント に移動します。 そこに到着したら、back4appにアカウントリポジトリを表示する権限を付与し、デプロイしたいフロントエンドアプリをプッシュしたリポジトリを選択します。 プロジェクトに名前を付け（例：event manager）、上の画像に表示されている “デプロイ” ボタンをクリックしてアプリケーションをデプロイします。 成功すると、デプロイメント準備完了メッセージが表示されます。デプロイ画面の下にあるback4appから提供されたリンクに移動することで、デプロイしたアプリケーションにウェブでアクセスできます。 おめでとうございます、back4appにアプリケーションを正常にデプロイしました。このチュートリアルで構築したevent managerプロジェクトには こちら https //eventmanager3 3jqdnkfk b4a run/ からアクセスできます。 結論 この記事では、ユーザーが主催者または参加者としてイベントを管理できるバックエンドイベント管理アプリを設計し、デプロイしました。 また、next jsを使用してアプリケーションのフロントエンドを構築し、cursorを利用して開発を加速しました。 cursorのai強化開発環境とback4appのmcpを組み合わせることで、開発時間を大幅に短縮し、back4appバックエンドの構築を容易にする強力な開発ワークフローが生まれます。 コーディングを楽しんでください！