Giới thiệu dự án

Thương mại điện tử (E-commerce) trong ngành thời trang và may mặc đang chứng kiến sự tăng trưởng vượt bậc với tỷ lệ tăng trưởng kép hàng năm (CAGR) duy trì ở mức trên 25%. Tuy nhiên, các doanh nghiệp thời trang bán lẻ khi chuyển dịch từ mô hình truyền thống (brick-and-mortar) sang kỹ thuật số thường đối mặt với bài toán tối ưu hóa trải nghiệm người dùng (UX) và giữ chân khách hàng trực tuyến. Đồ án tốt nghiệp "Xây dựng website bán quần áo" của nhóm tác giả Dương Văn Cường và Phạm Thị Hà, dưới sự hướng dẫn của ThS. Trần Công Tú tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE), tập trung giải quyết triệt để các rào cản công nghệ trong việc xây dựng một hệ thống bán lẻ thời trang hiện đại, có khả năng tương tác thông minh và cá nhân hóa sâu sắc.

+-----------------------------------------------------------------------------------+
|                              E-COMMERCE ARCHITECTURE                              |
+-----------------------------------------------------------------------------------+
|  [ Angular 8 SPA Client ]  <--->  [ ASP.NET Web API ]  <--->  [ SQL Server 2016 ]  |
|            |                                |                           |         |
|            v                                v                           v         |
|  [ Dialogflow NLP Agent ]          [ UB-CF Recommender ]      [ Entity Framework] |
+-----------------------------------------------------------------------------------+

Vấn đề thực tiễn và bài toán kỹ thuật

Nhiều nền tảng bán lẻ thời trang quy mô vừa và nhỏ hiện nay vẫn gặp phải các hạn chế nghiêm trọng:

  • Trải nghiệm duyệt web gián đoạn do cơ chế tải lại toàn trang (full page reload), làm tăng độ trễ và tiêu tốn băng thông.
  • Thiếu hệ thống hỗ trợ khách hàng tự động 24/7, dẫn đến tỷ lệ bỏ rơi giỏ hàng (Cart Abandonment Rate) vượt mức 65%.
  • Khả năng gợi ý sản phẩm nghèo nàn, phần lớn dựa trên sắp xếp ngẫu nhiên hoặc sản phẩm mới nhất, thiếu cơ chế học hỏi sở thích cá nhân hóa của khách hàng.
  • Khâu quản lý tồn kho đa biến thể (kích thước, màu sắc, số lượng) và quy trình xử lý đơn hàng còn rời rạc.

Mục tiêu của đồ án

  1. Xây dựng ứng dụng đơn trang (Single Page Application - SPA) với giao diện mượt mà, phản hồi thời gian thực và tương thích đa thiết bị.
  2. Thiết kế hệ thống Backend theo chuẩn RESTful API với kiến trúc phân tầng rõ ràng, đảm bảo tính mở rộng và an toàn dữ liệu.
  3. Tích hợp mô hình xử lý ngôn ngữ tự nhiên (NLP) thông qua Chatbot Dialogflow để tự động hóa quy trình tư vấn sản phẩm và giải đáp thắc mắc.
  4. Xây dựng hệ thống gợi ý sản phẩm thông minh (Recommender System) ứng dụng thuật toán Lọc cộng tác dựa trên người dùng (User-Based Collaborative Filtering - UB-CF).
  5. Hoàn thiện hệ thống quản trị (Admin Dashboard) phục vụ quản lý sản phẩm, danh mục, phân quyền tài khoản (RBAC), kiểm soát đơn hàng và thống kê doanh thu đa chiều.

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ế trên các nền tảng thương mại điện tử thời trang tại Việt Nam (như Totoshop, Routine, Yame, Kenta) chỉ ra những ưu điểm và hạn chế kỹ thuật rõ rệt:

Nền tảng khảo sát Ưu điểm công nghệ / Trải nghiệm Hạn chế kỹ thuật tồn tại
Totoshop.vn Phân loại sản phẩm đa cấp, xem nhanh giỏ hàng mà không cần chuyển trang. Chưa tích hợp chatbot thông minh, thiếu bộ lọc tìm kiếm nâng cao theo thuộc tính kết hợp.
Routine.vn Giao diện tối giản, hình ảnh chất lượng cao, phân loại màu sắc trực quan. Thời gian tải trang ban đầu còn chậm, bắt buộc đăng ký tài khoản mới cho phép thanh toán.
Yame.vn Tích hợp chatbot cơ bản, hệ thống tích điểm thành viên rõ ràng. Thiếu chức năng đánh giá/review chi tiết, chưa hỗ trợ thanh toán thẻ quốc tế trực tuyến.
Kenta.vn Đăng nhập linh hoạt qua mạng xã hội, tốc độ phản hồi tốt. Không hiển thị giá khuyến mãi trực tiếp trên danh mục, chưa có module gợi ý cá nhân hóa.

Ma trận ưu tiên yêu cầu hệ thống (MoSCoW)

  • Must-have: Xác thực người dùng (Authentication/Authorization), Catalog sản phẩm đa biến thể (Size, Color, Quantity), Giỏ hàng, Checkout/Thanh toán, Quản lý đơn hàng và phân quyền Admin/Member/Guest.
  • Should-have: Chatbot thông minh hỗ trợ tìm kiếm sản phẩm và giải đáp size đồ qua NLP, Module đánh giá và bình luận sản phẩm đa tiêu chí.
  • Could-have: Hệ thống gợi ý sản phẩm dựa trên độ tương đồng người dùng (UB-CF Cosine Similarity), Biểu đồ thống kê doanh thu theo thời gian thực (Chart Visualization).
  • Won't-have: Tính năng phòng thử đồ ảo 3D/AR (được định hướng cho các phiên bản tiếp theo).

Thiết kế hệ thống

Hệ thống được thiết kế theo mô hình Decoupled Architecture, phân tách hoàn toàn giữa tầng trình diễn (Presentation Layer) và tầng xử lý nghiệp vụ (Business Logic Layer):

graph TD
    User([Người dùng / Client Browser]) -->|HTTP Requests / JSON| AngularSPA[Frontend: Angular 8 SPA]
    AngularSPA -->|Dialogflow API / Webhook| ChatbotEngine[Google Dialogflow NLP]
    AngularSPA -->|RESTful Endpoints| WebAPI[Backend: ASP.NET Web API 2]
    
    subgraph Backend Core
        WebAPI -->|Dependency Injection| BusinessLogic[Business & Service Layer]
        BusinessLogic -->|Recommendation Engine| UBCF[UB-CF Algorithm Module]
        BusinessLogic -->|ORM Queries| EF[Entity Framework 6.x]
    end
    
    EF -->|T-SQL / TCP 1433| Database[(Microsoft SQL Server 2016)]

Technology Stack và phiên bản cụ thể

  • Frontend: Angular 8.2.0, TypeScript 3.5.3, RxJS 6.5.2, Bootstrap 4.3.1, HTML5/SCSS.
  • Backend: ASP.NET Web API 2 (.NET Framework 4.7.2), C# 7.3, Newtonsoft.Json 12.0.2.
  • ORM & Database: Entity Framework 6.2.0 (Code-First/Database-First), Microsoft SQL Server 2016 Enterprise.
  • AI & NLP: Google Dialogflow Standard Edition (V2 API).

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

Hệ thống sử dụng mô hình cơ sở dữ liệu quan hệ được chuẩn hóa ở mức 3NF nhằm loại bỏ dư thừa dữ liệu:

  • Accounts (AccountID, Username, PasswordHash, Email, RoleID, CreatedAt)
  • Products (ProductID, ProductName, CategoryID, Price, DiscountPrice, Description, Avatar)
  • Product_Size_Quantity (ID, ProductID, SizeID, QuantityInStock)
  • Orders (OrderID, AccountID, OrderDate, TotalAmount, StatusID, ShippingAddress, PaymentMethod)
  • OrderDetails (OrderDetailID, OrderID, ProductID, SizeID, Quantity, UnitPrice)
  • Ratings (RatingID, AccountID, ProductID, Score, Comment, CreatedAt)
+-------------------+       +-----------------------+       +-------------------+
|      Orders       |       |     OrderDetails      |       |     Products      |
+-------------------+       +-----------------------+       +-------------------+
| PK OrderID        |<-----\| PK OrderDetailID      |/----->| PK ProductID      |
| FK AccountID      |       | FK OrderID            |       |    ProductName    |
|    OrderDate      |       | FK ProductID          |       |    Price          |
|    TotalAmount    |       | FK SizeID             |       |    DiscountPrice  |
|    StatusID       |       |    Quantity           |       |    CategoryID     |
+-------------------+       |    UnitPrice          |       +-------------------+
                            +-----------------------+                 |
                                                                      v
                                                            +-------------------+
                                                            |  Prod_Size_Qty    |
                                                            +-------------------+
                                                            | PK ID             |
                                                            | FK ProductID      |
                                                            | FK SizeID         |
                                                            |    QuantityInStock|
                                                            +-------------------+

Thiết kế RESTful API Endpoints

  • GET /api/products: Truy xuất danh sách sản phẩm có phân trang và lọc thuộc tính.
  • GET /api/products/{id}: Xem chi tiết cấu hình và tồn kho sản phẩm.
  • POST /api/orders/checkout: Tạo đơn hàng và cập nhật giảm trừ tồn kho giao dịch.
  • GET /api/recommendations/user/{userId}: Trả về danh sách gợi ý sản phẩm từ thuật toán UB-CF.
  • POST /api/chatbot/webhook: Endpoint trung gian tiếp nhận intent và trích xuất tham số từ Dialogflow.

Implementation và kết quả

Development Process

Hệ thống được phát triển qua 4 giai đoạn chính:

  1. Giai đoạn 1 (Tuần 1 - 4): Khảo sát thực tế, phân tích biểu đồ Use Case, xây dựng sơ đồ tuần tự (Sequence Diagram) và thiết kế lược đồ quan hệ thực thể (ERD).
  2. Giai đoạn 2 (Tuần 5 - 10): Thiết kế RESTful API bằng ASP.NET Web API, cấu hình DbContext trong Entity Framework, triển khai các Stored Procedure và Transaction an toàn.
  3. Giai đoạn 3 (Tuần 11 - 15): Xây dựng giao diện ứng dụng đơn trang Angular 8, cấu hình Routing, Route Guards, State Management và tích hợp dịch vụ HTTP Client.
  4. Giai đoạn 4 (Tuần 16 - 18): Cài đặt thuật toán User-Based Collaborative Filtering, cấu hình Intent/Entity trên Dialogflow và tiến hành End-to-End Testing.

Chi tiết thuật toán và giải pháp kỹ thuật

1. Thuật toán gợi ý User-Based Collaborative Filtering (UB-CF)

Hệ thống sử dụng độ đo độ tương tự Cosine (Cosine Similarity) để xác định mức độ tương đồng về sở thích giữa người dùng mục tiêu $a$ và các người dùng khác $u \in U$:

$$\text{similarity}(a, u) = \cos(\mathbf{r}a, \mathbf{r}u) = \frac{\mathbf{r}a \cdot \mathbf{r}u}{|\mathbf{r}a|2 |\mathbf{r}u|2} = \frac{\sum{i \in I{au}} r{a,i} \cdot r{u,i}}{\sqrt{\sum{i \in I{au}} (r{a,i})^2} \cdot \sqrt{\sum{i \in I_{au}} (r_{u,i})^2}}$$

Dự đoán mức độ yêu thích $\hat{y}_{i,a}$ của người dùng $a$ đối với sản phẩm chưa mua $i$:

$$\hat{y}{i,a} = \frac{\sum{u \in K} \text{similarity}(a, u) \cdot y(i, u)}{\sum_{u \in K} |\text{similarity}(a, u)|}$$

Cài đặt hàm tính Cosine Similarity trên C# Backend:

public class RecommendationService
{
    public double CalculateCosineSimilarity(Dictionary<int, double> vectorA, Dictionary<int, double> vectorB)
    {
        var commonKeys = vectorA.Keys.Intersect(vectorB.Keys);
        if (!commonKeys.Any()) return 0.0;

        double dotProduct = commonKeys.Sum(k => vectorA[k] * vectorB[k]);
        double magnitudeA = Math.Sqrt(vectorA.Values.Sum(v => v * v));
        double magnitudeB = Math.Sqrt(vectorB.Values.Sum(v => v * v));

        if (magnitudeA == 0.0 || magnitudeB == 0.0) return 0.0;
        return dotProduct / (magnitudeA * magnitudeB);
    }
}

[ Ma trận User-Item Ratings ] 
             |
             v
[ Tính Vector Cosine Similarity ] ---> [ Tìm K-Nearest Neighbors ]
                                                    |
                                                    v
[ Danh sách Top-N gợi ý cho Client ] <--- [ Dự đoán Rating cho Item chưa mua ]

2. Tích hợp Dialogflow Chatbot Agent

  • Entities: Xác định các tập từ khóa tùy biến như @clothing_type (áo thun, quần jeans, sơ mi), @size_attribute (S, M, L, XL, XXL), @price_range.
  • Intents: Xây dựng kịch bản xử lý thông minh gồm FindProductIntent, CheckOrderTrackingIntent, SizeConsultationIntent.
  • Giao tiếp Webhook: Kết nối Client Angular trực tiếp với Dialogflow Gateway qua Access Token bảo mật.
// Angular Chatbot Service Snippet
@Injectable({ providedIn: 'root' })
export class ChatbotService {
  private readonly baseUrl = 'https://api.dialogflow.com/v1/query?v=20150910';
  private readonly accessToken = 'YOUR_DIALOGFLOW_CLIENT_ACCESS_TOKEN';

  constructor(private http: HttpClient) {}

  public sendMessage(statement: string): Observable<any> {
    const headers = new HttpHeaders({
      'Authorization': `Bearer ${this.accessToken}`,
      'Content-Type': 'application/json; charset=utf-8'
    });
    const body = { query: statement, lang: 'vi', sessionId: 'agy-session-01' };
    return this.http.post(this.baseUrl, body, { headers });
  }
}

Kiểm thử và kết quả đánh giá (Testing & Validation)

Hệ thống trải qua các bài kiểm thử nghiêm ngặt bao gồm Unit Testing, Integration Testing và Load Testing:

Chỉ số đánh giá Kết quả thực nghiệm Đánh giá kỹ thuật
API Response Time Trung bình 45ms – 110ms Đạt chuẩn phản hồi cao của RESTful Service
Tốc độ tải trang SPA < 1.2s cho trang chủ, < 0.4s khi chuyển view Tối ưu hóa nhờ cơ chế Client-side Routing
Độ chính xác NLP Chatbot 91.5% phản hồi đúng Intent Huấn luyện trên bộ dữ liệu hơn 120 biểu thức thực tế
Thời gian tính toán UB-CF 68ms cho ma trận 500 users $\times$ 120 items Độ phức tạp thuật toán $\mathcal{O}(|U| \cdot |I|)$ trong ngưỡng tối ưu
Tỷ lệ Test Case Pass 98.2% (110/112 kịch bản hoàn thành xuất sắc) Không phát hiện lỗi nghiêm trọng (Critical Bug)

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

  1. Kiến trúc Decoupled hiện đại: Xóa bỏ sự phụ thuộc chặt chẽ giữa giao diện và logic dữ liệu của các hệ thống MVC Monolith truyền thống, mở ra khả năng mở rộng sang Mobile App (iOS/Android) mà không cần viết lại Backend.
  2. Cá nhân hóa trải nghiệm khách hàng với Machine Learning: Việc áp dụng thuật toán UB-CF giúp nâng cao tỷ lệ nhấp chuột (CTR) lên 28% so với phương pháp hiển thị tĩnh thông thường.
  3. Tự động hóa chăm sóc khách hàng với NLP: Giảm tải hơn 60% các câu hỏi thường gặp (kích cỡ, bảng giá, thời gian giao hàng) thông qua Chatbot Dialogflow, tăng cường thời gian giữ chân người dùng trên website.
  4. Quản lý dữ liệu phân tầng chặt chẽ: Ứng dụng mô hình ORM Entity Framework kết hợp Stored Procedures trên SQL Server giúp giảm thiểu tối đa nguy cơ lỗi SQL Injection và bảo toàn tính toàn vẹn dữ liệu giao dịch.

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

Khả năng ứng dụng thực tiễn

Hệ thống hoàn toàn đáp ứng nhu cầu kinh doanh thực tế của các cửa hàng thời trang vừa và nhỏ (SMEs), chuỗi cửa hàng bán lẻ có từ 1 đến 5 chi nhánh, hoặc các thương hiệu nội địa (Local Brands) muốn tự chủ kênh phân phối trực tuyến mà không phụ thuộc vào phí hoa hồng từ sàn TMĐT.

+-------------------------------------------------------------------------+
|                       PRODUCTION DEPLOYMENT TOPOLOGY                    |
+-------------------------------------------------------------------------+
| [ Users ] ---> [ Cloudflare CDN / SSL ]                                 |
|                      |                                                  |
|                      +---> [ Nginx / Static Host ] --> Angular SPA      |
|                      |                                                  |
|                      +---> [ IIS 10.0 Web Server ] --> ASP.NET Web API  |
|                                     |                                   |
|                                     v                                   |
|                         [ MS SQL Server Cluster ]                       |
+-------------------------------------------------------------------------+

Chiến lược triển khai và vận hành

  • Frontend Hosting: Triển khai trên Nginx Server hoặc Static Web Apps, tối ưu hóa caching với CDN (Cloudflare).
  • Backend Hosting: Cấu hình trên nền tảng IIS 10.0 (Windows Server) hoặc Azure App Service với chế độ Auto-Scaling khi lượng truy cập tăng đột biến.
  • Database Engine: Microsoft SQL Server 2016 được phân bổ RAM tối thiểu 4GB, thiết lập cơ chế tự động sao lưu dữ liệu (Automated Daily Backup).

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

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

  • Vấn đề Cold Start: Thuật toán UB-CF gặp khó khăn khi đưa ra gợi ý chính xác cho người dùng hoàn toàn mới chưa có lịch sử đánh giá hoặc sản phẩm mới đưa lên hệ thống.
  • Cổng thanh toán: Mới chỉ tích hợp mô hình thanh toán mô phỏng và COD, chưa kết nối trực tiếp với các Payment Gateway nội địa phổ biến như VNPay, MoMo hay ZaloPay.
  • Hạ tầng Dialogflow: Bản Standard Edition phụ thuộc vào kết nối API bên thứ ba, có giới hạn request rate nếu lưu lượng truy cập đạt ngưỡng hàng triệu lượt mỗi ngày.

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

  • Nâng cấp thuật toán gợi ý thành Hybrid Recommender System (kết hợp Collaborative Filtering và Content-Based Filtering dựa trên ma trận thuộc tính sản phẩm và Matrix Factorization/SVD).
  • Chuyển dịch toàn bộ Backend sang .NET 8 Core / Microservices Architecture và đóng gói bằng Docker Containers, quản lý tập trung qua Kubernetes.
  • Tích hợp cổng thanh toán trực tuyến qua chuẩn bảo mật PCI-DSS, hỗ trợ Webhook thông báo trạng thái giao dịch ngân hàng theo thời gian thực.

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

  • Sinh viên & Học viên CNTT: Là tài liệu tham khảo thực tế về cách thức tích hợp Machine Learning và NLP vào ứng dụng web thương mại điện tử thực tế.
  • Lập trình viên (Developers): Cung cấp mẫu thiết kế chuẩn về kiến trúc Angular 8 kết hợp ASP.NET Web API, phương pháp xử lý bất đồng bộ và tối ưu hóa truy vấn Entity Framework.
  • Doanh nghiệp bán lẻ (Enterprises): Nền tảng có sẵn để tùy biến thành hệ thống bán hàng chuyên nghiệp với chi phí đầu tư ban đầu thấp, thời gian hoàn vốn (ROI) ước tính chỉ từ 4 đến 6 tháng.
  • Nhà nghiên cứu (Researchers): Cung cấp dữ liệu thực nghiệm về hiệu năng của thuật toán UB-CF Cosine Similarity trong môi trường ứng dụng thực tế.

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

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

  • Server: CPU 2 Cores, 4GB RAM (cho IIS và Web API), 4GB RAM riêng cho SQL Server 2016, 50GB SSD lưu trữ.
  • Client: Bất kỳ trình duyệt web hiện đại nào có hỗ trợ ES6+ (Google Chrome, Firefox, Safari, Microsoft Edge).

2. Giới hạn mở rộng (Scalability Limits) của thuật toán UB-CF và cách khắc phục?

Khi số lượng người dùng vượt quá 100.000, việc tính toán ma trận tương đồng theo thời gian thực sẽ gây nghẽn tài nguyên. Giải pháp là chuyển việc tính toán sang tiến trình chạy ngầm định kỳ (Background Worker / Cron Job) và lưu kết quả vào Redis Cache để truy xuất với độ phức tạp $\mathcal{O}(1)$.

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

Hoàn toàn có thể. Nhờ thiết kế theo chuẩn RESTful API với dữ liệu trao đổi dạng JSON, bất kỳ hệ thống POS nào (như KiotViet, Sapo) đều có thể đồng bộ đơn hàng và tồn kho qua các HTTP Endpoints bảo mật.

4. Chi phí duy trì hệ thống ước tính hàng tháng là bao nhiêu?

Nếu triển khai trên hạ tầng VPS (Cloud Server) nội địa, chi phí duy trì bao gồm VPS Backend & Database (~400.000 - 800.000 VNĐ/tháng), Domain & SSL (~30.000 VNĐ/tháng), gói Dialogflow Standard hoàn toàn miễn phí trong hạn mức thông thường.

5. Hệ thống xử lý thế nào đối với các đợt Flash Sale có lượng truy cập đột biến?

Backend ASP.NET Web API hỗ trợ xử lý luồng bất đồng bộ (async/await), kết hợp cơ chế Indexing chuyên sâu trên SQL Server giúp duy trì khả năng phục vụ hơn 1.000 concurrent requests cùng lúc mà không xảy ra tình trạng crash ứng dụng.

Kết luận

Đề tài tốt nghiệp "Xây dựng website bán quần áo" của nhóm sinh viên Dương Văn Cường và Phạm Thị Hà tại Trường Đại học Sư phạm Kỹ thuật TP.HCM đã giải quyết trọn vẹn yêu cầu từ lý thuyết phân tích thiết kế đến triển khai thực tế một hệ thống thương mại điện tử hiện đại. Điểm sáng nổi bật của công trình là sự kết hợp ăn ý giữa nền tảng ứng dụng đơn trang Angular 8, dịch vụ Backend ASP.NET Web API hiệu năng cao, cùng các mô hình trí tuệ nhân tạo thiết thực như Chatbot Dialogflow và Hệ thống gợi ý UB-CF. Đồ án không chỉ khẳng định năng lực ứng dụng công nghệ chuyên sâu của nhóm tác giả mà còn đóng vai trò là một tài liệu tham khảo có giá trị cao cho cộng đồng nghiên cứu và phát triển phần mềm ứng dụng.