AI を活用した ToDo ウェブアプリをリリースする

1. はじめに

概要

AI を利用した構築は、今日からどこで始められますか？ほとんどの場合、簡単なクエリまたはプロトタイプから始まります。Google AI Studio には、Gemini モデルによるコード生成を使用してフルスタック ウェブ アプリケーションを設計、テスト、構築できる強力なビルドモード（「バイブ コーディング」とも呼ばれます）が用意されています。

この Codelab では、永続ストレージに Firestore データベースを使用し、ユーザー ログインに Firebase Authentication を使用する共同作業用 ToDo アプリケーションを構築します。AI Studio エージェントは、すべてのバックエンド サービスを構成し、フロントエンドとデータベースの操作コードを記述します。アプリが完成したら、ワンクリックで Cloud Run に直接デプロイします。

演習内容

  • Google AI Studio に、共同作業用の ToDo リスト ウェブ アプリケーションのプロトタイプを作成するよう指示します。
  • Firebase 統合を構成して有効にし、Firestore データベースをプロビジョニングして Google ログイン認証を設定します。
  • インタラクティブ プレビューのサンドボックスでアプリケーションをテストします。
  • Google AI Studio UI から Cloud Run にアプリケーションを直接デプロイします。

学習内容

  • Google AI Studio の Build モードを使用して、自然言語でフルスタック サービスを迅速にプロトタイピングする方法について説明します。
  • Google AI Studio が Firebase Firestore と Authentication の統合を自動的に構成する方法。
  • AI Studio アプリケーションを Cloud Run のサーバーレス コンテナとしてデプロイする方法。
  • Firebase コンソールでデータベース レコードとセキュリティ ステータスを検査する方法。

2. プロジェクトのセットアップ

AI Studio を起動する前に、アカウントのステータスと前提条件を確認してください。

Google アカウントとティア情報

  1. Google アカウントをまだお持ちでない場合は、Google アカウントを作成します。
    • ヒント: 可能であれば、このラボでは個人の Google アカウントを使用してください。グループ アカウント、企業アカウント、学校アカウントでは、試験運用版の機能やクラウド統合を無効にする Workspace ポリシーが適用されることがあります。
  2. デプロイの請求の詳細を確認します。
    • Google Cloud スターター ティア: 完全な Google Cloud 請求先アカウントを設定しなくても、選択したリージョンに最大 2 つのフルスタック アプリケーションを無料で公開できます。
    • 標準デプロイ: 既存の有料 Google Cloud プロジェクトに接続し、ストレージの上限、CPU リソース、API を拡張します。

3. AI Studio のビルドモードで To-Do アプリを作成する

アプリケーション シェルを作成し、AI コード アシスタントにセキュリティ レイヤと永続レイヤの構築を指示します。

  1. Google AI Studio アプリ パネルに移動し、[新しいアプリ] をクリックします。
  2. チャット プロンプト ボックスに、ToDo アプリの説明を入力します。
    Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.
  3. [ビルド] をクリックして、アプリケーション生成プロセスを開始します。

AI Studio エージェントがデータベース ストレージと安全なユーザー ログインの必要性を認識すると、自動化された Firebase 構成フローがトリガーされます。

  1. 約 1 分後に、ワークスペースに Firebase を有効にするための統合カードが表示されます。
  2. [Firebase を有効にする] ボタンをクリックして、利用規約を確認し、同意します。
  3. エージェントはバックグラウンド設定を実行します。仕組み:
    • Firestore データベース インスタンスがプロビジョニングされている。
    • Firebase Authentication が有効になり、Google ログインが有効になります。
    • サービス アカウント構成が確立されている（API 認証情報を含む src/lib/firebase.ts の作成など）。
    • デフォルトのセキュリティ境界（ユーザー分離ルール）を含む firestore.rules が追加されます。

4. テストとイテレーション

サービスを公開する前に、インタラクティブ プレビューで検証チェックを実行します。

  1. Google AI Studio 内でプレビュー パネルを開きます。
  2. [ログイン] ボタンをクリックして、サンドボックスの Google ログイン認証をトリガーします。
    • エラーの修正に関する注: 生成またはテスト中に、セキュリティ ルールの不整合が原因で、ランタイムの問題、コンパイル エラー、Firestore 権限の失敗が発生することがあります。この場合、AI Studio のチャットに [修正] ボタンが表示され、エージェントに問題を自動的に診断して修復するよう依頼できます。
    Google AI Studio の修正ボタンの場所
  3. ログインしたら、複数のタスク（「Cloud Run ドキュメントを確認する」、「Codelab を完了する」など）を追加します。
  4. 一部のタスクを完了として切り替え、1 つのタスクを削除して、クライアントサイドのハンドラとデータベースの状態が正しく更新されるようにします。
  5. スタイルや動作を変更する場合は、チャット ウィンドウでエージェントに指示します。次に例を示します。
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. エージェントがコードベースを更新するまで待ち、プレビュー ブラウザで更新を確認します。

5. Cloud Run にデプロイする

プロトタイプが完全に機能したら、Cloud Run に公開サービスとしてデプロイします。

  1. Google AI Studio の右上にある [公開] ボタンをクリックして、デプロイ ウィザードを開始します。Google AI Studio の公開ボタンの場所
  2. [開始] をクリックして、Google Cloud プロジェクトを構成します。
    • [Google Cloud プロジェクト] プルダウンが、ワークスペースに関連付けたプロジェクトと一致していることを確認します。
    • AI Studio は、Cloud Run インスタンスの一意のサービス ID を自動的に生成します。
  3. 初めてデプロイする場合で、標準の Google Cloud パラメータを使用している場合は、組織のタイプを指定して課金情報を入力するよう求められることがあります。
  4. [アプリを公開] をクリックします。
  5. コンテナのビルド、コンテナの登録、サービスのデプロイの手順はバックグラウンドで行われます。通常、このプロセスは 2 ～ 4 分で完了します。
  6. デプロイが完了したら、生成されたアプリの URL をコピーし、ブラウザタブでライブ アプリケーションのリンクにアクセスします。
  7. ブラウザでライブ ウェブ アプリケーションをテストする

6. Firebase コンソールで検査する

データスキーマとユーザーがどのように追跡されるかについて、内部構造を確認します。

  1. Firebase コンソールに移動します。
  2. プロジェクト（AI Studio ラベルまたは手動でバインドしたプロジェクト ID があるプロジェクト）を選択します。
  3. 左側のナビゲーション パネルで、[ビルド] > [Firestore データベース] を選択します。
    • アプリケーションで作成されたデータベース コレクションとドキュメントを表示します。
    • 各ドキュメントに、アクティブなユーザー認証情報と一致する所有者 ID があることを確認します。
  4. Firestore パネルの [セキュリティ] タブを選択して、読み取りと書き込みの権限を検証済みのドキュメント所有者に制限する自動生成されたセキュリティ ディレクティブを確認します。
  5. [セキュリティ] > [認証] に移動して、ログイン テスト中に作成されたアクティブなユーザー認証情報のリストを確認します。

7. クリーンアップ

予期しない課金が発生しないようにするか、ワークスペース リソースをクリーンアップするには:

  1. Google AI Studio で、[アプリ] ページに移動します。
  2. グリッドまたはリストでアプリケーションを見つけます。
  3. ゴミ箱アイコンをクリックして、アプリの状態を削除し、Cloud Run からサービスの公開を取り消します。
  4. 標準プロジェクトを使用してデプロイし、すべてのリソースを完全にシャットダウンする場合は、Google Cloud コンソールのプロジェクト設定に移動して、基盤となるプロジェクトを削除します。

8. まとめ

おめでとうございます！Google AI Studio から直接、共同作業用のフルスタック ウェブ アプリケーションを設計、開発、デプロイしました。

ビルダーラボを完了してバッジを獲得し、ジャーニーを続けるための別のラボを見つけるには、goo.gle/builders にアクセスしてください。

詳細