Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh kinh tế phát triển và mức sống người dân ngày càng nâng cao, mua sắm trở thành nhu cầu thiết yếu thường nhật. Tuy nhiên, phương thức mua sắm truyền thống tại các cửa hàng vật lý bộc lộ nhiều trở ngại như tốn thời gian di chuyển, hạn chế về khoảng cách địa lý và khó khăn trong việc so sánh giá cả, đặc tính của các sản phẩm cùng loại. Sự phát triển của Internet và thương mại điện tử đã thúc đẩy mô hình bán hàng trực tuyến trở thành giải pháp thay thế hiệu quả, cho phép người tiêu dùng tra cứu thông tin chi tiết, lựa chọn quy cách sản phẩm và thực hiện giao dịch thông qua máy tính hoặc điện thoại thông minh. Đối với đơn vị kinh doanh, hệ thống bán hàng trực tuyến giúp tối ưu hóa chi phí mặt bằng, nhân sự và nâng cao hiệu quả quản trị vận hành.

Đồ á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 của nhóm tác giả Phạm Thanh Duy và Nguyễn Đình Hùng (dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo, thực hiện từ ngày 04/03/2019 đến ngày 14/07/2019) tập trung giải quyết bài toán xây dựng hoàn chỉnh một hệ thống website thương mại điện tử ứng dụng kiến trúc tách biệt Client - Server hiện đại.

Các mục tiêu và nhiệm vụ nghiên cứu được xác định cụ thể trong đề cương bao gồm:

  1. Tổng hợp cơ sở lý thuyết về khung làm việc Angular 7 và ASP.NET Core, ứng dụng hai nền tảng này vào bài toán thực tế.
  2. Khảo sát, phân tích hiện trạng và đánh giá các website thương mại điện tử đang hoạt động trên thị trường (Lazada, Shopee, Thế giới di động).
  3. Xác định các yêu cầu chức năng, phi chức năng và thiết kế hệ thống theo các ca sử dụng (Use Case).
  4. Thiết kế cơ sở dữ liệu quan hệ trên hệ quản trị SQL Server và xây dựng giao diện ứng dụng.
  5. Triển khai lập trình hoàn thiện hệ thống, thực hiện kiểm thử và đề xuất các ý tưởng tối ưu hóa.
  6. Lập báo cáo khoa học phục vụ công tác đánh giá tốt nghiệp kỹ sư.

Đối tượng nghiên cứu của đề tài gồm framework Angular 7, nền tảng ASP.NET Core, cơ chế vận hành của website thương mại điện tử và nhu cầu giao dịch thực tế của người dùng. Phạm vi nghiên cứu tập trung vào việc thiết kế và hiện thực hóa một hệ thống bán hàng trực tuyến hoàn chỉnh với đầy đủ các phân hệ chức năng cho khách hàng và ban quản trị, tạo nền tảng cho việc mở rộng quy mô trong tương lai.

Cơ sở lý thuyết và phương pháp

Đề tài sử dụng kết hợp các phương pháp nghiên cứu học thuật và kỹ thuật phát triển phần mềm:

  • Phương pháp nghiên cứu tài liệu: Tổng hợp tài liệu chính thống từ trang chủ Angular, tài liệu ASP.NET Core của Microsoft và các nguồn tham khảo chuyên môn để nắm bắt cơ chế Dependency Injection, Routing, Interceptors, HTTP Pipeline và Middleware.
  • Phương pháp khảo sát hiện trạng: Phân tích giao diện, trải nghiệm người dùng và luồng xử lý của 3 nền tảng thương mại điện tử tiêu biểu:
Nền tảng Ưu điểm ghi nhận Hạn chế ghi nhận
Lazada Đăng nhập qua mạng xã hội; menu phân cấp; kiểm tra đơn bằng email và mã; lọc đa tiêu chí; lưu lịch sử bằng cookie; chat trực tiếp. Danh sách tìm kiếm phổ biến thay đổi ngẫu nhiên; tìm kiếm chưa phân tách theo ngành hàng chuyên biệt; chưa hỗ trợ xem lại sản phẩm đã xem.
Shopee Xác thực qua SMS; gợi ý sản phẩm cùng loại; lọc đánh giá theo số sao trực quan; cho phép đánh giá bằng hình ảnh; tìm kiếm bằng hashtag; cuộn trang tải dữ liệu tự động. Không tra cứu nhanh đơn hàng ngoài tài khoản; không có tính năng bình luận/hỏi đáp tự do ngoài đánh giá.
Thế giới di động Cho phép mua và bình luận không cần tài khoản; xem ảnh 360 độ; hiển thị thanh điều hướng theo ngữ cảnh; lọc sản phẩm theo trả góp 0%. Không lưu thông tin cho lần mua sau; mật độ thông tin dày và hiển thị nhiều quảng cáo.
  • Phương pháp chuyên gia: Tiếp nhận tư vấn, đánh giá và điều chỉnh định kỳ từ giảng viên hướng dẫn và các giảng viên bộ môn Công nghệ phần mềm.
  • Phương pháp phân tích - thiết kế hệ thống: Sử dụng ngôn ngữ mô hình hóa UML để xây dựng biểu đồ Use Case, biểu đồ tuần tự (Sequence Diagram) và biểu đồ hoạt động (Activity Diagram).

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình tách biệt hoàn toàn giữa giao diện người dùng (Frontend) và dịch vụ xử lý dữ liệu (Backend Web API):

[Client: Angular 7 / Single Page App] <--- (JSON / HTTPS / JWT) ---> [Server: ASP.NET Core Web API] <---> [Database: SQL Server]
  • Frontend (Angular 7 & TypeScript): Ứng dụng mô hình Single Page Application (SPA). Mã nguồn được cấu trúc hóa theo các NgModule độc lập, áp dụng kỹ thuật Lazy Loading để tối ưu hóa thời gian tải trang. Giao diện được xây dựng linh hoạt nhờ Angular Material, CDK, hệ thống Animation và cơ chế ngTemplateOutlet để hiển thị cây danh mục sản phẩm đa cấp. Cơ chế Angular Guards và Interceptors được áp dụng để kiểm soát quyền điều hướng và đính kèm token xác thực trong các yêu cầu HTTP. Môi trường phát triển yêu cầu Node.js phiên bản 8.x trở lên và công cụ Angular CLI (@angular/cli).
  • Backend (ASP.NET Core Web API): Xây dựng trên nền tảng .NET Core mã nguồn mở, đa nền tảng. Hệ thống sử dụng mô hình MVC để tiếp nhận và phản hồi các yêu cầu qua các phương thức HTTP (GET, POST, PUT, DELETE). Cấu trúc API được tùy biến chuẩn hóa định dạng dữ liệu phản hồi (Custom Response) và tích hợp các thư viện xác thực người dùng qua mạng xã hội (Facebook, Google).
  • Cơ chế xác thực và bảo mật: Ứng dụng chuẩn JSON Web Token (JWT) để mã hóa thông tin người dùng và phân quyền truy cập. Token được kiểm tra nghiêm ngặt tại Backend trước mọi thao tác nghiệp vụ đồng thời được kiểm soát tại Frontend thông qua Route Guards.
  • Cơ sở dữ liệu (SQL Server): Dữ liệu được tổ chức dưới dạng các bảng quan hệ bao gồm người dùng, phân quyền, danh mục, sản phẩm, thuộc tính, đơn hàng bán, chi tiết đơn hàng, hóa đơn nhập hàng, chi tiết nhập, đánh giá, bình luận, trình chiếu quảng cáo và dữ liệu hành chính tỉnh thành Việt Nam. Quy trình phân trang dữ liệu (Pagination) được thực hiện hoàn toàn tại máy chủ trước khi trả kết quả về phía Client.
  • Kiểm thử phần mềm: Quy trình kiểm tra chất lượng được phân tách thành hai nhóm kịch bản chính:
    • Kiểm thử phân hệ người dùng: Xác thực đăng ký/đăng nhập, cập nhật hồ sơ cá nhân, tìm kiếm/lọc sản phẩm, thêm/sửa/xóa giỏ hàng, tạo đơn đặt hàng và gửi đánh giá/bình luận.
    • Kiểm thử phân hệ quản trị (Admin): Đăng nhập quản trị, quản lý danh mục sản phẩm, quản lý nhập hàng, duyệt/hủy đơn hàng bán, quản lý tài khoản/phân quyền và kết xuất thống kê doanh thu.

Nội dung chính theo từng chương

Phần Mở đầu

Trình bày tính cấp thiết của đề tài, các mục tiêu nghiên cứu, phương pháp tiếp cận, đối tượng và phạm vi nghiên cứu. Phần mở đầu cũng tổng hợp chi tiết kết quả khảo sát thực tế các website thương mại điện tử lớn (Lazada, Shopee, Thế giới di động), rút ra các ưu điểm cần kế thừa và nhược điểm cần khắc phục, đồng thời vạch ra tiến độ thực hiện đồ án qua 19 tuần làm việc (từ 04/03/2019 đến 14/07/2019).

Chương 1: Tìm hiểu về Angular + ASP.NET Core

Hệ thống hóa toàn bộ lý thuyết về hai công nghệ cốt lõi:

  • Angular: Lịch sử tiến hóa từ AngularJS đến Angular 7 (bản phát hành ngày 18/10/2018 với các cải tiến về hiệu năng, Angular Material, Virtual Scrolling, CLI Workspaces và công cụ dựng Ivy). Phân tích kiến trúc gồm NgModules, Components, Templates, Directives, Data Binding, Services, Dependency Injection và Router.
  • ASP.NET Core: Phân tích các đặc tính nổi bật như mã nguồn mở, hỗ trợ đa nền tảng (Windows, macOS, Linux), mô-đun hóa qua NuGet, tối ưu hóa cho môi trường đám mây và web server Kestrel/IIS. So sánh chi tiết sự khác biệt giữa .NET Core và .NET Framework truyền thống, làm rõ các trường hợp nên lựa chọn .NET Core (kiến trúc microservices, container Docker, yêu cầu hiệu năng cao theo TechEmpower benchmark, chạy song song nhiều phiên bản). Mô hình kiến trúc MVC (Model - View - Controller) cũng được phân tích cụ thể.

Chương 2: Xác định yêu cầu

Đặc tả chi tiết các yêu cầu của hệ thống phần mềm:

  • Yêu cầu chức năng nghiệp vụ: Tra cứu (sản phẩm, hóa đơn, khách hàng); thống kê (lợi nhuận, số lượng sản phẩm bán ra, số hóa đơn); tương tác (đánh giá, bình luận sản phẩm); quản lý cá nhân (thông tin, địa chỉ giao hàng, đổi mật khẩu); quản lý giỏ hàng; quản lý đơn hàng phía người mua và duyệt đơn hàng phía quản trị; quản lý thông tin và trạng thái sản phẩm.
  • Yêu cầu chức năng hệ thống: Hệ thống phân quyền chặt chẽ theo 3 cấp độ (Chủ cửa hàng/Admin, Nhân viên, Khách hàng); cơ chế thông báo phản hồi thao tác; lưu trữ dữ liệu tập trung; thuật toán tìm kiếm theo mã/tên; thuật toán gợi ý sản phẩm ngẫu nhiên thay đổi theo ngày; bảo mật với JWT; tối ưu hóa phân trang trên server; liên kết đăng nhập với Facebook và Google.
  • Yêu cầu phi chức năng: Đảm bảo tính tiến hóa dễ mở rộng, tính tiện dụng với giao diện thân thiện, tính tương thích đa thiết bị và tính tái sử dụng cao của các khối mã nguồn.

Chương 3: Phân tích yêu cầu

Hiện thực hóa việc mô hình hóa các yêu cầu hệ thống thông qua hệ thống biểu đồ UML chuẩn:

  • Lược đồ Use Case: Bao gồm 10 gói lược đồ chính: Use Case tổng quát, Quản lý thông tin cá nhân, Quản lý đơn hàng bán, Quản lý giỏ hàng, Quản lý nhập hàng, Quản lý phân quyền, Quản lý sản phẩm, Thống kê, Tra cứu sản phẩm và Quản lý trình chiếu.
  • Mô hình hóa nghiệp vụ: Xây dựng chi tiết biểu đồ hoạt động và biểu đồ tuần tự cho 16 nghiệp vụ trọng yếu: Đăng ký tài khoản, Đăng nhập, Chỉnh sửa thông tin cá nhân, Tra cứu sản phẩm, Xem danh mục sản phẩm, Xem thông tin sản phẩm, Quản lý giỏ hàng, Đặt hàng, Đánh giá sản phẩm, Bình luận, Quản lý nhập hàng, Quản lý sản phẩm, Duyệt đơn hàng, Thống kê doanh số, Trình chiếu quảng cáo và Phân quyền người dùng.

Chương 4: Thiết kế cơ sở dữ liệu

Thiết kế cấu trúc dữ liệu quan hệ hoàn chỉnh trên Microsoft SQL Server. Chương này bao gồm lược đồ tổng quát mô tả mối quan hệ giữa các thực thể và bảng đặc tả chi tiết thuộc tính, kiểu dữ liệu, khóa chính, khóa ngoại của từng bảng trong cơ sở dữ liệu để đáp ứng lưu trữ toàn diện thông tin sản phẩm, giao dịch và quản trị.

Chương 5: Thiết kế giao diện và xử lý

Hiện thực hóa giao diện người dùng và mô tả thuật toán xử lý tương ứng cho từng màn hình:

  • Sơ đồ lớp của ứng dụng: Định nghĩa cấu trúc các lớp đối tượng và quan hệ giữa chúng.
  • Các màn hình chức năng: Màn hình trang chủ (kèm slider trình chiếu và danh mục), Màn hình đăng nhập/đăng ký, Màn hình chi tiết sản phẩm, Màn hình giỏ hàng, Màn hình người dùng (quản lý thông tin cá nhân, danh sách đơn hàng đã đặt), và Hệ thống màn hình quản trị Admin (quản lý sản phẩm, đơn hàng, nhập kho, phân quyền, thống kê). Mỗi màn hình đều đi kèm bảng mô tả chi tiết luồng xử lý sự kiện và tích hợp API.

Chương 6: Kiểm thử phần mềm

Thiết lập kế hoạch kiểm thử hệ thống và đặc tả chi tiết các bộ kịch bản kiểm thử (Test Case):

  • Bảng Test Case kiểm thử chức năng dành cho phân hệ người dùng.
  • Bảng Test Case kiểm thử chức năng dành cho phân hệ quản trị viên Admin. Mỗi trường hợp kiểm thử đều xác định rõ điều kiện đầu vào (Input), hành động thực hiện (Action) và kết quả kỳ vọng (Expected Output) nhằm phát hiện và khắc phục các lỗi phát sinh.

Phần Kết luận

Đánh giá tổng kết các mục tiêu đã hoàn thành, chỉ ra các ưu điểm và hạn chế trong quá trình thực hiện đồ án, đồng thời đề ra định hướng phát triển phần mềm trong tương lai.

Kết quả và đóng góp

Đồ án đã đạt được các kết quả kỹ thuật cụ thể theo đúng kế hoạch đề ra:

  • Xây dựng hoàn chỉnh website bán hàng trực tuyến hoạt động mượt mà, giao diện tương thích responsive trên nhiều loại màn hình, kết nối đồng bộ giữa giao diện Angular 7 và hệ thống máy chủ ASP.NET Core Web API.
  • Hiện thực hóa đầy đủ 10 phân hệ Use Case với 16 luồng nghiệp vụ kinh doanh cốt lõi (từ quản lý danh mục, nhập kho, bán hàng, xử lý đơn hàng đến thống kê và tương tác khách hàng).
  • Áp dụng thành công các kỹ thuật chuyên sâu trong lập trình web: xác thực JWT, phân quyền đa cấp, điều hướng Lazy Loading, Angular Route Guards, HTTP Interceptors, xử lý cây danh mục đa cấp bằng ngTemplateOutlet, tích hợp thư viện chọn ngày tháng, phân trang dữ liệu từ máy chủ và thuật toán gợi ý sản phẩm thay đổi theo ngày.
  • Ghi nhận bài học kinh nghiệm kỹ thuật từ quá trình thực nghiệm: tác giả đã tiến hành nghiên cứu mô hình lưu trữ thuộc tính sản phẩm mở rộng theo cấu trúc EAV (Entity - Attribute - Value) của Magento trong tuần thứ 10, tuy nhiên do độ phức tạp cao nên đã điều chỉnh lại cấu trúc cơ sở dữ liệu phù hợp với quy mô hệ thống hiện tại.

Hạn chế và hướng nghiên cứu tiếp

  • Hạn chế: Cấu trúc cơ sở dữ liệu lưu trữ sản phẩm đa thuộc tính động theo chuẩn Magento chưa thể hiện thực hóa thành công; hệ thống chưa tích hợp trực tiếp các cổng thanh toán điện tử trực tuyến bên thứ ba (như thẻ ngân hàng hay ví điện tử); phạm vi kiểm thử chủ yếu tập trung vào kiểm thử chức năng thủ công theo kịch bản.
  • Hướng phát triển: Tối ưu hóa cấu trúc cơ sở dữ liệu để hỗ trợ các sản phẩm có biến thể phức tạp; tích hợp các cổng thanh toán trực tuyến tự động; nâng cấp thuật toán gợi ý sản phẩm thông minh hơn dựa trên hành vi người dùng; mở rộng quy mô hệ thống và đưa vào thử nghiệm kinh doanh thực tế.

Giá trị tham khảo

Tài liệu khóa luận có giá trị tham khảo hữu ích đối với:

  • Sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm đang thực hiện đồ án môn học hoặc khóa luận tốt nghiệp về xây dựng ứng dụng web hướng dịch vụ.
  • Lập trình viên đang tìm kiếm tài liệu tham khảo thực tế về mô hình kết hợp giữa Angular (SPA) và ASP.NET Core Web API.
  • Các nội dung có giá trị tham khảo cao gồm:
    1. Bảng khảo sát, phân tích ưu nhược điểm của các website thương mại điện tử thực tế.
    2. Hệ thống 10 lược đồ Use Case và 16 bộ biểu đồ phân tích tuần tự/hoạt động chuẩn UML.
    3. Quy trình tổ chức mã nguồn Angular theo module, tích hợp Route Guards, Interceptors và phân trang dữ liệu trên server.

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

1. Khóa luận sử dụng các công nghệ và phiên bản cụ thể nào để xây dựng hệ thống?
Khóa luận sử dụng khung làm việc Angular phiên bản 7 (nền tảng Node.js 8.x+, TypeScript) cho phần giao diện Client; nền tảng ASP.NET Core (mô hình MVC / Web API) cho máy chủ Backend; hệ quản trị cơ sở dữ liệu Microsoft SQL Server; môi trường phát triển gồm Visual Studio 2017/2019 và Visual Studio Code.

2. Cơ chế bảo mật và phân quyền của website được tổ chức như thế nào?
Hệ thống sử dụng cơ chế xác thực dựa trên JSON Web Token (JWT). Quyền hạn được chia làm 3 nhóm: Chủ cửa hàng (Admin - toàn quyền quản trị và quản lý nhân viên), Nhân viên (thực hiện nhập hàng, bán hàng) và Khách hàng (xem, tra cứu, mua hàng). Việc kiểm tra quyền được thực thi đồng thời ở tầng Client (thông qua Angular Route Guards) và bắt buộc tại tầng máy chủ trước mỗi thao tác với cơ sở dữ liệu.

3. Nhóm tác giả đã khảo sát những website bán hàng nào và rút ra điểm gì?
Nhóm đã khảo sát 3 nền tảng: Lazada, Shopee và Thế giới di động. Khảo sát giúp nhóm chắt lọc các tính năng cần có như menu danh mục đa cấp, đăng nhập mạng xã hội, lọc sản phẩm đa tiêu chí, tải dữ liệu phân trang, xem chi tiết giỏ hàng và quy trình quản lý đơn hàng.

4. Trong quá trình thực hiện đồ án, nhóm tác giả đã gặp phải khó khăn kỹ thuật nào được ghi nhận?
Theo tiến độ thực hiện tuần 10, nhóm đã nghiên cứu thử nghiệm tái cấu trúc cơ sở dữ liệu lưu trữ sản phẩm đa thuộc tính theo mô hình Magento nhưng không thành công, sau đó nhóm đã tái cấu trúc thư mục Angular, phân tách nhiều module, áp dụng Lazy Loading và định tuyến phù hợp để hoàn thiện chức năng sản phẩm.

5. Ứng dụng giải quyết bài toán hiển thị danh mục sản phẩm lồng nhau và tối ưu dữ liệu bằng cách nào?
Hệ thống giải quyết việc hiển thị cấu trúc cây danh mục sản phẩm đa cấp thông qua chỉ thị ngTemplateOutlet của Angular và thực hiện phân trang dữ liệu trực tiếp trên máy chủ trước khi gửi về cho Client, đảm bảo không truyền thừa dữ liệu qua mạng.

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 đã hoàn thành đầy đủ các mục tiêu thiết kế và xây dựng một hệ thống thương mại điện tử hoàn chỉnh. Đề tài thể hiện tính ứng dụng cao thông qua việc tích hợp các công nghệ web hiện đại, quy trình phân tích thiết kế hệ thống bài bản và phân định rõ ràng các luồng nghiệp vụ thực tế. Đây là tài liệu kỹ thuật có giá trị tham khảo tốt cho sinh viên và lập trình viên trong việc nghiên cứu, triển khai các ứng dụng web theo kiến trúc phân tách Frontend SPA và Backend Web API.