ウィンドサーフィンでバックエンドを構築する方法？

windsurf ideは、アクティブなmcpサーバーを持つ外部ツールをmcpプロトコルを通じて統合することを可能にします。 これにより、プロンプトを使用してideを離れることなく、タスクを実行し、これらのソースからデータを読み取ることができます。 このチュートリアルでは、windsurf ideを通じてback4app mcpサーバーを使用して、アポイントメントスケジューラーのバックエンドとユーザーインターフェース（ui）を構築し、back4appコンテナにデプロイする方法を学びます。 主なポイント このチュートリアルで構築されたライブ個人経費トラッカーを、 このリンク を使用して表示できます。 windsurfとback4app mcpサーバーを使用して、back4app上でバックエンドを構築する方法を学びます。 back4app上でクラス間の関係がどのようにモデル化されているかを探ります。 back4appが組み込みクラスを使用して、認証と役割ベースの認可をどのように実装しているかを探ります。 back4appコンテナを使用して、数回のクリックでアプリをデプロイします。 前提条件 このチュートリアルを進めるには、以下が必要です back4appアカウント。まだお持ちでない場合は、 無料でサインアップできます 。 システムにwindsurf ideがインストールされていること。 バックエンド開発の基本的な概念に慣れていること。 プロジェクト概要 予約スケジューラー このチュートリアルでは、2つの役割をサポートする予約スケジューラーを構築します プロバイダー は提供するサービスを登録し、 クライアント はそれらのサービスを予約します。 プロバイダーは、各サービスを名前、期間、価格で定義します。クライアントは利用可能なサービスを閲覧し、日付と時間を選択して予約を確認します。 予約が完了すると、アポイントメントはプロバイダーとクライアントのダッシュボードの両方に表示され、必要に応じてステータスを更新またはキャンセルできます。 このプロジェクトには4つのクラスがあります user , role , appointment , と service userクラスとroleクラスはback4appの組み込みクラスの一部であり、認証とアクセス制御に使用されます。 serviceクラスは、各提供の詳細、名前、期間、価格を定義し、提供者が提供するものをリストし、クライアントが提供を閲覧できるようにします。 appointmentクラスは、クライアントと提供者を特定のサービスにリンクし、開始時間と終了時間のフィールドを追跡し、そのステータス（「保留中」、「確認済み」、「キャンセル」）を追跡し、オブジェクトレベルのaclを使用して、予約したクライアントとその提供者のみが各予約を読み取りまたは変更できるようにします。 スキーマを視覚化するのに役立つエンティティ関係図は次のとおりです これで、あなたが構築するものの大まかなアイデアが得られたので、次のセクションでは、windsurfを使用してback4app mcpサーバーを設定し、このセクションで説明したアプリを作成するプロンプトを書き始めます。 back4appとwindsurfの接続 以下のビデオを見て、windsurfをback4appに接続する方法のチュートリアルを確認してください。 windsurfにback4app mcpサーバーを接続するには、まずback4appアカウントキーが必要です。 それを取得するには、back4appアカウントにログインし、ユーザーダッシュボードでナビゲーションバーのドロップダウンをクリックして、 アカウントキー を選択します。 「 アカウントキー 」ページで、アカウントキーに名前を付け、生成されたキーをコピーして安全に保管します。 次に、windsurfを開き、cascadeアシスタントのハンマーアイコンをクリックします。これにより、設定ボタンのあるドロップダウンが開きますので、クリックします。 設定ボタンをクリックすると、プラグイン管理ページに移動します。 「生の設定を表示」ボタンをクリックし、以下の設定オブジェクトをファイルに貼り付けてください { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } \<account key>をあなたのアカウントキーに置き換え、ファイルを保存してwindsurfをリフレッシュしてください。このチュートリアルをwindowsマシンで実行している場合は、コマンドキーの値をnpx cmdに変更してください。 windsurfでバックエンドを作成する windsurfを使用して予約スケジューラのバックエンドを作成するには、まずcascadeアシスタントに新しいアプリを指定した名前で作成するように指示するプロンプトを与える必要があります。必要なデータベーステーブルも含めてください。 以下のプロンプトを使用して予約スケジューラを実現できます create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict このプロンプトは、windsurfに「appointment scheduler」バックエンドをスキャフォールドするよう指示し、serviceとappointmentという2つの新しいデータモデルを作成し、適切な関係とフィールドを持たせます。 また、同じプロバイダーの重複する予約を防ぐために、appointmentにサーバーサイドのbeforesaveフックを実装します。 windsurfは、タスクを達成しようとする際に行うすべてのリクエストを記録し、実行が完了すると、タスクの要約を提供します。 アプリとデータベースクラスが作成されたので、次にバックエンドの認証を実装できます。 バックエンドでの認証と認可の実装 このアプリでは、ユーザーが安全にログインでき、行うべきことだけを行えるようにする必要があります。 例えば、プロバイダーとしてサインアップしたユーザーのみがサービスをリストでき、サービスをリストしたプロバイダーのみがそのサービスを更新できるようにする必要があります。 このプロンプトを使用して、アポイントメントスケジューラーを実現できます update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation 上記のプロンプトは、windsurfにメール/パスワードのサインアップとログインを有効にし、「プロバイダー」と「クライアント」役割を定義して割り当て、クラスレベルの権限を強制してプロバイダーのみがサービスを管理し、認証されたユーザーがアポイントメントを処理できるようにし、アポイントメントに対してオブジェクトaclとbeforesaveフックを適用して、予約クライアントとプロバイダーのみにアクセスを許可し、彼らの役割を確認するよう指示します。 認証と役割ベースの認可が設定されたので、アプリが機能するために必要なcrudエンドポイントを実装できます。 サービスと予約のcrud機能の実装 アプリは、認証されたユーザーがサービス（プロバイダー）を作成し、すでに作成されたサービス（クライアント）に予約をすることを許可する必要があります。ユーザーは、サービスと予約を編集、削除、表示することもできる必要があります。 以下のプロンプトを使用して、予約スケジューラーを実現できます add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response このプロンプトは、windsurfに対して、サービスと予約クラスのcloud codeエンドポイントを生成し、認証と役割ベースのチェックを強制し、プロバイダーのみがサービスを管理でき、予約クライアントまたは割り当てられたプロバイダーのみが自分の予約を管理できるように、作成、読み取り、更新、削除操作を実装するよう指示します。 フロントエンドの生成 back4appでバックエンドを作成することで得られるwindsurfのコンテキストを活用して、アプリのスキーマと要件に合ったフロントエンドを作成するように依頼できます。 以下のプロンプトを使用して、予約スケジューラーを実現できます generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react 上記のプロンプトまたは類似のものを使用すると、windsurfはバックエンドのスキーマに合致したフロントエンドを生成し、それをバックエンドに接続します。プロジェクトファイルは次の場所に保存されます /\<user>/cascadeprojects/\<app name> cd アプリに移動し、readmeに記載された指示に従って実行し、必要な調整を行います。これで、プロジェクトは完成です。次のセクションでは、back4appコンテナにデプロイします。 back4appコンテナにアプリをデプロイする back4appコンテナを使用すると、dockerfileとgithubリポジトリを使ってアプリを簡単にデプロイできます。 back4appコンテナにアプリをデプロイするには、まずリポジトリにdockerfileを含める必要があります。以下のプロンプトを使用してclaudeに生成を依頼できます generate a docker file for the ui of my appointment scheduler または、以下に提供されたdockerfileを使用することもできます from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] dockerfileを追加してgithubにプッシュした後、back4appアプリダッシュボードに移動し、 ダッシュボード ドロップダウンをクリックし、 webデプロイメントプラットフォーム オプションを選択します。 デプロイメントページで、「webアプリをデプロイ」ボタンをクリックし、デプロイしたいリポジトリへのback4appのアクセスを許可します。 デプロイしたいアプリを選択し、デプロイメントの詳細を記入し、「 デプロイ 」ボタンをクリックします。 ボタンをクリックするとデプロイプロセスが開始され、完了後にアプリのライブurlが取得できます。 このチュートリアルで作成したライブ個人経費トラッカーを、 このリンク を使用して表示できます。 結論 この記事では、back4app mcpサーバーとwindsurfを使用してアポイントメントスケジューラーを構築し、back4appコンテナでデプロイしました。 これは、アイデアからローンチまでの最小限のオーバーヘッドで移行できるback4appのツールのフルスイートを示しています。 次のステップとして、カレンダーの同期、自動メールリマインダー、または予約トレンドの分析などの機能でプロジェクトを拡張できます。 これらのすべての強化は、同じback4appワークフローに自然にフィットします： windsurfを使用して新しいクラスやcloud functionsを設計および定義する beforesaveフックでそれらを保護する そして、back4appコンテナを通じて更新を展開する。 このアプローチにより、ユーザーを中断させることなくアプリに新しい機能を追加できます。