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 16-20%, đặc biệt sau giai đoạn chuyển dịch số mạnh mẽ từ đại dịch Covid-19. Tuy nhiên, nhiều đơn vị bán lẻ sách truyền thống quy mô vừa và nhỏ vẫn vận hành theo mô hình thủ công. Cửa hàng sách Tâm An (địa chỉ tại 34 Hồ Tùng Mậu, Mai Dịch, Cầu Giấy, Hà Nội – diện tích 200m²) là một trường hợp điển hình: vận hành một quầy thu ngân duy nhất, quản lý kho và danh mục sách dựa trên sổ sách kết hợp máy tính cục bộ, gây ra tình trạng nghẽn thanh toán giờ cao điểm và giới hạn hoàn toàn khả năng tiếp cận khách hàng ngoài khu vực địa lý lân cận.

+-----------------------------------------------------------------------------------+
|                            VẤN ĐỀ CỦA CỬA HÀNG TÂM AN                            |
+-----------------------------------------------------------------------------------+
|  [POS Đơn điểm]   -->  Ùn tắc thanh toán giờ cao điểm, phụ thuộc 1 máy thu ngân   |
|  [Quản lý thủ công] --> Sai lệch tồn kho giữa sổ sách và thực tế                 |
|  [Giới hạn địa lý] --> Không phục vụ được khách hàng trực tuyến ngoại tỉnh/thành  |
+-----------------------------------------------------------------------------------+
                                         │
                                         ▼
+-----------------------------------------------------------------------------------+
|                         GIẢI PHÁP WEB SPA TÂM AN BOOKSTORE                        |
+-----------------------------------------------------------------------------------+
|  • Kiến trúc SPA (Single Page Application) hiệu năng cao với ReactJS & TypeScript |
|  • Phân tách độc lập: Module Khách hàng (Storefront) & Module Quản trị (Admin)    |
|  • Chuẩn hóa dữ liệu quan hệ với CSDL SQL Server / MySQL                           |
+-----------------------------------------------------------------------------------+

Mục tiêu dự án

  1. Xây dựng hệ thống Web SPA (Single Page Application) thương mại điện tử chuyên biệt cho ngành sách, phân tách rõ ràng giữa phân hệ Khách hàng (Storefront) và phân hệ Quản trị (Admin Dashboard).
  2. Số hóa 100% quy trình kinh doanh: từ duyệt danh mục theo chủ đề, tìm kiếm, quản lý giỏ hàng, đặt hàng trực tuyến (COD) đến quản trị sản phẩm, phân quyền tài khoản (RBAC - Role-Based Access Control) và cập nhật trạng thái giao hàng (Delivery Lifecycle).
  3. Ứng dụng công nghệ ReactJS kết hợp ngôn ngữ TypeScript nhằm nâng cao hiệu năng kết xuất giao diện qua Virtual DOM, kiểm soát kiểu tĩnh (static typing), giảm thiểu runtime errors và tối ưu trải nghiệm người dùng (UX).

Giải pháp kỹ thuật và kết quả kỳ vọng

Dự án triển khai mô hình kiến trúc phân lớp hướng thành phần (Component-Driven Architecture) trên nền tảng ReactJS và TypeScript. Hệ thống phân tách thành 2 ứng dụng độc lập: giao diện bán hàng cho người dùng cuối và trung tâm điều hành cho quản trị viên. Kết quả kỳ vọng đạt tốc độ tải trang ban đầu (FCP - First Contentful Paint) < 1.2s, thời gian phản hồi thao tác giỏ hàng tức thì (0ms reload) và chịu tải ổn định cho toàn bộ danh mục sản phẩm từ các nhà xuất bản lớn (NXB Trẻ, Kim Đồng, Giáo Dục,...).

Phạm vi và giới hạn

  • Phạm vi: Khảo sát nghiệp vụ thực tế tại Tâm An, phân tích use case, thiết kế mô hình dữ liệu quan hệ (7 bảng chuẩn), cài đặt module khách hàng và module quản trị.
  • Giới hạn: Hệ thống tập trung vào phương thức thanh toán khi nhận hàng (COD), chưa tích hợp cổng thanh toán trực tuyến (VNPay/Momo) và chưa hỗ trợ tính năng tự hủy đơn hàng từ phía khách hàng sau khi xác nhận.

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

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

Trước khi xây dựng hệ thống, quy trình nghiệp vụ tại cửa hàng Tâm An và các giải pháp trên thị trường được phân tích so sánh:

Tiêu chí Cửa hàng vật lý Tâm An Sàn TMĐT (Shopee/Tiki) Hệ thống Web ReactJS riêng
Chi phí duy trì Mặt bằng 200m², nhân sự vận hành Phí sàn 8-15%/đơn, phí quảng cáo Chi phí hosting/domain tối thiểu
Kiểm soát dữ liệu Phân tán trên giấy tờ, dễ thất thoát Bị phụ thuộc chính sách nền tảng Toàn quyền sở hữu CSDL khách hàng
Khả năng tùy biến Không có Hạn chế theo template của sàn Linh hoạt mở rộng theo nghiệp vụ
Trải nghiệm mua hàng Xếp hàng tại quầy thu ngân Trực tuyến nhưng cạnh tranh giá gắt Trực quan, cá nhân hóa thương hiệ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 (JWT/Session), xem danh mục sách theo chủ đề, xem chi tiết sách kèm ảnh, giỏ hàng, đặt hàng lưu thông tin người nhận, quản lý CRUD (Create-Read-Update-Delete) Sách/Danh mục/Tài khoản/Đơn hàng.
  • Should Have (Nên có): Tìm kiếm gần đúng theo tên sách, cập nhật thông tin cá nhân, xem lịch sử đặt hàng, cập nhật phân quyền tài khoản (Admin/User).
  • Could Have (Có thể có): Đánh giá/bình luận sách, bộ lọc nâng cao theo khoảng giá/tác giả.
  • Won't Have (Chưa triển khai kỳ này): Cổng thanh toán trực tuyến Payment Gateway, gợi ý sách thông minh bằng Machine Learning.

Thiết kế hệ thống

Kiến trúc tổng thể hệ thống

graph TD
    subgraph Client_Layer ["Client Layer (ReactJS SPA + TypeScript)"]
        UI_Customer["Storefront App<br/>(Home, Catalog, Cart, Checkout)"]
        UI_Admin["Admin Dashboard<br/>(Product, Order, Account Management)"]
        State_Manager["State Management (Redux Store / Hooks)"]
        UI_Customer --> State_Manager
        UI_Admin --> State_Manager
    end

    subgraph Service_Layer ["Backend API & Business Logic"]
        API_Gateway["RESTful API Endpoints"]
        Auth_Service["Auth & RBAC Middleware"]
        Business_Logic["Controllers & Services (CRUD, Order Flow)"]
        State_Manager <-->|HTTP/JSON via Axios| API_Gateway
        API_Gateway --> Auth_Service
        Auth_Service --> Business_Logic
    end

    subgraph Data_Layer ["Data Persistence Layer"]
        DB[(RDBMS: MySQL / SQL Server)]
        Business_Logic <-->|ORM / SQL Queries| DB
    end

Ngăn xếp công nghệ (Technology Stack)

  • Frontend: ReactJS v18.x, TypeScript v4.9.x, Redux Toolkit v1.9.x, React Router DOM v6.x, Axios v1.3.x, SCSS/CSS Modules.
  • Backend Runtime / Database: Node.js v18 LTS / ExpressJS v4.x, Hệ quản trị CSDL quan hệ MySQL v8.0 hoặc Microsoft SQL Server 2014.
  • Môi trường phát triển: Visual Studio Code, Git/GitHub, Postman, Webpack/Vite.

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

Hệ thống sử dụng mô hình quan hệ với 7 thực thể chính được chuẩn hóa mức 3NF:

-- DDL Schema định nghĩa các bảng cốt lõi trong hệ thống bán sách Tâm An
CREATE TABLE USER (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    fullname VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    phone VARCHAR(20) NOT NULL,
    address TEXT NOT NULL,
    role ENUM('USER', 'ADMIN') DEFAULT 'USER',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

CREATE TABLE CATEGORY (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

CREATE TABLE PRODUCT (
    id INT AUTO_INCREMENT PRIMARY KEY,
    category_id INT NOT NULL,
    title VARCHAR(255) NOT NULL,
    author VARCHAR(100) NOT NULL,
    price DECIMAL(12, 2) NOT NULL,
    description TEXT,
    page_count INT DEFAULT 0,
    stock_quantity INT NOT NULL DEFAULT 0,
    sold_quantity INT NOT NULL DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (category_id) REFERENCES CATEGORY(id) ON DELETE CASCADE
);

CREATE TABLE PRODUCT_IMAGE (
    id INT AUTO_INCREMENT PRIMARY KEY,
    product_id INT NOT NULL,
    image_url VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (product_id) REFERENCES PRODUCT(id) ON DELETE CASCADE
);

CREATE TABLE SALE_ORDER (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    receiver_name VARCHAR(100) NOT NULL,
    receiver_phone VARCHAR(20) NOT NULL,
    receiver_address TEXT NOT NULL,
    total_amount DECIMAL(12, 2) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES USER(id)
);

CREATE TABLE ORDER_ITEM (
    id INT AUTO_INCREMENT PRIMARY KEY,
    order_id INT NOT NULL,
    product_id INT NOT NULL,
    quantity INT NOT NULL DEFAULT 1,
    unit_price DECIMAL(12, 2) NOT NULL,
    FOREIGN KEY (order_id) REFERENCES SALE_ORDER(id) ON DELETE CASCADE,
    FOREIGN KEY (product_id) REFERENCES PRODUCT(id)
);

CREATE TABLE DELIVERY (
    id INT AUTO_INCREMENT PRIMARY KEY,
    order_id INT NOT NULL UNIQUE,
    status ENUM('PENDING', 'PROCESSING', 'SHIPPING', 'COMPLETED', 'CANCELLED') DEFAULT 'PENDING',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (order_id) REFERENCES SALE_ORDER(id) ON DELETE CASCADE
);

Thiết kế giao diện lập trình ứng dụng (RESTful API Design)

Hệ thống giao tiếp thông qua giao thức HTTP với định dạng JSON tiêu chuẩn:

Endpoint Phương thức Quyền truy cập Mô tả nghiệp vụ
/api/v1/auth/login POST Public Đăng nhập tài khoản, trả về JWT Token & thông tin Role
/api/v1/products GET Public Lấy danh mục sách (có hỗ trợ lọc theo category_id, search title)
/api/v1/products/:id GET Public Lấy thông tin chi tiết một cuốn sách kèm danh sách ảnh
/api/v1/orders POST Customer Tạo đơn hàng mới từ giỏ hàng, tự động khởi tạo bản ghi DELIVERY
/api/v1/admin/categories POST / PUT / DELETE Admin CRUD danh mục sách
/api/v1/admin/orders/:id/status PUT Admin Cập nhật tiến trình giao hàng (PENDING $\rightarrow$ COMPLETED)

Phương pháp luận phát triển (Methodology)

Dự án áp dụng mô hình Agile/Scrum rút gọn với chu kỳ 4 Sprint trong 8 tuần:

+------------------------------------------------------------------------------------+
|                      LỘ TRÌNH TRIỂN KHAI DỰ ÁN (8 TUẦN / 4 SPRINTS)                |
+------------------------------------------------------------------------------------+
|  [Sprint 1: Tuần 1-2] Khảo sát thực địa, đặc tả Use Case, thiết kế CSDL (3NF)     |
|  [Sprint 2: Tuần 3-4] Xây dựng Backend API Core & Setup ReactJS TypeScript Client   |
|  [Sprint 3: Tuần 5-6] Hoàn thiện UI Khách hàng (Giỏ hàng, Tìm kiếm, Đặt hàng)     |
|  [Sprint 4: Tuần 7-8] Xây dựng Admin Dashboard, Testing, Tối ưu hóa Virtual DOM    |
+------------------------------------------------------------------------------------+

Quản trị rủi ro (Risk Assessment)

  • Bất đồng bộ dữ liệu giỏ hàng: Khắc phục bằng giải pháp kết hợp lưu trữ Redux State trên Client Memory với đồng bộ LocalStorage/SessionStorage, hạn chế mất giỏ hàng khi người dùng tải lại trang.
  • Tắc nghẽn kết xuất dữ liệu ảnh sách lớn: Sử dụng cơ chế phân trang (Pagination) kết hợp xử lý lazy-loading hình ảnh phía React Component.

Implementation và kết quả

Quy trình phát triển và cấu trúc mã nguồn

Hệ thống được tổ chức theo cấu trúc module phân tầng trong ReactJS + TypeScript, tuân thủ nguyên tắc SOLID và tách biệt giao diện (components), quản lý trạng thái (store), và giao tiếp mạng (services).

src/
├── assets/          # Static files (images, icons)
├── components/      # Reusable UI components (Navbar, BookCard, Modal, Button)
├── pages/           # Screen views (Home, BookDetail, Cart, Checkout, AdminDashboard)
├── services/        # Axios API client & interceptors
├── store/           # Redux Slices & Typed Hooks
├── types/           # TypeScript interfaces & Entity declarations
└── utils/           # Helper functions, formatters (Currency, Date)

Trích xuất mã nguồn mẫu: Định nghĩa kiểu dữ liệu và Quản lý Giỏ hàng

Đoạn mã TypeScript bên dưới thể hiện cơ chế kiểm soát kiểu tĩnh và quản lý trạng thái giỏ hàng bằng Redux Toolkit:

// src/types/book.types.ts
export interface Book {
  id: number;
  categoryId: number;
  title: string;
  author: string;
  price: number;
  description: string;
  pageCount: number;
  stockQuantity: number;
  images: string[];
}

export interface CartItem {
  product: Book;
  quantity: number;
}

export interface CartState {
  items: CartItem[];
  totalAmount: number;
}

// src/store/cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState: CartState = {
  items: [],
  totalAmount: 0,
};

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addToCart: (state, action: PayloadAction<{ product: Book; quantity: number }>) => {
      const { product, quantity } = action.payload;
      const existingIndex = state.items.findIndex((item) => item.product.id === product.id);

      if (existingIndex >= 0) {
        state.items[existingIndex].quantity += quantity;
      } else {
        state.items.push({ product, quantity });
      }

      state.totalAmount = state.items.reduce(
        (total, item) => total + item.product.price * item.quantity,
        0
      );
    },
    removeFromCart: (state, action: PayloadAction<number>) => {
      state.items = state.items.filter((item) => item.product.id !== action.payload);
      state.totalAmount = state.items.reduce(
        (total, item) => total + item.product.price * item.quantity,
        0
      );
    },
    clearCart: (state) => {
      state.items = [];
      state.totalAmount = 0;
    },
  },
});

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

Kiểm thử và đánh giá hiệu năng (Testing & Validation)

Hệ thống trải qua quy trình kiểm thử đơn vị (Unit Test), kiểm thử tích hợp (Integration Test) và đánh giá hiệu năng tự động qua Google Lighthouse.

+-----------------------------------------------------------------------------------+
|                     KẾT QUẢ ĐÁNH GIÁ GOOGLE LIGHTHOUSE AUDIT                      |
+-----------------------------------------------------------------------------------+
|  [Performance: 92/100]  ───────►  First Contentful Paint (FCP):  0.95s            |
|  [Accessibility: 94/100] ──────►  Largest Contentful Paint (LCP): 1.35s            |
|  [Best Practices: 96/100] ─────►  Cumulative Layout Shift (CLS): 0.015            |
|  [SEO Score: 95/100]    ───────►  Time to Interactive (TTI):     1.42s            |
+-----------------------------------------------------------------------------------+

Thống kê kiểm thử chức năng (UAT & Test Cases)

  • Tổng số test cases thực thi: 48 ca kiểm thử trên toàn bộ 12 Use Case cốt lõi.
  • Tỷ lệ pass lần 1: 43/48 (89.5%). 5 lỗi giao diện và validate form được khắc phục hoàn toàn ở chu kỳ fix bug Sprint 4.
  • Độ bao phủ mã nguồn (Code Coverage): Đạt 78.4% trên các modules xử lý nghiệp vụ (reducers, formatters, auth guards).

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

Nhóm chức năng Trạng thái kế hoạch Hiện trạng nghiệm thu Tỷ lệ hoàn thành
Xác thực & Người dùng Đăng ký, Đăng nhập, Profile Hoạt động chính xác, mã hóa mật khẩu, phân quyền Role 100%
Duyệt sách & Tìm kiếm Danh mục, Search theo tên, Chi tiết Tìm kiếm theo thời gian thực, hiển thị ảnh đa tầng 100%
Giỏ hàng & Đặt hàng Thêm, Sửa số lượng, Đặt hàng COD Cập nhật Redux Store tức thì, ghi nhận đơn vào CSDL 100%
Quản trị Dashboard Quản lý Sách, Danh mục, Đơn hàng Hỗ trợ CRUD toàn diện, đổi trạng thái Delivery 100%
Báo cáo doanh thu Thống kê nâng cao, xuất Excel Chưa hỗ trợ xuất file Excel trực tiếp 70%

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

Cải tiến kỹ thuật

  1. Kiến trúc SPA loại bỏ độ trễ nạp trang: So với mô hình nạp trang truyền thống (Multi-Page Server-Side Rendering cũ), ReactJS SPA kết hợp Virtual DOM giúp cắt giảm thời gian phản hồi giao diện từ ~2.8s xuống dưới 150ms khi điều hướng giữa các màn hình danh mục.
  2. Type-Safe với TypeScript: Việc sử dụng TypeScript thay thế JavaScript thuần giúp phát hiện lỗi sai cấu trúc dữ liệu ngay trong quá trình biên dịch (Compile-time), giảm 68% số lỗi runtime liên quan đến undefined hoặc sai lệch kiểu dữ liệu API.
  3. Mô hình VOPC (View-Operation-Processing-Control) rõ ràng: Tách biệt luồng biểu đồ trình tự (Sequence Diagrams) từ phân tích use case sang thiết kế mã nguồn, giúp mã nguồn có tính module hóa cao, dễ bảo trì và mở rộng.
+------------------------------------------------------------------------------------+
|                         BẢNG SO SÁNH GIẢI PHÁP KỸ THUẬT                            |
+------------------------------------------------------------------------------------+
|  Chỉ số               | Hệ thống cũ (POS/Excel) | PHP/WooCommerce | ReactJS + TS   |
+------------------------------------------------------------------------------------+
|  Tốc độ điều hướng    | Rất chậm (thao tác tay) | 2.2s - 3.5s     | < 150ms (SPA)  |
|  Độ ổn định mã nguồn  | Kém                     | Trung bình      | Cao (Type-safe)|
|  Tùy biến nghiệp vụ   | Không                   | Bị bó buộc      | Không giới hạn |
|  Chi phí bản quyền    | Phí phần mềm đóng gói   | Miễn phí/Plugin | 100% OpenSource|
+------------------------------------------------------------------------------------+

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

Kịch bản vận hành thực tế tại Cửa hàng Tâm An

  1. Khách hàng trực tuyến: Truy cập website, lọc sách theo chủ đề "Văn học" hoặc "Kinh tế", kiểm tra thông tin tác giả và số lượng tồn kho theo thời gian thực, tiến hành đặt hàng không cần chờ đợi.
  2. Quản trị viên / Thu ngân: Đăng nhập cổng quản trị, tiếp nhận đơn hàng mới trong danh sách SALE_ORDER, xác nhận chuyển trạng thái từ PENDING $\rightarrow$ SHIPPING, đồng thời cập nhật số lượng tồn kho tự động trừ trong bảng PRODUCT.

Chiến lược triển khai và Phần cứng yêu cầu

  • Cấu hình máy chủ tối thiểu: CPU 2 Cores (x86/x64 2.0 GHz), 4GB RAM, 40GB SSD trống, Hệ điều hành Linux (Ubuntu Server 20.04 LTS / Windows Server).
  • Môi trường máy trạm Client: Bất kỳ trình duyệt web hiện đại (Google Chrome, Firefox, Microsoft Edge, Safari) trên máy tính hoặc thiết bị di động.
# Hướng dẫn build và deploy ứng dụng ReactJS Frontend
git clone https://github.com/taman-bookstore/frontend-react.git
cd frontend-react
npm install
npm run build

# Cấu hình Web Server Nginx phục vụ Static Bundle
server {
    listen 80;
    server_name tamanbook.vn;
    root /var/www/taman-bookstore/build;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Phân tích Chi phí - Lợi ích (Cost-Benefit & ROI)

  • Chi phí đầu tư: Toàn bộ công nghệ sử dụng là mã nguồn mở (ReactJS, TypeScript, Node.js/Express, MySQL), chi phí duy trì chỉ bao gồm tên miền (~250.000 VNĐ/năm) và Cloud VPS (~150.000 VNĐ/tháng).
  • Hiệu quả kinh tế: Tăng năng lực phục vụ từ 30 đơn/ngày tại cửa hàng lên hơn 150 đơn/ngày qua kênh trực tuyến, giúp hoàn vốn đầu tư kỹ thuật (ROI) dự kiến trong vòng 3.5 tháng.

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 cổng thanh toán trực tuyến tự động (VNPAY, MoMo, ZaloPay), hoàn toàn phụ thuộc vào hình thức COD.
  • Khách hàng chưa thể chủ động thao tác hủy đơn trực tiếp trên giao diện sau khi đã bấm đặt hàng thành công.
  • Module báo cáo quản trị chưa hỗ trợ công cụ trực quan hóa biểu đồ doanh thu (Charts/Analytics) và xuất dữ liệu định dạng Excel/PDF.

Hướng nâng cấp trong tương lai

  • Tích hợp cổng thanh toán trực tuyến qua VNPAY Sandbox / MoMo API chuẩn bảo mật PCI-DSS.
  • Ứng dụng Server-Side Rendering (Next.js) để tối ưu hóa vượt bậc điểm SEO cho từng đầu sách trên công cụ tìm kiếm Google.
  • Xây dựng hệ thống gợi ý sách thông minh (Recommendation System) dựa trên lịch sử mua sắm của từng tài khoản.

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

  • Sinh viên & Học viên CNTT: Nguồn tài liệu tham khảo chi tiết về quy trình công nghệ phần mềm hoàn chỉnh, từ khảo sát thực tế, biểu đồ UML (Use case, Sequence, VOPC) đến triển khai ReactJS + TypeScript thực chiến.
  • Lập trình viên (Developers): Mô hình tham chiếu kiến trúc SPA sạch (Clean Architecture), phân chia thư mục chuẩn mực và các mẫu Custom Hooks / Redux Slices mẫu.
  • Chủ cửa hàng sách & Doanh nghiệp bán lẻ: Giải pháp chuyển đổi số bán hàng thực tế với chi phí tối ưu, sẵn sàng đưa vào áp dụng trực tiếp cho mô hình cửa hàng vừa và nhỏ.
  • Cán bộ nghiên cứu: Dữ liệu thực nghiệm về việc cải thiện hiệu năng giao diện người dùng qua Virtual DOM và lợi ích đo lường được của ngôn ngữ TypeScript trong các dự án thương mại điện tử.

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

1. Hệ thống có yêu cầu phần cứng máy chủ cấu hình cao không?

Không. Nhờ kiến trúc SPA đẩy toàn bộ gánh nặng kết xuất giao diện về phía trình duyệt Client thông qua JavaScript Engine, máy chủ backend chỉ cần xử lý các yêu cầu RESTful JSON API nhẹ nhàng, vận hành mượt mà trên gói Cloud VPS cơ bản (1-2 vCPU, 2GB RAM).

2. TypeScript mang lại lợi ích cụ thể nào so với JavaScript thuần trong dự án này?

TypeScript cung cấp cơ chế gõ kiểu tĩnh nghiêm ngặt (Strict Type Checking) và các giao diện (Interface) chuẩn hóa cấu trúc dữ liệu (Book, SaleOrder, User). Điều này ngăn chặn triệt để lỗi truy cập thuộc tính không tồn tại (cannot read property of undefined), giúp việc tái cấu trúc code (refactoring) an toàn và nâng cao tốc độ phát triển.

3. Website có hỗ trợ xem và mua sách trên điện thoại di động không?

Có. Giao diện được thiết kế theo tư duy Responsive Web Design với hệ thống lưới linh hoạt (Flexbox/Grid CSS), đảm bảo hiển thị tối ưu trên tất cả kích thước màn hình từ Desktop, Tablet đến Smartphone.

4. Dữ liệu giỏ hàng có bị mất khi người dùng đóng trình duyệt không?

Trong phiên bản hiện tại, giỏ hàng được quản lý qua Redux Store kết hợp bộ nhớ trình duyệt (LocalStorage/Session). Khách hàng khi tải lại trang hoặc mở lại trình duyệt trong cùng phiên làm việc vẫn giữ nguyên danh mục sách đã chọn.

5. Khả năng mở rộng của hệ thống khi số lượng đầu sách tăng lên hàng chục ngàn cuốn?

Hệ thống được thiết kế hỗ trợ phân trang ở tầng cơ sở dữ liệu (LIMIT - OFFSET hoặc Cursor-based pagination) và cơ chế Lazy-loading hình ảnh phía ReactJS. Khi dữ liệu mở rộng, chỉ cần bổ sung bộ nhớ đệm Redis Cache cho các truy vấn sách phổ biến là hệ thống có thể chịu tải hàng ngàn truy cập đồng thời.

Kết luận

Đồ án tốt nghiệp "Xây dựng website bán sách cho cửa hàng Tâm An sử dụng công nghệ ReactJS" do sinh viên Ngô Chung Á Âu thực hiện đã giải quyết trọn vẹn bài toán số hóa quy trình kinh doanh cho một cửa hàng sách thực tế. Dự án chứng minh tính đúng đắn và hiệu quả vượt trội của việc kết hợp thư viện ReactJS với ngôn ngữ TypeScript trong xây dựng các ứng dụng thương mại điện tử đơn trang (SPA) tốc độ cao, giao diện hiện đại và cấu trúc mã nguồn chuẩn mực. Đây không chỉ là một sản phẩm học thuật hoàn chỉnh từ phân tích nghiệp vụ, thiết kế hệ thống CSDL chuẩn đến hiện thực hóa mã nguồn, mà còn là một giải pháp chuyển đổi số có giá trị ứng dụng thực tiễn cao cho cộng đồng doanh nghiệp bán lẻ.