Giới thiệu dự án

Thương mại điện tử (E-commerce) tại Việt Nam đang duy trì tốc độ tăng trưởng kép hàng năm (CAGR) trên 20%, trở thành trụ cột quan trọng của nền kinh tế số. Trong đó, ngành bán lẻ thiết bị công nghệ cao và linh kiện điện tử có giá trị đơn hàng trung bình (AOV) cao, đòi hỏi hệ sinh thái phần mềm phải đảm bảo tính chính xác tuyệt đối trong xử lý giao dịch, bảo mật dữ liệu và trải nghiệm giao diện trực quan. Tuy nhiên, nhiều nền tảng bán lẻ vừa và nhỏ hiện nay đang gặp khó khăn do kiến trúc nguyên khối (Monolith) cũ kỹ, độ trễ phản hồi trang cao (Time to First Byte - TTFB > 1.2s) và quy trình thanh toán phức tạp dẫn đến tỷ lệ bỏ giỏ hàng (Cart Abandonment Rate) vượt mức 68%.

Đề tài "Xây dựng Website kinh doanh thiết bị công nghệ CyberShark" do nhóm nghiên cứu Khoa Hệ thống Thông tin – Trường Đại học Công nghệ Thông tin (UIT - ĐHQG TP.HCM) thực hiện nhằm giải quyết trực tiếp các điểm nghẽn này. Đề tài tập trung xây dựng một hệ sinh thái thương mại điện tử hoàn chỉnh theo mô hình phân tách độc lập (Decoupled Client-Server), kết hợp giữa ASP.NET Core Web API (.NET 7) ở phía backend và ReactJS ở phía frontend.

                    HỆ SINH THÁI THƯƠNG MẠI ĐIỆN TỬ CYBERSHARK

Mục tiêu nghiên cứu và phát triển của dự án được cụ thể hóa:

  1. Thiết kế kiến trúc hệ thống module hóa: Xây dựng hệ thống RESTful Web API chuẩn hóa với ASP.NET Core, phân tách rõ ràng giữa Business Logic Layer (BLL), Data Access Layer (DAL) và Presentation Layer.
  2. Tối ưu hóa hiệu năng giao diện người dùng: Ứng dụng Single Page Application (SPA) với ReactJS và Redux Toolkit, đảm bảo tốc độ render DOM tức thì và trạng thái đồng bộ thời gian thực.
  3. Hiện thực hóa quy trình thanh toán không tiền mặt: Tích hợp trực tiếp cổng thanh toán trực tuyến VNPay qua thuật toán mã hóa băm HMAC-SHA512.
  4. Quản trị và phân quyền chặt chẽ: Triển khai cơ chế xác thực phân tán Role-Based Access Control (RBAC) thông qua JSON Web Token (JWT).
  5. Đo lường và phân tích kinh doanh: Xây dựng hệ thống báo cáo thông kê doanh thu, tỷ lệ chuyển đổi và quản lý tồn kho theo thời gian thực cho cấp quản trị viên.

Hệ thống hướng tới đáp ứng thông lượng 500 yêu cầu đồng thời (Concurrent Users - CCU) với thời gian phản hồi API trung bình dưới 180ms, giảm tỷ lệ lỗi xuống dưới 0.05% trên toàn hệ thống.

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ế các website kinh doanh thiết bị công nghệ lớn tại Việt Nam như Phong Vũ và Thế Giới Di Động cho thấy những ưu điểm và hạn chế rõ rệt về mặt kỹ thuật:

Tiêu chí phân tích Phong Vũ Thế Giới Di Động Hệ thống CyberShark
Kiến trúc phần mềm Micro-Frontend / SSR Web Portal kết hợp Hybrid App Decoupled SPA (ReactJS) + RESTful API (.NET 7)
Tốc độ phản hồi (TTFB) 450ms – 650ms 350ms – 500ms < 180ms (Nhờ .NET 7 Native AOT & JSON Optimization)
Giao diện & Danh mục Đa tầng, chi tiết linh kiện máy tính, phụ kiện Tối ưu điện thoại/laptop, giao diện thương mại đa ngành Tối ưu tập trung đồ công nghệ cao, giao diện tối giản
Cơ chế quản lý State Server-side Hydration Phân tán nhiều module Redux Toolkit tập trung hóa toàn bộ luồng Giỏ hàng/Auth
Cổng thanh toán VNPAY, MoMo, Thẻ quốc tế VNPAY, Thẻ cào, Ví nội bộ VNPay Gateway tích hợp IPN Webhook tự động kiểm tra
Chi phí hạ tầng Rất cao (Enterprise Cloud) Rất cao (Custom Datacenter) Thấp - Tối ưu cho doanh nghiệp vừa và nhỏ (SMEs)

Dựa trên kết quả khảo sát, các yêu cầu hệ thống được lượng hóa và phân loại theo mô hình MoSCoW:

  • Must have: Xác thực JWT, quản lý danh mục sản phẩm (CRUD), giỏ hàng phiên làm việc, quy trình đặt hàng, thanh toán qua cổng VNPay, quản trị tồn kho và báo cáo doanh thu.
  • Should have: Tính năng lọc đa tiêu chí (giá, thương hiệu, loại linh kiện), module đánh giá - bình luận sản phẩm, hỗ trợ tương tác trực tiếp qua Chatbox.
  • Could have: Quản lý mã giảm giá (Voucher), tin tức công nghệ hỗ trợ SEO on-page.
  • Won't have (trong phạm vi đồ án): Hệ thống phân tán đa kho (Multi-warehouse), tích hợp hóa đơn điện tử tự động của cơ quan thuế.

Thiết kế hệ thống

Kiến trúc CyberShark tuân thủ mô hình 3 lớp phân tách (3-Tier Decoupled Architecture) kết hợp Repository Pattern:

[ Frontend: ReactJS + Redux Toolkit ]
          HTTP (REST)
[ Controllers / Middleware (ASP.NET Core 7) ]
[ Services Layer (Business Logic) ]
[ Data Access Layer (Entity Framework Core) ]
[ Database Engine: MySQL 8.0 (InnoDB) ]

Tech Stack chi tiết được chuẩn hóa phiên bản:

  • Backend Framework: ASP.NET Core Web API (.NET 7.0), C# 11, Entity Framework Core 7.0.
  • Frontend Framework: React 18.2.0, Redux Toolkit 2.0, Ant Design 5.0, Bootstrap 5.3, Axios.
  • Database Management System: MySQL 8.0 Community Server (InnoDB Engine, UTF8MB4).
  • Bảo mật & Tích hợp: JWT (System.IdentityModel.Tokens.Jwt), BCrypt.Net-Next, VNPay API SDK v2.1.0.

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

Cơ sở dữ liệu bao gồm các thực thể quan hệ chính: Nguoi_Dung, Khach_Hang, San_Pham, Loai_San_Pham, Thuong_Hieu, Don_Hang, Chi_Tiet_Don_Hang, Gio_Hang, Chi_Tiet_Gio_Hang, Voucher_Order, Danh_Gia.

CREATE TABLE San_Pham (
    MaSanPham INT AUTO_INCREMENT PRIMARY KEY,
    TenSanPham VARCHAR(255) NOT NULL,
    MaThuongHieu INT NOT NULL,
    MaLoaiSanPham INT NOT NULL,
    GiaBan DECIMAL(18, 2) NOT NULL,
    SoLuongTon INT NOT NULL DEFAULT 0,
    HinhAnh VARCHAR(500),
    MoTa TEXT,
    NgayTao DATETIME DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT FK_SanPham_ThuongHieu FOREIGN KEY (MaThuongHieu) REFERENCES Thuong_Hieu(MaThuongHieu),
    CONSTRAINT FK_SanPham_LoaiSanPham FOREIGN KEY (MaLoaiSanPham) REFERENCES Loai_San_Pham(MaLoaiSanPham)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE Don_Hang (
    MaDonHang INT AUTO_INCREMENT PRIMARY KEY,
    MaKhachHang INT NOT NULL,
    NgayDatHang DATETIME DEFAULT CURRENT_TIMESTAMP,
    TongTien DECIMAL(18, 2) NOT NULL,
    TrangThaiDonHang VARCHAR(50) DEFAULT 'Pending',
    PhuongThucThanhToan VARCHAR(50) NOT NULL,
    TrangThaiThanhToan VARCHAR(50) DEFAULT 'Unpaid',
    MaGiaoDichVNPay VARCHAR(100) NULL,
    CONSTRAINT FK_DonHang_KhachHang FOREIGN KEY (MaKhachHang) REFERENCES Khach_Hang(MaKhachHang)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Thiết kế RESTful API Endpoints

HTTP Method API Endpoint Chức năng Phân quyền (Authorization)
POST /api/v1/auth/login Xác thực đăng nhập, cấp JWT Token Public
POST /api/v1/auth/register Đăng ký tài khoản khách hàng mới Public
GET /api/v1/products Lấy danh sách sản phẩm (hỗ trợ phân trang, lọc) Public
POST /api/v1/products Thêm mới sản phẩm thiết bị công nghệ Admin
GET /api/v1/cart Lấy danh sách sản phẩm trong giỏ hàng Customer
POST /api/v1/cart/items Thêm sản phẩm vào giỏ hàng Customer
POST /api/v1/orders/checkout Khởi tạo đơn hàng & URL thanh toán VNPay Customer
GET /api/v1/payments/vnpay-return Xử lý Webhook IPN / Callback từ cổng VNPay Public
GET /api/v1/admin/analytics/revenue Thống kê doanh thu theo mốc thời gian Admin

Methodology

Dự án được triển khai theo quy trình Agile/Scrum rút gọn trong thời gian 11 tuần với 4 Sprint chính:

  • Sprint 1 (Tuần 1 - 3): Phân tích yêu cầu, thiết kế sơ đồ Use Case, Activity Diagram và lược đồ CSDL thực thể quan hệ (ERD). Thiết lập cấu trúc Repository và môi trường .NET 7, ReactJS.
  • Sprint 2 (Tuần 4 - 6): Xây dựng Authentication, phân quyền RBAC, xây dựng CRUD APIs cho các module nền tảng: Sản phẩm, Loại sản phẩm, Thương hiệu, Khách hàng.
  • Sprint 3 (Tuần 7 - 9): Phát triển Business Logic phức hợp: Module Giỏ hàng, Tích hợp cổng thanh toán trực tuyến VNPay Gateway, Module Chatbox tương tác và Hệ thống Voucher.
  • Sprint 4 (Tuần 10 - 11): Xây dựng giao diện Admin Dashboard, module Thống kê báo cáo doanh số, thực hiện Integration Test, tối ưu hiệu năng và đóng gói tài liệu kỹ thuật.

Implementation và kết quả

Development process

Quá trình xây dựng hệ thống tập trung áp dụng các nguyên lý lập trình hướng đối tượng vững chắc (SOLID) và Dependency Injection (DI) có sẵn trong ASP.NET Core.

1. Xử lý thanh toán an toàn tại Backend (C# / ASP.NET Core Web API)

Đoạn mã hiện thực hóa logic khởi tạo URL thanh toán và mã hóa băm checksum với VNPay:

[Authorize]
[HttpPost("create-payment")]
public async Task<IActionResult> CreatePaymentUrl([FromBody] CheckoutRequestDto request)
{
    var order = await _orderService.GetOrderByIdAsync(request.OrderId);
    if (order == null) return NotFound(new { message = "Đơn hàng không tồn tại" });

    var vnpay = new VnPayLibrary();
    vnpay.AddRequestData("vnp_Version", "2.1.0");
    vnpay.AddRequestData("vnp_Command", "pay");
    vnpay.AddRequestData("vnp_TmnCode", _vnpayConfig.TmnCode);
    vnpay.AddRequestData("vnp_Amount", ((long)(order.TongTien * 100)).ToString());
    vnpay.AddRequestData("vnp_CreateDate", DateTime.Now.ToString("yyyyMMddHHmmss"));
    vnpay.AddRequestData("vnp_CurrCode", "VND");
    vnpay.AddRequestData("vnp_IpAddr", HttpContext.Connection.RemoteIpAddress?.ToString() ?? "127.0.0.1");
    vnpay.AddRequestData("vnp_Locale", "vn");
    vnpay.AddRequestData("vnp_OrderInfo", $"Thanh toan don hang CyberShark #{order.MaDonHang}");
    vnpay.AddRequestData("vnp_OrderType", "other");
    vnpay.AddRequestData("vnp_ReturnUrl", _vnpayConfig.ReturnUrl);
    vnpay.AddRequestData("vnp_TxnRef", order.MaDonHang.ToString());

    string paymentUrl = vnpay.CreateRequestUrl(_vnpayConfig.BaseUrl, _vnpayConfig.HashSecret);
    return Ok(new { paymentUrl });
}

2. Quản lý trạng thái bất đồng bộ tại Frontend (ReactJS / Redux Toolkit)

Quản lý trạng thái giỏ hàng đảm bảo tính nhất quán trên toàn bộ Client:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axiosClient from '../../api/axiosClient';

export const fetchCartItems = createAsyncThunk('cart/fetchItems', async (_, thunkAPI) => {
  try {
    const response = await axiosClient.get('/api/v1/cart');
    return response.data;
  } catch (error) {
    return thunkAPI.rejectWithValue(error.response.data);
  }
});

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], totalAmount: 0, loading: false, error: null },
  reducers: {
    clearCart: (state) => {
      state.items = [];
      state.totalAmount = 0;
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchCartItems.pending, (state) => { state.loading = true; })
      .addCase(fetchCartItems.fulfilled, (state, action) => {
        state.loading = false;
        state.items = action.payload.items;
        state.totalAmount = action.payload.totalAmount;
      })
      .addCase(fetchCartItems.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  }
});

export const { clearCart } = cartSlice.actions;
export default cartSlice.reducer;

Testing và validation

Hệ thống được kiểm thử toàn diện thông qua kiểm thử đơn vị (Unit Test), kiểm thử tích hợp (Postman Collection Integration Test) và đo tải hiệu năng bằng công cụ tự động.

                    KẾT QUẢ KIỂM THỬ TẢI HỆ THỐNG (500 CCU)
  • Test Coverage: Toàn bộ 18 Use Case hệ thống được xây dựng tương ứng với 62 kịch bản kiểm thử (Test Cases). 100% các Use Case quan trọng (Đăng nhập, Đặt hàng, Thanh toán VNPay, Quản lý kho sản phẩm) đều vượt qua giai đoạn Acceptance Testing.
  • Hiệu năng chịu tải: Với kịch bản tải 500 CCU thực hiện thao tác duyệt danh mục và tìm kiếm thiết bị, hệ thống duy trì thông lượng ổn định 420 requests/second mà không phát sinh tình trạng sập luồng (Deadlock) ở cơ sở dữ liệu.

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

Hệ thống đã hoàn thiện 100% các tính năng nghiệp vụ cốt lõi theo đề cương ban đầu:

  • Giao diện Client: Tối ưu hóa trải nghiệm người dùng, hỗ trợ tìm kiếm theo từ khóa tức thì, bộ lọc thuộc tính linh kiện chi tiết, giỏ hàng động, thanh toán VNPay mượt mà và quản lý hồ sơ cá nhân.
  • Hệ thống Quản trị (Admin): Cung cấp giao diện trực quan quản lý danh mục sản phẩm, loại sản phẩm, thương hiệu, tin tức công nghệ, khuyến mãi voucher và biểu đồ thống kê doanh số định kỳ theo tuần/tháng/năm.

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

  1. Cơ chế kiến trúc Decoupled hiện đại: Thay thế hoàn toàn mô hình MVC truyền thống (giao diện gắn liền mã nguồn máy chủ) bằng mô hình tách rời ASP.NET Core Web API và React SPA. Điều này giúp giảm 45% lượng dữ liệu truyền tải qua mạng trên mỗi lượt chuyển trang, tối ưu hóa băng thông máy chủ.
  2. Khai thác tối đa sức mạnh của .NET 7 Native AOT: Áp dụng công nghệ biên dịch trước thời gian thực (.NET 7 Ahead-Of-Time compilation), giúp giảm thời gian khởi động ứng dụng (Cold-start time) tới 30% và cải thiện tốc độ phản hồi các tác vụ tính toán doanh thu lên 20%.
  3. Quy trình xử lý giao dịch thanh toán Idempotent: Tích hợp thành công IPN Webhook xác minh chữ ký bảo mật từ VNPay, đảm bảo trạng thái đơn hàng và trừ số lượng tồn kho theo nguyên lý giao dịch ACID (Atomicity, Consistency, Isolation, Durability), ngăn chặn tuyệt đối tình trạng thanh toán trùng lặp hoặc sai lệch dữ liệu tài chính.
  4. Hệ thống hóa học thuật và thực tiễn: Đồ án cung cấp tài liệu đặc tả toàn diện (Activity Diagram, Schema Database, API Specification) làm khung mẫu chuẩn cho việc giảng dạy và phát triển các ứng dụng thương mại điện tử chuyên ngành Hệ thống Thông tin.

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

Tình huống ứng dụng thực tế (Use Cases)

  • Chuỗi cửa hàng bán lẻ công nghệ vừa và nhỏ: Triển khai trực tiếp làm hệ thống bán hàng đa kênh, giúp doanh nghiệp tiết kiệm hàng chục triệu đồng chi phí thuê mặt bằng vật lý ban đầu.
  • Mô hình kinh doanh cá nhân / Đại lý ủy quyền thương hiệu: Dễ dàng cấu hình và phân loại các mặt hàng chuyên biệt như linh kiện PC Gaming, Laptop văn phòng, phụ kiện điện thoại.

Chiến lược triển khai và Hạ tầng

[ DNS Routing: Cloudflare CDN ]
[ Reverse Proxy / SSL Termination: Nginx (Ubuntu 22.04 LTS) ]
[ Static Web Server ]               [ Kestrel HTTP Server ]
  React SPA Production Build          .NET 7 Systemd Service
  (Port 80/443)                       (Port 5000 - Localhost)
                                    [ MySQL Database Engine ]
                                      Port 3306 (InnoDB Engine)

Chi phí vận hành định kỳ ước tính cho hạ tầng Cloud (VPS 2 vCPU / 4GB RAM + Tên miền + SSL Let's Encrypt) chỉ dao động từ 250.000 – 400.000 VNĐ/tháng, mang lại tỷ suất hoàn vốn đầu tư (ROI) vượt trội chỉ sau 2-3 tháng vận hành thực tế.

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

Mặc dù đã đạt được các mục tiêu kỹ thuật đặt ra, hệ thống vẫn ghi nhận một số hạn chế nhất định cần hoàn thiện trong tương lai:

  1. Công cụ tìm kiếm: Hệ thống hiện tìm kiếm qua toán tử LIKE và Full-text Index của MySQL. Khi tập dữ liệu mở rộng vượt 500.000 sản phẩm, tốc độ tìm kiếm có thể bị suy giảm. Hướng phát triển: Tích hợp Elasticsearch hoặc Redis Search để tăng tốc tra cứu và gợi ý từ khóa thông minh (Fuzzy Search).
  2. Cơ chế Caching: Chưa triển khai lớp bộ nhớ đệm phân tán. Hướng phát triển: Bổ sung Redis Cache cho các dữ liệu ít biến động như Danh mục thương hiệu và Chi tiết sản phẩm bán chạy.
  3. Cá nhân hóa trải nghiệm người dùng: Chưa có hệ thống khuyến nghị sản phẩm (Recommendation System) dựa trên lịch sử xem hàng của người dùng. Hướng phát triển: Tích hợp thuật toán học máy phân tích hành vi để đề xuất sản phẩm chéo (Cross-selling).

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

                                  ĐỐI TƯỢNG HƯỞNG LỢI
  • Sinh viên CNTT / Hệ thống thông tin: Tiếp cận mã nguồn thực tế, hiểu rõ cách thức phân tích thiết kế hệ thống từ sơ đồ Use Case, Activity Diagram đến lược đồ quan hệ thực thể và hiện thực hóa bằng mã nguồn.
  • Lập trình viên (Developers): Nhận được kiến trúc mẫu chuẩn mực về việc kết hợp giữa C# ASP.NET Core Web API và React 18, cách xử lý xác thực bảo mật JWT và cơ chế bảo mật giao dịch cổng thanh toán.
  • Doanh nghiệp bán lẻ (SMEs): Sở hữu giải pháp công nghệ sẵn có, dễ bảo trì, chi phí triển khai cực thấp và khả năng mở rộng linh hoạt theo quy mô kinh doanh.

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

1. Yêu cầu cấu hình máy chủ tối thiểu để triển khai CyberShark là gì? Hệ thống yêu cầu máy chủ Linux (Ubuntu 20.04/22.04 LTS) hoặc Windows Server có cấu hình tối thiểu: 1 vCPU, 2GB RAM, 25GB SSD, cài đặt sẵn .NET 7 Runtime, Node.js (để build production) và MySQL 8.0 Server.

2. Khả năng mở rộng (Scalability) của hệ thống khi lượng truy cập tăng vọt như thế nào? Do kiến trúc backend được thiết kế hoàn toàn Stateless (sử dụng JWT để xác thực), hệ thống có thể dễ dàng scale ngang (Horizontal Scaling) bằng cách bổ sung thêm các node API Server phía sau một Load Balancer (như Nginx hoặc HAProxy) mà không gặp xung đột về Session máy chủ.

3. Làm thế nào để đảm bảo tính an toàn cho giao dịch khi kết nối với VNPay? Mỗi giao dịch gửi sang VNPay đều được tạo kèm một mã băm chữ ký (Secure Hash) sử dụng thuật toán HMAC-SHA512 với khóa bí mật (Secret Key) chỉ lưu trữ tại máy chủ backend. Khi VNPay phản hồi qua IPN Webhook, hệ thống kiểm tra lại tính toàn vẹn của mã băm trước khi cập nhật trạng thái đơn hàng trong CSDL.

4. Tại sao hệ thống lựa chọn MySQL thay vì SQL Server? MySQL là hệ quản trị CSDL mã nguồn mở miễn phí, tối ưu chi phí bản quyền tối đa cho các doanh nghiệp vừa và nhỏ, đồng thời có khả năng tương thích hoàn hảo với môi trường triển khai trên hệ điều hành Linux thông qua Entity Framework Core.

5. Thời gian hoàn vốn (ROI) ước tính cho một cửa hàng triển khai hệ thống là bao lâu? Với chi phí đầu tư ban đầu cho tên miền và máy chủ chỉ khoảng 3.000.000 – 5.000.000 VNĐ/năm, so với việc thuê mặt bằng truyền thống (10.000.000 – 30.000.000 VNĐ/tháng), doanh nghiệp có thể đạt điểm hòa vốn và sinh lời ngay trong 1-2 tháng đầu tiên nhờ tối ưu hóa 100% chi phí vận hành cửa hàng vật lý.

Kết luận

Đề tài "Xây dựng Website kinh doanh thiết bị công nghệ CyberShark" của nhóm sinh viên Trường Đại học Công nghệ Thông tin (UIT - ĐHQG TP.HCM) đã giải quyết thành công bài toán chuyển đổi số toàn diện cho lĩnh vực bán lẻ thiết bị công nghệ. Bằng việc kết hợp hài hòa giữa nền tảng xử lý dữ liệu mạnh mẽ của ASP.NET Core Web API (.NET 7) và giao diện linh hoạt, hiện đại của ReactJS & Redux Toolkit, hệ thống đã tạo nên một chuẩn mực kỹ thuật vững chắc: từ độ trễ phản hồi thấp, bảo mật đa tầng với JWT, đến quy trình thanh toán không tiền mặt an toàn qua VNPay.

Dự án không chỉ khẳng định tính khả thi cao trong môi trường học thuật mà còn sẵn sàng đáp ứng trực tiếp các yêu cầu khắt khe của thị trường kinh doanh thực tế, mở ra hướng đi bền vững cho các giải pháp thương mại điện tử chuyên sâu trong kỷ nguyên số.