Đồ án: Xây dựng website bán giày thể thao áp dụng công nghệ MERN Stack

Tham khảo đồ án tốt nghiệp xây dựng website bán giày thể thao bằng MERN Stack. Tài liệu trình bày chi tiết từ phân tích, thiết kế đến triển khai.

• Tác giả: Lê Đức Tân
• Người hướng dẫn: Huỳnh Xuân Phụng
• Trường học: Đạ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 Website Bán Giày Thể Thao Áp Dụng Công Nghệ Mern Stack
• Loại tài liệu: Đồ án tốt nghiệp
• Năm xuất bản: 2022
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Giới Thiệu Về Đồ Án Website Bán Giày Thể Thao MERN Stack

Đồ án website bán giày thể thao là một dự án tốt nghiệp hoàn chỉnh được phát triển bởi sinh viên khóa 2018-2022 tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh. Dự án này ứng dụng công nghệ MERN Stack hiện đại để xây dựng một nền tảng thương mại điện tử chuyên biệt. MERN Stack bao gồm MongoDB, Express.js, React.js và Node.js – một bộ công nghệ mạnh mẽ cho phát triển web full-stack. Đồ án tập trung vào việc tạo ra một hệ thống bán hàng trực tuyến toàn diện, với giao diện người dùng thân thiện, hệ thống quản lý sản phẩm hiệu quả và quy trình thanh toán an toàn. Dự án được hướng dẫn bởi TS. Huỳnh Xuân Phụng, một chuyên gia trong lĩnh vực công nghệ phần mềm.

1.1. Mục Đích và Tính Cấp Thiết

Mục đích chính của đồ án website bán giày là phát triển một nền tảng thương mại điện tử hiện đại, đáp ứng nhu cầu mua sắm trực tuyến ngày càng tăng. Tính cấp thiết nằm ở việc cung cấp giải pháp công nghệ tiên tiến cho lĩnh vực bán lẻ giày thể thao. Hệ thống được thiết kế để xử lý lưu lượng người dùng lớn, đảm bảo hiệu suất cao và trải nghiệm mua sắm mượt mà cho khách hàng.

1.2. Công Nghệ MERN Stack Áp Dụng

MERN Stack được lựa chọn vì tính linh hoạt và hiệu năng vượt trội. MongoDB cung cấp lưu trữ dữ liệu linh hoạt, Express.js xử lý yêu cầu server, React.js tạo giao diện động, và Node.js chạy runtime JavaScript phía server. Sự kết hợp này cho phép phát triển nhanh chóng, bảo trì dễ dàng và mở rộng hệ thống một cách hiệu quả.

II. Các Chức Năng Chính của Hệ Thống

Website bán giày thể thao được thiết kế với nhiều chức năng toàn diện dành cho cả quản trị viên và người dùng. Hệ thống bao gồm module quản lý sản phẩm, xử lý đơn hàng, thanh toán trực tuyến và hỗ trợ khách hàng. Người dùng có thể duyệt giày, lọc theo loại và thương hiệu, xem chi tiết sản phẩm, thêm vào giỏ hàng và thanh toán qua nhiều phương thức. Quản trị viên quản lý toàn bộ sản phẩm, theo dõi đơn hàng, quản lý người dùng và áp dụng chiến dịch khuyến mãi. Hệ thống cũng tích hợp đăng nhập qua Google, quên mật khẩu và hệ thống gợi ý sản phẩm thông minh.

2.1. Chức Năng Dành Cho Người Dùng

Người dùng có thể tìm kiếm và lọc sản phẩm theo nhiều tiêu chí, xem chi tiết giày kèm hướng dẫn chọn size. Chức năng giỏ hàng cho phép thêm, xóa, tăng/giảm số lượng sản phẩm. Người dùng có thể thanh toán qua ví Momo hoặc COD, theo dõi đơn hàng và đánh giá sản phẩm. Hệ thống gợi ý sản phẩm liên quan dựa trên hành vi mua sắm.

2.2. Chức Năng Quản Trị Viên

Quản trị viên có quyền quản lý toàn bộ loại giày, thương hiệu và sản phẩm. Có thể thêm, cập nhật, xóa sản phẩm; quản lý người dùng; cập nhật trạng thái đơn hàng; xét giảm giá và khuyến mãi. Hệ thống cấp quyền truy cập riêng biệt cho các vai trò quản trị khác nhau, đảm bảo bảo mật dữ liệu quan trọng.

III. Kiến Trúc Cơ Sở Dữ Liệu và Thiết Kế Hệ Thống

Cơ sở dữ liệu MongoDB trong đồ án MERN được thiết kế với nhiều collection để lưu trữ thông tin người dùng, sản phẩm, đơn hàng, thanh toán và đánh giá. Mô hình dữ liệu linh hoạt của MongoDB cho phép lưu trữ dữ liệu không định hình, phù hợp cho nhu cầu thay đổi của ứng dụng. Hệ thống sử dụng Mongoose.js để định nghĩa schema và kết nối database một cách an toàn. Kiến trúc RESTful API trên Node.js/Express xử lý các yêu cầu từ phía client React.js. Dữ liệu được mã hóa và xác thực bằng JWT token để đảm bảo bảo mật. Hệ thống lưu trữ thông tin nhạy cảm như mật khẩu dưới dạng hash, không bao giờ lưu trữ dưới dạng plaintext.

3.1. Thiết Kế Database MongoDB

MongoDB chứa các collection quan trọng: Users (người dùng), Products (sản phẩm), Orders (đơn hàng), Payments (thanh toán), Reviews (đánh giá), Categories (loại giày) và Brands (thương hiệu). Mỗi collection có các field riêng với kiểu dữ liệu phù hợp. Relationships được quản lý qua ObjectId references. Indexing được áp dụng cho các field thường xuyên truy vấn như product slug, user email để tối ưu hiệu suất query.

3.2. API RESTful và Kết Nối Backend

Express.js server cung cấp các endpoint API cho tất cả chức năng: /api/auth (xác thực), /api/products (sản phẩm), /api/orders (đơn hàng), /api/users (người dùng). Mỗi endpoint được bảo vệ bằng middleware xác thực JWT. Hệ thống xử lý CORS để cho phép frontend React kết nối an toàn. Error handling toàn diện đảm bảo phản hồi lỗi rõ ràng cho client.

IV. Triển Khai Kiểm Thử và Kết Quả Đồ Án

Đồ án website bán giày thể thao MERN Stack được triển khai thành công trên nền tảng Amazon Web Services (AWS). Phần backend server được deploy lên AWS Elastic Beanstalk hoặc EC2 instance, đảm bảo độ tin cậy và khả năng mở rộng cao. Frontend React.js được build và host trên S3 + CloudFront để cung cấp tốc độ tải nhanh. MongoDB Atlas được sử dụng cho cơ sở dữ liệu cloud. Quá trình kiểm thử bao gồm kiểm thử thủ công (manual testing) cho các chức năng chính như đăng ký, đăng nhập, quản lý giỏ hàng, xử lý thanh toán và kiểm thử API. Kiểm thử tự động được thực hiện cho các API endpoint quan trọng. Kết quả cho thấy hệ thống hoạt động ổn định, đáp ứng được các yêu cầu kỹ thuật đề ra.

4.1. Quá Trình Triển Khai Hệ Thống

Server backend được triển khai lên AWS với environment variables được cấu hình an toàn. Database MongoDB kết nối qua MongoDB Atlas connection string. Frontend React được build production-optimized và host trên CloudFront CDN. Các bước CI/CD được thiết lập để tự động deploy khi code được push. SSL certificate được cài đặt đảm bảo HTTPS an toàn cho toàn bộ ứng dụng.

4.2. Kết Quả Kiểm Thử và Nhận Xét

Kiểm thử chứng minh website bán giày hoạt động ổn định trên các trình duyệt khác nhau. Tất cả chức năng chính từ đăng ký, đăng nhập, quản lý sản phẩm, xử lý thanh toán đều hoạt động đúng. API response time nằm trong ngưỡng chấp nhận. Hệ thống xử lý được lưu lượng người dùng đồng thời hợp lý. Bảo mật được đánh giá đạt tiêu chuẩn, mã hóa dữ liệu và xác thực người dùng hoạt động hiệu quả.

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

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI. Tính cấp thiết của đề tài. Mục đích của đề tài. Phương pháp nghiên cứu.

Khảo sát hiện trạng. Một số website bán giày trên thị trường. Các giả thiết ràng buộc và rủi ro. Các chức năng có thể xây dựng được.

Chức năng chung. Chức năng dành cho quản trị viên. Chức năng dành cho người dùng. 5 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT.

Tổng quan về công nghệ MERN Stack. Giới thiệu về Recommend FPT. Giới thiệu về Amazon Web Service. Cách cài đặt các thành phần trong MERN Stack.

Cài đặt Mongodb. Cài đặt NodeJs. Cài đặt Express. Cài đặt ReactJs.

Cách xây dựng và triển khai dự án MERN Stack. 16 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG. Mô tả yêu cầu. Tổng quan quy trình nghiệp vụ.

Sơ đồ hoạt động hệ thống. Danh sách các chức năng. Thiết kế cơ sở dữ liệu. Các thành phần của cơ sở dữ liệu.

Cách kết nối cơ sở dữ liệu. Đặc tả các chức năng. Đăng nhập bằng Google. Quên mật khẩu.

Cập nhật loại. Thêm thương hiệu. Cập nhật thương hiệu. Xóa thương hiệu.

Thêm sản phẩm. Cập nhật sản phẩm. Xóa người dùng. Cập nhật trạng thái đơn hàng.

Xét giảm giá. Tìm kiếm, lọc sản phẩm. Xem chi tiết sản phẩm. Xem hướng dẫn chọn size.

Thêm sản phẩm vào giỏ. Tăng/giảm số lượng sản phẩm trong giỏ. Xóa sản phẩm trong giỏ. Cập nhật thông tin cá nhân.

Thay đổi mật khẩu. Thêm thông tin nhận hàng. Xóa thông tin nhận hàng. Thanh toán sau khi nhận hàng.

Thanh toán ví Momo. Đánh giá sản phẩm. Gợi ý sản phẩm liên quan. Gợi ý sản phẩm dựa theo hành vi người dùng.

Tra cứu đơn hàng. 131 CHƯƠNG 4: QUẢN LÝ DỰ ÁN VÀ TIẾN ĐỘ. Quản lý rủi ro. Xác định rủi ro và mức độ ảnh hưởng.

Hướng giải quyết. Triển khai hệ thống. Triển khai phần server lên AWS. Triển khai phần giao diện.

142 CHƯƠNG 5: KIỂM THỬ. Kế hoạch kiểm thử. Kiểm thử thủ công. Kiểm thử chức năng đăng ký.

Kiểm thử chức năng đăng nhập. Kiểm thử chức các chức năng quản lý giỏ hàng. Kiểm thử chức năng quản lý sản phẩm. Kiểm thử chức năng quản lý người dùng.

Kiểm thử chức năng quản lý đơn hàng. Kiểm thử API. API đăng nhập – phương thức POST. API đăng ký – phương thức POST.

API lấy toàn bộ sản phẩm– phương thức POST. API lấy một sản phẩm theo Slug – phương thức GET. API lấy các sản phẩm theo loại – phương thức GET. API thêm sản phẩm – phương thức POST.

API tìm kiếm sản phẩm theo từ khóa – Phương thức POST. API thêm loại – phương thức POST. API lấy thông tin đơn hàng – phương thức POST. API gợi ý danh sách sản phẩm liên quan.

165 CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN. Ưu/nhược điểm. Nhược điểm. So sánh với website tham khảo.

Hướng phát triển. 168 TÀI LIỆU THAM KHẢO. 170 V DANH MỤC HÌNH ẢNH Hình 1: Sơ đồ MERN Stack. 7 Hình 2: Giao diện website Recommend FPT.

9 Hình 3: Giao diện trang đăng nhập của MongoDB. 11 Hình 4: Giao diện khi đăng nhập vào trong MongoDB. 11 Hình 5: Giao diện trang tải về của NodeJS. 12 Hình 6: Giao diện cửa sổ cài đặt NodeJS (1).

12 Hình 7: Giao diện cửa sổ cài đặt NodeJS (2). 13 Hình 8: Giao diện cửa sổ cài đặt NodeJS (3). 13 Hình 9: Giao diện cửa sổ cài đặt NodeJS (4). 14 Hình 10: Giao diện cửa sổ thông báo đang cài đặt NodeJS.

14 Hình 11: Giao diện cửa sổ thông báo đã hoàn tất cài đặt NodeJS. 15 Hình 12: Kiểm tra phiên bản NodeJS ( cài đặt thành. 15 Hình 13: Cài đặt Express Package. 16 Hình 14: Cài đặt ReactJS ở Global.

16 Hình 15: Hình tạo thư mục. 16 Hình 16: Hình chứa thư mục vừa tạo. 17 Hình 17: Hình câu lệnh đi đến thư mục. 17 Hình 18: Hình khởi tạo dự án.

18 Hình 19: Tạo thư mục Frontend. 18 Hình 20: Giao diện của Visual Studio Code. 19 Hình 21: Hình hiển thị vị trí file server. 19 Hình 22: Hình khởi tạo dự án ReactJS.

20 Hình 23: Ví dụ cấu hình file server. 20 Hình 24: Hình chạy phần Backend thành công. 21 Hình 25: Hình chạy phần Frontend thành công. 21 Hình 26: Giao diện React App khi chạy thành công.

22 Hình 27: Sơ đồ tổng quan phía người dùng. 24 Hình 28: Sơ đồ tổng quan phía quản trị viên. 24 VI Hình 29: Lược đồ usecase. 25 Hình 30: Sơ đồ hoạt động của hệ thống.

26 Hình 31: Lược đồ class. 30 Hình 32: Giao diện đăng kí, đăng nhập mongodb. 36 Hình 33: Giao diện trang chủ mongoDB. 37 Hình 34: Các thức tạo project.

37 Hình 35: Khởi tạo project thành công. 38 Hình 36: Tùy chọn gói lưu trữ dữ liệu. 38 Hình 37: Giao diện cấu hình xong tài khoản mongoDB. 39 Hình 38: Giao diện cấu hình thông tin bảo mật.

39 Hình 39: Giao diện cấu hình xong tài khoản mongoDB. 40 Hình 40: Giao diện lấy connection string. 40 Hình 41: Đoạn mã kết nối với MongoDB atlas Database. 41 Hình 42: Activity diagram đăng nhập.

42 Hình 43: Lược đồ tuần tự đăng nhập. 43 Hình 44: Giao diện đăng nhập phía người dùng. 44 Hình 45: Giao diện đăng nhập phía quản trị viên. 44 Hình 46: Activity diagram đăng nhập bằng Google.

45 Hình 47: Lược đồ tuần tự đăng nhập bằng Google. 46 Hình 48: Giao diện đăng nhập bằng Google. 46 Hình 49: Activity diagram đăng ký. 47 Hình 50: Lược đồ tuần tự đăng ký.

48 Hình 51: Giao diện đăng ký. 49 Hình 52: Activity diagram quên mật khẩu. 50 Hình 53: Lược đồ tuần tự quên mật khẩu. 52 Hình 54: Giao diện quên mật khẩu.

53 Hình 55: Activity diagram thêm loại. 53 Hình 56: Lược đồ tuần tự thêm loại. 55 Hình 57: Giao diện thêm loại. 55 Hình 58: Activity diagram cập nhật loại.

56 VII Hình 59: Lược đồ tuần tự cập nhật loại. 57 Hình 60: Giao diện cập nhật loại. 58 Hình 61: Activity diagram xóa loại. 59 Hình 62: Lược đồ tuần tự xóa loại.

60 Hình 63: Giao diện xóa loại. 61 Hình 64: Activity diagram thêm thương hiệu. 61 Hình 65: Lược đồ tuần tự thêm thương hiệu. 63 Hình 66: Giao diện thêm thương hiệu.

63 Hình 67:Activity diagram cập nhật thương hiệu. 64 Hình 68: Lược đồ tuần tự cập nhật thương hiệu. 65 Hình 69: Giao diện cập nhật thương hiệu. 66 Hình 70: Activity diagram xóa thương hiệu.

67 Hình 71: Lược đồ tuần tự xóa thương hiệu. 68 Hình 72: Giao diện xóa thương hiệu. 69 Hình 73: Activity diagram thêm sản phẩm. 70 Hình 74: Lược đồ tuần tự thêm sản phẩm.

71 Hình 75: Giao diện thêm sản phẩm. 72 Hình 76: Activity diagram cập nhật sản phẩm. 72 Hình 77: Lược đồ tuần tự cập nhật sản phẩm. 73 Hình 78: Giao diện cập nhật sản phẩm.

74 Hình 79: Activity diagram xóa sản phẩm. 75 Hình 80: Lược đồ tuần tự xóa sản phẩm. 76 Hình 81: Giao diện xóa sản phẩm. 77 Hình 82: Activity diagram xóa người dùng.

77 Hình 83: Lược đồ tuần tự xóa người dùng. 78 Hình 84: Giao diện xóa người dùng. 79 Hình 85: Activity diagram quản lý đơn hàng. 79 Hình 86: Lược đồ tuần tự quản lý người dùng.

80 Hình 87: Giao diện quản lý người dùng. 81 Hình 88: Activity diagram cập nhật trạng thái đơn hàng. 81 VIII Hình 89: Lược đồ tuần tự cập nhật trạng thái đơn hàng. 83 Hình 90: Giao diện cập nhật trạng thái đơn hàng.

83 Hình 91: Activity diagram xét giảm giá. 84 Hình 92: Lược đồ tuần tự xét giảm giá. 85 Hình 93: Giao diện xét giảm giá. 85 Hình 94: Activity diagram thống kê.

86 Hình 95: Lược đồ tuần tự thống kê. 87 Hình 96: Giao diện thống kê. 88 Hình 97: Activity diagram tìm kiếm, lọc sản phẩm. 88 Hình 98: Lược đồ tuần tự tìm kiếm, lọc sản phẩm.

90 Hình 99: Giao diện tìm kiếm, lọc sản phẩm phía quản trị viên. 90 Hình 100: Giao diện tìm kiếm, lọc sản phẩm phía người dùng. 91 Hình 101: Activity diagram xem chi tiết sản phẩm. 91 Hình 102: Lược đồ tuần tự xem chi tiết sản phẩm.

93 Hình 103: Giao diện chi tiết sản phẩm. 93 Hình 104: Activity diagram hướng dẫn chọn size. 94 Hình 105: Lược đồ tuần tự hướng dẫn chọn size. 95 Hình 106: Giao diện hướng dẫn chọn size.

95 Hình 107: Activity diagram thêm sản phẩm vào giỏ. 96 Hình 108: Lược đồ tuần tự thêm sản phẩm vào giỏ. 97 Hình 109: Giao diện thêm sản phẩm vào giỏ. 98 Hình 110: Activity diagram tăng giảm số lượng sản phẩm trong giỏ.

99 Hình 111: Lược đồ tuần tự tăng giảm số lượng sản phẩm trong giỏ. 101 Hình 112: Giao diện tăng giảm số lượng sản phẩm trong giỏ. 101 Hình 113: Activity diagram xóa sản phẩm trong giỏ. 102 Hình 114: Lược đồ tuần tự xóa sản phẩm trong giỏ.

103 Hình 115: Giao diện xóa sản phẩm trong giỏ. 103 Hình 116: Activity diagram cập nhật thông tin cá nhân. 104 Hình 117: Lược đồ tuần tự cập nhật thông tin cá nhân. 105 Hình 118: Giao diện cập nhật thông tin cá nhân.

106 IX Hình 119: Activity diagram thay đổi mật khẩu. 106 Hình 120: Lược đồ tuần tự thay đổi mật khẩu. 108 Hình 121: Giao diện thay đổi mật khẩu. 109 Hình 122: Activity diagram thêm thông tin nhận hàng.

109 Hình 123: Lược đồ tuần tự thêm thông tin nhận hàng. 110 Hình 124: Giao diện thêm thông tin nhận hàng. 111 Hình 125: Activity diagram xóa thông tin nhận hàng. 111 Hình 126: Lược đồ tuần tự xóa thông tin nhận hàng.

112 Hình 127: Giao diện xóa thông tin nhận hàng. 113 Hình 128: Activity diagram checkout đơn hàng. 113 Hình 129: Lược đồ tuần tự checkout đơn hàng. 115 Hình 130: Giao diện checkout đơn hàng.

115 Hình 131: Activity diagram thanh toán sau khi nhận hàng. 116 Hình 132: Lược đồ tuần tự thanh toán sau khi nhận hàng .