本格的なWebアプリ＋バックエンドを作る（Google AI Studio＋Firebase）

初期設定

Firebase プロジェクトを作成する ウェブアプリを登録する メール／パスワード認証を有効にする Google ログインを有効にする 認証メールテンプレートの送信者名を更新する Firebase Web SDK の設定をコピーする

Google ログインの前提条件

アプリをデプロイし、公開ドメインを Firebase Authorized Domains に追加するまで、Google ログインは動作しない場合があります。

デプロイガイド

デプロイガイドを見る

https://youtu.be/HGs-4QjyjHQ?si=9fXzfJtkd3UNsqhQ

HostingerのWebアプリホスティングを用意する

Google AI StudioのプロジェクトをGitHubからデプロイし、今後の更新もつながった状態に保ちます。

USED IN TUTORIAL

Firebase Authenticationを連携する

Google AI Studio のプロジェクトを Firebase に接続し、新規登録・ログイン・ログアウトを有効にします。

Firebase Authenticationを連携する

この SDK を使って、既存のウェブアプリを Firebase に接続します...

Connect my existing web app to Firebase using this SDK: {{FIREBASE_CONFIG}} Requirements: - Use Firebase Authentication only - Do NOT use Firestore or Storage yet - Do NOT redesign the UI Authentication behavior: - Users can sign in using email and password - If credentials are incorrect, show: "Email or password is incorrect" - Users can sign up using email and password - If the email already exists, show: "User already exists. Please sign in" For now: - Authenticate users only - Do NOT save user profile data Flow: - On successful sign-in or sign-up, redirect to the dashboard - Add a logout button that signs the user out and returns to the auth screen

Firebaseの設定情報（firebaseConfig）

firebaseConfigオブジェクトをここに貼り付け

メール認証を実装する

確認メールを送信し、自動ログインを防ぎ、メールが認証されるまでアクセスをブロックします。

メール認証を実装する

Firebase Authentication のみを使ってメール認証を実装します...

Implement email verification using Firebase Authentication only. - When a user registers with email/password, do not sign them in automatically. - Send a verification email and show a verification screen with this message: “We have sent you a verification email to [user email]. Please verify it and log in.” - Include a Login button on the verification screen. - If a user logs in and their email is not verified, block access and show the same verification screen. - Do not use Firestore or any database — Firebase Authentication only.

Firestoreの設定

Firestore データベースを作成する Standard エディションを選択する データベースのリージョンを選択する Production モードを選択する Firestore のセキュリティルールを追加して公開する

Firestoreのセキュリティルール（ユーザーごとにデータを分離）

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // Root user document match /users/{userId} { allow read, write: if request.auth != null && request.auth.uid == userId; // Anything nested inside this user: // subcollections, documents, folders, files, unlimited levels match /{allPaths=**} { allow read, write: if request.auth != null && request.auth.uid == userId; } } } }

ダッシュボードにFirestoreのセクションを追加する

ファイル・メモ・チームメンバー用のダッシュボードセクションを作成し、Firestore に接続します。

ダッシュボードにFirestoreのセクションを追加する

ユーザーデータを Firestore に保存・読み込みする動的なダッシュボードセクションを追加します。

Enhance the current dashboard by adding 3 fully functional sections: 1) My Files 2) My Notes 3) Team Members IMPORTANT RULES: - Use Firebase Authentication + Firestore only. - Do NOT use browser prompts (window.prompt / alert). - Use clean in-app modals for all actions. - Each user sees ONLY their own data. - Keep the existing VaultFlow UI style (cards, spacing, buttons). ==================== DATA STRUCTURE ==================== Use Firestore under the authenticated user: users/{uid} - displayName - email - plan - createdAt users/{uid}/folders/{folderId} - name - createdAt users/{uid}/files/{fileId} - name - folderId (optional) - size - createdAt (Note: metadata only, no real uploads yet) users/{uid}/notes/{noteId} - title - content (optional) - createdAt users/{uid}/teamMembers/{memberId} - name - role (optional) - createdAt ==================== UI BEHAVIOR ==================== My Files - Buttons: "New Folder" and "Add File" - Show folders and files - Empty state + loading state My Notes - Button: "New Note" - Show notes as cards - Empty state + loading state Team Members - Button: "Add Member" - Show list of members - Empty state + loading state ==================== MODALS (NO BROWSER PROMPTS) ==================== - New Folder: input name → save to Firestore - Add File: name + optional folder + size → save - New Note: title + content → save - Add Member: name + role → save All modals: - Cancel / Create - Validation - Loading state - Update UI instantly after save ==================== SECURITY ==================== Add Firestore rules so: - Only the logged-in user can read/write their own data - request.auth.uid must match {uid} ==================== RESULT ==================== After refresh: - Data persists - Buttons work - Counts update - No browser dialogs - Dashboard feels like a real SaaS app

Storageの設定

Firebase Storage を有効にする 請求先アカウントをリンクして Blaze プランにアップグレードする ストレージのロケーションを選択する Production モードを選択する Firebase Storage のセキュリティルールを追加して公開する

Storage を有効にするには請求先の設定が必要です。料金が発生するのは、無料枠を超えて使用した場合のみです。

Firebase Storageのセキュリティルール（ユーザーごとにファイルを分離）

rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /user_uploads/{uid}/{allPaths=**} { allow read, write: if request.auth != null && request.auth.uid == uid; } } }

My FilesをFirebase Storageに連携する

My FilesをFirebase Storageに連携する

アプリのファイルアップロード機能を、ユーザーごとの安全なフォルダーで Firebase Storage に接続します。

Connect the existing “My Files” section to Firebase Storage + Firestore. CONTEXT - Firebase Auth + Firestore already work in this project. - Firebase Storage is enabled. - Storage rules allow only: /user_uploads/{uid}/{allPaths=**} for the logged-in user. GOAL Make these buttons fully functional: 1) Add File (upload) 2) Download 3) Delete And keep the current UI style (table, buttons, spacing). No redesign. IMPORTANT RULES - Use Firebase Authentication + Firestore + Firebase Storage only. - Do NOT use browser prompts (window.prompt/alert). - Use clean in-app modal for “Add File”. - Each user sees ONLY their own files. - Upload path MUST be: user_uploads/{uid}/{fileName} - Save metadata in Firestore under: users/{uid}/files/{fileId} UI BEHAVIOR A) Add File button - Open an in-app modal: “Upload File” - Inside modal: - File picker (click to choose file) using a hidden <input type="file"> - Optional: select folder (if folders exist) - Upload button - Show upload progress (percentage) + loading state - When upload finishes: - Save metadata doc to Firestore: users/{uid}/files/{fileId} with: - name (original file name) - storagePath (e.g. user_uploads/{uid}/{fileId}-{name}) - downloadURL - size - type (mimeType) - folderId (optional) - createdAt (serverTimestamp) - Update the UI immediately (add row in the table) B) Display files - In “My Files” table, show: - name - type - size - actions: Download + Delete - Use the Firestore list under users/{uid}/files ordered by createdAt desc. C) Download button - Use the stored downloadURL from Firestore - Open it safely in a new tab OR trigger download (but no alert). D) Delete button - Delete from Storage using storagePath - Then delete the Firestore document - Update UI instantly EDGE CASES - If user is not logged in, block access. - Handle errors with inline UI message in the modal (no alerts). - Prevent double uploads (disable button during upload). - If upload fails, show error message. DELIVERABLE - Implement the missing handlers, modal, and Storage/Firestore logic. - Keep current design. Do not refactor unrelated code.

動的なユーザーインターフェースを確認する

認証済みのアカウントでログインする インターフェースがログイン中のユーザーを認識していることを確認する ダッシュボードがそのユーザーの Firestore データを読み込むことを確認する アップロードしたファイルが正しく表示されることを確認する

無料プランのファイル上限を追加する

無料プランのファイル数上限を追加する

無料ユーザーがアップロードできるファイル数を制限し、上限に達したらアップグレードのメッセージを表示します。

Add a free-plan limit to this app: • Max files allowed: 5 • Count files under: users/{uid}/files • If file count >= 5: – Disable Add File – Show message: “You’ve reached the free plan limit.” – Add an Upgrade button that opens a simple modal (title: “Upgrade your plan”, text + Close button) No real payments. UI only. Keep current design. Apply logic only to the logged-in user.

無料プランの上限をテストする

無料上限に達するまでファイルをアップロードする それ以上のアップロードがブロックされることを確認する アップグレードのメッセージが正しく表示されることを確認する

動画で使用しているものと同じ Google AI Studio のプロジェクトをコピーして、自分のアカウントに追加します。

VaultFlowプロジェクト

チュートリアルで使用している Google AI Studio のプロジェクト

https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221P-lytf__6kOkQnOcczVdgIbnOWuRwNF0%22%5D,%22action%22:%22open%22,%22userId%22:%22112386544465239683494%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing

使い方

上のプロジェクトリンクを開きます。 必要に応じて Google アカウントにログインします。 Google AI Studio 内の「Copy」をクリックします。 プロジェクトがアカウントに追加され、自由に編集できるようになります。

重要な注意点

プロジェクトをコピーしたら、同梱の Firebase 設定を自分の Firebase Web SDK の設定に置き換えてください。