Xây dựng Web quản lý cửa hàng thời trang sử dụng ASP.NET Core và Angular

Khóa luận xây dựng web quản lý cửa hàng thời trang dùng ASP.NET Core và Angular tại ĐH SPKT TP.HCM

• Tác giả: Bùi Ngọc Lâm
• Người hướng dẫn: ThS. Nguyễn Minh Đạo
• Trường học: Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Thông tin
• Đề tài: Xây dựng Web quản lý cửa hàng thời trang sử dụng ASP.NET Core và Angular
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2022
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Tổng quan web quản lý cửa hàng thời trang bằng ASP

Ngành bán lẻ thời trang đòi hỏi tốc độ xử lý đơn hàng và tính chính xác cao. Đề tài 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 tập trung nghiên cứu giải pháp chuyển đổi số bán lẻ. Mô hình xây dựng web quản lý cửa hàng thời trang bằng ASP.NET Core kết hợp giao diện Angular giải quyết bài toán vận hành hiệu quả. Kiến trúc phân tách rõ ràng giữa backend và frontend giúp hệ thống mở rộng linh hoạt. Công nghệ ASP.NET Core cung cấp nền tảng xử lý dữ liệu mạnh mẽ và an toàn. Nền tảng hỗ trợ xây dựng RESTful Web API với hiệu năng cao. Hệ thống đáp ứng nhu cầu đồng bộ dữ liệu sản phẩm, hóa đơn và khách hàng theo thời gian thực. Giao diện Angular mang lại tương tác mượt mà cho người mua sắm. Khách hàng dễ dàng tìm kiếm kiểu dáng, kích thước và màu sắc quần áo. Hệ thống cũng cung cấp bảng điều khiển trực quan cho quản trị viên. Nghiên cứu mang tính ứng dụng thực tiễn cao cho các doanh nghiệp bán lẻ vừa và nhỏ.

1.1. Bối cảnh nghiên cứu đề tài tại ĐH SPKT TP.HCM

Thương mại điện tử phát triển mạnh tạo sức ép chuyển đổi số lớn. Sinh viên ngành Công nghệ Thông tin tại ĐH SPKT TP.HCM đã tiến hành khảo sát hoạt động bán lẻ thực tế. Nhiều cửa hàng thời trang vừa và nhỏ gặp khó khăn trong việc quản trị dữ liệu thủ công. Phương pháp ghi chép sổ sách hoặc dùng file Excel rời rạc gây thất thoát thông tin. Tình trạng sai lệch tồn kho thường xuyên diễn ra. Quá trình xử lý đơn đặt hàng tốn nhiều thời gian và nhân lực. Đề tài khóa luận ra đời nhằm giải quyết triệt để những bất cập này. Mục tiêu chính là tạo ra một trang web quản lý bán hàng chuyên nghiệp, hiện đại và bảo mật.

1.2. Mục tiêu phát triển hệ sinh thái quản lý thời trang

Đề tài hướng tới việc xây dựng phần mềm toàn diện với hai phân hệ tách biệt. Phân hệ khách hàng hỗ trợ tìm kiếm sản phẩm, quản lý giỏ hàng và theo dõi trạng thái giao vận. Phân hệ quản trị cung cấp công cụ kiểm soát danh mục sản phẩm, biến thể màu sắc, kích thước và phân quyền nhân viên. Hệ thống chuẩn hóa quy trình nhập xuất hàng tồn kho tự động. Cơ chế bảo mật dữ liệu khách hàng được đặt lên hàng đầu. Dự án áp dụng quy trình kiểm thử phần mềm chặt chẽ để hạn chế lỗi vận hành. Kết quả nghiên cứu tạo nền móng vững chắc cho việc triển khai vào môi trường kinh doanh thực tế.

II. Phân tích thực trạng quản lý cửa hàng thời trang tại ĐH SPKT

Thực trạng kinh doanh thời trang truyền thống tồn tại nhiều lỗ hổng quản lý nghiêm trọng. Việc quản lý thủ công qua sổ sách thường xuyên dẫn đến thất thoát hàng hóa và sai lệch số liệu. Khách hàng gặp khó khăn khi kiểm tra lượng hàng còn hay hết trước khi đặt mua. Đội ngũ nhân viên bán hàng mất nhiều thời gian để tra cứu kho và xác nhận hóa đơn. Tình trạng quá tải đơn hàng trong các dịp giảm giá lớn gây ra tình trạng chậm trễ giao vận. Thiếu hụt công cụ báo cáo doanh thu theo thời gian thực khiến chủ shop không thể ra quyết định kinh doanh kịp thời. Mặt khác, các phần mềm quản lý đóng gói sẵn trên thị trường thường có chi phí bản quyền đắt đỏ. Nhiều hệ thống có giao diện phức tạp và thiếu khả năng tùy biến theo đặc thù ngành thời trang. Sản phẩm may mặc có các thuộc tính phân tầng đặc thù như kích cỡ, màu sắc và chất liệu vải. Những phần mềm phổ thông không đáp ứng tốt việc gom nhóm và lọc thuộc tính sản phẩm chi tiết. Do đó, việc nghiên cứu xây dựng giải pháp riêng biệt trở nên cấp thiết. Hệ thống mới cần đảm bảo tối ưu chi phí triển khai, đồng thời giải quyết triệt để nhu cầu quản trị đa kênh.

2.1. Thách thức trong quản lý kho và đơn hàng thời trang

Mặt hàng may mặc sở hữu tính chất đa dạng về kích cỡ và màu sắc. Một mã sản phẩm quần áo có thể phân chia thành hàng chục biến thể khác nhau. Việc kiểm soát số lượng tồn kho từng mẫu bằng giấy tờ rất dễ nhầm lẫn. Nhân viên bán hàng thường xuyên tư vấn sai tình trạng hàng hóa còn trong kho. Khách hàng dễ hủy đơn khi nhận thông báo hết mẫu sản phẩm sau khi đã thanh toán. Việc thiếu cơ chế đồng bộ kho tự động làm giảm uy tín thương hiệu. Hệ thống cần giải quyết bài toán trừ kho ngay lập tức khi đơn hàng xác nhận thành công.

2.2. Hạn chế về trải nghiệm người dùng trên nền tảng cũ

Các website bán lẻ thế hệ trước thường có tốc độ tải trang chậm chạp. Trang web phải tải lại toàn bộ nội dung mỗi khi khách hàng chọn xem chi tiết sản phẩm. Quy trình thêm giỏ hàng cồng kềnh khiến tỷ lệ khách hàng rời bỏ trang web tăng cao. Ngoài ra, giao diện không tương thích trên thiết bị di động gây khó chịu cho người mua sắm. Khách hàng không thể kiểm tra lịch sử đơn hàng hoặc trạng thái vận chuyển nhanh chóng. Việc thiếu bộ lọc sản phẩm thông minh khiến người dùng mất nhiều thời gian tìm mẫu đồ ưa thích. Nền tảng cũ không còn đáp ứng được hành vi tiêu dùng hiện đại.

III. Giải pháp web quản lý cửa hàng thời trang bằng ASP

Giải pháp công nghệ được nhóm tác giả xây dựng dựa trên kiến trúc phân tầng hiện đại. Phía backend sử dụng ASP.NET Core Web API để xử lý nghiệp vụ bán hàng. Framework này mang lại hiệu năng cao và khả năng bảo mật mạnh mẽ. Các API được tài liệu hóa rõ ràng thông qua công cụ Swagger. Cơ sở dữ liệu SQL Server đảm bảo tính toàn vẹn và nhất quán của thông tin kho hàng. Hệ thống áp dụng cơ chế khóa dữ liệu nhằm ngăn chặn lỗi quá bán khi nhiều người cùng đặt hàng. Phía frontend sử dụng Angular kết hợp TypeScript để xây dựng giao diện ứng dụng đơn trang (SPA). Người dùng có thể chuyển đổi trang mượt mà không cần tải lại toàn bộ giao diện. Giao diện quản trị cung cấp đầy đủ chức năng quản lý danh mục, đơn hàng và tài khoản nhân viên. Hệ thống tích hợp các biểu đồ phân tích doanh thu trực quan giúp người quản lý nắm bắt kinh doanh. Hệ thống thông báo tự động cập nhật trạng thái đơn hàng tới khách hàng qua email và giao diện cá nhân. Toàn bộ giải pháp đáp ứng tiêu chuẩn phần mềm thương mại hiện đại.

3.1. Thiết kế kiến trúc Backend với ASP.NET Core

Backend áp dụng mô hình kiến trúc phân tầng kết hợp Entity Framework Core để truy xuất dữ liệu. Mã nguồn chia thành các lớp rõ ràng: Controller, Service và Repository. Cơ chế Dependency Injection tích hợp sẵn giúp giảm thiểu sự phụ thuộc giữa các thành phần. Hệ thống sử dụng JSON Web Token (JWT) để xác thực và ủy quyền truy cập cho từng vai trò người dùng. Các API quản lý sản phẩm, giỏ hàng và thanh toán đều tuân thủ nguyên tắc RESTful. Swagger UI hỗ trợ đội ngũ phát triển kiểm thử các điểm cuối dịch vụ nhanh chóng. Nền tảng đảm bảo tốc độ phản hồi tính bằng mili-giây cho mỗi yêu cầu.

3.2. Xây dựng giao diện tương tác bằng Angular

Giao diện người dùng được xây dựng trên nền tảng Angular với thiết kế theo từng component độc lập. Cách tiếp cận này giúp tái sử dụng mã nguồn và dễ bảo trì hệ thống. Angular Router hỗ trợ điều hướng trang mượt mà không cần tải lại toàn bộ trang. Người mua hàng dễ dàng lọc quần áo theo danh mục, mức giá, màu sắc và kích thước. Giỏ hàng cập nhật số lượng và tổng tiền ngay lập tức khi người mua thao tác. Bảng điều khiển dành cho người quản trị hiển thị trực quan các biểu đồ kinh doanh và danh sách đơn hàng. Ứng dụng tương thích tối ưu trên máy tính và điện thoại.

IV. Ứng dụng web quản lý cửa hàng thời trang từ đề tài ĐH SPKT

Đề tài nghiên cứu tại ĐH SPKT TP.HCM đã hoàn thiện một hệ thống phần mềm hoàn chỉnh và thực tế. Website xử lý mượt mà toàn bộ quy trình mua sắm từ chọn mẫu mã, đặt hàng cho đến thanh toán. Các tính năng quản trị kho hàng, phân loại sản phẩm và theo dõi trạng thái đơn hàng hoạt động ổn định. Việc kết hợp ASP.NET Core và Angular chứng minh sự phù hợp vượt trội trong phát triển phần mềm doanh nghiệp. Hệ thống tối ưu hóa tốc độ tải trang và đảm bảo độ an toàn dữ liệu khách hàng. Kết quả của khóa luận mở ra cơ hội thương mại hóa cho các chuỗi thời trang quy mô vừa và nhỏ. Doanh nghiệp có thể tiết kiệm chi phí thuê nền tảng bên ngoài nhờ việc làm chủ hoàn toàn mã nguồn. Khả năng mở rộng của kiến trúc microservices trong tương lai giúp hệ thống dễ dàng tích hợp thêm cổng thanh toán trực tuyến và trí tuệ nhân tạo. Việc phân tích sở thích khách hàng sẽ giúp nâng cao tỷ lệ chuyển đổi đơn hàng. Đề tài đóng góp thiết thực cho quá trình số hóa lĩnh vực thời trang tại Việt Nam.

4.1. Hiệu quả vận hành thực tế tại cửa hàng thời trang

Việc ứng dụng hệ thống giúp loại bỏ hoàn toàn các sai sót trong kiểm kê thủ công. Nhân viên tiết kiệm hơn 60% thời gian xử lý đơn hàng và đóng gói sản phẩm. Tình trạng đơn hàng trùng lặp hoặc giao nhầm mã sản phẩm được khắc phục triệt để. Tỷ lệ giữ chân khách hàng tăng nhờ trải nghiệm mua sắm nhanh chóng và minh bạch. Báo cáo doanh số tự động theo ngày giúp chủ cửa hàng theo dõi dòng tiền chính xác. Chi phí nhân sự quản lý vận hành giảm đáng kể so với phương thức cũ. Hệ thống đem lại lợi ích kinh tế rõ rệt ngay trong tháng đầu vận hành.

4.2. Tiềm năng mở rộng và hướng phát triển tương lai

Dự án có nền tảng kiến trúc vững chắc để tích hợp thêm các công nghệ hiện đại. Hướng phát triển tiếp theo bao gồm việc tích hợp cổng thanh toán trực tuyến VNPay, Momo và ZaloPay. Hệ thống cũng có thể bổ sung thuật toán gợi ý sản phẩm dựa trên hành vi duyệt web của khách hàng. Công nghệ trí tuệ nhân tạo có thể hỗ trợ tính năng thử đồ ảo trực tuyến trên giao diện web. Đề tài mở ra tiềm năng thương mại hóa thành một giải pháp SaaS dành riêng cho các chuỗi bán lẻ thời trang. Mô hình này hứa hẹn tạo ra giá trị bền vững cho thị trường bán lẻ số.

Nội dung chính

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

Khóa luận tốt nghiệp "Xây dựng Web quản lý cửa hàng thời trang sử dụng ASP.NET Core và Angular" được thực hiện bởi sinh viên Bùi Ngọc Lâm (MSSV: 18110140) và Nguyễn Việt Long (MSSV: 17110177), dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo tại Khoa Đào tạo Chất lượng cao, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh (hoàn thành tháng 10 năm 2022, cán bộ phản biện: Lê Văn Vinh).

Về bối cảnh thực tiễn, đề tài xuất phát từ sự phát triển nhanh chóng của ngành công nghệ thông tin và xu hướng chuyển dịch mạnh mẽ sang thương mại điện tử với sự hiện diện của các nền tảng lớn như Alibaba, Shopee, Tiki, Lazada. Các doanh nghiệp, công ty và chủ cửa hàng thời trang có nhu cầu cấp thiết trong việc đưa sản phẩm lên không gian mạng nhằm tiếp cận khách hàng, hỗ trợ người tiêu dùng tra cứu mẫu mã trước khi đến cửa hàng hoặc đặt hàng trực tuyến. Đồng thời, việc ứng dụng phần mềm giúp người quản lý kiểm soát thông tin giao dịch, nhân viên, hàng hóa, doanh thu và đối tác vận chuyển tại bất kỳ địa điểm nào có kết nối Internet.

Mục tiêu và nhiệm vụ nghiên cứu của đề tài bao gồm:

1. Nghiên cứu nghiệp vụ thương mại điện tử cơ bản cho một cửa hàng thời trang độc lập.
2. Tìm hiểu và làm chủ các công nghệ phát triển web hiện đại: khung giao diện Angular, nền tảng backend ASP.NET Core Web API, hệ quản trị cơ sở dữ liệu quan hệ SQL Server.
3. Ứng dụng các giải pháp bảo mật dữ liệu bao gồm phân quyền người dùng, mã hóa mật khẩu bằng thư viện Bcrypt và xác thực thông qua Json Web Token (JWT).
4. Thiết kế, xây dựng và kiểm thử hoàn chỉnh một ứng dụng web thương mại điện tử đáp ứng đầy đủ các chức năng mua sắm của khách hàng và công tác điều hành của nhà quản lý.

Đối tượng nghiên cứu của khóa luận là nhu cầu mua sắm trực tuyến của khách hàng đối với mặt hàng thời trang, cùng với các công nghệ phần mềm tương ứng dùng để hiện thực hóa hệ thống. Phạm vi nghiên cứu tập trung vào xử lý nghiệp vụ bán hàng cho một cửa hàng thời trang cụ thể, bao gồm: quản lý nhân sự và tính lương, quản trị hồ sơ khách hàng, danh mục loại sản phẩm và sản phẩm, quản lý kho và đơn đặt hàng, tích hợp thanh toán trực tuyến, và lập báo cáo thống kê hoạt động kinh doanh.

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

Khóa luận xây dựng hệ thống phần mềm dựa trên các nền tảng lý thuyết và công nghệ chuyên ngành kỹ thuật phần mềm:

• Khung giao diện Angular: Là một JavaScript/TypeScript Framework mã nguồn mở hỗ trợ phát triển ứng dụng trang đơn (Single Page Application - SPA) theo cấu trúc MVC (tương tự MVVM). Tác giả tập trung vào các đặc tính cốt lõi: cơ chế liên kết dữ liệu hai chiều (Two-way Data-binding), bộ điều khiển và phạm vi (Scope/Controller), dịch vụ tương tác dữ liệu máy chủ (Service/Dependency Injection), bộ lọc (Filters), chỉ thị giao diện (Directives), mẫu hiển thị (Templates), định tuyến (Routing), liên kết sâu (Deep Linking), và cấu trúc module hóa (ngModule) hỗ trợ biên dịch trước Ahead-of-Time (AoT).
• Hệ quản trị cơ sở dữ liệu SQL Server: Hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) của Microsoft, quản lý cấu trúc bảng có ràng buộc khóa ngoại. Tác giả khảo cứu các thành phần nền tảng: Database Engine, Integration Services (SSIS), Analysis Services (SSAS), Notification Services, Reporting Services (SSRS), Full Text Search Service và Service Broker.
• Nền tảng ASP.NET Core: Khung phát triển ứng dụng web mã nguồn mở, đa nền tảng (chạy trên Windows, macOS, Linux) của Microsoft. Nền tảng sử dụng ngôn ngữ C#, hoạt động trên môi trường thực thi Common Language Runtime (CLR) với tính năng thu gom rác tự động, quản lý ngoại lệ và hỗ trợ kiến trúc hướng module tối ưu hóa tài nguyên.
• Bảo mật và tích hợp: Xác thực qua cơ chế phi trạng thái Json Web Token (JWT), thuật toán băm mật khẩu Bcrypt, tài liệu hóa API qua Swagger tích hợp sẵn trong ASP.NET Core. Phương thức triển khai máy chủ được xem xét qua dịch vụ máy chủ web Internet Information Services (IIS) và dịch vụ lưu trữ đám mây Netlify hỗ trợ tích hợp liên tục (CI) và giao thức SSL.

Phương pháp nghiên cứu thực tế gồm:

• Khảo sát và phân tích hiện trạng các website thương mại điện tử đang vận hành trên thị trường (Shopee, The Cosmo, Juno, Marc Fashion).
• Phương pháp phân tích và thiết kế hệ thống hướng đối tượng: mô hình hóa ca sử dụng (Use Case), biểu đồ tuần tự (Sequence Diagram), biểu đồ lớp (Class Diagram), và biểu đồ quan hệ thực thể (ERD).
• Phương pháp xây dựng phần mềm thực nghiệm: cài đặt mã nguồn thực tế và kiểm thử hộp đen (Black-box testing) trên các ca kiểm thử chức năng (Test Cases).

Nguồn dữ liệu của đề tài bắt nguồn từ việc tổng hợp tài liệu kỹ thuật chính thức của Microsoft, Angular, và dữ liệu khảo sát trực tiếp giao diện, tính năng từ 4 website thương mại điện tử thực tế.

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình tách biệt Frontend và Backend thông qua kiến trúc RESTful Web API:

• Kiến trúc phần mềm: Phía Frontend xây dựng bằng Angular đảm nhận vai trò hiển thị và điều hướng SPA; phía Backend sử dụng ASP.NET Core tiếp nhận yêu cầu HTTP, xử lý logic nghiệp vụ, xác thực JWT và tương tác với SQL Server Database. Giao tiếp giữa hai tầng được chuẩn hóa qua tài liệu Swagger UI.
• Thiết kế cơ sở dữ liệu: Hệ thống chuẩn hóa 19 bảng dữ liệu quan hệ để quản trị toàn bộ hoạt động của cửa hàng:
  • Nhóm người dùng và quyền: khách hàng, nhân viên, người quản trị, vai trò, địa chỉ người dùng.
  • Nhóm hàng hóa và kho: loại sản phẩm, sản phẩm, hình ảnh sản phẩm, chi phí nhập sản phẩm.
  • Nhóm giao dịch và vận hành: giỏ hàng, đơn hàng, chi tiết đơn hàng, trạng thái đơn hàng, phương thức giao dịch, voucher, chi phí voucher.
  • Nhóm quản trị nội bộ: lương nhân viên, thông báo.
• Môi trường triển khai và vận hành:
  • Backend được định cấu hình qua file appsettings.json, kiểm tra việc gọi API địa chỉ cửa hàng và xuất tài liệu tương tác qua giao diện Swagger tích hợp.
  • Frontend được quản lý gói thư viện phụ thuộc bằng npm, biên dịch và chạy trên môi trường cục bộ trước khi thử nghiệm cấu hình triển khai web server IIS và nền tảng đám mây Netlify (với giới hạn lưu trữ 100GB, băng thông 100GB/tháng, 300 phút build/tháng).
• Kiểm thử hệ thống: Khóa luận triển khai kiểm thử chức năng dựa trên các kịch bản kiểm thử (Test Case) chi tiết, kiểm tra tính đúng đắn của dữ liệu đầu vào và các thông báo lỗi:
  • Kiểm thử xác thực: Ca kiểm thử đăng nhập (TC_DN_01, TC_DN_02, TC_DN_03), đăng ký tài khoản (TC_DK_01, TC_DK_02).
  • Kiểm thử nghiệp vụ quản lý: Thêm loại sản phẩm (TC_TLSP_01, TC_TLSP_02), xóa loại sản phẩm (TC_XLSP_01).

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

Chương 1: Cơ sở lí thuyết

Chương này trình bày nền tảng công nghệ sử dụng trong đồ án:

• Phân tích chi tiết Framework Angular: khái niệm SPA, mô hình hoạt động MVC/MVVM, cơ chế ràng buộc dữ liệu hai chiều thông qua cú pháp {{TenBien}}, kiến trúc phân rã thành Component (kèm Selector, TemplateUrl, StyleUrls) và ngModule (Imports, Declarations, Bootstrap). Đánh giá ưu điểm về cấu trúc mã nguồn sạch, chạy tốt trên trình duyệt thiết bị di động; nhược điểm về rủi ro bảo mật client-side cần máy chủ xác thực thường xuyên và sự phụ thuộc hoàn toàn vào JavaScript của trình duyệt.
• Trình bày kiến trúc hệ quản trị SQL Server và 7 thành phần kỹ thuật chính hỗ trợ xử lý dữ liệu lớn, khai phá dữ liệu (datamining, multi-dimension cubes) và đánh chỉ mục văn bản không cấu trúc.
• Trình bày nền tảng ASP.NET Core: nguồn gốc từ ASP.NET (2002), tiến trình phát triển thành phiên bản mã nguồn mở đa nền tảng, cơ chế quản lý bộ nhớ và ngoại lệ của CLR.
• Khảo sát các giải pháp môi trường xuất bản: phân tích nền tảng lưu trữ Netlify (hỗ trợ CI, SSL miễn phí) và quy trình kiểm thử máy chủ cục bộ thông qua máy chủ web IIS / IIS Express.

Chương 2: Khảo sát hiện trạng và xác định yêu cầu

Chương này tập trung nghiên cứu thực tế và chi tiết hóa các yêu cầu của hệ thống:

• Khảo sát 4 website thương mại điện tử thực tế:

Tên website khảo sát	Ưu điểm ghi nhận	Nhược điểm ghi nhận
Shopee (shopee.vn)	Màu sắc tươi tắn; phân loại rõ ràng; đa dạng mẫu mã; tương thích di động; kết hợp nhiều thanh toán và vận chuyển; hỗ trợ đa ngôn ngữ.	Quá nhiều thông tin; màu sắc dễ gây chói mắt ban đêm; hệ thống thỉnh thoảng bị lag và lỗi không hiển thị hình ảnh mẫu.
The Cosmo Việt Nam (thecosmo.vn)	Sản phẩm phân chia theo danh mục; hỗ trợ nhiều hình thức thanh toán; giao diện gọn gàng.	Hộp thoại tương tác (box chat) xuất hiện quá nhiều lần khi truy cập trang chủ.
Juno / The Juno (juno.vn)	Phân chia danh mục kết hợp chọn lọc theo mức tiền; giao diện dễ nhìn; nhiều hình thức thanh toán.	Chưa hỗ trợ cơ chế xác thực đăng nhập qua bên thứ ba.
Marc Fashion (marc.vn)	Danh mục đa cấp kết hợp thuộc tính lọc; giao diện gọn gàng; có thông báo hàng hot/giảm giá; hỗ trợ đăng nhập bên thứ ba.	Chưa ghi nhận nhược điểm trong phạm vi khảo sát của nhóm.

• Phân loại yêu cầu chức năng hệ thống cho 3 nhóm tác nhân:
  • Người mua (Khách hàng): Tìm kiếm, đăng ký tài khoản (xác thực email), khôi phục mật khẩu, đăng nhập/đăng xuất, cập nhật thông tin cá nhân/mật khẩu, quản lý giỏ hàng (thay đổi kích thước size, tăng giảm số lượng, xóa sản phẩm), đặt hàng, chọn phương thức thanh toán, áp dụng mã voucher, quản lý và hủy đơn hàng ở trạng thái chờ xác nhận, xem thông báo.
  • Nhân viên: Xác thực tài khoản (do quản trị viên cấp), đổi mật khẩu, kiểm duyệt đơn đặt hàng của khách hàng.
  • Người quản trị (Admin): Quản lý phân quyền vai trò (thêm, sửa, xóa mềm, tìm kiếm); quản lý nhân viên và tính lương theo ngày/tháng; quản lý danh sách khách hàng; quản lý danh mục và sản phẩm (upload nhiều ảnh, kiểm soát giá nhập và giá bán); quản lý đơn đặt hàng qua các trạng thái (chờ xác nhận, đang giao, đã giao, đã hủy); quản lý voucher giảm giá phí hàng hoặc phí vận chuyển; báo cáo thống kê toàn diện (doanh thu, chi phí, đơn hàng, khách hàng mới theo chu kỳ 12 tháng).
• Xác lập yêu cầu phi chức năng: bảo mật tài khoản bằng thư viện Bcrypt, phân quyền qua chuỗi mã hóa token, xây dựng giao diện thân thiện với người sử dụng.
• Xây dựng mô hình hóa yêu cầu: Lược đồ Use Case tổng quát cho khách hàng và người quản lý; đặc tả chi tiết 23 ca sử dụng thực tế của hệ thống.

Chương 3: Thiết kế phần mềm

Chương này cụ thể hóa thiết kế kỹ thuật của hệ sinh thái web:

• Sơ đồ thiết kế tổng quan kiến trúc hệ thống và lược đồ lớp (Class Diagram).
• Xây dựng hệ thống 46 biểu đồ tuần tự (Sequence Diagram) mô tả luồng tương tác giữa người dùng, giao diện, bộ xử lý API và cơ sở dữ liệu cho toàn bộ các chức năng từ đăng ký, giỏ hàng, thanh toán đến quy trình duyệt đơn và tính lương.
• Thiết kế chi tiết cơ sở dữ liệu quan hệ gồm 19 bảng với kiểu dữ liệu, khóa chính, khóa ngoại và ràng buộc toàn vẹn.
• Thiết kế giao diện lập trình ứng dụng Backend Swagger phục vụ quản lý địa chỉ, giỏ hàng, đặt hàng, nhân viên, sản phẩm, voucher, giao dịch và thống kê.
• Thiết kế giao diện chi tiết: 16 màn hình phía khách hàng (trang chủ, danh sách sản phẩm, chi tiết, giỏ hàng, thanh toán, hồ sơ, theo dõi đơn hàng) và 38 màn hình phía quản trị viên (bảng điều khiển vai trò, nhân sự, bảng lương, kho hàng, danh mục, voucher, biểu đồ thống kê kinh doanh).

Chương 4: Cài đặt và kiểm thử

Chương này phản ánh việc chuyển đổi thiết kế thành ứng dụng thực tế:

• Quá trình cấu hình backend ASP.NET Core, chạy thử nghiệm hệ thống API thông qua giao diện tương tác Swagger.
• Quy trình cài đặt thư viện frontend qua npm và vận hành thành công giao diện Angular SPA trên máy trạm.
• Thiết lập kịch bản và chạy kiểm thử hộp đen cho các nhóm chức năng cốt lõi:
  • Chức năng đăng nhập (TC_DN_01, TC_DN_02, TC_DN_03): kiểm tra trường hợp để trống thông tin, sai mật khẩu và đăng nhập thành công.
  • Chức năng đăng ký (TC_DK_01, TC_DK_02): kiểm tra việc nhập dữ liệu thiếu, trùng lặp email/tên đăng nhập và quy trình xác thực.
  • Chức năng quản lý loại sản phẩm (TC_TLSP_01, TC_TLSP_02, TC_XLSP_01): kiểm tra ràng buộc nghiệp vụ khi tạo mới loại sản phẩm và cơ chế ẩn dữ liệu khi thực hiện xóa loại sản phẩm.

Chương 5: Phần kết luận

Chương cuối cùng tổng kết các kết quả đạt được từ đề tài, đánh giá mức độ hoàn thiện của hệ thống phần mềm, phân tích ưu điểm, nhược điểm trong quá trình xây dựng và đề xuất phương hướng phát triển hệ thống trong tương lai.

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

Về kết quả kỹ thuật, đề tài đã xây dựng thành công ứng dụng web quản lý và bán hàng thời trang hoàn chỉnh với các kết quả cụ thể:

• Hoàn thiện hệ thống phân quyền 3 cấp độ: Khách hàng, Nhân viên và Quản trị viên, đảm bảo cơ chế bảo mật mật khẩu với Bcrypt và phân quyền truy cập thông qua JSON Web Token.
• Hiện thực hóa đầy đủ quy trình mua sắm của khách hàng: từ khâu tìm kiếm, xem chi tiết sản phẩm, điều chỉnh kích thước/số lượng trong giỏ hàng, quản lý danh sách nhiều địa chỉ nhận hàng, áp dụng voucher khuyến mãi cho đến khâu thanh toán đa dạng (hỗ trợ thanh toán khi nhận hàng COD, PayPal, VNPay, MoMo).
• Xây dựng hệ thống bảng điều khiển (Dashboard) quản trị toàn diện:
  • Cho phép người quản trị thiết lập và tính toán bảng lương nhân viên dựa trên số ngày làm việc thực tế trong tháng.
  • Quản lý danh mục loại sản phẩm, sản phẩm với khả năng tải lên nhiều hình ảnh và thiết lập tỷ lệ chiết khấu giảm giá.
  • Xây dựng hệ thống báo cáo thống kê trực quan qua biểu đồ: theo dõi biến động doanh thu 12 tháng gần nhất, cơ cấu chi phí (lương nhân viên, vốn nhập hàng, chi phí khấu trừ voucher), số lượng đơn hàng theo trạng thái (chờ xác nhận, đang giao, đã giao, đã hủy) và số lượng khách hàng mới đăng ký.
• Thiết lập cơ chế xóa mềm (Soft Delete) trên hầu hết các thực thể quản trị (nhân viên, khách hàng, loại sản phẩm, sản phẩm, voucher, vai trò), giúp dữ liệu không bị xóa hoàn toàn khỏi cơ sở dữ liệu mà chỉ chuyển sang trạng thái ẩn để bảo toàn lịch sử giao dịch.

Đóng góp của khóa luận nằm ở việc tích hợp thành công mô hình Single Page Application (Angular) với RESTful Web API (.NET Core) vào một bài toán thương mại điện tử thực tế, đồng thời chuẩn hóa quy trình phân tích - thiết kế phần mềm thông qua hệ thống use case, sơ đồ tuần tự và cơ sở dữ liệu quan hệ chi tiết.

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

Khóa luận tự chỉ ra một số hạn chế của ứng dụng và đề xuất định hướng phát triển:

• Hạn chế của ứng dụng:
  • Hệ thống chưa hỗ trợ các phương thức đăng nhập nhanh thông qua dịch vụ của bên thứ ba (như tài khoản Google, Gmail).
  • Chưa xây dựng kênh hỗ trợ trực tuyến (hộp thoại tư vấn/live chat hoặc tư vấn viên) để tương tác và giải đáp vướng mắc tức thời cho khách hàng khi mua sắm.
  • Quy mô hệ thống hiện tại mới phục vụ cho mô hình một cửa hàng/doanh nghiệp đơn lẻ, chưa hỗ trợ chuỗi cửa hàng đa chi nhánh hoặc mô hình sàn giao dịch đa nhà bán hàng.
• Hướng phát triển tiếp theo:
  • Nghiên cứu tích hợp các giải pháp xác thực đăng nhập một lần (OAuth2) thông qua mạng xã hội và tài khoản Google.
  • Tích hợp hệ thống hỗ trợ khách hàng trực tuyến tự động hoặc có nhân viên chăm sóc khách hàng.
  • Mở rộng thêm ứng dụng trên thiết bị di động (Mobile App) để đồng bộ trải nghiệm mua sắm của người dùng.
  • Tối ưu hóa chi phí và tích hợp sâu hơn với các đơn vị vận chuyển trung gian.

Giá trị tham khảo

Báo cáo khóa luận có giá trị tham khảo chuyên môn đối với sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm và các nhà phát triển đang tìm hiểu về kiến trúc Single Page Application kết hợp với RESTful API:

• Tài liệu tham khảo nghiệp vụ: Cung cấp bức tranh chi tiết về đặc tả use case, quy tắc nghiệp vụ quản lý bán lẻ thời trang (ràng buộc giá bán, giá nhập, kích thước sản phẩm, phân loại voucher chiết khấu đơn hàng/vận chuyển, cách thức tính lương nhân viên).
• Tài liệu tham khảo thiết kế hệ thống: Là mẫu tham khảo chuẩn mực về cách thiết kế sơ đồ tuần tự (hơn 40 biểu đồ) và mô hình dữ liệu quan hệ 19 bảng cho các đồ án tốt nghiệp chuyên ngành phần mềm.
• Tài liệu tham khảo công nghệ: Hữu ích cho việc nghiên cứu phương thức cấu hình Swagger trong ASP.NET Core, cơ chế truyền nhận dữ liệu giữa Angular và Backend API, cũng như quy trình kiểm thử hộp đen cho các chức năng xác thực và quản lý danh mục.

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

1. Hệ thống xử lý thao tác xóa dữ liệu (nhân viên, khách hàng, sản phẩm, loại sản phẩm, voucher) như thế nào?
Trong toàn bộ hệ thống quản trị, khi người quản trị thực hiện thao tác xóa một vai trò, nhân viên, khách hàng, loại sản phẩm, sản phẩm hoặc voucher, hệ thống áp dụng cơ chế "xóa mềm" (Soft Delete). Dữ liệu không bị xóa hoàn toàn khỏi cơ sở dữ liệu SQL Server mà chỉ được chuyển đổi trạng thái để ẩn đi trên giao diện, nhằm đảm bảo tính toàn vẹn của dữ liệu và lưu vết các giao dịch lịch sử.

2. Các ràng buộc nghiệp vụ bắt buộc khi người quản trị thêm một sản phẩm mới là gì?
Theo đặc tả của đồ án, khi thêm sản phẩm mới vào hệ thống, người quản trị bắt buộc phải nhập các thông tin với các điều kiện: tên sản phẩm, tên loại sản phẩm, số lượng nhập (phải lớn hơn 0), giá nhập, giá bán (phải lớn hơn giá nhập và lớn hơn 0), phần trăm giảm giá (phải nằm trong khoảng lớn hơn 0 và nhỏ hơn 100), cùng với mô tả và tệp hình ảnh đính kèm của sản phẩm.

3. Cơ chế bảo mật và phân quyền tài khoản trong hệ thống được thiết lập ra sao?
Hệ thống sử dụng thư viện Bcrypt để băm và mã hóa mật khẩu người dùng nhằm chống lộ lọt thông tin trong cơ sở dữ liệu. Về mặt phân quyền và xác thực các yêu cầu tương tác API, hệ thống ứng dụng Json Web Token (JWT); các phiên làm việc đòi hỏi xác thực đều phải gửi kèm token hợp lệ để máy chủ ASP.NET Core kiểm tra quyền trước khi xử lý.

4. Phân hệ báo cáo thống kê của người quản trị theo dõi những dữ liệu kinh doanh nào?
Phân hệ thống kê cung cấp các báo cáo theo chu kỳ 12 tháng gần nhất bao gồm: thống kê đơn hàng theo trạng thái (chờ xác nhận, đang giao, đã giao, đã hủy); thống kê tổng doanh thu hàng tháng; thống kê chi phí phát sinh (gồm 3 nhóm chi phí: lương trả nhân viên, chi phí nhập hàng hóa và chi phí chiết khấu từ voucher); thống kê sản phẩm tồn kho và sản phẩm đã bán theo từng danh mục; và thống kê số lượng tài khoản khách hàng mới đăng ký.

5. Khách hàng có thể sử dụng những phương thức thanh toán nào khi mua hàng?
Khi hoàn tất giỏ hàng và tiến hành thanh toán, hệ thống thiết lập mặc định phương thức "Thanh toán khi nhận hàng" (COD). Ngoài ra, khách hàng có thể chủ động chuyển đổi sang các cổng thanh toán điện tử trực tuyến khác đã được tích hợp bao gồm ví MoMo, cổng VNPay và tài khoản quốc tế PayPal.

Kết luận

Khóa luận tốt nghiệp của nhóm tác giả Bùi Ngọc Lâm và Nguyễn Việt Long đã xây dựng thành công giải pháp phần mềm hoàn chỉnh cho bài toán quản lý và kinh doanh cửa hàng thời trang trực tuyến. Đề tài vận dụng hiệu quả mô hình phân tách giữa giao diện trang đơn Angular và tầng dịch vụ ASP.NET Core Web API, đồng thời quản lý dữ liệu chặt chẽ qua hệ quản trị SQL Server. Mặc dù còn hạn chế về tính năng đăng nhập mạng xã hội và công cụ hỗ trợ trực tuyến, hệ thống đã đáp ứng đầy đủ các yêu cầu nghiệp vụ cốt lõi từ quản lý vận hành nội bộ đến trải nghiệm mua sắm của người dùng.

Trích đoạn nội dung tài liệu

CHƯƠNG 1 CƠ SỞ LÍ THUYẾT 1.1 Khái niệm Angular là một bộ Javascript Framework rất mạnh và thường được sử dụng để xây dựng project Single Page Application (SPA). Nó hoạt động dựa trên các thuộc tính mở rộng HTML (các atributes theo quy tắc của Angular). Đây là một Framework mã nguồn mở hoàn toàn miễn phí và được hàng ngàn các lập trình viên trên thế giới ưa chuộng và sử dụng. Framework này được thế hệ Web 2.0 phát triển khá mạnh ở nước ngoài, tuy nhiên ở Việt Nam thì vẫn chưa thông dụng lắm.2 Các đặc tính của Angular Angular là một Framwork phát triển dựa trên Javascript để tạo các ứng dụng web phong phú.

Angular thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi data, sử dụng mô hình MVC rất mạnh mẽ. Mã nguồn AngularJS tự động fix với các trình duyệt khác nhau nên bạn không cần phải lo vấn đề tương thích trình duyệt. Angular là mã nguồn mở, hoàn toàn miễn phí và được phát triển bởi hàng ngàn các lập trình viên trên thế giới. Chung quy lại có thể hiểu khi làm việc với AngularJS giống như là đang làm việc với Ajax, sử dụng cớ chế bind data, hoạt động theo mô hình MVC và sử dụng service để tương tác với dữ liệu từ server.3 Các tính năng cốt lõi của Angular - Data-binding: (liên kết dữ liệu) tự động đồng bộ dữ liệu giữa model và view.

- Scope: (Phạm vi) Đây là những đối tượng kết nối giữa Controller và View. - Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều khiển Scope. 18 - Service: Như tôi đề cập ở trên, AngularJS sử dụng các API được xây dựng từ các web service (PHP, ASP) để thao tác với DB. - Filters: Bộ lọc lọc ra các thành phẩn của một mảng và trả về mảng mới.

- Directives: đánh dấu vào các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ HTML tùy chỉnh. - Templates: hiển thị thông tin từ controller, đây là một thành phần của views - Routing: chuyển đổi giữa các action trong controller. - MVC: Mô hình chia thành phần riêng biệt thành Model, View, Controller. Đây là một mô hình khá hay nhưng trong Angular thì nó được chế biến lại một chút gần giốn với MVVM (Model View View Model).

- Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể đánh dấu được với công cụ tìm kiếm. - Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng.1 Các tính năng cốt lõi của Angular (Trích: https://viblo.asia/p/tim-hieu- 19 va-huong-dan-lam-angularjs-Q7eEREb9MgNj) 1.4 Các thành phần trong Angular 1.1 Component Components là một khối code trong app Angular. Nó là sự kết hợp của bộ template html và nhúng kèm code TypeScript (hoặc Javascript). Các components là độc lập với nhau và độc lập với hệ thống.

Nó có thể được cài vào hoặc tháo ra khỏi hệ thống dễ dàng. Một component có thể hiểu như một control trên màn hình hiển thị, gồm giao diện html và code logic xử lý sự kiện đi kèm control đó. Một component cũng có thể to lớn như là cả 1 màn hình chứa nhiều control hoặc một nhóm nhiều màn hình. Tức là là một component cũng có thể chứa và gọi được nhiều component khác nối vào cấu trúc của component: - Từ khóa @Component sẽ giúp định nghĩa bộ khung html cho nó.

Và bên dưới là một class CategoryListComponent dùng để viết code logic. Trong định nghĩa bộ khung html, chúng ta có một số thuộc tính cần chú ý sau đây: - Selector : Là tên được đặt để gọi một component trong code html. Ở ví dụ vừa rồi, từ khóa hello-ng-world được đặt tên cho component này.