الهندسة الهجينة: أفضل ما في العالمين مع Supabase و Spring Boot

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "هندسة تقليدية" {
  actor Utilisateur as user
  component "الواجهة الأمامية" as frontend #LightBlue
  component "خلفية أحادية" as backend #LightCoral {
    [Authentification]
    [CRUD]
    [Logique Métier]
    [Jobs]
    [APIs Tierces]
  }
  database "قاعدة بيانات" as db #LightGray

  user --> frontend
  frontend --> backend : جميع الطلبات
  backend --> db
}

note right of backend
كل شيء يمر عبر الواجهة الخلفية
حتى العمليات البسيطة
⚠️ نقطة الاختناق الوحيدة
⚠️ التعقيد منذ البداية
⚠️ الاقتران القوي
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "العمارة BaaS نقي" {
  actor Utilisateur as user
  component "الواجهة الأمامية" as frontend #LightBlue
  cloud "Supabase / Firebase" as baas #LightGreen {
    [Auth]
    [Database]
    [Storage]
    [Edge Functions]
  }

  user --> frontend
  frontend --> baas : جميع العمليات
}

note right of baas
تطوير سريع
لا خادم لإدارته
⚠️ محدود للمنطق المعقد
⚠️ قفل المورد
⚠️ قيود على وظائف الحافة
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Utilisateur as user #LightBlue

package "الطبقة الأمامية" {
  component "موقع ثابت JBake" as frontend #SkyBlue
}

package "طبقة بسيطة (Supabase)" #LightGreen {
  component "مصادقة" as auth
  component "CRUD أساسي" as crud
  component "تخزين الملفات" as storage
  component "الوقت الحقيقي" as realtime
}

package "طبقة الأعمال (Spring Boot)" #Coral {
  component "منطق معقد" as logic
  component "التنسيق" as orchestration
  component "المهام المجدولة" as jobs
  component "التكاملات" as integrations
}

database "PostgreSQL مشترك" as db #LightGray

user --> frontend

frontend --> auth : OAuth2, JWT
frontend --> crud : مقالات، ملفات
frontend --> storage : صور، ملفات
frontend --> realtime : إشعارات

frontend --> logic : حسابات، تقارير
frontend --> orchestration : عمليات
logic --> integrations : Stripe, APIs
orchestration --> db
jobs --> db

crud --> db
auth --> db

note bottom of db
مصدر واحد للحقيقة
مشتركة بين Supabase وSpring Boot
end note

note right of auth
مجانًا حتى 50k مستخدم
الإعداد في بضع نقرات
OAuth2 متعدد المزودين
end note

note right of logic
مفعَّل فقط إذا لزم الأمر
Kotlin + Coroutines
عمليات معقدة
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "**المرحلة 1 : MVP**" #LightGreen {
  component "JBake + Supabase" as mvp
  note right
✓ التطوير في الأيام
✓ التكلفة : 0€
✓ التحقق من المفهوم
  end note
}

rectangle "**المرحلة 2 : النمو**" #LightYellow {
  component "JBake + Supabase\n+ Spring Boot (اختياري)" as growth
  note right
✓ تظهر منطق الأعمال
✓ المهام الأولى المجدولة
✓ تكاملات طرف ثالث
  end note
}

rectangle "**المرحلة 3 : التوسيع**" #LightCoral {
  component "البنية الكاملة" as scale
  note right
✓ تنسيق معقد
✓ أداء محسن
✓ ذاكرة تخزين مؤقت موزعة
  end note
}

mvp -down-> growth : عندما يكون التعقيد\nالتعقيد يبرّره
growth -down-> scale : التحسين المستمر
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* عمليات\nالتطبيقية

left side

** عمليات بسيطة\n(Supabase)
***_ CRUD معيار
****_ محاضرة
****_ إنشاء
****تحديث
****حذف
***_ مصادقة
****_ تسجيل/Logout
****_ OAuth2
****_ إدارة الجلسة
***_ تخزين
****_ رفع الملفات
****_ CDN تلقائي
***_ الوقت الحقيقي
****_ WebSocket
****_ الإشعارات

right side

** عمليات معقدة\n(Spring Boot)
***_ منطق العمل
****_ الحسابات المعقدة
****_ قواعد العمل
****_ التحقق المتقدم
***_ التنسيق
****_ خدمات متعددة
****_ المعاملات الموزّعة
****_ أنماط ساغا
***_ المهام المجدولة
****_ تقارير دورية
****_ المزامنات
****عمليات التنظيف
***_ التكاملات
****_ المدفوعات (Stripe)
****_ APIs الأطراف الثالثة
****_ خدمات ML/AI

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

database "PostgreSQL" as db #LightGray {
  package "النموذج: auth (Supabase)" #LightGreen {
    [users]
    [sessions]
    [identities]
  }

  package "النموذج: public (مشارك)" #SkyBlue {
    [articles]
    [comments]
    [profiles]
  }

  package "النموذج: business (Spring Boot)" #Coral {
    [orders]
    [payments]
    [reports]
  }
}

component "Supabase" as supabase #LightGreen
component "Spring Boot" as spring #Coral

supabase -down-> users : يُدير
supabase -down-> sessions : يدير
supabase -down-> articles : الوصول
supabase -down-> comments : يصل
supabase -down-> profiles : الوصول

spring -down-> articles : ادخل
spring -down-> profiles : يصل
spring -down-> orders : يدير
spring -down-> payments : يدير
spring -down-> reports : إدارة

note right of db
**المزايا :**
• لا مزامنة معقدة
• JOINs ممكن بين الجداول
• اتساق مضمون
• ترحيلات موحدة
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "مستخدم" as user
participant "JBake" as jbake
participant "Supabase مصادقة" as auth
participant "Spring Boot" as spring
database "PostgreSQL" as db

== Authentification ==
user -> jbake : Clique "تسجيل الدخول"
jbake -> auth : إعادة توجيه OAuth2 (Google/GitHub)
auth -> user : شاشة الموافقة
user -> auth : يسمح
auth -> auth : ولّد JWT
auth -> jbake : ترجع JWT + رمز التحديث
jbake -> jbake : احفظ الرموز (sessionStorage)

== Accès aux Ressources ==
group Opération Simple (CRUD)
  user -> jbake : أنشئ مقالة
  jbake -> db : POST مع JWT
  note right: Supabase أمن مستوى الصف\nيتحقق من JWT تلقائيًا
  db -> jbake : تم إنشاء المقالة
end

group Opération Complexe (Métier)
  user -> jbake : أنشئ تقريرًا
  jbake -> spring : POST /api/reports\nمع JWT
  spring -> spring : تحقق JWT Supabase
  spring -> spring : استخراج المطالبات (user_id, الأدوار)
  spring -> db : استعلامات معقدة
  spring -> jbake : تم إنشاء التقرير
end

note over auth, spring
JWT هو عالمي
مُصدّق من Supabase و Spring Boot
لا توجد مصادقة double
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "عميل" as user
participant "JBake" as jbake
participant "سبرينغ بوت" as spring
participant "Supabase قاعدة بيانات" as supadb
participant "ستريب API" as stripe
participant "خدمة المخزون" as inventory
participant "خدمة البريد الإلكتروني" as email
database "PostgreSQL" as db

user -> jbake : ضع الطلب
jbake -> spring : POST /api/orders/create

== Orchestration Spring Boot ==
spring -> db : BEGIN TRANSACTION

par Vérifications Parallèles
  spring -> inventory : تحقق من المخزون
  inventory -> spring : مخزون OK
else
  spring -> db : تحقق من ملف العميل
  db -> spring : عميل تم التحقق منه
end

spring -> stripe : إنشاء Payment Intent
stripe -> spring : تم إنشاء النية (المعرّف: pi_xxx)

spring -> db : إنشاء طلب (الحالة: PENDING)
db -> spring : Order مُنشَأ

spring -> stripe : تأكيد الدفع
stripe -> spring : الدفع المؤكد

spring -> db : تحديث الطلب (الحالة: PAID)
spring -> inventory : تقليل المخزون
spring -> db : COMMIT TRANSACTION

par Notifications Asynchrones
  spring -> email : تأكيد البريد الإلكتروني
else
  spring -> supadb : إدراج إشعار
  note right: إشعار في الوقت الفعلي\nعبر Supabase في الوقت الفعلي
end

spring -> jbake : الطلب مؤكد
jbake -> user : عرض التأكيد

note over spring
• مسؤوليات Spring Boot :
• معاملة ACID
• تنسيق الخدمات المتعددة
• تراجع تلقائي إذا حدث خطأ
• إدارة الحالات الحدية
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

participant "المجدول\n(Spring Boot)" as scheduler
participant "خدمة التقرير" as report
participant "PostgreSQL" as db
participant "API خارجي" as api
participant "خدمة البريد الإلكتروني" as email
participant "تخزين Supabase" as storage

== Job Quotidien : 2h00 ==
activate scheduler
scheduler -> report : قم بإنشاء التقرير

activate report
report -> db : استرجع بيانات\nآخر 24 ساعة
db -> report : مجموعة بيانات

report -> report : الحسابات والتجميعات
report -> report : توليد PDF

report -> storage : تحميل PDF
storage -> report : URL publique

report -> email : أرسل إلى المشرفين\nمع الرابط PDF
deactivate report

== Job Hebdomadaire : الأحد 3h00 ==
scheduler -> report : المزامنة الخارجية

activate report
report -> api : جلب البيانات الخارجية
api -> report : بيانات جديدة

report -> db : تحديث الجداول
report -> db : تنظيف البيانات القديمة
deactivate report

== Job Mensuel : الأول من الشهر ==
scheduler -> report : الفوترة

activate report
report -> db : قائمة العملاء النشطين
report -> report : حساب المبالغ
report -> api : إنشاء الفواتير (سترايب)
report -> email : إرسال الفواتير
deactivate report

deactivate scheduler

note right of scheduler
مستحيل مع Supabase فقط
وظائف الحافة غير مناسبة
للمهام الطويلة والمتكررة
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

start

:Nouvelle fonctionnalité à implémenter;

if (CRUD simple ?) then (oui)
  :✅ **Supabase**;
  stop
else (non)
  if (Authentification ?) then (oui)
    :✅ **Supabase Auth**;
    stop
  else (non)
    if (Upload fichiers ?) then (oui)
      :✅ **Supabase Storage**;
      stop
    else (non)
      if (Temps réel ?) then (oui)
        :✅ **Supabase Realtime**;
        stop
      else (non)
        if (Row Level Security\nsuffisante ?) then (oui)
          :✅ **Supabase + Policies**;
          stop
        else (non)
          :⚠️ **Considérer Spring Boot**;
          #Coral:Passer à l'arbre\nde décision Spring Boot;
          stop
        endif
      endif
    endif
  endif
endif

@enduml

@startuml
skinparam backgroundColor #FEFEFE

start

:Nouvelle fonctionnalité complexe;

if (Orchestration\nmulti-services ?) then (oui)
  :✅ **Spring Boot**;
  stop
else (non)
  if (Transaction ACID\ncritique ?) then (oui)
    :✅ **Spring Boot**;
    stop
  else (non)
    if (Job planifié ?) then (oui)
      :✅ **Spring Boot Scheduler**;
      stop
    else (non)
      if (Intégration API\ntierce complexe ?) then (oui)
        :✅ **Spring Boot**;
        stop
      else (non)
        if (Calculs lourds\n> 10 secondes ?) then (oui)
          :✅ **Spring Boot**;
          stop
        else (non)
          if (Cache distribué\nnécessaire ?) then (oui)
            :✅ **Spring Boot + Redis**;
            stop
          else (non)
            :⚠️ **Probablement Supabase**;
            #LightGreen:Revenir à l'arbre\nde décision Supabase;
            stop
          endif
        endif
      endif
    endif
  endif
endif

@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "مدونة شخصية - 95% Supabase" {
  component "JBake" as jbake #SkyBlue

  package "Supabase (مجاناً)" #LightGreen {
    [Auth: OAuth2 Google]
    [Articles (CRUD)]
    [Commentaires]
    [Images (Storage)]
    [Notifications Realtime]
  }

  package "Spring Boot (اختياري)" #LightCoral {
    [Newsletter Mensuelle]
    note bottom: مهمة مجدولة فقط
  }

  database "PostgreSQL" as db

  jbake --> [Auth: OAuth2 جوجل]
  jbake --> [Articles (CRUD)]
  jbake --> [Commentaires]
  jbake --> [Images (Storage)]
  jbake --> [Notifications Realtime]

  [Articles (CRUD)] --> db
  [Commentaires] --> db
  [Newsletter Mensuelle] --> db
}

note bottom of "Spring Boot (اختياري)"
**Spring Boot غير إلزامي**
يمكن إدارة النشرة الإخبارية
من خلال خدمة طرفية (Mailchimp)
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "تطبيق SaaS - البنية الهجينة" {
  component "JBake / React" as frontend #SkyBlue

  package "Supabase" #LightGreen {
    [Auth Multi-tenant]
    [Profils Utilisateurs]
    [Données Simples]
    [Storage Documents]
  }

  package "Spring Boot" #Coral {
    [Facturation (Stripe)]
    [Analytics Avancées]
    [Rapports Mensuels]
    [Quotas & Limites]
    [Webhooks Stripe]
  }

  cloud "الخدمات الخارجية" {
    [Stripe API]
    [SendGrid Email]
  }

  database "PostgreSQL مشترك" as db

  frontend --> [Auth Multi-tenant]
  frontend --> [Profils Utilisateurs]
  frontend --> [Données Simples]
  frontend --> [Facturation (Stripe)]
  frontend --> [Analytics Avancées]

  [Auth Multi-tenant] --> db
  [Profils Utilisateurs] --> db
  [Données Simples] --> db

  [Facturation (Stripe)] --> db
  [Facturation (Stripe)] --> [Stripe API]
  [Analytics Avancées] --> db
  [Rapports Mensuels] --> db
  [Rapports Mensuels] --> [SendGrid Email]
  [Webhooks Stripe] ..> [Stripe API] : Écoute
}

note right of "Spring Boot"
• إدارة الاشتراكات
• الفوترة المتكررة
• الحصص الديناميكية
• التحليلات المعقدة
• هوكات ويب موثوقة
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "التجارة الإلكترونية - 70% Spring Boot" {
  component "واجهة المتجر (JBake/React)" as frontend #SkyBlue

  package "Supabase" #LightGreen {
    [Auth Clients]
    [Catalogue Produits\n(lecture seule)]
    [Images Produits]
  }

  package "Spring Boot (العمل الأساسي)" #Coral {
    [Gestion Commandes]
    [Paiements Stripe]
    [Gestion Stock]
    [Calcul Frais Port]
    [Génération Factures]
    [Synchronisation ERP]
    [Emails Transactionnels]
  }

  cloud "التكاملات" {
    [Stripe]
    [Transporteur API]
    [ERP Externe]
  }

  database "PostgreSQL" as db

  frontend --> [Auth Clients]
  frontend --> [Catalogue Produits\n(lecture seule)]
  frontend --> [Gestion Commandes]

  [Auth Clients] --> db
  [Catalogue Produits\n(lecture seule)] --> db

  [Gestion Commandes] --> db
  [Paiements Stripe] --> [Stripe]
  [Gestion Stock] --> db
  [Calcul Frais Port] --> [Transporteur API]
  [Génération Factures] --> db
  [Synchronisation ERP] --> [ERP Externe]
  [Synchronisation ERP] --> db
}

note right of "Spring Boot (العمل الأساسي)"
ضروري Spring Boot :
• معاملات حرجة
• تنظيم معقد
• تكامل متعدد
• الامتثال القانوني
• مهام المزامنة
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "التكاليف الشهرية المقدرة" {

  rectangle "مرحلة MVP\n(0-1000 users)" #LightGreen {
    [JBake (GitHub Pages): 0€]
    [Supabase: 0€]
    [Spring Boot: N/A]
    note bottom: **الإجمالي: 0€/mois**
  }

  rectangle "مرحلة النمو\n(1k-10k users)" #LightYellow {
    [JBake (GitHub Pages): 0€]
    [Supabase: 0€]
    [Spring Boot (Cloud Run): 20-50€]
    [PostgreSQL (si séparé): 0-30€]
    note bottom: **الإجمالي: 20-80€/mois**
  }

  rectangle "مرحلة التوسيع\n(10k-100k users)" #LightCoral {
    [JBake (Netlify Pro): 19€]
    [Supabase Pro: 25€]
    [Spring Boot (instances multiples): 100-300€]
    [Redis Cache: 20-50€]
    [Monitoring: 20€]
    note bottom: المجموع: 184-414€/mois
  }
}

note right of "مرحلة التوسيع\n(10k-100k users)"
في هذه المرحلة، تبرّر العائدات التكاليف على نطاق واسع
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "من يدير ما؟" {

  rectangle "يدار بواسطة Supabase (0 جهد)" #LightGreen {
    [Authentification]
    [Base de données]
    [Backups automatiques]
    [Scaling automatique]
    [Monitoring DB]
    [Sécurité DB]
  }

  rectangle "يدار بواسطة GitHub (0 جهد)" #SkyBlue {
    [Hébergement site statique]
    [HTTPS/SSL]
    [CDN global]
    [Déploiement automatique]
  }

  rectangle "لإدارة (Spring Boot)" #LightCoral {
    [Déploiement application]
    [Monitoring APM]
    [Logs centralisés]
    [Scaling horizontal]
    [Mises à jour sécurité]
  }
}

note bottom of "لإدارة (Spring Boot)"
قابل للتصغير :
• Cloud Run (serverless)
• Kubernetes (عند الحاجة)
• الخدمات المدارة (RDS, إلخ)
end note
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* معمارية\nهجينة

** ابدأ ببساطة
***_ MVP مع Supabase
***_ 0€ التكلفة الأولية
***التحقق السريع

** يتطور بذكاء
***_ أضف Spring Boot\n إذا لزم الأمر
***_ الهجرة التدريجية
***_ لا إعادة تصميم شاملة

** استغلال القوى
***_ Supabase: بساطة
***Spring Boot: القوة
***_ PostgreSQL: مصدر فريد

** تقليل التعقيد
***_ لا توجد مزامنة
***_ لا توجد نسخة
***_ هندسة معمارية واضحة

** تحسين التكاليف
***_ مجانًا من البداية
***_ التحجيم التدرجي
***_ ROI واضح

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

package "الهندسة المعمارية الهجينة الكاملة" {

  actor "المستخدمون" as users

  rectangle "الواجهة الأمامية (ثابتة)" #SkyBlue {
    [JBake / GitHub Pages]
    note right: مجاني, CDN العالمي
  }

  rectangle "الخلفية البسيطة (Supabase)" #LightGreen {
    [Auth OAuth2]
    [CRUD APIs]
    [Storage]
    [Realtime]
    note right
مجانًا حتى 50k مستخدم
صفر إعداد الخادم
    end note
  }

  rectangle "خلفية الأعمال (Spring Boot)" #Coral {
    [Orchestration]
    [Jobs Planifiés]
    [Intégrations]
    [Transactions]
    note right
مفعَّل فقط إذا لزم الأمر
    end note
  }

  database "PostgreSQL\nSource المصدر الوحيد للحقيقة" as db #LightGray

  users --> [JBake / GitHub Pages]

  [JBake / GitHub Pages] --> [Auth OAuth2]
  [JBake / GitHub Pages] --> [CRUD APIs]
  [JBake / GitHub Pages] --> [Storage]
  [JBake / GitHub Pages] --> [Realtime]
  [JBake / GitHub Pages] --> [Orchestration]

  [Auth OAuth2] --> db
  [CRUD APIs] --> db
  [Orchestration] --> db
  [Jobs Planifiés] --> db
  [Intégrations] --> db
}

note bottom of db
**قاعدة واحدة، مستهلكان**
• Supabase للبسيط
• Spring Boot للمُعقّد
• لا يتطلب أي تزامن
end note

@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "الهندسة الحالية" #SkyBlue {
  [JBake]
  [Supabase]
  [Spring Boot]
}

rectangle "التطورات المحتملة" #LightYellow {

  package "الأداء" {
    [Redis Cache]
    [CDN pour Assets]
    [PostgreSQL Replicas]
  }

  package "المراقبة" {
    [Grafana]
    [Prometheus]
    [Sentry]
  }

  package "CI/CD" {
    [GitHub Actions]
    [Tests Automatisés]
    [Déploiement Continu]
  }

  package "الميزات" {
    [Search (ElasticSearch)]
    [Queue (RabbitMQ)]
    [Event Sourcing]
  }
}

[Spring Boot] .down.> [Redis Cache] : Peut ajouter
[Spring Boot] .down.> [Queue (RabbitMQ)] : Peut ajouter
[Spring Boot] .down.> [Search (ElasticSearch)] : Peut ajouter

[Supabase] .down.> [PostgreSQL Replicas] : Peut ajouter

note bottom
**الهياكل القابلة للتوسيع**
كل إضافة مستقلة
لا يلزم إعادة تصميم شامل
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "توزيع العمليات" {

  rectangle "80% - عمليات قياسية" #LightGreen {
    [Lecture de données]
    [Création d'entités]
    [Mise à jour simple]
    [Suppression]
    [Upload fichiers]
    [Authentification]

    note bottom: يتم إدارته بواسطة Supabase
  }

  rectangle "20% - منطق الأعمال" #Coral {
    [Calculs complexes]
    [Workflows multi-étapes]
    [Transactions critiques]
    [Intégrations tierces]
    [Jobs planifiés]

    note bottom: مدار بواسطة Spring Boot
  }
}

note right
التركيز الأمثل:
وقت التطوير الخاص بك
مُركّز على الـ 20% التي
تميّز منتجك
end note
@enduml