Kiến trúc lai : 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 nguyên khối" 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 đi qua backend
ngay cả những 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 chặt
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Kiến trúc BaaS Thuần" {
  actor Utilisateur as user
  component "Frontend" as frontend #LightBlue
  cloud "Supabase / Firebase" as baas #LightGreen {
    [Auth]
    [Database]
    [Storage]
    [Edge Functions]
  }

  user --> frontend
  frontend --> baas : Tất cả các thao tác
}

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

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Utilisateur as user #LightBlue

package "Lớp Frontend" {
  component "Trang web 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 "Tác vụ theo lịch" as jobs
  component "Tích hợp" as integrations
}

database "PostgreSQL dùng chung" as db #LightGray

user --> frontend

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

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

crud --> db
auth --> db

note bottom of db
**Một nguồn sự thật duy nhất**
Được chia sẻ giữa Supabase và Spring Boot
end note

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

note right of logic
**Chỉ kích hoạt 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 trong vài 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 (tùy chọn)" as growth
  note right
✓ Logic nghiệp vụ xuất hiện
✓ Những job được lập lịch đầu tiên
✓ Tích hợp bên thứ ba
  end note
}

rectangle "**Giai đoạn 3 : Mở rộng**" #LightCoral {
  component "Kiến trúc hoàn chỉnh" as scale
  note right
✓ Điều phối phức tạp
✓ Hiệu năng được tối ưu hóa
✓ Bộ nhớ đệm phân tán
  end note
}

mvp -down-> growth : Khi sự phức tạp\nbiện minh cho điều đó
growth -down-> scale : Tối ưu hóa\nliên tục
@enduml

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

left side

** Công việc đơn giản\n(Supabase)
***_ CRUD Tiêu chuẩn
****_ Bài giảng
****_ sự tạo ra
****_ Cập nhật
****_ Xóa
***_ Xác thực
****_ Đăng nhập/Logout
****_ OAuth2
****_ Quản lý phiên
***_ Lưu trữ
****_ Upload 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ụ
****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
****_ Dịch vụ đa dạng
****_ 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ộ hóa
****Vệ sinh
***_ Tích hợp
****_ Thanh toán (Stripe)
****_ APIs phần ba
****Dịch vụ ML/AI

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

database "PostgreSQL" as db #LightGray {
  package "Lược đồ: auth (Supabase)" #LightGreen {
    [users]
    [sessions]
    [identities]
  }

  package "Lược đồ: public (Dùng chung)" #SkyBlue {
    [articles]
    [comments]
    [profiles]
  }

  package "Lược đồ: business (Spring Boot)" #Coral {
    [orders]
    [payments]
    [reports]
  }
}

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

supabase -down-> users : Quản lý
supabase -down-> sessions : Quản lý
supabase -down-> articles : Truy cập
supabase -down-> comments : Truy cập
supabase -down-> profiles : Truy cập

spring -down-> articles : Truy cập
spring -down-> profiles : Truy cập
spring -down-> orders : Quản lý
spring -down-> payments : Quản lý
spring -down-> reports : Quản lý

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

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Người dùng" as user
participant "JBake" as jbake
participant "Supabase Auth" 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 + Refresh Token
jbake -> jbake : Lưu trữ token (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\ntự động kiểm tra JWT
  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 nhận JWT Supabase
  spring -> spring : Trích xuất yêu cầu bồi thường (user_id, vai trò)
  spring -> db : Truy vấn phức tạp
  spring -> jbake : Báo cáo đã được tạo
end

note over auth, spring
**JWT là phổ quát**
Đượ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 "Máy khách" as user
participant "JBake" as jbake
participant "Spring Boot" as spring
participant "Supabase CSDL" as supadb
participant "Stripe API" as stripe
participant "Dịch vụ tồn kho" as inventory
participant "Dịch vụ email" 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 minh
end

spring -> stripe : Tạo Payment Intent
stripe -> spring : Đã tạo Intent (ID: pi_xxx)

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

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

spring -> db : Cập nhật đơn hàng (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\nqua 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
**Trách nhiệm Spring Boot:**
• Giao dịch ACID
• Điều phối đa dịch vụ
• Tự động rollback nếu có 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 "Bên ngoài API" as api
participant "Dịch vụ email" as email
participant "Supabase Lưu trữ" as storage

== Job Quotidien : 2:00 ==
activate scheduler
scheduler -> report : Kích hoạt tạo báo cáo

activate report
report -> db : Lấy dữ liệu\ntrong 24 giờ qua
db -> report : Bộ dữ liệu

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

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

report -> email : Gửi cho các quản trị viên\nvới liên kết PDF
deactivate report

== Job Hebdomadaire : Chủ nhật 3h00 ==
scheduler -> report : Đồng bộ hóa 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 bảng
report -> db : Dọn dẹp dữ liệu lỗi thời
deactivate report

== Job Mensuel : Ngày 1 của tháng ==
scheduler -> report : Xuất hóa đơn

activate report
report -> db : Danh sách khách hàng đang hoạt động
report -> report : Tính toán 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ỉ với Supabase**
Edge Functions không phù hợp
cho các tác vụ chạy lâu và lặp lại
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

start

:Tính năng mới cần triển khai;

if (CRUD simple ?) then (oui)
  :✅ **Supabase**;
  stop
else (non)
  if (Authentification ?) then (oui)
    :✅ **Supabase Xác thực**;
    stop
  else (non)
    if (Upload fichiers ?) then (oui)
      :✅ **Supabase Lưu trữ**;
      stop
    else (non)
      if (Temps réel ?) then (oui)
        :✅ **Supabase Thời gian thực**;
        stop
      else (non)
        if (Row Level Security\nsuffisante ?) then (oui)
          :✅ **Supabase + Chính sách**;
          stop
        else (non)
          :⚠️ **Cân nhắc Spring Boot**;
          #Coral:Passer à l'arbre\nde décision Spring Boot;
          stop
        endif
      endif
    endif
  endif
endif

@enduml

@startuml
skinparam backgroundColor #FEFEFE

start

:Tính năng mới phức tạp;

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)
            :⚠️ **Có lẽ là 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ỉ công việc đã lên lịch
  }

  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**
Bản tin 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 dùng chung" 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ý thuê bao
• Lập hóa đơn định kỳ
• Hạn 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 "Cửa hàng trực tuyến (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 không thể thiếu:**
• Giao dịch trọng yếu
• Điều phối phức tạp
• Tích hợp nhiều hệ thống
• Tuân thủ pháp lý
• Tác vụ đồng bộ
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Chi phí hàng tháng ước tính" {

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

  rectangle "Giai đoạn Tăng trưởng\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: **Tổng cộng: 20-80€/mois**
  }

  rectangle "Giai đoạn Mở rộng quy mô\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: **Tổng cộng: 184-414€/mois**
  }
}

note right of "Giai đoạn Mở rộng quy mô\n(10k-100k users)"
Ở giai đoạn này, doanh thu hoàn toàn biện minh cho cá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 nỗ lự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 nỗ lự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ể giảm thiểu với:**
• Cloud Run (serverless)
• Kubernetes (nếu cần)
• Dịch vụ được quản lý (RDS, v.v.)
end note
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Architecture\nHybride

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

** Phát triển thông minh
***_ Thêm Spring Boot\nnếu cần
***_ Di chuyển dần
***_ Không có sự thiết kế lại toàn diện

** Sử dụng các lực lượng
***_ Supabase: Đơn giản
***_ Spring Boot: Sức mạnh
***_ PostgreSQL: Nguồn duy nhất

** Giảm thiểu độ phức tạp
***_ Không đồng bộ
***_ Không được sao ché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 lai hoàn chỉnh" {

  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í đến 50k người dùng
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ỉ bật khi cần thiết
    end note
  }

  database "PostgreSQL\nSource 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 duy nhất, hai bên tiêu thụ**
• Supabase cho phần đơn giản
• Spring Boot cho phần phức tạp
• Không cần đồ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 khả thi" #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 "Các 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 lần bổ sung đều độc lập
Không cần thiết kế lại toàn bộ
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Phân phối 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
**Trọng tâm tối ưu:**
Thời gian phát triển của bạn
được tập trung vào 20% yếu tố
tạo nên sự khác biệt cho sản phẩm của bạn
end note
@enduml