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

Trong bối cảnh chuyển đổi số và sự phát triển của thương mại điện tử, việc thiết lập kênh phân phối trực tuyến trở thành yêu cầu thiết yếu đối với các doanh nghiệp bán lẻ. Ngành may mặc và thời trang có đặc thù thay đổi nhanh về mẫu mã, kích thước và thị hiếu tiêu dùng, đòi hỏi các cửa hàng truyền thống phải hiện đại hóa mô hình kinh doanh để tiếp cận khách hàng 24/7 và tối ưu hóa chi phí vận hành. Đồ án tốt nghiệp "Xây dựng Website bán hàng trực tuyến ứng dụng cho cửa hàng đồ may mặc" do sinh viên Nguyễn Đức Duy thực hiện dưới sự hướng dẫn của TS. Phạm Ngọc Hưng tại Trường Đại học Phenikaa (năm 2023) tập trung giải quyết bài toán tin học hóa quy trình kinh doanh và quản lý cho các cơ sở kinh doanh thời trang.

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

  1. Xây dựng một nền tảng website thương mại điện tử hoàn chỉnh, có giao diện trực quan, hỗ trợ hiển thị chi tiết các sản phẩm may mặc (hình ảnh, màu sắc, kích thước, chất liệu, giá cả).
  2. Thiết lập quy trình mua sắm trực tuyến thuận tiện và an toàn cho người tiêu dùng, bao gồm các khâu: tìm kiếm, lọc sản phẩm, quản lý giỏ hàng và thực hiện thanh toán (thanh toán khi nhận hàng hoặc qua thẻ/ví điện tử).
  3. Xây dựng phân hệ quản trị (Admin) đáp ứng nhu cầu quản lý danh mục sản phẩm (thêm, sửa, xóa), tiếp nhận và xử lý đơn đặt hàng, kiểm soát tồn kho và theo dõi báo cáo thống kê doanh số.
  4. Nghiên cứu, ứng dụng công nghệ web hiện đại trên nền tảng JavaScript (ReactJS, NodeJS, MongoDB) nhằm đảm bảo hiệu năng xử lý, khả năng mở rộng và tính đồng nhất của hệ thống.

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

  • Đối tượng nghiên cứu:
    • Người mua hàng (Khách hàng): Nhu cầu tìm kiếm, tra cứu thông tin sản phẩm thời trang, tương tác giỏ hàng, đặt hàng và quản lý thông tin tài khoản cá nhân.
    • Chủ cửa hàng và quản lý website (Quản trị viên): Quy trình quản trị danh mục sản phẩm, quản lý thông tin khách hàng, quy trình xử lý và xác nhận đơn hàng, thống kê số liệu kinh doanh.
  • Phạm vi nghiên cứu:
    • Không gian ứng dụng: Ứng dụng triển khai cho mô hình cửa hàng bán lẻ đồ may mặc có nhu cầu chuyển đổi số hoặc mở rộng kênh bán hàng trực tuyến; không mở rộng thành sàn giao dịch thương mại điện tử đa người bán (multi-vendor marketplace).
    • Phạm vi kỹ thuật: Tập trung vào các nghiệp vụ cốt lõi gồm quản lý sản phẩm, giỏ hàng, xử lý đơn hàng, thanh toán và quản trị hệ thống bằng bộ công nghệ MERN stack (MongoDB, Express/NodeJS, ReactJS).

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

Khung công nghệ và nền tảng lý thuyết

Đồ án ứng dụng mô hình phát triển web hiện đại dựa trên nền tảng ngôn ngữ JavaScript cho cả phía Client và Server:

Thành phần Công nghệ / Nền tảng Đặc tính kỹ thuật chính theo phân tích của tác giả
Front-End ReactJS Thư viện JavaScript mã nguồn mở do Facebook phát triển; xây dựng giao diện người dùng dựa trên các thành phần (Components) tái sử dụng; ứng dụng cơ chế Virtual DOM tối ưu hóa kết xuất; cú pháp JSX kết hợp HTML và JavaScript; quản lý trạng thái luồng dữ liệu một chiều qua Redux; định tuyến với React Router.
Back-End NodeJS & Express.js Môi trường runtime JavaScript đa nền tảng xây dựng trên V8 Engine của Google Chrome; mô hình I/O hướng sự kiện, không đồng bộ (non-blocking I/O); kiến trúc đơn luồng (single thread) với vòng lặp sự kiện (event loop); xử lý dữ liệu theo khối (không đệm/buffer); cung cấp kiến trúc RESTful API.
Cơ sở dữ liệu MongoDB Hệ quản trị cơ sở dữ liệu NoSQL hướng tài liệu (Document-oriented); lưu trữ dữ liệu dưới cấu trúc tương tự JSON (BSON); mô hình lược đồ động (dynamic schema) linh hoạt; phân cấp dữ liệu dạng Database -> Collection -> Document.
Thiết kế UI/UX Figma / Adobe XD Công cụ tạo wireframe, mockup và prototype giao diện người dùng trước khi chuyển giao lập trình Front-End.

Phương pháp nghiên cứu và thực hiện

  1. Phương pháp phân tích - tổng hợp: Khảo sát thực tế nhu cầu mua sắm thời trang trực tuyến của người tiêu dùng và nhu cầu quản lý bán hàng của các chủ shop may mặc; tổng hợp các tiêu chuẩn chức năng cần có của một hệ thống e-commerce.
  2. Phương pháp mô hình hóa hướng đối tượng bằng UML: Sử dụng các biểu đồ chuẩn để phân tích và thiết kế hệ thống phần mềm:
    • Biểu đồ ca sử dụng (Use Case Diagram): Mô hình hóa chức năng của từng tác nhân và các phân hệ.
    • Biểu đồ tuần tự (Sequence Diagram): Mô tả trình tự tương tác giữa các đối tượng trong các ca sử dụng then chốt.
    • Biểu đồ hoạt động (Activity Diagram): Mô tả luồng xử lý dữ liệu và logic nghiệp vụ của các chức năng đăng ký, đăng nhập, quản lý sản phẩm, xử lý đơn hàng.
  3. Phương pháp thiết kế cơ sở dữ liệu: Xây dựng biểu đồ quan hệ cơ sở dữ liệu và bảng đặc tả các tập hợp dữ liệu (Collections) phục vụ lưu trữ thông tin người dùng, sản phẩm, danh mục, giỏ hàng và đơn đặt hàng.
  4. Phương pháp thực nghiệm phát triển phần mềm: Lập trình kiểm thử tích hợp giữa giao diện ReactJS và hệ thống API NodeJS/Express, kết nối cơ sở dữ liệu MongoDB.

Thiết kế và triển khai

Kiến trúc phân tầng và luồng dữ liệu

Hệ thống được tổ chức theo mô hình Client - Server tách biệt:

  • Tầng hiển thị (Client-Side): Xây dựng bằng ReactJS. Giao diện người dùng nhận dữ liệu từ các RESTful API và kết xuất dữ liệu trực tiếp tại trình duyệt thông qua Virtual DOM. Các trạng thái giỏ hàng, thông tin đăng nhập được quản lý tập trung.
  • Tầng xử lý nghiệp vụ (Server-Side): Xây dựng bằng NodeJS kết hợp Express.js, đảm nhận vai trò định tuyến các yêu cầu HTTP (GET, POST, PUT, DELETE), xác thực người dùng, kiểm tra tính hợp lệ của dữ liệu đơn hàng và thực thi các thao tác CRUD lên cơ sở dữ liệu.
  • Tầng lưu trữ dữ liệu (Database Layer): MongoDB tiếp nhận và lưu trữ các Document dữ liệu dạng BSON.

Phân rã chức năng theo tác nhân

Hệ thống xác định hai tác nhân chính gồm Khách hàng (User) và Quản trị viên (Admin), cùng với các chức năng vận hành tự động của Hệ thống:

Khách hàng (User) Quản trị viên (Admin) Chức năng Hệ thống
- Xem danh sách và chi tiết sản phẩm
- Tìm kiếm và lọc sản phẩm theo tiêu chí
- Thêm/sửa/xóa sản phẩm trong giỏ hàng
- Đăng ký và đăng nhập tài khoản
- Xem và cập nhật thông tin cá nhân
- Thực hiện thanh toán và tạo đơn hàng
- Đánh giá sản phẩm và gửi liên hệ
- Đăng nhập tài khoản quản trị
- Quản lý danh mục sản phẩm (Thêm, Sửa, Xóa)
- Quản lý và xử lý đơn đặt hàng
- Cập nhật trạng thái giao hàng
- Quản lý thông tin tài khoản người dùng
- Thống kê, báo cáo doanh số kinh doanh
- Hiển thị danh mục và banner quảng cáo
- Hiển thị danh sách sản phẩm theo phân trang
- Xử lý cơ chế tìm kiếm và bộ lọc
- Tính toán tổng tiền giỏ hàng tự động
- Tích hợp các cổng thanh toán trực tuyến

Đặc tả luồng sự kiện của các ca sử dụng trọng tâm

  • Ca sử dụng "Đăng ký" & "Đăng nhập": Hệ thống tiếp nhận biểu mẫu, kiểm tra tính hợp lệ của thông tin và sự tồn tại của tài khoản trong cơ sở dữ liệu. Nếu dữ liệu không hợp lệ hoặc sai mật khẩu, hệ thống chuyển hướng sang luồng rẽ nhánh (A1) để yêu cầu nhập lại; nếu hợp lệ, thông tin được ghi nhận vào hệ thống và cấp quyền truy cập tương ứng.
  • Ca sử dụng "Quản lý danh mục sản phẩm" (Dành cho Admin): Bao gồm 3 tác vụ chính:
    1. Thêm sản phẩm: Nhập thông tin, tải hình ảnh, lưu trữ vào cơ sở dữ liệu.
    2. Sửa sản phẩm: Tải dữ liệu cũ lên biểu mẫu, chỉnh sửa thông tin thuộc tính/giá và cập nhật.
    3. Xóa sản phẩm: Hiển thị hộp thoại xác nhận trước khi thực hiện loại bỏ dữ liệu khỏi hệ thống.
  • Ca sử dụng "Mua hàng và Thanh toán" (Dành cho User): Người dùng chọn sản phẩm, đưa vào giỏ hàng, tùy chỉnh số lượng. Khi chuyển sang giao diện thanh toán, hệ thống hiển thị thông tin đơn hàng mặc định; người dùng kiểm tra thông tin giao nhận, lựa chọn hình thức thanh toán (COD hoặc thanh toán qua thẻ/ví điện tử). Hệ thống xác thực thông tin tài khoản, tạo mã đơn hàng và thông báo giao dịch thành công.

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

Chương 1: Tổng quan

Chương 1 thiết lập bức tranh tổng thể về thương mại điện tử ngành thời trang và cơ sở công nghệ thực hiện đề tài:

  • Phân tích khái niệm website bán hàng trực tuyến và các lợi ích mang lại: đối với người tiêu dùng (tiện lợi 24/7, đa dạng lựa chọn, dễ dàng so sánh giá, thanh toán an toàn) và đối với doanh nghiệp (mở rộng phạm vi khách hàng, tiết kiệm chi phí thuê mặt bằng/nhân sự, quản lý tập trung).
  • Xác định mục tiêu, phạm vi và kế hoạch triển khai đề tài xây dựng website cho cửa hàng may mặc.
  • Khảo sát và đánh giá công nghệ: Phân tích ưu điểm của ReactJS (Virtual DOM, JSX, tái sử dụng thành phần), NodeJS (tốc độ xử lý cao trên V8 Engine, kiến trúc phi chặn non-blocking I/O) và MongoDB (NoSQL schema động, lưu trữ JSON linh hoạt, giảm TCO).
  • Phân tích các giới hạn kỹ thuật của MongoDB được tác giả lưu ý: không hỗ trợ thao tác JOIN tự nhiên như RDBMS (phải xử lý bằng mã nguồn), dung lượng tối đa của một document giới hạn ở mức 16MB và độ sâu lồng nhau của BSON giới hạn tối đa 100 cấp độ.

Chương 2: Phân tích hệ thống

Chương 2 trình bày chi tiết giai đoạn phân tích yêu cầu phần mềm và mô hình hóa hệ thống:

  • Thu thập yêu cầu chi tiết từ hai phía: người mua hàng (giao diện thời trang, bộ lọc kích thước/màu sắc, giỏ hàng, thanh toán) và cửa hàng (quản lý sản phẩm, xử lý đơn, theo dõi kho, bảo mật dữ liệu, thống kê).
  • Phân định vai trò của 2 tác nhân chính: Khách hàng và Quản trị viên.
  • Xây dựng biểu đồ Use Case tổng quan và 5 nhóm Use Case phân hệ: Nhóm đăng ký/đăng nhập, Nhóm quản lý thông tin cá nhân, Nhóm quản lý danh mục sản phẩm, Nhóm mua hàng, Nhóm xử lý đơn hàng.
  • Cung cấp hệ thống 12 bảng đặc tả Use Case chi tiết với các luồng sự kiện chính, điều kiện tiên quyết, hậu điều kiện và các kịch bản rẽ nhánh xử lý lỗi.
  • Trình bày các biểu đồ tuần tự (Sequence Diagram) và biểu đồ hoạt động (Activity Diagram) cho các quy trình nghiệp vụ chính của hệ thống.

Chương 3: Thiết kế và đặc tả cơ sở dữ liệu

Chương 3 tập trung vào thiết kế cấu trúc dữ liệu cho website:

  • Xây dựng biểu đồ quan hệ cơ sở dữ liệu, thể hiện các liên kết logic giữa người dùng, sản phẩm, danh mục, chi tiết giỏ hàng và đơn hàng.
  • Đặc tả chi tiết các trường dữ liệu, kiểu dữ liệu và ràng buộc trong các bảng/collection phục vụ lưu trữ thông tin sản phẩm may mặc (tên, mô tả, đơn giá, kích cỡ, màu sắc, hình ảnh), bảng người dùng (tài khoản, mật khẩu mã hóa, thông tin liên hệ), bảng đơn hàng (mã đơn, ngày đặt, trạng thái đơn, phương thức thanh toán).

Chương 4: Kết quả đạt được

Chương 4 tổng kết các kết quả triển khai giao diện và chức năng thực tế của ứng dụng:

  • Trình bày ảnh chụp màn hình và mô tả các phân hệ giao diện:
    • Giao diện người dùng: Trang chủ hiển thị banner và sản phẩm nổi bật; Trang danh sách sản phẩm có bộ lọc; Trang chi tiết sản phẩm; Giao diện đăng ký/đăng nhập; Giao diện quản lý giỏ hàng và thanh toán.
    • Giao diện quản trị viên: Trang quản lý sản phẩm (Thêm, Sửa, Xóa); Trang quản lý và tiếp nhận đơn hàng; Trang báo cáo thống kê doanh số.
  • Đánh giá hiệu quả ứng dụng trong việc tối ưu hóa quy trình bán hàng và tổng hợp các hạn chế còn tồn tại trong quá trình thử nghiệm.

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

Chương 5 tóm tắt các kết quả nghiên cứu đã đạt được so với mục tiêu đề ra và vạch ra các định hướng hoàn thiện hệ thống trong tương lai.


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

Kết quả triển khai thực tế

  • Xây dựng hoàn chỉnh một ứng dụng web thương mại điện tử dành cho cửa hàng đồ may mặc với đầy đủ chức năng hoạt động trên nền tảng MERN stack.
  • Thiết lập giao diện người dùng thân thiện, tương thích responsive, đáp ứng đầy đủ chu trình mua hàng trực tuyến từ khâu duyệt sản phẩm, lọc theo thuộc tính thời trang đến đặt hàng và quản lý giỏ hàng.
  • Xây dựng bảng điều khiển quản trị (Admin Dashboard) hỗ trợ xử lý nghiệp vụ bán hàng: cập nhật danh mục sản phẩm, theo dõi trạng thái đơn hàng và xem thống kê doanh thu.

Đóng góp của đề tài

  • Đóng góp học thuật/kỹ thuật: Cung cấp tài liệu hoàn chỉnh về quy trình phân tích và thiết kế hệ thống thông tin bán hàng trực tuyến theo chuẩn UML; minh chứng cho khả năng ứng dụng hiệu quả của việc sử dụng đồng nhất ngôn ngữ JavaScript (ReactJS, NodeJS) kết hợp cơ sở dữ liệu NoSQL MongoDB trong phát triển phần mềm thương mại điện tử.
  • Đóng góp thực tiễn: Cung cấp mô hình giải pháp phần mềm cụ thể, có tính ứng dụng trực tiếp cho các cơ sở kinh doanh đồ may mặc quy mô nhỏ và vừa nhằm số hóa hoạt động kinh doanh với chi phí vận hành hợp lý.

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

Hạn chế của hệ thống

  • Phạm vi ứng dụng mới chỉ giải quyết bài toán cho một cửa hàng may mặc độc lập, chưa hỗ trợ mô hình chuỗi nhiều chi nhánh hoặc sàn thương mại điện tử đa người bán.
  • Việc sử dụng MongoDB đòi hỏi xử lý quan hệ dữ liệu phức tạp hoàn toàn bằng mã nguồn do hệ thống không hỗ trợ lệnh JOIN tự nhiên như các hệ quản trị cơ sở dữ liệu quan hệ truyền thống.
  • Hệ thống chưa tích hợp các thuật toán học máy hoặc trí tuệ nhân tạo để gợi ý sản phẩm tự động dựa trên lịch sử duyệt web của khách hàng.

Hướng phát triển tương lai

  1. Mở rộng và tích hợp thêm các cổng thanh toán trực tuyến phổ biến (VNPay, MoMo, ZaloPay, thẻ quốc tế).
  2. Tăng cường các giải pháp bảo mật nâng cao nhằm ngăn chặn triệt để các lỗ hổng web như XSS, NoSQL Injection và tối ưu hóa hệ thống phân quyền đa cấp.
  3. Nghiên cứu và phát triển ứng dụng di động (Mobile App trên nền tảng iOS/Android) đồng bộ cơ sở dữ liệu với website để tăng cường trải nghiệm người dùng.
  4. Nâng cấp hệ thống thống kê, bổ sung các biểu đồ phân tích hành vi người tiêu dùng và dự báo xu hướng sản phẩm may mặc bán chạy.

Giá trị tham khảo

Đồ án là tài liệu tham khảo hữu ích cho:

  • Sinh viên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Có thể tham khảo phương pháp mô hình hóa hướng đối tượng qua hệ thống biểu đồ UML (Use Case, Sequence, Activity Diagram) và cấu trúc đặc tả Use Case chi tiết phục vụ các đồ án môn học, khóa luận tốt nghiệp về đề tài thương mại điện tử.
  • Lập trình viên web: Tham khảo kiến trúc kết nối và mô hình xử lý dữ liệu giữa ReactJS (Front-End) và NodeJS/Express kết hợp MongoDB (Back-End).
  • Chủ doanh nghiệp/cửa hàng may mặc: Nắm bắt được các yêu cầu chức năng, phi chức năng và quy trình nghiệp vụ cần thiết khi xây dựng một hệ thống bán hàng trực tuyến.

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

1. Tại sao tác giả lựa chọn kết hợp ReactJS, NodeJS và MongoDB (MERN stack) để xây dựng hệ thống?
Sự kết hợp này cho phép sử dụng thống nhất một ngôn ngữ lập trình JavaScript xuyên suốt từ Front-End đến Back-End, giúp giảm độ phức tạp khi phát triển. ReactJS hỗ trợ tạo giao diện động, mượt mà nhờ Virtual DOM; NodeJS xử lý tốt các kết nối bất đồng bộ theo thời gian thực; còn MongoDB cung cấp lược đồ dữ liệu động dạng JSON-like, linh hoạt trong việc lưu trữ thông tin sản phẩm may mặc có nhiều thuộc tính biến đổi.

2. Hệ thống phân quyền cho những tác nhân nào và phạm vi chức năng của từng tác nhân ra sao?
Hệ thống phân định 2 tác nhân chính:

  • Khách hàng (User): Xem danh mục/chi tiết sản phẩm, lọc sản phẩm, quản lý giỏ hàng, tạo tài khoản, chỉnh sửa thông tin cá nhân và thực hiện thanh toán đơn hàng.
  • Quản trị viên (Admin): Quản lý danh mục (thêm, sửa, xóa sản phẩm), tiếp nhận và xác nhận đơn đặt hàng, quản lý người dùng và theo dõi thống kê doanh số.

3. Quy trình xử lý ca sử dụng Thanh toán của khách hàng diễn ra như thế nào?
Người dùng mở giỏ hàng, hệ thống hiển thị form thanh toán kèm thông tin mặc định. Người dùng kiểm tra thông tin nhận hàng và chọn phương thức thanh toán. Nếu chọn thanh toán khi nhận hàng (COD), đơn hàng được xác nhận ngay. Nếu chọn thanh toán qua thẻ ngân hàng/ví điện tử, hệ thống mở form nhập thông tin tài khoản, tiến hành kiểm tra tính hợp lệ; nếu hợp lệ, giao dịch được xác nhận thành công; nếu thông tin sai, hệ thống chuyển sang luồng rẽ nhánh yêu cầu nhập lại hoặc hủy giao dịch.

4. Những nhược điểm kỹ thuật nào của cơ sở dữ liệu MongoDB được tác giả chỉ ra trong tài liệu?
Tác giả nêu rõ 4 hạn chế của MongoDB: không hỗ trợ thao tác JOIN (phải mã hóa thủ công trong code, dễ làm chậm hiệu suất); lưu trữ dạng key-value có thể gây dư thừa dữ liệu và tốn bộ nhớ; kích thước dữ liệu của một document bị giới hạn tối đa 16MB; và mức độ phân cấp lồng nhau trong cấu trúc BSON bị giới hạn tối đa 100 cấp độ.

5. Điểm khác biệt giữa luồng xử lý giao diện của ReactJS so với các mô hình truyền thống theo phân tích của đề tài là gì?
ReactJS sử dụng cơ chế DOM ảo (Virtual DOM) và cú pháp JSX. Mọi thay đổi về dữ liệu và trạng thái đều được tính toán trước trên Virtual DOM để chỉ cập nhật những phần tử thực sự thay đổi trên DOM thật, giúp tránh các thao tác vẽ lại toàn bộ giao diện, từ đó tăng tốc độ tải trang và nâng cao hiệu suất trải nghiệm người dùng.


Kết luận

Đồ án tốt nghiệp "Xây dựng Website bán hàng trực tuyến ứng dụng cho cửa hàng đồ may mặc" của sinh viên Nguyễn Đức Duy đã hoàn thành đầy đủ các mục tiêu đề ra về mặt lý thuyết và thực tiễn. Tác giả đã áp dụng chặt chẽ quy trình kỹ nghệ phần mềm từ khâu khảo sát nhu cầu, phân tích ca sử dụng, thiết kế cơ sở dữ liệu đến triển khai lập trình hệ thống web trên nền tảng ReactJS, NodeJS và MongoDB. Kết quả đạt được là một website thương mại điện tử vận hành ổn định, hỗ trợ hiệu quả nghiệp vụ mua sắm cho khách hàng và công tác quản trị cho cửa hàng may mặc, đồng thời mở ra các định hướng phát triển ứng dụng di động và tích hợp thanh toán đa nền tảng trong tương lai.