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

Trong bối cảnh cuộc Cách mạng Công nghiệp 4.0 và sự phát triển của công nghệ thông tin, các phương thức quản trị và giao dịch truyền thống trên giấy tờ dần được thay thế bởi các hệ thống phần mềm và website trực tuyến. Mạng Internet cho phép người tiêu dùng thực hiện các giao thức mua sắm, giao dịch mọi lúc, mọi nơi mà không cần hiện diện trực tiếp tại cửa hàng. Đối với ngành hàng thiết bị di động và sản phẩm công nghệ, việc ứng dụng nền tảng số hóa giúp khắc phục tình trạng quá tải tại điểm bán, hỗ trợ tra cứu tình trạng hàng hóa và tối ưu hóa thời gian thực hiện giao dịch của khách hàng. Bên cạnh đó, sự xuất hiện của các công cụ trí tuệ nhân tạo (AI) đã tạo tiền đề cho việc tự động hóa tư vấn và giải đáp thông tin khách hàng trên môi trường số. Từ bối cảnh thực tiễn đó, nhóm tác giả đã tiến hành thực hiện đồ án tốt nghiệp: "Tìm hiểu công nghệ MERN Stack xây dựng website bán thiết bị di động".

Nhiệm vụ nghiên cứu của đồ án được xác định gồm hai phần cụ thể:

  1. Nhiệm vụ lý thuyết: Nghiên cứu và tìm hiểu các công nghệ nền tảng bao gồm Node.js, ExpressJS, ReactJS, Redux, cơ sở dữ liệu MongoDB; tìm hiểu giải pháp tích hợp cổng thanh toán trực tuyến VNPay và nền tảng xử lý ngôn ngữ tự nhiên Dialogflow.
  2. Nhiệm vụ thực hành:
    • Ứng dụng ReactJS, React-Redux, Redux Toolkit và thư viện Axios để thiết kế giao diện phía người dùng (User) và quản trị viên (Admin).
    • Sử dụng Node.js kết hợp ExpressJS để thiết lập hệ thống giao diện lập trình ứng dụng (RESTful APIs) cho toàn bộ các mô-đun chức năng.
    • Thiết kế và triển khai cơ sở dữ liệu trên hệ quản trị MongoDB.
    • Tích hợp cổng thanh toán VNPay phục vụ thanh toán trực tuyến qua ví điện tử và tài khoản ngân hàng.
    • Xây dựng và tích hợp chatbot tư vấn tự động thông qua nền tảng Dialogflow.
    • Tích hợp dịch vụ đám mây Cloudinary để quản lý và lưu trữ hình ảnh sản phẩm.
    • Ứng dụng Nodemailer kết hợp Google APIs (OAuth2Client) để thực hiện chức năng gửi email xác thực và khôi phục mật khẩu.

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

  • Đối tượng nghiên cứu: Các quy trình nghiệp vụ thương mại điện tử ngành thiết bị di động trực tuyến; các giải pháp công nghệ trong bộ công nghệ MERN Stack (MongoDB, ExpressJS, ReactJS, Node.js), công cụ quản lý trạng thái Redux, thư viện truyền thông HTTP Axios, chuẩn bảo mật xác thực JSON Web Token (JWT) và các dịch vụ tích hợp bên thứ ba.
  • Phạm vi không gian và thời gian: Đề tài được thực hiện tại Bộ môn Công nghệ Phần mềm, Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh; thời gian thực hiện kéo dài từ ngày 03/03/2024 đến ngày 10/07/2024.
  • Phạm vi chức năng: Hệ thống tập trung xây dựng hai phân hệ phần mềm độc lập gồm phân hệ người dùng (tìm kiếm, xem chi tiết, giỏ hàng, đặt hàng, thanh toán VNPay, đánh giá, tương tác chatbot) và phân hệ quản trị (quản lý sản phẩm, danh mục, thương hiệu, màu sắc, đơn hàng, mã giảm giá, tài khoản người dùng, bài viết blog, phản hồi và thống kê doanh thu).

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

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

Đề tài vận dụng kiến trúc phát triển ứng dụng web dựa trên bộ công nghệ MERN Stack, kết hợp các thư viện và dịch vụ hỗ trợ:

  • ReactJS: Thư viện JavaScript mã nguồn mở cho tầng giao diện người dùng (Front-end), hoạt động dựa trên cấu trúc Virtual DOM và chia tách giao diện thành các thành phần độc lập (Components: Function Component, Class Component). Hệ thống sử dụng JSX, Props, State và React Hooks (từ phiên bản React 16.8) để quản lý luồng hiển thị.
  • Redux & Redux Toolkit: Công cụ quản lý trạng thái tập trung (State Management) tuân thủ 3 nguyên lý: nguồn dữ liệu tin cậy duy nhất (Store), trạng thái chỉ đọc (Read-only State), và thay đổi trạng thái thông qua các hàm thuần túy (Reducers/Actions). Redux Toolkit được áp dụng để rút gọn cú pháp và tích hợp sẵn middleware.
  • Node.js & ExpressJS: Nền tảng máy chủ (Back-end) phát triển trên môi trường runtime Node.js với cơ chế non-blocking I/O và mô hình xử lý bất đồng bộ theo sự kiện (event-driven). ExpressJS đóng vai trò là framework xây dựng hệ thống định tuyến (routing), xử lý middleware và cung cấp chuẩn RESTful API.
  • MongoDB & Mongoose ODM: Hệ quản trị cơ sở dữ liệu NoSQL lưu trữ dưới dạng document JSON/BSON linh hoạt. Thư viện Mongoose được dùng để định nghĩa các lược đồ dữ liệu (Schemas), ánh xạ các đối tượng (Models) và thực thi các thao tác truy vấn, kiểm thực dữ liệu.
  • Bảo mật và Dịch vụ ngoài: Thư viện JsonWebToken (JWT) thực hiện mã hóa thông tin xác thực người dùng bằng thuật toán HMAC SHA256 (HS256); thư viện Axios xử lý các HTTP request (GET, POST, PUT, DELETE); Cloudinary phục vụ lưu trữ đa phương tiện; Nodemailer kết hợp Google OAuth2Client phục vụ gửi email hệ thống; nền tảng Dialogflow xử lý ngôn ngữ tự nhiên cho chatbot.

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

  • Phương pháp khảo sát hiện trạng: Tác giả tiến hành khảo sát, phân tích giao diện và chức năng của ba hệ thống bán lẻ thiết bị di động thực tế tại Việt Nam gồm: CellphoneS, Thế Giới Di Động và FPT Shop.
  • Phương pháp phân tích và mô hình hóa: Sử dụng ngôn ngữ mô hình hóa thống nhất (UML) để xây dựng biểu đồ Use Case tổng quát và chi tiết cho từng tác nhân, thiết kế 46 lược đồ tuần tự (Sequence Diagrams) mô tả luồng tương tác giữa các tầng giao diện, bộ điều khiển và cơ sở dữ liệu.
  • Phương pháp kiểm thử phần mềm: Thiết lập kế hoạch và quy trình kiểm thử hệ thống dựa trên tập 22 ca kiểm thử (Test cases) chức năng.
Hệ thống khảo sát Ưu điểm ghi nhận Hạn chế ghi nhận
CellphoneS Giao diện trực quan; phân quyền người dùng chi tiết; tương thích nền tảng di động Android và iOS. Chưa tối ưu định dạng kiểm tra dữ liệu đầu vào cho số điện thoại; mật độ thông tin trên một màn hình còn dày đặc.
Thế Giới Di Động Màu sắc hài hòa, bố cục rõ ràng; thông số kỹ thuật và mô tả sản phẩm chi tiết; dịch vụ hỗ trợ đầy đủ. Công cụ tìm kiếm sản phẩm cụ thể chưa được tối ưu hóa; thiếu kênh hỗ trợ tương tác chat trực tuyến ngay trên web.
FPT Shop Giao diện bắt mắt; hỗ trợ gợi ý tìm kiếm; phương thức thanh toán đa dạng (cho phép thanh toán không cần tài khoản). Một số tính năng chưa đạt hiệu suất tối đa; chưa hỗ trợ tính năng chọn lọc từng sản phẩm riêng lẻ trong giỏ hàng.

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình phân tầng tách biệt giữa Front-end và Back-end thông qua các API tiêu chuẩn, đảm bảo tính mô-đun hóa cao:

[Client: ReactJS / Redux Toolkit / Axios]
[Server: Node.js / ExpressJS Framework]
[MongoDB (Mongoose ODM)]   [Third-Party Services]

1. Kiến trúc Back-end và Cấu trúc thư mục

Mã nguồn phía máy chủ được tổ chức thành các thư mục chức năng:

  • configs/: Chứa các tệp cấu hình hệ thống, bao gồm tệp Mongoose.js thiết lập chuỗi kết nối đến cơ sở dữ liệu MongoDB.
  • middleware/: Chứa các bộ lọc trung gian, tiêu biểu là authMiddleware.js (kiểm tra token JWT, giải mã payload và phân quyền truy cập vai trò người dùng) và uploadImage.js (xác thực định dạng và kích thước tệp ảnh tải lên).
  • models/: Định nghĩa các lược đồ dữ liệu Mongoose cho các đối tượng: user, product, category, brand, order, coupon, enquiry, blog, color.
  • routes/: Định nghĩa các tuyến đường dẫn API và gán phương thức xử lý tương ứng cho từng nhóm chức năng.
  • utils/: Chứa các hàm tiện ích bổ trợ như cấu hình gửi email tự động, xử lý chuỗi và mã hóa.
  • index.js: Tệp thực thi chính, khởi tạo ứng dụng Express, kết nối cổng mạng và nạp các middleware toàn cục.

2. Mô hình hóa tác nhân và Use Case

Hệ thống xác định 3 tác nhân chính (Actors) tham gia vào hệ thống với 51 trường hợp sử dụng (Use Cases) được định danh từ UC_01 đến UC_51:

  • Khách (Guest): Thực hiện đăng ký tài khoản (UC_01), xem danh sách sản phẩm (UC_16), xem chi tiết sản phẩm (UC_15), tìm kiếm sản phẩm, so sánh sản phẩm (UC_06), thêm sản phẩm vào giỏ hàng (UC_13), tương tác với chatbot tự động (UC_51).
  • Thành viên (User): Đăng nhập (UC_03), đăng xuất (UC_02), khôi phục mật khẩu (UC_04), quản lý hồ sơ cá nhân (UC_05, UC_07), quản lý danh sách yêu thích (UC_08), quản lý giỏ hàng (UC_14), tạo đơn hàng (UC_09), áp dụng mã giảm giá (UC_10), đánh giá sản phẩm (UC_11), gửi thắc mắc liên hệ (UC_12), theo dõi đơn hàng và chat trực tiếp với quản trị viên (UC_50).
  • Quản trị viên (Admin): Quản lý toàn bộ danh mục sản phẩm (UC_17 đến UC_20), thương hiệu (UC_21 đến UC_24), loại sản phẩm (UC_25 đến UC_28), mã giảm giá (UC_29 đến UC_32), tài khoản người dùng và khóa tài khoản (UC_33, UC_35), trạng thái đơn hàng (UC_40), bảng màu sắc (UC_41 đến UC_44), bài viết blog (UC_46 đến UC_49), phản hồi liên hệ (UC_37 đến UC_39), thống kê doanh thu hệ thống (UC_45).

3. Kế hoạch và Quy trình kiểm thử

Quy trình kiểm thử được xây dựng thông qua 22 bảng kịch bản kiểm thử (Test Cases) bao quát các chức năng: kiểm tra xác thực người dùng, tìm kiếm sản phẩm, thao tác giỏ hàng, luồng đặt hàng và thanh toán, áp dụng mã giảm giá, đánh giá sản phẩm, quản lý thông tin tài khoản, quản lý dữ liệu sản phẩm, danh mục, thương hiệu, đơn hàng, bài viết blog và quản trị người dùng.

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

Phần mở đầu

Trình bày tính cấp thiết của việc xây dựng website thương mại điện tử chuyên ngành thiết bị di động trong bối cảnh chuyển đổi số và phát triển của trí tuệ nhân tạo. Tác giả xác định rõ ràng mục tiêu nghiên cứu, đối tượng tiếp cận, phạm vi triển khai và ý nghĩa thực tiễn của đề tài nhằm mang đến trải nghiệm mua sắm tiện lợi cho người dùng và giải pháp quản lý tài nguyên đồng bộ cho quản trị viên.

Chương 1: Cơ sở lý thuyết

Tập trung làm rõ cơ sở lý thuyết của các công nghệ cấu thành hệ thống:

  • Trình bày kiến trúc thành phần của ứng dụng web hiện đại chia tách Front-end (ReactJS) và Back-end (Node.js/ExpressJS).
  • Phân tích chi tiết các khái niệm cốt lõi trong ReactJS: Component (Function/Class Component), Props, State, React Hooks và Virtual DOM.
  • Giới thiệu cấu trúc quản lý trạng thái Redux, bao gồm Action, Reducer, Store và thư viện Redux Toolkit.
  • Mô tả cơ chế hoạt động của thư viện Axios trong việc thực thi các HTTP Request (GET, POST, PUT, DELETE) kết nối cơ sở dữ liệu.
  • Phân tích đặc điểm của môi trường thực thi Node.js, framework ExpressJS, hệ quản trị cơ sở dữ liệu MongoDB cùng thư viện Mongoose ODM.
  • Trình bày giải pháp xác thực bằng JSON Web Token (thuật toán HS256), cơ chế gửi email bảo mật qua OAuth2Client kết hợp Nodemailer, và kiến trúc tích hợp nền tảng AI Dialogflow.

Chương 2: Khảo sát hiện trạng và mô hình hóa yêu cầu

  • Đánh giá hiện trạng ba website bán lẻ thực tế (CellphoneS, Thế Giới Di Động, FPT Shop), rút ra các ưu điểm về bố cục giao diện và các mặt hạn chế cần khắc phục như bộ lọc tìm kiếm và kênh hỗ trợ trực tuyến.
  • Phân tích và thiết lập danh sách các yêu cầu chức năng cho từng nhóm tác nhân (Khách, Thành viên, Quản trị viên) và các yêu cầu phi chức năng (bảo mật băm mật khẩu, tính khả dụng, hiệu năng phản hồi và năng lực lưu trữ của cơ sở dữ liệu).
  • Xây dựng sơ đồ Use Case tổng quát, lập bảng mô tả chi tiết 51 Use Case và tài liệu hóa các biểu mẫu đặc tả Use Case chuẩn cho các luồng nghiệp vụ quan trọng (Register, Logout, Login, Forgot Password,...).

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

  • Hiện thực hóa các tương tác hệ thống thông qua 46 lược đồ tuần tự (Sequence Diagram), thể hiện chi tiết luồng dữ liệu từ giao diện người dùng, qua hệ thống định tuyến, các middleware xác thực, bộ điều khiển (controllers), đến việc lưu vết dữ liệu tại MongoDB.
  • Thiết kế giao diện chi tiết cho phân hệ người dùng (Trang chủ, Đăng nhập, Đăng ký, Danh mục Our Store, Chi tiết sản phẩm, Giỏ hàng, Thanh toán, Đơn hàng của tôi, Liên hệ Contact Us) và phân hệ quản trị (Đăng nhập Admin, Bảng điều khiển thống kê, Quản lý sản phẩm, Thêm/Sửa sản phẩm, Quản lý đơn hàng, Chi tiết đơn hàng, Quản lý người dùng, Quản lý phản hồi và Giao diện chat trực tuyến).

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

  • Mô tả danh mục công cụ phát triển phần mềm, môi trường cài đặt và cấu hình ứng dụng trên máy chủ.
  • Thiết lập kế hoạch và kịch bản kiểm thử chi tiết bao gồm 22 bảng kiểm thử cho từng mô-đun chức năng, ghi nhận kết quả thực thi các luồng sự kiện cơ bản, luồng thay thế và xử lý ngoại lệ.

Phần kết luận

Đánh giá tổng quan các kết quả nghiên cứu lý thuyết và thực nghiệm phần mềm đã hoàn thành; chỉ ra các nhược điểm còn tồn tại của hệ thống và đề xuất các hướng phát triển nâng cấp trong tương lai.

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

Kết quả chính

  • Xây dựng hoàn chỉnh một website thương mại điện tử chuyên kinh doanh thiết bị di động với cấu trúc mã nguồn phân tách rõ ràng giữa Front-end (ReactJS) và Back-end (Node.js/ExpressJS).
  • Thiết kế và chuẩn hóa cơ sở dữ liệu trên MongoDB thông qua Mongoose với các mô hình dữ liệu đồng bộ (Users, Products, Orders, Categories, Brands, Coupons, Enquiries, Blogs, Colors).
  • Triển khai thành công 51 Use Cases chức năng đáp ứng đầy đủ nghiệp vụ cho cả 3 nhóm đối tượng sử dụng (Khách, Thành viên, Quản trị viên).
  • Tích hợp thành công các dịch vụ tiện ích mở rộng:
    • Cổng thanh toán trực tuyến VNPay phục vụ giao dịch điện tử an toàn.
    • Chatbot thông minh tích hợp Dialogflow hỗ trợ trả lời tự động các câu hỏi thường gặp của khách hàng.
    • Quản lý tải và phân phối hình ảnh qua dịch vụ đám mây Cloudinary.
    • Gửi email xác nhận và cấp phát token khôi phục mật khẩu thông qua Nodemailer kết hợp giao thức Google OAuth2Client.

Giải pháp và đóng góp của đề tài

  • Khắc phục các nhược điểm được ghi nhận từ quá trình khảo sát thực tế tại các website lớn: bổ sung khung chat hỗ trợ trực tuyến trên nền tảng web, tích hợp chatbot tự động giải đáp thắc mắc liên tục, tối ưu hóa giao diện xem và quản lý giỏ hàng.
  • Xây dựng phân hệ quản trị trực quan cho phép người quản lý theo dõi báo cáo doanh thu, kiểm soát trạng thái đơn hàng theo thời gian thực và quản lý tập trung toàn bộ dữ liệu tài nguyên sản phẩm.

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

  • Hạn chế:
    • Kiến trúc đơn luồng của Node.js bộc lộ hạn chế trong việc tận dụng tối đa năng lực xử lý đa lõi trên các máy chủ hiện đại khi xử lý các tác vụ tính toán nặng.
    • Việc quản lý các hàm gọi lại (callbacks) phức tạp dễ dẫn đến hiện tượng lồng nhau (callback hell) nếu không được tái cấu trúc triệt để bằng async/await.
    • Các thao tác liên kết dữ liệu phức tạp trên cơ sở dữ liệu phi quan hệ (NoSQL) đòi hỏi chi phí xử lý cao hơn so với hệ cơ sở dữ liệu quan hệ truyền thống.
    • Một số kịch bản tương tác nâng cao của chatbot và tính năng gợi ý sản phẩm chuyên sâu cần thêm thời gian huấn luyện mô hình.
  • Hướng phát triển tiếp:
    • Tối ưu hóa hiệu năng Back-end, triển khai giải pháp xử lý đa luồng (clustering) trên Node.js để nâng cao năng lực phục vụ đồng thời.
    • Hoàn thiện và mở rộng các kịch bản hội thoại (Intents/Entities) cho hệ thống Dialogflow AI để chatbot phản hồi ngữ cảnh thông minh và linh hoạt hơn.
    • Triển khai hệ thống trên hạ tầng đám mây thực tế và tối ưu hóa trải nghiệm người dùng trên nhiều kích thước màn hình thiết bị khác nhau.

Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo phù hợp cho:

  • Sinh viên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Cung cấp tài liệu tham khảo thực tế về việc áp dụng trọn vẹn bộ công nghệ MERN Stack trong một dự án thương mại điện tử hoàn chỉnh.
  • Người nghiên cứu phát triển web: Cung cấp tài liệu chi tiết về quy trình phân tích yêu cầu, thiết kế 51 Use Cases, 46 lược đồ tuần tự (Sequence Diagram), cũng như kỹ thuật tích hợp các dịch vụ bên thứ ba như VNPay, Google OAuth2, Cloudinary và Dialogflow.

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

1. Hệ thống phân chia vai trò người dùng như thế nào và mỗi vai trò có quyền hạn gì?
Hệ thống phân định 3 tác nhân: Khách (Guest) có quyền tìm kiếm, xem danh mục, xem chi tiết sản phẩm, thêm vào giỏ hàng, chat với bot AI; Thành viên (User) có thêm quyền đặt hàng, thanh toán qua VNPay, quản lý thông tin cá nhân, đánh giá sản phẩm, chat với tư vấn viên; Quản trị viên (Admin) có quyền quản lý sản phẩm, thương hiệu, danh mục, mã giảm giá, đơn hàng, người dùng, bài viết blog, phản hồi và xem thống kê doanh thu.

2. Cơ chế xác thực và bảo mật tài khoản người dùng được triển khai ra sao?
Hệ thống sử dụng thư viện JsonWebToken (JWT) kết hợp thuật toán HS256 để tạo mã truy cập (accessToken) cho người dùng sau khi đăng nhập thành công. Mật khẩu người dùng được băm trước khi lưu trữ vào MongoDB. Chức năng khôi phục mật khẩu sử dụng token gửi qua email thông qua dịch vụ Nodemailer kết hợp Google OAuth2Client.

3. Cấu trúc thư mục Back-end của dự án được tổ chức như thế nào?
Back-end được tổ chức theo các thư mục chức năng: configs (chứa cấu hình hệ thống và kết nối Mongoose), middleware (chứa authMiddleware.js, uploadImage.js), models (chứa lược đồ Mongoose của các đối tượng dữ liệu), routes (định nghĩa các API), utils (các công cụ xử lý bổ trợ), cùng các tệp .env, index.js, package.json và package-lock.json.

4. Dịch vụ bên thứ ba nào được tích hợp trong hệ thống và phục vụ chức năng gì?
Hệ thống tích hợp 4 dịch vụ bên thứ ba: cổng thanh toán VNPay (hỗ trợ thanh toán trực tuyến qua ví điện tử/ngân hàng), nền tảng Dialogflow của Google (cung cấp chatbot AI tương tác tự động), Cloudinary (lưu trữ và đồng bộ hình ảnh sản phẩm), và Google APIs / OAuth2Client (hỗ trợ gửi email xác thực và đặt lại mật khẩu).

5. Điểm khác biệt trong việc quản lý trạng thái phía Front-end của đồ án là gì?
Front-end kết hợp ReactJS với thư viện Redux Toolkit nhằm tối giản hóa số lượng mã nguồn khai báo actions và reducers, tự động cung cấp các middleware phổ biến, và quản lý luồng dữ liệu ứng dụng tập trung theo kiến trúc một chiều (Single Source of Truth).

Kết luận

Đồ án tốt nghiệp đã nghiên cứu và triển khai thành công ứng dụng web bán thiết bị di động dựa trên nền tảng công nghệ MERN Stack, kết hợp quản lý trạng thái bằng Redux Toolkit. Hệ thống đáp ứng đầy đủ các nghiệp vụ thương mại điện tử cơ bản và nâng cao thông qua việc tích hợp các dịch vụ hiện đại như cổng thanh toán VNPay, chatbot Dialogflow AI, lưu trữ Cloudinary và xác thực bảo mật qua JWT. Công trình cung cấp tài liệu tham khảo chi tiết về quy trình phân tích, thiết kế mô hình hóa Use Case, xây dựng lược đồ tuần tự và kịch bản kiểm thử phần mềm cho sinh viên và lập trình viên chuyên ngành công nghệ thông tin.