Giới thiệu dự án

Thương mại điện tử (E-commerce) tại Việt Nam đang trải qua giai đoạn bùng nổ mạnh mẽ với tốc độ tăng trưởng bình quân đạt xấp xỉ 25% mỗi năm. Theo báo cáo khảo sát thị trường từ CBRE Việt Nam với 1.000 người tiêu dùng tại TP. Hồ Chí Minh và Hà Nội, có đến 25% khách hàng chủ động cắt giảm tần suất mua sắm trực tiếp tại cửa hàng truyền thống, trong khi 45% – 50% người tiêu dùng khẳng định sẽ gia tăng mua sắm trực tuyến. Đáng chú ý, 51% chủ doanh nghiệp bán lẻ trực tuyến xác định website là kênh bán lẻ chủ lực, vượt trội hơn các nền tảng mạng xã hội và sàn thương mại điện tử trung gian.

Tuy nhiên, phần lớn các hệ thống website bán hàng trực tuyến truyền thống dành cho các doanh nghiệp vừa và nhỏ (SMEs) đang đối mặt với nhiều rào cản kỹ thuật:

  • Kiến trúc nguyên khối (Monolithic Architecture) cồng kềnh: Khó khăn trong việc mở rộng quy mô, bảo trì phức tạp và một lỗi nhỏ có thể làm sập toàn bộ hệ thống.
  • Trải nghiệm người dùng (UX/UI) phân mảnh: Tốc độ tải trang chậm do phải render lại toàn bộ trang (Server-Side Rendering truyền thống), thiếu tính năng tương tác mượt mà.
  • Quy trình thanh toán thiếu linh hoạt: Hạn chế phương thức thanh toán tự động, thiếu khả năng tích hợp các cổng thanh toán quốc tế và nội địa.

Nhằm giải quyết triệt để các hạn chế trên, đề tài "Tìm hiểu Spring Boot, Angular 5, Microservices và Xây dựng website bán hàng trực tuyến" được nghiên cứu và phát triển bởi sinh viên Nguyễn Thị Trúc My và Dương Đại Dũng dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo tại Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh.

Mục tiêu cụ thể của dự án bao gồm:

  1. Nghiên cứu chuyên sâu và làm chủ các công nghệ hiện đại: Kiến trúc dịch vụ siêu nhỏ (Microservices), framework Spring Boot, framework Angular 5, giao thức RESTful APIs và công cụ ánh xạ quan hệ đối tượng Hibernate ORM.
  2. Phân tích, thiết kế và xây dựng hoàn chỉnh hệ thống thương mại điện tử chuyên ngành thời trang và phụ kiện với hai phân hệ độc lập: Quản trị viên (Admin) và Khách hàng (Client).
  3. Triển khai các tính năng nâng cao: Quản lý giỏ hàng bất đồng bộ, danh sách mong muốn (Wishlist) có thể điều chỉnh giá kỳ vọng, tìm kiếm đa tiêu chí và tích hợp cổng thanh toán trực tuyến PayPal.
  4. Đảm bảo các tiêu chuẩn phi chức năng: Thời gian phản hồi tìm kiếm dưới 5 giây, hỗ trợ xử lý đa tác vụ đồng thời và khả năng mở rộng dịch vụ độc lập.

Phạm vi của dự án tập trung vào nghiệp vụ bán lẻ thời trang trực tuyến, hỗ trợ hai phương thức thanh toán chính là thanh toán khi nhận hàng (COD - Cash On Delivery) và thanh toán điện tử qua PayPal Sandbox.

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

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

Qua khảo sát thực tế các nền tảng bán hàng hiện có trên thị trường, nhóm nghiên cứu đã tổng hợp và đánh giá ưu - nhược điểm của các giải pháp kiến trúc phổ biến:

Tiêu chí so sánh Hệ thống Monolithic truyền thống (PHP/JSP) Hệ thống Monolithic hiện đại (Spring MVC) Hệ thống Microservices + Angular SPA (Giải pháp đề xuất)
Kiến trúc Khối đơn nhất gắn chặt DB Phân tầng MVC, chung cơ sở dữ liệu Phân rã Microservices, tách biệt hoàn toàn Frontend/Backend
Trải nghiệm UI/UX Render lại toàn trang, độ trễ cao Tải trang chậm khi lưu lượng lớn Single Page Application (SPA), mượt mà, phản hồi tức thì
Khả năng mở rộng Rất khó, phải scale toàn bộ ứng dụng Mở rộng theo chiều dọc (Vertical Scaling) Mở rộng theo chiều ngang (Horizontal Scaling) từng service
Bảo trì & Nâng cấp Rủi ro cao, code phụ thuộc lẫn nhau Khó thay đổi công nghệ từng phần Dễ bảo trì, triển khai độc lập (Independent Deployment)
Thời gian phản hồi Trung bình 1.5s - 3.5s Trung bình 800ms - 1.5s Dưới 300ms đối với API data

Áp dụng phương pháp phân loại yêu cầu MoSCoW, các tính năng của hệ thống được định hình rõ ràng:

  • Must Have (Bắt buộc có): Đăng ký/đăng nhập, xem danh mục/chi tiết sản phẩm, tìm kiếm sản phẩm, quản lý giỏ hàng, đặt hàng thanh toán COD & PayPal, quản lý CRUD (Tạo, Đọc, Sửa, Xóa) sản phẩm/loại sản phẩm/người dùng dành cho Admin.
  • Should Have (Nên có): Quản lý danh sách mong muốn (Wishlist) với cơ chế theo dõi mức giá kỳ vọng, thống kê doanh số bán hàng theo mốc thời gian, cập nhật ảnh đại diện cá nhân.
  • Could Have (Có thể có): Khóa/Mở khóa tài khoản người dùng, phân quyền Admin động, đổi mật khẩu an toàn.
  • Won't Have (Chưa thực hiện): Sàn giao dịch đa nhà cung cấp (Multi-vendor marketplace), hệ thống live-chat trực tiếp thời gian thực.

Thiết kế hệ thống

Hệ thống được thiết kế theo mô hình phân tầng hướng dịch vụ, chia tách hoàn toàn giữa tầng giao diện người dùng và tầng nghiệp vụ backend.

graph TD
    Client["Client Browser (Angular 5 SPA)"] -->|RESTful APIs / JSON| Gateway["API Gateway / Routing Layer"]
    
    subgraph "Backend Services (Spring Boot Microservices)"
        Gateway --> AuthService["Authentication & User Service"]
        Gateway --> ProductService["Product & Category Service"]
        Gateway --> OrderService["Order & Payment Service"]
        Gateway --> WishlistService["Cart & Wishlist Service"]
    end
    
    subgraph "Data Persistence Layer (Hibernate ORM)"
        AuthService --> DB_User[("User Database")]
        ProductService --> DB_Product[("Product Database")]
        OrderService --> DB_Order[("Order Database")]
        WishlistService --> DB_Cart[("Cart Database")]
    end
    
    OrderService -->|SDK API Call| PayPal["PayPal Payment Gateway"]

Technology Stack và phiên bản chi tiết:

  • Frontend Framework: Angular 5.2.0, TypeScript 2.6.2, RxJS 5.5.6, HTML5, SCSS, Bootstrap 4.
  • Backend Framework: Spring Boot 2.0.x (Spring Data JPA, Spring Security, Spring Web).
  • ORM & Database: Hibernate 5.2.x, MySQL Server 5.7 / 8.0.
  • Thanh toán & Công cụ: PayPal REST API SDK v1.14, Postman, Maven build tool.

Thiết kế cơ sở dữ liệu quan hệ (RDBMS Schema):

Hệ thống bao gồm 9 thực thể chính với các ràng buộc khóa ngoại toàn vẹn dữ liệu:

  • USER (UserID, Username, Password, FullName, Email, Phone, Address, Avatar, RoleID)
  • USER_ROLE (RoleID, RoleName)
  • CATEGORY (CategoryID, CategoryName, Description)
  • PRODUCT (ProductID, ProductName, Price, Quantity, Description, Image, Status, CategoryID)
  • CART (CartID, UserID, TotalPrice)
  • CART_DETAIL (CartDetailID, CartID, ProductID, Quantity, UnitPrice)
  • BILL (BillID, UserID, OrderDate, TotalAmount, PaymentMethod, Status)
  • BILL_DETAIL (BillDetailID, BillID, ProductID, Quantity, Price)
  • WISHLIST (WishlistID, UserID, ProductID, ExpectedPrice, CreatedDate)

Thiết kế RESTful API Endpoints tiêu biểu:

  • POST /api/v1/auth/login: Xác thực tài khoản và khởi tạo phiên làm việc.
  • GET /api/v1/products?page=0&size=10: Lấy danh sách sản phẩm phân trang.
  • GET /api/v1/products/search?keyword={name}: Tra cứu sản phẩm theo từ khóa.
  • POST /api/v1/cart/items: Thêm sản phẩm vào giỏ hàng cá nhân.
  • POST /api/v1/checkout/paypal: Khởi tạo phiên thanh toán trực tuyến qua PayPal SDK.
  • GET /api/v1/admin/statistics/revenue: Truy xuất báo cáo doanh số theo chu kỳ.

Methodology

Dự án được triển khai theo phương pháp phát triển phần mềm lặp Agile/Scrum rút gọn trong 15 tuần (18/03/2019 đến 30/06/2019):

gantt
    title Lộ trình 15 tuần triển khai đồ án
    dateFormat  YYYY-MM-DD
    section Khảo sát & Thiết kế
    Tìm hiểu Microservices, Spring Boot, Angular: 2019-03-18, 7d
    Phân tích yêu cầu, Use Case & Sequence Diagram: 2019-03-25, 7d
    Thiết kế CSDL & Kiến trúc dữ liệu: 2019-04-01, 7d
    section Xây dựng UI Frontend
    Thiết kế giao diện Auth & Trang chủ: 2019-04-08, 7d
    Thiết kế UI Cart, Bill, Wishlist: 2019-04-15, 7d
    Thiết kế UI Admin & Quản trị danh mục: 2019-04-22, 7d
    section Phát triển Backend API
    Xây dựng API Auth & Catalog: 2019-04-29, 7d
    Xây dựng API Cart & Wishlist: 2019-05-06, 7d
    Xây dựng API Admin Management: 2019-05-13, 7d
    section Tích hợp & Kiểm thử
    Tích hợp API với UI Authentication/Home: 2019-05-20, 7d
    Tích hợp API với UI Product Detail & Cart: 2019-05-27, 7d
    Tích hợp API Quản trị Admin & Thống kê: 2019-06-03, 7d
    Kiểm thử hệ thống & Fix bugs: 2019-06-17, 7d
    Hoàn thiện báo cáo & Bảo vệ: 2019-06-24, 7d

Quản trị rủi ro kỹ thuật:

  • Rủi ro bất đồng bộ dữ liệu: Sử dụng Hibernate Session và @Transactional để đảm bảo tính trọn vẹn của giao dịch (Atomicity & Consistency).
  • Rủi ro CORS (Cross-Origin Resource Sharing): Cấu hình CorsRegistry tại Spring Boot để cho phép Frontend Angular gọi API an toàn.

Implementation và kết quả

Development process

Quá trình phát triển áp dụng chặt chẽ kiến trúc Clean Architecture ở Backend và Component-based Architecture ở Frontend.

1. Xây dựng tầng REST Controller trong Spring Boot

Đoạn mã điều khiển tiếp nhận yêu cầu sản phẩm và xử lý dữ liệu thông qua Hibernate Service:

package vn.edu.hcmute.shop.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import vn.edu.hcmute.shop.entity.Product;
import vn.edu.hcmute.shop.service.ProductService;
import java.util.List;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api/products")
public class ProductController {

    @Autowired
    private ProductService productService;

    @GetMapping
    public ResponseEntity<List<Product>> getAllActiveProducts() {
        List<Product> products = productService.findActiveProducts();
        return new ResponseEntity<>(products, HttpStatus.OK);
    }

    @GetMapping("/category/{categoryId}")
    public ResponseEntity<List<Product>> getProductsByCategory(@PathVariable("categoryId") Long categoryId) {
        List<Product> products = productService.findByCategoryId(categoryId);
        return new ResponseEntity<>(products, HttpStatus.OK);
    }

    @PostMapping
    public ResponseEntity<Product> createProduct(@RequestBody Product product) {
        Product savedProduct = productService.saveOrUpdate(product);
        return new ResponseEntity<>(savedProduct, HttpStatus.CREATED);
    }
}

2. Xây dựng Service bất đồng bộ với Angular 5 & RxJS

Angular Component gọi dữ liệu thông qua Angular Service sử dụng cơ chế Dependency Injection:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Product } from '../models/product.model';

@Injectable()
export class ProductService {
  private readonly API_URL = 'http://localhost:8080/api/products';
  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  constructor(private http: HttpClient) {}

  public getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.API_URL);
  }

  public getProductsByCategory(categoryId: number): Observable<Product[]> {
    return this.http.get<Product[]>(`${this.API_URL}/category/${categoryId}`);
  }

  public addProduct(product: Product): Observable<Product> {
    return this.http.post<Product>(this.API_URL, JSON.stringify(product), this.httpOptions);
  }
}

Testing và validation

Nhóm nghiên cứu đã thực hiện kiểm thử trên toàn bộ 29 chức năng Use Case chính thông qua các bài kiểm thử đơn vị (Unit Test), kiểm thử tích hợp (Integration Test) và kiểm thử giao diện người dùng (User Acceptance Test).

Hạng mục kiểm thử Số kịch bản (Test Cases) Đạt (Passed) Tỷ lệ thành công Thời gian phản hồi trung bình
Xác thực & Quản lý User 8 8 100% 120ms
Danh mục & Tìm kiếm SP 12 12 100% 185ms
Giỏ hàng & Wishlist 10 10 100% 140ms
Thanh toán (COD + PayPal) 6 6 100% 450ms (chờ phản hồi Sandbox)
Quản trị Admin & Thống kê 9 9 100% 210ms
  • Độ bao phủ kiểm thử: Đạt hơn 85% trên các hàm xử lý nghiệp vụ tại Service Layer.
  • Kiểm thử hiệu năng tìm kiếm: Đáp ứng yêu cầu phi chức năng khi tốc độ tra cứu sản phẩm trả về kết quả trong vòng 0.8 giây đối với tập dữ liệu mẫu 5.000 bản ghi, vượt xa tiêu chuẩn đặt ra (< 5 giây).

Kết quả đạt được

  • Hoàn thành 100% các chức năng đề ra trong đề cương: Quản lý hàng hóa, loại hàng, tài khoản, giỏ hàng, hóa đơn, thanh toán PayPal và thống kê trực quan.
  • Hệ thống hoạt động ổn định trên các trình duyệt hiện đại (Chrome, Firefox, Edge, Safari).
  • Giao diện người dùng tuân thủ nguyên lý Responsive Design, tương thích trên cả máy tính bàn (Desktop) và thiết bị di động (Mobile).

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

  1. Ứng dụng mô hình kiến trúc phân tán hiện đại: Thay vì áp dụng mô hình kiến trúc nguyên khối truyền thống, đề tài đã tiên phong ứng dụng kiến trúc Microservices kết hợp với Single Page Application (Angular 5), giúp giảm 40% dung lượng băng thông truyền tải giữa Client và Server.
  2. Tính năng Wishlist định hướng giá thông minh: Cho phép người dùng lưu trữ danh sách sản phẩm yêu thích kèm theo mức giá mong đợi (ExpectedPrice), tạo tiền đề kỹ thuật cho việc xây dựng hệ thống tự động gửi thông báo khi sản phẩm giảm giá đúng kỳ vọng.
  3. Cơ chế tách biệt độc lập Module: Áp dụng triệt để cơ chế @NgModule và Lazy Loading trong Angular 5, giúp tăng tốc độ tải trang ban đầu lên 35% so với các ứng dụng Single Page không phân tách Module.

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

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

Hệ thống là giải pháp hoàn chỉnh cho các chuỗi cửa hàng bán lẻ thời trang, giày dép, phụ kiện muốn sở hữu kênh bán hàng trực tuyến độc lập, loại bỏ chi phí hoa hồng trên các sàn thương mại điện tử trung gian.

Hướng dẫn triển khai (Deployment Guide)

  1. Yêu cầu phần cứng: Tối thiểu 2 vCPU, 4GB RAM, 20GB ổ cứng SSD.
  2. Cài đặt môi trường:
    • Cài đặt Java Development Kit (JDK 8 hoặc 11) và MySQL Server 5.7+.
    • Cài đặt Node.js v8.11.x và Angular CLI @angular/cli@1.7.4.
  3. Quy trình Build & Chạy ứng dụng: 
    # 1. Khởi chạy cơ sở dữ liệu MySQL
mysql -u root -p < database_schema.sql

# 2. Build và chạy Backend Spring Boot
cd backend-service
mvn clean package -DskipTests
java -jar target/ecommerce-microservice-1.0.0.jar

# 3. Build và chạy Frontend Angular
cd frontend-angular
npm install
ng build --prod
# Triển khai thư mục dist/ lên Web Server (Nginx hoặc Apache)

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

  • Hạn chế kỹ thuật: Hệ thống Microservices hiện đang vận hành trong môi trường máy chủ đơn (Single-host sandbox); chưa triển khai đầy đủ công cụ Service Discovery phân tán hoàn chỉnh (như Netflix Eureka hay Spring Cloud Gateway) và chưa tích hợp hệ thống Message Broker (Apache Kafka/RabbitMQ) cho xử lý đơn hàng quy mô lớn.
  • Hướng phát triển tương lai:
    • Tích hợp thêm các cổng thanh toán nội địa phổ biến tại Việt Nam như VNPay, MoMo, ZaloPay.
    • Xây dựng mô hình máy học (Machine Learning) hỗ trợ gợi ý sản phẩm cá nhân hóa dựa trên lịch sử mua sắm và danh sách Wishlist của khách hàng.
    • Đóng gói toàn bộ hệ thống bằng Docker container và quản lý cụm thông qua Kubernetes.

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

  • Sinh viên & Học viên: Tài liệu tham khảo thực tiễn chuẩn mực về cách tổ chức mã nguồn, kết nối Angular 5 SPA với Spring Boot REST API và quản lý dữ liệu qua Hibernate ORM.
  • Lập trình viên (Developers): Bản thiết kế mẫu về Clean Architecture, phân quyền hệ thống và tích hợp cổng thanh toán PayPal.
  • Doanh nghiệp bán lẻ (SMEs): Bộ giải pháp website bán hàng độc lập, chi phí đầu tư mã nguồn mở 0 đồng, dễ dàng tùy biến theo thương hiệu riêng.
  • Nhà nghiên cứu: Cung cấp số liệu thực nghiệm về hiệu năng khi chuyển dịch từ mô hình kiến trúc Monolithic sang Microservices.

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

1. Yêu cầu kỹ thuật tối thiểu để triển khai hệ thống là gì?
Hệ thống yêu cầu máy chủ cài đặt JDK 8 trở lên, Node.js v8+, hệ quản trị cơ sở dữ liệu MySQL 5.7+ và máy chủ web Nginx làm Reverse Proxy.

2. Hệ thống xử lý khả năng mở rộng (Scalability) như thế nào khi lượng người dùng tăng cao?
Nhờ kiến trúc Microservices, doanh nghiệp có thể nhân bản (scale-out) riêng các dịch vụ có tải cao (như ProductService hoặc OrderService) lên nhiều server độc lập mà không cần nâng cấp toàn bộ hệ thống.

3. Làm thế nào để tích hợp thêm cổng thanh toán mới như MoMo hay VNPay?
Tại tầng backend Order & Payment Service, lập trình viên chỉ cần triển khai thêm Service Adapter tương ứng theo mẫu thiết kế Factory Pattern dựa trên API đặc tả của nhà cung cấp ví điện tử.

4. Chi phí bảo trì hệ thống định kỳ bao gồm những gì?
Chi phí duy trì bao gồm phí thuê máy chủ đám mây (Cloud VPS), chi phí tên miền (Domain), chứng chỉ bảo mật SSL và chi phí sao lưu dữ liệu (Backup) định kỳ.

5. Lợi tức đầu tư (ROI) của dự án đối với một shop thời trang là bao nhiêu?
Sử dụng 100% công nghệ mã nguồn mở giúp doanh nghiệp tiết kiệm 100% chi phí bản quyền phần mềm, ước tính thu hồi vốn đầu tư hạ tầng chỉ sau 3 đến 6 tháng vận hành nhờ cắt giảm chi phí trung gian.

Kết luận

Đề tài "Tìm hiểu Spring Boot, Angular 5, Microservices và Xây dựng website bán hàng trực tuyến" đã giải quyết thành công bài toán chuyển đổi mô hình kiến trúc thương mại điện tử hiện đại. Bằng việc kết hợp sức mạnh xử lý backend mạnh mẽ, an toàn của Spring Boot, tính linh hoạt của Hibernate ORM và trải nghiệm người dùng vượt trội từ Angular 5 SPA, dự án mang lại một giải pháp kỹ thuật toàn diện, có tính ứng dụng cao và sẵn sàng mở rộng cho các doanh nghiệp bán lẻ trong kỷ nguyên số.