Giới thiệu dự án

Thương mại điện tử (E-commerce) trong phân khúc thời trang và may mặc đang trải qua giai đoạn chuyển mình mạnh mẽ với tốc độ tăng trưởng kép hàng năm (CAGR) tại thị trường Đông Nam Á đạt trên 18.5% giai đoạn 2023–2028. Tại Việt Nam, hành vi tiêu dùng trực tuyến ngày càng đòi hỏi trải nghiệm tải trang tức thì, giao diện trực quan, tính năng gợi ý thông minh và hệ thống quản lý chuỗi cung ứng liền mạch từ kho đến người giao hàng (Shipper).

Đồ án tốt nghiệp Kỹ sư Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (Khoa CNTT - Bộ môn Công nghệ Phần mềm, 2024) của sinh viên Ngô Thừa Ân và Nguyễn Ngọc Thắng dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo đã giải quyết bài toán cốt lõi: Xây dựng hệ thống Website kinh doanh sản phẩm thời trang toàn diện áp dụng kiến trúc phân tầng hiện đại kết hợp sức mạnh xử lý của Spring Boot ở phía Backend và khả năng tối ưu hóa hiển thị, công cụ tìm kiếm (SEO) từ Next.js ở phía Frontend.

+-------------------------------------------------------------------------+
|                      KIẾN TRÚC TỔNG THỂ HỆ THỐNG                         |
+-------------------------------------------------------------------------+
| [Client Tier: Next.js 14 + React 18 + SSR/SSG Engine + TailwindCSS]    |
|       |                                                                 |
|       | HTTPS / RESTful APIs + JSON / WebSocket STOMP                   |
|       v                                                                 |
| [Server Tier: Spring Boot 3.x + Spring Security + Spring Data JPA]     |
|   ├── Controller Layer (REST Controllers, Global Exception Handler)     |
|   ├── Service Layer (Business Logic, Auth, Promotion Engine)            |
|   └── Repository Layer (Hibernate 6 ORM, Connection Pooling)            |
|       |                                                                 |
|       v                                                                 |
| [Data Tier: MySQL 8.0 Enterprise Relational Database + Redis Cache]    |
+-------------------------------------------------------------------------+

Vấn đề thực tiễn (Problem Statement)

Các nền tảng bán lẻ thời trang vừa và nhỏ tại Việt Nam hiện đang đối mặt với nhiều rào cản kỹ thuật:

  • Tốc độ tải trang và SEO yếu: Các kiến trúc Single Page Application (SPA) truyền thống gặp bất lợi lớn trong việc thu thập dữ liệu từ crawler của Google, làm giảm thứ hạng organic search của sản phẩm.
  • Quản lý đa biến thể sản phẩm phức tạp: Quần áo và phụ kiện sở hữu ma trận thuộc tính phức tạp (kích thước, màu sắc, chất liệu, bộ sưu tập), đòi hỏi mô hình cơ sở dữ liệu động mà không làm suy giảm hiệu năng truy vấn.
  • Thiếu chu trình khép kín: Phần lớn website hiện tại chưa tích hợp đồng bộ giữa quy trình Đặt hàng - Quản trị kho - Phân phối cho Shipper, dẫn đến độ trễ cao và tỷ lệ hủy đơn gia tăng.

Mục tiêu dự án

  1. Thiết kế & Triển khai RESTful API: Xây dựng hệ thống backend hiệu năng cao bằng Spring Boot với khả năng xử lý đồng thời (concurrency) cao và bảo mật đa tầng.
  2. Xây dựng Giao diện Next.js Chuẩn SEO: Triển khai cơ chế Server-Side Rendering (SSR) và Static Site Generation (SSG) giúp thời gian hiển thị nội dung đầu tiên (First Contentful Paint - FCP) dưới 1.0 giây.
  3. Phân quyền 4 cấp độ người dùng: Tách biệt nghiệp vụ rõ ràng cho Khách (Guest), Khách hàng (Customer), Quản trị viên (Admin), và Người giao hàng (Shipper).
  4. Chuẩn hóa quy trình Logistics nội bộ: Tích hợp module quản lý trạng thái đơn hàng thời gian thực cho shipper mà không phụ thuộc giải pháp bên thứ ba.
  5. Đảm bảo tính mở rộng và bảo mật: Ứng dụng mô hình Stateless Authentication qua JSON Web Tokens (JWT) và cơ chế Refresh Token, sẵn sàng triển khai trên hạ tầng điện toán đám mây (AWS, Azure, Vercel).

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Nhóm nghiên cứu đã tiến hành khảo sát thực nghiệm 3 nền tảng thương mại điện tử lớn tại Việt Nam: Shopee, Lazada, và Canifa để đúc kết ưu - nhược điểm:

Tiêu chí Shopee Lazada Canifa Hệ thống đề xuất trong đồ án
Kiến trúc Frontend SPA + Dynamic Hydration Hybrid Web/App Next.js / Vue Hybrid Next.js 14 (SSR + SSG) chuẩn SEO
Responsive Web Trung bình (Tối ưu App) Trung bình (Tối ưu App) Tốt Toàn diện (Mobile-First Design)
Quản lý biến thể Ma trận 2 chiều Ma trận 2 chiều Danh mục phẳng Ma trận N-chiều linh hoạt qua style_value
Tích hợp Shipper Tách biệt App vận chuyển Tách biệt App Lex Đơn vị thứ ba Tích hợp trực tiếp Web Portal cho Shipper
Đăng ký & Xác thực SMS OTP, Email, Social SMS OTP, Social OTP Zalo/SMS JWT, Email Verification, Social Auth

Ưu tiên yêu cầu theo mô hình MoSCoW

  • Must have (Bắt buộc): Đăng ký/đăng nhập xác thực JWT, giỏ hàng, đặt hàng đa phương thức, quản lý danh mục đa cấp, CRUD sản phẩm theo biến thể, cổng shipper nhận/giao đơn.
  • Should have (Nên có): Áp dụng mã khuyến mãi (Coupon Engine), đánh giá và xếp hạng sản phẩm (Rating), thông báo trạng thái đơn hàng, biểu đồ thống kê doanh thu đa chiều.
  • Could have (Có thể có): Chatbot hỗ trợ tư vấn tự động, danh sách sản phẩm yêu thích (Wishlist), banner quảng cáo theo mùa.
  • Won't have (Chưa phát triển): Live streaming bán hàng trực tiếp, hệ thống đa gian hàng (Multi-vendor marketplace).

Thiết kế hệ thống

Danh mục công nghệ và phiên bản chuẩn hóa

  • Backend: Java 17 LTS, Spring Boot 3.2.x, Spring Data JPA, Spring Security 6.x, Hibernate 6, Maven 3.9.
  • Frontend: Next.js 14.x (App Router), React 18.x, TypeScript 5.x, TailwindCSS 3.4, Axios.
  • Cơ sở dữ liệu & Lưu trữ: MySQL 8.0, Redis Cache (session & product cache), Cloudinary Media Storage.
  • Kiểm thử & Triển khai: JUnit 5, Mockito, Postman, Docker, Vercel (Frontend Hosting), AWS EC2 (Backend Server).
+-----------------------------------------------------------------------------------+
|                           CƠ SỞ DỮ LIỆU THỜI TRANG ĐA BIẾN THỂ                     |
+-----------------------------------------------------------------------------------+
| [category] 1 ──< N [product] 1 ──< N [product_item] (SKU, Price, Stock, Image)    |
|                      │                       │                                    |
|                      └──< [product_style]    └──< [product_item_style_value]       |
|                                 │                             │                   |
|                              [style] 1 ──< N [style_value] <──┘                   |
+-----------------------------------------------------------------------------------+

Thiết kế cơ sở dữ liệu (Database Schema Highlights)

Hệ thống sử dụng cơ sở dữ liệu quan hệ với 28 bảng được chuẩn hóa dạng 3NF. Điểm cốt lõi là cấu trúc giải quyết bài toán biến thể sản phẩm (SKU) mà không gây dư thừa dữ liệu:

  • product: Chứa thông tin gốc (tên, mô tả, thương hiệu, danh mục).
  • style & style_value: Định nghĩa thuộc tính (Màu sắc: Đỏ, Xanh; Kích thước: S, M, L, XL).
  • product_item: Đại diện cho một SKU cụ thể với giá bán, số lượng tồn kho và barcode riêng biệt.
  • product_item_style_value: Bảng trung gian liên kết giữa SKU và giá trị thuộc tính tương ứng.
-- DDL mô phỏng quan hệ biến thể sản phẩm tối ưu hiệu năng
CREATE TABLE product_item (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    product_id BIGINT NOT NULL,
    sku VARCHAR(64) NOT NULL UNIQUE,
    price DECIMAL(12, 2) NOT NULL,
    stock_quantity INT NOT NULL DEFAULT 0,
    thumbnail_url VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT fk_product FOREIGN KEY (product_id) REFERENCES product(id) ON DELETE CASCADE
);

CREATE TABLE product_item_style_value (
    product_item_id BIGINT NOT NULL,
    style_value_id BIGINT NOT NULL,
    PRIMARY KEY (product_item_id, style_value_id),
    CONSTRAINT fk_item FOREIGN KEY (product_item_id) REFERENCES product_item(id),
    CONSTRAINT fk_style_val FOREIGN KEY (style_value_id) REFERENCES style_value(id)
);

Thiết kế RESTful API Endpoints

Hệ thống tuân thủ nghiêm ngặt nguyên tắc REST với kiến trúc tài nguyên rõ ràng:

Phương thức URI Endpoint Quyền truy cập Chức năng nghiệp vụ
POST /api/v1/auth/login Public Xác thực thông tin, cấp phát JWT Access & Refresh Token
GET /api/v1/products Public Lấy danh sách sản phẩm phân trang, lọc theo filter dynamic
POST /api/v1/cart/items Customer Thêm biến thể sản phẩm vào giỏ hàng cá nhân
POST /api/v1/orders/checkout Customer Khởi tạo đơn hàng, áp dụng voucher khuyến mãi
GET /api/v1/admin/analytics/revenue Admin Trích xuất báo cáo doanh thu theo ngày/tháng/năm
PUT /api/v1/shipper/orders/{id}/status Shipper Cập nhật trạng thái vận chuyển (Đang giao / Thành công)

Implementation và kết quả

Quá trình phát triển và thuật toán cốt lõi

Dự án được xây dựng theo mô hình Agile/Scrum qua 5 giai đoạn chính từ tháng 03/2024 đến tháng 07/2024. Điểm nhấn trong quá trình cài đặt là logic xử lý xác thực bảo mật và cơ chế truy vấn động cho sản phẩm.

// Spring Boot: Xử lý xác thực JWT Filter bảo mật hệ thống
@Component
@RequiredArgsConstructor
public class JwtAuthenticationFilter extends OncePerRequestFilter {

    private final JwtService jwtService;
    private final UserDetailsService userDetailsService;

    @Override
    protected void doFilterInternal(
        @NonNull HttpServletRequest request,
        @NonNull HttpServletResponse response,
        @NonNull FilterChain filterChain
    ) throws ServletException, IOException {
        final String authHeader = request.getHeader("Authorization");
        final String jwt;
        final String userEmail;

        if (authHeader == null || !authHeader.startsWith("Bearer ")) {
            filterChain.doFilter(request, response);
            return;
        }

        jwt = authHeader.substring(7);
        userEmail = jwtService.extractUsername(jwt);

        if (userEmail != null && SecurityContextHolder.getContext().getAuthentication() == null) {
            UserDetails userDetails = this.userDetailsService.loadUserByUsername(userEmail);
            if (jwtService.isTokenValid(jwt, userDetails)) {
                UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(
                    userDetails, null, userDetails.getAuthorities()
                );
                authToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
                SecurityContextHolder.getContext().setAuthentication(authToken);
            }
        }
        filterChain.doFilter(request, response);
    }
}

Phía Frontend sử dụng Next.js App Router với khả năng nạp trước dữ liệu và quản lý metadata động cho từng danh mục thời trang:

// Next.js: Tối ưu SEO và Server-Side Data Fetching
import { Metadata } from 'next';
import ProductDetailView from '@/components/product/ProductDetailView';

interface Props {
  params: { id: string };
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const product = await fetch(`https://api.fashion.local/api/v1/products/${params.id}`).then((res) => res.json());
  return {
    title: `${product.name} | Thời Trang Cao Cấp`,
    description: product.shortDescription,
    openGraph: {
      images: [product.mainImageUrl],
    },
  };
}

export default async function ProductPage({ params }: Props) {
  const res = await fetch(`https://api.fashion.local/api/v1/products/${params.id}`, { cache: 'no-store' });
  const productData = await res.json();

  return <ProductDetailView product={productData} />;
}

Kiểm thử và đánh giá hiệu năng (Testing & Benchmarks)

  • Unit Testing & Code Coverage: 142 ca kiểm thử JUnit 5 đạt độ phủ mã nguồn (Code Coverage) trên 84.6% tại tầng Service và Repository.
  • Stress Testing qua Apache JMeter: Hệ thống duy trì độ ổn định cao dưới tải 500 người dùng đồng thời (500 Concurrent Users).
    • Tỷ lệ lỗi (Error Rate): 0.02%.
    • Thời gian phản hồi trung bình (Average Response Time): 148ms đối với các truy vấn đọc và 312ms đối với các giao dịch ghi giỏ hàng/thanh toán.
  • Chỉ số Google Lighthouse:
    • Performance: 94/100
    • Accessibility: 96/100
    • Best Practices: 100/100
    • SEO Score: 98/100

Đổi mới và đóng góp

  1. Kiến trúc Headless linh hoạt vượt trội: Tách rời hoàn toàn giao diện người dùng và backend xử lý logic, giúp loại bỏ hiện tượng "thắt nút cổ chai" khi mở rộng sang các nền tảng ứng dụng di động trong tương lai.
  2. Cơ chế quản lý biến thể đa chiều (Dynamic SKU Matrix): Giúp cửa hàng thời trang dễ dàng tạo ra hàng trăm biến thể kích cỡ - màu sắc mà chỉ cần một lần cấu hình, giảm 65% thời gian nhập liệu danh mục so với các website thời trang sử dụng database phẳng.
  3. Phân hệ điều hướng giao hàng khép kín (Integrated Shipper Workflow): Cung cấp giao diện chuyên dụng cho nhân viên giao hàng theo dõi trạng thái đơn hàng (Chờ giao -> Đang giao -> Hoàn tất/Hủy) trực tiếp trên nền tảng web mà không cần cài đặt thêm phần mềm bên ngoài.
  4. Tối ưu hóa chuyển đổi trải nghiệm khách hàng: Giảm 45% thời gian hoàn tất quy trình checkout thông qua việc đơn giản hóa bước nhập địa chỉ, lưu trữ giỏ hàng bền vững (Persistent Cart) và áp dụng voucher trực quan.

Ứng dụng thực tế và triển khai

Kịch bản vận hành thực tế (Real-world Scenarios)

  • Khách hàng cá nhân: Trải nghiệm lướt web mượt mà trên smartphone, lọc sản phẩm theo mức giá/size trong vài mili-giây, nhận mã giảm giá tự động và tra cứu trạng thái đơn hàng qua email/hệ thống thông báo.
  • Cửa hàng thời trang độc lập (Boutique/Local Brand): Quản lý toàn bộ danh mục, theo dõi doanh thu theo thời gian thực qua biểu đồ trực quan, thiết lập chiến dịch khuyến mãi theo mùa.
  • Đội ngũ giao vận nội bộ: Tiếp nhận đơn hàng ngay khi quản trị viên duyệt trạng thái "Đang xử lý", cập nhật tiến độ giao hàng tức thì.

Phương án triển khai hạ tầng (Deployment Architecture)

       [Cloudflare DNS / SSL]
                 │
      ┌──────────┴──────────┐
      ▼                     ▼
[Vercel Edge]         [AWS EC2 Instance]
(Next.js SSR Frontend) (Spring Boot Docker Container)
                            │
                      ┌─────┴──────────────┐
                      ▼                    ▼
               [AWS RDS MySQL]      [AWS S3 / Cloudinary]
             (Transactional Data)     (Product Images)
  • Chi phí vận hành tối ưu: Ước tính chỉ từ 25 - 40 USD/tháng cho quy mô cửa hàng dưới 30,000 lượt truy cập hàng tháng nhờ việc tận dụng triệt để tài nguyên Stateless và Cloud CDN.
  • Khả năng hoàn vốn (ROI): Doanh nghiệp bán lẻ có thể thu hồi vốn đầu tư hệ thống trong vòng 3–5 tháng nhờ cắt giảm phí hoa hồng từ các sàn thương mại điện tử (10–15%) và tự chủ hoàn toàn tệp khách hàng thân thiết.

Hạn chế và hướng phát triển

Hạn chế kỹ thuật

  • Chatbot tư vấn hiện tại hoạt động dựa trên kịch bản và luật định sẵn (Rule-based), chưa có khả năng hiểu ngữ cảnh tự nhiên sâu rộng.
  • Hệ thống thanh toán trực tuyến hiện dừng lại ở cổng mô phỏng giao dịch nội bộ và tích hợp sandbox thử nghiệm.

Hướng phát triển trong tương lai

  • Tích hợp Generative AI / Large Language Models: Xây dựng Stylist ảo cá nhân hóa dựa trên mô hình ngôn ngữ lớn để tự động gợi ý phối đồ (Mix & Match) cho khách hàng dựa trên lịch sử mua sắm.
  • Chuyển dịch sang kiến trúc Microservices: Tách các phân hệ Order Service, Inventory Service, và Notification Service độc lập khi lượng giao dịch vượt ngưỡng 10,000 đơn/ngày.
  • Tích hợp cổng thanh toán thực tế: Hoàn thiện tích hợp cổng VNPAY, MoMo, ZaloPay và thẻ thanh toán quốc tế Visa/Mastercard.

Đối tượng hưởng lợi

  • Sinh viên & Học viên ngành CNTT: Tài liệu tham khảo chuẩn mực về phương pháp phân tích thiết kế hệ thống thông tin, chuẩn hóa lược đồ Use Case, Activity Diagram, Sequence Diagram và cơ sở dữ liệu quan hệ 3NF.
  • Lập trình viên (Fullstack Developers): Bộ mã nguồn mẫu hoàn chỉnh tích hợp giữa Java Spring Boot 3 và Next.js 14, xử lý bảo mật JWT và tối ưu hóa SEO.
  • Chủ doanh nghiệp / Local Brand thời trang: Giải pháp phần mềm thương mại điện tử độc lập, tiết kiệm chi phí, giúp nâng cao năng lực cạnh tranh số hóa.
  • Nhà nghiên cứu phần mềm: Minh chứng thực nghiệm cho việc áp dụng kiến trúc Client-Server hiện đại giải quyết bài toán hiệu năng và SEO trong thương mại điện tử chuyên ngành.

Câu hỏi thường gặp

1. Yêu cầu phần cứng và môi trường để triển khai hệ thống là gì?

Hệ thống Backend yêu cầu môi trường hỗ trợ Java 17+, RAM tối thiểu 2GB, 1 vCPU và cơ sở dữ liệu MySQL 8.0. Phía Frontend yêu cầu môi trường Node.js 18.x trở lên hoặc có thể triển khai dạng Serverless không máy chủ trên Vercel/Netlify.

2. Làm thế nào hệ thống giải quyết vấn đề cạnh tranh tồn kho (Concurrency Stock)?

Hệ thống sử dụng cơ chế Khóa bi quan/lạc quan (Pessimistic/Optimistic Locking) được tích hợp trong Spring Data JPA @Transactional để kiểm tra và trừ tồn kho tự động trong quá trình thanh toán, ngăn chặn triệt để tình trạng bán vượt số lượng tồn (Overselling).

3. Tại sao chọn kết hợp Spring Boot và Next.js thay vì Spring MVC truyền thống?

Spring MVC kết hợp mã nguồn giao diện chặt chẽ (Monolith) gây khó khăn cho việc tối ưu trải nghiệm người dùng hiện đại và không linh hoạt khi phát triển App di động. Next.js cung cấp SSR/SSG tối ưu SEO xuất sắc kết hợp cùng REST API Spring Boot tạo nên kiến trúc tách rời (Decoupled) hiệu năng cao, dễ bảo trì.

4. Hệ thống bảo vệ dữ liệu người dùng như thế nào?

Toàn bộ mật khẩu được băm (hash) bằng thuật toán BCrypt một chiều trước khi lưu vào cơ sở dữ liệu. Mọi yêu cầu truy cập tài nguyên bảo mật đều được kiểm soát thông qua JSON Web Token (JWT) ngắn hạn kèm cơ chế Refresh Token lưu trữ an toàn trong HTTP-only Cookie nhằm triệt tiêu nguy cơ tấn công XSS và CSRF.

5. Chi phí bảo trì định kỳ của hệ thống khoảng bao nhiêu?

Nhờ kiến trúc module độc lập và mã nguồn mở hoàn toàn, chi phí bảo trì định kỳ chủ yếu bao gồm phí duy trì tên miền, máy chủ cơ sở dữ liệu đám mây (khoảng 300,000 - 800,000 VNĐ/tháng cho quy mô cửa hàng vừa) mà không mất phí bản quyền phần mềm hàng năm.


Kết luận

Đồ án tốt nghiệp "Xây dựng Website kinh doanh sản phẩm thời trang" của sinh viên Ngô Thừa Ân và Nguyễn Ngọc Thắng (HCMUTE, 2024) đã giải quyết trọn vẹn bài toán xây dựng nền tảng thương mại điện tử chuyên ngành thời trang với độ hoàn thiện cao về mặt kỹ thuật lẫn ứng dụng thực tiễn. Việc làm chủ và kết hợp nhuần nhuyễn hai công nghệ hàng đầu hiện nay là Spring BootNext.js không chỉ đảm bảo tốc độ phản hồi vượt trội và thứ hạng SEO tối ưu, mà còn cung cấp giải pháp vận hành liền mạch cho doanh nghiệp thời trang trong kỷ nguyên số hóa.