Đồ án tốt nghiệp: Xây dựng website thương mại điện tử MERN Stack - HCMUTE

Hướng dẫn thực hiện đồ án tốt nghiệp xây dựng website thương mại điện tử với MERN stack. Chi tiết kiến trúc hệ thống, tích hợp thanh toán và quản lý đơn hàng.

• Tác giả: Ho Ngoc Dinh Chau
• Người hướng dẫn: TS. Le Van Vinh
• 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ệ phần mềm
• Đề tài: Xây dựng website thương mại điện tử bằng MERN Stack
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2021
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Ý nghĩa đồ án tốt nghiệp build ecommerce website using mern stack

Đề tài đồ án tốt nghiệp build ecommerce website using mern stack phản ánh nhu cầu số hóa mạnh mẽ của thị trường thương mại điện tử hiện đại. Doanh nghiệp cần các nền tảng web linh hoạt để tiếp cận khách hàng toàn cầu. Hệ thống website đóng vai trò cầu nối trực tiếp giữa người mua và nhà cung cấp. Việc ứng dụng công nghệ hiện đại giúp rút ngắn thời gian giao dịch và tối ưu hóa quy trình tiếp thị sản phẩm. MERN stack là sự kết hợp hoàn hảo giữa bốn công nghệ nền tảng bao gồm MongoDB, ExpressJS, ReactJS và NodeJS. Điểm đặc biệt của kiến trúc này là sử dụng ngôn ngữ JavaScript xuyên suốt từ giao diện người dùng đến tầng cơ sở dữ liệu. Điều này giúp giảm thiểu độ phức tạp khi chuyển đổi ngữ cảnh lập trình. Đề tài nghiên cứu tại Trường Đại học Sư phạm Kỹ thuật TP.HCM đã hiện thực hóa mô hình thương mại điện tử chuyên nghiệp. Hệ thống cung cấp đầy đủ tính năng từ quản lý danh mục, giỏ hàng, đặt hàng đến phân quyền quản trị đa cấp độ.

1.1. Khái niệm và cấu trúc cơ bản của MERN Stack

MERN stack là bộ công nghệ phần mềm mã nguồn mở hoàn chỉnh dựa trên nền tảng JavaScript. MongoDB đóng vai trò cơ sở dữ liệu NoSQL lưu trữ tài liệu dưới định dạng BSON linh hoạt. ExpressJS hoạt động như khung ứng dụng web phía máy chủ, chịu trách nhiệm quản lý định tuyến và các tầng middleware trung gian. ReactJS phụ trách xây dựng giao diện người dùng đơn trang thông qua mô hình thành phần độc lập và DOM ảo. Cuối cùng, NodeJS cung cấp môi trường thực thi mã máy chủ bất đồng bộ hiệu năng cao. Mô hình này giúp chuẩn hóa ngôn ngữ phát triển cho toàn bộ dự án phần mềm.

1.2. Vai trò của website thương mại điện tử trong kỷ nguyên số

Website thương mại điện tử là kênh phân phối chiến lược cho mọi doanh nghiệp hiện đại. Nền tảng trực tuyến xóa bỏ rào cản địa lý và cho phép hoạt động liên tục 24/7. Khách hàng có thể tìm kiếm, so sánh và mua sắm sản phẩm một cách nhanh chóng. Doanh nghiệp dễ dàng thu thập dữ liệu hành vi người dùng để tối ưu hóa chiến dịch tiếp thị. Quy trình xử lý đơn hàng tự động giúp cắt giảm đáng kể chi phí vận hành và nhân sự. Một hệ sinh thái thương mại điện tử ổn định là yếu tố then chốt tạo lợi thế cạnh tranh bền vững.

II. Khó khăn đồ án tốt nghiệp build ecommerce website using mern stack

Quá trình xây dựng website thương mại điện tử quy mô lớn đòi hỏi giải quyết nhiều bài toán kỹ thuật phức tạp. Vấn đề đầu tiên nằm ở việc quản lý trạng thái dữ liệu trên giao diện người dùng. Khi hệ thống có hàng loạt tương tác giỏ hàng, cập nhật số lượng và lọc danh mục, dữ liệu rất dễ rơi vào tình trạng phân mảnh. Các cuộc gọi API chồng chéo có thể dẫn đến hiện tượng tắc nghẽn và làm sai lệch thông tin hiển thị. Bên cạnh đó, việc thiết kế cơ sở dữ liệu phi quan hệ cho các nghiệp vụ thương mại điện tử cũng đặt ra thách thức lớn. MongoDB thiếu cơ chế ràng buộc toàn vẹn khóa ngoại tự động như cơ sở dữ liệu quan hệ truyền thống. Kỹ sư phải tự xây dựng logic xác thực dữ liệu tại tầng ứng dụng để tránh dư thừa hoặc mất mát thông tin đơn hàng. Hiệu năng của máy chủ khi xử lý nhiều phiên truy cập đồng thời là một vấn đề then chốt cần giải quyết triệt để.

2.1. Thách thức quản lý trạng thái và luồng dữ liệu

Các ứng dụng thương mại điện tử có luồng dữ liệu vô cùng phức tạp. Hành vi thêm sản phẩm vào giỏ hàng, xóa mặt hàng hoặc thay đổi mã giảm giá yêu cầu cập nhật đồng thời ở nhiều thành phần giao diện. Nếu truyền dữ liệu qua nhiều tầng component trung gian, mã nguồn sẽ trở nên cồng kềnh và khó bảo trì. Hiện tượng render lại không kiểm soát gây suy giảm hiệu năng trình duyệt đáng kể. Do đó, việc thiếu một giải pháp quản lý trạng thái tập trung sẽ khiến ứng dụng dễ phát sinh lỗi logic và mất kiểm soát dữ liệu.

2.2. Vấn đề bảo mật và xử lý bất đồng bộ phía máy chủ

Tầng máy chủ backend phải đối mặt với nguy cơ tấn công bảo mật và quá tải tài nguyên. Các giao dịch tài chính và thông tin người dùng đòi hỏi cơ chế mã hóa nghiêm ngặt. Việc xác thực danh tính qua JSON Web Token cần được cấu hình chuẩn xác để ngăn chặn truy cập trái phép. Ngoài ra, việc đọc ghi dữ liệu tập tin và cơ sở dữ liệu nếu xử lý theo mô hình đồng bộ sẽ làm máy chủ bị nghẽn luồng xử lý. Kỹ sư phải khai thác triệt để mô hình hướng sự kiện để duy trì tính liên tục của dịch vụ.

III. Giải pháp đồ án build ecommerce website using mern stack

Để giải quyết triệt để các rào cản kỹ thuật, đồ án áp dụng mô hình kiến trúc phân lớp chuẩn mực dựa trên MERN stack. Cơ sở dữ liệu MongoDB Atlas được thiết lập với cấu trúc lược đồ linh hoạt, tối ưu hóa việc đánh chỉ mục cho các truy vấn sản phẩm phức tạp. Tầng backend xây dựng bằng ExpressJS và NodeJS cung cấp hệ thống RESTful API an toàn, có khả năng xử lý bất đồng bộ cao và điều phối luồng dữ liệu trơn tru. Tại tầng giao diện, ReactJS được tích hợp cùng thư viện Redux nhằm chuẩn hóa việc quản lý trạng thái. Redux triển khai kiến trúc Flux với luồng dữ liệu một chiều nghiêm ngặt. Mọi trạng thái của toàn bộ ứng dụng được lưu trữ tập trung tại Store duy nhất. Khi người dùng kích hoạt hành động, các reducer sẽ xử lý biến đổi trạng thái và cập nhật tức thì lên giao diện mà không gây xung đột. Hệ thống còn tích hợp cơ chế xác thực phiên làm việc an toàn, quản lý vòng đời người dùng từ đăng nhập, duyệt hàng đến đăng xuất.

3.1. Ứng dụng Redux tối ưu hóa luồng dữ liệu một chiều

Redux đóng vai trò như một kho chứa trạng thái có thể dự đoán được cho toàn bộ ứng dụng. Kiến trúc này tuân thủ nguyên tắc nguồn chân lý duy nhất (Single Source of Truth). Mọi thay đổi trạng thái đều được kích hoạt thông qua các action cụ thể và xử lý bởi các hàm thuần túy gọi là reducer. Nhờ đó, các thành phần như giỏ hàng, bảng điều khiển người dùng và danh sách sản phẩm luôn duy trì dữ liệu đồng nhất. Việc kiểm thử và tìm lỗi mã nguồn trở nên dễ dàng và minh bạch hơn rất nhiều.

3.2. Thiết kế RESTful API và xử lý bất đồng bộ với NodeJS

NodeJS sử dụng kiến trúc đơn luồng với cơ chế Event Loop và I/O không chặn để phục vụ nhiều yêu cầu đồng thời. Khi nhận tác vụ đọc ghi tập tin hoặc truy vấn cơ sở dữ liệu, máy chủ gửi tác vụ xuống hệ thống rồi tiếp tục tiếp nhận yêu cầu mới ngay lập tức. Sau khi dữ liệu sẵn sàng, máy chủ mới phản hồi kết quả về client. Kết hợp với ExpressJS, hệ thống cung cấp các điểm cuối RESTful API chuẩn hóa, giúp việc trao đổi dữ liệu JSON giữa frontend và backend đạt tốc độ tối đa.

IV. Đánh giá đồ án tốt nghiệp build ecommerce website using mern stack

Đồ án tốt nghiệp build ecommerce website using mern stack khẳng định giá trị thực tiễn vượt trội của việc áp dụng công nghệ full-stack JavaScript. Hệ thống đáp ứng trọn vẹn các yêu cầu nghiệp vụ từ cơ bản đến nâng cao trong lĩnh vực bán lẻ trực tuyến. Trải nghiệm người dùng được tối ưu hóa nhờ giao diện mượt mà và tốc độ tải trang nhanh chóng. Kết quả nghiên cứu chứng minh MERN stack là lựa chọn lý tưởng cho các dự án thương mại điện tử vừa và nhỏ. Tính module hóa cao của ReactJS giúp tái sử dụng mã nguồn hiệu quả và rút ngắn chu kỳ phát triển sản phẩm. Khả năng mở rộng linh hoạt của MongoDB và NodeJS tạo tiền đề vững chắc cho việc nâng cấp hệ thống trong tương lai. Công trình không chỉ hoàn thành mục tiêu học thuật mà còn có thể chuyển giao làm nền tảng kinh doanh thực tế. Trong giai đoạn tiếp theo, hệ thống có thể tích hợp thêm cổng thanh toán trực tuyến và gợi ý sản phẩm.

4.1. Hiệu quả vận hành và khả năng mở rộng của hệ thống

Hệ thống đạt được sự ổn định cao sau các đợt kiểm thử chức năng và hiệu năng thực tế. Việc sử dụng định dạng JSON làm chuẩn dữ liệu duy nhất giúp giảm thiểu tối đa chi phí chuyển đổi thông tin giữa các tầng kiến trúc. Cơ sở dữ liệu đám mây MongoDB Atlas hỗ trợ mở rộng theo chiều ngang linh hoạt khi số lượng đơn hàng tăng đột biến. Nền tảng đảm bảo tính toàn vẹn dữ liệu cho các tác vụ then chốt như giỏ hàng, lịch sử giao dịch và tài khoản người dùng.

4.2. Hướng phát triển và tích hợp tính năng nâng cao

Dự án mở ra nhiều tiềm năng phát triển trong tương lai với kiến trúc mở. Hệ thống có thể dễ dàng tích hợp các cổng thanh toán điện tử phổ biến như Momo, ZaloPay hoặc Stripe để đa dạng hóa phương thức thanh toán. Việc bổ sung hệ thống gợi ý sản phẩm dựa trên học máy sẽ giúp cá nhân hóa trải nghiệm mua sắm cho từng khách hàng. Ngoài ra, việc triển khai công nghệ Progressive Web App (PWA) sẽ giúp website hoạt động mượt mà như một ứng dụng di động bản địa.

Nội dung chính

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

Khóa luận tốt nghiệp với đề tài "BUILD E-COMMERCE WEBSITE USING MERN STACK" (Xây dựng trang web thương mại điện tử bằng MERN Stack) được thực hiện bởi sinh viên Hồ Ngọc Đình Châu (MSSV: 17110008) và Nguyễn Thị Bích Nhàn (MSSV: 17110195), dưới sự hướng dẫn khoa học của TS. Lê Văn Vinh, thuộc ngành Công nghệ Phần mềm, Khoa Đào tạo Chất lượng cao, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh (niên khóa 2017 – 2021, hoàn thành vào tháng 06/2021).

Xuất phát từ bối cảnh chất lượng đời sống xã hội ngày càng gia tăng kéo theo nhu cầu mua bán hàng hóa trực tuyến tăng cao, nhóm tác giả nhận định thương mại điện tử là công cụ thiết yếu giúp doanh nghiệp quảng bá thương hiệu, mở rộng phạm vi tiếp cận khách hàng từ xa và tối ưu hóa thời gian giao dịch. Đề tài tập trung vào bài toán kinh doanh mặt hàng thời trang may mặc (Clothing items) với mục tiêu tạo ra công cụ hỗ trợ người dùng mua sắm thuận tiện và nâng cao hiệu quả vận hành bán hàng của doanh nghiệp. Về mặt kỹ thuật, thay vì các ngôn ngữ như Java, PHP hay C#, nhóm tác giả lựa chọn hệ sinh thái JavaScript/TypeScript nhằm xây dựng một hệ thống thương mại điện tử hiện đại, đồng bộ.

Theo văn bản khóa luận, nghiên cứu xác định các mục tiêu và nội dung cụ thể sau:

Mục tiêu nghiên cứu:

1. Giới thiệu các sản phẩm, mặt hàng của trang web (Introducing products and items of the website).
2. Hỗ trợ khách hàng nhắn tin với quản trị viên qua kết nối Messenger (Support the customers chat with admin by messenger connection).
3. Đặt mua hàng hóa và thực hiện thanh toán trực tuyến (Purchased items & Online payment).
4. Hỗ trợ chủ hệ thống quản lý danh mục sản phẩm (Support the system owner to manage the products).
5. Hỗ trợ chủ hệ thống quản lý đơn hàng và người dùng (Support the system owner to manage the orders & users).

Nội dung và nhiệm vụ nghiên cứu:

1. Tìm hiểu công nghệ MERN Stack.
2. Tìm hiểu cách quản lý cơ sở dữ liệu trên nền tảng MongoDB Atlas.
3. Tìm hiểu framework Express với mô hình kiến trúc MVC.
4. Tìm hiểu thư viện React và mô hình quản lý trạng thái Redux.
5. Tìm hiểu môi trường thực thi NodeJS.
6. Tìm hiểu nền tảng Heroku để triển khai giao diện lập trình ứng dụng (API).
7. Tìm hiểu nền tảng Netlify để triển khai trang web người dùng.

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

• Đối tượng nghiên cứu: Quy trình phân tích, thiết kế, xây dựng và triển khai hệ thống website thương mại điện tử chuyên doanh quần áo thời trang trên nền tảng MERN Stack.
• Phạm vi không gian: Đồ án thực hiện tại Khoa Đào tạo Chất lượng cao, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh.
• Phạm vi thời gian: Dữ liệu và kịch bản phát triển trong giai đoạn đào tạo 2017 – 2021, hoàn thành báo cáo vào tháng 06 và tháng 07 năm 2021.

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

Khóa luận xây dựng hệ thống trên nền tảng bộ giải pháp công nghệ MERN Stack và các mô hình kỹ thuật phần mềm liên quan:

Khung lý thuyết và công nghệ sử dụng:

• Khái niệm bộ giải pháp công nghệ (Technical Stack / Solution Stack): Nhóm tác giả tổng hợp 4 bộ công nghệ tiêu biểu được sử dụng phổ biến trong phát triển phần mềm:

Bộ công nghệ (Technical Stack)	Các công nghệ thành phần cấu thành
LAMP Stack	Linux, Apache, MySQL, PHP
WISA Stack	Windows, IIS, SQL Server, ASP.NET
MEAN Stack	MongoDB, Express, Angular, NodeJS
MERN Stack	MongoDB, Express, React, NodeJS

• Kiến trúc MERN Stack: Mô hình 3 tầng (3-tier architecture) xây dựng hoàn toàn bằng ngôn ngữ JavaScript và trao đổi dữ liệu qua định dạng JSON:
  • Tầng Client (Frontend): ReactJS xử lý giao diện người dùng, vận hành ứng dụng đơn trang (Single-Page Application - SPA), giao tiếp với máy chủ bằng kỹ thuật AJAX ngầm định giúp không cần tải lại toàn bộ trang web.
  • Tầng Server (Backend): NodeJS và ExpressJS đảm nhiệm xử lý logic nghiệp vụ, định tuyến (routing) và xác thực người dùng.
  • Tầng Cơ sở dữ liệu (Database): MongoDB đảm nhiệm việc tổ chức và lưu trữ dữ liệu dưới dạng tài liệu JSON/BSON.
• Cơ sở dữ liệu MongoDB và MongoDB Atlas: MongoDB là hệ quản trị cơ sở dữ liệu NoSQL hướng tài liệu (document-oriented). Dữ liệu dạng Document JSON linh hoạt, không bắt buộc ràng buộc chặt chẽ như RDBMS, tự động đánh chỉ mục trường _id, ghi nhận dữ liệu vào bộ nhớ đệm (memory cache) giúp truy vấn nhanh hơn. Văn bản trích dẫn kết quả kiểm nghiệm tốc độ chèn dữ liệu (insert speed) của MongoDB nhanh gấp 100 lần so với MySQL. MongoDB Atlas cung cấp dịch vụ lưu trữ đám mây với các đặc tính: thỏa thuận mức dịch vụ (SLA) đảm bảo tính sẵn sàng, mở rộng đàn hồi đa đám mây (AWS, Google Cloud, Azure), bảo mật cấp doanh nghiệp, tìm kiếm toàn văn tích hợp dựa trên nền tảng Lucene và cơ chế tự động mở rộng (auto-scale).
• Framework ExpressJS: Cung cấp tính năng phát triển ứng dụng máy chủ nhanh trên nền NodeJS, hỗ trợ phương thức HTTP, hệ thống Middleware truy cập request/response/database, hệ thống định tuyến nâng cao và cơ chế gỡ lỗi (debugging) chuẩn xác.
• Thư viện ReactJS và Redux: ReactJS hỗ trợ xây dựng giao diện tương tác dựa trên JSX, cây DOM ảo (Virtual DOM) để quét và cập nhật cục bộ vùng giao diện có biến động, cùng các hàm React Hooks (từ phiên bản React 16) giúp quản lý state mà không cần khai báo class. Redux là kho chứa trạng thái có thể dự đoán (predictable state container) hoạt động theo mô hình luồng dữ liệu một chiều (unidirectional data flow) dựa trên kiến trúc Flux của Facebook, bao gồm Store (lưu trữ state duy nhất), Action (sự kiện) và Reducer (hàm cập nhật state mới từ action).
• Cổng thanh toán quốc tế PayPal: Đóng vai trò là dịch vụ trung gian thanh toán và chuyển tiền qua Internet, hỗ trợ thẻ quốc tế (VISA, Mastercard) mà không làm lộ thông tin tài khoản ngân hàng của khách hàng.

Phương pháp nghiên cứu:

• Phương pháp nghiên cứu tài liệu: Khai thác tài liệu chuyên ngành, trang web và video kỹ thuật liên quan đến các công nghệ trong MERN Stack và các mô hình phát triển phần mềm.
• Phương pháp tham khảo chuyên gia: Trao đổi, tiếp thu hướng dẫn chuyên môn và kỹ năng giải quyết vấn đề từ giảng viên hướng dẫn (TS. Lê Văn Vinh) và bạn học.
• Phương pháp khảo sát thực tế: Nhóm tác giả thực hiện khảo sát tính năng trên 4 website bán lẻ thời trang thực tế gồm: ZARA, SHEIN, H&M và LIBÉ (libeworkshop) nhằm tổng hợp nhu cầu của người dùng cuối và yêu cầu quản trị vận hành của doanh nghiệp.

Thiết kế và triển khai

Hệ thống được thiết kế theo quy trình công nghệ phần mềm chuẩn mực, bao gồm các cấu phần kiến trúc, mô hình dữ liệu, sơ đồ hành vi và môi trường triển khai thực tế:

Kiến trúc hệ thống:

• Hệ thống áp dụng mô hình phân tầng độc lập (Separation of Concerns) giữa Frontend (React/Redux SPA) và Backend (NodeJS/Express RESTful API).
• Các sơ đồ thiết kế hệ thống bao gồm: Sơ đồ kiến trúc website (Website Architecture), Sơ đồ kiến trúc hệ thống (System Architecture) và Sơ đồ lớp (Class Diagram).

Thiết kế cơ sở dữ liệu: Cơ sở dữ liệu MongoDB Atlas được mô hình hóa qua Sơ đồ quan hệ thực thể (ERD) với 10 bảng/tập hợp tài liệu (Tables/Collections) chuyên biệt:

1. Product Table: Lưu trữ thông tin chi tiết sản phẩm thời trang.
2. User Table: Lưu trữ thông tin tài khoản người dùng và thông tin cá nhân.
3. Comment Table: Lưu trữ nội dung bình luận của người mua hàng.
4. Order Table: Quản lý thông tin đơn hàng và lịch sử đặt hàng.
5. Statistical Table: Phục vụ lưu trữ và tính toán các chỉ số thống kê kinh doanh.
6. Category Table: Phân loại các danh mục mặt hàng.
7. Tag Table: Quản lý các thẻ tìm kiếm và gợi ý sản phẩm.
8. Voucher Table: Lưu trữ mã khuyến mãi, tỷ lệ giảm giá.
9. Email Table: Thu thập địa chỉ email đăng ký nhận tin của khách.
10. Size Table: Danh mục kích cỡ trang phục.

Thiết kế hành vi (Sequence Diagrams): Nhóm tác giả xây dựng 12 sơ đồ tuần tự (Sequence Diagram) chi tiết cho các luồng nghiệp vụ cốt lõi:

• Phân hệ quản trị: SD001 (Đăng nhập quản trị), SD002 (Admin tạo sản phẩm mới), SD003 (Admin cập nhật sản phẩm), SD004 (Admin xóa sản phẩm), SD005 (Admin cập nhật trạng thái đơn hàng), SD006 (Admin xem trang thống kê doanh thu/đơn hàng), SD007 (Admin gửi email tiếp thị).
• Phân hệ người dùng: SD008 (Guest thêm sản phẩm vào giỏ hàng), SD009 (Guest lọc sản phẩm), SD010 (User thực hiện thanh toán), SD011 (User theo dõi tình trạng đơn hàng), SD012 (User hủy đơn hàng).

Công nghệ và công cụ triển khai:

• Công cụ phát triển (Tools): Visual Studio Code, hệ thống quản lý phiên bản Git/GitHub, công cụ kiểm thử API Postman, công cụ quản trị dữ liệu MongoDB Compass và các trình duyệt web hiện đại.
• Công nghệ áp dụng (Technology): MERN Stack (MongoDB Atlas, ExpressJS, ReactJS, NodeJS), thư viện Redux, API thanh toán PayPal và phương thức thanh toán tiền mặt (COD).
• Hạ tầng triển khai (Deployment): Triển khai hệ thống máy chủ và API backend trên nền tảng Heroku; triển khai giao diện ứng dụng web frontend trên nền tảng Netlify.

Kiểm thử hệ thống: Khóa luận xây dựng bảng kịch bản kiểm thử (Test Cases - Bảng 82) đánh giá chức năng của từng tác nhân, đảm bảo hệ thống phản hồi đúng logic, xử lý ngoại lệ khi mất kết nối mạng hoặc dữ liệu đầu vào không hợp lệ.

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

Bố cục khóa luận được trình bày tuần tự qua 5 chương chuyên biệt:

Chương 1: Giới thiệu (CHAPTER 1: INTRODUCTION)

Chương này thiết lập cơ sở hình thành đề tài, chỉ ra nhu cầu cấp thiết của việc thương mại hóa mặt hàng quần áo thời trang trên không gian mạng. Tác giả xác định 5 mục tiêu cốt lõi, 7 nội dung/nhiệm vụ nghiên cứu kỹ thuật, phương pháp nghiên cứu tài liệu và ý nghĩa thực tiễn của đề tài trong việc mang lại giao diện mua sắm đơn giản, thuận tiện, nâng cao trải nghiệm khách hàng.

Chương 2: Cơ sở lý thuyết (CHAPTER 2: FUNDAMENTALS)

Trình bày tổng quan về Technical Stack, đi sâu phân tích cơ chế vận hành của MERN Stack theo kiến trúc 3 tầng bằng JavaScript và định dạng trao đổi dữ liệu JSON. Nội dung giải thích chi tiết các ưu điểm kỹ thuật của từng thành phần: tính năng mở rộng và bộ nhớ đệm của MongoDB/MongoDB Atlas; tính năng định tuyến và Middleware của Express; cơ chế Virtual DOM, JSX và Hooks của ReactJS; tính chất bất đồng bộ, đơn luồng (single-threaded) của NodeJS; nguyên lý luồng dữ liệu một chiều của Redux và tính an toàn của dịch vụ thanh toán PayPal.

Chương 3: Khảo sát và yêu cầu người dùng (CHAPTER 3: SURVEYS AND USER REQUIREMENTS)

Báo cáo khảo sát 4 website bán lẻ thời trang (ZARA, SHEIN, H&M, LIBÉ) và phân tích các yêu cầu thực tiễn. Tác giả xác định 4 tác nhân (Actors) chính tương tác với hệ thống, thiết lập biểu đồ Use Case tổng thể cho End-User và Administrator, đồng thời lập bảng đặc tả chi tiết cho từng ca sử dụng:

Nhóm tác nhân (Actor)	Số lượng chức năng	Chức năng nghiệp vụ chính
Khách vãng lai (Guest)	16 chức năng	Đăng ký tài khoản, đăng nhập, xem danh sách sản phẩm, xem chi tiết, lọc sản phẩm (danh mục, màu sắc, kích cỡ, tag, từ khóa), thêm email nhận khuyến mãi, thêm/xóa sản phẩm so sánh, thêm/xóa giỏ hàng, tăng số lượng, gửi phản hồi, chat Messenger với admin.
Người dùng thành viên (User)	24 chức năng	Đầy đủ tính năng như Guest cùng các quyền đặc thù: Đăng nhập hệ thống, chỉnh sửa hồ sơ cá nhân, thêm/xóa danh sách yêu thích (wishlist), áp dụng mã giảm giá (voucher), đặt hàng, thanh toán (PayPal, COD), theo dõi đơn hàng, hủy đơn hàng, bình luận và đánh giá (rating) sản phẩm đã mua.
Quản trị viên (Administrator)	29 chức năng	Quản lý danh mục (thêm/sửa/xóa), quản lý sản phẩm (thêm/sửa/xóa/khóa/mở khóa), nhập hàng (import goods), quản lý người dùng (thêm/sửa/xóa/khóa/mở khóa), quản lý tag, kích cỡ, voucher, lọc dữ liệu theo từ khóa, xem thống kê (doanh thu, số lượng bán, hàng bán chạy, hàng tồn, hàng hết, đơn chờ duyệt/hoàn thành), gửi email mã khuyến mãi theo nhóm (Guest, Tất cả người dùng, VIP), cập nhật trạng thái đơn hàng (chưa duyệt, đã đóng gói, đang giao, hoàn thành, hủy), xóa đơn hàng.
Quản trị cấp cao (Super Admin)	5 chức năng	Tạo tài khoản quản trị viên mới, cập nhật thông tin quản trị viên, xóa quản trị viên, khóa tài khoản quản trị viên và mở khóa tài khoản quản trị viên.

Chương này cũng cung cấp hơn 40 bảng đặc tả ca sử dụng (Use Case Description) với đầy đủ thông tin: mã ca sử dụng, phiên bản, tác nhân, tiền điều kiện, hậu điều kiện, luồng sự kiện chính, kịch bản ngoại lệ và quy tắc nghiệp vụ.

Chương 4: Thiết kế hệ thống (CHAPTER 4: SYSTEM DESIGN)

Tập trung chi tiết hóa thiết kế kỹ thuật của hệ thống. Tác giả mô tả chi tiết 12 biểu đồ tuần tự (SD001 đến SD012) giải thích tương tác giữa người dùng, giao diện, bộ điều khiển máy chủ và cơ sở dữ liệu. Chương này trình bày Sơ đồ quan hệ thực thể (ERD) với 10 cấu trúc dữ liệu, đồng thời thiết kế chi tiết 12 màn hình giao diện quản trị (Administrator Interface - từ AI001 đến AI012) và 14 màn hình giao diện người dùng (User Interface - từ UI001 đến UI014).

Chương 5: Triển khai và kiểm thử (CHAPTER 5: IMPLEMENT AND TESTING)

Trình bày danh mục các công cụ (Tools) và công nghệ (Technology) được sử dụng để xây dựng dự án. Mô tả quy trình đưa hệ thống lên môi trường đám mây qua Netlify và Heroku, đồng thời tổng hợp các kịch bản kiểm thử (Test Cases) nhằm đánh giá chức năng phần mềm trước khi bàn giao.

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

Kết quả chính của đồ án:

• Xây dựng hoàn chỉnh website thương mại điện tử chuyên ngành thời trang ứng dụng trọn vẹn kiến trúc MERN Stack với mã nguồn JavaScript đồng nhất từ giao diện đến máy chủ.
• Đặc tả và hiện thực hóa thành công 74 chức năng nghiệp vụ phân chia theo 4 nhóm tác nhân: Khách vãng lai (16 chức năng), Người dùng đã đăng ký (24 chức năng), Quản trị viên (29 chức năng) và Quản trị viên cấp cao (5 chức năng).
• Thiết kế và chuẩn hóa 10 bảng dữ liệu trong MongoDB Atlas: Product, User, Comment, Order, Statistical, Category, Tag, Voucher, Email, Size.
• Xây dựng 12 biểu đồ tuần tự (Sequence Diagram) mô tả chi tiết các tương tác hệ thống.
• Thiết kế hoàn chỉnh 26 giao diện tương tác: 12 giao diện quản trị viên (AI001 đến AI012 bao gồm Dashboard, quản lý đơn hàng, danh mục, sản phẩm, modal giảm giá, gửi email) và 14 giao diện người dùng cuối (UI001 đến UI014 bao gồm trang chủ, cửa hàng, chi tiết sản phẩm, giỏ hàng, 2 bước thanh toán checkout, quản lý đơn hàng cá nhân).
• Tích hợp thành công 2 cơ chế thanh toán đơn hàng: Trực tuyến bằng tài khoản PayPal quốc tế và Trực tiếp khi nhận hàng (COD).
• Triển khai thành công hệ thống lên môi trường Internet thực tế: Backend API vận hành trên Heroku và Frontend vận hành trên Netlify.

Giải pháp và đề xuất của tác giả:

• Đề xuất phân tách hoàn toàn tầng Frontend và Backend thông qua giao tiếp API và AJAX, giúp đội ngũ phát triển có thể làm việc độc lập và tối ưu hóa hiệu năng ứng dụng đơn trang.
• Đề xuất mô hình phân quyền quản trị 2 lớp (Super Admin và Administrator) nhằm nâng cao tính an toàn thông tin và phân định quyền hạn trong quản lý nhân sự hệ thống.
• Áp dụng cơ chế gửi email mã giảm giá tự động theo 3 nhóm đối tượng khách hàng (Guest, All Users, VIP) để nâng cao hiệu quả tiếp thị.

Đóng góp kỹ thuật tự nêu:

• Chứng minh tính khả thi và hiệu quả của việc ứng dụng MERN Stack trong bài toán thương mại điện tử: sử dụng định dạng JSON làm chuẩn trao đổi dữ liệu xuyên suốt giữa các thành phần, loại bỏ nhu cầu cài đặt các thư viện chuyển đổi dữ liệu phức tạp.
• Khóa luận cung cấp một bộ hồ sơ phân tích và thiết kế hệ thống chi tiết theo chuẩn UML, đặc biệt là hệ thống ca sử dụng (Use Case) và kịch bản kiểm thử có tính ứng dụng thực tiễn cao cho đồ án phần mềm.

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

Hạn chế được văn bản đề cập:

• Do điều kiện hạn chế về thời gian thực hiện và kinh nghiệm thực tế của sinh viên, báo cáo và hệ thống thực nghiệm không tránh khỏi những khiếm khuyết kỹ thuật nhất định.
• Qua khảo sát thực tế các website thời trang lớn, tác giả nhận định việc tích hợp chatbot trả lời tự động hoặc minigame tích điểm (gamification) là những tính năng phức tạp mà hệ thống hiện tại chưa thể tích hợp; hệ thống mới chỉ dừng lại ở việc hỗ trợ liên kết trò chuyện với admin qua Messenger.
• Về mặt thanh toán trực tuyến, hệ thống mới chỉ tích hợp cổng quốc tế PayPal, chưa hỗ trợ các cổng thanh toán nội địa phổ biến tại Việt Nam.

Hướng nghiên cứu tiếp:

• Lắng nghe ý kiến đóng góp, tư vấn từ giảng viên và hội đồng đánh giá để tiếp tục khắc phục lỗi và cải thiện hệ thống thực tế trong tương lai.
• Tiếp tục nghiên cứu mở rộng các tính năng nâng cao nhằm hoàn thiện quy trình kinh doanh và vận hành thương mại điện tử chuyên nghiệp.

Giá trị tham khảo

Tài liệu khóa luận có giá trị tham khảo thiết thực cho các nhóm đối tượng sau:

• Sinh viên chuyên ngành Công nghệ Phần mềm, Công nghệ Thông tin đ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 website thương mại điện tử, ứng dụng web đơn trang (SPA).
• Lập trình viên mới tiếp cận mô hình full-stack với MERN Stack (MongoDB, Express, React, NodeJS), cần tài liệu tham khảo về cách tổ chức mã nguồn, kết nối cơ sở dữ liệu đám mây MongoDB Atlas và triển khai ứng dụng lên Heroku, Netlify.
• Phần đáng tham khảo nhất trong tài liệu:
  • Hệ thống hơn 40 bảng đặc tả Use Case chi tiết (Chương 3), cung cấp biểu mẫu chuẩn mực về phân tích yêu cầu nghiệp vụ, tiền điều kiện, hậu điều kiện và xử lý ngoại lệ.
  • Thiết kế 12 sơ đồ tuần tự (Sequence Diagram) và sơ đồ quan hệ thực thể (ERD) trong Chương 4, đóng vai trò là tài liệu mẫu rõ ràng cho giai đoạn thiết kế hệ thống phần mềm.

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

1. Khóa luận này do ai thực hiện và thuộc cơ sở đào tạo nào? Khóa luận do hai sinh viên Hồ Ngọc Đình Châu (MSSV: 17110008) và Nguyễn Thị Bích Nhàn (MSSV: 17110195) thực hiện dưới sự hướng dẫn của TS. Lê Văn Vinh, thuộc ngành Công nghệ Phần mềm, Khoa Đào tạo Chất lượng cao, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, hoàn thành vào tháng 06/2021.

2. Hệ thống phần mềm được phân quyền cho những tác nhân nào và gồm bao nhiêu chức năng? Hệ thống xác định 4 tác nhân tương tác với tổng cộng 74 chức năng nghiệp vụ được phân bổ: Khách vãng lai - Guest (16 chức năng), Người dùng thành viên - User (24 chức năng), Quản trị viên - Administrator (29 chức năng) và Quản trị viên cấp cao - Super Admin (5 chức năng).

3. Đồ án đã khảo sát những website thực tế nào trước khi xây dựng yêu cầu chức năng? Nhóm tác giả đã tiến hành khảo sát thực tế tính năng trên 4 website thương mại điện tử thời trang gồm: ZARA, SHEIN, H&M và LIBÉ (libeworkshop).

4. Cơ sở dữ liệu của hệ thống lưu trữ những bảng dữ liệu nào và sử dụng công nghệ gì? Cơ sở dữ liệu được xây dựng trên hệ quản trị cơ sở dữ liệu NoSQL MongoDB thông qua dịch vụ đám mây MongoDB Atlas, bao gồm 10 bảng/tập hợp dữ liệu chính: Product, User, Comment, Order, Statistical, Category, Tag, Voucher, Email và Size.

5. Hệ thống hỗ trợ những phương thức thanh toán nào và được triển khai trên những nền tảng nào? Hệ thống hỗ trợ 2 phương thức thanh toán gồm: thanh toán trực tuyến qua cổng quốc tế PayPal và thanh toán trực tiếp khi giao hàng (COD). Về hạ tầng triển khai, Backend API được triển khai trên nền tảng Heroku và giao diện website Frontend được triển khai trên nền tảng Netlify.

Kết luận

Khóa luận tốt nghiệp "BUILD E-COMMERCE WEBSITE USING MERN STACK" đã hoàn thành mục tiêu nghiên cứu và xây dựng một hệ thống website thương mại điện tử thời trang hoàn chỉnh dựa trên bộ công nghệ MERN Stack thuần JavaScript. Đồ án đóng góp một quy trình phát triển phần mềm chặt chẽ từ khảo sát thực tế, mô hình hóa 74 chức năng qua 4 nhóm tác nhân, thiết kế 10 thực thể dữ liệu NoSQL, cho đến xây dựng 26 giao diện tương tác và kiểm thử hệ thống. Mặc dù còn hạn chế về khả năng tự động hóa bằng chatbot hay tích hợp đa dạng cổng thanh toán nội địa, công trình là tài liệu kỹ thuật có giá trị tham khảo tốt cho sinh viên và người nghiên cứu phát triển ứng dụng web thương mại điện tử.

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

GRADUATION THESIS HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING  GRADUATION THESIS BUILD E-COMMERCE WEBSITE USING MERN STACK HO NGOC DINH CHAU Student ID: 17110008 NGUYEN THI BICH NHAN Student ID: 17110195 Major: SOFTWARE TECHNOLOGY School Year: 2017 – 2021 Advisor: Dr. LE VAN VINH Ho Chi Minh City, June 2021 GRADUATION THESIS ACKNOWLEDGEMENTS  Firstly, we are very grateful to HCMC University of Technology and Education in general and Faculty For High Quality Training in particular for creating a good environment to study well which helps us to reach the new technical knowledge and skills. Furthermore, helps us to promote our own knowledge and accomplished tasks well. I believe that the knowledge acquired during the past time will help us have a solid foundation for the graduation project research process but also valuable luggage for us to enter life confidently and firmly.

In this semester, we have completed the graduation project BUID E-commerce Website Using MERN Stack. Secondly, we would sincerely appreciate Mr. Le Van Vinh helping our completion of the project who is really enthusiastic about guiding theories as well as programming skills, especially how to solve problems. Once again we are eternally grateful for everything you’ve taught us and we wish you have a lot of heaths.

With the conditions of time and limited experience of student, this report cannot avoid defects. We look forward to receiving your advice and comments so that we can improve the actual system in the future. And finally, We wish nothing but the best for everybody. We are sincerely grateful! Ho Chi Minh City, June 28, 2021 STUDENTS Ho Ngoc Dinh Chau Nguyen Thi Bich Nhan July 19, 2021 1 GRADUATION THESIS ABSTRACTS  As you all know, any business in the world has its proprietary name, specific characteristics and the own trademark to they can approach their all customers even though they're far away.

They can approach customers through the way to create their own website to help them give their products and services to customers lively at that time. Furthermore, it's also an easy way to buying and selling products but also does not take the most time. On the other hand, help marketing strategy quickly and does not take the most time. For individuals, the website brings full necessary products information and easy to choose items.

July 19, 2021 2 GRADUATION THESIS ABBREVIATION LIST  UC Use case SA Super Admin Admin Administrator SD Sequence Diagram UI User Interface AI Administrator Interface ERD Entity Relationship Diagram TC Test Case July 19, 2021 3 GRADUATION THESIS TABLE OF CONTENTS ACKNOWLEDGEMENTS. Practical scientific significance. Introduction to the Technical Stack. What is the Technical Stack?.

List of the top Stacks. Introduction to the MERN stack. What is the MERN stack?. How does the MERN Stack work?.

Why use the MERN Stack?. Introduction to the MongoDB. What is the MongoDB?. What is the MongoDB Atlas?.

Why use the MongoDB?. Introduction to the Express. What is the Express. Feature of Express.

Why use the Express. Introduction to the ReactJS. What is the ReactJS?. Why use the ReactJS?.

What is the JSX? .22 July 19, 2021 4 GRADUATION THESIS 5. What is the Virtual Dom?. What is the Hooks?. Introduction to the NodeJS.

What is the NodeJS?. What can NodeJS do?. Why use the NodeJS?. Introduction to the Redux.

What is the Redux?. How Redux works?. Why use the Redux?. Introduction to the PayPal.

What is the PayPal?. Why uses the PayPal? .25 CHAPTER 3: SURVEYS AND USER REQUIREMENTS .1 The function of Guest.2 The function of User .3 The function of Administrator .4 The function of Super Admin.5 Use Case Diagram .1 Module End-User .6 Use Case Description .35 July 19, 2021 5 GRADUATION THESIS 2.3 <Guest> View Product List .4 <Guest> View Detailed Product .5 <Guest> Filter Product .6 <Guest> Add Email.7 <Guest> Add to Compare .8 <Guest> Remove Product from Compare .9 <Guest> Add to cart.10 <Guest> Remove Product from Cart .2 <User> Edit Profile .