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 ấn tượng từ 20-25%/năm, dần thay thế phương thức mua bán truyền thống nhờ tính tiện lợi, tối ưu chi phí vận hành và xóa bỏ rào cản địa lý. Tuy nhiên, phần lớn các hệ thống bán lẻ trực tuyến vừa và nhỏ hiện nay vẫn vận hành trên nền tảng nguyên khối (Monolithic Architecture) thế hệ cũ như ASP.NET Web Forms hoặc PHP truyền thống. Kiến trúc này bộc lộ nhiều điểm nghẽn nghiêm trọng: tải lại toàn bộ trang (full-page reload) gây tiêu tốn băng thông, độ trễ giao diện cao (>3.5 giây), khó bảo trì và phụ thuộc chặt chẽ vào hạ tầng máy chủ Windows độc quyền.

Đồ án tốt nghiệp ngành Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE) với đề tài "Xây dựng Website bán hàng với Angular + ASP.NET Core" được thực hiện bởi sinh viên Phạm Thanh Duy và Nguyễn Đình Hùng, dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo. Dự án tập trung giải quyết bài toán hiện đại hóa hạ tầng bán lẻ số bằng cách phân tách độc lập lớp giao diện Single Page Application (SPA) và hệ thống xử lý Backend RESTful API hiệu năng cao.

+-------------------------------------------------------------------------+
|                              HỆ THỐNG WEBSITE                           |
+------------------------------------+------------------------------------+
|         Giao diện SPA Client       |        Hệ thống Backend API        |
|  - Angular 7.x & TypeScript 3.1    |  - ASP.NET Core 2.2 Web API        |
|  - Lazy Loading & Route Guards     |  - Entity Framework Core & LINQ    |
|  - RxJS Reactive State Management  |  - JWT Stateless Authentication    |
+------------------------------------+------------------------------------+

Mục tiêu dự án

  1. Nghiên cứu và làm chủ công nghệ: Khai thác toàn diện các tính năng của Angular 7 (Component-based, Dependency Injection, RxJS, Lazy Loading, Route Guards) và ASP.NET Core 2.2 (Cross-platform, Middleware Pipeline, Kestrel Web Server).
  2. Thiết kế kiến trúc phân tán (Decoupled Architecture): Xây dựng hệ thống RESTful API chuẩn hóa, tách biệt hoàn toàn Client-Side và Server-Side nhằm tăng khả năng tái sử dụng cho các nền tảng di động trong tương lai.
  3. Hiện thực hóa quy trình nghiệp vụ E-Commerce hoàn chỉnh: Xây dựng đầy đủ các phân hệ từ quản lý danh mục đa cấp, giỏ hàng, đặt hàng, đánh giá/bình luận, nhập hàng kho đến phân quyền người dùng đa cấp bậc (Admin, Staff, Customer).
  4. Tối ưu hóa hiệu năng và trải nghiệm người dùng (UX): Đạt thời gian phản hồi API dưới 120ms, tốc độ chuyển trang tức thì không tải lại trang và tối ưu hóa lượng dữ liệu truyền tải qua mạng thông qua cơ chế phân trang phía máy chủ (Server-side Pagination).

Phạm vi và giới hạn hệ thống

  • Phạm vi nghiên cứu: Xây dựng ứng dụng Web bán hàng trực tuyến hỗ trợ đầy đủ thiết bị (Desktop, Tablet, Mobile Responsive), quản lý kho vận cơ bản và tích hợp xác thực tài khoản qua mạng xã hội (Google, Facebook).
  • Giới hạn kỹ thuật: Chưa tích hợp cổng thanh toán trực tuyến tự động qua thẻ quốc tế (sử dụng hình thức COD/chuyển khoản nội bộ) và chưa triển khai Server-Side Rendering (SSR/Angular Universal) cho việc tối ưu bọ tìm kiếm nâng cao.

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

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

Khảo sát các nền tảng thương mại điện tử hàng đầu tại thị trường Việt Nam (Lazada, Shopee, Thế Giới Di Động) cho thấy các ưu điểm và hạn chế trong trải nghiệm người dùng:

Tiêu chí so sánh Nền tảng Monolith truyền thống Sàn TMĐT lớn (Shopee/Lazada) Hệ thống Angular + ASP.NET Core đề xuất
Cơ chế tải trang Tải lại toàn bộ trang (Full reload) SPA kết hợp Dynamic Hydration SPA tối ưu hóa với Lazy Loading Module
Tốc độ phản hồi Chậm (2.5s - 4.5s) Nhanh (< 1.5s) Rất nhanh (< 1.0s chuyển trang nội bộ)
Tiêu tốn băng thông Rất cao (Tải lại HTML + CSS + JS) Trung bình (Tối ưu hóa dữ liệu) Rất thấp (Chỉ trao đổi JSON payload thô)
Mức độ phụ thuộc OS Chỉ chạy trên Windows Server (IIS) Đa nền tảng (Cloud Microservices) Chạy đa nền tảng (Linux, macOS, Docker)
Khả năng mở rộng API Thấp, ghép nối chặt chẽ UI-Logic Rất cao Cao, chuẩn RESTful API sẵn sàng tích hợp Mobile App

Dựa trên phân tích, dự án áp dụng mô hình phân loại yêu cầu MoSCoW:

  • Must Have: Xác thực JWT, Quản lý tài khoản (Auth/Social Login), Giỏ hàng, Đặt hàng, Phân quyền đa cấp (Admin/Staff/Customer), Quản lý sản phẩm & danh mục đa cấp.
  • Should Have: Đánh giá & bình luận sản phẩm, Quản lý nhập hàng kho, Phân trang Server-side, Lọc sản phẩm nâng cao, Quản lý trình chiếu Banner quảng cáo.
  • Could Have: Gợi ý sản phẩm ngẫu nhiên thay đổi theo ngày, Xem trước ảnh động khi chỉnh sửa, Quản lý địa chỉ giao hàng 63 tỉnh thành Việt Nam.
  • Won't Have (Giai đoạn này): Thanh toán cổng quốc tế (Stripe/PayPal Sandbox), Hệ thống Chat Real-time WebSocket (SignalR).

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ụ (Multi-tier Architecture):

+--------------------------------------------------------------------+
|                         CLIENT TIER (SPA)                          |
|  Angular 7 UI Components <--> RxJS Services <--> HTTP Interceptor  |
+----------------------------------+---------------------------------+
                                   |  HTTPS / JSON Payload (JWT Bearer)
+----------------------------------v---------------------------------+
|                         BACKEND API TIER                           |
|  Controllers (Routing, Auth) <--> Middleware Pipeline (CORS, Error)|
|  Business Services <--> Data Access Layer (Entity Framework Core)  |
+----------------------------------+---------------------------------+
                                   |  T-SQL Queries / Transactions
+----------------------------------v---------------------------------+
|                          DATABASE TIER                             |
|               Microsoft SQL Server (Relational DB)                 |
+--------------------------------------------------------------------+

Bảng công nghệ và phiên bản chuẩn hóa

  • Frontend Framework: Angular v7.2.0, Angular CLI v7.3.0, TypeScript v3.1.6, RxJS v6.3.3.
  • Backend Runtime & Framework: .NET Core Runtime v2.2.0, ASP.NET Core Web API v2.2, C# 7.3.
  • ORM & Database: Entity Framework Core v2.2, Microsoft SQL Server 2017/2019.
  • Xác thực & Bảo mật: JSON Web Token (JWT Bearer), BCrypt.Net / ASP.NET Core Identity Core, CORS Policy Middleware.
  • Thư viện UI/UX: Bootstrap 4, FontAwesome 5, SweetAlert2, ng-select.
-- Cấu trúc bảng Sản phẩm và Danh mục trong SQL Server
CREATE TABLE Categories (
    CategoryId INT IDENTITY(1,1) PRIMARY KEY,
    CategoryName NVARCHAR(150) NOT NULL,
    ParentId INT NULL FOREIGN KEY REFERENCES Categories(CategoryId),
    IsActive BIT DEFAULT 1
);

CREATE TABLE Products (
    ProductId INT IDENTITY(1,1) PRIMARY KEY,
    ProductName NVARCHAR(250) NOT NULL,
    CategoryId INT FOREIGN KEY REFERENCES Categories(CategoryId),
    Price DECIMAL(18,2) NOT NULL,
    DiscountPrice DECIMAL(18,2) DEFAULT 0,
    StockQuantity INT NOT NULL DEFAULT 0,
    Description NVARCHAR(MAX),
    ImageUrl NVARCHAR(500),
    CreatedAt DATETIME DEFAULT GETDATE(),
    IsActive BIT DEFAULT 1
);

Thiết kế danh mục API chính (RESTful Endpoints)

  • POST /api/auth/login: Xác thực người dùng, trả về JWT Token và thông tin phân quyền.
  • POST /api/auth/register: Đăng ký tài khoản khách hàng mới.
  • GET /api/products?page=1&pageSize=12&catId=5: Lấy danh sách sản phẩm phân trang và lọc danh mục.
  • GET /api/products/{id}: Xem chi tiết sản phẩm kèm thuộc tính và đánh giá liên quan.
  • POST /api/orders: Tạo mới đơn hàng, trừ tồn kho và xóa giỏ hàng tương ứng.
  • GET /api/admin/reports/revenue?from=...&to=...: Thống kê doanh thu, số hóa đơn theo khoảng thời gian.

Methodology

Dự án được tổ chức theo phương pháp phát triển phần mềm lặp Agile/Scrum rút gọn trong thời gian 19 tuần (từ ngày 04/03/2019 đến 14/07/2019):

  • Tuần 1 - Tuần 3: Khảo sát hiện trạng, thiết lập cơ sở dữ liệu, khởi tạo dự án Angular 7 và ASP.NET Core 2.2.
  • Tuần 4 - Tuần 8: Xây dựng Module Authentication (JWT, Google/Facebook OAuth), trang cá nhân và quản lý sổ địa chỉ 63 tỉnh thành.
  • Tuần 9 - Tuần 12: Xây dựng danh mục sản phẩm đa cấp, module giỏ hàng, responsive layout, kiểm soát phân quyền với Route Guards.
  • Tuần 13 - Tuần 16: Triển khai HTTP Interceptors, tối ưu lazy loading, xây dựng hệ thống báo cáo thống kê doanh thu và thuật toán gợi ý sản phẩm.
  • Tuần 17 - Tuần 19: Kiểm thử đơn vị (Unit Test), tối ưu hiệu năng truy vấn, đóng gói sản phẩm và hoàn thiện báo cáo khóa luận.

Implementation và kết quả

Development process

Một trong những thách thức kỹ thuật lớn nhất trong đồ án là xử lý xác thực phi trạng thái (Stateless Authentication) qua JWT Token trên Angular 7 và cấu trúc danh mục sản phẩm phân cấp lồng nhau không giới hạn cấp bậc.

1. Xử lý gắn JWT Token tự động qua HTTP Interceptor (Angular 7)

Đảm bảo mọi HTTP Request gửi lên server đều tự động đính kèm Token xác thực trong Header Authorization: Bearer <token>:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('access_token');
    let clonedRequest = req;
    
    if (token) {
      clonedRequest = req.clone({
        setHeaders: { Authorization: `Bearer ${token}` }
      });
    }

    return next.handle(clonedRequest).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401 || error.status === 403) {
          localStorage.removeItem('access_token');
          this.router.navigate(['/dang-nhap']);
        }
        return throwError(error);
      })
    );
  }
}

2. Xử lý phân trang dữ liệu tối ưu trên ASP.NET Core (Server-Side Pagination)

Tránh việc truyền tải toàn bộ bảng dữ liệu lớn về client, API thực hiện tính toán phân trang trực tiếp trên SQL Server qua LINQ Skip và Take:

[HttpGet]
[Route("api/products")]
public async Task<IActionResult> GetProducts([FromQuery] ProductFilterParams filter)
{
    var query = _context.Products.AsNoTracking().Where(p => p.IsActive);

    if (filter.CategoryId.HasValue)
        query = query.Where(p => p.CategoryId == filter.CategoryId.Value);

    if (!string.IsNullOrEmpty(filter.SearchKeyword))
        query = query.Where(p => p.ProductName.Contains(filter.SearchKeyword) || p.ProductId.ToString() == filter.SearchKeyword);

    var totalItems = await query.CountAsync();
    var items = await query.OrderByDescending(p => p.CreatedAt)
                           .Skip((filter.PageIndex - 1) * filter.PageSize)
                           .Take(filter.PageSize)
                           .ToListAsync();

    var response = new PagedResult<ProductDto>
    {
        TotalCount = totalItems,
        PageIndex = filter.PageIndex,
        PageSize = filter.PageSize,
        TotalPages = (int)Math.Ceiling(totalItems / (double)filter.PageSize),
        Data = _mapper.Map<List<ProductDto>>(items)
    };

    return Ok(response);
}

Testing và validation

Hệ thống đã trải qua quy trình kiểm thử toàn diện gồm Unit Testing (Jasmine & Karma cho Angular, xUnit cho Backend) và Functional Integration Testing:

  • Tỷ lệ bao phủ kiểm thử (Test Coverage): Đạt 84% logic nghiệp vụ phía Backend và 78% Component phía Frontend.
  • Thời gian đáp ứng trung bình (Average Latency): 85ms đối với các tác vụ đọc dữ liệu sản phẩm có phân trang; 140ms đối với tác vụ tạo đơn hàng phức tạp.
  • Tải giao diện ban đầu (First Contentful Paint): Giảm từ 3.2 giây xuống còn 1.1 giây nhờ áp dụng Lazy Loading cho các Module quản trị (AdminModule, CustomerModule).
  • Độ ổn định hệ thống: Kiểm thử mô phỏng 200 người dùng đồng thời (Concurrent Users) bằng JMeter cho thấy tỷ lệ lỗi phản hồi (Error Rate) dưới 0.1%.

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

+--------------------------------------------------------------------+
|                      CHỈ SỐ ĐẠT ĐƯỢC CỦA DỰ ÁN                     |
+------------------------------------+-------------------------------+
| Tiêu chuẩn đo lường                | Kết quả thực tế               |
| - Tính năng hoàn thành             | 100% mục tiêu đồ án           |
| - Lighthouse Performance Score     | 92 / 100                      |
| - Lighthouse Best Practices        | 96 / 100                      |
| - Mức độ hài lòng của người dùng   | 4.65 / 5.0 (Khảo sát 30 mẫu)   |
+------------------------------------+-------------------------------+

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

  1. Ứng dụng giải pháp kiến trúc Single Page Application tiên tiến: Xóa bỏ hoàn toàn hiện tượng nhấp nháy màn hình khi điều hướng. Toàn bộ logic hiển thị được xử lý tại trình duyệt khách hàng, giúp giảm hơn 65% tải xử lý Render HTML vô ích cho máy chủ trung tâm.
  2. Cấu trúc bảo mật định tuyến 2 lớp (Dual-Layer Guarding): Kiểm soát quyền hạn người dùng chặt chẽ ngay tại Client bằng Angular CanActivate Route Guards kết hợp xác thực phân quyền Token Claims [Authorize(Roles = "Admin,Staff")] tại các Controller của ASP.NET Core, ngăn chặn tuyệt đối các cuộc tấn công vượt quyền (Privilege Escalation).
  3. Hiển thị danh mục đệ quy tối ưu với ngTemplateOutlet: Khắc phục bài toán hiển thị cây danh mục sản phẩm phân tầng sâu mà không làm vỡ DOM hoặc gây tràn bộ nhớ, giúp giao diện Menu luôn tinh gọn và linh hoạt.
  4. Chuẩn hóa phản hồi API (Standardized API Envelope): Thiết lập cấu trúc dữ liệu JSON phản hồi đồng nhất (StatusCode, Success, Message, Data, Errors), giúp việc bắt lỗi và xử lý bất đồng bộ phía Frontend trở nên dễ dàng và giảm thiểu ngoại lệ NullReferenceException.

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

Kịch bản sử dụng thực tế (Use Case Scenarios)

  • Khách hàng cá nhân: Dễ dàng tìm kiếm sản phẩm theo tên, danh mục hoặc mã sản phẩm; lọc theo khoảng giá; xem đánh giá kèm hình ảnh thực tế; thêm vào giỏ hàng linh hoạt và theo dõi lộ trình đơn hàng theo thời gian thực.
  • Nhân viên bán hàng (Staff): Quản lý danh sách đơn hàng đến, phê duyệt hoặc từ chối đơn, cập nhật trạng thái vận chuyển và tạo phiếu nhập kho khi có hàng mới về.
  • Chủ cửa hàng (Administrator): Toàn quyền cấu hình sản phẩm, duyệt bình luận, quản lý phân quyền nhân sự và theo dõi biểu đồ thống kê tăng trưởng doanh thu theo ngày/tháng/năm.

Hướng dẫn triển khai hệ thống (Deployment Pipeline)

# 1. Triển khai Frontend Angular Client
cd ClientApp
npm install
ng build --prod --build-optimizer

# 2. Triển khai Backend ASP.NET Core Web API
cd ../ServerApi
dotnet restore
dotnet ef database update
dotnet publish -c Release -o ./publish

# 3. Chạy ứng dụng trên máy chủ Web Linux/Windows với Kestrel Server
dotnet ./publish/ShopOnlineApi.dll --urls "http://0.0.0.0:5000"

Hệ thống có khả năng đóng gói linh hoạt trong Docker Container, dễ dàng chuyển đổi sang lưu trữ đám mây (Cloud Hosting) trên Microsoft Azure hoặc AWS ECS với chi phí vận hành hạ tầng tiết kiệm tới 40% so với máy chủ Windows truyền thống.

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

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

  • Ứng dụng SPA thuần phía Client gặp một số bất lợi khi máy tìm kiếm thu thập dữ liệu (SEO Indexing) do nội dung cần JavaScript để kết xuất hoàn chỉnh.
  • Chưa tích hợp cổng thanh toán trực tuyến tự động (VNPAY, MoMo, ZaloPay) và tính năng trò chuyện trực tiếp (Live Chat).

Hướng phát triển trong tương lai

  • Nâng cấp Angular Universal: Tích hợp cơ chế Server-Side Rendering (SSR) để tối ưu hóa SEO 100% cho các trang chi tiết sản phẩm.
  • Tích hợp SignalR Real-time Hub: Phát triển hệ thống thông báo trạng thái đơn hàng tức thời và phòng chat hỗ trợ trực tuyến giữa khách hàng và tư vấn viên.
  • Triển khai kiến trúc Microservices: Chia tách nhỏ các Domain (Product Service, Order Service, Identity Service, Notification Service) khi quy mô dữ liệu vượt ngưỡng 1.000.000 sản phẩm.

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

  • Sinh viên chuyên ngành CNTT: Nguồn tài liệu tham khảo chất lượng về cách kết hợp chuẩn mực giữa Angular (TypeScript) và ASP.NET Core (C#), cách tổ chức đồ án tốt nghiệp chuẩn công nghệ phần mềm.
  • Lập trình viên Fullstack: Nắm bắt các mẫu thiết kế (Design Patterns) thực tế: Repository Pattern, Dependency Injection, Token Interceptor, Routing Guard, và xử lý dữ liệu bất đồng bộ với RxJS.
  • Doanh nghiệp vừa và nhỏ (SMEs): Bản thiết kế mẫu giúp doanh nghiệp nhanh chóng triển khai website bán hàng chuyên nghiệp với chi phí đầu tư ban đầu thấp, tốc độ cao và bảo mật vượt trội.
  • Nhà nghiên cứu học thuật: Cung cấp dữ liệu thực nghiệm về việc cải thiện hiệu năng khi chuyển đổi từ kiến trúc nguyên khối sang Single Page Application.

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

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

Máy chủ cài đặt chỉ cần tối thiểu 1 vCPU, 2GB RAM chạy trên hệ điều hành Ubuntu Server 18.04 LTS hoặc Windows Server 2016 trở lên. Phía cơ sở dữ liệu yêu cầu SQL Server 2016 Standard/Express với dung lượng lưu trữ tối thiểu 10GB SSD.

2. Hệ thống có khả năng chịu tải tối đa bao nhiêu người dùng đồng thời?

Với kiến trúc ASP.NET Core 2.2 chạy trên Kestrel Server, một phiên bản máy chủ cấu hình tiêu chuẩn (2 vCPU, 4GB RAM) có thể xử lý mượt mà từ 800 - 1.200 kết nối đồng thời với thời gian phản hồi trung bình duy trì dưới 200ms.

3. Làm thế nào để tích hợp hệ thống với các ứng dụng di động (Mobile Apps)?

Do toàn bộ tầng xử lý logic đã được trừu tượng hóa thành các chuẩn RESTful API và xác thực độc lập bằng JWT Token, các nhà phát triển Flutter hoặc React Native có thể tái sử dụng 100% các API hiện có mà không cần can thiệp vào mã nguồn máy chủ.

4. Chi phí duy trì và nâng cấp hệ thống hàng tháng là bao nhiêu?

Nhờ khả năng chạy tốt trên môi trường Linux mã nguồn mở (Ubuntu/CentOS), chi phí thuê hạ tầng máy chủ ảo (VPS) chỉ dao động từ 150.000 - 300.000 VNĐ/tháng, tiết kiệm hơn 60% chi phí bản quyền so với hệ thống Windows Server truyền thống.

5. Hệ thống phòng chống các lỗ hổng bảo mật phổ biến như thế nào?

Dự án áp dụng cơ chế xác thực chuỗi tham số tự động của Entity Framework Core để vô hiệu hóa hoàn toàn tấn công SQL Injection, sử dụng cơ chế kiểm soát CORS ngăn chặn gọi API trái phép từ miền lạ, và mã hóa mật khẩu người dùng trước khi lưu trữ vào cơ sở dữ liệu.

Kết luận

Đồ án tốt nghiệp "Xây dựng Website bán hàng với Angular + ASP.NET Core" của sinh viên Phạm Thanh Duy và Nguyễn Đình Hùng đã giải quyết xuất sắc mục tiêu đề ra: tạo dựng một hệ sinh thái thương mại điện tử hiện đại, tốc độ cao, bảo mật vững chắc và giàu tính ứng dụng thực tiễn. Đề tài không chỉ hoàn thiện toàn bộ các use-case bán lẻ phức tạp mà còn chứng minh tính ưu việt vượt trội của việc kết hợp giữa công nghệ Frontend hướng thành phần của Google (Angular) và nền tảng Backend hiệu năng hàng đầu của Microsoft (ASP.NET Core). Đây là bước đệm kỹ thuật vững chắc, mở ra tiềm năng mở rộng không giới hạn cho các hệ thống thương mại điện tử thế hệ mới.