Chuyển tới nội dung chính

Tổng quan về kiến trúc

1. Mục đích và phạm vi​

Tài liệu này mô tả quy trình phát triển Frontend cho dự án IMS, bao gồm:

  • Thành phần công nghệ đang áp dụng.
  • Quy trình tạo mới hoặc chỉnh sửa màn hình FE.
  • Luồng dữ liệu từ giao diện đến API và ngược lại.
  • Phương pháp kết nối giữa menu, route, layout và các page.
  • Phương pháp gọi API Core Oracle và API Scheduler.
  • Phương pháp lưu trữ, đọc và gắn token vào request.

Nội dung được viết theo hiện trạng source code hiện tại của dự án.

2. Thành phần công nghệ áp dụng​

2.1 Nền tảng ứng dụng​

Công nghệ

Thành phầnCông nghệVai trò
Build toolVite 5Chạy dev server, build static FE
Framework UIReact 18Xây dựng component và page
Ngôn ngữTypeScriptKiểm soát type cho props, store, service và API response
Routingreact-router-dom 6Định tuyến page, layout cha-con, lazy load page
StylingTailwind CSS 4, CSS variablesXây dựng giao diện compact, theme light/dark, layout
State managementZustandQuản lý state global và state theo từng page/module
HTTP clientAxiosCấu hình API client, interceptor, timeout, header và xử lý lỗi
Form/validationreact-hook-form, zod, validation helper nội bộHỗ trợ validate form; nhiều page hiện dùng validateFormContainer
i18ni18next, react-i18nextQuản lý ngôn ngữ vi/en
Iconslucide-reactIcon cho button, menu, toolbar
EditorCKEditor 5Soạn thảo nội dung template
UI nội bộBSS componentsBSSInput, BSSGrid, BSSButton, BSSPopup, BSSCalendar, BSSToast, ...

2.2 Cấu trúc thư mục chính​

src/
  main.tsx                     # Khởi tạo React app và health monitoring
  App.tsx                      # BrowserRouter, toast global, hotkey Enter global
  routes                       # Khai báo route
  components/
    layouts/                   # MainLayout, Sidebar, Header
    shared/                    # BSS UI components dùng chung
  core/
    api/                       # Axios clients, danh mục PROCEDURES
    services/                  # BaseService và service dùng chung
    types/                     # Type dùng chung
  pages/                       # Page nghiệp vụ theo module
    module/                    # Module nghiệp vụ
      feature/                 # Feature nghiệp vụ
        components/            # Component nghiệp vụ
        *.page.tsx             # Page nghiệp vụ
        *.store.ts             # Zustand Store nghiệp vụ
        *.service.ts           # Service nghiệp vụ
        *.types.ts             # Type nghiệp vụ
  stores/                      # Zustand global stores
  utils/                       # Helper validation, date, grid, text
  styles/, theme/              # CSS và theme tokens
  locales/                     # File ngôn ngữ

2.3 Minh họa cấu trúc các thành phần trong dự án​

Cấu trúc dự án