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

Vấn đề vệ sinh an toàn thực phẩm đang là mối quan tâm hàng đầu của xã hội khi các thông tin về thực phẩm bẩn, dư lượng thuốc trừ sâu, vi khuẩn và chất bảo quản độc hại xuất hiện thường xuyên trên các phương tiện truyền thông. Trước thực trạng này, nhu cầu tiêu dùng các sản phẩm nông sản sạch, thực phẩm hữu cơ có nguồn gốc xuất xứ rõ ràng và được chứng nhận an toàn ngày càng gia tăng. Theo các dẫn chứng từ báo cáo ngành hàng của Vietnam Report, xu hướng tiêu dùng trong ngành thực phẩm đang hướng mạnh mẽ đến các sản phẩm tự nhiên, thân thiện với môi trường, đòi hỏi tính minh bạch về nguồn gốc và việc ứng dụng dữ liệu vào chuỗi phân phối. Đồng thời, báo cáo xu hướng từ AC Nielsen chỉ ra rằng có tới 86% người tiêu dùng Việt Nam ưu tiên lựa chọn sản phẩm hữu cơ (organic) cho bữa ăn hàng ngày nhờ tính an toàn và hàm lượng dinh dưỡng cao.

Nhằm giải quyết bài toán tiếp cận nguồn thực phẩm sạch và tối ưu hóa trải nghiệm mua sắm trực tuyến cho người tiêu dùng bận rộn, nhóm tác giả đã thực hiện đồ án "Xây dựng website bán thực phẩm" với thương hiệu FreshLife.

Nhiệm vụ và mục tiêu cụ thể của đề tài bao gồm:

  1. Tiến hành khảo sát thị trường nhằm nhận diện hành vi tiêu dùng, thị hiếu giao diện, các khó khăn và nhu cầu tính năng của khách hàng khi mua thực phẩm trực tuyến.
  2. Lựa chọn kiến trúc và các công nghệ phù hợp (ReactJS, NodeJS, ExpressJS, MongoDB, Bootstrap, JWT) để phát triển hệ thống web kinh doanh.
  3. Phân tích và thiết kế hệ thống chi tiết thông qua mô hình Use Case, sơ đồ luồng quy trình nghiệp vụ BPMN và sơ đồ luồng dữ liệu DFD.
  4. Xây dựng cấu trúc cơ sở dữ liệu hướng tài liệu (NoSQL) và thiết kế giao diện hoàn chỉnh cho cả phân hệ người dùng (Client) lẫn phân hệ quản trị (Admin).

Đối tượng nghiên cứu của đồ án là quy trình kinh doanh, hệ thống quản lý bán lẻ thực phẩm sạch trực tuyến và hành vi người tiêu dùng trên môi trường thương mại điện tử. Phạm vi nghiên cứu tập trung vào nhóm khách hàng từ 18 đến 45 tuổi có nhu cầu về lối sống lành mạnh, trong đó nhóm trọng tâm là 23–32 tuổi – đối tượng có hiểu biết sâu về công nghệ và thường xuyên mua sắm trực tuyến. Đồ án được hoàn thành vào ngày 31 tháng 12 năm 2023 tại Trường Đại học Kinh tế - Luật, Đại học Quốc gia Thành phố Hồ Chí Minh.

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

Đề tài kết hợp giữa phương pháp nghiên cứu định lượng trong khảo sát người dùng và phương pháp phân tích thiết kế hệ thống hướng đối tượng/hướng dữ liệu:

  • Phương pháp khảo sát và phân tích dữ liệu thị trường: Nhóm tác giả tiến hành thu thập dữ liệu sơ cấp thông qua biểu mẫu khảo sát trực tuyến. Nội dung khảo sát bao gồm đặc điểm nhân khẩu học (giới tính, độ tuổi), tần suất mua hàng, hành vi lựa chọn sản phẩm, thị hiếu về giao diện (kiểu dáng, màu sắc, hiệu ứng tương tác), những rào cản gặp phải và các tính năng mong muốn. Dữ liệu thứ cấp được kế thừa từ các báo cáo thị trường của Vietnam Report và AC Nielsen.
  • Phương pháp mô hình hóa nghiệp vụ và chức năng: Sử dụng ký hiệu chuẩn BPMN (Business Process Model and Notation) để mô tả chi tiết các luồng quy trình xử lý (đăng ký, đăng nhập, thêm giỏ hàng, đặt hàng, quản lý đơn hàng, quản lý tài khoản) và sơ đồ Use Case của UML để phân rã chức năng hệ thống theo từng tác nhân.
  • Phương pháp mô hình hóa dữ liệu: Sử dụng sơ đồ luồng dữ liệu DFD (Data Flow Diagram) cấp ngữ cảnh để định hình luồng tương tác giữa các tác nhân và kho dữ liệu, kết hợp với phương pháp thiết kế cơ sở dữ liệu hướng tài liệu (Document-oriented NoSQL) trên nền tảng MongoDB.

Thiết kế và triển khai hệ thống

Hệ thống FreshLife được xây dựng dựa trên ngăn xếp công nghệ JavaScript toàn diện (Full-stack JavaScript), bảo đảm khả năng tương thích và hiệu năng xử lý:

  • Phân tầng Giao diện (Frontend):
    • ReactJS: Thư viện mã nguồn mở phát triển bởi Facebook, đóng vai trò xây dựng giao diện ứng dụng trang đơn (SPA). ReactJS cho phép render dữ liệu linh hoạt ở cả tầng Server và Client, đảm bảo tính phản hồi nhanh và khả năng mở rộng giao diện.
    • Bootstrap: Framework front-end gồm HTML, CSS và JavaScript giúp chuẩn hóa bố cục giao diện, cung cấp các thành phần giao diện mẫu (typography, forms, buttons, tables, modals, carousels) và đảm bảo tính tương thích hiển thị trên nhiều loại thiết bị (responsive).
  • Phân tầng Xử lý (Backend):
    • NodeJS: Môi trường thực thi JavaScript đa nền tảng dựa trên V8 JavaScript engine của Google Chrome, vận hành theo cơ chế non-blocking I/O và Event-driven, cho phép hệ thống chịu tải cao và xử lý đồng thời nhiều kết nối.
    • ExpressJS: Framework chạy trên NodeJS, cung cấp hệ thống định tuyến (router) linh hoạt, hỗ trợ xử lý các phương thức HTTP và cấu hình các lớp trung gian (middleware) để xây dựng hệ thống API.
  • Phân tầng Dữ liệu (Database):
    • 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 định dạng JSON/BSON linh hoạt, loại bỏ cấu trúc bảng cố định của các cơ sở dữ liệu quan hệ truyền thống và tối ưu hóa tốc độ truy vấn.
  • Cơ chế Xác thực và Bảo mật:
    • JSON Web Token (JWT): Phương thức xác thực không trạng thái (Token-based authentication). Chuỗi token gồm 3 phần: Header, Payload và Signature, hỗ trợ xác minh quyền truy cập của người dùng và quản trị viên giữa client và server mà không cần gửi lại mật khẩu trên mỗi phiên làm việc.

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

Chương 1: Tổng quan đề tài

Chương này trình bày lý do chọn đề tài, khảo sát thị trường, chân dung khách hàng, phạm vi nghiên cứu và giới thiệu nền tảng FreshLife. Kết quả khảo sát thực tế cung cấp các số liệu định lượng:

Tiêu chí khảo sát Tỷ lệ phản hồi (%) Đặc điểm ghi nhận
Giới tính 50,0% Nam
45,8% Nữ		 Khách hàng phân bổ cân bằng giữa hai giới
Độ tuổi Chiếm đa số: 23–32 tuổi Nhóm am hiểu công nghệ và có kinh nghiệm mua thực phẩm trực tuyến
Kiểu giao diện ưa thích 87,5% Ưa chuộng phong cách thiết kế tối giản, trực quan
Màu sắc trang web 72,0% Thích tông màu tươi sáng, nổi bật
Trở ngại giao diện TMĐT 70,4% khó điều hướng
51,9% thiếu tính năng
44,4% không tương thích thiết bị		 Cần tối ưu UX/UI và hoàn thiện các tính năng cốt lõi
Tính năng quan tâm nhất 41,7% giao diện thân thiện
25,0% tìm kiếm chính xác		 Đề cao tính thuận tiện và tốc độ tìm kiếm
Tiện ích gia tăng 39,1% nhận thông báo
30,4% bộ lọc nâng cao
30,4% hỗ trợ trực tuyến		 Cần tích hợp thông báo đơn hàng và tư vấn khách hàng
Bảo mật & Minh bạch 66,7% chi tiết nguồn gốc
33,3% bảo mật thanh toán		 Nguồn gốc sản phẩm là yếu tố then chốt tạo niềm tin
Phương thức thanh toán 83,3% Yêu cầu tích hợp đa dạng phương thức thanh toán
Thông tin vận chuyển 62,5% chi phí/thời gian
54,2% theo dõi đơn		 Mong muốn theo dõi trạng thái đơn hàng thời gian thực
Kênh tiếp cận thông tin 65,2% blog chuyên sâu
65,2% đánh giá từ khách khác
52,2% mô tả chi tiết		 Blog và phản hồi cộng đồng thúc đẩy quyết định mua hàng

Từ những số liệu trên, dự án định hình FreshLife là hệ sinh thái kinh doanh thực phẩm tươi ngon, sạch, đảm bảo chất lượng với hơn 8 năm kinh nghiệm mở rộng từ cửa hàng truyền thống sang nền tảng số.

Chương 2: Tổng quan về các công nghệ

Tác giả hệ thống hóa các khái niệm, đặc trưng kỹ thuật và vai trò của từng công nghệ trong dự án: ReactJS trong việc xây dựng giao diện người dùng tương tác; Bootstrap hỗ trợ dàn trang; NodeJS và ExpressJS cấu thành hạ tầng dịch vụ API phía máy chủ; MongoDB đảm nhận lưu trữ phi quan hệ; và JWT đóng vai trò bảo mật phân quyền.

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

Chương này chi tiết hóa cấu trúc hệ thống thông qua các công cụ mô hình hóa phần mềm:

  • Tác nhân hệ thống: Xác định 2 tác nhân chính gồm Khách hàng (người mua sắm) và Admin (quản trị viên/nhân viên).
  • Danh sách Use Case: Hệ thống bao gồm 13 Use Case chức năng: Đăng nhập, Đăng ký, Quản lý danh mục sản phẩm, Quản lý sản phẩm, Quản lý khách hàng, Quản lý đơn hàng, Quản lý admin, Quản lý giỏ hàng, Xem sản phẩm, Tìm kiếm sản phẩm, Đặt hàng, Thanh toán, Gửi phản hồi.
  • Sơ đồ luồng quy trình BPMN:
    • BPMN Đăng ký: Nhập thông tin, kiểm tra ràng buộc, hệ thống gửi mã OTP qua số điện thoại để xác thực.
    • BPMN Đăng nhập: Tùy chọn đăng nhập qua số điện thoại/mật khẩu hoặc liên kết tài khoản Facebook/Google; hỗ trợ quy trình khôi phục mật khẩu qua OTP.
    • BPMN Thêm giỏ hàng: Cho phép thêm từ Trang chủ, trang Tìm kiếm hoặc Danh mục sản phẩm; tự động cộng dồn số lượng nếu sản phẩm đã có trong giỏ hoặc khởi tạo mục mới.
    • BPMN Đặt hàng: Cho phép tùy chỉnh giỏ hàng, xác nhận địa chỉ giao hàng, lựa chọn phương thức thanh toán và sinh mã đơn hàng sau khi hoàn tất.
    • BPMN Quản lý đơn hàng: Phân loại trạng thái (đang xử lý, đang vận chuyển, đã giao, đã hủy) và cho phép người dùng hủy đơn kèm lý do khi đơn đang trong trạng thái xử lý.
    • BPMN Quản lý tài khoản: Quản lý thông tin hội viên (membership), cập nhật hồ sơ cá nhân và quản lý đăng xuất.
  • DFD ngữ cảnh: Định hình sự tương tác dữ liệu giữa hệ thống với 5 nguồn lưu trữ chính: Đơn hàng, Khách hàng, Hóa đơn, Sản phẩm và Admin.

Chương 4: Phân tích thiết kế cơ sở dữ liệu

Cơ sở dữ liệu của FreshLife được thiết kế dưới dạng 8 bộ sưu tập (Collections) trong MongoDB:

Tên Collection Các trường dữ liệu chính Kiểu dữ liệu Diễn giải chức năng
aboutus title, content, thumb String Lưu trữ thông tin giới thiệu doanh nghiệp
blogs blog_id, img, title, content_short ObjectId, String Quản lý các bài viết tin tức, kiến thức thực phẩm
products products_id, type, name, image_1, image_2, image_3, is_new, is_best, description, price, sale_price, quantity, corner_img ObjectID, String, Int Lưu trữ chi tiết thông tin, hình ảnh, phân loại và giá bán của sản phẩm
category Cat_id, Cat_name, Product_id, CreatedAt, UpdatedAt ObjectId, String, Date Phân loại danh mục hàng hóa và theo dõi lịch sử cập nhật
users user_id, username, phone, email, password, birthday, gender, address, createdAt, updatedAt ObjectId, String, Date Quản lý hồ sơ người dùng, thông tin liên hệ và mật khẩu mã hóa
orders Ord_id, user_id, product_id, quantity, status, CreatedAt ObjectId, String, Date Quản lý thông tin đơn hàng, số lượng và trạng thái vận hành
Product (mở rộng) Product_id, Cat_name, Product_name, Price, Quantity, Rate, Description, CreatedAt, UpdatedAt ObjectId, String, Array, Number, Date Cấu trúc dữ liệu chi tiết hỗ trợ đánh giá sao (rate) và nhiều mức giá
admin Admin_id, fullname, password, email, phonenumber, address, createdAt, updatedAt ObjectId, String, Date Quản trị tài khoản, quyền hạn của nhân viên và quản trị viên

Chương 5: Thiết kế giao diện

Chương này mô tả thiết kế wireframe và giao diện người dùng thực tế cho hai phân hệ:

  • Website người dùng: Gồm màn hình Đăng ký, Đăng nhập, Trang chủ, Giới thiệu, Danh sách sản phẩm, Trang chi tiết sản phẩm, Danh sách bài viết, Bài viết chi tiết, Trang chính sách bán hàng, Trang liên hệ, Trang quản lý tài khoản cá nhân và Lịch sử đơn hàng của tôi.
  • Website quản trị viên: Gồm các module bảng điều khiển phục vụ Quản lý danh mục sản phẩm, Quản lý sản phẩm hàng hóa và Quản lý tài khoản người dùng/nhân viên.

Chương 6: Đánh giá kết quả và hướng phát triển

Đánh giá mức độ hoàn thành hệ thống dựa trên yêu cầu ban đầu và đề xuất các phương hướng phát triển, hoàn thiện nền tảng trong tương lai.

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

  • Kết quả khảo sát thực tế: Cung cấp bộ dữ liệu chi tiết về thị hiếu tiêu dùng thực phẩm sạch trực tuyến, làm rõ yêu cầu về giao diện tối giản (87,5%), màu sắc tươi sáng (72,0%), nhu cầu đa dạng hóa thanh toán (83,3%) và tính minh bạch nguồn gốc (66,7%).
  • Đóng góp về mặt thiết kế kỹ thuật: Xây dựng hoàn chỉnh hồ sơ phân tích hệ thống thương mại điện tử với 13 chức năng Use Case, 6 sơ đồ quy trình nghiệp vụ BPMN và sơ đồ DFD ngữ cảnh phản ánh luồng dữ liệu thực tế.
  • Hiện thực hóa kiến trúc dữ liệu NoSQL: Thiết kế thành công lược đồ dữ liệu 8 collections trên MongoDB, tối ưu hóa cho mô hình bán lẻ thực phẩm với các cấu trúc linh hoạt về giá, hình ảnh và bài viết.
  • Giải pháp giao diện trực quan: Hoàn thiện nguyên mẫu giao diện hai phân hệ Client và Admin trên nền tảng ReactJS kết hợp Bootstrap, giải quyết các bất cập phổ biến về điều hướng và hiển thị responsive trên thiết bị di động.

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

  • Hạn chế: Phạm vi nghiên cứu chủ yếu tập trung vào giai đoạn khảo sát, mô hình hóa phân tích thiết kế hệ thống và cấu trúc dữ liệu; quy mô khảo sát ban đầu tập trung vào nhóm khách hàng trẻ tuổi (23–32 tuổi) tại khu vực đô thị.
  • Hướng nghiên cứu tiếp:
    • Tích hợp sâu các cổng thanh toán điện tử trực tuyến và liên kết các đơn vị vận chuyển theo thời gian thực.
    • Phát triển thêm ứng dụng di động (Mobile App) dựa trên nền tảng React Native để đồng bộ hóa với hệ thống web hiện có.
    • Mở rộng các tính năng tương tác cộng đồng, hệ thống tích điểm thành viên tự động và thuật toán gợi ý sản phẩm thông minh.

Giá trị tham khảo

Đồ án là tài liệu tham khảo hữu ích cho sinh viên các ngành Hệ thống thông tin quản lý, Thương mại điện tử, Công nghệ thông tin và Quản trị kinh doanh khi thực hiện các đồ án môn học hoặc khóa luận tốt nghiệp về phát triển website bán hàng.

Các nội dung có giá trị ứng dụng cao gồm:

  1. Phương pháp khảo sát và bộ câu hỏi đánh giá hành vi khách hàng mua sắm thực phẩm trực tuyến.
  2. Cách xây dựng sơ đồ quy trình nghiệp vụ chuẩn BPMN (đăng ký, thanh toán, quản lý đơn hàng).
  3. Bản thiết kế cấu trúc dữ liệu NoSQL mẫu cho website bán lẻ trên hệ quản trị MongoDB.

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

1. Khảo sát trong đồ án ghi nhận bao nhiêu phần trăm người dùng gặp vấn đề với giao diện khó điều hướng khi mua hàng trực tuyến?
Khảo sát chỉ ra rằng có tới 70,4% người dùng phản ánh giao diện website mua thực phẩm trực tuyến không thân thiện và khó điều hướng, 51,9% gặp tình trạng thiếu tính năng cần thiết và 44,4% gặp lỗi không tương thích thiết bị.

2. Nhóm tuổi nào chiếm tỷ lệ tham gia khảo sát cao nhất và được chọn làm đối tượng trọng tâm của dự án?
Nhóm tuổi từ 23 đến 32 tuổi chiếm đa số trong khảo sát và được xác định là đối tượng khách hàng trọng tâm do đây là nhóm am hiểu công nghệ, có thói quen mua sắm trực tuyến và quan tâm lớn đến thực phẩm sạch.

3. Hệ thống FreshLife sử dụng công nghệ nào để thực hiện xác thực và phân quyền người dùng?
Hệ thống sử dụng cơ chế Token-based authentication thông qua JSON Web Token (JWT), bao gồm 3 thành phần: Header, Payload và Signature để xác thực các yêu cầu gửi từ Client lên Server.

4. Cơ sở dữ liệu MongoDB của hệ thống FreshLife được tổ chức thành những collection nào?
Cơ sở dữ liệu gồm 8 collection/bảng chính: aboutus (giới thiệu), blogs (bài viết), products (sản phẩm), category (danh mục), users (người dùng), orders (đơn hàng), Product (bảng thuộc tính sản phẩm mở rộng) và admin (quản trị viên).

5. Trong quy trình BPMN đặt hàng, hệ thống xử lý những bước nào?
Khách hàng kiểm tra và chỉnh sửa giỏ hàng, xác nhận thông tin nhận hàng, lựa chọn phương thức thanh toán; sau khi thanh toán thành công, hệ thống sẽ hiển thị mã đơn hàng và tự động cập nhật trạng thái đơn hàng.

Kết luận

Đồ án "Xây dựng website bán thực phẩm" của nhóm sinh viên Trường Đại học Kinh tế - Luật đã hoàn thành việc nghiên cứu thị trường và thiết kế toàn diện hệ thống thương mại điện tử FreshLife. Bằng việc kết hợp ngăn xếp công nghệ Full-stack JavaScript (ReactJS, NodeJS, ExpressJS, MongoDB, JWT), đề tài đã giải quyết tốt các yêu cầu về nghiệp vụ bán hàng, quản lý đơn hàng và trải nghiệm người dùng tối giản. Đây là tài liệu tham khảo thực tiễn và chuẩn mực cho các dự án phát triển phần mềm ứng dụng trong lĩnh vực thương mại điện tử.