Giới thiệu dự án

Thương mại điện tử (E-commerce) tại Việt Nam đang chứng kiến tốc độ tăng trưởng kép hàng năm (CAGR) vượt mức 20% trong giai đoạn hậu Covid-19, từng bước thay đổi căn bản hành vi tiêu dùng từ trực tiếp sang trực tuyến. Tuy nhiên, các doanh nghiệp bán lẻ thời trang vừa và nhỏ (SMEs), đặc biệt trong ngành hàng giày dép, đối mặt với rào cản lớn: các hệ thống nguyên khối (monolithic) cũ kỹ gây nghẽn hiệu năng, chi phí vận hành cao, trải nghiệm mua sắm gián đoạn và khả năng tối ưu hóa công cụ tìm kiếm (SEO) kém do phụ thuộc vào các giải pháp client-side rendering thuần túy.

Đề tài "Xây dựng Website bán giày" (tên thương hiệu thử nghiệm: Tuyển Shoes) do sinh viên Trần Trọng Tuyển (Lớp 19CNTTD, Trường Đại học Sư phạm – Đại học Đà Nẵng, dưới sự hướng dẫn của ThS. Hồ Ngọc Tú) thực hiện nhằm giải quyết trực tiếp bài toán này. Đồ án tập trung nghiên cứu, thiết kế và phát triển một nền tảng thương mại điện tử chuyên biệt cho ngành giày thể thao, kết hợp giữa kiến trúc giao diện hiện đại hướng hiệu năng và hệ thống backend xử lý dữ liệu tin cậy.

+-----------------------------------------------------------------------------+
|                           MỤC TIÊU CỐT LÕI DỰ ÁN                            |
+-----------------------------------------------------------------------------+
| 1. Chuẩn hóa quy trình nghiệp vụ bán lẻ và quản trị kho giày trực tuyến.    |
| 2. Ứng dụng NuxtJS (Universal SSR) giải quyết triệt để bài toán SEO & Tốc độ|
| 3. Xây dựng RESTful API chuẩn mực trên nền tảng ASP.NET Core 2.2.           |
| 4. Thiết kế cơ sở dữ liệu quan hệ tối ưu hóa truy vấn trên MySQL/SQL Server.|
+-----------------------------------------------------------------------------+

Phương pháp tiếp cận và kết quả kỳ vọng

Dự án áp dụng phương pháp kiến trúc tách biệt (Decoupled Architecture) giữa lớp hiển thị (Frontend) và lớp dịch vụ xử lý (Backend API). Thay vì kết xuất giao diện truyền thống từ máy chủ (Server-side rendering kiểu MVC cũ) làm tăng tải CPU hoặc Single Page Application (SPA) client-side thuần túy làm mất khả năng thu thập dữ liệu của bot tìm kiếm, giải pháp lựa chọn NuxtJS đóng vai trò Universal Vue Application.

  • Thời gian phản hồi máy chủ (TTFB - Time to First Byte): < 200ms đối với các trang danh mục sản phẩm tĩnh/bán tĩnh.
  • Chỉ số First Contentful Paint (FCP): < 1.2 giây trên mạng 4G tiêu chuẩn.
  • Điểm đánh giá Lighthouse SEO & Performance: Đạt từ 88–95/100 điểm.
  • Phạm vi hệ thống: Tập trung giải quyết luồng duyệt danh mục, chi tiết thuộc tính sản phẩm (kích cỡ, màu sắc), quản lý giỏ hàng động, quy trình đặt hàng và phân hệ quản trị (Dashboard CRUD sản phẩm, phân quyền người dùng). Giới hạn ở việc mô phỏng thanh toán trực tiếp qua xác nhận đơn hàng và thanh toán khi nhận hàng (COD).

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

Phân tích hiện trạng và thị trường

Khảo sát các giải pháp bán lẻ trực tuyến hiện hành trên thị trường cho thấy sự phân hóa rõ rệt giữa các mô hình triển khai:

Tiêu chí phân tích CMS Nguồn mở (WooCommerce/WP) SPA Client-Side (Vue/React CSR) Hệ thống Đề xuất (NuxtJS + ASP.NET Core)
Khả năng SEO Tốt (SSR mặc định) Kém (Bot khó render JS động) Xuất sắc (Universal SSR + Meta-tagging)
Hiệu năng tải trang Trung bình (Nhiều plugin rác) Nhanh sau lần tải đầu Tối ưu (Code-splitting + Lightweight ~18KB)
Bảo mật & Phân quyền Dễ bị tấn công lỗ hổng plugin Phụ thuộc vào Backend API Bảo mật cao (Type-safe backend, JWT Auth)
Khả năng mở rộng API Hạn chế, cấu trúc monolithic Cao Rất cao (RESTful microservices-ready)
Chi phí bảo trì Thấp ban đầu, cao về sau Trung bình Thấp, kiến trúc module hóa rõ ràng

Dựa trên phương pháp phân loại yêu cầu MoSCoW, hệ thống xác định các yêu cầu kỹ thuật:

  • Must-Have: Xác thực người dùng (Auth), Danh mục sản phẩm đa cấp, Chi tiết biến thể giày (Size/Color), Giỏ hàng bất đồng bộ, Module Quản trị CRUD.
  • Should-Have: Dynamic Routing tự động hóa, Responsive Design Mobile-First, Tự động nén tài nguyên CSS/JS.
  • Could-Have: Quản lý mã giảm giá, Đánh giá/bình luận sản phẩm bằng AJAX.
  • Won't-Have (giai đoạn này): Cổng thanh toán quốc tế đa tiền tệ, Hệ thống AI đề xuất sản phẩm theo hành vi thời gian thực.

Thiết kế hệ thống

Kiến trúc tổng thể được xây dựng theo mô hình 3 tầng (3-Tier Architecture) phân tán:

graph TD
    Client[Web Browser / Mobile Client] -->|HTTP Request / Vue Router| NuxtEngine[NuxtJS Universal Server Node.js]
    NuxtEngine -->|Server-Side Rendering| Client
    NuxtEngine -->|Axios / REST API Call| APIGateway[ASP.NET Core 2.2 Web API]
    APIGateway -->|Data Layer / Entity Framework| Database[(MySQL / MS SQL Server RDBMS)]
    
    subgraph Frontend Architecture
        NuxtEngine --- Middleware[Route Middleware]
        NuxtEngine --- VuexStore[Vuex State Management]
        NuxtEngine --- Components[Vue Components / Pages]
    end
    
    subgraph Backend Services
        APIGateway --- AuthModule[Authentication & JWT Service]
        APIGateway --- ProductModule[Product & Inventory Service]
        APIGateway --- OrderModule[Cart & Order Processing]
    end

Technology Stack và Thông số phiên bản

  • Frontend Framework: Vue.js 2.6.14 kết hợp Nuxt.js 2.15.8 (Universal Mode).
  • UI Toolkit: Bootstrap 4.6.0 (Hệ thống Grid System Responsive, Flexbox).
  • Backend Framework: ASP.NET Core 2.2 (C# 7.3, Kestrel Web Server).
  • Hệ quản trị CSDL: MySQL Community Server 8.0 / Microsoft SQL Server 2019.
  • Môi trường phát triển: Visual Studio 2019 Enterprise & Visual Studio Code v1.63+.

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

Mô hình dữ liệu quan hệ được chuẩn hóa ở dạng chuẩn 3NF với các thực thể cốt lõi:

  1. Users (UserId INT PK, Username VARCHAR(50), PasswordHash VARCHAR(255), Email VARCHAR(100), RoleId INT FK).
  2. Roles (RoleId INT PK, RoleName VARCHAR(20)).
  3. Categories (CategoryId INT PK, CategoryName VARCHAR(100), Slug VARCHAR(100)).
  4. Products (ProductId INT PK, CategoryId INT FK, ProductName VARCHAR(200), Price DECIMAL(18,2), Description LONGTEXT, Image VARCHAR(255), StockQuantity INT, CreatedAt DATETIME).
  5. Orders (OrderId INT PK, UserId INT FK, OrderDate DATETIME, TotalAmount DECIMAL(18,2), Status VARCHAR(50), ShippingAddress VARCHAR(255)).
  6. OrderDetails (OrderDetailId INT PK, OrderId INT FK, ProductId INT FK, Quantity INT, UnitPrice DECIMAL(18,2)).

Thiết kế RESTful API Endpoints

  • POST /api/v1/auth/login: Xác thực tài khoản, cấp phát Token JWT.
  • GET /api/v1/products: Lấy danh sách sản phẩm (hỗ trợ phân trang page, limit, lọc categoryId).
  • GET /api/v1/products/{id}: Trả về chi tiết thông số kỹ thuật sản phẩm.
  • POST /api/v1/admin/products: Endpoint quản trị tạo sản phẩm mới (Yêu cầu Role Admin).
  • POST /api/v1/orders: Tạo đơn hàng và chi tiết đơn hàng từ dữ liệu giỏ hàng.

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 (mỗi Sprint kéo dài 2 tuần):

  • Sprint 1: Khảo sát yêu cầu, thiết kế Database EER, cài đặt môi trường ASP.NET Core & NuxtJS skeleton.
  • Sprint 2: Xây dựng Core API (CRUD sản phẩm, danh mục, phân quyền) và Unit Test tầng Backend.
  • Sprint 3: Phát triển giao diện người dùng NuxtJS, tích hợp Vuex Store, Async Data và Responsive Layout.
  • Sprint 4: Tích hợp kiểm thử UAT, tối ưu hóa bundle JavaScript, đánh giá bảo mật và Deploy.

Implementation và kết quả

Quy trình phát triển và Code Snippets kỹ thuật

Hệ thống tận dụng tính năng tự động sinh route của NuxtJS thông qua cấu trúc thư mục /pages. Đối với trang chi tiết sản phẩm và danh mục động, cơ chế Dynamic Routing được ánh xạ trực tiếp từ file _id.vue và _slug.vue:

// pages/products/_id.vue - Cơ chế Universal SSR Fetching trong NuxtJS
export default {
  name: 'ProductDetail',
  async asyncData({ params, $axios, error }) {
    try {
      // Dữ liệu được fetch bất đồng bộ tại Server trước khi render DOM
      const response = await $axios.get(`/api/v1/products/${params.id}`);
      return { 
        product: response.data,
        pageTitle: `${response.data.productName} - Tuyển Shoes`
      };
    } catch (err) {
      error({ statusCode: 404, message: 'Sản phẩm không tồn tại trên hệ thống' });
    }
  },
  head() {
    return {
      title: this.pageTitle,
      meta: [
        { hid: 'description', name: 'description', content: this.product.description.substring(0, 160) },
        { hid: 'og:image', property: 'og:image', content: this.product.image }
      ]
    };
  }
}

Tại tầng xử lý backend, ASP.NET Core 2.2 sử dụng mô hình Dependency Injection nhằm chuẩn hóa tầng Service và Repository, đảm bảo khả năng mở rộng và kiểm thử:

// Controllers/ProductsController.cs - RESTful API Backend
[Route("api/v1/[controller]")]
[ApiController]
public class ProductsController : ControllerBase
{
    private readonly IProductRepository _productRepo;
    public ProductsController(IProductRepository productRepo)
    {
        _productRepo = productRepo;
    }

    [HttpGet]
    [ProducesResponseType(typeof(IEnumerable<ProductDto>), StatusCodes.Status200OK)]
    public async Task<IActionResult> GetAll([FromQuery] int page = 1, [FromQuery] int pageSize = 12)
    {
        var products = await _productRepo.GetPagedProductsAsync(page, pageSize);
        return Ok(products);
    }
}

Quản lý trạng thái giỏ hàng ở Frontend sử dụng Vuex Store xử lý dữ liệu phản ứng (Reactivity):

// store/cart.js - Quản lý State giỏ hàng bất đồng bộ
export const state = () => ({
  cartItems: []
});

export const mutations = {
  ADD_TO_CART(state, product) {
    const item = state.cartItems.find(i => i.productId === product.productId);
    if (item) {
      item.quantity += 1;
    } else {
      state.cartItems.push({ ...product, quantity: 1 });
    }
  }
};

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

Hệ thống đã trải qua quy trình kiểm thử toàn diện bao gồm Functional Testing, Unit Testing (xUnit cho Backend, Jest cho Vue Components) và Performance Benchmarking bằng Google Lighthouse.

+-----------------------------------------------------------------------------+
|                     LIGHTHOUSE PERFORMANCE BENCHMARK                        |
+-----------------------------------------------------------------------------+
| Metric                      | Traditional CSR (Vue) | NuxtJS SSR Engine     |
+-----------------------------+-----------------------+-----------------------+
| First Contentful Paint (FCP)| 2.8 s                 | 1.1 s (-60.7%)        |
| Speed Index                 | 3.4 s                 | 1.4 s (-58.8%)        |
| Time to Interactive (TTI)   | 3.9 s                 | 1.8 s (-53.8%)        |
| Total Blocking Time (TBT)   | 340 ms                | 80 ms (-76.4%)        |
| Cumulative Layout Shift(CLS)| 0.08                  | 0.01 (-87.5%)         |
| SEO Score                   | 62/100                | 96/100 (+54.8%)       |
+-----------------------------------------------------------------------------+
  • Độ bao phủ kiểm thử (Test Coverage): Đạt 82.4% trên các modules nghiệp vụ tính toán đơn hàng và xác thực.
  • User Acceptance Testing (UAT): Thử nghiệm trên 45 người dùng thuộc nhóm đối tượng học sinh, sinh viên và nhân viên văn phòng. Điểm hài lòng giao diện đạt 4.65/5.0; tỷ lệ hoàn tất tác vụ mua hàng trong vòng 3 phút đạt 93.3%.

Đổi mới và đóng góp kỹ thuật

  1. Chuyển đổi kiến trúc Universal SSR cho E-commerce bán lẻ: Thay vì sử dụng SPA thuần túy khiến các thẻ meta OpenGraph và nội dung động không thể index bởi bot của Google hay Facebook, việc tích hợp Nuxt.js Server-Side Renderer giúp tự động dựng trước HTML thô tại máy chủ Node.js, tăng tốc độ lập chỉ mục SEO lên 60%.
  2. Tối ưu hóa dung lượng gói nạp (Bundle Optimization): Nhờ cơ chế Code-splitting tự động theo từng trang của NuxtJS và kích thước core framework Vue chỉ 18KB (min+gzip), lượng dữ liệu truyền tải ban đầu giảm 45% so với các ứng dụng Angular hoặc React nguyên khối cùng quy mô.
  3. Chuẩn hóa quy trình Dynamic Routing: Loại bỏ việc phải cấu hình route thủ công hàng trăm dòng bằng file-system based routing thông qua tiền tố _id.vue và _slug.vue, giảm thiểu 80% lỗi sai đường dẫn (dead routes).
  4. Backend phân lớp dạng Module hóa: Áp dụng ASP.NET Core 2.2 cho phép đóng gói API đa nền tảng (chạy mượt mà trên cả Linux Kestrel và Windows IIS), tận dụng tính năng Dependency Injection nguyên bản để cô lập logic nghiệp vụ với cơ sở dữ liệu.

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

Kịch bản sử dụng thực tế (Real-World Use Cases)

Website đáp ứng trực tiếp nhu cầu số hóa của các chuỗi cửa hàng giày thể thao vừa và nhỏ:

  • Trải nghiệm khách hàng: Khách hàng duyệt danh mục phân cấp theo thương hiệu (Nike, Adidas, Puma...), lọc theo mức giá và kích thước. Thực hiện thêm sản phẩm vào giỏ hàng mà không bị gián đoạn hay tải lại toàn bộ trang web nhờ cơ chế SPA/AJAX.
  • Vận hành nội bộ: Chủ cửa hàng truy cập hệ thống quản trị để thêm mã hàng mới, kiểm soát số lượng tồn kho theo thời gian thực và trích xuất danh sách đơn đặt hàng để xử lý giao vận.

Chiến lược triển khai và Phân tích chi phí (Deployment & ROI)

Hệ thống được đóng gói để triển khai linh hoạt trên hạ tầng điện toán đám mây hoặc máy chủ ảo (VPS):

+-------------------+         +--------------------+         +-------------------+
|   Nginx Reverse   | ------> | NuxtJS SSR Service | ------> | ASP.NET Core API  |
|    Proxy (Port 80)|         | (Node.js :3000)    |         | (Kestrel :5000)   |
+-------------------+         +--------------------+         +-------------------+
                                                                       |
                                                                       v
                                                             +-------------------+
                                                             |  MySQL Database   |
                                                             |   Server (:3306)  |
                                                             +-------------------+
  • Yêu cầu hệ thống máy chủ tối thiểu: 2 vCPU, 4GB RAM, 40GB SSD (Ubuntu Server 20.04 LTS hoặc Windows Server 2019).
  • Chi phí vận hành hạ tầng ước tính: Khoảng 250.000 – 400.000 VNĐ/tháng cho VPS tiêu chuẩn, phục vụ tốt lưu lượng 15.000 – 25.000 lượt truy cập/tháng.
  • Hiệu quả đầu tư (ROI): Cắt giảm 70% chi phí bản quyền phần mềm so với việc sử dụng các nền tảng thương mại đóng gói SaaS độc quyền, hoàn vốn đầu tư phát triển trong vòng 3–6 tháng vận hành thực tế.

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

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

  • Cơ chế khóa tồn kho (Inventory Locking): Chưa triển khai Distributed Lock (như Redis Redlock) để xử lý triệt để bài toán Race Condition khi nhiều người dùng cùng bấm mua đôi giày cuối cùng ở cùng một mili-giây.
  • Tích hợp cổng thanh toán: Hệ thống dừng lại ở mức ghi nhận đơn hàng COD và chuyển khoản nội bộ, chưa tích hợp trực tiếp webhook của các cổng như VNPay, MoMo hay ZaloPay.
  • Bộ nhớ đệm (Caching Layer): Chưa triển khai Redis Cache độc lập cho tầng API để lưu trữ kết quả của các truy vấn danh mục có tần suất đọc cao.

Hướng phát triển và mở rộng

  1. Nâng cấp Framework: Chuyển đổi toàn diện hệ thống lên .NET 8 LTS (Backend) và Nuxt 3 / Vue 3 Composition API (Frontend) để khai thác hiệu năng của V8 Engine mới và TypeScript Type-safety.
  2. Tích hợp thanh toán trực tuyến: Kết nối API thanh toán đa kênh chuẩn PCI-DSS với hệ thống Webhook tự động cập nhật trạng thái đơn hàng.
  3. Xây dựng Mobile App: Ứng dụng công nghệ Progressive Web App (PWA) hoặc sử dụng React Native/Flutter dùng chung tầng RESTful API sẵn có.
  4. Cá nhân hóa trải nghiệm: Ứng dụng thuật toán lọc cộng tác (Collaborative Filtering) để gợi ý sản phẩm phù hợp với cỡ chân và sở thích của từng khách hàng.

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

  • Sinh viên ngành CNTT & Kỹ thuật phần mềm: Đồ án cung cấp một tài liệu tham khảo hoàn chỉnh từ lý thuyết đến triển khai thực tế về cách kết hợp giữa Universal Frontend (Nuxt.js) và Backend hướng dịch vụ (ASP.NET Core).
  • Lập trình viên Web (Developers): Nắm vững các pattern thiết kế routing động, quản lý state giỏ hàng bất đồng bộ bằng Vuex và chuẩn hóa kiến trúc RESTful API đa nền tảng.
  • Doanh nghiệp bán lẻ (SMEs): Sở hữu một giải pháp mã nguồn mở hiệu năng cao, chi phí vận hành thấp, sẵn sàng mở rộng quy mô mà không bị phụ thuộc vào các nền tảng tính phí bản quyền hàng tháng.
  • Nhà nghiên cứu ứng dụng: Dữ liệu thực nghiệm về việc cải thiện chỉ số Core Web Vitals và SEO khi chuyển dịch từ Classic CSR sang Universal SSR.

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

1. Yêu cầu cấu hình kỹ thuật tối thiểu để triển khai hệ thống là gì?

Máy chủ cần cài đặt môi trường Node.js (v14+), .NET Core Runtime 2.2 (hoặc .NET 6/8 runtime tương thích ngược), và máy chủ cơ sở dữ liệu MySQL 8.0 hoặc SQL Server 2019. Cấu hình phần cứng khuyến nghị tối thiểu 2 Core CPU và 4GB RAM để đảm bảo vận hành đồng thời cả Node engine và Kestrel server.

2. Hệ thống xử lý bài toán quá tải khi lưu lượng truy cập tăng đột biến như thế nào?

Kiến trúc tách rời cho phép thực hiện mở rộng độc lập (Scale horizontally):

  • Tầng Frontend NuxtJS có thể nhân bản nhiều instance chạy dưới sự điều phối của PM2 Cluster Mode hoặc Nginx Load Balancer.
  • Tầng Backend ASP.NET Core là stateless, cho phép đặt sau một reverse proxy cân bằng tải mà không cần đồng bộ session phức tạp.

3. Việc tích hợp hệ thống với các phần mềm quản lý bán hàng (POS) có khả thi không?

Hoàn toàn khả thi. Do toàn bộ dữ liệu nghiệp vụ được trừu tượng hóa dưới dạng các chuẩn RESTful API với định dạng JSON, hệ thống dễ dàng kết nối hai chiều với các phần mềm POS (như KiotViet, Sapo) thông qua các Webhook và API Service.

4. Chi phí và quy trình bảo trì hệ thống định kỳ gồm những gì?

Quy trình bảo trì bao gồm: Sao lưu định kỳ cơ sở dữ liệu (Automated Daily Backup), dọn dẹp log truy vấn, kiểm tra các bản vá bảo mật của packages trong file package.json và cập nhật chứng chỉ bảo mật SSL/TLS (Let's Encrypt). Tổng thời gian bảo trì định kỳ ước tính dưới 2 giờ/tháng.

5. Tại sao đồ án lại chọn NuxtJS thay vì VueJS đơn thuần hay ReactJS?

VueJS hoặc ReactJS thuần túy chạy theo mô hình Client-Side Rendering (CSR). Khi robot của các công cụ tìm kiếm cào dữ liệu, chúng nhận về một file HTML gần như rỗng (<div id="app"></div>), làm giảm mạnh khả năng xếp hạng từ khóa sản phẩm. NuxtJS cung cấp cơ chế Server-Side Rendering giúp dựng sẵn cây DOM hoàn chỉnh ngay từ server, tối ưu 100% cho SEO ngành thương mại điện tử mà vẫn giữ nguyên trải nghiệm mượt mà của SPA.

Kết luận

Đề tài "Xây dựng Website bán giày" của tác giả Trần Trọng Tuyển đã hoàn thành xuất sắc các mục tiêu nghiên cứu và ứng dụng kỹ thuật đề ra. Bằng cách kết hợp linh hoạt giữa các công nghệ hiện đại như NuxtJS (Universal SSR), Vue.js, Bootstrap và ASP.NET Core 2.2 cùng hệ quản trị CSDL quan hệ, dự án đã giải quyết đồng thời hai bài toán phức tạp của thương mại điện tử bán lẻ: Tối ưu hóa công cụ tìm kiếm (SEO) và Tốc độ phản hồi giao diện người dùng.

Hệ thống không chỉ dừng lại ở phạm vi một đồ án học phần đạt chuẩn học thuật mà còn mang giá trị ứng dụng thực tiễn cao, cung cấp khung kiến trúc chuẩn mực (boilerplate) cho các giải pháp chuyển đổi số bán lẻ trong tương lai. Để tìm hiểu thêm chi tiết về cấu trúc mã nguồn hoặc đóng góp phát triển hệ thống, bạn đọc có thể tham khảo trực tiếp tài liệu kỹ thuật của dự án tại cổng thông tin Khoa Công nghệ Thông tin – Trường Đại học Sư phạm, Đại học Đà Nẵng.