Kiến trúc lai ghép: Cái tốt nhất của cả hai thế giới với Supabase và Spring Boot

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Kiến trúc truyền thống" {
  actor Utilisateur as user
  component "Frontend" as frontend #LightBlue
  component "Backend đơn thể" as backend #LightCoral {
    [Authentification]
    [CRUD]
    [Logique Métier]
    [Jobs]
    [APIs Tierces]
  }
  database "Cơ sở dữ liệu" as db #LightGray

  user --> frontend
  frontend --> backend : Tất cả các yêu cầu
  backend --> db
}

note right of backend
Tất cả đều qua backend
Dù là các thao tác đơn giản
⚠️ Điểm tắc nghẽn duy nhất
⚠️ Phức tạp ngay từ đầu
⚠️ Liên kết mật
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "kiến trúc BaaS thuần túy" {
  actor Utilisateur as user
  component "Giao diện trước" as frontend #LightBlue
  cloud "Supabase / Firebase" as baas #LightGreen {
    [Auth]
    [Database]
    [Storage]
    [Edge Functions]
  }

  user --> frontend
  frontend --> baas : Tất cả các hoạt động
}

note right of baas
Phát triển nhanh
Không có máy chủ để quản lý
⚠️ Giới hạn cho logic phức tạp
⚠️ Khóa nhà cung cấp
⚠️ Ràng buộc Edge Functions
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Utilisateur as user #LightBlue

package "Lớp Frontend" {
  component "Trang tĩnh JBake" as frontend #SkyBlue
}

package "Lớp đơn giản (Supabase)" #LightGreen {
  component "Xác thực" as auth
  component "CRUD cơ bản" as crud
  component "Lưu trữ tệp" as storage
  component "Thời gian thực" as realtime
}

package "Lớp nghiệp vụ (Spring Boot)" #Coral {
  component "Logic phức tạp" as logic
  component "Điều phối" as orchestration
  component "Công việc đã lên lịch" as jobs
  component "Tích hợp" as integrations
}

database "PostgreSQL được chia sẻ" as db #LightGray

user --> frontend

frontend --> auth : OAuth2, JWT
frontend --> crud : Bài viết, Hồ sơ
frontend --> storage : Hình ảnh, Tập tin
frontend --> realtime : Thông báo

frontend --> logic : Tính toán, Báo cáo
frontend --> orchestration : Quy trình công việc
logic --> integrations : Stripe, APIs
orchestration --> db
jobs --> db

crud --> db
auth --> db

note bottom of db
**Một nguồn chân lý duy nhất**
Chia sẻ giữa Supabase và Spring Boot
end note

note right of auth
Miễn phí tới 50k người dùng
Cấu hình chỉ trong vài cú nhấp
OAuth2 đa nhà cung cấp
end note

note right of logic
Kích hoạt chỉ khi cần thiết
Kotlin + Coroutines
Giao dịch phức tạp
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "**Giai đoạn 1 : MVP**" #LightGreen {
  component "JBake + Supabase" as mvp
  note right
✓ Phát triển theo ngày
✓ Chi phí: 0€
✓ Xác thực khái niệm
  end note
}

rectangle "**Giai đoạn 2 : Tăng trưởng**" #LightYellow {
  component "JBake + Supabase\n+ Spring Boot (tuỳ chọn)" as growth
  note right
✓ Logic nghiệp vụ xuất hiện
✓ Các công việc đầu tiên được lên lịch
✓ Tích hợp bên thứ ba
  end note
}

rectangle "**Giai đoạn 3 : Quy mô**" #LightCoral {
  component "Kiến trúc hoàn chỉnh" as scale
  note right
✓ Điều phối phức tạp
✓ Hiệu suất được tối ưu
✓ Bộ nhớ cache phân tán
  end note
}

mvp -down-> growth : Khi độ phức tạp\nchứng minh điều đó
growth -down-> scale : tối ưu hóa\ntiếp tục
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Hoạt động\nÁp dụng

left side

** Hoạt động đơn giản\n(Supabase)
***_ CRUD Tiêu chuẩn
****_bài giảng
****_ Tạo
****Cập nhật
****_ Suppression
***_Xác thực_
****_ Đăng nhập/Logout
****_ OAuth2
****Quản lý phiên
***_ Lưu trữ
****_ Tải lên tập tin
****_ CDN tự động
***_ Thời gian thực
****_ WebSocket
****_ Thông báo

right side

** Các thao tác phức tạp\n(Spring Boot)
***logic nghiệp vụ
****_ Các tính toán phức tạp
****_ Quy tắc nghiệp vụ
****Xác thực nâng cao
***_ Điều phối
****_- đa-dịch vụ_
****_Giao dịch phân tán
****mẫu Saga
***_ Nhiệm vụ đã lên lịch
****_Báo cáo định kỳ
****_ Đồng bộ hoá
****Vệ sinh
***_ Tích hợp
****_ Thanh toán (Stripe)
****_ APIs các bên thứ ba
****_ Dịch vụ ML/AI

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

database "PostgreSQL" as db #LightGray {
  package "Schema: auth (Supabase)" #LightGreen {
    [users]
    [sessions]
    [identities]
  }

  package "Schema: public (Chia sẻ)" #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 : Gère
supabase -down-> sessions : Gère
supabase -down-> articles : Accède
supabase -down-> comments : Accède
supabase -down-> profiles : Accède

spring -down-> articles : Accède
spring -down-> profiles : Accède
spring -down-> orders : Gère
spring -down-> payments : Gère
spring -down-> reports : Gère

note right of db
**Ưu điểm:**
• Không cần đồng bộ hóa phức tạp
• Có thể JOIN giữa các bảng
• Đảm bảo tính nhất quán
• Di chuyển dữ liệu thống nhất
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Người dùng" as user
participant "JBake" as jbake
participant "Supabase Xác thực" as auth
participant "Spring Boot" as spring
database "PostgreSQL" as db

== Authentification ==
user -> jbake : Clique "Đăng nhập"
jbake -> auth : Chuyển hướng OAuth2 (Google/GitHub)
auth -> user : Màn hình đồng ý
user -> auth : Cho phép
auth -> auth : Tạo JWT
auth -> jbake : Trả về JWT + token làm mới
jbake -> jbake : Lưu trữ tokens (sessionStorage)

== Accès aux Ressources ==
group Opération Simple (CRUD)
  user -> jbake : Tạo một bài viết
  jbake -> db : POST với JWT
  note right: Supabase Row Level Security\nkiểm traJWT tự động
  db -> jbake : Bài viết đã được tạo
end

group Opération Complexe (Métier)
  user -> jbake : Tạo một báo cáo
  jbake -> spring : POST /api/reports\nvới JWT
  spring -> spring : Xác thực JWT Supabase
  spring -> spring : Trích xuất claims (user_id, roles)
  spring -> db : Câu truy vấn phức tạp
  spring -> jbake : Báo cáo đã được tạo
end

note over auth, spring
JWT là universal
Được xác thực bởi Supabase và Spring Boot
Không có xác thực double
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Client" as user
participant "JBake" as jbake
participant "Spring Boot" as spring
participant "Supabase DB" as supadb
participant "Stripe API" as stripe
participant "Inventory Service" as inventory
participant "Email Service" as email
database "PostgreSQL" as db

user -> jbake : Đặt hàng
jbake -> spring : POST /api/orders/create

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

par Vérifications Parallèles
  spring -> inventory : Kiểm tra tồn kho
  inventory -> spring : Tồn kho OK
else
  spring -> db : Kiểm tra hồ sơ khách hàng
  db -> spring : Khách hàng đã được xác thực
end

spring -> stripe : Tạo Payment Intent
stripe -> spring : Intent đã được tạo (ID: pi_xxx)

spring -> db : Tạo Order (status: PENDING)
db -> spring : Đơn hàng đã được tạo

spring -> stripe : Xác nhận thanh toán
stripe -> spring : Thanh toán đã được xác nhận

spring -> db : Update Order (trạng thái: PAID)
spring -> inventory : Giảm tồn kho
spring -> db : COMMIT TRANSACTION

par Notifications Asynchrones
  spring -> email : Xác nhận email
else
  spring -> supadb : Chèn thông báo
  note right: Thông báo thời gian thực\nvia Supabase Realtime
end

spring -> jbake : Đơn hàng đã được xác nhận
jbake -> user : Hiển thị xác nhận

note over spring
**Nhiệm vụ Spring Boot :**
• Giao dịch ACID
• Điều phối đa dịch vụ
• Rollback tự động nếu lỗi
• Xử lý các trường hợp biên
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

participant "Bộ lập lịch\n(Spring Boot)" as scheduler
participant "Dịch vụ báo cáo" as report
participant "PostgreSQL" as db
participant "Ngoại API" as api
participant "Dịch vụ email" as email
participant "Supabase Lưu trữ" as storage

== Job Quotidien : 2h00 ==
activate scheduler
scheduler -> report : Tạo báo cáo

activate report
report -> db : Lấy dữ liệu\ncủa 24 giờ qua
db -> report : bộ dữ liệu

report -> report : Tính toán & Tổng hợp
report -> report : Sinh ra PDF

report -> storage : Tải lên PDF
storage -> report : URL publique

report -> email : Gửi đến quản trị viên \n với liên kết PDF
deactivate report

== Job Hebdomadaire : Chủ Nhật 3:00 ==
scheduler -> report : Đồng bộ bên ngoài

activate report
report -> api : lấy dữ liệu bên ngoài
api -> report : Dữ liệu mới

report -> db : Cập nhật các bảng
report -> db : Dọn dẹp dữ liệu lỗi thời
deactivate report

== Job Mensuel : ngày đầu tiên của tháng ==
scheduler -> report : Hóa đơn

activate report
report -> db : Danh sách khách hàng hoạt động
report -> report : Tính toán các số tiền
report -> api : Tạo hóa đơn (Stripe)
report -> email : Gửi hóa đơn
deactivate report

deactivate scheduler

note right of scheduler
Không thể chỉ bằng Supabase
Edge Functions không phù hợp
cho công việc dài và lặp lại
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 "Blog Cá Nhân - 95% Supabase" {
  component "JBake" as jbake #SkyBlue

  package "Supabase (Miễn phí)" #LightGreen {
    [Auth: OAuth2 Google]
    [Articles (CRUD)]
    [Commentaires]
    [Images (Storage)]
    [Notifications Realtime]
  }

  package "Spring Boot (Tùy chọn)" #LightCoral {
    [Newsletter Mensuelle]
    note bottom: Chỉ lập lịch công việc
  }

  database "PostgreSQL" as db

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

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

note bottom of "Spring Boot (Tùy chọn)"
**Spring Boot không bắt buộc**
Newsletter có thể được quản lý
bởi một dịch vụ bên thứ ba (Mailchimp)
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Ứng dụng SaaS - Kiến trúc Hybrid" {
  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 "Dịch vụ Bên ngoài" {
    [Stripe API]
    [SendGrid Email]
  }

  database "PostgreSQL Chia sẻ" 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"
**Cần thiết cho:**
• Quản lý gói đăng ký
• Thanh toán định kỳ
• Định mức động
• Phân tích phức tạp
• Webhook đáng tin cậy
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Thương mại điện tử - 70% Spring Boot" {
  component "Storefront (JBake/React)" as frontend #SkyBlue

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

  package "Spring Boot (Nghiệp vụ cốt lõi)" #Coral {
    [Gestion Commandes]
    [Paiements Stripe]
    [Gestion Stock]
    [Calcul Frais Port]
    [Génération Factures]
    [Synchronisation ERP]
    [Emails Transactionnels]
  }

  cloud "Tích hợp" {
    [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 (Nghiệp vụ cốt lõi)"
**Spring Boot là không thể thiếu khi:**
• Các giao dịch quan trọng
• Điều phối phức tạp
• Tích hợp đa nền tảng
• Tuân thủ pháp lý
• Các tác vụ đồng bộ hóa
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Chi phí Ước tính Hàng tháng" {

  rectangle "Giai đoạn MVP\n(0-1000 người dùng)" #LightGreen {
    [JBake (GitHub Pages): 0€]
    [Supabase: 0€]
    [Spring Boot: N/A]
    note bottom: **Tổng cộng: 0€/tháng**
  }

  rectangle "Giai đoạn Tăng trưởng\n(1k-10k người dùng)" #LightYellow {
    [JBake (GitHub Pages): 0€]
    [Supabase: 0€]
    [Spring Boot (Cloud Run): 20-50€]
    [PostgreSQL (si séparé): 0-30€]
    note bottom: **Tổng cộng: 20-80€/tháng**
  }

  rectangle "Giai đoạn Mở rộng\n(10k-100k người dùng)" #LightCoral {
    [JBake (Netlify Pro): 19€]
    [Supabase Pro: 25€]
    [Spring Boot (instances multiples): 100-300€]
    [Redis Cache: 20-50€]
    [Monitoring: 20€]
    note bottom: **Tổng cộng: 184-414€/tháng**
  }
}

note right of "Giai đoạn Mở rộng\n(10k-100k người dùng)"
Ở giai đoạn này, doanh thu hoàn toàn bù đắp được chi phí
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Ai Quản lý Cái gì?" {

  rectangle "Được quản lý bởi Supabase (0 công sức)" #LightGreen {
    [Authentification]
    [Base de données]
    [Backups automatiques]
    [Scaling automatique]
    [Monitoring DB]
    [Sécurité DB]
  }

  rectangle "Được quản lý bởi GitHub (0 công sức)" #SkyBlue {
    [Hébergement site statique]
    [HTTPS/SSL]
    [CDN global]
    [Déploiement automatique]
  }

  rectangle "Cần Quản lý (Spring Boot)" #LightCoral {
    [Déploiement application]
    [Monitoring APM]
    [Logs centralisés]
    [Scaling horizontal]
    [Mises à jour sécurité]
  }
}

note bottom of "Cần Quản lý (Spring Boot)"
**Có thể tối thiểu hóa với:**
• Cloud Run (serverless)
• Kubernetes (nếu cần thiết)
• Các dịch vụ quản lý (RDS, v.v.)
end note
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Kiến trúc\nLai ghép

** Bắt đầu đơn giản
***_ MVP với Supabase
***_ 0€ chi phí ban đầu
***Xác thực nhanh

** Phát triển một cách thông minh
***_ Thêm Spring Boot\ncần thiết
***_ Di động dần
***_ Không có việc thiết kế lại hoàn toàn

** Tận dụng các sức mạnh
***_ Supabase: Đơn giản
***_ Spring Boot: Sức mạnh
***_ PostgreSQL: Nguồn duy nhất

** Giảm độ phức tạp
***_ Không đồng bộ
***_ Không được trùng lặp
***_ Kiến trúc rõ ràng

** Tối ưu hoá chi phí
***_ Miễn phí khi bắt đầu
***'_ Mở rộng từng bước'
***_ ROI rõ ràng

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

package "Kiến trúc Hybrid Toàn diện" {

  actor "Người dùng" as users

  rectangle "Frontend (Tĩnh)" #SkyBlue {
    [JBake / GitHub Pages]
    note right: Miễn phí, CDN toàn cầu
  }

  rectangle "Backend Đơn giản (Supabase)" #LightGreen {
    [Auth OAuth2]
    [CRUD APIs]
    [Storage]
    [Realtime]
    note right
Miễn phí lên đến 50k users
Không cần cấu hình máy chủ
    end note
  }

  rectangle "Backend Nghiệp vụ (Spring Boot)" #Coral {
    [Orchestration]
    [Jobs Planifiés]
    [Intégrations]
    [Transactions]
    note right
Chỉ kích hoạt
nếu cần thiết
    end note
  }

  database "PostgreSQL\nNguồn Sự thật Duy nhất" 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
**Một cơ sở dữ liệu, hai người tiêu dùng**
• Supabase cho những thứ đơn giản
• Spring Boot cho những thứ phức tạp
• Không yêu cầu đồng bộ hóa
end note

@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Kiến trúc Hiện tại" #SkyBlue {
  [JBake]
  [Supabase]
  [Spring Boot]
}

rectangle "Các hướng Phát triển Có thể" #LightYellow {

  package "Hiệu năng" {
    [Redis Cache]
    [CDN pour Assets]
    [PostgreSQL Replicas]
  }

  package "Giám sát" {
    [Grafana]
    [Prometheus]
    [Sentry]
  }

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

  package "Tính năng" {
    [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
**Kiến trúc có thể mở rộng**
Mỗi phần bổ sung là độc lập
Không cần thiết phải tái thiết kế toàn bộ
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Phân phối các Hoạt động" {

  rectangle "80% - Hoạt động Tiêu chuẩn" #LightGreen {
    [Lecture de données]
    [Création d'entités]
    [Mise à jour simple]
    [Suppression]
    [Upload fichiers]
    [Authentification]

    note bottom: **Được quản lý bởi Supabase**
  }

  rectangle "20% - Logic Nghiệp vụ" #Coral {
    [Calculs complexes]
    [Workflows multi-étapes]
    [Transactions critiques]
    [Intégrations tierces]
    [Jobs planifiés]

    note bottom: Được quản lý bởi Spring Boot
  }
}

note right
**Tập trung tối ưu:**
Thời gian phát triển của bạn
tập trung vào 20% giá trị
tạo nên sự khác biệt cho sản phẩm của bạn
end note
@enduml