Giới thiệu dự án

Thương mại điện tử (E-commerce) trong kỷ nguyên số hóa đã trở thành trụ cột thiết yếu của nền kinh tế bán lẻ toàn cầu. Theo các báo cáo thị trường công nghệ thông tin tại Việt Nam, ngành hàng thiết bị điện tử, đặc biệt là máy tính xách tay (laptop), chứng kiến tốc độ tăng trưởng kép hàng năm (CAGR) trên 15%. Tuy nhiên, phần lớn các doanh nghiệp bán lẻ vừa và nhỏ (SMEs) vẫn đối mặt với bài toán tối ưu hóa chi phí vận hành, quản lý dữ liệu tập trung và nâng cao trải nghiệm người dùng tương tác trong thời gian thực (real-time interaction).

Đồ án tốt nghiệp chuyên ngành Hệ thống Thông tin – Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh với đề tài "Tìm hiểu công nghệ Spring Boot và ReactJS - Ứng dụng xây dựng website bán laptop (LaptopPT)" do sinh viên Bùi Lê Tấn Phi và Vũ Trung Tín thực hiện dưới sự hướng dẫn của TS. Nguyễn Thành Sơn, được thiết kế nhằm giải quyết triệt để các hạn chế của những hệ thống bán hàng truyền thống thông qua việc áp dụng kiến trúc phân tách hiện đại kết hợp trí tuệ nhân tạo.

                    ┌────────────────────────────────────────┐
                    │      HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ       │
                    │         LAPTOPPT ARCHITECTURE          │
                    └───────────────────┬────────────────────┘
                                        │
             ┌──────────────────────────┴──────────────────────────┐
             ▼                                                     ▼
┌─────────────────────────┐                               ┌─────────────────────────┐
│   CLIENT-SIDE (SPA)     │                               │  SERVER-SIDE (REST API) │
│  • ReactJS 18 + Redux   │◄──────── HTTP/JSON ──────────►│  • Spring Boot 2.4/2.6  │
│  • Web Speech API       │        (JWT Auth Token)       │  • Spring Data JPA      │
│  • Firebase Realtime SDK│                               │  • Spring Security      │
└─────────────────────────┘                               └────────────┬────────────┘
             │                                                         │
             ▼                                                         ▼
┌─────────────────────────┐                               ┌─────────────────────────┐
│   EXTERNAL AI & CLOUD   │                               │    DATABASE & MAILING   │
│  • OpenAI ChatGPT API   │                               │  • MySQL 8.0 Engine     │
│  • PayPal REST SDK      │                               │  • JavaMailSender SMTP  │
│  • Google OAuth 2.0     │                               │  • Telegram Alert Bot   │
└─────────────────────────┘                               └─────────────────────────┘

Mục tiêu cụ thể của dự án

  1. Xây dựng kiến trúc phân tách Client-Server hoàn chỉnh: Phát triển hệ thống Backend cung cấp dịch vụ RESTful API bằng Spring Boot và Frontend Single Page Application (SPA) hiệu năng cao bằng ReactJS kết hợp quản lý trạng thái Redux.
  2. Hiện đại hóa bảo mật và kiểm soát truy cập: Triển khai cơ chế xác thực không trạng thái (Stateless Authentication) dựa trên JSON Web Token (JWT) và tích hợp đăng nhập qua bên thứ ba bằng Google OAuth 2.0.
  3. Đột phá trải nghiệm người dùng (UX) thông qua công nghệ mới:
    • Tích hợp mô hình ngôn ngữ lớn (LLM) OpenAI ChatGPT để tự động hóa tư vấn cấu hình laptop theo nhu cầu chuyên biệt.
    • Ứng dụng Web Speech API cho phép tìm kiếm sản phẩm bằng giọng nói tiếng Việt.
    • Xây dựng chế độ xem sản phẩm xoay 360 độ (360-degree interactive view).
    • Thiết lập kênh hỗ trợ trực tiếp thời gian thực (Real-time Live Chat) giữa Admin và Khách hàng qua Firebase Realtime Database.
  4. Tự động hóa luồng nghiệp vụ kinh doanh: Tích hợp cổng thanh toán trực tuyến quốc tế PayPal SDK, hệ thống gửi email kích hoạt và đặt lại mật khẩu tự động qua giao thức SMTP (Simple Mail Transfer Protocol), cùng hệ thống thông báo trạng thái đơn hàng tức thì qua Telegram Bot API.

Phạm vi và giới hạn đề tài

  • Phạm vi ứng dụng: Đáp ứng đầy đủ quy trình nghiệp vụ của chuỗi cửa hàng bán lẻ laptop: Quản lý danh mục, biến thể cấu hình, nhà cung cấp, kho hàng, giỏ hàng, đặt hàng, đánh giá/bình luận, danh sách yêu thích (Wishlist) và bảng điều khiển quản trị (Admin Dashboard).
  • Giới hạn hệ thống: Tích hợp thanh toán trực tuyến qua môi trường Sandbox của PayPal; sử dụng máy chủ thư điện tử Gmail SMTP (giới hạn 500 emails/ngày cho tài khoản tiêu chuẩn); lưu trữ phi cấu trúc hỗ trợ hình ảnh qua Firebase Cloud Storage.

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

Phân tích hiện trạng và khảo sát thị trường

Nhóm nghiên cứu đã thực hiện khảo sát chuyên sâu các nền tảng bán lẻ laptop hàng đầu tại thị trường Việt Nam (bao gồm Thegioididong, FPT Shop, NguyenKim, PhucAnh, ViettelStore) nhằm đánh giá ưu, nhược điểm và xác định khoảng trống công nghệ cần cải tiến.

Tiêu chí phân tích Hệ thống Monolith truyền thống (PHP/JSP cũ) Nền tảng E-commerce lớn (Thegioididong, FPT Shop) Hệ thống LaptopPT (Spring Boot + ReactJS)
Kiến trúc hệ thống Server-Side Rendering (SSR) dính kết cao Microservices phân tán phức tạp Decoupled Client-Server (RESTful API + SPA)
Tốc độ phản hồi giao diện Chậm (Phải reload toàn bộ DOM) Nhanh (Ứng dụng CDN và Caching nhiều lớp) Tức thì (Virtual DOM + Redux Global State)
Hỗ trợ khách hàng Form tĩnh / Email phản hồi trễ Tổng đài viên / Livechat riêng biệt Hybrid AI (ChatGPT) + Realtime Livechat (Firebase)
Tìm kiếm tương tác Chỉ hỗ trợ Text Search cơ bản Text Search + Bộ lọc đa tiêu chí Text Search + Smart Filter + Voice Search (Web Speech API)
Trải nghiệm hình ảnh Hình ảnh tĩnh 2D Hình ảnh 2D độ phân giải cao / Video review Hình ảnh 2D + Chế độ tương tác xoay 360 độ
Chi phí hạ tầng Trung bình, khó mở rộng độc lập Rất cao, đòi hỏi đội ngũ vận hành lớn Tối ưu, khả năng đóng gói Docker và scale độc lập

Bảng ưu tiên yêu cầu người dùng (Mô hình MoSCoW)

  • Must have (Bắt buộc): Xác thực JWT, Catalog sản phẩm đa thuộc tính, Giỏ hàng, Đặt hàng đa bước, Thanh toán PayPal, Phân quyền RBAC (Role-Based Access Control: Admin/Customer), Quản lý người dùng và nhà cung cấp.
  • Should have (Nên có): Chatbot tư vấn cấu hình tự động qua OpenAI ChatGPT, Kênh chat trực tiếp thời gian thực Admin-Customer qua Firebase, Tìm kiếm giọng nói qua Web Speech API, Trình xem ảnh 360 độ.
  • Could have (Có thể có): Thông báo đơn hàng mới tức thì về nhóm quản trị qua Telegram Bot, Danh sách sản phẩm yêu thích (Wishlist), Hệ thống đánh giá sao và bình luận sản phẩm.
  • Won't have (Chưa thực hiện ở phiên bản này): Mô hình sàn thương mại điện tử đa người bán (Multi-vendor marketplace), Tích hợp nhà vận chuyển bên thứ ba (GHN, GHTK API).

Thiết kế hệ thống và Cơ sở dữ liệu

Hệ thống được thiết kế theo mô hình 4 tầng phân lập rõ ràng (Layered Architecture):

┌──────────────────────────────────────────────────────────────┐
│  Presentation Layer: ReactJS Components, Redux Store, Axios  │
├──────────────────────────────────────────────────────────────┤
│  Controller Layer: Spring REST Controllers, Filter, Security │
├──────────────────────────────────────────────────────────────┤
│  Service / Business Layer: Business Logic, DTOs, Mappers     │
├──────────────────────────────────────────────────────────────┤
│  Data Persistence Layer: Spring Data JPA, Hibernate, MySQL   │
└──────────────────────────────────────────────────────────────┘

Ngăn xếp công nghệ chi tiết

  • Backend Runtime & Framework: Java 8 / Java 11, Spring Boot 2.4.x / 2.6.x
  • Core Dependencies: spring-boot-starter-web, spring-boot-starter-data-jpa, spring-boot-starter-security, spring-boot-starter-mail, jjwt (Java JWT Version 0.9.1), lombok
  • Frontend Framework & Libraries: ReactJS 18, Redux Toolkit, React Router DOM v6, Axios, Bootstrap 5 / Tailwind CSS
  • Database Engine: MySQL 8.0 Community Server (InnoDB Engine, UTF8MB4 charset)
  • External Integration SDKs: Firebase Realtime Database SDK, OpenAI API Client, PayPal Checkout SDK, Telegram Bot API

Thiết kế cơ sở dữ liệu vật lý (Physical Data Schema)

Cơ sở dữ liệu quan hệ được chuẩn hóa ở dạng chuẩn 3NF với 9 thực thể trọng tâm:

-- Bảng tài khoản và phân quyền
CREATE TABLE `account` (
  `id` BIGINT AUTO_INCREMENT PRIMARY KEY,
  `username` VARCHAR(50) NOT NULL UNIQUE,
  `password` VARCHAR(255) NOT NULL,
  `full_name` VARCHAR(100) NOT NULL,
  `email` VARCHAR(100) NOT NULL UNIQUE,
  `phone` VARCHAR(20),
  `address` TEXT,
  `role` VARCHAR(20) DEFAULT 'ROLE_USER',
  `status` BIT(1) DEFAULT 1,
  `reset_token` VARCHAR(100),
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bảng danh mục và chi tiết sản phẩm laptop
CREATE TABLE `product` (
  `id` BIGINT AUTO_INCREMENT PRIMARY KEY,
  `name` VARCHAR(255) NOT NULL,
  `supplier_id` BIGINT NOT NULL,
  `cpu` VARCHAR(100),
  `ram` VARCHAR(50),
  `storage` VARCHAR(100),
  `gpu` VARCHAR(100),
  `screen_size` VARCHAR(50),
  `price` DECIMAL(15,2) NOT NULL,
  `quantity` INT NOT NULL DEFAULT 0,
  `description` LONGTEXT,
  `image_main` VARCHAR(500),
  `images_360_json` LONGTEXT,
  `is_featured` BIT(1) DEFAULT 0,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (`supplier_id`) REFERENCES `supplier`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bảng quản lý đơn hàng
CREATE TABLE `orders` (
  `id` BIGINT AUTO_INCREMENT PRIMARY KEY,
  `account_id` BIGINT NOT NULL,
  `recipient_name` VARCHAR(100) NOT NULL,
  `phone` VARCHAR(20) NOT NULL,
  `address` TEXT NOT NULL,
  `total_amount` DECIMAL(15,2) NOT NULL,
  `payment_method` VARCHAR(50) DEFAULT 'COD',
  `payment_status` VARCHAR(50) DEFAULT 'PENDING',
  `order_status` VARCHAR(50) DEFAULT 'NEW',
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (`account_id`) REFERENCES `account`(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Implementation và kết quả

Chi tiết giải thuật và lập trình Backend (Spring Boot)

1. Cơ chế xác thực phân quyền Stateless với JWT (JSON Web Token)

Bộ lọc xác thực JwtAuthenticationFilter chặn mọi HTTP Request gửi tới các Private Endpoint, trích xuất chuỗi Token từ Authorization Header (Bearer <Token>), giải mã bằng khóa bí mật HMAC-SHA256 (HS256), nạp thông tin quyền hạn vào SecurityContextHolder:

@Component
public class JwtTokenProvider {
    @Value("${app.jwt.secret}")
    private String jwtSecret;

    @Value("${app.jwt.expiration-milliseconds}")
    private long jwtExpirationInMs;

    public String generateToken(Authentication authentication) {
        UserDetails userPrincipal = (UserDetails) authentication.getPrincipal();
        Date now = new Date();
        Date expiryDate = new Date(now.getTime() + jwtExpirationInMs);

        return Jwts.builder()
                .setSubject(userPrincipal.getUsername())
                .setIssuedAt(new Date())
                .setExpiration(expiryDate)
                .claim("roles", userPrincipal.getAuthorities())
                .signWith(SignatureAlgorithm.HS256, jwtSecret)
                .compact();
    }

    public boolean validateToken(String authToken) {
        try {
            Jwts.parser().setSigningKey(jwtSecret).parseClaimsJws(authToken);
            return true;
        } catch (SignatureException | MalformedJwtException | ExpiredJwtException | UnsupportedJwtException | IllegalArgumentException ex) {
            log.error("JWT Security Validation Error: {}", ex.getMessage());
            return false;
        }
    }
}

2. Dịch vụ gửi email xác thực và khôi phục tài khoản qua JavaMailSender (SMTP)

Cấu hình giao thức SMTP với cơ chế mật khẩu ứng dụng (App Password) của Gmail, đảm bảo truyền dữ liệu mã hóa qua cổng bảo mật TLS/SSL (Port 587):

@Service
public class EmailService {
    @Autowired
    private JavaMailSender mailSender;

    @Async
    public void sendResetPasswordEmail(String toEmail, String token) {
        SimpleMailMessage message = new SimpleMailMessage();
        message.setFrom("laptopshop.pt.system@gmail.com");
        message.setTo(toEmail);
        message.setSubject("[LaptopPT] Xác nhận yêu cầu đặt lại mật khẩu");
        message.setText("Vui lòng truy cập đường dẫn sau để đặt lại mật khẩu: "
                + "http://localhost:3000/reset-password?token=" + token
                + "\nThời hạn hiệu lực của liên kết là 15 phút.");
        mailSender.send(message);
    }
}

Triển khai Frontend và Tích hợp dịch vụ ngoại vi (ReactJS)

1. Module tư vấn AI tương tác thông minh qua OpenAI GPT-3.5 API

Giao diện chatbox tích hợp API của OpenAI cho phép phân tích ngữ cảnh câu hỏi của người dùng và tư vấn chính xác model laptop phù hợp:

import axios from "axios";

export const fetchChatGPTRecommendation = async (userPrompt) => {
  const apiKey = process.env.REACT_APP_OPENAI_API_KEY;
  const endpoint = "https://api.openai.com/v1/chat/completions";

  const systemContext = `Bạn là trợ lý bán hàng chuyên nghiệp tại cửa hàng LaptopPT. 
  Hãy tư vấn ngắn gọn, tập trung vào CPU, RAM, GPU, dung lượng pin và ngân sách phù hợp.`;

  try {
    const response = await axios.post(
      endpoint,
      {
        model: "gpt-3.5-turbo",
        messages: [
          { role: "system", content: systemContext },
          { role: "user", content: userPrompt }
        ],
        temperature: 0.7,
        max_tokens: 350
      },
      {
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${apiKey}`
        }
      }
    );
    return response.data.choices[0].message.content;
  } catch (error) {
    console.error("OpenAI API Service Error:", error);
    throw new Error("Không thể kết nối tới máy chủ AI trợ lý.");
  }
};

2. Đồng bộ hóa tin nhắn hỗ trợ trực tiếp thời gian thực qua Firebase Realtime Database

Khai thác cơ chế WebSockets nền tảng của Firebase để lắng nghe sự kiện thay đổi dữ liệu trên từng node phòng chat khách hàng (account_id):

import { getDatabase, ref, set, onValue, push } from "firebase/database";
import { app } from "./firebaseConfig";

const db = getDatabase(app);

// Ghi nhận tin nhắn mới từ phía người dùng
export const writeUserChatData = (userId, sender, messageText) => {
  const chatRef = ref(db, `chats/${userId}/messages`);
  const newMessageRef = push(chatRef);
  set(newMessageRef, {
    sender: sender,
    message: messageText,
    timestamp: Date.now()
  });
};

// Lắng nghe realtime các tin nhắn mới gửi từ Quản trị viên
export const listenToChatUpdates = (userId, callback) => {
  const chatRef = ref(db, `chats/${userId}/messages`);
  return onValue(chatRef, (snapshot) => {
    const data = snapshot.val();
    const messages = data ? Object.values(data) : [];
    callback(messages);
  });
};

3. Bộ nhận diện giọng nói tiếng Việt với Web Speech API

Xây dựng tính năng tìm kiếm bằng giọng nói trực tiếp trên trình duyệt mà không cần cài đặt thêm thư viện nặng:

export const initVoiceSearch = (onResultCallback, onErrorCallback) => {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SpeechRecognition) {
    onErrorCallback("Trình duyệt không hỗ trợ Web Speech API.");
    return null;
  }

  const recognition = new SpeechRecognition();
  recognition.lang = "vi-VN";
  recognition.continuous = false;
  recognition.interimResults = false;

  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    onResultCallback(transcript);
  };

  recognition.onerror = (err) => {
    onErrorCallback(err.error);
  };

  return recognition;
};

Kiểm thử và Đánh giá hiệu năng hệ thống

Hệ thống đã trải qua quy trình kiểm thử toàn diện bao gồm: Kiểm thử đơn vị (Unit Testing với JUnit & Mockito), Kiểm thử tích hợp API (Postman Test Suites với 65 test cases), Kiểm thử giao diện người dùng (Manual UAT) và Kiểm thử tải (Load Testing với Apache JMeter).

Kiểm thử tải hệ thống với Apache JMeter (Kịch bản 500 Virtual Users đồng thời):
├── Tỷ lệ truy vấn HTTP 200 thành công: 99.85%
├── Thời gian phản hồi trung bình (Average Latency): 142 ms
├── Băng thông xử lý tối đa (Throughput): 420 requests/second
└── Tỷ lệ lỗi (Error Rate): 0.15% (Chủ yếu do giới hạn timeout kết nối ngoại vi)
Hạng mục kiểm thử Công cụ thực hiện Số kịch bản (Test Cases) Tỷ lệ thành công (%) Ghi chú đánh giá
Xác thực & Bảo mật (Auth & RBAC) Postman, JUnit 18 100% Chặn thành công 100% truy cập trái phép
Nghiệp vụ Giỏ hàng & Đơn hàng UAT, Postman 22 100% Tính toán chính xác giá trị, thuế và phí vận chuyển
Tích hợp Thanh toán PayPal PayPal Sandbox 8 100% IPN Webhook đồng bộ trạng thái đơn hàng tức thì
Tích hợp Dịch vụ AI & Realtime Browser, Firebase Console 17 94.1% 1 lỗi timeout phát sinh khi OpenAI API quá tải

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

  1. Kiến trúc Hybrid AI kết hợp Human Live-Chat: Khác biệt với các website bán lẻ thông thường (chỉ dùng kịch bản chatbot cố định dạng Rule-based), LaptopPT kết hợp linh hoạt khả năng xử lý ngôn ngữ tự nhiên của ChatGPT để tự động hóa giải đáp thắc mắc thông số kỹ thuật 24/7, đồng thời cung cấp kênh chuyển tiếp mượt mà sang tư vấn viên thực tế qua Firebase Realtime Database khi gặp các bài toán bảo hành, khuyến mãi chuyên biệt.
  2. Nâng cao khả năng tiếp cận với Voice Search đa phương thức: Ứng dụng Web Speech API chuẩn hóa ngữ âm tiếng Việt giúp người dùng tìm kiếm sản phẩm nhanh hơn 60% so với thao tác gõ bàn phím truyền thống, đặc biệt tiện lợi trên các thiết bị màn hình cảm ứng hoặc người dùng lớn tuổi.
  3. Trải nghiệm số hóa sản phẩm thực tế với 360-degree Image Viewer: Xử lý chuỗi ảnh đa góc độ tải từ Firebase Storage, giúp khách hàng quan sát chi tiết từng cổng kết nối, khe tản nhiệt và bàn phím của laptop, giúp giảm tỷ lệ đổi trả hàng dự kiến xuống dưới 3%.
  4. Hiệu năng vượt trội nhờ tối ưu hóa Client-State: Việc kết hợp Redux để lưu trữ trạng thái danh mục và thông tin phiên làm việc cục bộ giúp giảm 42% số lượng request dư thừa lên cơ sở dữ liệu MySQL, duy trì tốc độ phản hồi trang dưới 1.2 giây trong điều kiện mạng tiêu chuẩn.

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

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

Giải pháp website LaptopPT được tối ưu hóa đặc thù cho các chuỗi bán lẻ máy tính xách tay, trung tâm sửa chữa nâng cấp linh kiện và các doanh nghiệp phân phối thiết bị tin học có quy mô từ 1 đến 20 chi nhánh.

                  ┌────────────────────────────────────────┐
                  │          DEPLOYMENT TOPOLOGY           │
                  └───────────────────┬────────────────────┘
                                      │
                 ┌────────────────────┴────────────────────┐
                 ▼                                         ▼
   ┌───────────────────────────┐             ┌───────────────────────────┐
   │     STATIC WEB HOSTING    │             │      API CLOUD SERVER     │
   │  • Vercel / Netlify / CDN │             │  • Dockerized Container   │
   │  • ReactJS Production SPA │             │  • Spring Boot Application│
   └─────────────┬─────────────┘             │  • OpenJDK 11 Alpine      │
                 │                           └─────────────┬─────────────┘
                 │                                         │
                 │ HTTPS (Port 443)                        │ Reverse Proxy (Nginx)
                 │                                         │
                 └────────────────────┬────────────────────┘
                                      │
                                      ▼
                         ┌───────────────────────────┐
                         │      MANAGED DATABASE     │
                         │  • MySQL 8.0 Instance     │
                         │  • Automated Daily Backup │
                         └───────────────────────────┘

Chiến lược triển khai (Deployment Architecture)

  1. Containerization: Đóng gói mã nguồn Spring Boot bằng Dockerfile tối ưu kích thước dựa trên hình ảnh openjdk:11-jre-slim, triển khai đồng bộ qua Docker Compose.
  2. Reverse Proxy & Bảo mật: Sử dụng Nginx làm Reverse Proxy, tiếp nhận kết nối an toàn HTTPS qua chứng chỉ SSL/TLS miễn phí từ Let's Encrypt, cấu hình bộ đệm Gzip và Rate Limiting chống tấn công từ chối dịch vụ (DDoS) cơ bản.
  3. Phân tích hiệu quả kinh tế (ROI & TCO Breakdown):
    • Chi phí đầu tư hạ tầng ban đầu: Cực thấp nhờ khai thác các gói miễn phí/tiêu chuẩn (Free Tier) của Firebase, Vercel, Let's Encrypt và OpenAI API trả phí theo nhu cầu thực tế (Pay-as-you-go ~ $5 - $10/tháng).
    • Thời gian thu hồi vốn (ROI Timeline): Ước tính từ 3 đến 6 tháng thông qua việc cắt giảm 50% chi phí nhân sự trực chat ban đêm và giảm thiểu chi phí in ấn catalogue giới thiệu sản phẩm vật lý.

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

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

  • Phụ thuộc vào dịch vụ bên thứ ba: Trải nghiệm trợ lý ảo phụ thuộc hoàn toàn vào tính khả dụng và độ trễ của OpenAI API; việc gửi mail bị giới hạn bởi chính sách định mức của máy chủ Gmail SMTP (500 mail/ngày).
  • Cơ chế tìm kiếm văn bản: Truy vấn SQL dạng LIKE %keyword% truyền thống trên MySQL tuy đáp ứng tốt quy mô dưới 10.000 sản phẩm nhưng sẽ giảm hiệu năng khi mở rộng dữ liệu lớn (Big Data).

Định hướng nâng cấp trong tương lai

  1. Nâng cấp công nghệ lõi: Chuyển đổi mã nguồn Backend lên phiên bản Spring Boot 3.x và Java 17 / 21 LTS, áp dụng Virtual Threads (Project Loom) nhằm tối ưu hóa xử lý đa luồng đồng thời.
  2. Tích hợp công cụ tìm kiếm chuyên dụng: Triển khai cụm Elasticsearch / OpenSearch phục vụ tìm kiếm toàn văn (Full-Text Search), hỗ trợ xử lý lỗi chính tả và gợi ý từ khóa thông minh (Auto-suggestion).
  3. Đa dạng hóa cổng thanh toán nội địa: Bổ sung tích hợp các cổng thanh toán trực tuyến phổ biến tại Việt Nam như VNPay, MoMo, ZaloPay qua giao thức chữ ký số HMAC-SHA512.
  4. Kiến trúc Microservices & Caching nâng cao: Phân tách các module Đơn hàng, Thanh toán và Thông báo thành các dịch vụ độc lập, tích hợp Redis Caching để giảm tải 80% truy vấn trực tiếp vào cơ sở dữ liệu vật lý.

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

                              CỘNG ĐỒNG HƯỞNG LỢI
                                      │
        ┌──────────────────┬──────────┴──────────┬──────────────────┐
        ▼                  ▼                     ▼                  ▼
┌───────────────┐  ┌───────────────┐     ┌───────────────┐  ┌───────────────┐
│   SINH VIÊN   │  │  LẬP TRÌNH    │     │  DOANH NGHIỆP │  │  CHUYÊN GIA   │
│   & HỌC VIÊN  │  │     VIÊN      │     │    BÁN LẺ     │  │  NGHIÊN CỨU   │
│ • Tài liệu mẫu│  │ • Clean Code  │     │ • Tiết kiệm   │  │ • Ứng dụng AI │
│ • Chuẩn hóa   │  │ • Best        │     │   40% chi phí │  │   thương mại  │
│   báo cáo     │  │   practices   │     │ • Tăng 35% CR │  │ • Khảo sát UX │
└───────────────┘  └───────────────┘     └───────────────┘  └───────────────┘
  • Sinh viên và Học viên Công nghệ Thông tin: Tiếp cận tài liệu tham khảo hoàn chỉnh, chuẩn mực về việc xây dựng đồ án tốt nghiệp kỹ sư CNTT; nắm vững phương pháp kết nối giữa Spring Framework và thư viện ReactJS.
  • Lập trình viên Fullstack: Sở hữu bộ khung kiến trúc (Boilerplate) chất lượng cao, bao gồm đầy đủ cấu hình bảo mật Spring Security JWT, Redux State Pattern, và mã nguồn tích hợp Firebase/OpenAI/PayPal chuẩn chỉ.
  • Doanh nghiệp bán lẻ và Chủ cửa hàng: Sở hữu giải pháp thương mại điện tử trọn gói với chi phí bản quyền 0 đồng, giúp tăng tỷ lệ chuyển đổi đơn hàng (CR) thêm 25 - 35% nhờ các tính năng tương tác đa kênh tân tiến.
  • Nhà nghiên cứu ứng dụng: Cung cấp dữ liệu thực nghiệm về tính khả thi khi kết hợp mô hình ngôn ngữ lớn (LLM) và Web Speech API vào các hệ thống thương mại trực tuyến thực tế.

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

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

Hệ thống yêu cầu tối thiểu 1 vCPU, 2GB RAM (khuyến nghị 4GB RAM nếu chạy chung cơ sở dữ liệu), hệ điều hành Linux (Ubuntu 20.04/22.04 LTS hoặc CentOS) hoặc Windows Server. Môi trường cần cài đặt sẵn Java Runtime Environment (JRE/JDK 11 trở lên), Node.js (phiên bản 16.x hoặc 18.x LTS), MySQL Server 8.0, và Nginx làm Web Server điều phối cổng.

2. Hệ thống có khả năng chịu tải tối đa bao nhiêu người dùng đồng thời?

Với kiến trúc phi trạng thái (Stateless) của Spring Boot và cơ chế render phía Client của ReactJS, trên một máy chủ tiêu chuẩn 2 vCPU - 4GB RAM, hệ thống đáp ứng ổn định 400 - 500 yêu cầu/giây (Requests Per Second), tương đương phục vụ đồng thời khoảng 2.000 - 3.000 người dùng trực tuyến duyệt sản phẩm mà không bị nghẽn cổ chai.

3. Làm thế nào để tích hợp thêm các cổng thanh toán nội địa như VNPay hay MoMo?

Nhờ kiến trúc phân lớp hướng dịch vụ (Service-Oriented Pattern), nhà phát triển chỉ cần tạo thêm các Service Class tương ứng (ví dụ: VNPayService, MoMoService) kế thừa từ interface thanh toán chung, triển khai phương thức khởi tạo URL thanh toán kèm mã hóa Checksum (HMAC-SHA512) và định cấu hình API tiếp nhận Webhook IPN từ nhà cung cấp để cập nhật trạng thái bảng orders.

4. Chi phí duy trì hệ thống hàng tháng ước tính là bao nhiêu?

Nếu triển khai ở quy mô vừa và nhỏ: Máy chủ Cloud VPS (khoảng 150.000 - 300.000 VNĐ/tháng), Tên miền thương hiệu (khoảng 250.000 VNĐ/năm), Chi phí sử dụng API OpenAI GPT-3.5 (khoảng 100.000 - 200.000 VNĐ/tháng tùy lượng truy vấn). Các dịch vụ Firebase Realtime, Vercel Hosting và Let's Encrypt SSL hoàn toàn miễn phí ở gói tiêu chuẩn. Tổng chi phí duy trì chỉ dao động trong khoảng 300.000 - 500.000 VNĐ/tháng.

5. Quá trình bảo trì và sao lưu dữ liệu được thực hiện ra sao?

Cơ sở dữ liệu MySQL được cấu hình lệnh Cron Job tự động kết xuất tệp tin mysqldump hàng ngày vào lúc 02:00 sáng và mã hóa đẩy lên dịch vụ lưu trữ đám mây (Google Drive hoặc AWS S3). Mã nguồn được quản lý phiên bản tập trung qua Git, cho phép thực hiện bảo trì, vá lỗi hoặc cập nhật tính năng mới với thời gian gián đoạn dịch vụ (Downtime) gần như bằng 0 thông qua kỹ thuật Blue-Green Deployment hoặc Docker Swarm rolling update.

Kết luận

Đồ án tốt nghiệp "Tìm hiểu công nghệ Spring Boot và ReactJS. Ứng dụng xây dựng website bán laptop" của nhóm sinh viên Bùi Lê Tấn Phi và Vũ Trung Tín (Khoa Công nghệ Thông tin – Trường Đại học Sư phạm Kỹ thuật TP.HCM) đã hoàn thành xuất sắc các mục tiêu nghiên cứu và triển khai ứng dụng thực tiễn đề ra. Dự án không chỉ chứng minh tính ưu việt của việc kết hợp hai nền tảng công nghệ mạnh mẽ hàng đầu thế giới hiện nay là Spring Boot và ReactJS trong việc xây dựng hệ thống thương mại điện tử chuyên nghiệp, mà còn tiên phong tích hợp các giải pháp công nghệ thời thượng như Trí tuệ nhân tạo (OpenAI ChatGPT), Cơ sở dữ liệu thời gian thực (Firebase Realtime Database) và Nhận dạng giọng nói (Web Speech API).

Mã nguồn mở và kiến trúc thiết kế của đề tài là tài liệu học thuật và kỹ thuật vô cùng giá trị dành cho cộng đồng lập trình viên, sinh viên các trường đại học kỹ thuật, cũng như mở ra giải pháp chuyển đổi số hiệu quả, tối ưu chi phí cho các doanh nghiệp bán lẻ máy tính trong kỷ nguyên công nghệ 4.0.