ابنِ تطبيق ويب كاملاً + Backend (Google AI Studio + Firebase)

الإعداد الأولي

أنشئ مشروع Firebase سجّل تطبيق الويب فعّل المصادقة بالبريد الإلكتروني وكلمة المرور فعّل تسجيل الدخول بحساب Google حدّث اسم المرسِل في قوالب بريد المصادقة انسخ إعدادات Firebase Web SDK

متطلبات تسجيل الدخول بحساب Google

قد لا يعمل تسجيل الدخول بحساب Google قبل نشر التطبيق وإضافة النطاق المباشر إلى Firebase Authorized Domains.

دليل النشر

شاهد دليل النشر

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

اربط Firebase Authentication

اربط مشروع Google AI Studio بـ Firebase وفعّل التسجيل وتسجيل الدخول والخروج.

اربط Firebase Authentication

اربط تطبيق الويب الحالي بـ Firebase باستخدام هذا الـ SDK...

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

اربط ملفاتي بـ Firebase Storage

اربط ملفاتي بـ 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 الخاص بك عند الحاجة. انقر على “Copy” داخل Google AI Studio. سيُضاف المشروع إلى حسابك ويصبح قابلاً للتعديل بالكامل.

ملاحظة مهمة

بعد نسخ المشروع، استبدل إعدادات Firebase المضمّنة بإعدادات Firebase Web SDK الخاصة بك.