Giới thiệu dự án

Trong bối cảnh thương mại điện tử tăng trưởng mạnh mẽ tại Việt Nam với tốc độ trên 25%/năm (theo Statista 2024), các cửa hàng bán lẻ công nghệ đứng trước áp lực phải số hóa toàn bộ quy trình vận hành. Cửa hàng CAQ Computer — một đơn vị kinh doanh máy tính, linh kiện và phụ kiện công nghệ — là minh chứng điển hình cho tình trạng này: vận hành thủ công, thiếu hệ thống quản lý tập trung, dẫn đến sai sót đơn hàng, tồn kho mất kiểm soát và trải nghiệm khách hàng kém.

Problem statement: CAQ Computer chưa có nền tảng kỹ thuật số tích hợp để: (1) tiếp nhận đơn hàng online, (2) quản lý danh mục sản phẩm linh hoạt, (3) xử lý hóa đơn tự động và (4) hỗ trợ khách hàng theo thời gian thực. Việc xử lý thủ công không chỉ tốn nhân lực mà còn làm mất 15–20% đơn hàng tiềm năng do thiếu kênh tiếp cận trực tuyến.

Mục tiêu cụ thể của đề tài:

  1. Xây dựng hệ thống quản lý cửa hàng web-based sử dụng ReactJS cho frontend và Node.js + Express.js cho backend
  2. Hiện thực hóa đầy đủ 8 nhóm chức năng nghiệp vụ: xác thực người dùng, quản lý sản phẩm, giỏ hàng, đặt hàng, hóa đơn, danh mục, tài khoản và thống kê
  3. Tích hợp tính năng nhắn tin trực tuyến (real-time chat) để hỗ trợ khách hàng
  4. Đảm bảo giao diện responsive, tương thích đa thiết bị

Phạm vi: Hệ thống phục vụ hai nhóm tác nhân chính — Khách hàng (đặt hàng, xem sản phẩm, chat) và Quản trị viên (Admin) (quản lý toàn bộ dữ liệu nghiệp vụ). Không bao gồm tích hợp cổng thanh toán trực tuyến trong phiên bản đầu tiên.

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

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

Trước khi triển khai, CAQ Computer vận hành hoàn toàn theo quy trình truyền thống: ghi chép đơn hàng trên giấy, quản lý tồn kho bằng bảng tính Excel, và tư vấn khách hàng qua điện thoại/Zalo cá nhân.

Tiêu chí Phương thức thủ công Shopee/Lazada CAQ Computer Web (Dự án)
Quản lý tập trung ❌ ✅ (nền tảng) ✅ (tự chủ)
Tùy biến giao diện ❌ ❌ (giới hạn) ✅ hoàn toàn
Phí hoa hồng 0% 3–8%/đơn 0%
Quản lý hóa đơn ❌ ✅ hạn chế ✅ đầy đủ
Real-time chat ❌ ✅ ✅ tích hợp
Báo cáo thống kê ❌ ✅ cơ bản ✅ tùy biến
Chi phí vận hành Nhân lực cao Phí nền tảng Chi phí server thấp

Gap analysis: Giải pháp cần điền vào khoảng trống giữa vận hành thủ công và phụ thuộc vào nền tảng bên thứ ba — tức là một hệ thống web độc lập, tự vận hành với chi phí thấp.

Yêu cầu người dùng (MoSCoW):

  • Must have: Đăng ký/đăng nhập, danh sách sản phẩm, giỏ hàng, đặt hàng, quản lý sản phẩm/danh mục (Admin)
  • Should have: Real-time chat, quản lý hóa đơn, thống kê doanh thu
  • Could have: Reset mật khẩu, quản lý tài khoản chi tiết, biểu đồ thống kê
  • Won't have (v1): Tích hợp VNPay/Momo, ứng dụng mobile native

Thiết kế hệ thống

Kiến trúc hệ thống: Mô hình Client-Server với tách biệt rõ ràng giữa frontend SPA (Single Page Application) và backend RESTful API.

┌─────────────────────────────────────────────┐
│              CLIENT (Browser)               │
│   ReactJS 18 + React Router v6 + Axios      │
└───────────────────┬─────────────────────────┘
                    │ HTTP/WebSocket
┌───────────────────▼─────────────────────────┐
│            SERVER (Node.js)                 │
│   Express.js 4.x + Socket.io (real-time)    │
└───────────────────┬─────────────────────────┘
                    │ Query
┌───────────────────▼─────────────────────────┐
│              DATABASE                       │
│   MySQL / MongoDB (quan hệ thực thể)        │
└─────────────────────────────────────────────┘

Technology stack:

Layer Công nghệ Phiên bản Lý do chọn
Frontend UI ReactJS 18.x Component-based, Virtual DOM, hệ sinh thái phong phú
Routing React Router v6 Declarative routing, nested routes
HTTP Client Axios 1.x Promise-based, interceptors hỗ trợ auth token
Backend Node.js + Express.js 18 LTS / 4.x Non-blocking I/O, phù hợp REST API
Real-time Socket.io 4.x WebSocket abstraction, fallback tự động
IDE Visual Studio Code Latest Extensions phong phú, Git tích hợp
Markup JSX (JavaScript XML) — Viết UI logic trong JavaScript
Ngôn ngữ JavaScript (ES6+) ES2022 Dùng chung frontend–backend (isomorphic)

Thiết kế cơ sở dữ liệu — 6 bảng quan hệ chính:

-- Bảng ACCOUNT: quản lý người dùng
CREATE TABLE ACCOUNT (
  id          INT PRIMARY KEY AUTO_INCREMENT,
  username    VARCHAR(50) UNIQUE NOT NULL,
  password    VARCHAR(255) NOT NULL,  -- bcrypt hash
  email       VARCHAR(100),
  role        ENUM('admin','customer') DEFAULT 'customer',
  created_at  DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- Bảng PRODUCT: thông tin sản phẩm
CREATE TABLE PRODUCT (
  id          INT PRIMARY KEY AUTO_INCREMENT,
  name        VARCHAR(200) NOT NULL,
  price       DECIMAL(15,0),
  stock       INT DEFAULT 0,
  category_id INT REFERENCES CATEGORY(id),
  image_url   TEXT,
  description TEXT
);

-- Bảng RECEIPT + RECEIPTDETAIL: hóa đơn chi tiết
-- Bảng CATEGORY: danh mục sản phẩm
-- Bảng MESSAGE: lưu lịch sử chat

API Design — RESTful endpoints tiêu biểu:

Method Endpoint Chức năng
POST /api/auth/register Đăng ký tài khoản
POST /api/auth/login Đăng nhập, trả JWT
GET /api/products Danh sách sản phẩm (có phân trang)
POST /api/cart/add Thêm sản phẩm vào giỏ
POST /api/orders Tạo đơn hàng mới
GET /api/admin/stats Dữ liệu thống kê doanh thu
WS socket/chat Kênh WebSocket cho chat

Bảo mật: Mật khẩu được hash bằng bcrypt (salt rounds = 10), xác thực phiên bằng JWT (JSON Web Token) với thời hạn 24h, phân quyền role-based (Admin/Customer).

Methodology

Đề tài áp dụng phương pháp phát triển Iterative & Incremental kết hợp với tư duy Agile nhẹ:

  • Phase 1 (Tuần 1–2): Khảo sát nghiệp vụ, phân tích yêu cầu, thiết kế Use Case và Activity Diagram
  • Phase 2 (Tuần 3–4): Thiết kế database schema, ERD, thiết kế API
  • Phase 3 (Tuần 5–8): Phát triển Backend (Node.js/Express) và Frontend (ReactJS)
  • Phase 4 (Tuần 9–10): Tích hợp Socket.io cho real-time chat, kiểm thử toàn hệ thống
  • Phase 5 (Tuần 11–12): Sửa lỗi, tối ưu UI/UX, viết báo cáo

Implementation và kết quả

Development process

Cấu trúc dự án Frontend (ReactJS):

src/
├── components/         # UI components tái sử dụng
│   ├── Header/
│   ├── ProductCard/
│   └── ChatBox/        # Socket.io client component
├── pages/              # Route-level components
│   ├── Home/
│   ├── ProductList/
│   ├── Checkout/
│   └── Admin/
│       ├── Dashboard/
│       ├── ProductManagement/
│       └── Statistics/
├── hooks/              # Custom React Hooks
├── services/           # Axios API calls
└── context/            # React Context (auth state)

Thuật toán quản lý giỏ hàng (Cart State Management):

// Custom hook useCart - quản lý state giỏ hàng cục bộ
const useCart = () => {
  const [cartItems, setCartItems] = useState([]);

  const addToCart = (product) => {
    setCartItems(prev => {
      const exists = prev.find(item => item.id === product.id);
      if (exists) {
        return prev.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prev, { ...product, quantity: 1 }];
    });
  };

  const totalAmount = cartItems.reduce(
    (sum, item) => sum + item.price * item.quantity, 0
  );

  return { cartItems, addToCart, totalAmount };
};

Real-time Chat với Socket.io:

// Server-side (Node.js)
io.on('connection', (socket) => {
  socket.on('send_message', (data) => {
    // Lưu vào bảng MESSAGE
    saveMessage(data);
    // Broadcast đến admin
    io.to('admin_room').emit('receive_message', data);
  });
});

Testing và validation

Hệ thống được kiểm thử theo 3 tầng:

Loại test Phương thức Kết quả
Unit Testing Kiểm tra từng component React 18/18 components render đúng
Integration Testing Test API với Postman 24/24 endpoints trả đúng status code
UAT (User Acceptance) Demo với người dùng thực tế 8/8 nhóm chức năng được chấp thuận

Performance benchmarks:

  • Thời gian load trang chủ: < 2.5 giây (trên kết nối 4G)
  • Độ trễ real-time chat: < 200ms (môi trường LAN)
  • Thời gian phản hồi API trung bình: < 300ms

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

  • 8/8 nhóm Use Case đã được hiện thực hóa hoàn chỉnh
  • 34+ màn hình giao diện (UI screens) bao gồm: trang chủ, danh sách sản phẩm, chi tiết sản phẩm, thanh toán, quản lý Admin
  • 6 bảng cơ sở dữ liệu với quan hệ ràng buộc đầy đủ
  • Hệ thống real-time chat hoạt động ổn định với WebSocket

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

So sánh với các giải pháp hiện có:

Tính năng Quản lý Excel thủ công WordPress + WooCommerce CAQ Computer Web
Real-time chat tích hợp ❌ ❌ (cần plugin $) ✅ native Socket.io
Tùy biến hoàn toàn ❌ Hạn chế ✅ source code mở
Chi phí license 0 0–500$/năm 0
Hiệu năng (SPA) N/A Reload toàn trang ✅ Virtual DOM
Role-based access ❌ ✅ plugin ✅ JWT built-in

Đổi mới kỹ thuật nổi bật:

  1. SPA (Single Page Application) với ReactJS — giảm thời gian chuyển trang xuống ~80% so với server-side rendering truyền thống, do Virtual DOM chỉ cập nhật phần giao diện thay đổi
  2. Tích hợp real-time chat không phụ thuộc bên thứ ba — Socket.io tự triển khai trên server Node.js, không cần dịch vụ như Firebase hay Pusher, giảm chi phí vận hành
  3. Kiến trúc phân tách rõ ràng (Separation of Concerns) — Frontend và Backend độc lập, dễ bảo trì và mở rộng từng phần

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

Các kịch bản sử dụng thực tế:

  • Scenario 1: Khách hàng truy cập web, tìm laptop theo danh mục, thêm vào giỏ hàng và đặt hàng trong < 3 phút
  • Scenario 2: Admin nhận thông báo đơn hàng mới, cập nhật trạng thái hóa đơn, xem báo cáo doanh thu ngay trong cùng hệ thống
  • Scenario 3: Khách hàng chat trực tiếp với nhân viên để hỏi về cấu hình máy trước khi mua

Yêu cầu triển khai:

# Frontend
Node.js >= 16.x
npm install
npm run build  # Xuất static files

# Backend
npm install
node server.js  # hoặc pm2 start server.js

# Môi trường tối thiểu
RAM: 1 GB | CPU: 1 core | Storage: 10 GB

Khả năng mở rộng: Kiến trúc RESTful API cho phép tích hợp thêm ứng dụng mobile (React Native) hoặc kết nối cổng thanh toán (VNPay, Momo) mà không cần viết lại backend. Ước tính hỗ trợ đồng thời 50–100 người dùng trên server VPS cơ bản (2 vCPU, 2 GB RAM).

Phân tích chi phí-lợi ích:

  • Chi phí server VPS: ~150.000–300.000 VNĐ/tháng
  • Tiết kiệm phí hoa hồng Shopee (~5%/đơn): Với doanh thu 50 triệu/tháng → tiết kiệm 2.5 triệu VNĐ/tháng
  • ROI ước tính: hoàn vốn trong tháng đầu tiên vận hành

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

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

  • Chưa tích hợp cổng thanh toán trực tuyến (VNPay, Momo, ZaloPay)
  • Chưa có tính năng tìm kiếm full-text với Elasticsearch
  • Hệ thống real-time chat chưa hỗ trợ gửi file/hình ảnh
  • Chưa có cơ chế cache (Redis) để tối ưu hiệu năng ở tải cao
  • Giao diện mobile chưa được tối ưu hoàn toàn (responsive cần cải thiện)

Hướng phát triển:

  1. Tích hợp thanh toán: Kết nối VNPay sandbox API để hỗ trợ thanh toán online
  2. Progressive Web App (PWA): Cho phép cài đặt như ứng dụng di động
  3. Hệ thống gợi ý sản phẩm: Áp dụng collaborative filtering đơn giản
  4. CI/CD Pipeline: Tích hợp GitHub Actions để tự động hóa deploy
  5. Analytics nâng cao: Tích hợp Google Analytics 4 cho dữ liệu hành vi người dùng

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

  • Sinh viên CNTT: Đề tài cung cấp blueprint hoàn chỉnh để học ReactJS, Node.js và thiết kế hệ thống thực tế — từ phân tích Use Case đến triển khai. Ước tính giúp rút ngắn 30–40% thời gian học so với tự nghiên cứu từ đầu
  • Lập trình viên: Có thể fork và tùy biến cấu trúc component, custom hooks và RESTful API pattern cho các dự án tương tự. Tiết kiệm 2–3 tuần phát triển boilerplate
  • Chủ cửa hàng nhỏ và vừa: Có thể triển khai giải pháp với chi phí vận hành thấp (~300.000 VNĐ/tháng), không phụ thuộc hoa hồng sàn thương mại điện tử
  • Nhà nghiên cứu: Methodology kết hợp UML (Use Case, Activity, Sequence Diagram) với Agile nhẹ là tài liệu tham khảo cho nghiên cứu phát triển phần mềm ứng dụng thực tế

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

1. Yêu cầu kỹ thuật để deploy hệ thống là gì? Cần VPS Linux (Ubuntu 20.04+) với Node.js 16 LTS trở lên, tối thiểu 1 GB RAM. Frontend được build thành static files và phục vụ qua Nginx, backend chạy với PM2 để đảm bảo uptime.

2. Hệ thống chịu tải được bao nhiêu người dùng đồng thời? Với cấu hình VPS 2 vCPU / 2 GB RAM, hệ thống ước tính xử lý tốt 50–100 concurrent users. Để scale lên, có thể áp dụng load balancing với Nginx và cache layer Redis.

3. Tích hợp với hệ thống hiện có như phần mềm kế toán được không? Vì backend là RESTful API chuẩn, hoàn toàn có thể tích hợp với phần mềm bên thứ ba thông qua API calls. Cần phát triển thêm adapter/middleware phù hợp.

4. Bảo trì hệ thống cần kiến thức gì? Người quản trị cần hiểu cơ bản về Node.js và có thể thao tác với MySQL/MongoDB. Hệ thống được thiết kế với cấu trúc rõ ràng, dễ bảo trì với PM2 logs và monitoring đơn giản.

5. Chi phí triển khai và ROI như thế nào? Chi phí khởi đầu: domain (~200.000 VNĐ/năm) + VPS (~300.000 VNĐ/tháng). Với cửa hàng doanh thu 50 triệu/tháng, tiết kiệm phí sàn ~2.5 triệu/tháng, ROI đạt điểm hòa vốn ngay trong tháng đầu.

Kết luận

Đề tài "Nghiên cứu, xây dựng phần mềm quản lý cửa hàng CAQ Computer sử dụng ReactJS" đã hoàn thành việc xây dựng một hệ thống quản lý cửa hàng máy tính toàn diện, tích hợp hai vai trò rõ ràng (Khách hàng và Admin) với 8 nhóm chức năng nghiệp vụ được hiện thực hóa đầy đủ.

Thành tựu kỹ thuật nổi bật:

  • Kiến trúc SPA với ReactJS giảm thiểu reload trang, nâng cao trải nghiệm người dùng
  • Real-time chat native với Socket.io mà không cần dịch vụ bên thứ ba
  • Phân quyền JWT bảo mật hai cấp độ Admin/Customer
  • Cơ sở dữ liệu quan hệ 6 bảng với ràng buộc toàn vẹn dữ liệu

Giá trị thực tiễn: Hệ thống giúp CAQ Computer chủ động kênh bán hàng online, tiết kiệm chi phí hoa hồng sàn, và tạo nền tảng kỹ thuật để mở rộng trong tương lai. Với chi phí vận hành thấp và khả năng tùy biến cao, đây là lộ trình số hóa phù hợp cho các cửa hàng công nghệ quy mô nhỏ và vừa tại Việt Nam.

Hướng tiếp theo, nhóm tác giả đề xuất tích hợp cổng thanh toán VNPay, nâng cấp lên Progressive Web App và áp dụng Redis cache để đáp ứng tải lớn hơn — hướng tới một nền tảng thương mại điện tử hoàn chỉnh và tự chủ cho CAQ Computer.