Xây dựng App bán giày thể thao bằng React Native, NodeJS, ExpressJS, MongoDB

Đồ án tốt nghiệp: Xây dựng app bán giày thể thao bằng React Native, NodeJS - ĐH Sư phạm Kỹ thuật TP.HCM

• Tác giả: Lã Thiên Phúc
• Người hướng dẫn: ThS. Nguyễn Hữu Trung
• 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 App bán giày thể thao bằng React Native, NodeJS, ExpressJS, MongoDB
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan đề tài app bán giày thể thao bằng React Native

Thương mại điện tử trên thiết bị di động tăng trưởng rất nhanh. Người tiêu dùng ưu tiên trải nghiệm mua sắm trực tuyến tiện lợi. Đồ á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 tập trung vào việc nghiên cứu hệ thống này. Đề tài tập trung xây dựng app bán giày thể thao bằng React Native hoàn chỉnh. Khóa luận do sinh viên Lã Thiên Phúc và Nguyễn Mai Tiên thực hiện dưới sự hướng dẫn của ThS. Nguyễn Hữu Trung. Đề tài kết hợp đồng bộ nền tảng di động với hệ thống quản trị chuyên sâu. Công nghệ chủ đạo bao gồm React Native ở tầng giao diện người dùng. Tầng xử lý logic nghiệp vụ sử dụng máy chủ Node.js và Express.js. Cơ sở dữ liệu MongoDB đảm bảo lưu trữ thông tin linh hoạt. Mục tiêu nghiên cứu giải quyết nhu cầu hiển thị mẫu mã giày đa dạng, đồng bộ dữ liệu kích cỡ và màu sắc tức thì. Kiến trúc hướng đến tính tương thích cao trên cả hệ điều hành Android và iOS. Mã nguồn xây dựng chuẩn mực tạo nền móng vững chắc cho mô hình bán lẻ giày thể thao hiện đại.

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

Bộ môn Công nghệ phần mềm thuộc Khoa Công nghệ Thông tin luôn định hướng sinh viên tiếp cận các bài toán thực tiễn. Sinh viên thực hiện đề tài tốt nghiệp khóa 2020 – 2024 nhằm tạo ra phần mềm có giá trị ứng dụng cao. Thị trường giày thể thao trực tuyến đòi hỏi ứng dụng phải cập nhật liên tục các bộ sưu tập mới. Người dùng cần tra cứu sản phẩm nhanh chóng, thao tác đặt hàng tức thì. Đồ án xây dựng app bán giày thể thao bằng React Native ra đời từ chính bối cảnh này. Đề tài chứng minh năng lực thiết kế phần mềm độc lập của sinh viên kỹ sư. Toàn bộ quy trình từ phân tích nghiệp vụ, thiết kế ca sử dụng đến cài đặt hệ thống đều tuân thủ chặt chẽ tiêu chuẩn học thuật của nhà trường.

1.2. Mục tiêu kỹ thuật của hệ thống thương mại điện tử chuyên biệt

Hệ thống đặt ra mục tiêu xây dựng một ứng dụng di động thương mại điện tử hoàn chỉnh. Ứng dụng cung cấp các chức năng duyệt danh mục sản phẩm, tìm kiếm thông minh và lọc theo tiêu chí cụ thể. Khách hàng dễ dàng quản lý giỏ hàng, cập nhật nhiều địa chỉ nhận hàng và theo dõi tình trạng đơn hàng. Phía quản trị viên sở hữu giao diện quản lý toàn diện. Các tính năng bao gồm thêm mới sản phẩm, điều chỉnh biến thể màu sắc, kiểm soát số lượng size và duyệt đơn hàng. Hệ thống tích hợp bảng thống kê doanh thu chi tiết theo ngày hoặc mốc thời gian tùy chỉnh. Kiến trúc bảo mật phân quyền nghiêm ngặt giữa người dùng cuối và quản trị viên hệ thống.

II. Thách thức phát triển app bán giày thể thao bằng React Native

Xây dựng ứng dụng bán hàng thời trang thể thao đòi hỏi xử lý nhiều yêu cầu kỹ thuật phức tạp. Sản phẩm giày thường sở hữu nhiều biến thể kích cỡ, màu sắc và kiểu dáng khác nhau. Điều này gây khó khăn lớn trong việc thiết kế mô hình dữ liệu quan hệ truyền thống. Hiệu năng ứng dụng di động dễ bị suy giảm nếu xử lý hình ảnh sản phẩm phân giải cao thiếu tối ưu. Trải nghiệm người dùng trên thiết bị di động yêu cầu tốc độ phản hồi phải diễn ra gần như tức thì. Việc đồng bộ hóa dữ liệu giỏ hàng, thông tin khuyến mãi và tình trạng kho hàng đòi hỏi logic chặt chẽ. Bên cạnh đó, các cuộc gọi API giữa ứng dụng di động và máy chủ backend cần đảm bảo độ trễ thấp nhất. Nếu không có giải pháp middleware phù hợp, máy chủ rất dễ rơi vào tình trạng quá tải khi lượng truy cập tăng vọt. Sự thiếu cấu trúc mặc định trong ExpressJS cũng đặt ra thách thức về việc tổ chức mã nguồn bài bản khi quy mô dự án mở rộng liên tục.

2.1. Phức tạp trong xử lý thuộc tính size màu và quản lý tồn kho

Giày thể thao có đặc thù phân loại sâu hơn so với nhiều mặt hàng tiêu dùng khác. Mỗi mã giày bao gồm nhiều kích thước từ size 36 đến size 45 cùng đa dạng phối màu. Đội ngũ phát triển phải thiết kế cơ chế lưu trữ sao cho việc truy vấn số lượng tồn kho của từng biến thể diễn ra chính xác. Nếu người dùng chọn một màu cụ thể, hệ thống phải tự động hiển thị các kích cỡ còn hàng tương ứng. Khi đơn hàng được xác nhận, hệ thống phải trừ kho tự động để tránh tình trạng bán vượt số lượng thực tế. Khâu quản lý giỏ hàng cũng đòi hỏi thuật toán kiểm tra tính khả dụng của sản phẩm theo thời gian thực nhằm đảm bảo độ tin cậy giao dịch.

2.2. Hạn chế hiệu năng khi tích hợp kiến trúc NoSQL và RESTful API

Việc sử dụng kiến trúc không ràng buộc khóa ngoại trong MongoDB dễ gây dư thừa dữ liệu nếu không thiết kế lược đồ cẩn trọng. ExpressJS cung cấp sự linh hoạt cao nhưng thiếu bộ khung cố định. Điều này khiến việc kiểm soát luồng dữ liệu trung gian và bắt lỗi ngoại lệ trở nên phức tạp. Khi người dùng thực hiện lọc sản phẩm theo nhiều tiêu chí cùng lúc, các truy vấn NoSQL phức tạp có thể làm chậm tốc độ phản hồi API. Ngoài ra, việc truyền tải danh sách hình ảnh dung lượng lớn từ máy chủ xuống app React Native dễ gây hiện tượng giật khung hình. Đồ án buộc phải tìm kiếm các kỹ thuật phân trang và bộ đệm trung gian để giải quyết triệt để vấn đề này.

III. Giải pháp xây dựng app bán giày thể thao bằng React Native

Đồ án áp dụng mô hình phân tách độc lập giữa frontend di động và backend điều phối dữ liệu. React Native được lựa chọn để phát triển ứng dụng di động đa nền tảng nhờ khả năng tái sử dụng mã nguồn vượt trội. Đội ngũ triển khai xây dựng hệ thống component trực quan, chia nhỏ thành các khối độc lập như giỏ hàng, danh sách sản phẩm và thẻ người dùng. Phía máy chủ, nền tảng Node.js kết hợp ExpressJS đóng vai trò xây dựng các dịch vụ RESTful API tốc độ cao. Hệ thống sử dụng các middleware chuyên dụng để xác thực token người dùng, ghi log nghiệp vụ và giải mã dữ liệu đầu vào chuẩn xác. MongoDB đóng vai trò lưu trữ tài liệu NoSQL với cấu trúc JSON linh hoạt, cho phép lồng ghép thuộc tính biến thể giày dễ dàng. Các chỉ mục tìm kiếm được thiết lập tối ưu để tăng tốc độ truy vấn danh mục hàng hóa. Cơ chế quản lý trạng thái tập trung giúp ứng dụng xử lý mượt mà quá trình thay đổi số lượng mặt hàng. Nhờ vậy, toàn bộ chu trình mua sắm vận hành ổn định và đạt hiệu năng cao trên các thiết bị di động.

3.1. Thiết kế kiến trúc phân tầng kết hợp React Native và Node.js

Hệ thống áp dụng kiến trúc phân tầng rõ ràng nhằm tăng tính mở rộng và bảo trì mã nguồn. Tầng trình diễn trên React Native tập trung kết xuất giao diện người dùng, xử lý hiệu ứng mượt mà và điều hướng màn hình linh hoạt. Mọi thao tác mua sắm được gửi đến máy chủ thông qua các kết nối HTTP an toàn. Tầng backend Node.js và ExpressJS đảm nhận việc xử lý logic nghiệp vụ, phân quyền tài khoản và điều phối luồng dữ liệu. Middleware kiểm soát chặt chẽ toàn bộ yêu cầu trước khi chạm đến tầng điều khiển. Cách tiếp cận này giúp cô lập lỗi phát sinh, bảo vệ máy chủ cơ sở dữ liệu và duy trì sự ổn định liên tục cho toàn bộ ứng dụng di động.

3.2. Chuẩn hóa cơ sở dữ liệu MongoDB và cơ chế quản trị đa kênh

Cơ sở dữ liệu MongoDB được thiết kế theo cấu trúc document với các bộ sưu tập riêng biệt cho người dùng, sản phẩm và đơn hàng. Dữ liệu kích cỡ và màu sắc được nhúng trực tiếp vào từng tài liệu sản phẩm, giúp hạn chế các thao tác nối bảng tốn kém tài nguyên hệ thống. Bên cạnh ứng dụng di động cho khách hàng, hệ thống xây dựng trang quản trị viên trực quan và tiện dụng. Quản trị viên có thể theo dõi biểu đồ doanh thu theo ngày, phê duyệt đơn hàng và chỉnh sửa thuộc tính sản phẩm nhanh chóng. Quy trình đồng bộ này đảm bảo dữ liệu tồn kho luôn thống nhất giữa người mua và ban quản lý cửa hàng.

IV. Đánh giá ứng dụng app bán giày thể thao bằng React Native

Đồ án tốt nghiệp tại Đại học Sư phạm Kỹ thuật TP.HCM đã hoàn thành đúng tiến độ và đáp ứng toàn diện các tiêu chí đánh giá khắt khe. Ứng dụng di động hoạt động ổn định và mượt mà trên các nền tảng thiết bị di động thử nghiệm thực tế. Tốc độ chuyển đổi giữa các màn hình diễn ra nhanh chóng, giao diện tương tác thân thiện và quy trình đặt hàng hoạt động chính xác tuyệt đối. Phía máy chủ Node.js và cơ sở dữ liệu MongoDB luôn duy trì khả năng phản hồi thông suốt trong mọi kịch bản kiểm thử tải trọng. Đề tài khẳng định tính khả thi cao khi ứng dụng hệ sinh thái JavaScript hiện đại vào giải quyết bài toán thương mại điện tử thực tiễn. Kết quả nghiên cứu không chỉ mang lại giá trị học thuật sâu sắc cho sinh viên kỹ sư CNTT mà còn mở ra tiềm năng thương mại hóa rất rộng mở. Hệ thống phần mềm có thể chuyển giao trực tiếp cho các doanh nghiệp bán lẻ giày thể thao vừa và nhỏ. Mô hình này giúp tiết kiệm tối đa ngân sách đầu tư ban đầu nhưng vẫn đảm bảo sở hữu một kênh bán hàng di động chuyên nghiệp.

4.1. Kết quả nghiệm thu thực tế và giá trị đào tạo kỹ sư công nghệ

Hội đồng chấm khóa luận tốt nghiệp đánh giá cao cấu trúc hoàn thiện và khả năng ứng dụng thực tiễn của đề tài. Sản phẩm thể hiện tư duy kiến trúc phần mềm mạch lạc của nhóm tác giả Lã Thiên Phúc và Nguyễn Mai Tiên. Đồ án đáp ứng chuẩn đầu ra của chương trình kỹ sư Công nghệ Thông tin tại Đại học Sư phạm Kỹ thuật TP.HCM. Sinh viên làm chủ kỹ thuật xây dựng ứng dụng di động hiện đại, triển khai API backend và quản trị cơ sở dữ liệu phi quan hệ. Quá trình làm việc phản ánh tinh thần nghiên cứu khoa học nghiêm túc dưới sự dẫn dắt chuyên môn từ ThS. Nguyễn Hữu Trung. Đây là tấm gương tiêu biểu cho hoạt động học tập định hướng ứng dụng thực tiễn.

4.2. Khả năng mở rộng thương mại và hướng nghiên cứu tương lai

Hệ thống sở hữu tiềm năng mở rộng lớn nhờ kiến trúc module hóa linh hoạt. Trong giai đoạn phát triển tiếp theo, ứng dụng có thể tích hợp thêm các cổng thanh toán điện tử trực tuyến phổ biến như MoMo, VNPay và ZaloPay. Nền tảng cũng hướng đến việc bổ sung thuật toán trí tuệ nhân tạo nhằm gợi ý mẫu giày cá nhân hóa theo sở thích từng khách hàng. Việc triển khai công nghệ thực tế ảo tăng cường AR giúp người dùng ướm thử giày ảo ngay trên màn hình điện thoại là một hướng nghiên cứu hứa hẹn. Khả năng đồng bộ hóa chuỗi cung ứng tự động sẽ nâng cao hơn nữa sức cạnh tranh cho ứng dụng thương mại điện tử chuyên ngành này.

Nội dung chính

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

Trong bối cảnh cuộc Cách mạng công nghiệp lần thứ tư, công nghệ thông tin ngày càng phát triển mạnh mẽ và được ứng dụng sâu rộng vào mọi lĩnh vực của đời sống xã hội. Tại Việt Nam, sự gia tăng của mức sống cùng nhu cầu tiêu dùng khiến việc mua sắm giày dép, quần áo trở nên phổ biến. Đồng thời, hành vi người tiêu dùng có xu hướng dịch chuyển từ việc mua sắm trực tiếp tại chợ và cửa hàng truyền thống sang các nền tảng thương mại điện tử nhằm tiết kiệm thời gian, công sức và linh hoạt trong việc lựa chọn kiểu dáng, kích thước, thanh toán và nhận hàng. Đối với các đơn vị kinh doanh, việc triển khai nền tảng trực tuyến còn giúp giảm thiểu áp lực về chi phí thuê mặt bằng kinh doanh.

Từ thực tiễn đó, đề tài khóa luận tốt nghiệp kỹ sư ngành Công nghệ thông tin tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh của sinh viên Lã Thiên Phúc (MSSV: 17110348) và Nguyễn Mai Tiên (MSSV: 20110255), dưới sự hướng dẫn của ThS. Nguyễn Hữu Trung, tập trung vào việc nghiên cứu và xây dựng hệ thống: "Xây dựng App bán giày thể thao bằng React Native, NodeJS, ExpressJS, MongoDB".

Mục tiêu cụ thể của đề tài bao gồm hai nhiệm vụ chính được xác định rõ:

1. Xây dựng website bán giày thể thao phục vụ hoạt động quản lý và bán hàng trực tuyến.
2. Vận dụng các công nghệ mới và ngôn ngữ lập trình hiện đại vào quá trình xây dựng hệ thống ứng dụng bao gồm cả nền tảng website và ứng dụng di động (app).

Đối tượng nghiên cứu của khóa luận là quy trình nghiệp vụ bán lẻ giày thể thao trực tuyến, cơ chế tương tác đa nền tảng giữa người dùng, quản trị viên và người giao hàng. Phạm vi nghiên cứu về mặt không gian tập trung vào mô hình bán lẻ trực tuyến tại thị trường Việt Nam (thông qua khảo sát thực tế tại hai hệ thống phân phối giày Bitis và Myshoes); phạm vi thời gian thực hiện nghiên cứu và hoàn thiện sản phẩm diễn ra từ ngày 28/08/2024 đến ngày 09/12/2024.

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

Khóa luận áp dụng khung lý thuyết và các công nghệ phát triển phần mềm hiện đại nhằm giải quyết bài toán thương mại điện tử đa nền tảng:

• Backend và API: Nền tảng NodeJS kết hợp framework ExpressJS để xây dựng hệ thống dịch vụ theo kiến trúc RESTful API. Hệ thống tận dụng cơ chế xử lý định tuyến (routing) và middleware của ExpressJS nhằm phục vụ xử lý yêu cầu, ghi log, nén dữ liệu và kiểm soát lỗi.
• Cơ sở dữ liệu: Hệ quản trị cơ sở dữ liệu phi quan hệ MongoDB (NoSQL document database mã nguồn mở, đa nền tảng, phát triển bởi MongoDB Inc.), phục vụ việc lưu trữ phân tán dữ liệu tài liệu linh hoạt cho danh mục sản phẩm, người dùng và đơn hàng.
• Xác thực và ủy quyền: Chuẩn JSON Web Token (JWT) được áp dụng để xác thực phiên làm việc và phân quyền cho người dùng khi gọi các endpoint trong hệ thống API; mật khẩu người dùng được xử lý băm (hash) để lưu trữ an toàn.
• Truyền thông thời gian thực: Thư viện Socket.io dựa trên giao thức WebSockets được cấu hình nhằm đồng bộ và gửi thông báo đơn hàng theo thời gian thực giữa các phân hệ.
• Frontend và ứng dụng di động: Thư viện React (ReactJS) kết hợp React Bootstrap được sử dụng để xây dựng giao diện website; nền tảng React Native kết hợp thư viện NativeWindCSS được triển khai để phát triển ứng dụng di động đa nền tảng.

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

• Phương pháp khảo sát, phân tích hiện trạng: Đánh giá ưu và nhược điểm thực tế từ giao diện và quy trình vận hành của hai website thương mại điện tử chuyên doanh giày tại Việt Nam là Bitis và Myshoes.
• Phương pháp phân tích và thiết kế hệ thống phần mềm: Xác định danh mục yêu cầu chức năng, yêu cầu phi chức năng; mô hình hóa quy trình nghiệp vụ thông qua hệ thống sơ đồ ca sử dụng (Usecase Diagram) và 30 kịch bản sơ đồ tuần tự (Sequence Diagram).
• Phương pháp thiết kế cơ sở dữ liệu: Xây dựng cấu trúc lược đồ dữ liệu NoSQL trên MongoDB tối ưu hóa cho mô hình quản lý giày đa thuộc tính (kích thước, màu sắc, thương hiệu, danh mục).
• Phương pháp kiểm thử chức năng (Functional Testing): Kiểm chứng tính đúng đắn của từng chức năng trên cả 3 phân hệ người dùng, quản trị viên và người giao hàng.

Nguồn dữ liệu trong khóa luận bao gồm thông tin khảo sát thực tế tại các nền tảng thương mại điện tử, dữ liệu danh mục sản phẩm giày thể thao mẫu, cấu trúc đơn hàng và dữ liệu tài khoản thử nghiệm do nhóm nghiên cứu khởi tạo trong môi trường phát triển.

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình Client - Server tách biệt, tích hợp đồng thời hai nền tảng phía giao diện là Website và Mobile App tương tác chung với một trung tâm dịch vụ API và cơ sở dữ liệu.

Thành phần hệ thống	Công nghệ / Thư viện sử dụng	Vai trò và phạm vi triển khai
Giao diện Web	React (ReactJS), React Bootstrap	Phục vụ khách vãng lai, khách hàng và ban quản trị (Admin) trên trình duyệt máy tính.
Ứng dụng di động	React Native, NativeWindCSS	Phục vụ khách hàng mua sắm và nhân viên giao hàng (Shipper) trên thiết bị di động.
Máy chủ logic (Backend)	NodeJS, ExpressJS	Cung cấp RESTful API xử lý logic nghiệp vụ, quản lý middleware, kết nối cơ sở dữ liệu.
Cơ sở dữ liệu	MongoDB	Lưu trữ toàn bộ dữ liệu tài khoản, phân quyền, sản phẩm, địa chỉ, đơn hàng, đánh giá.
Bảo mật & Phiên làm việc	JSON Web Token (JWT), Thuật toán Hash	Mã hóa mật khẩu khi lưu trữ, tạo token xác thực quyền truy cập vào các API được bảo vệ.
Giao tiếp Real-time	Socket.io (WebSockets)	Đẩy thông báo tức thời giữa khách hàng, quản trị viên và người giao hàng khi đơn đổi trạng thái.

Quy trình triển khai luồng đơn hàng được chuẩn hóa khép kín:

1. Khách hàng lựa chọn kích thước, màu sắc, thêm sản phẩm vào giỏ và tiến hành đặt hàng. Đơn hàng được khởi tạo trên MongoDB ở trạng thái chờ xác nhận.
2. Quản trị viên (Admin) xem chi tiết đơn hàng, nhấn xác nhận duyệt đơn; hệ thống chuyển trạng thái đơn hàng sang "Đang giao" và kích hoạt cơ chế phát thông báo đến phân hệ Người giao hàng (Shipper).
3. Shipper tiếp nhận đơn hàng, thực hiện giao hàng và bấm xác nhận giao hàng thành công trên ứng dụng di động.
4. Hệ thống cập nhật trạng thái hoàn thành và đồng thời phát thông báo xác nhận thành công về tài khoản của cả Admin lẫn User.

Về kiểm thử, nhóm tác giả thực hiện kiểm thử chức năng trên các phân hệ:

• Phân hệ Người dùng: Đăng ký, đăng nhập, tìm kiếm, giỏ hàng, đặt hàng, quản lý nhiều địa chỉ (thêm, sửa, xóa, chọn mặc định), theo dõi đơn hàng và đánh giá sản phẩm.
• Phân hệ Quản trị viên: Đăng nhập hệ thống quản trị, xem thống kê theo 4 chế độ (ngày, tháng, năm, tùy chỉnh), quản lý người dùng, tạo và hiệu chỉnh sản phẩm đa thuộc tính (sửa tên, thương hiệu, danh mục, màu, size), duyệt đơn hàng.
• Phân hệ Người giao hàng: Nhận đơn, hiển thị đơn theo trạng thái (đã nhận, hoàn thành, đã hủy), xác nhận hoàn tất giao hàng.

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

Chương 1: Khảo sát, phân tích, thiết kế

Chương này trình bày chi tiết kết quả khảo sát thực tế hai nền tảng kinh doanh giày trực tuyến tại Việt Nam:

Tiêu chí so sánh	Website Bitis	Website Myshoes
Ưu điểm	Giao diện trực quan, rõ ràng; danh mục phân loại chi tiết (nam, nữ, bé trai, bé gái, phụ kiện); có gợi ý tìm kiếm; giỏ hàng; trang chi tiết đầy đủ ảnh, giá, mô tả, địa chỉ showroom offline và đánh giá khách hàng.	Giao diện dễ nhìn; phân loại theo thương hiệu (Nike, Puma, Adidas); có mục sản phẩm mới, gợi ý sản phẩm chăm sóc giày mua kèm; nhiều hình thức thanh toán trực tuyến; giá thành cạnh tranh.
Hạn chế	Chỉ bán sản phẩm nội bộ do Bitis sản xuất, không có chức năng đăng bán từ bên ngoài.	Hàng hóa phụ thuộc nguồn nhập từ các thương hiệu, chủng loại có phần giới hạn, không có chức năng đăng bán cho người dùng.

Dựa trên khảo sát, đề tài thiết lập các yêu cầu nghiệp vụ kèm mã quy định:

• Khách vãng lai (Guest): Gồm 5 nghiệp vụ chính kèm mã quy định tương ứng: Xem sản phẩm (QD_G_XSP), Đăng ký (QD_G_DK), Đăng nhập (QD_G_DN), Tìm kiếm sản phẩm (QD_G_TSP), Xem chi tiết sản phẩm (QD_G_CTSP).
• Người dùng (User): Gồm 22 nghiệp vụ: Quản lý tài khoản (QD_U_QLTK), Xem giỏ hàng (QD_U_XGH), Thêm sản phẩm vào giỏ (QD_U_DH), Xóa sản phẩm (QD_U_XDH), Đăng xuất (QD_U_DX), Mua hàng (QD_U_MH), Xem đơn đã mua (QD_U_XDDM), Đánh giá sản phẩm (QD_U_DGSP), Quản lý mật khẩu (QD_U_QLMK), Quản lý đơn hàng (QD_U_QLDH), Hủy đơn hàng (QD_U_HDH), Hoàn thành đơn hàng (QD_U_HTDH), Quản lý địa chỉ (QD_U_QLDC), Thêm địa chỉ (QD_U_TDC), Sửa địa chỉ (QD_U_SDC), Xóa địa chỉ (QD_U_XDC), Đặt địa chỉ mặc định (QD_U_DDCMD), Xem chi tiết đơn hàng (QD_U_XCTDH), Nhận thông báo (QD_U_NTB).
• Quản trị viên (Admin): Gồm 11 nghiệp vụ: Xem thống kê (QD_A_XTK), Quản lý người dùng (QD_A_QLND), Thêm sản phẩm (QD_A_TSP), Xóa sản phẩm (QD_A_XSP), Sửa sản phẩm (QD_A_SSP), Duyệt đơn hàng (QD_A_DDH), cùng các nghiệp vụ dùng chung (quản lý mật khẩu, đăng nhập, đăng xuất, xem chi tiết đơn hàng, nhận thông báo).
• Người giao hàng (Shipper): Gồm 6 nghiệp vụ: Xem thống kê, Xem chi tiết đơn hàng, Đăng nhập, Đăng xuất, Xác nhận trạng thái đơn hàng (QD_S_XNTTDH), Thông báo hoàn thành đơn hàng (QD_S_TBHTDH).
• Yêu cầu phi chức năng: Thời gian phản hồi của hệ thống website không quá 5 giây; đảm bảo khả năng mở rộng, khả năng bảo trì, khả năng phục hồi, độ an toàn và tin cậy cao, tính toàn vẹn dữ liệu.

Chương 2: Cơ sở lý thuyết

Nội dung chương tập trung giải thích cơ sở lý thuyết của các công nghệ cốt lõi:

• ExpressJS: Phân tích bản chất là framework web tối giản xây dựng trên module http của NodeJS. Tài liệu nêu rõ các ưu điểm như cú pháp đơn giản, tính linh hoạt cao, hỗ trợ hệ thống middleware mạnh mẽ để xử lý xác thực, logging, nén dữ liệu và khả năng xử lý nhanh các yêu cầu đồng thời. Đồng thời, văn bản chỉ ra hai nhược điểm của ExpressJS: thiếu cấu trúc định sẵn (unopinionated), đòi hỏi lập trình viên phải tự kiểm soát cấu trúc thư mục; và sự phức tạp trong quản lý module khi ứng dụng mở rộng quy mô lớn.
• MongoDB: Phân tích mô hình cơ sở dữ liệu hướng tài liệu (document-oriented), phân tán, đa nền tảng, cơ chế lưu trữ dữ liệu dưới định dạng tương tự JSON (BSON).
• Socket.io, JWT, React Bootstrap, NativeWindCSS: Trình bày cơ chế bắt tay kết nối của WebSockets qua Socket.io; cấu trúc 3 phần của JSON Web Token phục vụ kiểm soát truy cập không trạng thái (stateless); và các thư viện hỗ trợ giao diện trên Web cùng Native App.

Chương 3: Mô hình hóa yêu cầu

Chương này xây dựng toàn bộ hệ thống sơ đồ chức năng Usecase bao quát 4 tác nhân:

• Phân hệ Chung: Các usecase xem trang chủ, tìm kiếm sản phẩm, xem chi tiết sản phẩm, xem chi tiết đơn hàng.
• Phân hệ Người dùng: Usecase quản lý giỏ hàng, thêm/xóa sản phẩm khỏi giỏ, xem lịch sử mua hàng, quản lý thông tin tài khoản, đánh giá sản phẩm, hủy đơn hàng, hoàn thành đơn hàng, thêm/sửa/xóa địa chỉ và đặt địa chỉ mặc định.
• Phân hệ Quản trị viên: Usecase quản lý thông tin người dùng, tạo sản phẩm mới, sửa sản phẩm, xóa sản phẩm, duyệt đơn hàng, xem thống kê doanh thu, nhận thông báo.
• Phân quyền Người giao hàng: Usecase tiếp nhận đơn hàng, xem đơn hàng được xác nhận, xác nhận trạng thái giao hàng, thống kê đơn hàng, hủy đơn hàng. Tất cả 34 ca sử dụng đều được văn bản lập bảng đặc tả chi tiết từ tiền điều kiện, luồng sự kiện chính đến hậu điều kiện.

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

Chương 4 thiết kế chi tiết logic tương tác và cấu trúc dữ liệu:

• Lược đồ tuần tự (Sequence Diagram): Văn bản xây dựng 30 sơ đồ tuần tự thể hiện rõ sự luân chuyển thông điệp giữa Actor, Giao diện (Boundary), Bộ điều khiển (Controller), và Cơ sở dữ liệu (Database) cho các chức năng: Đăng ký, Đăng nhập, Đăng xuất, Tìm kiếm, Giỏ hàng, Đặt hàng, Hủy/Hoàn thành đơn, Thao tác sổ địa chỉ, Thao tác quản trị sản phẩm, Duyệt đơn hàng và Thông báo.
• Lược đồ cơ sở dữ liệu: Thiết kế cấu trúc các bảng/bộ sưu tập (collections) trên MongoDB đảm bảo lưu trữ đầy đủ các quan hệ thông tin người dùng, địa chỉ giao hàng, danh mục sản phẩm, biến thể màu sắc, biến thể kích cỡ, chi tiết đơn hàng và phản hồi đánh giá.

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

Tác giả tài liệu hóa chi tiết hơn 64 màn hình giao diện kèm logic xử lý sự kiện tương ứng cho cả hai nền tảng Web và Mobile App:

• Giao diện phía người dùng (Web và App): Màn hình trang chủ, trang chi tiết sản phẩm, giỏ hàng, thông tin cá nhân, giao diện quản lý địa chỉ (thêm, sửa, đổi địa chỉ mặc định, xóa), và hệ thống theo dõi đơn hàng chia theo 4 tab trạng thái riêng biệt: Đơn hàng chờ xác nhận, Đơn hàng đang giao, Đơn hàng đã hoàn thành, Đơn hàng đã hủy.
• Giao diện quản trị viên (Admin): Bảng điều khiển quản trị thống kê đa năng hỗ trợ 4 chế độ trực quan hóa: thống kê theo ngày, thống kê theo tháng, thống kê theo năm và thống kê tùy chỉnh theo khoảng thời gian; màn hình quản lý người dùng; bộ công cụ quản lý sản phẩm chuyên sâu hỗ trợ chỉnh sửa tên, thương hiệu, danh mục, thêm/sửa/xóa các tùy chọn màu sắc và kích thước; giao diện duyệt đơn hàng.
• Giao diện người giao hàng (Shipper): Màn hình đăng nhập, trang chủ, danh sách các đơn hàng đã nhận, đơn hàng đã hoàn thành, đơn hàng đã hủy và nút chức năng xác nhận giao hàng.
• Hệ thống thông báo: Màn hình hiển thị thông báo tức thời cho người dùng, quản trị viên và người giao hàng.

Chương 6: Cài đặt và kiểm thử ứng dụng

Trình bày kết quả cài đặt và bảng kiểm thử chức năng (Functional Test Cases) của toàn bộ hệ thống:

• Bảng 6.1: Kiểm thử các chức năng thuộc phân hệ Người dùng (đăng ký, đăng nhập, tìm kiếm, thêm giỏ, đặt hàng, quản lý địa chỉ, đánh giá).
• Bảng 6.2: Kiểm thử các chức năng thuộc phân hệ Quản trị viên (quản lý tài khoản người dùng, thêm/sửa/xóa sản phẩm, duyệt đơn, xuất thống kê).
• Bảng 6.3: Kiểm thử các chức năng thuộc phân hệ Người giao hàng (nhận thông báo đơn, xác nhận hoàn tất giao hàng, cập nhật danh sách đơn).

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

Về kết quả thực tế, nhóm tác giả đã hoàn thành các mục tiêu đề ra trong đề cương:

• Xây dựng thành công hệ thống bán giày thể thao hoạt động đồng thời trên hai môi trường: Website (React, React Bootstrap) và Ứng dụng di động (React Native, NativeWindCSS).
• Xây dựng hệ thống máy chủ Backend trên NodeJS và ExpressJS, cung cấp đầy đủ các RESTful API phục vụ 4 nhóm tác nhân (Khách, Người dùng, Quản trị viên, Người giao hàng).
• Thiết kế cơ sở dữ liệu MongoDB lưu trữ toàn bộ thực thể nghiệp vụ, tích hợp cơ chế bảo mật xác thực JSON Web Token và băm mật khẩu.
• Ứng dụng thư viện Socket.io xử lý thành công tính năng truyền phát thông báo trạng thái đơn hàng theo thời gian thực giữa Shipper, Admin và User.
• Hoàn thành đầy đủ 8 giai đoạn trong kế hoạch thực hiện từ khảo sát, thiết kế, lập trình đến kiểm thử và viết báo cáo đúng thời hạn (từ 28/08/2024 đến 09/12/2024).

Đóng góp của đồ án:

• Phân tích và mô hình hóa chi tiết quy trình nghiệp vụ thương mại điện tử chuyên ngành giày dép với hệ thống 34 usecase và 30 lược đồ tuần tự rõ ràng.
• Đề xuất và hiện thực hóa giải pháp quản lý sản phẩm giày dép có độ biến thiên cao về thuộc tính (kết hợp linh hoạt giữa kích thước, màu sắc, phân loại và thương hiệu).
• Thiết lập quy trình luân chuyển và giám sát đơn hàng chặt chẽ có sự tham gia đồng bộ của cả 3 bên: Người mua - Quản trị viên - Nhân viên giao hàng.

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

Về mặt hạn chế:

• Hệ thống tập trung vào mô hình phân phối của một cửa hàng đơn lẻ, chưa hỗ trợ mô hình sàn thương mại điện tử đa người bán (multi-vendor) để người dùng bên ngoài có thể tự đăng ký gian hàng và bán sản phẩm (tương tự hạn chế đã chỉ ra tại Bitis và Myshoes).
• Cấu trúc mã nguồn ExpressJS khi quy mô mở rộng cần được tổ chức phân tầng chặt chẽ hơn để tránh việc tương tác giữa các module trở nên phức tạp.
• Các phương thức thanh toán trực tuyến bên ngoài chưa được tích hợp đa dạng mà chủ yếu vận hành theo quy trình xử lý đơn hàng nội bộ.

Về hướng nghiên cứu và phát triển tiếp:

• Tích hợp thêm các cổng thanh toán trực tuyến phổ biến tại Việt Nam nhằm đa dạng hóa phương thức thanh toán cho khách hàng.
• Nâng cấp kiến trúc mã nguồn máy chủ, tối ưu hóa các module dịch vụ backend nhằm nâng cao khả năng chịu tải và mở rộng hệ thống.
• Bổ sung thuật toán gợi ý sản phẩm thông minh dựa trên lịch sử mua hàng và tìm kiếm của người dùng.

Giá trị tham khảo

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

• Sinh viên chuyên ngành Công nghệ thông tin, Công nghệ phần mềm đang chuẩn bị thực hiện đồ án tốt nghiệp hoặc các dự án môn học về phát triển ứng dụng web và di động.
• Các lập trình viên tìm kiếm mô hình kiến trúc kết hợp giữa React, React Native, NodeJS, ExpressJS và MongoDB (MERN stack mở rộng sang thiết bị di động).
• Những người xây dựng hệ thống thương mại điện tử cần tham khảo tài liệu phân tích nghiệp vụ, danh mục mã quy định chức năng, thiết kế sơ đồ ca sử dụng và sơ đồ tuần tự chuẩn mực cho quy trình xử lý đơn hàng khép kín.

Phần nội dung đáng tham khảo nhất trong khóa luận là Chương 1 (hệ thống hóa danh mục nghiệp vụ và mã quy định cho 4 tác nhân), Chương 3 và Chương 4 (hệ thống 30 kịch bản sơ đồ tuần tự chi tiết), cùng Chương 5 (giải pháp tổ chức dữ liệu và giao diện quản lý sản phẩm giày dép đa thuộc tính màu sắc và kích cỡ).

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

1. Khóa luận đã tiến hành khảo sát những website thực tế nào và rút ra kết luận gì?
Nhóm tác giả đã khảo sát hai website kinh doanh giày trực tuyến tại Việt Nam là Bitis và Myshoes. Kết quả khảo sát cho thấy cả hai nền tảng đều có giao diện trực quan, danh mục rõ ràng và trang chi tiết sản phẩm đầy đủ thông tin; tuy nhiên, cả hai đều có nhược điểm là chỉ bán các mặt hàng do đơn vị tự phân phối hoặc nhập khẩu, chưa có chức năng cho phép người dùng tự đăng bán sản phẩm.

2. Hệ thống phân chia quyền hạn cho những tác nhân nào và bao gồm bao nhiêu nghiệp vụ chính?
Hệ thống xác định rõ 4 nhóm tác nhân gồm: Khách vãng lai (Guest - 5 nghiệp vụ), Người dùng thành viên (User - 22 nghiệp vụ), Quản trị viên (Admin - 11 nghiệp vụ) và Người giao hàng (Shipper - 6 nghiệp vụ), đi kèm hệ thống mã quy định nghiệp vụ được định nghĩa cụ thể trong tài liệu.

3. Công nghệ nào được sử dụng để xây dựng giao diện phía người dùng trên Web và Mobile App?
Giao diện Website được xây dựng bằng thư viện React (ReactJS) kết hợp framework CSS React Bootstrap. Giao diện ứng dụng di động (Mobile App) được xây dựng bằng nền tảng React Native kết hợp thư viện tạo kiểu NativeWindCSS.

4. Cơ chế thông báo thời gian thực giữa các phân hệ được triển khai bằng công nghệ gì?
Cơ chế thông báo thời gian thực được xây dựng bằng thư viện Socket.io (dựa trên WebSockets), cho phép hệ thống tự động phát thông báo đến Quản trị viên và Người dùng ngay khi Người giao hàng (Shipper) bấm nút xác nhận hoàn thành đơn hàng.

5. Yêu cầu phi chức năng về hiệu năng phản hồi của hệ thống được quy định như thế nào?
Trong phần phân tích yêu cầu tại Chương 1, hệ thống đặt ra tiêu chuẩn phi chức năng nghiêm ngặt về mặt hiệu năng với thời gian phản hồi của Website không được vượt quá 5 giây, đồng thời phải đảm bảo tính toàn vẹn dữ liệu, độ an toàn và khả năng phục hồi cao.

Kết luận

Khóa luận tốt nghiệp của sinh viên Lã Thiên Phúc và Nguyễn Mai Tiên đã giải quyết trọn vẹn bài toán xây dựng ứng dụng thương mại điện tử chuyên ngành giày thể thao trên cả hai nền tảng Website và Ứng dụng di động. Bằng việc kết hợp hiệu quả các công nghệ React Native, NodeJS, ExpressJS, MongoDB cùng cơ chế Socket.io và JWT, hệ thống đã thiết lập được quy trình vận hành khép kín, phân quyền minh bạch cho 4 tác nhân từ người mua, quản trị viên đến nhân viên giao hàng. Đây là tài liệu học thuật có cấu trúc kỹ thuật rõ ràng, cung cấp nguồn dữ liệu đặc tả nghiệp vụ và thiết kế phần mềm chi tiết, có giá trị ứng dụng và tham khảo cao cho sinh viên ngành Công nghệ phần mềm.

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

CHƯƠNG 1: KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ. KHẢO SÁT HIỆN TRẠNG. PHÂN TÍCH YÊU CẦU DỰ ÁN. Yêu cầu chức năng nghiệp vụ.

Kết quả dự kiến đạt được. 43 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT. Cách thức hoạt động[1]. Nhược điểm[3].

Cách thức hoạt động[8]. Nhược điểm[9]. Cách thức hoạt động[4]. Cách thức hoạt động[10].

JSON WEB TOKEN. Cách thức hoạt động[11]. Cách thức hoạt động[12]. Cách thức hoạt động[5].

React Bootstrap cho Web[6]. Cách thức hoạt động[13]. NativeWindCSS cho App[2]. 54 12 CHƯƠNG 3: MÔ HÌNH HÓA YÊU CẦU.

DANH SÁCH CÁC TÁC NHÂN VÀ CHỨC NĂNG CỦA HỆ THỐNG. LƯỢC ĐỒ CHỨC NĂNG (USECASE DIAGRAM). PHÂN HỆ CHUNG. Xem trang chủ.

Tìm kiếm sản phẩm. Xem chi tiết sản phẩm. Xem chi tiết đơn hàng. PHÂN HỆ NGƯỜI DÙNG.

Quản lí giỏ hàng. Xóa sản phẩm khỏi giỏ hàng. Thêm sản phẩm vào giỏ hàng. Xem lịch sử mua hàng.

Quản lí thông tin. Đánh giá sản phẩm. Hoàn thành đơn hàng. Thêm địa chỉ.

Sửa địa chỉ. Đặt địa chỉ mặc định. PHÂN HỆ QUẢN TRỊ VIÊN (ADMIN). Quản lí thông tin người dùng.

Tạo sản phẩm mới. Sửa sản phẩm. Xem thống kê. Nhận thông báo từ Người giao hàng.

PHÂN QUYỀN NGƯỜI GIAO HÀNG (SHIPPER). Xác nhận trạng thái đơn hàng. Thống kê đơn hàng. Xem đơn hàng được xác nhận.

Hoàn thành đơn hàng. Hủy đơn hàng. 69 CHƯƠNG 4: THIẾT KẾ PHẦN MỀM. LƯỢC ĐỒ TUẦN TỰ (SEQUENCE DIAGRAM).

Xem trang chủ. Tìm kiếm sản phẩm. Xem chi tiết sản phẩm. Quản lí tài khoản.

Quản lí giỏ hàng. Xóa sản phẩm khỏi giỏ hàng. Thêm sản phẩm vào giỏ hàng. Xem lịch sử mua hàng.

Đánh giá sản phẩm. Quản lí đơn hàng. Hủy đơn hàng. Hoàn thành đơn hàng.

Thêm địa chỉ. Sửa địa chỉ. Đặt địa chỉ mặc định. Quản lí tất cả người dùng.

Tạo sản phẩm mới. Sửa thông tin sản phẩm. Xem thống kê. Duyệt đơn hàng.

Xem chi tiết đơn hàng. Xác nhận trạng thái đơn hàng. Hoàn thành đơn hàng. Hủy đơn hàng.

LƯỢC ĐỒ CƠ SỞ DỮ LIỆU. 95 CHƯƠNG 5: THIẾT KẾ GIAO DIỆN VÀ XỬ LÍ. TRANG CHI TIẾT SẢN PHẨM. GIAO DIỆN GIỎ HÀNG.

TRANG THÔNG TIN NGƯỜI DÙNG. TRANG ĐỊA CHỈ NGƯỜI DÙNG. THÊM & CHỈNH SỬA ĐỊA CHỈ. ĐỔI ĐỊA CHỈ MẶC ĐỊNH.

XEM TOÀN BỘ ĐƠN HÀNG. XEM ĐƠN HÀNG TRONG TRẠNG THÁI CHỜ. XEM ĐƠN HÀNG TRONG TRẠNG THÁI ĐANG GIAO HÀNG. XEM ĐƠN HÀNG TRONG TRẠNG THÁI ĐÃ HOÀN THÀNH.

TRANG ĐĂNG NHẬP QUẢN TRỊ VIÊN (ADMIN). TRANG CHỦ ADMIN. Thống kê theo năm. Thống kê theo tháng.

Thống kê theo ngày. Thống kê tùy chỉnh. TRANG QUẢN TRỊ NGƯỜI DÙNG. CHỈNH SỬA THÔNG TIN NGƯỜI DÙNG.

XÓA NGƯỜI DÙNG. TRANG QUẢN LÍ SẢN PHẨM. TẠO SẢN PHẨM MỚI. TÌM KIẾM SẢN PHẨM.

CHỈNH SỬA TÊN SẢN PHẨM. CHỈNH SỬA THƯƠNG HIỆU SẢN PHẨM. CHỈNH SỬA PHÂN LOẠI SẢN PHẨM. CHỈNH SỬA MÀU SẢN PHẨM.

XÓA MÀU SẢN PHẨM. CHỈNH SỬA KÍCH THƯỚC SẢN PHẨM. XÓA KÍCH THƯỚC SẢN PHẨM. THÊM KÍCH THƯỚC SẢN PHẨM.

THÊM MÀU CHO SẢN PHẨM. TRANG HIỂN THỊ TOÀN BỘ ĐƠN HÀNG. TRANG HIỂN THỊ ĐƠN HÀNG ĐANG CHỜ XÁC NHẬN. TRANG HIỂN THỊ ĐƠN HÀNG ĐANG GIAO.

TRANG HIỂN THỊ ĐƠN HÀNG ĐÃ ĐƯỢC GIAO. TRANG HIỂN THỊ ĐƠN HÀNG ĐÃ HỦY. TRANG ĐĂNG NHẬP NGƯỜI GIAO HÀNG (SHIPPER). TRANG CHỦ NGƯỜI GIAO HÀNG.

TRANG CÁC ĐƠN HÀNG ĐÃ NHẬN CỦA NGƯỜI GIAO HÀNG .