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

Trong bối cảnh bùng nổ của công nghệ thông tin và mạng Internet, thương mại điện tử đã trở thành phương thức mua bán phổ biến trên toàn cầu. Xu hướng tiêu dùng trực tuyến gia tăng mạnh mẽ, đặc biệt sau các tác động xã hội từ đại dịch COVID-19, dẫn đến nhu cầu cấp thiết về các nền tảng bán hàng số hóa nhằm tối ưu hóa trải nghiệm mua sắm của khách hàng và mở rộng khả năng tiếp cận thị trường cho doanh nghiệp. Nhận thức được nhu cầu thực tiễn đó, đề tài đồ án tốt nghiệp "Xây dựng trang web thương mại điện tử" được thực hiện bởi sinh viên Nguyễn Trọng Nhật Minh, chuyên ngành Công nghệ thông tin, Trường Đại học Phenikaa (khóa K13, niên khóa 2019-2023) dưới sự hướng dẫn của ThS. Vũ Quang Dũng.

Lý do lựa chọn đề tài được tác giả xác định dựa trên bốn luận điểm chính:

  1. Tính thời sự: Mua sắm qua mạng Internet đã trở thành một phần thiết yếu của đời sống hiện đại. Giai đoạn dịch bệnh thúc đẩy thói quen tiêu dùng chuyển dịch sang các nền tảng trực tuyến, kéo theo nhu cầu phát triển các hệ thống thương mại điện tử gia tăng.
  2. Khả năng kinh doanh: Nền tảng bán hàng trực tuyến không chỉ đơn thuần là công cụ giao dịch mà còn mở ra cơ hội kinh doanh bền vững, tạo nguồn thu nhập và tiềm năng mở rộng quy mô thương mại.
  3. Kỹ năng và kiến thức: Quá trình xây dựng một hệ thống hoàn chỉnh đòi hỏi việc tổng hợp nhiều mảng kiến thức chuyên ngành như lập trình web, quản trị cơ sở dữ liệu, xử lý giao dịch và phát triển phần mềm.
  4. Cơ hội học hỏi: Đề tài là cơ hội tiếp cận, làm chủ các công nghệ mới từ khâu thiết kế giao diện người dùng đến cấu trúc dữ liệu và xử lý logic nghiệp vụ máy chủ.

Mục tiêu nghiên cứu tổng quát của đồ án là phát triển và triển khai một trang web thương mại điện tử hoàn chỉnh, có khả năng vận hành thực tế để phục vụ hoạt động bán hàng trực tuyến. Hệ thống tập trung giải quyết các nhiệm vụ cụ thể phân theo hai nhóm đối tượng chính:

  • Về phía khách hàng:
    1. Cung cấp chức năng tìm kiếm sản phẩm theo nhu cầu.
    2. Cho phép xem thông tin chi tiết của từng sản phẩm.
    3. Hỗ trợ chọn sản phẩm, thêm vào giỏ hàng và theo dõi tổng giá trị đơn hàng.
    4. Cung cấp quy trình đặt mua hàng và lựa chọn hình thức thanh toán thuận tiện, nhanh chóng.
  • Về phía người quản trị hệ thống (Admin):
    1. Thiết lập cơ chế đăng nhập và xác thực phân quyền nghiêm ngặt nhằm bảo đảm an toàn hệ thống.
    2. Quản lý danh mục sản phẩm và chi tiết thông tin từng mặt hàng.
    3. Thêm mới, chỉnh sửa, cập nhật và xóa bỏ các dữ liệu trực tiếp thông qua giao diện quản trị.
    4. Quản lý danh sách thông tin người dùng và xử lý các đơn hàng phát sinh trên hệ thống.

Đối tượng nghiên cứu của đề tài là quy trình nghiệp vụ và các giải pháp kỹ thuật xây dựng website thương mại điện tử. Phạm vi nghiên cứu tập trung vào việc hiện thực hóa các chức năng bán hàng cốt lõi và quản trị nội dung bằng bộ công nghệ MERN stack, được tiến hành trong khuôn khổ đồ án tốt nghiệp đại học tại Hà Nội năm 2023.

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

Để hiện thực hóa hệ thống, đề tài đã vận dụng mô hình kiến trúc MVC (Model-View-Controller) cùng bộ công nghệ chuyên sâu cho việc phát triển web hiện đại. Mô hình MVC được lựa chọn nhằm phân tách ba tầng chức năng chính của ứng dụng:

  • Model: Đại diện cho dữ liệu và các logic thao tác dữ liệu, tương tác trực tiếp với hệ quản trị cơ sở dữ liệu để thực hiện các thao tác truy xuất và cập nhật.
  • View: Đảm nhiệm hiển thị giao diện người dùng và tiếp nhận các tương tác trực tiếp từ phía khách hàng (Client).
  • Controller: Tiếp nhận các yêu cầu HTTP hoặc sự kiện từ View, xử lý logic nghiệp vụ, giao tiếp với Model để xử lý dữ liệu và phản hồi kết quả về lại cho View hiển thị.

Về mặt công nghệ, đồ án áp dụng kiến trúc MERN stack kết hợp các thư viện bổ trợ:

  • ReactJS: Thư viện giao diện người dùng phía máy khách, sử dụng cơ chế Virtual DOM để tối ưu hóa việc cập nhật giao diện, cú pháp JSX, hệ thống Components, Props, State và các Hooks cơ bản (useState, useEffect, useContext), kết hợp React Router để điều hướng trang.
  • Node.js & Express.js: Môi trường thực thi JavaScript phía máy chủ và framework xây dựng RESTful API. Hệ thống tận dụng cơ chế hướng sự kiện, bất đồng bộ non-blocking I/O của Node.js cùng hệ thống middleware, routing và xử lý giao thức HTTP của Express.js.
  • MongoDB: Hệ quản trị cơ sở dữ liệu NoSQL lưu trữ tài liệu dưới dạng BSON/JSON, sử dụng khóa chính tự sinh _id kiểu ObjectId, hỗ trợ các thao tác CRUD và bộ khung tổng hợp (Aggregation Framework).
  • Các thư viện hỗ trợ chuyên dụng:
    • Redux: Quản lý trạng thái toàn cục ứng dụng với dung lượng gọn nhẹ (~2KB).
    • React Query: Quản lý server state, bộ nhớ đệm (caching), tự động đồng bộ dữ liệu, hỗ trợ phân trang (pagination) và biến đổi dữ liệu (mutation).
    • Ant Design (AntD) & Tailwind CSS: Xây dựng hệ thống giao diện phản hồi (responsive) với các thành phần giao diện mẫu và hệ thống tiện ích CSS (utility-first).
    • Axios: Thực hiện các yêu cầu HTTP dựa trên Promise, hỗ trợ bộ đón chặn (interceptors) và xử lý CORS.
    • Jwt-decode: Giải mã chuỗi JSON Web Token (JWT) để trích xuất thông tin người dùng (sub, iat) phục vụ cơ chế xác thực và phân quyền.

Phương pháp nghiên cứu thực tế được triển khai là phương pháp phân tích và thiết kế hệ thống hướng đối tượng thông qua ngôn ngữ mô hình hóa UML (biểu đồ Use Case, biểu đồ lớp) và phương pháp phát triển phần mềm thực nghiệm. Nguồn dữ liệu sử dụng trong đồ án là dữ liệu nội bộ được thiết kế và khởi tạo trực tiếp trên hệ cơ sở dữ liệu MongoDB phục vụ các kịch bản chạy thử nghiệm.

Thiết kế và triển khai

Hệ thống được thiết kế hướng tới việc phân tách rõ ràng giữa ba tác nhân (Actors) chính: Customer (Khách hàng), User (Người dùng đã đăng ký) và Admin (Quản trị viên hệ thống).

Tác nhân (Actor) Phạm vi chức năng chính trong hệ thống
Customer Xem danh mục, xem danh sách sản phẩm, xem chi tiết sản phẩm, quản lý giỏ hàng (thêm, xóa, cập nhật), tìm kiếm sản phẩm (theo danh mục, theo sản phẩm, theo giá tiền), xem đơn hàng, đăng ký tài khoản.
User Đăng nhập, đăng xuất, đổi mật khẩu, theo dõi trạng thái đơn hàng cá nhân, tiến hành quy trình đặt hàng.
Admin Đăng nhập hệ thống quản trị, 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), quản lý đơn hàng (xóa, xử lý đơn hàng), quản lý tài khoản người dùng (xóa, cập nhật).

Cơ sở dữ liệu của hệ thống được xây dựng trên MongoDB, bao gồm 3 thực thể dữ liệu chính được đặc tả chi tiết như sau:

STT Tên thực thể Kiểu dữ liệu Mô tả chi tiết trường dữ liệu
1 Products Document Collection Lưu trữ danh mục sản phẩm bày bán trên website:
- Name String Tên sản phẩm
- Image String Đường dẫn/tệp hình ảnh đại diện
- Type String Loại/danh mục sản phẩm
- Price Number Giá bán sản phẩm
- CountInStock Number Số lượng sản phẩm hiện có trong kho
- Rating Number Điểm đánh giá sản phẩm
- Description String Đoạn văn bản miêu tả chi tiết sản phẩm
- Discount Number Mức giảm giá khuyến mại
- Selled Number Số lượng sản phẩm đã bán ra
2 Users Document Collection Quản lý thông tin tài khoản người dùng và quyền hạn:
- Name String Tên hiển thị của người dùng
- Email String Địa chỉ thư điện tử dùng để đăng nhập
- Password String Mật khẩu tài khoản (dạng chuỗi mã hóa)
- isAdmin Boolean Cờ xác định quyền hạn Quản trị viên (True/False)
- Phone Number Số điện thoại liên hệ
- Address String Địa chỉ nơi ở của người dùng
- Avatar String Hình ảnh đại diện người dùng
- City String Tỉnh/Thành phố sinh sống
3 Order (Orders) Document Collection Lưu trữ thông tin chi tiết đơn đặt hàng của khách:
- Name String Tên sản phẩm trong đơn
- Image String Hình ảnh sản phẩm tại thời điểm mua
- Price Number Đơn giá sản phẩm
- Discount Number Tỷ lệ/mức giảm giá áp dụng
- ShippingAddress String, Number Địa chỉ giao nhận hàng lấy từ thông tin người dùng
- ShippingPrice Number Chi phí vận chuyển tính trên đơn hàng
- Total Price Number Tổng số tiền thanh toán cuối cùng của đơn hàng

Quy trình vận hành giao diện người dùng được tổ chức xuyên suốt: Khách hàng truy cập trang chủ có thể lọc sản phẩm theo category hoặc thanh tìm kiếm, chọn sản phẩm vào giỏ hàng, xem chi tiết giỏ hàng và chuyển tới trang đặt hàng. Sau khi điền thông tin và lựa chọn phương thức thanh toán, hệ thống ghi nhận dữ liệu vào bảng Order, phản hồi thông báo "Đặt hàng đặt thành công" trên giao diện người dùng và kích hoạt gửi thư điện tử xác nhận đơn hàng.

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

Chương 1: Mở đầu

Chương 1 thiết lập các cơ sở xuất phát điểm của đề tài. Tác giả đặt vấn đề về sự thay đổi nhanh chóng của thói quen mua sắm trong kỷ nguyên số, khẳng định tính tất yếu của việc số hóa dịch vụ thương mại. Nội dung phân tích chi tiết bốn lý do chọn đề tài: tính thời sự do tác động của đại dịch, triển vọng khai thác kinh doanh, mục tiêu rèn luyện kỹ năng công nghệ thông tin và cơ hội học tập nâng cao năng lực chuyên môn. Chương này cũng phân định cụ thể mục tiêu xây dựng một website hoàn chỉnh với đầy đủ chức năng tác nghiệp cho cả hai nhóm chủ thể: người mua hàng (khách hàng) và người quản trị hệ thống (admin).

Chương 2: Phân tích và thiết kế hệ thống

Chương 2 chiếm dung lượng trọng tâm về mặt lý thuyết và thiết kế mô hình của đồ án. Tác giả hệ thống hóa các kiến thức nền tảng:

  • Phân tích cấu trúc ReactJS thông qua các khái niệm Component, Virtual DOM, JSX, State, Props, Vòng đời và các React Hooks.
  • Trình bày đặc tính kỹ thuật của hệ cơ sở dữ liệu MongoDB về cấu trúc Document BSON, Collection, ObjectId, cơ chế CRUD, Indexing, Replication và Sharding.
  • Mô tả vai trò của Node.js và framework Express.js trong việc xử lý luồng sự kiện không đồng bộ và xây dựng API theo kiến trúc RESTful (kèm ví dụ ứng dụng xử lý thời gian thực qua giao thức WebSockets).
  • Đánh giá vai trò của các thư viện phụ trợ: Redux, React Query, Ant Design, Axios, Jwt-decode và Tailwind CSS.
  • Phân tích kiến trúc MVC và làm rõ luồng dữ liệu tuần tự từ Client -> Controller -> Model -> Controller -> View.
  • Đặc tả yêu cầu người dùng, xây dựng hệ thống biểu đồ Use Case chi tiết (biểu đồ tổng quan của khách hàng, Use case quản lý giỏ hàng, Use case tìm kiếm sản phẩm, biểu đồ Use case của Admin cho danh mục, sản phẩm, đơn hàng, tài khoản và biểu đồ truy cập hệ thống của User).
  • Thiết kế biểu đồ lớp và cấu trúc 3 bảng cơ sở dữ liệu: Products, Users, Orders.

Chương 3: Thiết kế và xây dựng Website

Chương 3 trình bày việc hiện thực hóa các phân tích thiết kế thành sản phẩm phần mềm thực tế bằng công nghệ MERN stack kết hợp kiến trúc MVC:

  • Giao diện trang người dùng: Xây dựng giao diện trang chủ với thanh điều hướng, chức năng đăng nhập, đăng ký, giỏ hàng, phân loại sản phẩm theo danh mục và công cụ tìm kiếm; thiết kế trang đăng nhập và đăng ký tài khoản mới bằng email và mật khẩu; thiết kế giao diện trang giỏ hàng cho phép rà soát danh sách hàng đã chọn; thiết kế trang đặt hàng, cho phép lựa chọn phương thức thanh toán và hiển thị thông báo "Đặt hàng đặt thành công" khi hoàn tất giao dịch.
  • Giao diện trang quản trị: Bố cục các phân hệ điều hành dành riêng cho Admin bao gồm trang chủ thống kê, trang quản lý thông tin và trạng thái sản phẩm, trang quản lý danh sách người dùng và trang xử lý đơn đặt hàng.

Chương 4: Kiểm thử và đánh giá

Chương 4 trong bố cục đồ án được dành để trình bày quy trình kiểm thử hệ thống phần mềm sau khi hoàn thiện xây dựng, nhằm đánh giá khả năng vận hành của các chức năng trên trang người dùng và trang quản trị, bảo đảm tính liên kết dữ liệu giữa giao diện và hệ quản trị MongoDB.

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

Chương 5 tổng kết lại toàn bộ kết quả thực hiện đề tài xây dựng trang web thương mại điện tử, đánh giá mức độ hoàn thành so với các mục tiêu ban đầu đặt ra trong Chương 1, đồng thời vạch ra các hướng phát triển mở rộng nhằm nâng cấp tính năng của website trong tương lai.

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

Đồ án ghi nhận các kết quả thực tế cụ thể được định hình qua sản phẩm phần mềm:

  • Hiện thực hóa một trang web thương mại điện tử hoàn chỉnh theo mô hình MVC, ứng dụng thành công bộ công nghệ MERN stack (MongoDB, Express.js, ReactJS, Node.js).
  • Xây dựng đầy đủ cơ sở dữ liệu trên MongoDB với 3 cấu trúc bảng dữ liệu chính thức: bảng Products (9 trường thông tin), bảng Users (8 trường thông tin bao gồm phân quyền qua isAdmin), và bảng Orders (7 trường thông tin chi tiết về đơn hàng và giao vận).
  • Triển khai đồng bộ các luồng chức năng phía người dùng: tìm kiếm đa tiêu chí (theo danh mục, tên sản phẩm, mức giá), giỏ hàng động, quy trình đặt hàng, phản hồi thông báo xác nhận thành công và chức năng gửi email sau khi mua hàng.
  • Xây dựng hoàn chỉnh phân hệ quản trị (Admin Dashboard) với chức năng quản lý danh mục, kiểm soát kho sản phẩm, theo dõi đơn hàng và người dùng.

Về mặt đóng góp, tác giả đã tự tổng hợp và ứng dụng một chuỗi công nghệ lập trình web hiện đại vào một dự án thực tế. Đồ án thể hiện sự kết hợp giữa các giải pháp quản lý trạng thái client-side (Redux) và server-state (React Query), kết hợp thư viện giao diện Ant Design và Tailwind CSS, cung cấp mô hình tham khảo thực tiễn cho việc xây dựng ứng dụng web phân tách rõ ràng giữa giao diện hiển thị và dịch vụ máy chủ API.

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

  • Hạn chế: Căn cứ vào phạm vi nghiên cứu được trình bày trong đồ án, hệ thống tập trung chủ yếu vào các chức năng thương mại điện tử cốt lõi (tìm kiếm, giỏ hàng, đặt hàng cơ bản, quản trị dữ liệu CRUD). Cơ sở dữ liệu mới dừng lại ở việc thiết kế 3 thực thể chính (Products, Users, Order), chưa đi sâu vào các cấu trúc phức tạp như phân loại nhiều biến thể sản phẩm (màu sắc, kích cỡ) hay tích hợp cổng thanh toán trực tuyến từ các bên thứ ba (như ví điện tử, cổng ngân hàng nội địa).
  • Hướng nghiên cứu tiếp: Căn cứ vào cấu trúc định hướng tại Chương 5 của văn bản, hệ thống có tiềm năng mở rộng các tính năng nghiệp vụ nâng cao, tối ưu hóa các cơ chế lưu bộ nhớ đệm (cache), tích hợp xử lý phân tán hoặc nâng cấp hệ thống khuyến mại và quản lý chuỗi cung ứng hàng tồn kho chuyên sâu.

Giá trị tham khảo

Đồ án tốt nghiệp này mang lại giá trị tham khảo học thuật và ứng dụng thực tiễn cho:

  • Sinh viên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Là tài liệu tham khảo trực quan về cách thức tổ chức một đồ án tốt nghiệp từ khâu đặt vấn đề, khảo sát công nghệ, mô hình hóa UML đến thiết kế cơ sở dữ liệu NoSQL.
  • Lập trình viên mới bắt đầu với MERN Stack: Cung cấp hướng dẫn tổng hợp về vai trò và cách thức phối hợp giữa các thư viện hiện đại trong hệ sinh thái JavaScript (ReactJS, Redux, React Query, Axios, Express, Tailwind CSS).
  • Phần đáng tham khảo nhất: Hệ thống biểu đồ Use Case phân rã chi tiết (từ quản lý giỏ hàng, tìm kiếm sản phẩm đến các chức năng quản trị) và bảng thiết kế cấu trúc dữ liệu MongoDB mẫu cho một website bán hàng trực tuyến cơ bản.

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

1. Hệ thống sử dụng kiến trúc phần mềm nào và được chia thành các thành phần gì?
Website được thiết kế theo mô hình kiến trúc MVC (Model-View-Controller). Luồng xử lý diễn ra tuần tự: Controller chặn các yêu cầu từ máy khách (Client), xử lý dữ liệu đầu vào rồi giao tiếp với Model. Model chuẩn bị dữ liệu gửi lại cho Controller, sau đó Controller chuyển tiếp dữ liệu hiển thị về View trên trình duyệt của người dùng.

2. Cơ sở dữ liệu của đồ án gồm những thực thể nào và được quản trị bằng hệ thống gì?
Hệ thống sử dụng hệ quản trị cơ sở dữ liệu NoSQL MongoDB, lưu trữ dữ liệu dưới dạng tài liệu (Document) BSON/JSON. Cơ sở dữ liệu bao gồm 3 bảng chính: Products (lưu trữ danh sách thông tin sản phẩm), Users (lưu trữ tài khoản người dùng và cờ quyền isAdmin), và Order (lưu trữ danh sách đơn đặt hàng chi tiết và thông tin giao nhận).

3. Bảng dữ liệu sản phẩm (Products) trong hệ thống gồm những trường thông tin cụ thể nào?
Bảng Products được thiết kế với 9 trường thuộc tính: Name (String - Tên sản phẩm), Image (String - Hình ảnh), Type (String - Loại sản phẩm), Price (Number - Giá sản phẩm), CountInStock (Number - Số lượng tồn kho), Rating (Number - Điểm đánh giá), Description (String - Miêu tả), Discount (Number - Mức giảm giá), và Selled (Number - Số lượng đã bán).

4. Những tác nhân nào tương tác với hệ thống và quyền hạn của Admin gồm những gì?
Hệ thống xác định 3 tác nhân chính là Customer, User và Admin. Trong đó, tác nhân Admin được cung cấp các quyền quản trị gồm: đăng nhập/đăng xuất trang quản trị, 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), quản lý đơn hàng (xóa, xử lý đơn) và quản lý người dùng (xóa, cập nhật thông tin).

5. Người dùng hoàn tất quá trình mua hàng trên website như thế nào?
Người dùng chọn sản phẩm vào giỏ hàng từ trang chủ hoặc trang chi tiết, chuyển sang trang giỏ hàng để kiểm tra danh mục và bấm "mua hàng" để đến trang đặt hàng. Sau khi chọn phương thức thanh toán và bấm đặt hàng, hệ thống phản hồi dòng thông báo "Đặt hàng đặt thành công" trên giao diện đồng thời gửi email thông tin chi tiết đơn hàng đến người dùng.

Kết luận

Đồ án tốt nghiệp "Xây dựng trang web thương mại điện tử" của sinh viên Nguyễn Trọng Nhật Minh đã giải quyết trọn vẹn mục tiêu xây dựng một nền tảng bán hàng trực tuyến dựa trên mô hình MVC và ngăn xếp công nghệ MERN. Tác giả đã hoàn thành việc mô hình hóa hệ thống bằng các biểu đồ Use Case, xây dựng cấu trúc cơ sở dữ liệu MongoDB với 3 thực thể cốt lõi và phát triển giao diện hoàn chỉnh cho cả người tiêu dùng lẫn bộ phận quản trị. Công trình phản ánh đúng chuẩn mực một đồ án tốt nghiệp kỹ thuật phần mềm ứng dụng, mang giá trị tham khảo thiết thực cho các nghiên cứu và dự án phát triển web thương mại điện tử tương tự.