Tìm hiểu công nghệ MERN stack để xây dựng website thương mại điện tử về thời trang

Khoá luận: Ứng dụng MERN stack xây dựng website thương mại điện tử thời trang tại ĐH SPKT TP.HCM

• Tác giả: Nguyễn Dương Đạt
• Người hướng dẫn: ThS. Mai Anh Thơ
• 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: Tìm hiểu công nghệ MERN stack để xây dựng website thương mại điện tử về thời trang
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan nghiên cứu MERN stack xây dựng website thời trang

Nghiên cứu ứng dụng MERN stack xây dựng website thời trang tại ĐH Sư phạm Kỹ thuật TP.HCM đại diện cho xu hướng chuyển dịch công nghệ web hiện đại. Đề tài tốt nghiệp ngành Công nghệ thông tin khai thác trọn vẹn sức mạnh từ JavaScript toàn diện trên cả giao diện lẫn máy chủ. Kiến trúc MERN bao gồm bốn thành phần cốt lõi: MongoDB, ExpressJS, ReactJS và NodeJS. Mỗi thành phần đảm nhận vai trò chuyên biệt tạo nên chuỗi xử lý dữ liệu khép kín, mượt mà. Đề tài hướng tới việc giải quyết bài toán vận hành bán lẻ hàng thời trang trực tuyến vốn đòi hỏi tính thẩm mỹ cao, tốc độ phản hồi tức thì và khả năng mở rộng linh hoạt. Quá trình phát triển đồ án tập trung tối ưu hóa hiệu năng ứng dụng thông qua việc chia tách mô hình front-end và back-end độc lập. Cách tiếp cận này loại bỏ hoàn toàn các rào cản truyền thống về đồng bộ mã nguồn, giảm độ trễ truy vấn và nâng cao trải nghiệm người dùng cuối. Đồ án tạo ra cơ sở thực tiễn vững chắc cho sinh viên công nghệ phần mềm.

1.1. Bối cảnh thực hiện đề tài tại khoa Chất lượng cao

Khoa Đào tạo Chất lượng cao thuộc Đại học Sư phạm Kỹ thuật TP.HCM chú trọng đào tạo thực hành chuyên sâu. Đề tài khóa luận năm 2022 của sinh viên Nguyễn Dương Đạt và Phạm Ngọc Hưng dưới sự hướng dẫn của ThS. Mai Anh Thơ phản ánh sát thực tế nhu cầu chuyển đổi số. Lĩnh vực bán lẻ thời trang đòi hỏi nền tảng bán hàng tương tác trực quan và giao dịch ổn định. Sinh viên áp dụng kiến thức chuyên ngành kỹ thuật phần mềm để giải quyết bài toán thương mại điện tử thực thụ. Hệ thống đáp ứng các tiêu chuẩn khắt khe về cấu trúc phần mềm hiện đại và khả năng bảo trì mã nguồn dài hạn.

1.2. Định vị công nghệ MERN trong phát triển web thương mại

MERN stack khẳng định vị thế dẫn đầu trong lập trình web thương mại điện tử đương đại nhờ tính thống nhất ngôn ngữ. Việc sử dụng JavaScript xuyên suốt từ client đến server giúp tinh giản quy trình xây dựng ứng dụng. ReactJS mang lại giao diện người dùng sống động với cơ chế Virtual DOM tối ưu tốc độ kết xuất đồ họa. NodeJS phối hợp cùng ExpressJS thiết lập hệ thống máy chủ xử lý bất đồng bộ mạnh mẽ, chịu tải tốt trước lượng truy cập lớn. Cơ sở dữ liệu phi quan hệ MongoDB lưu trữ tài liệu linh hoạt theo cấu trúc JSON trực quan. Sự phối hợp này tạo nên chu trình xử lý đơn hàng thời trang trơn tru, bảo mật và hiệu quả.

II. Phân tích thách thức khi xây dựng website thời trang thực tế

Website bán hàng thời trang trực tuyến đối mặt với nhiều yêu cầu kỹ thuật phức tạp. Người tiêu dùng luôn kỳ vọng tốc độ tải trang dưới hai giây và trải nghiệm mua sắm mượt mà. Hình ảnh trang phục cần độ phân giải cao nhưng phải hiển thị tức thì trên mọi thiết bị di động. Kiến trúc monolithic cũ thường gây nghẽn cổ chai khi số lượng khách truy cập cùng lúc tăng đột biến. Việc xử lý trạng thái giỏ hàng, cập nhật biến thể kích cỡ và màu sắc đòi hỏi hệ thống dữ liệu có độ linh hoạt rất cao. Cơ sở dữ liệu quan hệ truyền thống gặp khó khăn khi liên tục thay đổi thuộc tính sản phẩm thời trang. Ngoài ra, việc duy trì trạng thái đăng nhập và bảo mật phiên giao dịch cũng tiềm ẩn rủi ro nếu thiếu middleware quản lý chuyên dụng. Các lỗi đồng bộ giữa giỏ hàng cục bộ và máy chủ trung tâm dễ dẫn đến tình trạng hủy đơn ngoài ý muốn. Những thách thức này đòi hỏi một giải pháp công nghệ toàn diện và tối ưu hóa ở cả hai tầng front-end và back-end.

2.1. Hạn chế về trải nghiệm và quản lý phiên mua hàng

Trải nghiệm khách hàng phụ thuộc mật thiết vào tốc độ kết xuất dữ liệu giỏ hàng. Khi người dùng thao tác chọn size, đổi màu hoặc thay đổi số lượng, giao diện không được phép tải lại toàn bộ trang. Việc mất dữ liệu giỏ hàng khi người dùng vô tình làm mới trình duyệt tạo ra sự ức chế lớn. Khâu quản lý trạng thái đơn hàng cũng dễ phát sinh lỗi bất đồng bộ giữa máy trạm và cơ sở dữ liệu. Nghiên cứu use case UC_12.1 chỉ ra sự cố truy xuất database có thể làm gián đoạn tính năng xem và hủy đơn. Điều này đòi hỏi cơ chế lưu trữ đệm tin cậy để bảo vệ dữ liệu người dùng.

2.2. Khó khăn trong lưu trữ hình ảnh và mở rộng hệ thống

Kinh doanh thời trang đòi hỏi kho tài nguyên hình ảnh chất lượng cao và bộ sưu tập đa dạng. Việc lưu trữ trực tiếp tệp đa phương tiện trên máy chủ ứng dụng gây lãng phí băng thông và làm suy giảm hiệu năng nghiêm trọng. Tốc độ phản hồi của máy chủ bị kéo dài khi có hàng nghìn lượt truy cập đồng thời vào các mùa giảm giá. Cơ sở dữ liệu truyền thống với các ràng buộc khóa ngoại cứng nhắc gây trở ngại lớn cho việc mở rộng danh mục hàng hóa. Đồ án nhận định sự cần thiết phải phân tách lưu trữ đám mây chuyên dụng để tối ưu hóa chi phí vận hành và tăng cường khả năng chịu tải.

III. Giải pháp MERN stack xây dựng website thời trang toàn diện

Đồ án tốt nghiệp tại ĐH Sư phạm Kỹ thuật TP.HCM triển khai mô hình kiến trúc năm thành phần kết hợp chặt chẽ. Hệ thống front-end sử dụng ReactJS kết hợp thư viện Axios để gửi yêu cầu mạng và Moment để định dạng thời gian. Thư viện React Redux và Redux Persist đảm nhận vai trò quản lý trạng thái, đồng thời lưu giữ thông tin giỏ hàng bền vững trong localStorage. Người dùng đăng nhập nhanh chóng bằng tài khoản Google thông qua react-google-login, trong khi Notistack chịu trách nhiệm hiển thị thông báo tương tác. Ở tầng back-end, NodeJS và ExpressJS xây dựng hệ thống RESTful API an toàn với các tầng middleware kiểm soát quyền truy cập chặt chẽ. Dữ liệu catalog sản phẩm và hóa đơn lưu trữ trên MongoDB Atlas với khả năng mở rộng linh hoạt. Toàn bộ hình ảnh mẫu mã thời trang tải lên dịch vụ đám mây Cloudinary nhằm giảm tải băng thông máy chủ. Giải pháp tích hợp này tạo nên nền tảng thương mại điện tử hoàn chỉnh, vận hành ổn định và bảo mật cao.

3.1. Thiết kế tầng front end với ReactJS và hệ sinh thái thư viện

Hệ thống front-end xây dựng trên nền tảng ReactJS giúp phân chia giao diện thành các thành phần tái sử dụng độc lập. Thư viện React Router DOM điều hướng các trang danh mục và chi tiết sản phẩm mượt mà không cần tải lại trang. State giỏ hàng được quản lý tập trung bằng Redux kết hợp Redux Persist để duy trì dữ liệu khi đóng phiên làm việc. Tương tác API thực hiện qua Axios với khả năng chặn lỗi và tự động làm mới token bảo mật. Thông báo trực quan qua Notistack giúp người mua theo dõi ngay lập tức các thao tác thêm hàng vào giỏ hoặc đặt hàng thành công.

3.2. Xây dựng dịch vụ back end và tích hợp điện toán đám mây

Tầng back-end sử dụng NodeJS và ExpressJS xây dựng kiến trúc dịch vụ phân tầng rõ ràng giữa router, controller và model. Hệ thống xử lý các quy trình nghiệp vụ như lọc sản phẩm thời trang, tính toán khuyến mãi và thanh toán trực tuyến. Cơ sở dữ liệu MongoDB Atlas lưu trữ cấu trúc danh mục linh hoạt dưới dạng BSON có chỉ mục tối ưu. Cloudinary tiếp nhận nhiệm vụ nén và phân phối hình ảnh trang phục qua mạng phân phối nội dung CDN. Quy trình use case xử lý đơn hàng gồm các bước kiểm tra tồn kho, cập nhật trạng thái đơn và hỗ trợ hủy đơn an toàn khi có yêu cầu hợp lệ.

IV. Kết luận về ứng dụng MERN stack xây dựng website thời trang

Đồ án tốt nghiệp tại ĐH Sư phạm Kỹ thuật TP.HCM khẳng định tính khả thi vượt trội của công nghệ MERN stack trong thương mại điện tử. Hệ thống website thời trang vận hành trơn tru, đáp ứng đầy đủ chu trình mua bán từ chọn lựa hàng hóa đến thanh toán trực tuyến. Mô hình tách biệt giao diện và máy chủ giúp tối ưu hóa hiệu năng, giảm thời gian phản hồi và hạn chế xung đột dữ liệu. Việc tích hợp các dịch vụ đám mây như MongoDB Atlas và Cloudinary mang lại khả năng mở rộng tài nguyên linh hoạt theo lưu lượng thực tế. Nghiên cứu cung cấp tài liệu kỹ thuật có giá trị thực tiễn cao cho sinh viên ngành công nghệ phần mềm tham khảo và triển khai. Đề tài mở ra tiềm năng ứng dụng thực tế cho các doanh nghiệp thời trang vừa và nhỏ muốn xây dựng giải pháp bán hàng độc lập. Khả năng bảo trì mã nguồn và mở rộng tính năng chứng minh MERN stack là lựa chọn lý tưởng cho các hệ thống trực tuyến hiện đại.

4.1. Đánh giá kết quả thực nghiệm và giá trị học thuật

Hội đồng chấm khóa luận tốt nghiệp tại ĐH Sư phạm Kỹ thuật TP.HCM đánh giá cao tính hoàn thiện của đề tài. Các use case từ hiển thị danh mục, giỏ hàng đến xử lý hủy đơn đều hoạt động chuẩn xác theo kịch bản thiết kế. Giao diện trực quan trên nền ReactJS tạo cảm giác mua sắm liền mạch cho khách hàng. Hệ thống back-end xử lý mượt mà hàng trăm yêu cầu đồng thời mà không xảy ra sự cố nghẽn mạng. Đồ án chứng minh năng lực tự chủ công nghệ và khả năng chuyển hóa lý thuyết thành sản phẩm thực tế của sinh viên công nghệ thông tin.

4.2. Định hướng phát triển ứng dụng di động và trí tuệ nhân tạo

Nền tảng MERN stack mở ra nhiều tiềm năng mở rộng tính năng trong tương lai. Kiến trúc sẵn có cho phép chuyển đổi giao diện sang ứng dụng di động đa nền tảng bằng React Native nhanh chóng. Việc kế thừa cùng một mã nguồn JavaScript và kết nối chung hệ thống RESTful API giúp tối ưu hóa chi phí phát triển. Hệ thống có thể tích hợp thêm các mô hình trí tuệ nhân tạo để gợi ý trang phục cá nhân hóa dựa trên lịch sử mua hàng. Xu hướng này giúp nâng cao doanh số và tối đa hóa trải nghiệm người dùng trong thị trường bán lẻ thời trang cạnh tranh cao.

Nội dung chính

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

Khóa luận tốt nghiệp của sinh viên Nguyễn Dương Đạt và Phạm Ngọc Hưng (ngành Công nghệ Thông tin, chuyên ngành Công nghệ Phần mềm, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh) đặt trong bối cảnh công nghệ thông tin phát triển nhanh chóng và nhu cầu mua sắm trực tuyến ngày càng gia tăng, đặc biệt ở nhóm khách hàng từ 16 tuổi trở lên. Đồng thời, đối với những người mới bắt đầu kinh doanh chưa có nhiều vốn hoặc kinh nghiệm, hoặc các cửa hàng truyền thống có nhu cầu mở rộng kênh thương mại điện tử, việc xây dựng một hệ thống bán lẻ trực tuyến hoàn chỉnh hỗ trợ trên nền tảng website là một yêu cầu thực tế cấp thiết.

Theo phiếu nhiệm vụ khóa luận, đề tài thực hiện các nhiệm vụ nghiên cứu sau:

1. Xây dựng website bán quần áo thời trang dựa vào công nghệ MERN stack.
2. Kết nối website với các dịch vụ (services) bên thứ ba để giải quyết các yêu cầu của bài toán (lưu trữ hình ảnh, thanh toán trực tuyến, gửi email).
3. Trình bày đầy đủ các tính năng trong bài thuyết trình đáp ứng đúng các yêu cầu đã đề ra.

Mục tiêu cụ thể của đồ án được tác giả xác định gồm 4 nội dung:

1. Tìm hiểu công nghệ MERN stack để ứng dụng xây dựng website thương mại điện tử.
2. Tìm hiểu và tích hợp các dịch vụ bên thứ ba nhằm hiện thực hóa các chức năng lưu trữ hình ảnh, thanh toán trực tuyến và gửi email.
3. Xây dựng hoàn chỉnh một website thời trang đáp ứng các chức năng cơ bản cho khách hàng từ 16 tuổi trở lên; cung cấp công cụ quản trị đơn hàng, sản phẩm, đối soát doanh thu và các tiện ích thanh toán trực tuyến.
4. Xây dựng tính năng theo dõi hành vi người dùng bằng công cụ phân tích để đưa ra các gợi ý sản phẩm phù hợp dựa trên dữ liệu thao tác của khách hàng.

Đối tượng và phạm vi nghiên cứu:

• Đối tượng nghiên cứu: Mô hình kiến trúc ứng dụng web thương mại điện tử ngành thời trang sử dụng ngăn xếp MERN và các dịch vụ đám mây phụ trợ.
• Phạm vi không gian: Ứng dụng web được triển khai vận hành trên môi trường mạng internet thông qua các nền tảng đám mây.
• Phạm vi thời gian: Đề tài được giao ngày 07/03/2022 và hoàn thành nộp báo cáo vào ngày 18/06/2022.
• Đối tượng phục vụ: Khách hàng vãng lai, khách hàng thành viên có độ tuổi từ 16 trở lên và nhà quản trị website.

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

Khóa luận sử dụng khung kiến trúc MERN stack kết hợp mô hình phân tách độc lập giữa hệ thống giao diện (Front-End) và hệ thống xử lý nghiệp vụ (Back-End) thông qua giao thức chuẩn RESTful API:

• MongoDB: Hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) lưu trữ dữ liệu dưới dạng tài liệu (document), kết hợp với thư viện Mongoose Object Data Modeling (ODM) để ánh xạ và thao tác dữ liệu từ phía máy chủ.
• ExpressJS: Khung làm việc (web framework) xây dựng trên nền tảng NodeJS, đóng vai trò tiếp nhận yêu cầu, xử lý định tuyến (routing), cung cấp cơ chế phần mềm trung gian (middleware) để phân luồng và kiểm soát dữ liệu.
• ReactJS: Thư viện JavaScript mã nguồn mở phục vụ xây dựng giao diện người dùng đơn trang (Single Page Application - SPA), xử lý hiển thị dữ liệu động và phản hồi tương tác thời gian thực.
• NodeJS: Môi trường thực thi mã JavaScript phía máy chủ (runtime environment).

Phương pháp nghiên cứu thực tế đã áp dụng:

• Phương pháp khảo sát hiện trạng và đối chuẩn thực tiễn: Nhóm tác giả tiến hành khảo sát, đánh giá trực tiếp 04 website thương mại điện tử đang vận hành trên thị trường gồm Canifa (canifa.com), Elise (elise.vn), Chanel (com/vn) và Gucci (com). Kết quả khảo sát điểm mạnh, điểm yếu của từng hệ thống là cơ sở để trích xuất danh sách yêu cầu chức năng và phi chức năng cho sản phẩm.
• Phương pháp phân tích và thiết kế phần mềm hướng đối tượng: Sử dụng ngôn ngữ mô hình hóa thống nhất (UML) để xây dựng sơ đồ trường hợp sử dụng (Use Case Diagram), ma trận phân quyền tác nhân (Actor), bảng đặc tả ca sử dụng chi tiết, lược đồ tuần tự (Sequence Diagram) và mô hình liên kết thực thể dữ liệu.
• Phương pháp kiểm thử phần mềm: Kiểm nghiệm chức năng thực tế của từng mô-đun quan trọng trên môi trường phát triển và môi trường thử nghiệm (Sandbox).
• Nguồn dữ liệu: Dữ liệu khảo sát nghiệp vụ thực tế; dữ liệu danh mục, sản phẩm, kích thước, màu sắc và giao dịch mẫu được khởi tạo và lưu trữ trên cụm dịch vụ đám mây MongoDB Atlas.

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc module hóa phân tán, phân định rõ ràng giữa các tầng công nghệ và các dịch vụ đám mây phụ trợ:

Thành phần hệ thống	Công nghệ / Dịch vụ sử dụng	Vai trò và nhiệm vụ kỹ thuật
Front-End	ReactJS, React-Redux, Redux-Persist, React-Router-DOM, Axios, Moment, Notistack, React-Google-Login	Xây dựng giao diện tương tác người dùng; quản lý trạng thái tập trung; lưu trữ dữ liệu phiên vào LocalStorage; gọi RESTful API; xử lý dữ liệu ngày tháng; hiển thị thông báo.
Back-End	NodeJS, ExpressJS, Mongoose	Xây dựng máy chủ ứng dụng RESTful API; quản lý các middleware xác thực và kiểm tra tính hợp lệ của dữ liệu; điều phối luồng nghiệp vụ.
Cơ sở dữ liệu	Cloud MongoDB (MongoDB Atlas)	Lưu trữ cơ sở dữ liệu trên nền tảng đám mây; đảm bảo khả năng kết nối trực tuyến và thiết lập các chính sách bảo mật dữ liệu.
Thanh toán trực tuyến	PayPal Sandbox, VNPay Sandbox	Cung cấp môi trường kiểm thử thanh toán trực tuyến qua cổng quốc tế (PayPal) và cổng nội địa thanh toán bằng tiền Việt Nam (VNPay).
Google Cloud Service	Google OAuth 2.0, OAuth Playground, Nodemailer	Cung cấp tính năng xác thực đăng nhập tài khoản Gmail; thiết lập cơ chế ủy quyền để gửi email xác thực và đơn hàng an toàn qua giao thức mạng.
Theo dõi người dùng	Google Analytics	Theo dõi hành vi truy cập theo thời gian thực (vị trí địa lý, thiết bị); thống kê các trang được quan tâm và hỗ trợ gợi ý xu hướng tìm kiếm.
Lưu trữ đa phương tiện	Cloudinary	Lưu trữ dữ liệu hình ảnh sản phẩm trên cloud; phân phối ảnh lên internet thông qua đường dẫn công khai và tùy chỉnh kích thước hiển thị.
Triển khai (Deployment)	Vercel (Front-End), Heroku (Back-End)	Vercel hỗ trợ cài đặt domain, tối ưu câu lệnh build cho ReactJS; Heroku cung cấp chứng chỉ SSL miễn phí, gói dịch vụ đa dạng và liên kết mã nguồn GitHub.

Kiểm thử hệ thống được thực hiện thông qua các kịch bản kiểm thử chức năng (Functional Testing) trên các giao diện trọng yếu:

• Kiểm thử chức năng đăng nhập bằng tài khoản nội bộ website.
• Kiểm thử xác thực đăng nhập thông qua tài khoản Google OAuth.
• Kiểm thử luồng đăng ký người dùng mới.
• Kiểm thử tương tác giỏ hàng (thêm sản phẩm, tăng giảm số lượng, xóa sản phẩm).
• Kiểm thử quy trình giao dịch thanh toán thông qua cổng kiểm thử PayPal Sandbox.

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

Chương 1: Tổng quan

Chương 1 trình bày lý do chọn đề tài dựa trên sự phát triển của công nghệ thông tin và nhu cầu gia tăng về mua sắm trực tuyến của người tiêu dùng từ 16 tuổi trở lên. Nhóm tác giả xác định nhiệm vụ xây dựng website thương mại điện tử chuyên ngành thời trang bằng MERN stack, đồng thời đưa ra 4 mục tiêu cụ thể: nghiên cứu công nghệ, kết nối dịch vụ bên thứ ba (lưu trữ ảnh, thanh toán, email), hoàn thiện chức năng bán hàng và quản trị, tích hợp Google Analytics để theo dõi hành vi người dùng nhằm gợi ý sản phẩm.

Chương 2: Khảo sát hiện trạng

Chương 2 tổng hợp kết quả phân tích hiện trạng từ 4 website thời trang thương mại điện tử thực tế:

Tên website	Địa chỉ truy cập	Ưu điểm ghi nhận	Nhược điểm ghi nhận
CANIFA	https://canifa.com/	Giao diện tạm ổn; nhiều sản phẩm; thông tin chi tiết đầy đủ (xuất xứ, hướng dẫn sử dụng); có gợi ý sản phẩm liên quan; có dịch vụ chatbox hỗ trợ.	Hình thức chỉ đạt mức trung bình, kiểu dáng trang web khá đại trà, chưa tạo điểm nhấn thu hút thêm người dùng.
ELISE	https://elise.vn/	Thiết kế mới mẻ với slider trang chủ; khu vực tìm kiếm dễ nhìn; có chatbox hỗ trợ; hình ảnh mẫu trực quan; có tính năng lưu danh sách yêu thích (wishlist).	Thông tin sản phẩm chưa chi tiết (chỉ có giá và đánh giá, thiếu xuất xứ và chất liệu); giao diện hiển thị giỏ hàng đầy đủ khá to.
CHANNEL	https://www.com/vn/	Giao diện đẹp mắt, dễ thao tác; hỗ trợ ngôn ngữ tiếng Việt; bố trí logo và danh mục dễ quan sát; tốc độ tải trang nhanh.	Thiếu tính năng tương tác hỗ trợ trực tiếp (live chat); không có phần nhận xét đánh giá của khách hàng.
GUCCI	https://www.com/	Giao diện đẹp mắt; sử dụng banner động; bố trí logo và hệ thống danh mục trực quan, dễ thấy.	Chỉ hỗ trợ tiếng Anh và các quốc gia Châu Âu, chưa hỗ trợ ngôn ngữ tiếng Việt.

Dựa trên khảo sát, chương 2 xác lập hệ thống yêu cầu chức năng cho 3 nhóm tác nhân:

• Khách hàng vãng lai (Guest): Xem giao diện trang chủ, danh sách sản phẩm; tìm kiếm sản phẩm; xem thông tin chi tiết; đăng ký tài khoản; đăng nhập qua biểu mẫu website hoặc qua Google.
• Khách hàng (Users): Xem danh mục và chi tiết sản phẩm; quản lý tài khoản cá nhân (sửa thông tin, đổi mật khẩu); quản lý giỏ hàng (thêm, xóa, chỉnh sửa số lượng); đặt hàng (thanh toán thông thường hoặc qua PayPal); xem lịch sử đơn hàng và thực hiện quyền hủy đơn hàng khi hệ thống cho phép.
• Quản trị viên (Admin): Quản lý người dùng (thêm, sửa thông tin, kích hoạt tài khoản); quản lý danh mục và danh mục con (thêm, xóa, sửa, kích hoạt trạng thái, thêm hình ảnh); quản lý sản phẩm (thêm, xóa, sửa sản phẩm và hình ảnh); quản lý kích thước, màu sắc và số lượng tồn; quản lý đơn hàng chờ xác nhận và đơn hàng đã hoàn tất; quản lý các chương trình khuyến mãi (flash sale); quản lý mã giảm giá (voucher) và theo dõi thống kê doanh thu.
• Yêu cầu phi chức năng: Đảm bảo tính dễ sử dụng (thao tác thuận tiện, giao diện thân thiện), tính hiệu quả cao (tốc độ tải dữ liệu nhanh), khả năng tương thích đa nền tảng, khả năng triển khai thực tế trên môi trường internet và tính dễ bảo trì.

Chương 3: Các công nghệ sử dụng

Chương 3 đi sâu vào lý thuyết và vai trò của các thành phần trong MERN stack (MongoDB, ExpressJS, ReactJS, NodeJS). Chương này phân tích chi tiết việc lựa chọn và ứng dụng các thư viện, dịch vụ hỗ trợ:

• Phía Front-End: Ứng dụng Axios kết nối RESTful API, Moment xử lý thời gian, Notistack hiển thị thông báo, Redux-Persist lưu trữ dữ liệu vào LocalStorage.
• Phía Back-End: Sử dụng ExpressJS với các middleware để xử lý dữ liệu và kiểm soát luồng thông tin trả về mã trạng thái cho Front-End.
• Hệ thống cơ sở dữ liệu: Thiết lập MongoDB Atlas trên đám mây, kết nối thông qua package Mongoose.
• Cổng thanh toán: Cài đặt và tích hợp môi trường PayPal Sandbox và VNPay Sandbox nhằm đa dạng hóa phương thức thanh toán tiền tệ quốc tế và Việt Nam.
• Dịch vụ Google: Cấu hình Google OAuth 2.0 và công cụ OAuth Playground kết hợp thư viện Nodemailer nhằm giải quyết triệt để lỗi không thể gửi email khi đưa ứng dụng lên internet; nhúng Google Analytics để theo dõi lưu lượng truy cập, vị trí địa lý và thiết bị người dùng.
• Dịch vụ Cloudinary: Cung cấp giải pháp tải lên và phân phối tài nguyên hình ảnh sản phẩm.
• Hạ tầng triển khai: Lựa chọn Vercel để triển khai Front-End và Heroku để lưu trữ máy chủ Back-End hỗ trợ chứng chỉ bảo mật SSL.

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

Chương 4 tập trung vào thiết kế dữ liệu, phân rã chức năng và thiết kế giao diện hệ thống:

• Bảng phân quyền tác nhân (Bảng 1 trong tài liệu) định nghĩa chi tiết quyền hạn của 3 nhóm tác nhân đối với 23 chức năng cụ thể:

STT	Tên chức năng	Khách hàng vãng lai	Khách hàng	Quản trị viên
1	Đăng ký	x
2	Đăng nhập	x	x
3	Đổi mật khẩu		x	x
4	Quên mật khẩu		x	x
5	Quản lý thông tin cá nhân		x	x
6	Xem trang chủ	x	x	x
7	Tìm kiếm sản phẩm	x	x	x
8	Xem chi tiết sản phẩm	x	x	x
9	Thêm sản phẩm vào giỏ hàng		x	x
10	Quản lý giỏ hàng		x
11	Đặt hàng		x
12	Quản lý tài khoản người dùng			x
13	Quản lý danh mục			x
14	Quản lý danh mục con			x
15	Quản lý sản phẩm			x
16	Xử lý đơn hàng vừa nhận			x
17	Quản lý lịch sử đơn hàng			x
18	Quản lý đơn hàng xác nhận thành công			x
19	Quản lý đơn đặt hàng		x	x
20	Quản lý sale sản phẩm			x
21	Quản lý kích thước và màu sắc sản phẩm			x
22	Quản lý voucher cho khách hàng		x	x
23	Quản lý thống kê doanh thu			x

• Danh mục sơ đồ Use Case (Bảng 2) phân chia hệ thống thành 21 nhóm trường hợp sử dụng chính (từ UC_1 đến UC_21).
• Đặc tả ca sử dụng và lược đồ tuần tự: Tài liệu chi tiết hóa luồng sự kiện chính (Main Flow), luồng thay thế (Alternate Flow), điều kiện tiên quyết (Pre-conditions), kết quả sau thực hiện (Post-conditions) và xử lý ngoại lệ (Exception) cho các ca sử dụng then chốt:
  • UC_2 (Log in): Xử lý đăng nhập bằng tài khoản hệ thống hoặc xác thực Google OAuth.
  • UC_9 (Thêm sản phẩm vào giỏ hàng): Kiểm tra số lượng tồn kho theo màu sắc và kích thước sản phẩm trước khi cập nhật giỏ hàng.
  • UC_10.1 và UC_10.2 (Quản lý giỏ hàng): Chỉnh sửa số lượng sản phẩm bằng nút tăng/giảm và xóa sản phẩm khỏi giỏ hàng.
  • DTH_11.1 và DTH_11.2 (Đơn đặt hàng và thanh toán): Tạo đơn hàng với thông tin địa chỉ, người nhận, số điện thoại và chuyển hướng cổng thanh toán PayPal Sandbox.
  • UC_12.1 (Quản lý đơn hàng cá nhân): Truy cập tài khoản để theo dõi danh sách đơn theo trạng thái (chờ xử lý, chờ vận chuyển, vận chuyển thành công, đã hủy, vận chuyển thất bại) và thực hiện chức năng hủy đơn hàng đang xử lý.
• Thiết kế giao diện: Bố trí cấu trúc trực quan cho toàn bộ 27 trang chức năng của hệ thống người dùng và phân hệ quản trị dashboard (đăng nhập, danh mục, chi tiết sản phẩm, giỏ hàng, thanh toán PayPal, quản trị danh mục/sản phẩm/màu sắc/kích thước, quản lý đơn hàng theo trạng thái xử lý, quản lý voucher và thống kê doanh số).

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

Chương 5 hướng dẫn chi tiết quy trình thiết lập, cấu hình biến môi trường và các bước vận hành hệ thống phần mềm trên môi trường máy chủ phát triển cũng như môi trường mạng internet. Đồng thời, chương này tổng hợp các bảng dữ liệu kiểm thử chức năng cho 5 tác vụ cốt lõi: kiểm thử đăng nhập hệ thống, kiểm thử đăng nhập qua Google, kiểm thử quy trình đăng ký, kiểm thử thao tác giỏ hàng và kiểm thử tích hợp giao dịch qua cổng PayPal Sandbox.

Chương 6: Kết luận và hướng phát triển

Chương 6 tổng kết các kết quả đạt được đối chiếu với mục tiêu đề ra ban đầu, nêu rõ những hạn chế và nhược điểm kỹ thuật phát sinh trong quá trình xây dựng phần mềm, đúc kết các bài học kinh nghiệm về quy trình phát triển và vạch ra định hướng mở rộng đề tài.

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

Kết quả chính đạt được của khóa luận:

• Hoàn thành xây dựng website thương mại điện tử chuyên về thời trang với đầy đủ các tính năng mua bán, thanh toán, quản lý đơn hàng và phân quyền tác nhân (Khách vãng lai, Khách hàng, Quản trị viên).
• Đưa sản phẩm vận hành thực tế trên môi trường internet thông qua việc kết hợp nền tảng Vercel (Front-End) và Heroku (Back-End).
• Tích hợp thành công các dịch vụ đám mây và cổng thanh toán bên thứ ba vào hệ thống:
  • Lưu trữ cơ sở dữ liệu trên Cloud MongoDB (MongoDB Atlas).
  • Tích hợp thanh toán trực tuyến thử nghiệm thông qua PayPal Sandbox và VNPay Sandbox.
  • Tích hợp Google OAuth 2.0 phục vụ đăng nhập bằng tài khoản Gmail; cấu hình thành công OAuth Playground kết hợp thư viện Nodemailer để gửi email xác thực đơn hàng trên môi trường internet.
  • Tích hợp Cloudinary phục vụ lưu trữ và phân phối hình ảnh sản phẩm.
  • Ứng dụng Google Analytics để theo dõi thông tin người dùng theo thời gian thực (vị trí địa lý, thiết bị truy cập) và cung cấp dữ liệu phục vụ hiển thị xu hướng tìm kiếm, sản phẩm được xem nhiều nhất.

Giải pháp và đóng góp do tác giả tự nêu:

• Đề xuất kiến trúc tích hợp toàn diện ngăn xếp MERN stack với các dịch vụ đám mây phụ trợ, chứng minh tính khả thi của việc xây dựng một hệ thống bán lẻ trực tuyến hoàn chỉnh bằng thuần ngôn ngữ JavaScript.
• Đưa ra giải pháp kỹ thuật khắc phục hiện tượng lỗi không thể gửi email thông báo khi đưa ứng dụng lên môi trường mạng bằng cách kết hợp Nodemailer với cơ chế ủy quyền của Google OAuth Playground.
• Cung cấp tài liệu phân tích hiện trạng đối chuẩn từ 4 thương hiệu thời trang thực tế (Canifa, Elise, Chanel, Gucci), từ đó chuyển hóa thành bộ đặc tả ca sử dụng và lược đồ tuần tự chi tiết làm tài liệu tham khảo cho quy trình phân tích thiết kế phần mềm.

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

Hạn chế của đề tài được tác giả ghi nhận trong văn bản:

• Do các thành viên thực hiện chưa có nhiều kinh nghiệm trong thiết kế và xây dựng phần mềm áp dụng quy trình công nghệ MERN stack (được nhóm đánh giá là quy trình còn khá mới đối với sinh viên), quá trình thi công hệ thống còn gặp nhiều vướng mắc kỹ thuật và sai sót.
• Giới hạn về mặt thời gian thực hiện (đồ án thực hiện từ tháng 03/2022 đến tháng 06/2022) và kiến thức còn hạn chế, khiến một số tính năng chưa đạt được độ hoàn thiện tối ưu.
• Phạm vi kiểm nghiệm hệ thống trong báo cáo mới chỉ dừng lại ở các ca kiểm thử chức năng cơ bản trên môi trường giả lập (Sandbox), chưa có dữ liệu đo lường về kiểm thử tải, hiệu năng chịu lỗi hay đánh giá bảo mật chuyên sâu.

Hướng phát triển tiếp theo được đề xuất:

• Tiếp tục rà soát, khắc phục các sai sót và điểm nghẽn kỹ thuật còn tồn đọng trong mã nguồn và quy trình xử lý dữ liệu.
• Phát triển thêm các tính năng mới nhằm hoàn thiện hệ thống quản lý và bán hàng.
• Nâng cấp cơ chế phân tích hành vi người dùng từ dữ liệu Google Analytics để hoàn thiện giải thuật gợi ý sản phẩm tự động, cá nhân hóa trải nghiệm mua sắm cho từng đối tượng khách hàng.

Giá trị tham khảo

Tài liệu khóa luận có giá trị tham khảo thiết thực đối với:

• 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 môn học hoặc khóa luận tốt nghiệp về đề tài xây dựng ứng dụng web thương mại điện tử bằng MERN stack (MongoDB, ExpressJS, ReactJS, NodeJS).
• Lập trình viên mới tiếp cận việc tích hợp các dịch vụ đám mây thực tế vào ứng dụng web, cụ thể là: phương thức cấu hình Nodemailer với Google OAuth Playground để gửi email; kỹ thuật nhúng Google Analytics giám sát người dùng; quy trình kết nối cổng thanh toán PayPal Sandbox và VNPay Sandbox; và giải pháp triển khai đa nền tảng (Vercel cho Front-End, Heroku cho Back-End).
• Những người nghiên cứu phân tích hệ thống có thể tham khảo trực tiếp cấu trúc phân rã trường hợp sử dụng (Bảng 1 và Bảng 2 tại Chương 4) cùng hệ thống lược đồ tuần tự mô tả chi tiết luồng xử lý giỏ hàng, kiểm tra số lượng tồn kho theo màu/size và đặt hàng.

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

1. Khóa luận giải quyết vấn đề gửi email thông báo trên môi trường internet bằng giải pháp kỹ thuật nào?
Nhóm tác giả chỉ ra rằng nếu chỉ sử dụng thư viện Nodemailer đơn thuần thì khi đưa ứng dụng lên môi trường internet sẽ xảy ra lỗi không thể gửi được email. Để khắc phục, nhóm đã sử dụng kết hợp Nodemailer với dịch vụ của Google thông qua công cụ OAuth Playground và giao thức Google OAuth để cấu hình ủy quyền gửi email xác thực và thông báo đơn hàng một cách ổn định ở mọi môi trường.

2. Nhóm nghiên cứu đã khảo sát những website thương mại điện tử nào và ghi nhận nhược điểm gì từ các hệ thống đó?
Nhóm tác giả đã tiến hành khảo sát 04 website: Canifa, Elise, Chanel và Gucci. Nhược điểm được ghi nhận gồm: Canifa có hình thức ở mức trung bình và kiểu dáng đại trà; Elise có thông tin sản phẩm chưa chi tiết (thiếu chất liệu, xuất xứ) và giỏ hàng xem đầy đủ khá to; Chanel thiếu dịch vụ live chat và không có mục nhận xét của khách hàng; Gucci chỉ hỗ trợ tiếng Anh và thị trường Châu Âu, chưa hỗ trợ giao diện tiếng Việt.

3. Hệ thống tích hợp những cổng thanh toán trực tuyến nào và luồng dữ liệu sau thanh toán được xử lý ra sao?
Hệ thống tích hợp hai môi trường thanh toán thử nghiệm là PayPal Sandbox (cổng thanh toán quốc tế) và VNPay Sandbox (cổng thanh toán nội địa bằng tiền Việt Nam). Khi người dùng tiến hành thanh toán qua PayPal Sandbox thành công, các dữ liệu đã xử lý từ sandbox sẽ được gửi ngược về hệ thống Back-End để tiến hành lưu trữ thông tin đơn hàng và cập nhật cơ sở dữ liệu.

4. Nhóm tác giả lựa chọn các nền tảng nào để triển khai hệ thống lên môi trường internet?
Hệ thống Front-End và Back-End được triển khai độc lập trên hai nền tảng đám mây khác nhau: Front-End được deploy trên Vercel do nền tảng này miễn phí, dễ cài đặt cấu hình, hỗ trợ gắn tên miền (domain) thuận tiện và hệ thống câu lệnh build đơn giản; Back-End được deploy trên Heroku nhờ các đặc điểm như hỗ trợ chứng chỉ SSL miễn phí, các gói dịch vụ đa dạng, hỗ trợ làm việc nhóm và khả năng liên kết trực tiếp với kho mã nguồn GitHub.

5. Phân hệ quản trị viên (Admin) được thiết kế những chức năng cụ thể nào để quản lý sản phẩm và đơn hàng?
Đối với sản phẩm, Admin có quyền thêm, xóa, chỉnh sửa thông tin/hình ảnh sản phẩm, đồng thời quản lý kích thước, màu sắc và số lượng tồn kho tương ứng của từng mặt hàng. Đối với đơn hàng, Admin quản lý đơn hàng qua hai trạng thái: xử lý các đơn hàng vừa nhận (xem chi tiết, xác nhận trạng thái, chỉnh sửa số lượng khi cần) và theo dõi các đơn hàng đã xác nhận thành công hoặc đã xử lý trong lịch sử.

Kết luận

Khóa luận tốt nghiệp của sinh viên Nguyễn Dương Đạt và Phạm Ngọc Hưng đã hoàn thành mục tiêu nghiên cứu và ứng dụng ngăn xếp MERN stack để xây dựng hoàn chỉnh một website thương mại điện tử chuyên ngành thời trang hướng tới đối tượng người dùng từ 16 tuổi trở lên. Đồ án giải quyết thành công các bài toán nghiệp vụ từ khảo sát thực tế, phân tích thiết kế Use Case, đến tích hợp đồng bộ các dịch vụ đám mây như MongoDB Atlas, Cloudinary, Google OAuth, Google Analytics cùng các cổng thanh toán thử nghiệm PayPal Sandbox và VNPay Sandbox. Mặc dù còn một số hạn chế do thời gian thực hiện có hạn và áp dụng quy trình công nghệ mới, sản phẩm phần mềm đã được triển khai thành công lên môi trường internet thông qua Vercel và Heroku, tạo nền tảng vững chắc cho các định hướng phát triển và hoàn thiện tiếp theo.

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

CHƯƠNG 1 : TỔNG QUAN 1.1 Lý do chọn đề tài Công nghệ thông tin ngày càng phát triển và trở nên phổ biến trong đời sống hiện nay, cùng với đó là nhu cầu mua sắm trực tuyến đang ngày càng cao của các khác hàng có độ tuổi từ 16 trở lên. Để có thể đáp ứng được với nhu cầu đó của đông đảo các khách hàng nhóm chúng em chọn đề tài: “Tìm hiểu công nghệ MERN stack để xây dựng website thương mại điện tử về thời trang” cho Khoá luận tốt nghiệp. Website hỗ trợ người dùng thực hiện việc mua hàng, thanh toán và đổi trả hàng và người chủ sở hữu của website có thể thực hiện việc kiểm soát các đơn hàng, danh mục, mặt hàng.2 Mục tiêu Tìm hiểu công nghệ MERN stack để xây dựng website. Tìm hiểu các services của bên thứ 3 để hiện thực các chứng năng như lưu trữ hình ảnh, thanh toán, gửi email.

Xây dựng một website thời trang với đầy đủ các chức năng cơ bản của một website bán hàng online dành cho các khách hàng từ 16 tuổi trở lên, đồng thời có thể quản trị được các đơn hàng cũng như sản phẩm được buôn bán trên website, quản lý đối soát doanh thu. Ngoài ra website cung cấp một số tiện ích cho người dùng như việc thanh toán online. Xây dựng tính năng theo dõi hành vi người dùng từ đó đưa ra các gợi ý phù hợp dựa vào dữ liệu của người dùng thao tác trên website. 1 CHƯƠNG 2 : KHẢO SÁT HIỆN TRẠNG 2.1 Khảo sát hiện trạng Thời trang luôn là một phần tất yếu của cuộc sống.

Việc kinh doanh các mặt hàng thời trang cũng từ đó mà trở nên sôi động, đặc biệt là trên nền tảng thương mại điện tử - đang là xu hướng kinh doanh hiện nay. Người mới bắt đầu chưa có vốn hoặc kinh nghiệm muốn bắt đầu với thương mại điện tử. Hoặc các cửa hàng muốn mở kênh thương mại điện tử. Vì vậy, một kênh thương mại điện tử được hỗ trợ trên cả nền tảng website và di động là điều cần thiết.

Hiện nay, nhu cầu mua sắm trực tuyến trở tăng mạnh do sự tiện lợi hoặc giá sẽ rẻ hơn chính vì thế các trang thương mại trở nên phổ biến hơn. Nhóm tiến hành hành khảo sát hiện trạng của một số trang thương mại điện tử phổ biến dựa vào đó để đưa ra các yêu cầu chức năng cũng như nâng cao thêm các tính năng.1 Website CANIFA Trang truy cập: • https://canifa.com/ Ưu nhược điểm của website: ❖ Ưu điểm: Hệ thống cho bao gồm các ưu điểm sau: - Giao diện tạm ổn. - Nhiều sản phẩm thu hút người mua. - Sản phẩm đầy đủ thông tin chi tiết, nơi xuất xứ, hướng dẫn sử dụng… - Có mục gợi ý các sản phẩm liên quan.

- Có dịch vụ chatbox hỗ trợ khách hàng. ❖ Nhược điểm: 2 Chỉ đạt ở mức độ trung bình về hình thức, web có kiểu khá đại trà, không thể thu hút thêm người dùng.2 Website ELISE Trang truy cập: • https://elise.vn/ Ưu nhược điểm của website: ❖ Ưu điểm: - Một kiểu thiết kế khá là mới mẻ khi sử dụng slider cho trang chủ. - Khu vực tìm kiếm dễ nhìn, có dịch vụ chatbox hỗ trợ khách hàng. - Nhiều sản phẩm đẹp, có người mẫu sản phẩm, trực quan.

- Có wishlist để giúp khách hàng có thể lưu lại những món hàng mà mình thích trong những khoản thời gian dài. ❖ Nhược điểm: - Sản phẩm chưa chi tiết, chỉ có giá với đánh giá, chưa cung cấp đủ thông tin cần thiết về xuất xứ, chất liệu sản phẩm. - Giỏ hàng khi xem đầy đủ khá to.3 Website CHANNEL Trang truy cập: • https://www.com/vn/ Ưu nhược điểm của website: ❖ Ưu điểm: 3 - Giao diện đẹp mắt, dễ thao tác.