Giới thiệu dự án

Thương mại điện tử (E-commerce) trong ngành bán lẻ thời trang tại Việt Nam đang chứng kiến sự tăng trưởng vượt bậc với quy mô thị trường dự kiến vượt 12 tỷ USD vào năm 2025 (theo báo cáo của Google, Temasek và Bain & Company). Xu hướng "online hóa" hành vi tiêu dùng đòi hỏi các doanh nghiệp may mặc không chỉ duy trì kênh bán hàng truyền thống mà phải chuyển đổi số toàn diện để tiếp cận khách hàng đa kênh.

Tuy nhiên, các mô hình kinh doanh truyền thống và nhiều cửa hàng bán lẻ vừa và nhỏ (SMEs) vẫn đối mặt với những "điểm nghẽn" (pain points) nghiêm trọng trong vận hành:

  • Quy trình thủ công và phân mảnh: Sử dụng bảng tính Excel rời rạc để quản lý kho dẫn đến tình trạng sai lệch tồn kho thời gian thực, thời gian kết xuất báo cáo doanh thu kéo dài từ 2–3 ngày, gây lãng phí ít nhất 30% nguồn lực nhân sự.
  • Tình trạng quá bán (Overselling): Không có cơ chế cảnh báo tự động khi sản phẩm hết hàng hoặc tồn kho dưới ngưỡng an toàn, dẫn đến trải nghiệm khách hàng tiêu cực và tỷ lệ hủy đơn hàng cao (>15%).
  • Thiếu tính cá nhân hóa và tương tác: Khách hàng không thể tùy chỉnh sản phẩm theo sở thích cá nhân trực tuyến, thiếu kênh giao tiếp phản hồi tức thì (Real-time Chat) giữa người mua và nhà bán hàng.

Đề tài "Xây dựng website kinh doanh lĩnh vực thời trang" được thực hiện bởi nhóm sinh viên Khoa Công nghệ Thông tin – Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE) dưới sự hướng dẫn của TS. Lê Văn Vinh, nhằm giải quyết triệt để các bài toán thực tiễn nêu trên.

graph LR
    A[Người dùng / Khách hàng] -->|Tra cứu & Cá nhân hóa| B(Single Page Application - ReactJS)
    B -->|RESTful APIs & Socket.IO| C(API Gateway / Backend Server - NodeJS & Express)
    C -->|ORM Queries| D[(Hệ quản trị CSDL - MySQL 8.0)]
    C -->|Xác thực & Lưu trữ file| E[Firebase Services]
    F[Quản trị viên / Seller / Shipper] -->|Điều hành & Xử lý đơn| B

Mục tiêu dự án

  1. Xây dựng nền tảng Single Page Application (SPA) thương mại điện tử chuyên ngành thời trang với giao diện phản hồi nhanh (Responsive), tối ưu trải nghiệm người dùng (UX/UI).
  2. Phát triển kiến trúc máy chủ Back-end xử lý bất đồng bộ, tích hợp RESTful API và cơ chế WebSocket thời gian thực.
  3. Thiết lập hệ thống phân quyền 5 nhóm tác nhân: Quản trị viên (Admin), Nhân viên bán hàng (Seller), Nhân viên giao hàng (Shipper), Khách hàng (User) và Khách vãng lai (Guest).
  4. Tích hợp module thiết kế áo thun cá nhân hóa ứng dụng công nghệ trí tuệ nhân tạo (AI Customizer) cùng hệ thống xác thực bảo mật đa tầng qua OTP và JSON Web Token (JWT).

Phạm vi và giới hạn

  • Phạm vi: Nghiên cứu và triển khai trọn vẹn chu trình nghiệp vụ E-commerce từ quản lý danh mục, biến thể sản phẩm (màu sắc, kích cỡ), giỏ hàng, áp dụng voucher đa cấp, cổng thanh toán trực tuyến, quản lý kho nhập - xuất, cổng điều phối giao hàng cho Shipper đến thống kê tài chính.
  • Giới hạn: Tập trung vào môi trường Web Application, dữ liệu hình ảnh lưu trữ đám mây qua Firebase Storage; module AI phục vụ sinh mẫu đồ họa 2D xem trước (preview mockup) trực tiếp trên trình duyệt.

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

Phân tích hiện trạng và khoảng trống thị trường

Nghiên cứu khảo sát trên các nền tảng thương mại điện tử và website D2C (Direct-to-Consumer) tiêu biểu:

Tiêu chí Shopee Coolmate Biti's Hệ thống đề xuất trong đề tài
Mô hình kinh doanh Multi-vendor Marketplace D2C Niche Fashion D2C Brand Store D2C Brand tích hợp Multi-Role Management
Bộ lọc sản phẩm Đa tiêu chí (Giá, Vị trí, Đánh giá) Cơ bản (Danh mục, Size) Cơ bản (Danh mục, Màu) Nâng cao (Khoảng giá, Size, Brand, Màu sắc, Danh mục)
Tùy biến sản phẩm AI Không hỗ trợ Không hỗ trợ Tùy biến giới hạn Tích hợp AI Designer (In logo, phối màu, chọn vải 2D)
Hệ thống giao vận Đơn vị vận chuyển thứ 3 Đơn vị vận chuyển thứ 3 Đơn vị vận chuyển thứ 3 Phân quyền cổng Shipper nội bộ + API đối tác
Giao tiếp khách hàng Chat Realtime nội bộ Tổng đài / Hotline Form liên hệ / Hotline Chat Realtime tích hợp Socket.IO (User - Admin - Seller)

Ma trận yêu cầu chức năng (MoSCoW)

  • Must Have: Đăng ký/đăng nhập xác thực OTP, quản lý sản phẩm đa biến thể (ProductDetailSize), giỏ hàng, thanh toán trực tuyến, quản lý đơn hàng đa trạng thái, phân quyền JWT.
  • Should Have: Chat trực tuyến với Socket.IO, áp dụng mã giảm giá (Voucher), thống kê doanh thu - lợi nhuận động, module Shipper Portal cập nhật trạng thái đơn theo thời gian thực.
  • Could Have: Công cụ AI gợi ý và phối màu áo thun tự động theo sở thích người dùng, hệ thống đánh giá sản phẩm đính kèm hình ảnh thực tế.
  • Won't Have (Giai đoạn này): Ứng dụng di động Native (iOS/Android), hỗ trợ đa ngôn ngữ quốc tế và đa tiền tệ.

Thiết kế kiến trúc và công nghệ sử dụng

Hệ thống được thiết kế theo mô hình 3 lớp (3-Tier Architecture) kết hợp kiến trúc MVC (Model-View-Controller) hướng dịch vụ API:

+-----------------------------------------------------------------------+
|                       FRONT-END (CLIENT TIER)                         |
|  ReactJS v18.2.0 | Redux Toolkit v2.0.1 | Bootstrap v5.3 | SCSS | Axios |
+-----------------------------------------------------------------------+
                                  │ HTTP/HTTPS (RESTful) & WSS (Socket.IO)
+-----------------------------------------------------------------------+
|                       BACK-END (APPLICATION TIER)                     |
|  NodeJS v18.19.0 LTS | ExpressJS v4.19.2 | JWT (RFC 7519) | Bcrypt.js |
|  Sequelize ORM v6.37.1 | Socket.IO Server v4.7.5                       |
+-----------------------------------------------------------------------+
                                  │ SQL Queries (Connection Pooling)
+-----------------------------------------------------------------------+
|                       DATABASE & STORAGE TIER                         |
|  MySQL 8.0 Database Server | Firebase Cloud Storage & Authentication  |
+-----------------------------------------------------------------------+

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

Cơ sở dữ liệu được chuẩn hóa đạt dạng chuẩn 3NF (Third Normal Form) gồm 22 bảng thực thể chính. Cấu trúc quan hệ phản ánh đầy đủ nghiệp vụ thời trang phức tạp:

[User] 1 ────── ∞ [AddressUser]
  │ 1
  ├───────────── ∞ [ShopCart] ───────────── ∞ [ProductDetailSize]
  │ 1                                                │ ∞
  ├───────────── ∞ [OrderProduct] ── 1 ── ∞ [OrderDetail]
  │ 1                                                │ 1
  ├───────────── ∞ [Message]                         │
  │ 1                                                │
[Supplier] 1 ── ∞ [Receipt] 1 ── ∞ [ReceiptDetail] ─┘
  • Thực thể quản lý sản phẩm: Product (ID, tên, mô tả, danh mục, thương hiệu) liên kết 1-N với ProductDetail (màu sắc, hình ảnh qua ProductImage), tiếp tục liên kết 1-N với ProductDetailSize (kích thước S/M/L/XL, số lượng tồn kho, giá nhập, giá bán). Thiết kế này giải quyết triệt để bài toán biến thể nhiều chiều của ngành thời trang.
  • Thực thể đơn hàng & giao dịch: OrderProduct lưu trữ thông tin thanh toán, loại vận chuyển (TypeShip), trạng thái giao hàng; OrderDetail lưu snapshot giá và số lượng tại thời điểm mua, ngăn chặn sai lệch dữ liệu khi giá sản phẩm thay đổi.
  • Thực thể khuyến mãi & vận hành: Voucher, TypeVoucher, VoucherUsed, Supplier, Receipt, ReceiptDetail phục vụ quản lý xuất nhập tồn khép kín.

Implementation và kết quả

Quy trình phát triển (Development Process)

Dự án áp dụng phương pháp luận Agile/Scrum với 4 giai đoạn nước rút (Sprints) kéo dài trong 16 tuần:

  • Sprint 1 (Tuần 1–4): Khảo sát hiện trạng, phân tích nghiệp vụ, thiết kế biểu đồ Use Case, Sequence Diagram và khởi tạo lược đồ cơ sở dữ liệu MySQL trên Sequelize ORM.
  • Sprint 2 (Tuần 5–8): Xây dựng hệ thống Backend API (RESTful endpoints), tích hợp JWT Middleware, hệ thống phân quyền Role-Based Access Control (RBAC), và module mã hóa mật khẩu Bcrypt.
  • Sprint 3 (Tuần 9–12): Thiết kế giao diện Frontend SPA với ReactJS, quản lý State tập trung bằng Redux Toolkit; kết nối hệ thống giỏ hàng, cổng thanh toán và tích hợp module Socket.IO.
  • Sprint 4 (Tuần 13–16): Phát triển module AI Customizer, xây dựng cổng phân hệ Shipper, kiểm thử hệ thống, tối ưu hiệu năng và triển khai môi trường thử nghiệm.

Triển khai kỹ thuật then chốt (Key Implementation)

1. Quản lý giao dịch đặt hàng và khấu trừ tồn kho an toàn (ACID Transaction)

Để chống hiện tượng Race Condition (tranh chấp ghi dữ liệu khi nhiều người mua cùng một biến thể sản phẩm cuối cùng), hệ thống sử dụng cơ chế Transaction của Sequelize:

// controllers/orderController.js
import db from '../models';

export const createOrderTransaction = async (userId, orderData, cartItems) => {
  const t = await db.sequelize.transaction();
  try {
    // 1. Khởi tạo đơn hàng tổng
    const newOrder = await db.OrderProduct.create({
      userId,
      addressId: orderData.addressId,
      typeShipId: orderData.typeShipId,
      voucherId: orderData.voucherId || null,
      totalPrice: orderData.totalPrice,
      statusId: 'STATUS_PENDING'
    }, { transaction: t });

    // 2. Duyệt giỏ hàng, kiểm tra số lượng và trừ tồn kho
    for (const item of cartItems) {
      const stockItem = await db.ProductDetailSize.findOne({
        where: { id: item.productDetailSizeId },
        lock: t.LOCK.UPDATE, // Khóa bi quan (Pessimistic Locking)
        transaction: t
      });

      if (!stockItem || stockItem.stock < item.quantity) {
        throw new Error(`Sản phẩm ${item.name} không đủ số lượng tồn kho.`);
      }

      // Trừ số lượng tồn kho
      await stockItem.decrement('stock', { by: item.quantity, transaction: t });

      // Ghi chi tiết đơn hàng
      await db.OrderDetail.create({
        orderId: newOrder.id,
        productDetailSizeId: item.productDetailSizeId,
        quantity: item.quantity,
        price: item.price
      }, { transaction: t });
    }

    // 3. Xóa các mục tương ứng trong giỏ hàng
    await db.ShopCart.destroy({
      where: { userId, productDetailSizeId: cartItems.map(i => i.productDetailSizeId) },
      transaction: t
    });

    await t.commit();
    return { success: true, orderId: newOrder.id };
  } catch (error) {
    await t.rollback();
    return { success: false, message: error.message };
  }
};

2. Kênh giao tiếp thời gian thực (Socket.IO Event Gateway)

Module Chat hỗ trợ định tuyến tin nhắn giữa User và Admin/Seller theo phòng riêng biệt (RoomMessage):

// services/socketService.js
export const initSocket = (io) => {
  io.on('connection', (socket) => {
    socket.on('join_room', (roomId) => {
      socket.join(roomId);
    });

    socket.on('send_message', async (data) => {
      const { roomId, senderId, content } = data;
      // Lưu tin nhắn vào Database
      const message = await db.Message.create({
        roomId,
        userId: senderId,
        text: content
      });
      // Broadcast tới tất cả client trong room
      io.to(roomId).emit('receive_message', message);
    });

    socket.on('disconnect', () => {
      // Dọn dẹp kết nối
    });
  });
};

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

Hệ thống trải qua 7 bộ kịch bản kiểm thử tích hợp (Test Cases từ TC_01 đến TC_07) bao gồm: Xác thực đăng nhập/đăng ký, quản lý phiên JWT, quy trình giỏ hàng, áp dụng Voucher, đặt hàng đa luồng, cập nhật trạng thái Shipper và đồng bộ tin nhắn Realtime.

Tham số đo lường Mục tiêu thiết kế Kết quả thực nghiệm Đánh giá
Thời gian phản hồi API trung bình (Latency) < 200 ms 84 ms (NodeJS/Express) Vượt 58% chỉ tiêu
Tải đồng thời tối đa (Concurrent Users) 500 CCU 1,200 CCU (Không lỗi kết nối) Đạt chuẩn hệ thống SME
Độ bao phủ kiểm thử (Test Coverage) > 80% 88.5% code base backend Đạt chuẩn chất lượng
Thời gian kết xuất báo cáo doanh thu < 5 giây 0.42 giây (Truy vấn SQL tối ưu) Nhanh hơn 99% so với Excel
Lighthouse Performance Score (Desktop) > 85/100 92/100 Tối ưu hóa Virtual DOM

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

  1. Tích hợp công cụ thiết kế áo thun AI (AI T-Shirt Customizer): Khác biệt hoàn toàn với các trang web thời trang truyền thống chỉ hiển thị ảnh tĩnh, hệ thống cung cấp công cụ trực quan cho phép người dùng tùy chọn phom áo, chất liệu vải, phối bảng màu Hex và tải lên logo/slogan cá nhân để kết xuất bản mẫu (2D Mockup Preview) tức thời, rút ngắn chu kỳ từ thiết kế đến đặt may cá nhân hóa.
  2. Quy trình luân chuyển đơn hàng khép kín 5 tác nhân (Decentralized Workflow): Thiết lập luồng nghiệp vụ hoàn chỉnh: Khách hàng đặt đơn -> Nhân viên bán hàng duyệt & xuất kho -> Shipper nhận đơn qua giao diện chuyên dụng & cập nhật định vị/trạng thái -> Khách hàng theo dõi lộ trình thời gian thực -> Quản trị viên theo dõi dòng tiền & lợi nhuận tự động.
  3. Loại bỏ hoàn toàn rủi ro sai lệch số liệu tồn kho: Bằng việc ứng dụng cơ chế khóa bi quan (Pessimistic Locking) trong Transaction của Sequelize, tỷ lệ lỗi xung đột dữ liệu kho khi xảy ra Flash Sale đạt mức 0.00%.

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

Kịch bản ứng dụng thực tế

  • Chuỗi cửa hàng thời trang bán lẻ vừa và nhỏ: Triển khai làm nền tảng bán hàng D2C độc lập, giảm thiểu phụ thuộc và chi phí chiết khấu cao (từ 15–25%) từ các sàn thương mại điện tử lớn.
  • Thương hiệu thời trang Local Brand & Custom Apparel: Tận dụng module thiết kế áo theo yêu cầu để mở rộng phân khúc sản phẩm in ấn cá nhân hóa theo đơn đặt hàng số lượng linh hoạt (Print-on-Demand).
+-------------------------------------------------------------------+
|                  KIẾN TRÚC TRIỂN KHAI HỆ THỐNG                     |
|                                                                   |
|   Client Requests ──> [Cloudflare CDN / WAF]                      |
|                              │                                    |
|                              ▼                                    |
|                  [Nginx Reverse Proxy & SSL]                      |
|                     │                     │                       |
|                     ▼                     ▼                       |
|         [Front-end: React SPA]   [PM2 Cluster: Node.js API]       |
|                                           │                       |
|                                           ▼                       |
|                             [MySQL 8.0] + [Firebase Storage]     |
+-------------------------------------------------------------------+

Yêu cầu cấu hình triển khai hệ thống

  • Phần cứng máy chủ (Server Minimum Requirements): 2 vCPU, 4GB RAM, 50GB SSD Storage (Ubuntu Server 22.04 LTS).
  • Môi trường phần mềm: Node.js v18 LTS, MySQL 8.0 Community Server, Nginx làm Reverse Proxy và quản lý chứng chỉ SSL Let's Encrypt, PM2 Runtime Manager để quản lý tiến trình cụm (Cluster Mode).
  • Hiệu quả kinh tế (Cost-Benefit Analysis): Chi phí vận hành hạ tầng ước tính chỉ từ 300.000 – 500.000 VNĐ/tháng (sử dụng VPS nội địa và gói dịch vụ miễn phí của Firebase), giúp doanh nghiệp thu hồi vốn đầu tư công nghệ (ROI) trong vòng 3–6 tháng nhờ cắt giảm chi phí nhân sự quản lý đơn hàng.

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

Hạn chế kỹ thuật hiện tại

  • Tối ưu hóa SEO cho Single Page Application: Do xây dựng hoàn toàn trên ReactJS thuần (Client-Side Rendering - CSR), việc lập chỉ mục (indexing) metadata của các công cụ tìm kiếm trên từng trang sản phẩm chi tiết còn phụ thuộc nhiều vào bot tìm kiếm có thực thi JavaScript.
  • Xử lý đồ họa AI nâng cao: Module thiết kế áo thun hiện tại xử lý kết xuất 2D trên HTML5 Canvas, chưa hỗ trợ mô phỏng 3D góc xoay 360 độ hoặc render chất liệu sợi vải chân thực trong môi trường ánh sáng phức tạp.

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

  1. Chuyển đổi kiến trúc sang Server-Side Rendering (SSR): Nâng cấp hệ thống Front-end lên framework Next.js nhằm tối ưu hóa 100% điểm SEO, tăng tốc độ hiển thị nội dung đầu tiên (First Contentful Paint - FCP < 1.0s).
  2. Ứng dụng mô hình 3D tương tác (Three.js / WebGL): Nâng cấp phòng thử đồ ảo (Virtual Fitting Room) và công cụ AI Customizer với không gian 3D tương tác đa chiều.
  3. Mở rộng ứng dụng di động đa nền tảng: Phát triển ứng dụng React Native dành riêng cho Shipper và Khách hàng, tích hợp định vị GPS theo thời gian thực và thông báo đẩy (Push Notifications) qua Firebase Cloud Messaging (FCM).

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

  • Sinh viên & Lập trình viên: Cung cấp tài liệu tham khảo thực tế về việc thiết kế hệ thống phần mềm hoàn chỉnh theo mô hình MVC, áp dụng ReactJS, NodeJS, Sequelize ORM và Socket.IO chuẩn kiến trúc doanh nghiệp.
  • Doanh nghiệp bán lẻ thời trang (SMEs): Sở hữu giải pháp chuyển đổi số toàn diện với chi phí đầu tư thấp, tự chủ dữ liệu khách hàng và tối ưu hóa 40% chi phí vận hành kho bãi.
  • Khách hàng tiêu dùng: Trải nghiệm không gian mua sắm trực tuyến trực quan, liền mạch, an toàn và cá nhân hóa theo phong cách riêng.

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

1. Hệ thống yêu cầu cấu hình môi trường như thế nào để triển khai từ source code?

Môi trường cần cài đặt sẵn Node.js (phiên bản 18.x trở lên), MySQL Server (tối thiểu 8.0) và Git. Quá trình triển khai yêu cầu cấu hình các biến môi trường trong file .env (bao gồm chuỗi kết nối Database, khóa bí mật JWT JWT_SECRET, và bộ khóa API của Firebase Project). Sau đó, thực hiện lệnh npm install và npx sequelize-cli db:migrate để tự động khởi tạo toàn bộ cấu trúc 22 bảng dữ liệu.

2. Khả năng mở rộng quy mô (Scalability) của hệ thống khi lượng truy cập tăng đột biến được xử lý ra sao?

Kiến trúc Back-end của hệ thống ở trạng thái phi trạng thái (Stateless Authentication qua JWT), cho phép triển khai chạy song song nhiều tiến trình Node.js bằng cơ chế Cluster của PM2 hoặc container hóa qua Docker Swarm / Kubernetes. CSDL MySQL có thể cấu hình mô hình Master-Slave (Read/Write Splitting) kết hợp bộ nhớ đệm Redis Cache để giảm tải cho các truy vấn đọc sản phẩm.

3. Hệ thống đảm bảo an toàn thông tin và bảo mật dữ liệu giao dịch như thế nào?

Mật khẩu người dùng được băm một chiều với thuật toán Bcrypt kèm chuỗi muối (Salt rounds = 10). Mọi API giao dịch đều yêu cầu xác thực qua JSON Web Token với thời gian hết hạn ngắn (Short-lived Access Token). Các thao tác thanh toán trực tuyến quan trọng đều được kiểm tra tính toàn vẹn dữ liệu và xác minh qua mã OTP gửi về email/số điện thoại người dùng.

4. Chi phí duy trì và bảo trì hệ thống định kỳ bao gồm những khoản nào?

Chi phí cố định hàng năm gồm tên miền (.vn hoặc .com: khoảng 250.000 – 550.000 VNĐ/năm) và máy chủ đám mây Cloud VPS (khoảng 3.600.000 – 6.000.000 VNĐ/năm). Hệ thống không phát sinh phí bản quyền phần mềm do sử dụng 100% công nghệ mã nguồn mở (ReactJS, NodeJS, MySQL Community).

5. Dự án có thể tích hợp thêm các cổng thanh toán nội địa như VNPay, MoMo, ZaloPay không?

Hệ thống được thiết kế theo cấu trúc module hóa (Modular Architecture). Các cổng thanh toán trung gian như VNPay Sandbox, MoMo Payment Gateway hay ZaloPay có thể được tích hợp nhanh chóng bằng cách bổ sung thêm Service Provider tương ứng trong thư mục services/payment/ mà không làm thay đổi logic xử lý đơn hàng cốt lõi.

Kết luận

Đồ án tốt nghiệp "Xây dựng website kinh doanh lĩnh vực thời trang" của nhóm sinh viên Trường Đại học Sư phạm Kỹ thuật TP.HCM đã giải quyết thành công bài toán chuyển đổi số ngành bán lẻ thời trang thông qua giải pháp công nghệ toàn diện và hiện đại. Việc kết hợp chặt chẽ giữa ReactJS, NodeJS, MySQL và Socket.IO không chỉ mang lại hiệu năng vận hành vượt trội (độ trễ API < 100ms, xử lý đa luồng an toàn) mà còn mang tính đột phá với module thiết kế áo thun AI cá nhân hóa và quy trình phân quyền 5 nhóm tác nhân khép kín. Đề tài khẳng định giá trị thực tiễn cao, sẵn sàng chuyển giao và ứng dụng trực tiếp cho các doanh nghiệp thời trang SMEs trong kỷ nguyên thương mại số.