هندسة هجينة : أفضل ما في العالمين مع 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 : ستريبا, APIs
orchestration --> db
jobs --> db

crud --> db
auth --> db

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

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

note right of logic
مُفعل فقط إذا لزم الأمر
Kotlin + الكروتنيات
المعاملات المعقدة
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 : تحسين\nاستمر
@enduml

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

left side

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

right side

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

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

database "PostgreSQL" as db #LightGray {
  package "Authenticate...\n\nSchema: auth (Supabase)" #LightGreen {
    [users]
    [sessions]
    [identities]
  }

  package "Schema: public (مشترك)" #SkyBlue {
    [articles]
    [comments]
    [profiles]
  }

  package "Schema: 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 Auth" 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 + Refresh Token
jbake -> jbake : احفظ الرموز (sessionStorage)

== Accès aux Ressources ==
group Opération Simple (CRUD)
  user -> jbake : أنشئ مقالة
  jbake -> db : POST مع JWT
  note right: Supabase Row Level Security\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 : استخراج claims (user_id, roles)
  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 "Spring Boot" as spring
participant "Supabase قاعدة البيانات" as supadb
participant "Stripe 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 : المخزون جيد
else
  spring -> db : التحقق من ملف العميل
  db -> spring : عميل مُتحقّق
end

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

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

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

spring -> db : تحديث الطلب (status: 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 "Scheduler\n(Spring Boot)" as scheduler
participant "Report Service" as report
participant "PostgreSQL" as db
participant "External API" as api
participant "Email Service" as email
participant "Supabase Storage" 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 : إنشاء الفواتير (Stripe)
report -> email : إرسال الفواتير
deactivate report

deactivate scheduler

note right of scheduler
غير ممكن مع Supabase فقط
Edge Functions غير مناسبة
للوظائف الطويلة والمتكررة
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: Job مجدول فقط
  }

  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"
مطلوب لـ :
• إدارة الاشتراكات
• الفوترة المتكررة
• الحصص الديناميكية
• التحليلات المعقدة
• Webhooks موثوقة
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 (بدون خادم)
• 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
مجانًا حتى 50 ألف مستخدم
صفر تكوين الخادم
    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