Giới thiệu dự án

Theo báo cáo của Hiệp hội Thương mại Điện tử Việt Nam (VECOM), thị trường thương mại điện tử (TMĐT) Việt Nam đạt tốc độ tăng trưởng trên 25% mỗi năm, trong đó ngành hàng thời trang và may mặc luôn nằm trong top 3 nhóm ngành có doanh thu trực tuyến cao nhất. Tuy nhiên, phần lớn các doanh nghiệp vừa và nhỏ (SMEs) cùng các cửa hàng thời trang bán lẻ truyền thống đang đối mặt với bài toán chuyển đổi số: phụ thuộc hoàn toàn vào sàn TMĐT của bên thứ ba dẫn đến chi phí chiết khấu cao (15 - 25%), thiếu quyền kiểm soát dữ liệu khách hàng và khó xây dựng nhận diện thương hiệu độc lập.

Đồ án tốt nghiệp "Xây dựng Website Kinh doanh Thời trang sử dụng ReactJS và Spring Boot" do sinh viên Nguyễn Trường Giang (MSSV: 19145369) và Nguyễn Xuân Bách (MSSV: 19110158) thực hiện dưới sự hướng dẫn của ThS. Nguyễn Trần Thi Văn tại Khoa Công nghệ Thông tin – Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh (HCMUTE) tập trung giải quyết triệt để các rào cản trên bằng một nền tảng bán hàng trực tuyến toàn diện, hiệu năng cao và có khả năng mở rộng linh hoạt.

+-------------------------------------------------------------------------+
|                  VẤN ĐỀ VÀ MỤC TIÊU CỦA HỆ THỐNG                        |
+-------------------------------------------------------------------------+
|  Vấn đề tồn đọng:                                                       |
|  - Phụ thuộc sàn TMĐT, mất quyền sở hữu dữ liệu khách hàng.            |
|  - Giao diện cồng kềnh, tải trang chậm (> 3s), tỷ lệ bỏ giỏ hàng cao.  |
|  - Thiếu hệ thống quản trị danh mục đa cấp và theo dõi đơn hàng mở.   |
|                                                                         |
|  Mục tiêu cốt lõi:                                                      |
|  1. Xây dựng Single-Page Application (SPA) phản hồi thời gian thực.     |
|  2. Thiết kế RESTful Backend chuẩn Stateless với JWT Authentication.    |
|  3. Chuẩn hóa cơ sở dữ liệu quan hệ cho thời trang đa biến thể.         |
|  4. Tối ưu thời gian phản hồi API < 200ms và tải trang < 1.5s.         |
+-------------------------------------------------------------------------+

Problem Statement và Pain Points

  • Trải nghiệm người dùng phân mảnh: Nhiều hệ thống thời trang trực tuyến hiện nay có giao diện rối mắt, thiếu khả năng phân loại trực quan theo biến thể (màu sắc, kích thước, hình ảnh chi tiết theo từng option), tốc độ tải trang chậm làm gián đoạn hành trình mua sắm.
  • Bảo mật và phân quyền lỏng lẻo: Việc quản lý phiên làm việc bằng Session truyền thống trên Server gây quá tải bộ nhớ khi lượng truy cập tăng đột biến, đồng thời dễ gặp lỗ hổng CSRF và rò rỉ dữ liệu phân quyền giữa Quản trị viên (Admin) và Khách hàng (User).
  • Đồng bộ dữ liệu đơn hàng và kho: Thiếu cơ chế theo dõi trạng thái đơn hàng (Pending, Confirmed, Shipping, Delivered, Cancelled) theo thời gian thực, gây khó khăn cho khâu vận hành.

Mục tiêu dự án

  1. Phát triển Frontend SPA hiện đại: Tối ưu hóa UI/UX với ReactJS và Vite.js, ứng dụng kiến trúc Component-based và Virtual DOM nhằm đạt tốc độ tải trang dưới 1.5 giây.
  2. Xây dựng Backend RESTful API chuẩn mực: Sử dụng Spring Boot với Spring Security và JSON Web Token (JWT) để cung cấp hơn 30 API endpoints an toàn, hiệu suất cao.
  3. Mô hình hóa dữ liệu quan hệ chặt chẽ: Thiết kế cơ sở dữ liệu MySQL với 14 bảng quan hệ, tối ưu hóa khóa ngoại và chỉ mục (indexing) để quản lý trơn tru danh mục đa cấp, biến thể sản phẩm và chi tiết đơn hàng.
  4. Triển khai quy trình kiểm thử toàn diện: Thực hiện kiểm thử chức năng (Functional Testing), kiểm thử bảo mật và đo lường hiệu năng chịu tải đạt tiêu chuẩn chuyển giao thực tế.

Phạm vi và Giới hạn (Scope & Limitations)

  • Phạm vi: Hệ thống phục vụ 3 nhóm tác nhân chính (Guest, User, Admin) với đầy đủ quy trình từ duyệt sản phẩm, lọc theo thuộc tính, quản lý giỏ hàng, đặt hàng, bình luận/đánh giá sản phẩm đến trang quản trị dành riêng cho Admin (quản lý sản phẩm, danh mục, đơn hàng, khách hàng, báo cáo doanh thu).
  • Giới hạn: Đồ án tập trung vào mô hình bán lẻ thời trang B2C nội địa; thanh toán trực tuyến được tích hợp mô phỏng theo cổng API chuẩn; hệ thống chưa tích hợp AI gợi ý sản phẩm tự động dựa trên hành vi duyệt web sâu.

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

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

Khảo sát thực tế 4 nền tảng kinh doanh thời trang nổi bật tại thị trường Việt Nam (Sly Clothing, Coolmate, Yame, Shein) cho thấy các ưu - nhược điểm kỹ thuật rõ rệt:

Nền tảng Công nghệ nhận diện Ưu điểm Nhược điểm / Lỗ hổng kỹ thuật
Sly Clothing WordPress / WooCommerce Giao diện tối giản, phân loại danh mục cơ bản tốt Thiếu hệ thống theo dõi hành trình đơn hàng chi tiết, tải trang khi filter chậm
Coolmate Headless Commerce / React Trải nghiệm mượt mà, phân loại size/màu trực quan Hệ thống phức tạp, chi phí duy trì cao, khó tùy biến cho SMEs
Yame Custom Monolith MVC Đa dạng sản phẩm, đầy đủ luồng mua sắm UI/UX cồng kềnh, không lưu vết lịch sử tương tác bình luận của user
Shein Microservices đa nền tảng Tính năng phong phú, khuyến mãi cá nhân hóa Giao diện quá tải thông tin, lỗi font trên một số trình duyệt, rủi ro bảo mật dữ liệu

Phân loại yêu cầu người dùng theo mô hình MoSCoW:

  • Must Have (Bắt buộc): Đăng ký/đăng nhập xác thực JWT, xem danh mục đa cấp (Category - Sub_Category), chọn thuộc tính biến thể (Product_Option, Color), quản lý giỏ hàng (Cart_Item), tạo đơn hàng (OrderE, OrderDetail), quản trị CRUD sản phẩm và danh mục.
  • Should Have (Nên có): Bình luận/phản hồi phân cấp (Comment, Sub_comment), cập nhật trạng thái đơn hàng thời gian thực, quản lý cấm/mở tài khoản người dùng, thống kê doanh thu theo thời gian.
  • Could Have (Có thể có): Tích hợp cổng thanh toán trực tuyến qua Sandbox API, lọc sản phẩm đa tiêu chí nâng cao, gửi mail xác nhận quên mật khẩu.
  • Won't Have (Chưa thực hiện ở giai đoạn này): Ứng dụng di động native iOS/Android, thuật toán gợi ý sản phẩm Machine Learning.

Thiết kế hệ thống

Hệ thống được thiết kế theo mô hình kiến trúc phân lớp tách biệt hoàn toàn (Decoupled Client-Server Architecture):

+-----------------------------------------------------------------------+
|                    CLIENT TIER (ReactJS + Vite)                       |
|  [Header / Nav]  [Product Catalog]  [Cart / Checkout]  [Admin Panel]  |
|  State Management (Hooks/Context) | HTTP Client (Axios + JWT Interceptor) |
+-----------------------------------||----------------------------------+
                                    || HTTPS / RESTful JSON
+-----------------------------------||----------------------------------+
|                   SERVER TIER (Spring Boot Framework)                 |
|  +-----------------------------------------------------------------+  |
|  | Security Filter Chain: JwtAuthenticationFilter -> SecurityCtx   |  |
|  +-----------------------------------------------------------------+  |
|  | Controller Layer: AuthController, ProductController, ...       |  |
|  | Service Layer: Business Logic, DTO Mapping, Transactions        |  |
|  | Repository Layer: Spring Data JPA / Hibernate ORM               |  |
|  +-----------------------------------------------------------------+  |
+-----------------------------------||----------------------------------+
                                    || JDBC (HikariCP)
+-----------------------------------||----------------------------------+
|                   DATABASE TIER (MySQL Database)                      |
|  Tables: User, Category, Product, Product_Option, Color, Image,      |
|          Cart_Item, OrderE, OrderDetail, Comment, Sub_comment...      |
+-----------------------------------------------------------------------+

Tech Stack và Version:

  • Frontend: React 18.2.0, Vite.js 4.4.0, React Router DOM 6.14.0, Axios 1.4.0, TailwindCSS / Bootstrap 5 UI.
  • Backend: Spring Boot 3.1.2 (Java 17 LTS), Spring Security 6.1.0, Spring Data JPA, Hibernate ORM 6.2, JJWT (Java JWT) 0.11.5, Lombok.
  • Database & Tools: MySQL 8.0 Community Server, MySQL Workbench 8.0, Postman, Git/GitHub.

Thiết kế Cơ sở Dữ liệu (Database Schema):

Cơ sở dữ liệu gồm 14 thực thể được chuẩn hóa về dạng 3NF:

  • User (id, email, password, full_name, phone, address, role, status, created_at)
  • Category (id, name, description) & Sub_Category (id, name, category_id)
  • Product (id, name, description, base_price, sub_category_id, created_at)
  • Product_Option (id, product_id, size, stock_quantity, additional_price)
  • Color (id, product_option_id, color_name, color_code)
  • Image (id, product_id, image_url, is_thumbnail)
  • Cart_Item (id, user_id, product_option_id, color_id, quantity)
  • OrderE (id, user_id, order_date, total_amount, payment_method, order_status, shipping_address)
  • OrderDetail / Order_Item (id, order_id, product_option_id, color_id, price, quantity)
  • Comment (id, user_id, product_id, content, created_at) & Sub_comment (id, comment_id, user_id, content, created_at)
-- Trích xuất bảng cốt lõi biểu diễn biến thể sản phẩm
CREATE TABLE product_option (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    product_id BIGINT NOT NULL,
    size VARCHAR(20) NOT NULL,
    stock_quantity INT NOT NULL DEFAULT 0,
    additional_price DECIMAL(10,2) DEFAULT 0.00,
    CONSTRAINT fk_option_product FOREIGN KEY (product_id) REFERENCES product(id) ON DELETE CASCADE
);

CREATE TABLE color (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    product_option_id BIGINT NOT NULL,
    color_name VARCHAR(50) NOT NULL,
    color_code VARCHAR(20) NOT NULL,
    CONSTRAINT fk_color_option FOREIGN KEY (product_option_id) REFERENCES product_option(id) ON DELETE CASCADE
);

Thiết kế API Endpoints chuẩn RESTful:

  • POST /api/v1/auth/login - Xác thực người dùng, trả về JWT Token và Role info.
  • POST /api/v1/auth/register - Đăng ký tài khoản mới với vai trò mặc định ROLE_USER.
  • GET /api/v1/products?page=0&size=12&category={id}&sort=price,asc - Lấy danh sách sản phẩm phân trang và lọc.
  • GET /api/v1/products/{id} - Lấy chi tiết sản phẩm, danh sách option, màu sắc và hình ảnh.
  • POST /api/v1/cart/items - Thêm sản phẩm vào giỏ hàng (Authorization: Bearer <token>).
  • PUT /api/v1/cart/items/{itemId} - Cập nhật số lượng sản phẩm trong giỏ hàng.
  • POST /api/v1/orders - Tạo đơn hàng mới từ giỏ hàng hiện tại.
  • PUT /api/v1/admin/orders/{orderId}/status - Quản trị viên cập nhật trạng thái giao hàng (ROLE_ADMIN).
  • PUT /api/v1/admin/users/{userId}/ban - Khóa/mở khóa tài khoản người dùng vi phạm.

Methodology và Quy trình phát triển

Dự án được thực hiện theo mô hình phát triển Agile/Scrum kết hợp quy trình quản lý mã nguồn GitFlow:

  • Chu kỳ Sprint: 5 Sprints (mỗi Sprint kéo dài 2-3 tuần), tổng thời gian thực hiện từ 01/08/2023 đến 20/12/2023.
  • Quản lý rủi ro: Định nghĩa các giải pháp dự phòng cho việc bất đồng bộ dữ liệu giỏ hàng, cơ chế chặn Cross-Origin Resource Sharing (CORS) giữa Frontend port 5173 và Backend port 8080.
  • Đảm bảo chất lượng (QA): Kiểm thử tự động API bằng Postman Collection Runner, kiểm thử tích hợp (Integration Test) trên tầng Repository và Service bằng Spring Boot Test / JUnit 5.

Implementation và kết quả

Development Process

Quá trình phát triển được phân bổ chi tiết qua các giai đoạn kỹ thuật:

[Sprint 1: Phân tích & DB Setup] ──> [Sprint 2: Backend Core & Security]
                                                  │
[Sprint 5: Testing & Deployment] <── [Sprint 4: Frontend & State Mgmt] <── [Sprint 3: Admin & Order Logic]
  • Sprint 1 (01/08 - 25/08/2023): Khảo sát hệ thống thực tế, mô hình hóa Use Case, thiết kế cơ sở dữ liệu trên MySQL Workbench, khởi tạo dự án Spring Boot và Vite React.
  • Sprint 2 (26/08 - 20/09/2023): Hiện thực hóa Spring Security 6 với JJWT. Cấu hình Filter Chain không lưu phiên (Stateless Session Management) và mã hóa mật khẩu bằng BCryptPasswordEncoder.
// Trích xuất cấu hình Spring Security & JWT Filter
@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfiguration {

    private final JwtAuthenticationFilter jwtAuthFilter;
    private final AuthenticationProvider authenticationProvider;

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .csrf(AbstractHttpConfigurer::disable)
            .cors(Customizer.withDefaults())
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/api/v1/auth/**", "/api/v1/products/**").permitAll()
                .requestMatchers("/api/v1/admin/**").hasAuthority("ROLE_ADMIN")
                .anyRequest().authenticated()
            )
            .sessionManagement(sess -> sess.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authenticationProvider(authenticationProvider)
            .addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class);

        return http.build();
    }
}
  • Sprint 3 (21/09 - 18/10/2023): Xây dựng các nghiệp vụ phức tạp: xử lý giỏ hàng (CartService), trừ tồn kho theo Product_Option trong Transaction @Transactional, tính toán tổng giá tiền và sinh mã đơn hàng OrderE.
  • Sprint 4 (19/10 - 20/11/2023): Phát triển giao diện ReactJS sử dụng Hooks (useState, useEffect, useContext, useMemo). Tích hợp Axios Interceptors tự động đính kèm JWT Header và điều hướng khi token hết hạn.
// Trích xuất Axios Interceptor xử lý Request & Token
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:8080/api/v1',
  headers: {
    'Content-Type': 'application/json',
  },
});

apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('access_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default apiClient;
  • Sprint 5 (21/11 - 20/12/2023): Kiểm thử liên thông End-to-End, tối ưu hóa kích thước bundle bằng Dynamic Import (React.lazy), sửa lỗi CSS responsive và hoàn thiện tài liệu khóa luận.

Testing và Validation

Hệ thống đã trải qua quá trình kiểm thử chức năng và phi chức năng nghiêm ngặt:

Danh mục kiểm thử Kịch bản thực hiện Số test cases Tỷ lệ Pass Ghi chú kết quả
Xác thực & Phân quyền Đăng ký, đăng nhập JWT, phân quyền Admin/User, cấm user 18 100% Token hết hạn xử lý đúng lỗi 401 Unauthorized
Quản lý Sản phẩm Thêm/sửa/xóa Product, thêm Option size/màu, upload ảnh 24 100% Xóa danh mục cha cascade an toàn hoặc có cảnh báo
Giỏ hàng & Đơn hàng Thêm vào giỏ, đổi số lượng, thanh toán, kiểm tra tồn kho 20 100% Khóa ghi nhận thành công, rollback khi hết hàng
Bình luận & Đánh giá Tạo bình luận, phản hồi sub-comment, xóa bình luận chính chủ 12 100% Chỉ user sở hữu hoặc Admin mới có quyền xóa
Tải trang & Hiệu năng Load test đồng thời 200 virtual users trên trang chủ 5 98% Response time trung bình đạt 145ms 
+-------------------------------------------------------------------------+
|                  KẾT QUẢ KIỂM THỬ VÀ HIỆU NĂNG                          |
+-------------------------------------------------------------------------+
|  Metric                     | Mục tiêu ban đầu   | Kết quả đạt được     |
|  ---------------------------+--------------------+--------------------  |
|  Thời gian tải trang đầu    | < 2.0s             | 1.18s (Vite ESM)     |
|  Độ trễ API trung bình      | < 250ms            | 120ms - 165ms        |
|  Unit/Integration Coverage  | > 75%              | 84.5%                |
|  Tỷ lệ sửa lỗi (Bug fix)   | 100% Blocker/Crit  | 0 bug nghiêm trọng   |
|  Độ hài lòng người dùng UAT | > 85%              | 93.2% (Thử nghiệm 50)|
+-------------------------------------------------------------------------+

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

  1. Kiến trúc dữ liệu biến thể linh hoạt (Variant-Driven Modeling): Khác với các hệ thống bán hàng truyền thống lưu trữ biến thể sản phẩm chung vào một bảng đơn giản, đồ án phân tách cấu trúc 3 tầng: Product -> Product_Option (kích thước, giá cộng thêm, tồn kho) -> Color (mã màu, tên màu) kết hợp bảng Image độc lập. Cấu trúc này giảm thiểu 40% sự dư thừa dữ liệu (data redundancy) và cho phép mở rộng không giới hạn các thuộc tính thời trang.
  2. Cơ chế xác thực không trạng thái (Stateless JWT Authentication): Loại bỏ hoàn toàn server-side session memory, giúp hệ thống sẵn sàng cho việc mở rộng theo chiều ngang (Horizontal Scaling) phía Backend mà không gặp vấn đề đồng bộ session cluster.
  3. Trải nghiệm Single-Page tối ưu với Vite.js: Khai thác tính năng Native ESM của Vite.js giúp rút ngắn thời gian khởi động server phát triển từ 45 giây (Webpack truyền thống) xuống 350 mili-giây, giảm kích thước gói bundle tải xuống 35% nhờ kỹ thuật Tree-shaking và Code-splitting.
  4. Hệ thống phân cấp bình luận (Threaded Comments): Hỗ trợ tương tác đa chiều giữa khách hàng và bộ phận chăm sóc khách hàng trực tiếp trên từng trang sản phẩm thông qua bảng Sub_comment có liên kết chặt chẽ.

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

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

  • Cửa hàng thời trang Local Brand: Thích hợp cho các thương hiệu vừa và nhỏ muốn xây dựng trang bán hàng riêng biệt, tự chủ 100% trong việc quản lý đơn sỉ/lẻ, tổ chức chương trình ưu đãi và quản lý trạng thái giao vận.
  • Chuỗi bán lẻ đa chi nhánh: Cung cấp cơ sở dữ liệu và REST API chuẩn để kết nối đồng bộ với hệ thống POS tại quầy hoặc ứng dụng quản trị kho ngoại vi.
+-------------------------------------------------------------------------+
|                  SƠ ĐỒ TRIỂN KHAI HỆ THỐNG (DEPLOYMENT)                 |
+-------------------------------------------------------------------------+
|                                                                         |
|   [ Internet Clients (Web Browsers) ]                                   |
|                  │                                                      |
|                  ▼ HTTPS (Port 443)                                     |
|   +──────────────────────────────────────+                              |
|   |         Reverse Proxy (Nginx)        |                              |
|   |  - Phục vụ Static Files (React App)  |                              |
|   |  - SSL Termination / Rate Limiting   |                              |
|   +──────────────────┬───────────────────+                              |
|                      │ Proxy Pass (/api/*)                              |
|                      ▼                                                  |
|   +──────────────────────────────────────+                              |
|   |    Backend Host (Docker Container)   |                              |
|   |    Spring Boot App (Port 8080)       |                              |
|   |    OpenJDK 17 + Embedded Tomcat      |                              |
|   +──────────────────┬───────────────────+                              |
|                      │ JDBC Connection (Port 3306)                      |
|                      ▼                                                  |
|   +──────────────────────────────────────+                              |
|   |       Database (MySQL 8.0 Server)    |                              |
|   |       InnoDB Engine + Auto Backup    |                              |
|   +──────────────────────────────────────+                              |
+-------------------------------------------------------------------------+

Phân tích chi phí - lợi ích (Cost-Benefit Analysis) & ROI:

  • Chi phí hạ tầng: 1 Máy chủ ảo (VPS Cloud 2 Core CPU, 4GB RAM, 50GB SSD) ~ 250.000 - 350.000 VNĐ/tháng.
  • Tiết kiệm chi phí vận hành: Giảm 15% - 20% phí hoa hồng trên mỗi đơn hàng so với việc bán hoàn toàn qua sàn TMĐT.
  • Thời gian hoàn vốn (ROI): Với cửa hàng đạt doanh thu từ 100 - 150 triệu VNĐ/tháng, nền tảng giúp hòa vốn đầu tư hệ thống chỉ sau 3 - 5 tháng vận hành thực tế.

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

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

  • Hệ thống chưa tích hợp kiến trúc Caching phân tán (như Redis) cho các truy vấn danh mục sản phẩm có tần suất đọc lớn.
  • Cổng thanh toán trực tuyến (VNPay / MoMo) mới dừng lại ở mức mô phỏng quy trình xử lý API Sandbox, chưa kích hoạt tài khoản doanh nghiệp thực tế.
  • Chưa có cơ chế thông báo thời gian thực (WebSockets / Push Notification) khi trạng thái đơn hàng thay đổi.

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

  1. Nâng cấp Caching & Search Engine: Tích hợp Redis Cache để lưu trữ giỏ hàng tạm thời và Elasticsearch để tìm kiếm toàn văn (Full-text Search) siêu tốc theo nhiều thuộc tính vải, kiểu dáng, mức giá.
  2. Triển khai Microservices: Tách các module Order-Service, Inventory-Service, Notification-Service thành các dịch vụ độc lập kết nối qua Apache Kafka hoặc RabbitMQ.
  3. Mở rộng Đa nền tảng: Xây dựng ứng dụng Mobile bằng React Native tái sử dụng 70% logic xử lý API và State hiện có.

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

  • Sinh viên ngành CNTT/KTPM: Đồ án là tài liệu tham khảo chuẩn mực về cách tổ chức mã nguồn Full-stack, cách tích hợp Spring Boot 3.x với React 18 và triển khai bảo mật JWT chuẩn quốc tế.
  • Lập trình viên (Developers): Cung cấp mẫu thiết kế (Design Pattern) cơ sở dữ liệu quan hệ tối ưu cho bài toán sản phẩm có nhiều biến thể phức tạp (Size/Color/Price Options).
  • Doanh nghiệp & Chủ shop thời trang: Sở hữu ngay một giải pháp website hoàn chỉnh, dễ dàng tự lưu trữ, tùy biến giao diện và cắt giảm chi phí trung gian.
  • Giảng viên và Nhà nghiên cứu: Bộ tài liệu hoàn chỉnh bao gồm đặc tả Use Case, lược đồ lớp, lược đồ tuần tự (Sequence Diagrams) và ma trận kiểm thử chi tiết phục vụ giảng dạy môn học Công nghệ phần mềm.

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

1. Yêu cầu phần cứng tối thiểu để triển khai hệ thống là gì?

Hệ thống backend Spring Boot và MySQL yêu cầu máy chủ có tối thiểu 2 vCPU, 2GB RAM (khuyến nghị 4GB RAM khi chạy cả Docker container) và 20GB dung lượng ổ cứng SSD trên nền tảng hệ điều hành Ubuntu 20.04/22.04 LTS. Phía Client chỉ cần trình duyệt web hiện đại hỗ trợ ECMAScript 6+.

2. Hệ thống xử lý thế nào khi có nhiều người cùng mua một sản phẩm còn số lượng tồn bằng 1?

Hệ thống sử dụng cơ chế Transaction @Transactional kết hợp cơ chế khóa dòng (Pessimistic Locking / Optimistic Locking) trong Spring Data JPA. Khi đơn hàng đầu tiên thực hiện kiểm tra stock_quantity > 0 và trừ tồn kho thành công, giao dịch tiếp theo sẽ nhận thông báo sản phẩm đã hết hàng và hủy tiến trình đặt, đảm bảo không bao giờ xảy ra tình trạng bán vượt tồn kho (Overselling).

3. Có thể tích hợp thêm cổng thanh toán VNPay hoặc MoMo không?

Hoàn toàn dễ dàng. Nhờ kiến trúc RESTful Controller chuẩn mực và Service Layer phân tách rõ ràng, nhà phát triển chỉ cần tạo thêm PaymentService kết nối đến SDK/API của VNPay/MoMo và cập nhật trường payment_method trong thực thể OrderE khi nhận Webhook IPN từ cổng thanh toán.

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

Bao gồm phí tên miền (.vn hoặc .com: ~250.000 - 750.000 VNĐ/năm), phí thuê VPS Cloud (~3.000.000 VNĐ/năm) và chứng chỉ bảo mật SSL (miễn phí thông qua Let's Encrypt Certbot).

5. Dữ liệu mật khẩu của người dùng được bảo vệ như thế nào?

Mật khẩu người dùng được băm một chiều (One-way Hashing) bằng thuật toán BCrypt với Salt ngẫu nhiên được sinh tự động trước khi lưu vào bảng User. Quản trị viên hay bất kỳ ai truy cập trực tiếp vào cơ sở dữ liệu đều không thể đọc được mật khẩu gốc.

Kết luận

Đồ án tốt nghiệp "Xây dựng Website Kinh doanh Thời trang sử dụng ReactJS và Spring Boot" của nhóm sinh viên Nguyễn Trường Giang và Nguyễn Xuân Bách đã hoàn thành xuất sắc toàn bộ các mục tiêu đặt ra: từ việc nghiên cứu lý thuyết chuyên sâu, khảo sát hiện trạng thực tế, thiết kế kiến trúc phân lớp chuẩn mực đến cài đặt hoàn chỉnh một ứng dụng TMĐT hoàn thiện. Sự kết hợp giữa sức mạnh xử lý luồng dữ liệu của Spring Boot tại Backend và tính tương tác linh hoạt của ReactJS tại Frontend đã tạo nên một sản phẩm phần mềm ổn định, bảo mật cao và sẵn sàng đưa vào ứng dụng thực tiễn cho các doanh nghiệp thời trang trong kỷ nguyên số.