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 のビルドモードを使用して、自然言語を使用してフルスタック サービスのプロトタイプを迅速に作成する方法。
  • 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 ビルドモードで ToDo アプリを作成する

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

  1. [Google AI Studio Apps panel] に移動し、[New App] をクリックします。
  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. [Build] をクリックして、アプリケーションの生成プロセスを開始します。

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

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

4. テストを繰り返し行う

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

  1. Google AI Studio 内でプレビュー パネルを開きます。
  2. [ログイン] ボタンをクリックして、サンドボックスの Google ログイン認証をトリガーします。
    • エラーの修正に関する注意: 生成またはテスト中に、セキュリティ ルールの不一致が原因で、ランタイムの問題、コンパイル エラー、Firestore の権限エラーが発生することがあります。この場合、AI Studio のチャットに [Fix] ボタンが表示されます。このボタンをクリックすると、エージェントが問題を自動的に診断して修復します。
    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 の右上にある [Publish] ボタンをクリックして、デプロイ ウィザードを開始します。Google AI Studio の公開ボタンの場所
  2. [Get Started] をクリックして、Google Cloud プロジェクトを構成します。
    • ターゲットの [Google Cloud Project] プルダウンが、ワークスペースに関連付けたプロジェクトと一致していることを確認します。
    • AI Studio は、Cloud Run インスタンスの一意のサービス ID を自動的に生成します。
  3. 初めてデプロイする場合で、標準の Google Cloud パラメータを使用している場合は、組織タイプを指定して課金情報を入力するよう求められることがあります。
  4. [Publish App] をクリックします。
  5. コンテナのビルド、コンテナの登録、サービスのデプロイはバックグラウンドで行われます。通常、このプロセスは 2 ～ 4 分で完了します。
  6. デプロイが完了したら、生成されたアプリの URL をコピーし、ブラウザタブでライブ アプリケーションのリンクにアクセスします。
  7. ブラウザでライブ ウェブ アプリケーションをテストします。

6. Firebase コンソールで確認する

データスキーマとユーザーがどのように追跡されるかを確認します。

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

7. クリーンアップ

予期しない課金を回避したり、ワークスペース リソースをクリーンアップしたりするには:

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

8. まとめ

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

このリンクにアクセスして、Completed Builder Journey バッジを受け取ってください。

次のラボに進むには、goo.gle/builders にアクセスしてください。

詳細