このクイックスタートでは、AI コーディング ツールで Firebase SQL Connect を使用して、フルスタックのリレーショナル アプリケーションを迅速に構築する方法について説明します。エージェントに Firebase エージェント スキルを装備すると、ボイラープレート データベース コードを記述したり、エンドポイントを手動で構成したりする必要がなくなります。ローカル プロジェクトを設定し、AI アシスタントを構成して、単一のプロンプトを使用して安全な PostgreSQL スキーマ、GraphQL オペレーション、完全な React フロントエンドを生成する方法を学習します。ここで学習した内容を使用して、Firebase SQL Connect がサポートする任意のプラットフォームのフロントエンドを構築できます。
始める前に
このクイックスタートを完了するには、環境が次のように設定されていることを確認してください。特定のオペレーティング システムの手順については、標準設定ガイドをご覧ください。
- Node.js: Node.js をインストールして、Firebase CLI を実行し、生成された React フロントエンドを強化します。
Firebase CLI: Firebase CLI をグローバルにインストールします。
npm install -g firebase-toolsAI コーディング ツール: 最新の AI 搭載エディタ（Antigravity、Android Studio、Cursor、Windsurf など）をインストールします。
ワークスペースを設定する
まず、お好みの AI コーディング ツールを開き、新しいプロジェクト ディレクトリを作成します。ツールの統合ターミナルを開き、初期化コマンドを実行します。
firebase init dataconnect
このコマンドは、プロジェクトの初期化をガイドします。プロンプトが表示されたら、次のオプションを選択します。
- 新しい Firebase プロジェクトを作成
- Gemini スキーマの生成をスキップする
- 新しい Cloud SQL インスタンスを作成する
- React テンプレートを作成する
- [Yes] を選択して、Firebase 用のエージェント スキルをインストールします。
AI を使用してアプリを生成する
Firebase エージェント スキルをインストールすると、AI アシスタントは高度なプロンプトから SQL Connect スキーマ、オペレーション、フロントエンド コードを直接生成できます。
次のいずれかのプロンプトを AI アシスタントにコピーして貼り付け、バックエンド、データベースの関係、React フロントエンドを生成します。
例 1: 映画レビュー アプリ
Prompt:
Build a movie review website using Firebase SQL Connect. Customers can browse
a catalog of movies presented in a modern card layout displaying average
ratings and review counts, and leave a review from 1 to 5 stars. A user must
only be allowed to leave a single review per movie. Build a styled React
(Vite) frontend that displays the catalog and dynamically renders a live feed
of new reviews. Compile the database backend and React frontend, seed the
database with sample data, and verify that the application builds cleanly and
all core user flows run successfully.
例 2: e コマースのストアフロント
Prompt:
Build an online storefront using Firebase SQL Connect. Customers can browse
product cards showing prices and stock levels, manage a shopping cart, and
check out securely. The checkout transaction must atomically verify that
their cart is not empty, check that products are in stock, create the order,
and decrease the product stock, safely rolling back if any step fails.
Build a highly responsive React (Vite) storefront with a polished checkout
process. Compile the database backend and React frontend, seed the database
with sample data, and verify that the application builds cleanly and all
core user flows run successfully.
例 3: 複数著者のブログ
Prompt:
Create a multi-author blog platform using Firebase SQL Connect. The homepage
should display published articles formatted in an elegant typographic layout
with comfortable reading line lengths and serif headings. Users should have
access to a secure split-pane writing dashboard built using React (Vite) to
compose posts with a live preview. Compile the database backend and React
frontend, seed the database with sample data, and verify that the
application builds cleanly and all core user flows run successfully.
AI アシスタントが作成するもの
これらのプロンプトを実行すると、AI アシスタントが技術的な複雑な作業を自動的に処理します。
- データベース スキーマ（
dataconnect/schema/schema.gql）:@tableディレクティブを使用して要件をリレーショナル テーブルに変換し、外部キーと主キーを自動的に管理します。 - GraphQL オペレーション（
dataconnect/[connector_name]/*.gql）:@authディレクティブで保護された、アプリに必要なクエリとミューテーションを正確に生成します。 - 生成された SDK（
src/dataconnect/）: Firebase CLI を使用して、スキーマとオペレーションに基づいて厳密に型指定されたクライアント SDK を即座に生成します。 - React フロントエンド（
src/）: 生成された SDK を使用して新しいバックエンドと通信する、完全にワイヤリングされた美しいスタイルの React アプリケーションを構築します。
本番環境にデプロイする
スキーマ、クエリ、ミューテーションを本番環境にデプロイするには、ターミナルで次のコマンドを実行します。
firebase deploy --only dataconnect
デプロイ後、Firebase コンソールにアクセスしてライブ スキーマを表示し、Cloud SQL インスタンスに対して直接オペレーションを実行します。
次のステップ
クイックスタートが完了したので、次のステップに進みましょう。
- クイックスタート アプリ リポジトリを調べて、Codelab に沿って SQL Connect アプリを構築します。
- データベースにデータを追加し、Firebase コンソールで SQL Connect サービスをモニタリングします。
- スキーマ、クエリ、ミューテーションの開発についてご確認ください。
- クライアント SDK と Admin SDK の詳細をご確認ください。