Quy trình Frontend Development (SOP)

Quick Reference

• What: Hướng dẫn thêm Component, Service và Routing mới.
• Stack: Angular 19 (Signals), TailwindCSS
• Rule: Commit message phải chuẩn (viết bằng format conventional commit).

1. Thiết lập dự án (Cài đặt)

Setup

git clone <repo>
cd boxme-insight
npm install

Run Dev

# Chạy ở cổng mặc định 4200
npm start

Testing

# Chạy Unit Test dùng Vitest
npm run test

2. Tạo tính năng mới (Feature)

Khi cần tính năng (ví dụ trang thống kê mới):

1. Phải đặt tại thư mục: src/app/features/ten-tinh-nang/
2. Component cần cấu hình standalone. Sử dụng Angular CLI: npx ng g c features/ten-tinh-nang --standalone
3. Thêm định tuyến routes.ts với tính năng lazy-load trong app.routes.ts.

TIP

Hãy luôn định nghĩa Interface/Types cho Response ở /core/models/ thay vì dùng any.

3. Tạo Chart / Data View Mới

• Sử dụng component <app-chart-renderer> để hiển thị biểu đồ, tránh dùng thẻ echart nguyên gốc.
• Đối với Tailwind CSS, viết class inline trên tempalte. Cấu hình tại màu sắc biến chuẩn theo design system tại index.css nếu có dùng chung.