# 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

```mermaid
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ẻ