pos-system/apps/web-client-tpos-net/docs/vi/ARCHITECTURE.md

Kiến trúc WebClientTpos

Kiến trúc frontend cơ sở cho GoodGo Platform sử dụng Blazor WebAssembly với mô hình BFF.

Tổng quan

Ứng dụng này triển khai mô hình Backend for Frontend (BFF) với YARP reverse proxy:

• Client: Blazor WebAssembly chạy trên trình duyệt
• BFF: ASP.NET Core server proxy yêu cầu đến microservices
• Shared: DTOs chung với validation (chia sẻ giữa Client/BFF)

Sơ đồ Kiến trúc

flowchart TD
    subgraph Browser["🌐 Trình duyệt"]
        C[Blazor WASM Client]
    end
    
    subgraph BFF["⚙️ Lớp BFF"]
        Y[YARP Reverse Proxy]
        SA[Tài nguyên tĩnh]
    end
    
    subgraph MS["🔧 Microservices"]
        IAM[Dịch vụ IAM]
        MER[Dịch vụ Merchant]
        CAT[Dịch vụ Catalog]
        ORD[Dịch vụ Order]
    end
    
    C -->|Tệp tĩnh| SA
    C -->|/api/*| Y
    Y -->|/api/iam/**| IAM
    Y -->|/api/merchants/**| MER
    Y -->|/api/catalog/**| CAT
    Y -->|/api/orders/**| ORD
    
    style C fill:#3498DB,color:#ECF0F1,stroke:#2980B9,stroke-width:3px
    style Y fill:#8E44AD,color:#ECF0F1,stroke:#7D3C98,stroke-width:2px
    style SA fill:#34495E,color:#ECF0F1,stroke:#2C3E50,stroke-width:2px
    style IAM fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
    style MER fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
    style CAT fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
    style ORD fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px

Cấu trúc Dự án

web-client-base-net/
├── src/
│   ├── WebClientTpos.Client/    # Blazor WebAssembly
│   │   ├── Layout/              # MainLayout, NavMenu
│   │   ├── Pages/               # Trang Razor
│   │   └── wwwroot/             # Tài nguyên tĩnh, CSS
│   ├── WebClientTpos.Server/    # BFF + YARP Proxy
│   │   ├── Program.cs           # Cấu hình ứng dụng
│   │   └── yarp.json            # Routes proxy
│   └── WebClientTpos.Shared/    # DTOs chung
│       └── DTOs/                # ProductDto, UserDto
└── docs/

Shared DTOs

DTO	Mục đích	Validation
ProductDto	Dữ liệu sản phẩm	Tên (3-100 ký tự), Giá (0.01-1 tỷ)
RegisterDto	Đăng ký người dùng	Email, Mật khẩu (8+ ký tự, độ phức tạp)
LoginDto	Đăng nhập	Email, Mật khẩu
ApiResponse<T>	Wrapper response chuẩn	Success, Data, Error

YARP Routes

Route	Dịch vụ đích	Cổng
/api/iam/**	Dịch vụ IAM	5101
/api/merchants/**	Dịch vụ Merchant	5102
/api/catalog/**	Dịch vụ Catalog	5103
/api/orders/**	Dịch vụ Order	5104

Trang Blazor

Trang	Route	Mô tả
Home	/	Trang chủ
Products	/products	Quản lý sản phẩm
Auth	/auth	Đăng nhập/Đăng ký
Counter	/counter	Component demo
Weather	/weather	Demo fetch dữ liệu

Công nghệ chính

• .NET 10 - Framework mới nhất
• Blazor WebAssembly - SPA phía client
• YARP - Reverse proxy cho microservices
• Data Annotations - Validation chia sẻ