Google AI Studio でフルスタック アプリを開発する

Google AI Studio がフルスタック開発に対応し、クライアントサイドのプロトタイプにとどまらないアプリケーションを構築できるようになりました。サーバーサイド ランタイムを使用すると、シークレットの管理、外部 API への接続、リアルタイムのマルチプレーヤー エクスペリエンスの構築が可能になります。

サーバーサイド ランタイム

Google AI Studio アプリケーションにサーバーサイド コンポーネント(Node.js)を含めることができるようになりました。 この機能には次のような利点があります。

  • サーバーサイド ロジックの実行: クライアントに公開すべきでないコードを実行します。
  • npm パッケージへのアクセス: Antigravity Agent は、広範な npm エコシステムのパッケージをインストールして使用できます。
  • シークレットの処理: API キーと認証情報を安全に使用します。

npm パッケージを使用する

npm install を手動で実行する必要はありません。パッケージを必要とする機能を追加するようエージェントに指示するだけで、インストールとインポートを処理してくれます。

: > 「axios を使用して外部 API からデータを取得する」

シークレットを安全に管理する

サーバーサイド コードとシークレット管理により、世界とやり取りするアプリを構築できるようになりました。

  • サードパーティ API: Stripe、SendGrid、カスタム REST API などのサービスに接続します。
  • データベース: 外部データベース(Supabase、Firebase、 MongoDB Atlas など)に接続して、セッションを超えてデータを保持します。

実際のアプリを構築する場合、API キーを必要とするサードパーティ サービス(Twilio、Slack、データベースなど)に接続する必要があることがよくあります。次の手順でキーを手動で追加できます。

  1. シークレットを追加する: Google AI Studio の [設定] メニューに移動し、 [Secrets] セクションを探します。
  2. キーを保存する: API キーまたはシークレット トークンをここに追加します。
  3. コードでアクセスする: エージェントは、これらの シークレットに安全にアクセスするサーバーサイド コード(通常は環境変数経由)を記述できます。これにより、シークレットが クライアントサイド ブラウザに公開されることはありません。

必要に応じて、エージェントはチャットにカードを表示し、新しい Secret が必要な場合や、プロジェクトの環境変数で新しいキーが検出された場合に、キーを追加するように求めます。

データベースと認証のための Firebase との統合

Google AI Studio では、Firebase との統合により、データベースや認証をアプリに簡単に追加できるようになりました。Antigravity Agent は、次のサービスを自動的にプロビジョニングして設定できます。

  • Firestore データベース: クライアントサイド開発とサーバーサイド開発のデータを保存、同期するための、柔軟でスケーラブルな NoSQL クラウド データベースです。
  • Firebase Authentication: ユーザーが [Google でログイン] フローを使用して アプリケーションに安全にログインできるようにします。

エージェントに「アプリにデータベースを追加する」または「Google ログインを設定する」と指示するだけで、必要な構成とコード生成を処理してくれます。

Firebase は無料で開始できます。割り当てを増やしたり、有料機能を使用したりする準備ができたら、有料アカウントにアップグレードできます。

OAuth を設定する

シークレット管理の主なユースケースの 1 つは、OAuth を設定して他のウェブサイトやアプリに接続することです。プロンプトに、OAuth 認証を必要とするサードパーティ アプリに接続する手順が含まれている場合、エージェントはそのアプリケーションの OAuth を設定する方法の手順を提供します。これらの手順には、OAuth アプリケーションを構成するために必要なコールバック URL が含まれます。 コールバック URL は、[設定] パネルの [Integrations] でも確認できます。

マルチプレーヤー エクスペリエンスを構築する

フルスタック ランタイムでは、リアルタイムのコラボレーション機能を使用できます。

  • リアルタイムの状態: エージェントに「ライブ チャット」、「共同ホワイトボード」、「マルチプレーヤー ゲーム」などの機能の構築を依頼できます。
  • セッションの同期: サーバーが状態を管理するため、複数のユーザー が同じアプリケーション インスタンスをリアルタイムで操作できます。

プロンプトの例: > 「プレーヤーが互いのカーソルを確認できるマルチプレーヤー ゲームにする」

マルチプレーヤー アプリをテストする際のヒント

アプリをデプロイする前に、次の 2 つの方法でマルチプレーヤー モードをテストできます。

  1. Google AI Studio のビルドモードでアプリを複数のタブで開きます。ビルドモードで開発する場合、アプリは開発コンテナにあります。アプリを複数のタブで開くと、アプリを使用している複数のプレーヤーをシミュレートできます。
  2. 右上の [共有] メニューを使用して、アプリを他のユーザーと共有します。次に、[共有] メニューの [Integrations] タブの [Shared URL] を使用して、アプリを共有したプレーヤーとアプリを使用します。

ベスト プラクティス

  • シークレットのセキュリティ: 機密性の高いキーには常に Secrets Manager を使用します。 ファイルにハードコードしないでください。
  • 関心の分離: UI ロジックはクライアントサイド フレームワーク (React / Angular)に、ビジネス ロジックとデータ処理はサーバーサイドに保持します。
  • エラー処理: サーバーサイド コードで外部 API 呼び出しからのエラーを確実に処理し、アプリがクラッシュしないようにします。

次のステップ