Xây dựng ứng dụng web đầy đủ + backend (Google AI Studio + Firebase)

Cấu hình ban đầu

Tạo dự án Firebase Đăng ký ứng dụng web Bật xác thực bằng email và mật khẩu Bật đăng nhập bằng Google Cập nhật tên người gửi trong mẫu email xác thực Sao chép cấu hình Firebase Web SDK

Yêu cầu để đăng nhập bằng Google

Đăng nhập bằng Google có thể chưa hoạt động cho đến khi ứng dụng được triển khai và tên miền thật được thêm vào Firebase Authorized Domains.

Hướng dẫn deploy

Xem hướng dẫn deploy

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

Kết nối Firebase Authentication

Kết nối dự án Google AI Studio với Firebase và bật đăng ký, đăng nhập, đăng xuất.

Kết nối Firebase Authentication

Kết nối ứng dụng web hiện có của tôi với Firebase bằng SDK này...

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

Cấu hình Firebase (firebaseConfig)

Dán đối tượng firebaseConfig của bạn vào đây

Triển khai xác minh email

Gửi email xác minh, ngăn đăng nhập tự động và chặn truy cập cho đến khi email được xác minh.

Triển khai xác minh email

Triển khai xác minh email chỉ bằng 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.

Cấu hình Firestore

Tạo cơ sở dữ liệu Firestore Chọn phiên bản Standard Chọn khu vực cho cơ sở dữ liệu Chọn chế độ Production Thêm và phát hành quy tắc bảo mật Firestore

Quy tắc bảo mật Firestore (tách biệt dữ liệu theo từng người dùng)

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; } } } }

Thêm các mục Firestore vào bảng điều khiển

Tạo các mục bảng điều khiển cho tệp, ghi chú và thành viên nhóm, sau đó kết nối chúng với Firestore.

Thêm các mục Firestore vào bảng điều khiển

Thêm các mục bảng điều khiển động để lưu và tải dữ liệu người dùng từ 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

Cấu hình Storage

Bật Firebase Storage Liên kết tài khoản thanh toán và nâng cấp lên gói Blaze Chọn vị trí lưu trữ Chọn chế độ Production Thêm và phát hành quy tắc bảo mật Firebase Storage

Cần bật thanh toán để sử dụng Storage. Chỉ phát sinh chi phí nếu mức sử dụng vượt quá giới hạn miễn phí đi kèm.

Quy tắc bảo mật Firebase Storage (tách biệt tệp theo từng người dùng)

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; } } }

Kết nối My Files với Firebase Storage

Kết nối My Files với Firebase Storage

Kết nối hệ thống tải tệp của ứng dụng với Firebase Storage, dùng thư mục bảo mật riêng cho từng người dùng.

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.

Kiểm tra giao diện người dùng động

Đăng nhập bằng tài khoản đã xác minh Xác nhận giao diện nhận diện đúng người dùng đang đăng nhập Kiểm tra bảng điều khiển tải dữ liệu Firestore của người dùng Xác nhận các tệp đã tải lên hiển thị chính xác

Thêm giới hạn tệp của gói miễn phí

Thêm giới hạn số tệp cho gói Free

Giới hạn số tệp mà người dùng miễn phí có thể tải lên và hiển thị thông báo nâng cấp khi đạt giới hạn.

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.

Kiểm tra giới hạn của gói miễn phí

Tải tệp lên cho đến khi đạt giới hạn miễn phí Xác nhận các lượt tải lên tiếp theo bị chặn Kiểm tra thông báo nâng cấp hiển thị chính xác

Sao chép đúng dự án Google AI Studio được dùng trong video và thêm vào tài khoản của bạn.

Dự án VaultFlow

Dự án Google AI Studio được dùng trong hướng dẫn

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

Cách sử dụng

Mở liên kết dự án ở trên. Đăng nhập tài khoản Google của bạn nếu cần. Nhấp “Copy” trong Google AI Studio. Dự án sẽ được thêm vào tài khoản của bạn và có thể chỉnh sửa hoàn toàn.

Lưu ý quan trọng

Sau khi sao chép dự án, hãy thay cấu hình Firebase có sẵn bằng cấu hình Firebase Web SDK của riêng bạn.