Xây dựng hệ thống thương mại điện tử ứng dụng AI và sử dụng công nghệ ASP.NET, ReactJS

Khóa luận xây dựng hệ thống thương mại điện tử ứng dụng AI tại ĐH Sư phạm Kỹ thuật TP.HCM

• Tác giả: Phạm Thị Phương Nghi
• Người hướng dẫn: TS. Lê Văn Vinh
• Trường học: Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng hệ thống thương mại điện tử ứng dụng AI và sử dụng công nghệ ASP.NET, ReactJS
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2025
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Tổng quan hệ thống thương mại điện tử AI ASP

Đề tài nghiên cứu khoa học tại Trường Đại học Sư phạm Kỹ thuật TP.HCM tập trung xây dựng nền tảng mua sắm trực tuyến hiện đại. Hệ thống kết hợp sức mạnh xử lý của ASP.NET với giao diện linh hoạt từ ReactJS. Trí tuệ nhân tạo đóng vai trò hạt nhân giúp tối ưu hóa hành trình khách sắm. Công nghệ kỹ thuật số đang định hình lại toàn bộ phương thức giao thương truyền thống. Người tiêu dùng ngày nay đòi hỏi tốc độ truy cập nhanh, bảo mật cao và thao tác mượt mà. Nền tảng này đáp ứng trọn vẹn các tiêu chí kỹ thuật chuẩn mực của ngành công nghệ thông tin. Sinh viên nghiên cứu giải quyết bài toán đồng bộ dữ liệu thời gian thực giữa giao diện và máy chủ. Kiến trúc phân tầng tách biệt cho phép mở rộng quy mô kinh doanh không giới hạn. Cơ sở dữ liệu lưu trữ hàng triệu bản ghi sản phẩm cùng lịch sử giao dịch. Toàn bộ chu trình từ đăng nhập, duyệt hàng đến thanh toán đều được tối ưu hóa toàn diện. Đây là bước tiến quan trọng trong việc ứng dụng công nghệ giáo dục vào thực tiễn thương mại số.

1.1. Bối cảnh nghiên cứu đề tài tại ĐH Sư phạm Kỹ thuật

Khoa Công nghệ Thông tin tại Đại học Sư phạm Kỹ thuật TP.HCM luôn khuyến khích đề tài gắn liền thực tiễn. Đề tài tốt nghiệp của sinh viên Phạm Thị Phương Nghi và Nguyễn Việt Khoa phản ánh nhu cầu số hóa cấp thiết. Dưới sự hướng dẫn của TS. Lê Văn Vinh, nhóm tác giả đã xác định những khoảng trống công nghệ hiện nay. Phần lớn website bán hàng thông thường thiếu tính cá nhân hóa thông minh. Người tiêu dùng thường mất nhiều thời gian tìm kiếm món hàng ưng ý. Do đó, việc nghiên cứu nền tảng tích hợp trí tuệ nhân tạo mang ý nghĩa học thuật và ứng dụng sâu sắc. Đề tài góp phần nâng cao chất lượng đào tạo kỹ sư công nghệ chất lượng cao.

1.2. Mục tiêu tích hợp AI vào nền tảng thương mại điện tử

Mục tiêu cốt lõi của hệ thống là tự động hóa quy trình phân loại và gợi ý mặt hàng. Thuật toán học máy phân tích hành vi tìm kiếm để đưa ra kết quả sát thực tế. Tính năng tìm kiếm hình ảnh giúp người dùng tra cứu nhanh chóng mà không cần gõ từ khóa. Nền tảng hướng tới mục tiêu giảm tỷ lệ rời bỏ giỏ hàng của khách truy cập. Hiệu năng hệ thống được duy trì ổn định ngay cả khi lưu lượng truy cập tăng vọt. Dự án hướng đến việc tạo ra một quy chuẩn kỹ thuật mở cho các nền tảng thương mại điện tử thế hệ mới. Toàn bộ giải pháp đều tập trung tối ưu hóa tỷ lệ chuyển đổi đơn hàng trực tuyến.

II. Phân tích thách thức thương mại điện tử AI ASP

Sự bùng nổ của thương mại điện tử đặt ra nhiều thách thức lớn về mặt hạ tầng công nghệ. Các hệ thống cũ kỹ thường gặp sự cố nghẽn mạng khi số lượng truy cập tăng đột biến. Việc xử lý dữ liệu lớn từ hình ảnh và thông tin sản phẩm đòi hỏi tài nguyên máy chủ đáng kể. Người dùng hiện đại yêu cầu giao diện tải trang gần như tức thì và tương tác mượt mà. Tuy nhiên, sự phân mảnh công nghệ giữa frontend và backend thường gây ra độ trễ kết nối. Ngoài ra, việc tích hợp các mô hình trí tuệ nhân tạo phức tạp vào luồng giao dịch thông thường rất dễ phát sinh lỗi. Bài toán đồng bộ trạng thái đơn hàng giữa các phân hệ quản lý kho và thanh toán còn nhiều rủi ro. Các lỗ hổng bảo mật thông tin tài khoản và dữ liệu thanh toán cũng là mối lo ngại thường trực. Nghiên cứu xác định rõ những hạn chế này để xây dựng cấu trúc ứng dụng bền vững. Khả năng tương thích trên các thiết bị di động cũng là yếu tố bắt buộc cần giải quyết triệt để.

2.1. Hạn chế về tốc độ và trải nghiệm trên hệ thống truyền thống

Nhiều trang web mua sắm cũ áp dụng mô hình render từ máy chủ gây tải chậm trang. Khách hàng phải chờ đợi tải lại toàn bộ giao diện sau mỗi thao tác nhấp chuột. Tình trạng này làm giảm tỷ lệ tương tác và gia tăng tỷ lệ thoát trang nghiêm trọng. Thanh tìm kiếm truyền thống chỉ dựa trên từ khóa tĩnh và hay trả về kết quả rỗng. Khách hàng không thể tìm kiếm khi quên tên hoặc chỉ có hình ảnh mẫu vật phẩm. Bên cạnh đó, việc thiếu hụt cơ chế bộ nhớ đệm khiến máy chủ quá tải trong các đợt khuyến mãi. Đây là rào cản lớn ngăn cản doanh nghiệp nâng cấp dịch vụ bán hàng số hóa.

2.2. Khó khăn trong quản lý dữ liệu lớn và an toàn bảo mật

Quản lý lượng thông tin sản phẩm và dữ liệu người dùng khổng lồ là thách thức phức tạp. Cơ sở dữ liệu quan hệ dễ gặp hiện tượng khóa bảng khi có hàng nghìn giao dịch đồng thời. Việc đồng bộ hóa dữ liệu danh mục hàng hóa đòi hỏi thuật toán truy vấn được tinh chỉnh kỹ lưỡng. Mặt khác, các cuộc tấn công mạng như SQL Injection hay Cross-Site Scripting luôn rình rập hệ sinh thái web. Dữ liệu thanh toán của khách hàng cần cơ chế mã hóa tiêu chuẩn nhằm ngăn ngừa rò rỉ. Nếu không có lớp bảo vệ nghiêm ngặt, uy tín của nền tảng bán lẻ sẽ bị tổn hại nghiêm trọng. Yêu cầu đặt ra là phải xây dựng hệ thống an toàn đa tầng.

III. Giải pháp kiến trúc thương mại điện tử AI ASP

Để khắc phục triệt để các hạn chế, nhóm nghiên cứu đã áp dụng kiến trúc phân tách hiện đại. Phần backend sử dụng framework ASP.NET Core hiệu năng cao để xử lý các logic nghiệp vụ phức tạp. Nền tảng kết nối cơ sở dữ liệu SQL Server thông qua Entity Framework Core giúp truy vấn dữ liệu tối ưu. Phía giao diện, ReactJS đảm nhận vai trò hiển thị với cơ chế Single Page Application linh hoạt. Việc tái sử dụng các component giao diện giúp giảm thiểu đáng kể thời gian tải trang. Hệ thống ứng dụng Docker Container để đóng gói toàn bộ dịch vụ, đảm bảo triển khai đồng nhất trên mọi môi trường máy chủ. Các thuật toán AI xử lý ảnh và lọc cộng tác được tích hợp qua cổng API chuyên dụng. Nhờ vậy, chức năng tìm kiếm sản phẩm bằng hình ảnh hoạt động chính xác và phản hồi tức thì. Luồng xác thực đăng nhập người dùng được bảo vệ chặt chẽ thông qua giao thức JWT. Mô hình kiến trúc này mang lại tính linh hoạt cao, tạo điều kiện thuận lợi cho việc bảo trì dài hạn.

3.1. Thiết kế tầng Backend ASP.NET và quản trị SQL Server

Hạ tầng máy chủ được xây dựng trên nền tảng ASP.NET Core với kiến trúc RESTful API chuẩn mực. Các dịch vụ xử lý thanh toán, giỏ hàng và danh mục được cấu trúc tách biệt theo module. Hệ quản trị SQL Server đảm nhận lưu trữ dữ liệu tập trung với bảng quan hệ chuẩn hóa cao. Kỹ thuật đánh chỉ mục cơ sở dữ liệu Indexing giúp tăng tốc độ truy xuất thông tin mặt hàng. Bên cạnh đó, việc áp dụng Docker giúp cô lập môi trường chạy, loại bỏ hoàn toàn lỗi xung đột thư viện. Quá trình kiểm thử tải chứng minh hệ thống vận hành ổn định trước áp lực truy cập đồng thời lớn. Cấu hình bảo mật token JWT giúp ngăn chặn truy cập trái phép.

3.2. Phát triển Frontend ReactJS và tích hợp mô hình AI

Giao diện người dùng xây dựng bằng ReactJS mang lại trải nghiệm mượt mà không cần làm mới trang web. Các thành phần giao diện như thanh tìm kiếm, bộ lọc động và lưới sản phẩm được module hóa cao. Điểm nhấn nổi bật là chức năng tìm kiếm bằng hình ảnh dựa trên mô hình trí tuệ nhân tạo. Khách hàng tải ảnh sản phẩm lên thanh tìm kiếm để nhận danh sách mặt hàng tương đồng. Thuật toán phân tích vector đặc trưng ảnh để so khớp sản phẩm trong kho dữ liệu với độ chính xác cao. Trải nghiệm trực quan này tạo nên sự khác biệt rõ rệt so với các sàn thương mại điện tử đại trà hiện nay.

IV. Ứng dụng thực tiễn hệ thống thương mại điện tử AI ReactJS

Hệ thống thương mại điện tử ứng dụng AI xây dựng bằng ASP.NET và ReactJS khẳng định tính ứng dụng thực tiễn cao. Kết quả khóa luận tại Trường Đại học Sư phạm Kỹ thuật TP.HCM mở ra giải pháp số hóa toàn diện cho doanh nghiệp bán lẻ. Nền tảng không chỉ chứng minh sự kết hợp hoàn hảo giữa các công nghệ lập trình tiên tiến mà còn giải quyết bài toán trải nghiệm người dùng. Tốc độ tải trang nhanh, cơ chế tìm kiếm thị giác thông minh giúp gia tăng đáng kể tỷ lệ tương tác của khách hàng. Khả năng mở rộng linh hoạt nhờ Docker và kiến trúc API cho phép hệ thống sẵn sàng đáp ứng lưu lượng truy cập lớn trong tương lai. Doanh nghiệp vừa và nhỏ có thể dễ dàng tiếp cận giải pháp này để tiết kiệm chi phí xây dựng hạ tầng số. Dự án là minh chứng xuất sắc cho chất lượng đào tạo kỹ sư công nghệ thông tin thực chiến. Đây là tiền đề vững chắc để tiếp tục nghiên cứu các mô hình AI tạo sinh vào ngành thương mại trực tuyến.

4.1. Khả năng chuyển giao công nghệ cho doanh nghiệp bán lẻ

Nền tảng sở hữu tính khả thi cao khi triển khai tại các doanh nghiệp vừa và nhỏ. Mã nguồn được cấu trúc module rõ ràng giúp đơn giản hóa việc chuyển giao và bảo trì kỹ thuật. Các doanh nghiệp có thể dễ dàng tích hợp thêm các cổng thanh toán nội địa và đơn vị vận chuyển bên ngoài. Chi phí vận hành được tối ưu nhờ việc tận dụng công nghệ ảo hóa container Docker. Tính năng tìm kiếm hình ảnh AI cung cấp lợi thế cạnh tranh vượt trội cho các cửa hàng thời trang hoặc nội thất số. Đây là giải pháp hoàn chỉnh thúc đẩy doanh số bán lẻ trong kỷ nguyên số.

4.2. Hướng phát triển và mở rộng tính năng thông minh mới

Trong tương lai, hệ thống có thể mở rộng tích hợp các trợ lý ảo đàm thoại tự động thông minh. Việc ứng dụng công nghệ xử lý ngôn ngữ tự nhiên sẽ nâng tầm tư vấn bán hàng tức thì. Bên cạnh đó, mô hình gợi ý sản phẩm cá nhân hóa sâu có thể kết hợp thêm dữ liệu hành vi theo ngữ cảnh thực tế. Nền tảng cũng hướng tới việc kết nối mạng lưới đa kênh Omnichannel để đồng bộ tồn kho giữa cửa hàng vật lý và sàn trực tuyến. Đội ngũ phát triển dự kiến triển khai thuật toán học sâu tối ưu hơn nữa. Nghiên cứu này đặt nền móng kỹ thuật vững chắc cho việc tiếp cận thương mại thông minh.

Nội dung chính

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

Trong bối cảnh công nghệ số phát triển vượt bậc, hành vi mua sắm của người tiêu dùng có sự chuyển dịch mạnh mẽ sang môi trường trực tuyến, kéo theo yêu cầu ngày càng khắt khe về các dịch vụ thương mại điện tử tiện ích, cá nhân hóa và thông minh. Việc tích hợp các kỹ thuật trí tuệ nhân tạo (AI) vào nền tảng thương mại điện tử giúp doanh nghiệp phân tích dữ liệu hành vi khách hàng, đề xuất sản phẩm chính xác, dự đoán xu hướng tiêu dùng và tối ưu hóa quy trình vận hành. Nhận diện tính cấp thiết từ thực tiễn kinh doanh trong kỷ nguyên số, hai tác giả Phạm Thị Phương Nghi (MSSV: 21110556) và Nguyễn Việt Khoa (MSSV: 21110512), dưới sự hướng dẫn khoa học của TS. Lê Văn Vinh tại Khoa Công nghệ Thông tin – Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh (khóa 2021 – 2025, phản biện bởi ThS. Trương Thị Ngọc Phượng), đã thực hiện khóa luận tốt nghiệp kỹ sư với đề tài: "Xây dựng hệ thống thương mại điện tử ứng dụng AI và sử dụng công nghệ ASP.NET, ReactJs".

Đối tượng nghiên cứu của khóa luận tập trung vào nhu cầu mua sắm thực tế của người dùng và phương pháp triển khai hệ thống thương mại điện tử kết hợp trí tuệ nhân tạo. Về mặt công nghệ, đề tài tập trung nghiên cứu:

• Xây dựng hệ thống RESTful API bằng ASP.NET Core nhằm thao tác và truy xuất dữ liệu nhanh chóng.
• Quản trị và lưu trữ dữ liệu tập trung trên hệ quản trị cơ sở dữ liệu quan hệ Microsoft SQL Server.
• Đóng gói, triển khai toàn bộ hệ thống bằng nền tảng Docker.
• Thiết lập cơ chế bảo mật hệ thống thông qua kiểm soát luồng dữ liệu vào ra bằng JSON Web Token (JWT).
• Nghiên cứu và ứng dụng các kỹ thuật Machine Learning (ML) và Deep Learning (DL) thuộc lĩnh vực trí tuệ nhân tạo để giải quyết các bài toán chức năng thông minh.

Phạm vi nghiên cứu của đề tài bao quát hai mảng trọng tâm:

1. Phát triển đầy đủ các chức năng nghiệp vụ cốt lõi của một sàn thương mại điện tử hoàn chỉnh, bao gồm quản lý người dùng, quản trị danh mục và sản phẩm, xử lý giỏ hàng, đặt hàng, thanh toán trực tuyến, theo dõi đơn hàng, quản lý đánh giá và hệ thống thống kê báo cáo.
2. Tích hợp ba bài toán trí tuệ nhân tạo chuyên sâu vào nền tảng: trợ lý trò chuyện trực tuyến (Chatbot), phân tích cảm xúc của người dùng dựa trên nội dung đánh giá sản phẩm (Sentiment Analysis) và tìm kiếm sản phẩm thông qua dữ liệu hình ảnh (Visual Search).

Mục tiêu nghiên cứu được tác giả phân định chi tiết theo hai nhóm tác nhân chính của hệ thống:

1. Phía người mua (Customer/Guest):
   • Quản lý tài khoản: Đăng ký, đăng nhập, đăng xuất, khôi phục mật khẩu và thay đổi mật khẩu.
   • Quản lý hồ sơ: Xem, chỉnh sửa và cập nhật thông tin cá nhân cùng lịch sử đơn hàng.
   • Tương tác sản phẩm: Tìm kiếm, lọc và xem thông tin chi tiết của từng mặt hàng; lưu sản phẩm vào danh sách yêu thích.
   • Giao dịch: Thêm hoặc xóa sản phẩm khỏi giỏ hàng, tiến hành quy trình đặt hàng và thực hiện thanh toán trực tuyến; gửi phản hồi và đánh giá sản phẩm sau khi mua.
   • Tính năng thông minh: Trao đổi trực tuyến với hệ thống thông qua trợ lý ảo và tìm kiếm sản phẩm bằng cách tải lên hình ảnh.
2. Phía quản trị viên (Admin):
   • Quản trị toàn diện: Quản lý người dùng, danh mục chính, danh mục phụ, thông tin sản phẩm và các đơn hàng phát sinh trên toàn hệ thống.
   • Thống kê, báo cáo: Tổng hợp và thống kê doanh thu, lưu lượng người dùng, số lượng đơn hàng, số lượng sản phẩm và các lượt đánh giá.
   • Kiểm soát chất lượng: Phân tích cảm xúc người dùng dựa trên phản hồi đánh giá sản phẩm nhằm hỗ trợ theo dõi mức độ thỏa mãn của khách hàng và điều chỉnh hoạt động kinh doanh.

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

Khóa luận kết hợp khung lý thuyết công nghệ phần mềm hiện đại và các mô hình học máy, học sâu để xây dựng một kiến trúc hệ thống thương mại điện tử đa tầng:

[Người dùng / Trình duyệt] 
[Front-End: ReactJS / Material UI] 

Khung lý thuyết và công nghệ tác giả sử dụng bao gồm:

• Công nghệ Front-End: Thư viện ReactJS mã nguồn mở, hoạt động theo mô hình Single Page Application (SPA), sử dụng cơ chế Document Object Model ảo (Virtual DOM) và cú pháp mở rộng JSX để tối ưu hóa hiệu năng render giao diện theo thành phần (component-based) với luồng dữ liệu một chiều (props/state). Đi kèm là hệ sinh thái thư viện bổ trợ: @mui/material, styled-components, bootstrap cho thiết kế giao diện; axios phục vụ gọi RESTful API; react-router-dom điều hướng tuyến đường; react-lazy-load-image-component và react-infinite-scroll-component tối ưu hóa tốc độ tải trang; react-hot-toast và web-vitals nâng cao trải nghiệm người dùng và giám sát hiệu năng.
• Công nghệ Back-End: Nền tảng ASP.NET Core đa nền tảng (cross-platform), hỗ trợ xây dựng Web APIs hiệu năng cao, tích hợp sẵn Dependency Injection (DI) và cơ chế đóng gói NuGet packages. Hệ thống tích hợp các thư viện chuyên dụng: EntityFrameworkCore và Dapper để ánh xạ và thao tác dữ liệu; Microsoft.SqlServer quản lý kết nối CSDL; Microsoft.Identity cùng System.Jwt kiểm soát danh tính và xác thực phân quyền qua token JWT; Cloudinary xử lý và lưu trữ hình ảnh; SendGrid đảm nhiệm việc gửi thư điện tử tự động; Newtonsoft.Json hỗ trợ xử lý dữ liệu JSON.
• Cơ sở dữ liệu và hạ tầng triển khai: Hệ quản trị cơ sở dữ liệu quan hệ Microsoft SQL Server được sử dụng để quản lý toàn bộ dữ liệu nghiệp vụ, thực hiện xử lý truy vấn qua ba giai đoạn (phân tích cú pháp, ràng buộc ngữ nghĩa và tối ưu hóa thực thi). Hệ thống áp dụng nền tảng Docker (bao gồm Docker Daemon và Docker CLI) để đóng gói ứng dụng thành các container độc lập theo chu trình chuẩn: Build (tạo Docker Image từ Dockerfile) $\rightarrow$ Push (đẩy image lên registry) $\rightarrow$ Pull and Run (tải và thực thi container trên máy chủ đích).
• Mô hình và kỹ thuật Trí tuệ nhân tạo:
  • Học máy (Machine Learning): Lớp CountVectorizer trong thư viện scikit-learn biến đổi dữ liệu văn bản phản hồi thành ma trận tần suất từ (Bag-of-Words) với các siêu tham số xác định (max_features=5000, stop_words='english', ngram_range=(1, 1), min_df=1). Thuật toán phân loại xác suất Naive Bayes được áp dụng trên ma trận đặc trưng này dựa trên công thức xác suất Bayes có điều kiện $P(y|X) = \frac{P(X|y) \cdot P(y)}{P(X)}$ nhằm phân định cảm xúc tích cực hoặc tiêu cực trong bình luận của khách hàng.
  • Học sâu (Deep Learning): Mô hình ngôn ngữ Sentence-BERT (SBERT) phiên bản tiếng Việt "keepitreal/vietnamese-sbert" tải từ Hugging Face ánh xạ câu thành vector đặc trưng dạng đặc (dense vector) 768 chiều. Hàm mất mát Matryoshka Loss (Matryoshka Representation Learning) được huấn luyện để cắt giảm kích thước vector nhúng từ 768 chiều xuống các chiều nhỏ hơn (512, 256, 128, 64) mà vẫn duy trì độ chính xác, phục vụ kỹ thuật sinh tăng cường truy xuất (Retrieval Augmented Generation - RAG). Đối với xử lý thị giác máy tính, mạng nơ-ron tích chập 50 lớp ResNet50 (đào tạo trên tập dữ liệu ImageNet, ảnh đầu vào $224 \times 224$ pixel) được loại bỏ tầng fully-connected cuối cùng để hoạt động như một bộ trích xuất đặc trưng (feature extractor). Đầu ra feature map được đưa qua tầng GlobalMaxPooling2D và chuẩn hóa vector L2 Normalization.
  • Quản lý vector và triển khai API AI: Kho lưu trữ vector mã nguồn mở Chroma DB (Chroma Vector Store) được sử dụng để quản lý vector nhúng và metadata phục vụ tìm kiếm ngữ nghĩa (Semantic Search) bằng độ tương đồng cosine. Thuật toán lân cận gần nhất NearestNeighbors (KNN) được triển khai trên tệp đặc trưng featurevector để tìm ra $K$ sản phẩm tương đồng về hình ảnh. Toàn bộ các dịch vụ AI được đóng gói thành RESTful API độc lập thông qua framework FastAPI trên nền tảng Python.

Về phương pháp nghiên cứu thực tế, tác giả áp dụng:

• Phương pháp khảo sát, phân tích so sánh hiện trạng: Khảo sát thực tế 4 sàn thương mại điện tử lớn trên thị trường gồm Shopee, Lazada, Amazon và Tiki để rút ra ưu điểm, nhược điểm và mô hình ứng dụng AI thực tế.
• Phương pháp phân tích và mô hình hóa hệ thống phần mềm: Thiết lập yêu cầu chức năng, yêu cầu phi chức năng, xây dựng sơ đồ use case, đặc tả chi tiết kịch bản, thiết kế sơ đồ tuần tự (sequence diagrams) và sơ đồ thực thể kết hợp (ERD).
• Phương pháp thiết kế kỹ thuật và kiểm thử phần mềm: Cài đặt hệ thống phân tán kết hợp nhiều nền tảng công nghệ, xây dựng kế hoạch kiểm thử chức năng, xác định rủi ro và đánh giá kết quả nghiệm thu.

Thiết kế và triển khai hệ thống

Hệ thống được thiết kế theo kiến trúc phân tách rõ ràng giữa lớp hiển thị, lớp xử lý nghiệp vụ sàn TMĐT và lớp dịch vụ trí tuệ nhân tạo.

Tổng hợp thành phần công nghệ và vai trò triển khai

Phân hệ / Tầng chức năng	Công nghệ / Nền tảng áp dụng	Vai trò và nhiệm vụ cụ thể trong hệ thống
Giao diện người dùng (Front-End)	ReactJS, MUI, Styled-components, Bootstrap	Xây dựng giao diện Single Page Application, quản lý Virtual DOM, tạo trải nghiệm responsive
Xử lý nghiệp vụ chính (Back-End)	ASP.NET Core, RESTful API	Quản lý toàn bộ logic nghiệp vụ sàn thương mại điện tử, kiểm soát JWT và phân quyền
Tương tác và lưu trữ cơ sở dữ liệu	Microsoft SQL Server, EF Core, Dapper	Lưu trữ dữ liệu có cấu trúc: người dùng, sản phẩm, danh mục, đơn hàng, đánh giá
Cung cấp dịch vụ AI (AI Microservices)	FastAPI (Python)	Triển khai 3 API phục vụ truy vấn Chatbot, phân tích cảm xúc và tìm kiếm bằng hình ảnh
Trợ lý Chatbot & Tìm kiếm ngữ nghĩa	SBERT (vietnamese-sbert), Matryoshka Loss, Chroma DB	Tinh chỉnh vector nhúng cho kiến trúc RAG, lưu trữ và truy xuất vector theo ngữ nghĩa tiếng Việt
Phân tích cảm xúc đánh giá	CountVectorizer, Naive Bayes	Chuyển đổi văn bản thành ma trận Bag-of-Words (5000 chiều), phân lớp cảm xúc review
Tìm kiếm sản phẩm bằng hình ảnh	ResNet50, GlobalMaxPooling2D, KNN	Trích xuất đặc trưng ảnh $224 \times 224$, chuẩn hóa L2 và so khớp $K$ sản phẩm tương đồng
Hạ tầng và dịch vụ hỗ trợ	Docker, Cloudinary, SendGrid	Đóng gói môi trường container, lưu trữ tài nguyên đa phương tiện và gửi email tự động

Quy trình xử lý của các phân hệ trí tuệ nhân tạo

1. Phân hệ Trợ lý trò chuyện trực tuyến (Chatbot RAG): Khi người dùng gửi câu hỏi qua khung chat, chuỗi văn bản được đưa đến dịch vụ API của FastAPI. Mô hình keepitreal/vietnamese-sbert tiến hành vector hóa truy vấn thành dense vector. Hệ thống sử dụng mô hình nhúng đã được huấn luyện với Matryoshka Loss để tối ưu không gian chiều dữ liệu, thực hiện tìm kiếm ngữ nghĩa (Semantic Search) trên Chroma Vector Store nhằm trích xuất các thông tin tài liệu có độ tương đồng cosine cao nhất, từ đó kết hợp trong quy trình Retrieval Augmented Generation (RAG) để trả lời người dùng một cách chính xác.
2. Phân hệ Phân tích cảm xúc dữ liệu bình luận: Dữ liệu đánh giá từ khách hàng được thu thập và đưa vào pipeline xử lý. Lớp CountVectorizer tiến hành bóc tách từ, loại bỏ stop words tiếng Anh, thiết lập ngưỡng xuất hiện tối thiểu min_df=1, giới hạn kích thước từ điển ở mức max_features=5000 theo dạng unigram (ngram_range=(1, 1)). Ma trận Bag-of-Words thu được được đưa vào mô hình Naive Bayes đã huấn luyện để tính toán xác suất tiên nghiệm và xác suất có điều kiện, từ đó xác định nhãn cảm xúc của bình luận và gửi kết quả về giao diện quản trị viên.
3. Phân hệ Đề xuất sản phẩm dựa trên hình ảnh: Ảnh sản phẩm do người dùng tải lên được chuẩn hóa về kích thước $224 \times 224$ pixel. Mạng ResNet50 đóng vai trò trích xuất các đặc trưng thị giác từ các tầng tích chập sâu. Khối GlobalMaxPooling2D giảm chiều không gian trên hai trục cao và rộng, chuyển đổi feature map thành vector đặc trưng. Sau khi qua tầng chuẩn hóa L2 Normalization, vector ảnh truy vấn được thuật toán NearestNeighbors (KNN) so khớp khoảng cách với toàn bộ vector đặc trưng lưu trữ trong tệp featurevector, từ đó trả về danh sách $K$ sản phẩm có độ tương đồng ngoại quan cao nhất.

Thiết kế kiểm thử hệ thống

Quy trình kiểm thử được thiết lập theo kế hoạch cụ thể tại Chương 4 của khóa luận, bao gồm:

• Xác định phạm vi kiểm thử: Toàn bộ các ca sử dụng dành cho khách, người mua (Customer), quản trị viên (Admin) và độ chính xác của các API tích hợp AI.
• Phân loại kiểm thử: Kiểm thử chức năng (Functional Testing) trên từng use case cụ thể (đăng ký, đăng nhập, đặt hàng, thanh toán, quản trị danh mục, phân tích cảm xúc, tìm kiếm ảnh).
• Quản lý rủi ro và hậu cần kiểm thử: Phân tích các rủi ro liên quan đến sự cố đường truyền, khác biệt môi trường thực thi, lỗi tương thích giữa API AI viết bằng Python và hệ thống Back-End ASP.NET Core, cùng quy trình kiểm tra phản hồi đầu cuối trước khi nghiệm thu.

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 chi tiết nền tảng công nghệ và lý thuyết toán học phục vụ xây dựng hệ thống:

• Phía Front-End: Phân tích kiến trúc của thư viện ReactJS, cấu trúc Virtual DOM, cơ chế truyền dữ liệu một chiều qua props, quản lý state và cú pháp JSX. Tác giả liệt kê các thư viện giao diện và tối ưu hiệu năng như @mui/material, styled-components, bootstrap, axios, react-router-dom, react-lazy-load-image-component, react-infinite-scroll-component, react-hot-toast và web-vitals.
• Phía Back-End: Trình bày các đặc điểm cốt lõi của framework ASP.NET Core, cơ chế Dependency Injection, khả năng tối ưu hóa HTTP request và hỗ trợ cross-platform. Tác giả làm rõ nguyên lý hoạt động của SQL Server qua ba bước (phân tích cú pháp, kiểm tra ràng buộc, tối ưu hóa truy vấn). Tiếp đó, công nghệ Docker được phân tích qua cấu trúc Docker Engine (Docker Daemon, Docker CLI), Docker Container và quy trình thực thi 3 bước: Build $\rightarrow$ Push $\rightarrow$ Pull and Run. Các thư viện phụ trợ gồm Cloudinary, EntityFrameworkCore, Dapper, Microsoft.Identity, System.Jwt, SendGrid và Newtonsoft.Json.
• Kỹ thuật Trí tuệ nhân tạo: Giới thiệu khái niệm AI, Machine Learning và Deep Learning. Trình bày chi tiết cơ chế tạo ma trận Bag-of-Words bằng CountVectorizer (các tham số max_features=5000, stop_words='english', ngram_range=(1, 1), min_df=1) và công thức xác suất của thuật toán Naive Bayes. Về học sâu, chương này làm rõ cơ chế tạo vector 768 chiều của Sentence-BERT (mô hình "keepitreal/vietnamese-sbert"), kỹ thuật rút gọn chiều vector qua Matryoshka Loss (cắt xuống 512, 256, 128, 64), quy trình Fine-tune Embedding cho RAG, kiến trúc mạng ResNet50, cơ chế gộp GlobalMaxPooling2D, kỹ thuật L2 Normalization, hệ thống lưu trữ vector Chroma DB và framework FastAPI.

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

Chương này thực hiện phân tích thực tế và xác lập các đặc tả kỹ thuật cho hệ thống:

• Khảo sát hiện trạng 4 nền tảng thương mại điện tử:
  • Shopee: Phân tích các tính năng chính (Marketplace, gợi ý sản phẩm, ShopeePay, Shopee Live) và ứng dụng AI (cá nhân hóa, tự động hóa quảng cáo, chống gian lận). Nhược điểm được chỉ ra là chất lượng hàng không đồng đều, hỗ trợ khách hàng hạn chế và chưa tích hợp chatbot hiệu quả.
  • Lazada: Đánh giá chức năng mua bán, Flash Sale, LazLive; các ứng dụng AI trong tối ưu tìm kiếm, chatbot, dự báo doanh thu. Nhược điểm gồm khó kiểm soát gian lận và nhiều quảng cáo che lấp nội dung.
  • Amazon: Phân tích hệ thống tìm kiếm xử lý dữ liệu lớn, thành viên Prime, hạ tầng phân tán chịu tải cao; các công nghệ AI tiên tiến như trợ lý Alexa, hệ thống Amazon Go, Prime Air. Nhược điểm là độ phức tạp cao khi tích hợp với Marketplace đối với nhà phát triển bên ngoài và chi phí Prime.
  • Tiki: Đánh giá thế mạnh giao hàng nhanh TikiNOW, giao diện phù hợp với người dùng Việt Nam; các ứng dụng AI trong dự báo nhu cầu và cá nhân hóa. Nhược điểm là bộ lọc tìm kiếm đôi khi thiếu chính xác và chưa đa dạng thanh toán quốc tế.
• Xác định yêu cầu:
  • Yêu cầu chức năng: Lưu trữ thông tin người dùng, sản phẩm, giỏ hàng, đơn hàng, bình luận; quản lý tài khoản, danh mục, trạng thái đơn hàng; tra cứu theo từ khóa, hình ảnh và bộ lọc; thống kê doanh thu và báo cáo phân tích cảm xúc từ đánh giá.
  • Yêu cầu phi chức năng: Tốc độ tìm kiếm nhanh và chính xác; bảo mật dữ liệu người dùng, sản phẩm qua token; thời gian phản hồi hệ thống tối ưu; giao diện thân thiện với người dùng.
• Mô hình hóa yêu cầu: Xây dựng sơ đồ Use Case tổng thể cho Customer và Admin; lập bảng đặc tả chi tiết từng use case, tiêu biểu như Đăng ký (UC-1.1), Đăng nhập (UC-1.2), Tìm kiếm và xem sản phẩm (UC-1.3) và Đăng xuất (UC-2.1) cùng các luồng sự kiện chính, phụ và ngoại lệ.

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

Chương này hiện thực hóa các yêu cầu thành mô hình kiến trúc và dữ liệu:

• Lược đồ tuần tự (Sequence Diagram): Mô tả chi tiết tiến trình tương tác của hàng loạt ca sử dụng quan trọng: Đăng nhập (Sign in), Tìm kiếm sản phẩm (Search products), Đăng xuất (Sign out), Khôi phục mật khẩu (Recover password), Thay đổi mật khẩu (Change password), Chỉnh sửa thông tin cá nhân (Change Profile), Quản lý đơn hàng của tài khoản (Orders), Thêm/xóa sản phẩm khỏi giỏ hàng, Đặt hàng (Order), Thanh toán (Payment), Đánh giá sản phẩm (Review Products), Thêm/sửa/xóa sản phẩm, Thêm/sửa/xóa danh mục chính và danh mục phụ, Thống kê (Statisticize), Trao đổi trực tuyến (Chat), Phân tích cảm xúc dựa trên phản hồi người dùng.
• Thiết kế cơ sở dữ liệu: Xây dựng lược đồ thực thể kết hợp (ERD) và thiết kế chi tiết các bảng dữ liệu quan hệ trên SQL Server.
• Triển khai kỹ thuật AI vào ứng dụng: Trình bày quy trình hoạt động của phương pháp Fine-tune Embedding cho RAG; thiết kế API Truy vấn Chat; phân tích quy trình xử lý bài toán cảm xúc bình luận và xây dựng API Phân tích dữ liệu bình luận; thiết kế API đề xuất sản phẩm dựa trên hình ảnh qua mô hình ResNet50 kết hợp KNN.
• Thiết kế giao diện: Xây dựng sơ đồ luồng màn hình và thiết kế chi tiết hàng chục giao diện cho người dùng (Đăng ký, Đăng nhập, Trang chủ, Chi tiết sản phẩm, Giỏ hàng, Đặt hàng, Thanh toán, Danh sách yêu thích, Trao đổi trực tuyến, Tìm kiếm bằng hình ảnh) và giao diện dành cho quản trị viên (Dashboard, Quản lý sản phẩm, Quản lý danh mục chính/phụ, Quản lý đơn hàng hệ thống, Quản lý banner quảng cáo, Màn hình phân tích cảm xúc phản hồi).

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

Chương này mô tả quá trình hiện thực hóa giải pháp và kiểm chứng chất lượng:

• Thiết lập yêu cầu hệ thống và quy trình các bước tiến hành triển khai các dịch vụ nguồn.
• Xây dựng kế hoạch kiểm thử phần mềm chi tiết: xác định phạm vi kiểm thử, lựa chọn các loại kiểm thử (chức năng, tích hợp API), đánh giá các rủi ro kỹ thuật tiềm ẩn, phân bổ logistics kiểm thử và vận hành quy trình kiểm thử từng bước.
• Tổng hợp kết quả kiểm thử các ca sử dụng trên thực tế (kết quả kiểm thử đạt được tại trang 139 của tài liệu).

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

Về kết quả thực tiễn, đề tài đã thiết kế và triển khai thành công một hệ sinh thái thương mại điện tử hoàn chỉnh, tích hợp đa dạng công nghệ từ front-end đến back-end và các mô hình trí tuệ nhân tạo chuyên biệt:

• Xây dựng thành công ứng dụng web thương mại điện tử với giao diện người dùng tương tác bằng ReactJS, hệ thống API xử lý nghiệp vụ trung tâm bằng ASP.NET Core kết nối cơ sở dữ liệu Microsoft SQL Server và hỗ trợ đóng gói qua Docker.
• Hiện thực hóa thành công ba chức năng trí tuệ nhân tạo thông qua dịch vụ API viết bằng FastAPI:
  1. Tính năng trợ lý ảo (Chatbot) ứng dụng mô hình ngôn ngữ tiếng Việt keepitreal/vietnamese-sbert, kết hợp hàm mất mát Matryoshka Loss (cho phép tối ưu kích thước biểu diễn vector từ 768 xuống 512, 256, 128, 64) và cơ sở dữ liệu vector Chroma DB để thực hiện kỹ thuật RAG phục vụ trao đổi trực tuyến.
  2. Tính năng phân tích cảm xúc đánh giá sản phẩm sử dụng kỹ thuật trích xuất đặc trưng CountVectorizer (cấu hình ma trận Bag-of-Words 5000 đặc trưng, lọc stop words) kết hợp thuật toán phân lớp xác suất Naive Bayes giúp quản trị viên theo dõi sắc thái phản hồi của người tiêu dùng.
  3. Tính năng tìm kiếm sản phẩm bằng hình ảnh sử dụng mạng nơ-ron tích chập ResNet50 làm bộ trích xuất đặc trưng (ảnh đầu vào chuẩn hóa $224 \times 224$), tầng GlobalMaxPooling2D, kỹ thuật chuẩn hóa L2 Normalization và thuật toán NearestNeighbors (KNN) trên tệp featurevector.

Về mặt đóng góp so với các nghiên cứu và ứng dụng trước đây:

• Đề tài đã tự tích hợp trực tiếp các mô hình AI mã nguồn mở giải quyết các bài toán tiếng Việt cụ thể (như vietnamese-sbert cho RAG) thay vì chỉ xây dựng các hệ thống thương mại điện tử thuần túy dựa trên các chức năng CRUD cơ bản.
• Kết hợp kiến trúc microservice giữa ASP.NET Core và Python FastAPI, tạo ra mô hình tích hợp linh hoạt giữa một backend quản trị doanh nghiệp truyền thống và các dịch vụ tính toán học máy hiệu năng cao.
• Mang lại giá trị ứng dụng thực tiễn cho doanh nghiệp trong việc tự động hóa dịch vụ chăm sóc khách hàng trực tuyến, tối ưu hóa việc phân loại phản hồi thị trường và mở rộng phương thức tìm kiếm sản phẩm thông qua hình ảnh thực tế.

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

Khóa luận ghi nhận một số hạn chế nhất định do điều kiện triển khai thực tế:

• Đề tài được thực hiện trong khoảng thời gian tương đối ngắn; nhóm tác giả tự nhận định còn nhiều hạn chế về mặt kiến thức chuyên sâu và kinh nghiệm triển khai thực tế, dẫn đến sản phẩm vẫn còn những thiếu sót trong quá trình vận hành.
• Khóa luận chưa cung cấp các bảng số liệu đo lường định lượng chi tiết về hiệu năng mô hình (như chỉ số Accuracy, Precision, Recall, F1-score của mô hình Naive Bayes, hay thời gian đáp ứng trung bình tính bằng mili-giây của hệ thống RAG và mô hình tìm kiếm ảnh).
• Phạm vi dữ liệu thử nghiệm cho mô hình tìm kiếm hình ảnh và chatbot tiếng Việt chủ yếu phục vụ trong khuôn khổ đồ án tốt nghiệp, chưa được kiểm chứng trên các tập dữ liệu có quy mô hàng triệu sản phẩm như các sàn thương mại điện tử thực tế.

Các hướng phát triển tiếp theo được đề xuất bao gồm:

• Tiếp tục khắc phục các nhược điểm còn tồn đọng trong các luồng tương tác và giao diện người dùng.
• Mở rộng và nâng cấp các mô hình trí tuệ nhân tạo, cải thiện độ chính xác của bộ phân tích cảm xúc tiếng Việt và tối ưu hóa tốc độ truy xuất vector nhúng trong kiến trúc RAG.
• Hoàn thiện thêm các chức năng nâng cao phục vụ cho sàn thương mại điện tử như đề xuất sản phẩm dựa trên hành vi duyệt web cá nhân hóa và tích hợp đa dạng hơn các cổng thanh toán điện tử.

Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo hữu ích cho:

• Sinh viên các ngành Công nghệ Thông tin, Kỹ thuật Phần mềm và Khoa học Dữ liệu có định hướng nghiên cứu đề tài tốt nghiệp kết hợp giữa phát triển ứng dụng Web Fullstack và tích hợp Trí tuệ nhân tạo.
• Các nhà phát triển phần mềm cần tài liệu hướng dẫn mẫu về cách tích hợp dịch vụ Back-End bằng ASP.NET Core với các dịch vụ Microservice AI chạy bằng FastAPI (Python).
• Người học quan tâm đến quy trình triển khai thực tế của các kỹ thuật AI: từ việc trích xuất đặc trưng ảnh bằng ResNet50 kết hợp KNN, kỹ thuật xử lý văn bản bằng CountVectorizer và Naive Bayes, cho đến việc áp dụng mô hình SBERT tiếng Việt, Matryoshka Representation Loss và Chroma DB trong kiến trúc RAG.
• Tài liệu cũng có giá trị tham khảo tốt về phương pháp luận thiết kế hệ thống thông tin qua các bước mô hình hóa Use Case, đặc tả kịch bản, vẽ Sequence Diagram và lập kế hoạch kiểm thử phần mềm bài bản.

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

1. Hệ thống sử dụng mô hình học sâu nào để trích xuất đặc trưng cho chức năng tìm kiếm sản phẩm bằng hình ảnh?

Hệ thống sử dụng mạng nơ-ron tích chập 50 lớp ResNet50 đã được huấn luyện trước trên tập dữ liệu ImageNet, loại bỏ lớp fully-connected cuối cùng để đóng vai trò làm bộ trích xuất đặc trưng (feature extractor) trên ảnh kích thước $224 \times 224$ pixel. Đầu ra feature map được giảm chiều không gian thông qua tầng GlobalMaxPooling2D, sau đó được chuẩn hóa bằng kỹ thuật L2 Normalization trước khi dùng thuật toán NearestNeighbors (KNN) so khớp khoảng cách trên cơ sở dữ liệu featurevector.

2. Trong bài toán phân tích cảm xúc từ đánh giá của người dùng, tác giả áp dụng mô hình và kỹ thuật tiền xử lý văn bản nào?

Tác giả sử dụng kỹ thuật CountVectorizer trong thư viện scikit-learn để chuyển đổi văn bản đánh giá thành ma trận tần suất từ (Bag-of-Words) với các tham số: max_features=5000 (giới hạn từ điển 5000 đặc trưng), stop_words='english', cấu hình unigram ngram_range=(1, 1) và min_df=1. Sau đó, mô hình phân lớp xác suất Naive Bayes được áp dụng để tính toán xác suất và phân định cảm xúc người dùng.

3. Cơ chế tìm kiếm ngữ nghĩa và phản hồi của tính năng Chatbot được xây dựng dựa trên những công nghệ nào?

Tính năng Chatbot sử dụng mô hình Sentence-BERT phiên bản tiếng Việt "keepitreal/vietnamese-sbert" để tạo vector nhúng 768 chiều. Mô hình được áp dụng hàm mất mát Matryoshka Loss nhằm tối ưu vector nhúng ở nhiều cấp kích thước (từ 768 xuống 512, 256, 128, 64) phục vụ bài toán RAG (Retrieval Augmented Generation). Dữ liệu vector và metadata được quản lý trong cơ sở dữ liệu vector mã nguồn mở Chroma DB (Chroma Vector Store) và cung cấp qua API FastAPI.

4. Hệ thống phân chia kiến trúc kỹ thuật giữa phần mềm thương mại điện tử và các tác vụ AI như thế nào?

Hệ thống phân chia kiến trúc thành hai mảng dịch vụ riêng biệt: Hệ thống thương mại điện tử chính sử dụng ReactJS ở Front-End và ASP.NET Core ở Back-End, kết nối cơ sở dữ liệu quan hệ Microsoft SQL Server để xử lý toàn bộ các giao dịch và nghiệp vụ bán hàng. Trong khi đó, các tác vụ AI (tìm kiếm ảnh, phân tích cảm xúc, chatbot RAG) được tách thành một dịch vụ riêng biệt viết bằng ngôn ngữ Python, triển khai qua framework FastAPI và giao tiếp với hệ thống Back-End chính thông qua giao thức RESTful API.

5. Nhóm tác giả đã tiến hành khảo sát hiện trạng những nền tảng thương mại điện tử nào trước khi xây dựng hệ thống?

Tại Chương 2 của khóa luận, nhóm tác giả đã tiến hành khảo sát hiện trạng và phân tích chi tiết ưu điểm, nhược điểm cùng các ứng dụng AI thực tế của 4 nền tảng thương mại điện tử lớn gồm: Shopee, Lazada, Amazon và Tiki.

Kết luận

Khóa luận tốt nghiệp của sinh viên Phạm Thị Phương Nghi và Nguyễn Việt Khoa đã hoàn thành việc thiết kế và xây dựng một hệ thống thương mại điện tử hoàn chỉnh, kết hợp đồng bộ giữa công nghệ web hiện đại (ReactJS, ASP.NET Core, SQL Server, Docker) và các mô hình trí tuệ nhân tạo chuyên biệt (ResNet50, Naive Bayes, SBERT kết hợp RAG). Báo cáo cung cấp quy trình phân tích, thiết kế, triển khai và kiểm thử phần mềm một cách bài bản, rõ ràng từ mức đặc tả ca sử dụng đến cài đặt kiến trúc microservice. Đây là một tài liệu học thuật có giá trị tham khảo thực tiễn cao cho sinh viên và kỹ sư phần mềm quan tâm đến việc ứng dụng các giải pháp học máy và học sâu vào nền tảng thương mại điện tử.

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

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT – END 1. Khái niệm React (ReactJS) là một thư viện JavaScript mã nguồn mở, được dùng để xây dựng giao diện người dùng (frontend) cho web. React chỉ tập trung vào phần hiển thị giao diện (view), chứ không can thiệp vào cách sắp xếp logic nghiệp vụ hoặc cấu trúc ứng dụng.

ReactJS giúp phân chia các UI phức tạp thành các thành phần nhỏ (được gọi là component). Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook. ReactJS ban đầu được phát triển và duy trì bởi Facebook và sau đó được sử dụng trong các sản phẩm của mình như WhatsApp & Instagram. ReactJS được dùng để xây dựng các ứng dụng - single page application (SPA).

Một trong những điểm thú vị của ReactJS là nó không chỉ được xây dựng bên phía clients mà còn được sử dụng trên server và có thể kết nối với nhau. ReactJS so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. Virtual DOM (Document Object Model ảo) là một bản sao nhẹ hơn của DOM thật. DOM thật là cấu trúc cây chứa tất cả các thành phần HTML trong trang web.

Khi người dùng tương tác với ứng dụng (ví dụ: nhập văn bản, nhấn nút), ứng dụng sẽ thay đổi nội dung và DOM thật phải được cập nhật. Tuy nhiên, việc cập nhật trực tiếp DOM thật có thể gây ra tình trạng chậm chạp và kém hiệu quả, đặc biệt trong các ứng dụng lớn với nhiều phần tử. Để giải quyết vấn đề này, React sử dụng Virtual DOM, với mục đích chỉ những phần có sự thay đổi mới được cập nhật lên DOM thật, giúp tiết kiệm thời gian và tài nguyên 4 Hình 1. Virtual DOM trong ReactJS [1] JSX (JavaScript XML) là một cú pháp mở rộng cho phép viết mã giống như HTML trong JavaScript.

Với JSX, React cho phép kết hợp code HTML và JavaScript trong cùng một mã nguồn, giúp quản lý dễ dàng hơn, đặc biệt là trong các ứng dụng có độ phức tạp cao. Trong React, dữ liệu được quản lý và luân chuyển theo hướng từ component cha xuống component con. Các component cha có thể truyền dữ liệu cho component con thông qua props, nhưng các component con không thể trực tiếp thay đổi dữ liệu của component cha. Nếu muốn thay đổi dữ liệu, component con sẽ kích hoạt một hành động hoặc sự kiện (như nhấn nút), và component cha sẽ là nơi xử lý thay đổi dữ liệu đó.

Với các đặc điểm ở trên, ReactJS dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi đó ReactJS sẽ rất hữu ích để sử dụng 1.

Ưu điểm ReactJS cho phép lập trình viên làm việc trực tiếp trên JavaScript, đồng thời tích hợp JSX – một tính năng độc đáo giúp việc phát triển ứng dụng trở nên trực quan và thú vị hơn. JSX cho phép chèn trực tiếp HTML vào JavaScript, giúp lập trình viên tạo mới các tính năng và xem kết quả hiển thị theo thời gian thực một cách dễ dàng. 5 ReactJS chia nhỏ các giao diện phức tạp thành các component độc lập. Điều này không chỉ giảm tải cho việc quản lý toàn bộ ứng dụng, mà còn giúp nhà phát triển tập trung vào từng phần nhỏ, đảm bảo mỗi component được xây dựng rõ ràng và có thể tái sử dụng.

ReactJS hỗ trợ Props (properties), cho phép truyền dữ liệu tùy chỉnh giữa các component. Nhờ đó, các component có thể tương tác linh hoạt với nhau, đảm bảo việc chuyển dữ liệu và xây dựng giao diện theo yêu cầu một cách hiệu quả. Tính năng State giúp nhà phát triển quản lý trạng thái của các component trong ứng dụng một cách dễ dàng. Khi dữ liệu ở component gốc (parent) thay đổi, các component con (child) cũng được cập nhật mà không làm ảnh hưởng đến trạng thái ban đầu.

Điều này mang lại sự linh hoạt và giảm thiểu rủi ro trong việc điều chỉnh giao diện phức tạp. ReactJS sử dụng DOM ảo (Virtual DOM) để tăng tốc độ ứng dụng. Virtual DOM theo dõi các thay đổi dữ liệu và chỉ cập nhật các phần tử cần thiết thay vì render lại toàn bộ DOM thực. Điều này giúp cải thiện hiệu suất ứng dụng, tiết kiệm tài nguyên và mang lại trải nghiệm mượt mà cho người dùng.

Ứng dụng ReactJS với cấu trúc UI tốt hơn giúp nâng cao tương tác, tỷ lệ nhấp chuột (click rate), và tỷ lệ chuyển đổi (conversion rate). Điều này đặc biệt quan trọng trong việc thu hút và giữ chân khách hàng trên các nền tảng trực tuyến. Hiệu suất ứng dụng khi sử dụng ReactJS được cải thiện đáng kể nhờ khả năng hạn chế việc cập nhật DOM, tăng tốc độ tải trang và nâng cao trải nghiệm người dùng. Đây là yếu tố quan trọng giúp doanh nghiệp tối ưu hóa vận hành và nâng cao khả năng cạnh tranh.

ReactJS hỗ trợ tốt cho việc render phía server (SSR - Server-Side Rendering), đồng thời tối ưu hóa các thao tác phía client. Điều này giúp ứng dụng đạt được tốc độ phản hồi nhanh, cải thiện SEO và tăng khả năng tiếp cận người dùng. Với cấu trúc rõ ràng, dễ tùy chỉnh và khả năng tái sử dụng component, ReactJS giúp giảm đáng kể chi phí bảo trì hệ thống. Doanh nghiệp có thể tận dụng lợi thế này để triển khai các tính năng mới nhanh chóng, đồng thời đảm bảo chất lượng sản phẩm.

Các thư viện hỗ trợ khác Một số thư viện hỗ trợ cho việc xây dựng website ở phía Front-End: 6 - Các thư viện @mui/material, styled-components và bootstrap dùng để thiết kế UI hiện đại và responsive - Axios hỗ trợ gọi API - React-router-dom quản lý tuyến đường - React-lazy-load-image-component và react-infinite-scroll-component tối ưu hóa hiệu năng - React-hot-toast và web-vitals cải thiện trải nghiệm người dùng và hiệu năng. CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK – END 1.NET Core ASP.NET Core là một open-source và framework đa nền tảng (cross-platform) cho việc xây dựng những ứng dụng hiện tại dựa trên kết nối đám mây, giống như web apps, IoT và backend cho mobile. Ứng dụng ASP.NET Core có thể chạy trên .NET Core hoặc trên phiên bản đầy đủ của. Nó được thiết kế để cung cấp và tối ưu development framework cho những ứng dụng được triển khai trên đám mây (cloud) hoặc chạy on-promise.NET Core bao gồm các thành phần theo hướng module nhằm tối thiểu tài nguyên và chi phí phát triển.

Đồng thời nó có thể phát triển và chạy những ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux.NET Core ra đời giúp hỗ trợ các tính năng cho .NET Framework như Windows Forms, WPF.NET Core có thể hoạt động trên bất kỳ nền tảng nào mà đảm bảo có thể khắc phục được những hạn chế của .NET Framework – chạy duy nhất trên nền tảng Windows.NET Core được thiết kế để tối ưu và cung cấp tốt cho các Development Framework triển khai trên đám mây hoặc chạy on-promise. Về cơ bản, ASP.NET Core được tạo thành từ một thư viện bản Net.0 có thể chạy ở bất cơ nào mà nó có thể hỗ trợ được. Đồng thời, ASP.NET Core trở thành một mã nguồn mở. Đây là sự thay đổi lớn và vô cùng quan trọng mà trước đây khó có lập trình viên nào nghĩ đến.

Chính vì thế, ASP.NET Core thu hút đông đảo các lập trình viên sử dụng để xây dựng các trang web. Những điểm nổi bật làm nên sức mạnh của ASP.NET Core: - Tích hợp linh hoạt giữa Web UI và Web APIs - Tích hợp những client-side frameworks hiện đại và những luồng phát triển - Hệ thống cấu hình mạnh mẽ dựa trên môi trường đám mây 7 - Dependency Injection tích hợp sẵn - HTTP request được tối ưu nhẹ hơn - Cho phép host trên IIS hoặc self-host trong process - Hỗ trợ app versioning và .NET Core - Triển khai các thực thể như NuGet Packages - Công cụ hiện đại cho phát triển web - Xây dựng và chạy đa nền tảng (Windows, Mac và Linux) - Mã nguồn mở và cộng đồng mạnh mẽ Hình 1. Khái niệm SQL Server hay Microsoft SQL Server là một hệ thống quản trị cơ sở dữ liệu quan hệ (Relational Database Management System – RDBMS) được phát triển bởi Microsoft vào năm 1988. Nó được sử dụng để tạo, duy trì, quản lý và triển khai hệ thống RDBMS.

Được thiết kế để quản lý và lưu trữ dữ liệu, SQL Server cho phép người dùng truy vấn, thao tác và quản lý dữ liệu một cách hiệu quả và an toàn. SQL Server là một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất trên thế giới và được sử dụng rộng rãi trong các doanh nghiệp. Cách thức hoạt động của SQL Server Truy vấn sẽ được xử lý qua ba giai đoạn chính là: - Phân tích cú pháp là quá trình kiểm tra cú pháp truy vấn đã đúng chưa. 8 - Ràng buộc là quy trình kiểm tra ngữ nghĩa của truy vấn đảm bảo tính chính xác và xác định dữ liệu một cách hiệu quả nhất.

- Quá trình tối ưu hoá là tạo các kế hoạch triển khai và thực hiện truy vấn quan trọng để trích xuất cơ sở dữ liệu từ hệ thống. Trong bước này, người dùng có thể tạo ra toàn bộ hoán vị và kết hợp để tìm ra phương án thực hiện truy vấn tối ưu nhất. Thời gian càng ngắn thì truy vấn càng hiệu quả và kết quả càng khả quan. Ưu điểm Một số ưu điểm nổi bật của SQL Server: - Truy xuất một lượng lớn dữ liệu nhanh chóng và hiệu quả.

Dễ dàng thực hiện các thao tác như chèn, xóa, cập nhật dữ liệu. - Không cần số lượng dòng mã lớn để truy xuất dữ liệu. Các từ khóa như SELECT, INSERT INTO, UPDATE,. cũng được sử dụng; các quy tắc cú pháp trong SQL cũng khá đơn giản, thân thiện với người dùng.

- Cung cấp một nền tảng thống nhất trên toàn cầu cho mọi người dùng. - Được sử dụng trên PC, laptop, máy chủ có hệ điều hành như Windows, macOS, Linux,. Đồng thời cũng có thể được nhúng với các ứng dụng khác. - Dễ học, có thể nhận được phản hồi cho các truy vấn phức tạp chỉ trong vài giây.

Nhược điểm Một số nhược điểm của SQL Server - Giao diện phức tạp - Một số phiên bản có giá khá cao. - Người dùng không được kiểm soát hoàn toàn cơ sở dữ liệu do một số quy tắc nghiệp vụ ẩn. Khái niệm Docker là một nền tảng mã nguồn mở giúp đơn giản hóa quy trình xây dựng (build), triển khai (deploy) và chạy (run) ứng dụng thông qua việc sử dụng các container.