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

Trong bối cảnh công nghệ thông tin và thương mại điện tử phát triển mạnh mẽ, việc mua sắm hàng hóa qua mạng Internet đã trở thành một nhu cầu thiết yếu trong đời sống hàng ngày. Đối với ngành hàng thực phẩm như rau, củ, quả, phương thức kinh doanh trực tuyến cho phép người tiêu dùng lựa chọn sản phẩm nhanh chóng từ xa thông qua các thiết bị có kết nối Internet mà không cần trực tiếp đến cửa hàng. Tuy nhiên, một rào cản thực tế thường phát sinh khi người mua gặp khó khăn trong việc mô tả tên gọi chính xác hoặc từ khóa của các loại thực phẩm đặc thù. Trong nhiều trường hợp, việc sử dụng hình ảnh trực quan giúp truyền tải thông tin sản phẩm nhanh hơn và chính xác hơn so với văn bản thuần túy.

Nhằm giải quyết bất cập trên và nâng cao trải nghiệm mua sắm, đề tài "Xây dựng website bán thực phẩm kết hợp tìm kiếm sản phẩm bằng hình ảnh" được thực hiện với 04 mục tiêu và nhiệm vụ nghiên cứu cụ thể:

  1. Xây dựng website thương mại điện tử phục vụ việc giới thiệu, quảng bá và kinh doanh các mặt hàng thực phẩm nông sản (rau, củ, quả), hỗ trợ thúc đẩy hiệu suất bán hàng của đơn vị kinh doanh.
  2. Tìm hiểu và tích hợp các phương thức thanh toán trực tuyến qua cổng trung gian, đồng thời thiết lập kênh liên hệ, trao đổi thông tin trực tiếp (hộp thoại chat) giữa khách hàng và bộ phận quản lý.
  3. Xây dựng phân hệ quản trị trực quan giúp người quản lý theo dõi, xử lý danh mục sản phẩm, người dùng, giao dịch đơn hàng và các biểu đồ thống kê doanh thu theo mốc thời gian.
  4. Nghiên cứu, xây dựng và tích hợp mô hình tìm kiếm sản phẩm thông minh dựa trên xử lý hình ảnh đầu vào nhằm hỗ trợ người dùng tra cứu sản phẩm thuận tiện.
  • Đối tượng nghiên cứu: Quy trình phân tích, thiết kế, cài đặt hệ thống website thương mại điện tử bán thực phẩm và ứng dụng mạng nơ-ron tích chập (CNN) trong việc nhận dạng, phân loại hình ảnh thực phẩm.
  • Phạm vi nghiên cứu: Hệ sinh thái ứng dụng web phục vụ mua bán thực phẩm nông sản, tập trung vào 03 nhóm tác nhân chính (Quản lý, Nhân viên giao hàng, Khách hàng) và tích hợp cổng thanh toán ZaloPay; thời gian hoàn thành đồ án được ghi nhận trong khoảng 03 tháng (tháng 12 năm 2023).

Cơ sở lý thuyết và công nghệ áp dụng

Đề tài áp dụng mô hình kiến trúc Client - Server phân tầng độc lập, kết hợp giữa các ngôn ngữ lập trình hiện đại và mô hình học sâu để xử lý tác vụ thương mại điện tử cùng tác vụ nhận diện hình ảnh.

  • Mô hình học sâu mạng nơ-ron tích chập (Convolutional Neural Network - CNN): Được sử dụng làm nền tảng cho chức năng tìm kiếm sản phẩm bằng hình ảnh. Quy trình phân loại của mô hình bao gồm:
    • Tiền xử lý dữ liệu: Chuẩn hóa giá trị điểm ảnh (pixel), chuyển đổi kích thước hình ảnh về chuẩn đầu vào cố định của mô hình.
    • Truyền xuôi (Feedforward): Sử dụng các lớp tích chập (Convolutional layers) để trích xuất đặc trưng không gian và cấu trúc cục bộ của ảnh.
    • Lớp gộp (Pooling layers): Giảm chiều dữ liệu không gian, giảm tải khối lượng tính toán và giữ lại các đặc trưng nổi bật.
    • Lớp kết nối đầy đủ (Fully Connected layers): Tổng hợp các đặc trưng đã trích xuất để chuẩn bị cho bước phân loại.
    • Hàm kích hoạt Softmax: Chuyển đổi các giá trị đầu ra (logits) thành phân phối xác suất tương ứng với từng nhóm lớp sản phẩm. Nhãn có xác suất cao nhất được chọn làm kết quả dự đoán.
  • Ngôn ngữ Java và Framework Spring: Sử dụng Spring Boot làm nền tảng phát triển ứng dụng máy chủ chính xử lý logic nghiệp vụ thương mại điện tử; Spring Security chịu trách nhiệm xác thực và phân quyền; Spring Data JPA hỗ trợ thao tác, ánh xạ và truy xuất cơ sở dữ liệu quan hệ; Spring REST cung cấp hệ thống giao diện lập trình ứng dụng RESTful API.
  • Ngôn ngữ JavaScript và Framework Vue.js: Xây dựng giao diện người dùng theo mô hình ứng dụng đơn trang (SPA - Single Page Application); sử dụng Vue Router để quản lý định tuyến động và Vuex để quản trị trạng thái tập trung (state management) trong toàn bộ ứng dụng.
  • Ngôn ngữ Python và Framework Flask: Xây dựng dịch vụ API chuyên trách xử lý mô hình CNN nhận diện hình ảnh. Các thư viện và extension đi kèm bao gồm Blueprint, Flask-SQLAlchemy, Flask-Login, Flask-RESTful và Flask-CORS để xử lý chia sẻ tài nguyên chéo nguồn.
  • Hệ quản trị cơ sở dữ liệu MySQL: Lưu trữ toàn bộ dữ liệu quan hệ của hệ thống về người dùng, danh mục, sản phẩm, đơn hàng và tin nhắn chat.
Thành phần hệ thống Công nghệ / Nền tảng Vai trò chức năng chính
Giao diện (Frontend) JavaScript, Vue.js, Vue Router, Vuex Xây dựng giao diện tương tác động dạng SPA cho Khách hàng, Quản lý và Nhân viên.
Máy chủ nghiệp vụ (Backend 1) Java, Spring Boot, Spring Security, Spring JPA, Spring REST Xử lý logic nghiệp vụ bán hàng, xác thực tài khoản, phân quyền và quản lý dữ liệu giao dịch.
Máy chủ xử lý ảnh (Backend 2) Python, Flask Framework, RESTful API Tiếp nhận ảnh tải lên từ máy khách, gọi mô hình CNN để dự đoán nhãn sản phẩm tương ứng.
Mô hình học sâu (AI Model) Mạng nơ-ron tích chập (CNN), Hàm Softmax Trích xuất đặc trưng hình ảnh nông sản và phân loại sản phẩm.
Cơ sở dữ liệu (Database) MySQL Lưu trữ tập trung các bảng thực thể nghiệp vụ của toàn bộ hệ thống.
Cổng thanh toán (Payment) ZaloPay Gateway Cung cấp phương thức thanh toán trực tuyến qua mã phản hồi nhanh (QR Code).

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

Hệ thống được thiết kế dựa trên sự phân tách quyền hạn chặt chẽ theo từng tác nhân tham gia, đảm bảo tính khép kín của luồng xử lý đơn lẻ từ khi tìm kiếm sản phẩm đến khi giao hàng thành công.

Phân quyền và ma trận chức năng người dùng

Hệ thống xác định 04 nhóm tác nhân với các quyền hạn nghiệp vụ được phân định cụ thể:

Nhóm tác nhân Chức năng tổng quan và quyền hạn trên hệ thống
Người dùng chung (Chưa đăng nhập) Truy cập trang chủ, xem danh mục, đăng ký tài khoản mới, đăng nhập, yêu cầu cấp lại mật khẩu qua email xác nhận.
Khách hàng (Đã đăng nhập) Tìm kiếm sản phẩm qua tên/ảnh tải lên; xem chi tiết sản phẩm; thêm/sửa/xóa sản phẩm trong giỏ hàng; đặt hàng; thanh toán trực tuyến qua ZaloPay QR; gửi đánh giá (chấm điểm và nhận xét); gửi tin nhắn qua hộp thoại chat trực tiếp.
Quản lý (Admin) Thêm/sửa/xóa danh mục; thêm/sửa/xóa sản phẩm (tên, giá, hình ảnh); quản lý thông tin tài khoản người dùng; quản lý toàn bộ đơn hàng và phân công nhân viên giao hàng; xem biểu đồ doanh thu theo tháng/năm; xuất báo cáo thống kê định dạng PDF/Excel; chat phản hồi khách hàng.
Nhân viên (Shipper/Staff) Xem danh sách các đơn hàng được quản lý giao; tra cứu đơn hàng theo trạng thái (chưa giao/đã giao); xem chi tiết địa chỉ và nội dung đơn; cập nhật trạng thái đơn hàng sang hoàn thành sau khi giao hàng thành công.

Các quy trình xử lý luồng công việc chính

  • Quy trình tìm kiếm sản phẩm bằng hình ảnh:
    1. Khách hàng truy cập giao diện sản phẩm, bấm chọn biểu tượng tải ảnh và tải lên tệp tin hình ảnh từ thiết bị cá nhân.
    2. Giao diện Vue.js gửi yêu cầu HTTP POST chứa tệp tin ảnh sang dịch vụ máy chủ Python (Flask).
    3. Máy chủ Flask thực hiện tiền xử lý (chuẩn hóa kích thước, giá trị pixel) và đưa dữ liệu qua mạng CNN.
    4. Các tầng tích chập và gộp trích xuất đặc trưng, lớp kết nối đầy đủ kết hợp hàm Softmax tính toán xác suất để đưa ra nhãn sản phẩm tương đồng nhất.
    5. Kết quả nhãn sản phẩm được trả về cho máy chủ chính hoặc hiển thị trực tiếp trên giao diện để tải danh sách các sản phẩm liên quan. Nếu không nhận diện được, hệ thống hiển thị thông báo không tìm thấy sản phẩm.
  • Quy trình thanh toán trực tuyến qua ZaloPay: Khách hàng tiến hành đặt hàng tại trang giỏ hàng, chọn hình thức "Thanh toán online". Hệ thống chuyển hướng tới giao diện thanh toán chứa mã QR ZaloPay. Khách hàng sử dụng ứng dụng ZaloPay trên điện thoại quét mã QR để xác nhận giao dịch. Sau khi nhận được tín hiệu phản hồi xác nhận, hệ thống tự động cập nhật trạng thái đơn hàng sang "Đã thanh toán" và gửi thông báo thành công.
  • Quy trình phân công và cập nhật trạng thái giao hàng: Quản lý duyệt danh sách đơn hàng đã đặt, chọn đơn và chỉ định nhân viên giao hàng cụ thể. Nhân viên đăng nhập vào hệ thống, lọc các đơn ở trạng thái "Chưa giao", tiến hành vận chuyển và chuyển trạng thái đơn hàng sang "Đã giao" trên trang chi tiết đơn hàng của nhân viên.

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

Chương 1: Giới thiệu đề tài và các công nghệ sử dụng

Chương 1 trình bày tổng quan về tính cấp thiết của đề tài trong bối cảnh thương mại điện tử hiện nay, nêu rõ mục tiêu xây dựng một nền tảng bán lẻ thực phẩm kết hợp tìm kiếm thông minh bằng hình ảnh. Tác giả tiến hành khảo sát và trình bày chi tiết các nền tảng công nghệ được lựa chọn cho đồ án:

  • Cơ sở dữ liệu MySQL: Trình bày khái niệm, mô hình hoạt động client-server, đánh giá ưu điểm về mã nguồn mở, tốc độ xử lý cao, tính linh hoạt và nhược điểm về hiệu suất khi quy mô dữ liệu mở rộng.
  • Ngôn ngữ Java và Spring Framework: Phân tích nguyên lý máy ảo Java (JVM), cơ chế biên dịch mã nguồn thành bytecode độc lập nền tảng; giới thiệu cấu trúc Spring Framework xây dựng trên nguyên tắc Dependency Injection (DI), Aspect Oriented Programming (AOP) và các module chuyên biệt (Spring Boot, Spring Security, Spring JPA, Spring REST).
  • Ngôn ngữ JavaScript và Vue.js Framework: Nêu đặc trưng đa nền tảng của JavaScript; phân tích kiến trúc dựa trên component, định tuyến bằng Vue Router, quản lý trạng thái tập trung với Vuex nhằm xây dựng ứng dụng web dạng SPA mượt mà.
  • Ngôn ngữ Python và Flask Framework: Trình bày tính chất thông dịch của Python; giới thiệu tính gọn nhẹ của micro-framework Flask cùng các extension cấu thành dịch vụ RESTful API.
  • Mạng nơ-ron tích chập (CNN): Khái quát nguyên lý xử lý dữ liệu không gian của CNN trong thị giác máy tính; mô tả chi tiết quy trình huấn luyện (chuẩn bị dữ liệu, xây dựng kiến trúc, khởi tạo tham số, lan truyền ngược, đánh giá mô hình qua accuracy, confusion matrix, precision, recall, F1-score) và luồng phân loại hình ảnh (tiền xử lý, feedforward, pooling, fully connected, softmax).

Chương 2: Phân tích và thiết kế hệ thống bán thực phẩm kết hợp tìm kiếm bằng hình ảnh

Chương 2 tập trung vào việc mô hình hóa yêu cầu và thiết kế cấu trúc hệ thống:

  • Khảo sát yêu cầu và xác định phạm vi: Liệt kê đầy đủ các danh mục chức năng theo từng đối tượng sử dụng (Người dùng, Khách hàng, Quản lý, Nhân viên).
  • Xây dựng biểu đồ Use Case: Thiết lập biểu đồ Use Case tổng quan (Hình 1) thể hiện tương tác giữa 04 tác nhân và toàn bộ chức năng hệ thống; chi tiết hóa biểu đồ Use Case cho từng nhóm tác nhân riêng biệt (đăng ký, đăng nhập, đăng xuất, lấy lại mật khẩu, tìm kiếm ảnh/tên, giỏ hàng, đặt hàng, thanh toán ZaloPay, chat, đánh giá, quản lý danh mục, quản lý sản phẩm, quản lý đơn hàng, quản lý người dùng, quản lý doanh thu, giao hàng).
  • Đặc tả kịch bản Use Case: Xây dựng kịch bản chi tiết cho 16 Use Case chính, bao gồm điều kiện tiên quyết, hậu điều kiện, chuỗi sự kiện chính từng bước và các nhánh ngoại lệ xử lý lỗi (lỗi nhập liệu, số lượng vượt tồn kho, sai mật khẩu, không tìm thấy ảnh).
  • Thiết kế cơ sở dữ liệu và lớp thực thể: Xây dựng biểu đồ lớp thực thể và lược đồ cơ sở dữ liệu quan hệ mô tả mối liên kết giữa các bảng người dùng, đơn hàng, chi tiết đơn hàng, sản phẩm, danh mục, đánh giá và tin nhắn.

Chương 3: Cài đặt website bán thực phẩm kết hợp tìm kiếm bằng hình ảnh

Chương 3 trình bày toàn bộ kết quả triển khai giao diện thực tế và chức năng của hệ thống dựa trên thiết kế:

  • Môi trường cài đặt và công cụ: Cấu hình máy chủ dịch vụ, môi trường thực thi và cơ sở dữ liệu.
  • Kết quả cài đặt giao diện Khách hàng: Triển khai hoàn chỉnh giao diện trang chủ, đăng ký, đăng nhập, trang hiển thị danh mục sản phẩm, trang chi tiết sản phẩm, giỏ hàng, trang đặt hàng, cổng thanh toán ZaloPay với thông báo thành công, pop-up tải ảnh tìm kiếm và danh sách kết quả hiển thị theo ảnh nhận dạng, hộp thoại chat thời gian thực, lịch sử và chi tiết đơn hàng, biểu mẫu gửi đánh giá chấm điểm sản phẩm.
  • Kết quả cài đặt giao diện Quản lý: Triển khai trang chủ quản trị tích hợp các biểu đồ trực quan (biểu đồ doanh thu hàng tháng theo chỉ tiêu, biểu đồ tỉ lệ mua hàng), trang quản lý danh mục, trang thêm/sửa/xóa sản phẩm, bảng quản lý người dùng, trang quản lý đơn hàng có tính năng chỉ định nhân viên giao hàng và xuất dữ liệu thống kê.
  • Kết quả cài đặt giao diện Nhân viên: Triển khai trang danh sách đơn hàng được bàn giao, giao diện lọc đơn hàng chưa giao và trang cập nhật trạng thái đơn hàng sang hoàn thành.

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

  • Kết quả thực nghiệm chính:
    • Hoàn thành xây dựng trọn vẹn một hệ thống website thương mại điện tử đa phân hệ theo kiến trúc phân tán Client - Server, kết nối thành công Frontend Vue.js với 02 hệ thống Backend riêng biệt (Spring Boot cho nghiệp vụ thương mại điện tử và Flask cho xử lý trí tuệ nhân tạo).
    • Tích hợp thành công mô hình mạng nơ-ron tích chập (CNN) vào dịch vụ tìm kiếm, cho phép người dùng tải ảnh từ máy tính để hệ thống tự động trích xuất đặc trưng, phân loại qua hàm Softmax và trả về sản phẩm tương ứng trên giao diện.
    • Triển khai đầy đủ 16 kịch bản Use Case nghiệp vụ từ đăng ký/đăng nhập, quản lý giỏ hàng, đặt hàng, liên hệ chat trực tiếp, đánh giá sản phẩm, đến tích hợp thanh toán trực tuyến qua mã QR của ZaloPay.
    • Cung cấp giao diện quản trị với các biểu đồ trực quan theo dõi chỉ tiêu doanh thu, tỷ lệ mua hàng, cùng phân hệ riêng cho nhân viên giao hàng để cập nhật trạng thái đơn hàng.
  • Đóng góp của đồ án:
    • Cung cấp một giải pháp công nghệ ứng dụng xử lý hình ảnh vào thực tế kinh doanh bán lẻ nông sản, khắc phục hạn chế của phương pháp tìm kiếm truyền thống bằng văn bản.
    • Đóng góp một kiến trúc tham chiếu mẫu về việc kết hợp nhiều nền tảng công nghệ (Java Spring Boot, Python Flask, Vue.js, MySQL) trong một đồ án ứng dụng công nghệ thông tin.

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

  • Hạn chế:
    • Thời gian thực hiện đồ án có giới hạn (khoảng 03 tháng), do đó việc thu thập và huấn luyện tập dữ liệu hình ảnh cho mô hình CNN mới chỉ tập trung vào một số nhóm mặt hàng rau, củ, quả nhất định, chưa bao phủ toàn bộ các phân loại nông sản phức tạp trên thị trường.
    • Cơ sở dữ liệu MySQL có thể gặp giới hạn về mặt hiệu năng truy xuất và tốc độ xử lý khi số lượng bản ghi và lưu lượng hình ảnh tăng lên quy mô lớn.
  • Hướng phát triển tiếp theo:
    • Mở rộng quy mô tập dữ liệu huấn luyện cho mô hình CNN, nâng cao độ chính xác nhận diện với các góc chụp và điều kiện ánh sáng đa dạng hơn.
    • Tối ưu hóa hiệu năng hệ thống máy chủ và cơ sở dữ liệu để đáp ứng lưu lượng truy cập lớn hơn trong môi trường triển khai thực tế.

Giá trị tham khảo

Tài liệu đồ án này mang lại giá trị tham khảo thiết thực cho:

  • Sinh viên ngành Công nghệ thông tin và Hệ thống thông tin: Làm tài liệu tham khảo hoàn chỉnh về cấu trúc đồ án tốt nghiệp, từ khảo sát yêu cầu, vẽ biểu đồ Use Case, viết kịch bản nghiệp vụ chi tiết đến thiết kế cơ sở dữ liệu.
  • Lập trình viên và người nghiên cứu phát triển web: Cung cấp mô hình mẫu về việc tích hợp dịch vụ AI (Python/Flask) vào hệ thống thương mại điện tử viết bằng Java Spring Boot và giao diện Vue.js.
  • Phần nội dung đáng tham khảo nhất: Chương 2 với hệ thống 16 bảng đặc tả kịch bản Use Case chi tiết có phân tách chuỗi sự kiện chính và luồng ngoại lệ rõ ràng; Chương 1 về phần tổng quan quy trình trích xuất đặc trưng và phân loại ảnh của mô hình CNN.

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

1. Hệ thống sử dụng mô hình học máy nào để thực hiện chức năng tìm kiếm sản phẩm bằng hình ảnh?
Hệ thống sử dụng mô hình Mạng nơ-ron tích chập (Convolutional Neural Network - CNN), kết hợp các lớp tích chập (Convolutional layers), lớp gộp (Pooling layers), lớp kết nối đầy đủ (Fully Connected layers) và hàm kích hoạt Softmax để phân loại hình ảnh thực phẩm tải lên.

2. Cấu trúc công nghệ của đồ án được phân chia như thế nào giữa các thành phần?
Hệ thống phân chia thành 03 tầng công nghệ: Giao diện người dùng sử dụng JavaScript và Framework Vue.js (kết hợp Vuex, Vue Router); Máy chủ nghiệp vụ chính sử dụng Java Spring Boot kết nối CSDL MySQL; Dịch vụ xử lý ảnh trí tuệ nhân tạo sử dụng Python và Flask Framework kết nối với mô hình CNN.

3. Phân hệ nhân viên giao hàng trong hệ thống có những quyền hạn và chức năng gì?
Nhân viên giao hàng có quyền đăng nhập vào hệ thống, xem danh sách các đơn hàng được quản lý phân công, thực hiện tra cứu lọc các đơn hàng có trạng thái "Chưa giao", xem chi tiết thông tin địa chỉ giao nhận và cập nhật trạng thái đơn hàng sang "Đã giao" sau khi hoàn tất.

4. Phương thức thanh toán trực tuyến nào được tích hợp vào website và cơ chế hoạt động ra sao?
Hệ thống tích hợp cổng thanh toán trực tuyến ZaloPay. Khi khách hàng xác nhận đặt hàng với phương thức thanh toán online, hệ thống sẽ tạo giao diện chứa mã QR ZaloPay để khách hàng quét mã thanh toán qua ứng dụng di động và tự động cập nhật trạng thái đơn hàng khi giao dịch hoàn tất.

5. Cơ chế phục hồi mật khẩu khi người dùng quên tài khoản được thiết kế như thế nào?
Người dùng chọn chức năng "Quên mật khẩu", nhập địa chỉ email đã đăng ký để hệ thống gửi liên kết xác nhận (Reset password link). Người dùng truy cập đường dẫn từ email để đến trang đặt lại mật khẩu mới, nhập mật khẩu mới và xác nhận cập nhật vào cơ sở dữ liệu.

Kết luận

Đồ án tốt nghiệp "Xây dựng website bán thực phẩm kết hợp tìm kiếm sản phẩm bằng hình ảnh" của sinh viên Nguyễn Hoài Linh đã giải quyết trọn vẹn bài toán ứng dụng công nghệ thông tin vào thương mại điện tử thực phẩm nông sản. Đề tài kết hợp thành công kiến trúc đa dịch vụ gồm Spring Boot, Vue.js, MySQL và tích hợp mô hình học sâu CNN trên nền tảng Flask để hỗ trợ tìm kiếm sản phẩm bằng hình ảnh trực quan. Báo cáo đồ án được cấu trúc mạch lạc qua 03 chương với các biểu đồ phân tích nghiệp vụ, kịch bản ca sử dụng chi tiết và giao diện triển khai thực tế hoàn chỉnh.