Firebase & Supabase • المستوى الرابع • الدرس 4
العودة لفهرس المستوىالمشروع النهائي الشامل — Full Hybrid Backend Integration
أهداف المشروع النهائي
- دمج Firebase (Auth + Firestore + Functions + FCM + Storage) في تطبيق واحد.
- دمج Supabase (Postgres + Storage) كطبقة تحليلات وبيانات علائقية.
- بناء نظام تجارة إلكترونية كامل مع إشعارات ورفع صور وتقارير.
- تطبيق أنماط معمارية إنتاجية (Hybrid Backend).
1. لماذا Full Hybrid Backend؟
في الإنتاج الحقيقي، لا تعتمد على مزود واحد. كل مزود له نقاط قوة وضعف:
Firebase — نقاط القوة
- • Auth بسيط وقوي
- • Realtime ممتاز (Firestore)
- • Cloud Functions
- • FCM (إشعارات)
- • Storage سريع
Supabase — نقاط القوة
- • SQL كامل (Postgres)
- • استعلامات معقدة (JOINs)
- • تحليلات (pg_stat)
- • Edge Functions (Deno)
- • مفتوح المصدر
استراتيجية الدمج
- • Firebase: المصادقة + المزامنة الفورية + الإشعارات
- • Supabase: التحليلات + التقارير المعقدة + البيانات العلائقية
- • Firestore → Supabase: نسخ غير متزامن (async)
- • Supabase ← Firebase: قراءة فقط للتقارير
2. البنية المعمارية الشاملة
javascript
// البنية الكاملة
┌─────────────────────────────────────────────┐
│ React / Next.js App │
└─────────────────────────────────────────────┘
│
┌────────────┴────────────┐
▼ ▼
┌─────────────┐ ┌─────────────┐
│ Firebase │ │ Supabase │
│ (Frontend) │ │ (Analytics) │
└─────────────┘ └─────────────┘
│ │
┌───┼───┬───────┐ │
▼ ▼ ▼ ▼ ▼
┌────┐┌────┐┌────┐┌────┐ ┌──────────┐
│Auth││Fire││Func││FCM │ │Postgres │
│ ││store││tions││ │ │+ Storage │
└────┘└────┘└────┘└────┘ └──────────┘
│ │ │ │ │
└─────┴─────┴─────┴────────────┘
│
┌─────────┴─────────┐
▼ ▼
┌─────────┐ ┌──────────┐
│ Cloud │ │ Real-time│
│ Sync │ │ Reports │
└─────────┘ └──────────┘3. سيناريوهات التطبيق
سيناريو 1: الطلبات
Firestore (فوري) + Supabase (تحليلات).
- • Order created في Firestore
- • Mirror في Supabase
- • تقارير على Supabase
سيناريو 2: الصور
Firebase Storage + تحديث Supabase.
- • رفع إلى Firebase Storage
- • getDownloadURL
- • حفظ الرابط في Supabase
سيناريو 3: الإشعارات
FCM + Cloud Functions.
- • حفظ FCM Token
- • Cloud Function يُرسل
- • الإشعار يصل للمستخدم
سيناريو 4: التأكيد
Cloud Function + Supabase.
- • httpsCallable
- • تحقق من الصلاحية
- • تحديث الحالة
4. أفضل ممارسات الدمج
افعل
- • مزامنة غير متزامنة (async)
- • تعامل مع الأخطاء بـ try/catch
- • Idempotency (تجنب التكرار)
- • استخدم Firebase ID في Supabase
- • RLS في Supabase دائماً
تجنّب
- • الاعتماد على كلا المصدرين للقراءة
- • حفظ بيانات المستخدم في مكانين
- • مزامنة متزامنة (تؤخر الاستجابة)
- • نسيان فهرسة Supabase
5. ملخص مكونات المشروع النهائي
| المكون | الخدمة | الغرض |
|---|---|---|
| المصادقة | Firebase Auth | تسجيل الدخول/الخروج |
| الطلبات (Realtime) | Firestore | تخزين فوري |
| التقارير | Supabase Postgres | تحليلات معقدة |
| الصور | Firebase Storage | رفع/تنزيل |
| الإشعارات | Firebase FCM | Push notifications |
| الخادم | Cloud Functions | منطق خادمي |
التحدي النهائي
تحدي إتمام المسار: Full Hybrid Backend
- أضف دالة
placeOrder(userId, cartItems)تحفظ في Firestore و Supabase. - أضف دالة
uploadProductImage(file, productId)ترفع إلى Storage وتحدّث Supabase. - أضف دالة
registerForNotifications(userId, vapidKey)تحفظ FCM Token. - أضف دالة
confirmOrder(orderId)تستدعي Cloud Function. - أضف دالة
generateSalesReport()تحلل البيانات من Supabase. - أضف اختباراً تلقائياً شاملاً.
⏳ جارٍ التحميل...