從宏觀視角到程式碼：使用 C4 模型可視化軟體架構的入門指南

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title PayQuick - 系統環境圖

Person(customer, "個人客戶", "使用應用程式匯款與繳費")
Person(merchant, "商家", "接收客戶付款")

System_Boundary(payquick, "PayQuick 平台") {
    System(payquick_system, "PayQuick", "讓客戶進行付款與轉帳")
}

System_Ext(bank_system, "銀行網路", "處理跨行轉帳", $tags="外部")
System_Ext(sms_gateway, "Twilio 簡訊", "發送交易通知", $tags="外部")
System_Ext(email_service, "SendGrid", "發送電子郵件收據", $tags="外部")

Rel(customer, payquick_system, "匯款、繳費、檢視交易")
Rel(merchant, payquick_system, "接收付款、發放退款")
Rel(payquick_system, bank_system, "透過", "API")
Rel(payquick_system, sms_gateway, "透過", "HTTPS")
Rel(payquick_system, email_service, "透過", "SMTP")

LAYOUT_WITH_LEGEND()
@enduml

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title PayQuick - 容器圖

Person(customer, "客戶", "使用行動應用程式或網頁介面")
Person(merchant, "商家", "使用網頁儀表板")

System_Boundary(payquick, "PayQuick 平台") {
    Container(mobile_app, "行動應用程式", "React Native, TypeScript", "為客戶提供使用者介面")
    Container(web_app, "網頁應用程式", "React, TypeScript", "提供管理員與商家儀表板")
    
    Container_Boundary(api, "API 應用程式") {
        Container(api_gateway, "API 網關", "Node.js, Express", "處理路由、驗證與頻率限制")
        Container(payment_service, "支付服務", "Spring Boot, Java", "處理支付與轉帳")
        Container(notification_service, "通知服務", "Python, FastAPI", "發送簡訊與電子郵件通知")
    }
    
    ContainerDb(database, "資料庫", "PostgreSQL", "儲存使用者帳戶、交易與餘額")
    ContainerDb(cache, "快取", "Redis", "儲存會話資料與經常存取的記錄")
    ContainerQueue(queue, "訊息佇列", "RabbitMQ", "處理非同步通知處理")
}

System_Ext(bank_api, "銀行 API", "外部銀行整合")
System_Ext(sms_provider, "Twilio 簡訊 API")

Rel(customer, mobile_app, "使用", "HTTPS")
Rel(merchant, web_app, "使用", "HTTPS")
Rel(mobile_app, api_gateway, "呼叫 API", "HTTPS/JSON")
Rel(web_app, api_gateway, "呼叫 API", "HTTPS/JSON")
Rel(api_gateway, payment_service, "將請求路由至", "gRPC")
Rel(api_gateway, notification_service, "將請求路由至", "gRPC")
Rel(payment_service, database, "讀取/寫入資料至", "JDBC")
Rel(payment_service, cache, "將頻繁資料快取至", "Redis 協定")
Rel(notification_service, queue, "發布事件至", "AMQP")
Rel(notification_service, sms_provider, "透過發送簡訊", "REST API")
Rel(payment_service, bank_api, "透過處理轉帳", "HTTPS")
@enduml

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

title PayQuick - 支付服務組件圖

!define C4ShapeInRow 4
!define C4BoundaryInRow 1

Container_Boundary(payment_service, "支付服務") {
    Component(payment_controller, "支付控制器", "Spring REST 控制器", "處理傳入的支付請求")
    Component(transaction_manager, "交易管理器", "Spring 服務", "協調支付工作流程")
    Component(fraud_detector, "欺詐檢測服務", "Spring 服務", "驗證交易是否為欺詐")
    Component(balance_calculator, "餘額計算器", "Spring 服務", "計算並更新帳戶餘額")
    Component(validation_service, "驗證服務", "Spring 服務", "驗證支付資料與業務規則")
    
    ComponentDb(transaction_repo, "交易儲存庫", "Spring Data JPA", "儲存交易記錄")
    ComponentDb(account_repo, "帳戶儲存庫", "Spring Data JPA", "管理帳戶資料")
    ComponentDb(fraud_repo, "欺詐規則儲存庫", "Spring Data JPA", "儲存欺詐檢測規則")
    
    Component(notification_client, "通知客戶端", "Feign 客戶端", "呼叫通知服務")
    Component(bank_client, "銀行客戶端", "Feign 客戶端", "整合外部銀行 API")
}

Rel(payment_controller, transaction_manager, "將支付請求轉發至")
Rel(transaction_manager, fraud_detector, "使用...驗證交易")
Rel(transaction_manager, validation_service, "使用...驗證資料")
Rel(transaction_manager, balance_calculator, "透過...更新餘額")
Rel(transaction_manager, transaction_repo, "將交易儲存至")
Rel(balance_calculator, account_repo, "讀取/寫入帳戶資料至")
Rel(fraud_detector, fraud_repo, "根據規則進行檢查")
Rel(transaction_manager, notification_client, "透過...發送通知")
Rel(transaction_manager, bank_client, "透過...處理外部轉帳")

@enduml

@startuml
title 欺詐檢測服務 - 類別圖

class 欺詐檢測服務 {
    - 欺詐規則儲存庫 fraudRepo
    - 交易儲存庫 txnRepo
    + checkFraud(txn: 交易): 欺詐結果
    - evaluateRules(txn: 交易): List<規則>
    - calculateRiskScore(txn: 交易): Double
    - isVelocityExceeded(userId: String): Boolean
}

class 欺詐結果 {
    + isBlocked: boolean
    + riskScore: double
    + blockedRules: List<String>
    + getRiskLevel(): 風險等級
}

class 欺詐規則 {
    + id: Long
    + ruleName: String
    + threshold: Double
    + isEnabled: boolean
    + evaluate(txn: 交易): boolean
}

class 交易 {
    + id: String
    + amount: BigDecimal
    + userId: String
    + timestamp: DateTime
    + merchantId: String
}

欺詐檢測服務 --> 欺詐結果 : 回傳
欺詐檢測服務 --> 欺詐規則 : 使用
欺詐檢測服務 --> 交易 : 驗證
欺詐結果 ..> 欺詐規則 : 包含

@enduml