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

Ngành công nghiệp cà phê tại Việt Nam đang phát triển mạnh với số lượng cửa hàng tăng nhanh trên cả nước. Trong bối cảnh đó, việc chỉ kinh doanh tại quầy không còn đủ để cạnh tranh, trong khi xu hướng đặt hàng qua ứng dụng di động đang ngày càng phổ biến. Nhóm tác giả lấy cảm hứng từ ứng dụng của nhãn hàng The Coffee House (TCH) — một thương hiệu cà phê nổi tiếng mà nhóm là khách hàng lâu năm — để xây dựng một hệ thống mua bán trực tuyến hoàn chỉnh có thể được tái sử dụng cho bất kỳ nhãn hàng cà phê nào khác.

Nhiệm vụ của đồ án được xác định gồm ba nhiệm vụ chính:

  1. Tìm hiểu hệ thống mua bán cà phê và xây dựng ứng dụng thu hút khách hàng cho cửa hàng cà phê thông qua nền tảng mua bán đặt hàng trực tuyến.
  2. Phân tích yêu cầu và thiết kế ứng dụng mobile cho người dùng đặt hàng; ứng dụng mobile cho cửa hàng theo dõi và thực hiện các đơn đặt hàng; ứng dụng mobile cho nhân viên giao hàng; và website cho admin quản lý thông tin cửa hàng và thống kê.
  3. Xây dựng hệ thống mua bán với chức năng tối thiểu là có thể thực hiện đặt hàng.

Đối tượng nghiên cứu bao gồm hệ thống đặt hàng online của các nhãn hàng cà phê, các công nghệ xây dựng server và giao diện (Flutter, NestJS, NuxtJS), cơ sở dữ liệu NoSQL MongoDB với ODM Mongoose, giao tiếp dữ liệu realtime bằng SocketIO, và các dịch vụ bên thứ ba (Twilio, Momo Business, Amazon S3, Google Map Platform).

Phạm vi thực hiện: Dự án được thực hiện trong 18 tuần, từ ngày 21/08/2023 đến 24/12/2023, bởi hai sinh viên ngành Công nghệ Phần mềm — Khóa 2019–2023, Trường Đại học Sư phạm Kỹ thuật TP.HCM.

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

Khung công nghệ và kiến trúc hệ thống

Hệ thống được xây dựng theo kiến trúc ba thành phần chính: Front-end, Back-end và Database, trong đó các ứng dụng giao tiếp với server qua RESTful API, và server kết nối với cơ sở dữ liệu MongoDB thông qua ODM Mongoose.

Công nghệ front-end:

  • Flutter (ngôn ngữ Dart): framework đa nền tảng của Google, dùng để xây dựng ba ứng dụng mobile (thành viên, cửa hàng, giao hàng). Flutter áp dụng mô hình quản lý state BLoC (Business Logic Component), được xây dựng trên RxDart, gồm ba lớp: Data Layer, Business Logic (Bloc), và Presentation Layer (UI).
  • NuxtJS (dựa trên Vue.js): framework hỗ trợ Server-Side Rendering (SSR), routing tự động và quản lý trạng thái bằng Vuex, được dùng để xây dựng giao diện web quản trị.

Công nghệ back-end:

  • NestJS: framework server-side cho Node.js, kiến trúc theo mô hình module của Angular, hỗ trợ TypeScript và Dependency Injection. Pipeline xử lý request trong NestJS đi qua các thành phần: Middleware → Guard → Interceptor → Pipe → Controller → Service (kiến trúc 3 lớp). Hệ thống gồm ba server độc lập: server thành viên, server bán hàng, server quản trị.
  • SocketIO (thư viện Websocket): tích hợp vào server bán hàng để hỗ trợ trao đổi dữ liệu realtime (thông báo đơn mới, cập nhật trạng thái đơn hàng) giữa ứng dụng cửa hàng, ứng dụng tài xế và server thành viên.

Cơ sở dữ liệu:

  • MongoDB: hệ quản trị cơ sở dữ liệu NoSQL theo hướng document-oriented, lưu trữ dữ liệu dạng JSON/BSON. Toàn bộ dữ liệu hệ thống được lưu trong một MongoDB instance, truy cập qua Mongoose.

Dịch vụ bên thứ ba được tích hợp:

Dịch vụ Chức năng tích hợp
Twilio Gửi mã OTP xác thực qua SMS
Momo Business Thanh toán online qua ví điện tử Momo
Amazon S3 Lưu trữ file và ảnh trên cloud
Google Map Platform Tìm kiếm địa chỉ, định vị, chỉ đường
Ngrok Tạo tunnel kết nối giữa máy cá nhân và internet để hỗ trợ kiểm thử

Phương pháp nghiên cứu: Đọc tài liệu chính thức của từng công nghệ; nghiên cứu ứng dụng của các nhãn hàng nổi tiếng (cụ thể là The Coffee House); áp dụng phương pháp Project-based learning.

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

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

Chương này trình bày nền tảng công nghệ toàn bộ hệ thống sử dụng. Nhóm mô tả đặc điểm kỹ thuật của từng công nghệ chính (Flutter, NuxtJS, NestJS, MongoDB), cách thức tổ chức và hoạt động của lớp front-end theo mô hình BLoC, và pipeline xử lý request/response của lớp back-end theo kiến trúc NestJS ba lớp (Controller – Service – Repository). Kiến trúc tổng thể hệ thống được trình bày qua sơ đồ, thể hiện sự phân tách rõ ràng giữa ba server (thành viên, bán hàng, quản trị), ba ứng dụng mobile và một ứng dụng web, cùng các kết nối Websocket bổ sung cho tính năng realtime.

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

Chương trình bày mô tả các thành phần dữ liệu chính của hệ thống, đặc tả Use Case cho bốn module, và sequence diagram cho ba luồng đặt hàng.

Các thành phần dữ liệu chính (Table 1) bao gồm:

Thành phần Mô tả tóm tắt
Sản phẩm (product) Có phân loại và tùy chọn (size, topping, cách pha…)
Cửa hàng (store) Có thể tùy chỉnh menu riêng bằng cách vô hiệu hóa từ menu chính
Đơn hàng (order) Ba loại: delivery, pickup, in-store; hỗ trợ ưu đãi thành viên
Thành viên (member) Tích điểm theo số tiền đơn hàng, có mã barcode riêng
Cấp bậc (rank) Tính theo tổng điểm tích lũy, cấp cao hơn nhận nhiều ưu đãi hơn
Ưu đãi (voucher) Có điều kiện áp dụng, xác nhận qua QR code khi mua tại quầy
Chương trình ưu đãi (promotion) Đổi điểm lấy ưu đãi từ cửa hàng hoặc đối tác
Tài khoản cửa hàng / tài xế Được admin tạo và cấp; tài xế có ví tài xế nhận tiền giao hàng

Bốn module Use Case được đặc tả chi tiết:

  • Module thành viên: đăng ký/đăng nhập bằng OTP qua SMS, xem sản phẩm và cửa hàng, thêm giỏ hàng, đặt hàng (giao hoặc đến lấy), thanh toán bằng Momo, xem lịch sử đơn, đổi điểm lấy ưu đãi, nhận thông báo.
  • Module cửa hàng: đăng nhập bằng tài khoản/mật khẩu, tạo đơn tại quầy, tích điểm thành viên qua barcode, nhận và cập nhật trạng thái đơn online qua realtime.
  • Module giao hàng: nhận và chọn đơn để giao, xem chỉ đường qua Google Map, cập nhật trạng thái, xác nhận giao hàng bằng ảnh chụp, quản lý ví tài xế và yêu cầu rút tiền.
  • Module quản trị: quản lý toàn bộ dữ liệu hệ thống (sản phẩm, cửa hàng, nhân viên, thành viên, ưu đãi, tài khoản), xem thống kê doanh thu, doanh số, số đơn hàng, số thành viên.

Sequence diagram được xây dựng cho ba luồng nghiệp vụ chính: đặt hàng giao về thanh toán tiền mặt, đặt hàng giao về thanh toán bằng Momo, đặt hàng đến cửa hàng lấy, và mua tại cửa hàng.

Chương 3: Xây dựng ứng dụng

Chương trình bày thiết kế cơ sở dữ liệu, thiết kế giao diện từng ứng dụng và hướng dẫn cài đặt hệ thống.

Thiết kế cơ sở dữ liệu: Sử dụng MongoDB, toàn bộ collection được định nghĩa qua Mongoose model. Fulltext trình bày danh sách tất cả collection, dữ liệu mẫu của collection products, và code mẫu định nghĩa model cho collection products.

Thiết kế giao diện bao gồm bốn ứng dụng:

  • Member app: danh sách sản phẩm, thêm giỏ hàng, định vị cửa hàng, màn hình thành viên và ưu đãi, giỏ hàng, chọn/ghim địa chỉ, thanh toán Momo, theo dõi và lịch sử đơn hàng.
  • Sale app (ứng dụng cửa hàng): đăng nhập cửa hàng, thêm sản phẩm vào giỏ, nhận đơn online realtime, tìm kiếm thành viên.
  • Shipper app (ứng dụng giao hàng): chọn và ghim vị trí, xem đơn chờ và chi tiết đơn, chỉ đường trong app và qua Google Maps, chụp ảnh xác nhận giao hàng, thông tin cá nhân, lịch sử rút tiền.
  • Admin app (web quản trị): trang chủ thống kê, danh sách sản phẩm/phân loại/tùy chọn, danh sách cửa hàng/nhân viên/thành viên/cấp bậc, danh sách đơn hàng, quản lý ưu đãi/chương trình/đối tác, quản lý tài khoản và phân quyền.

Hướng dẫn cài đặt bao gồm: cài đặt và chạy ba server back-end (server quản trị, server bán hàng, server đặt hàng); cài đặt và chạy web admin (NuxtJS); cài đặt và chạy các ứng dụng Flutter (kiểm tra cấu hình nền tảng, cài package, chọn thiết bị và chạy app).

Thiết kế và triển khai

Kiến trúc tổng thể

Hệ thống gồm 3 server NestJS phân tách theo chức năng và 4 ứng dụng giao diện với cấu trúc kết nối như sau:

  • Server thành viên ↔ Ứng dụng mobile thành viên (Member app)
  • Server bán hàng ↔ Ứng dụng mobile cửa hàng (Sale app) và Ứng dụng mobile tài xế (Shipper app)
  • Server quản trị ↔ Ứng dụng web quản trị (Admin web — NuxtJS)

Server bán hàng tích hợp thêm WebSocket server (SocketIO) để phát và nhận tin realtime tới Sale app, Shipper app, và server thành viên khi có đơn hàng mới.

Công nghệ sử dụng

Lớp Công nghệ
Mobile UI Flutter (Dart), BLoC pattern, RxDart
Web Admin UI NuxtJS (Vue.js), Vuex, Axios
Back-end NestJS (TypeScript), RESTful API, SocketIO
Database MongoDB (NoSQL), Mongoose ODM
Storage Amazon S3
Auth Twilio (OTP qua SMS)
Payment Momo Business API
Mapping Google Map Platform SDK
Dev tunneling Ngrok (tunnel cho kiểm thử Momo và SocketIO)

Kiểm thử

Việc kiểm thử được thực hiện theo luồng nghiệp vụ thực tế: kiểm tra luồng đặt hàng qua hai ứng dụng đặt hàng và cửa hàng (tuần 13–14); kiểm tra luồng đặt hàng online với Momo tích hợp qua Ngrok (tuần 15–16); kiểm tra kết nối Socket giữa các ứng dụng; fix bug và kiểm tra lại toàn bộ hệ thống (tuần 17–18). Ngrok được dùng để tạo domain tĩnh, host server bán hàng và cho phép kiểm thử tính năng thanh toán Momo mà không cần triển khai lên server thật.

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

Kết quả đạt được

Hệ thống được xây dựng hoàn chỉnh với bốn sản phẩm phần mềm:

  1. Member app — Ứng dụng mobile dành cho người dùng/thành viên (iOS/Android)
  2. Sale app — Ứng dụng mobile/desktop dành cho nhân viên cửa hàng
  3. Shipper app — Ứng dụng mobile dành cho tài xế giao hàng
  4. Admin web — Ứng dụng web dành cho quản trị viên

Các chức năng cốt lõi đã triển khai đầy đủ: đặt hàng giao tận nhà và đến lấy tại cửa hàng, thanh toán online qua Momo, thanh toán tiền mặt tại quầy, thông báo và cập nhật trạng thái đơn hàng theo thời gian thực qua SocketIO, hệ thống điểm thành viên và cấp bậc, quản lý ưu đãi và chương trình đổi điểm, ví tài xế và chức năng rút tiền, xác nhận giao hàng bằng ảnh chụp, thống kê doanh thu và doanh số trên web admin.

Giải pháp và đóng góp

Nhóm tác giả đề xuất và hiện thực hóa một hệ thống mua bán cà phê đa nền tảng hoàn chỉnh, không phụ thuộc vào bất kỳ nhãn hàng cụ thể nào, có thể được tái sử dụng cho các thương hiệu cà phê khác. Hệ thống tích hợp đồng thời ba hình thức đặt hàng (delivery, pickup, in-store) và hai phương thức thanh toán (Momo, tiền mặt) trong cùng một nền tảng. Việc sử dụng SocketIO giúp đồng bộ hóa trạng thái đơn hàng theo thời gian thực giữa nhiều ứng dụng mà không cần người dùng tự làm mới.

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

Nhược điểm được tác giả nêu

Fulltext đề cập đến mục "Ưu nhược điểm của đề tài" trong phần Kết luận (Phần 3), trong đó nhóm tác giả thừa nhận những hạn chế phát sinh do thời gian thực hiện có hạn (18 tuần) và kiến thức còn giới hạn. Các nhược điểm được liệt kê tại mục này nhưng nội dung chi tiết không được trích dẫn đầy đủ trong phần fulltext cung cấp.

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

Phần "Hướng phát triển trong tương lai" được đề cập trong mục lục (trang 79) và trong đặc tả use case có gợi ý một số tính năng chưa triển khai, bao gồm:

  • Tính năng hết hạn điểm thành viên (được ghi chú là "hướng phát triển sau này" trong use case Lịch sử điểm).
  • Mở rộng hệ thống để hỗ trợ thêm phương thức xác thực hoặc thanh toán khác ngoài Momo và Twilio.
  • Tối ưu hóa hiệu suất khi số lượng cửa hàng và đơn hàng tăng lớn, do MongoDB được triển khai trên một instance duy nhất trong phiên bản hiện tại.
  • Triển khai lên môi trường cloud thực tế thay vì dùng Ngrok cho việc kiểm thử.

Giá trị tham khảo

Đồ án này phù hợp làm tài liệu tham khảo cho:

  • Sinh viên ngành Công nghệ Phần mềm và Công nghệ Thông tin đang tìm hiểu cách xây dựng hệ thống đa nền tảng từ đầu, đặc biệt là kiến trúc tách biệt nhiều server theo từng nhóm người dùng.
  • Sinh viên muốn học Flutter và mô hình BLoC: phần thiết kế front-end và mô tả luồng hoạt động BLoC được trình bày khá rõ ràng.
  • Sinh viên làm đề tài về NestJS: phần mô tả kiến trúc ba lớp và pipeline xử lý request/response trong NestJS cung cấp nền tảng tốt.
  • Nhóm làm đề tài tích hợp dịch vụ thanh toán và bản đồ: cách tích hợp Momo Business API, Google Map Platform và Ngrok cho môi trường phát triển được mô tả theo từng giai đoạn trong kế hoạch thực hiện.
  • Sinh viên thực hiện đề tài về hệ thống loyalty/membership: thiết kế thành phần thành viên, cấp bậc, tích điểm và đổi ưu đãi có thể được tái sử dụng hoặc mở rộng.

Các phần đáng tham khảo nhất: mô tả kiến trúc hệ thống tổng thể (Chương 1), bảng thành phần dữ liệu chính và đặc tả Use Case (Chương 2), kế hoạch thực hiện theo tuần cho thấy cách phân chia công việc thực tế trong dự án nhóm 18 tuần.

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

1. Hệ thống gồm bao nhiêu ứng dụng và server, và chúng kết nối với nhau như thế nào? Hệ thống gồm 3 ứng dụng mobile (thành viên, cửa hàng, tài xế), 1 ứng dụng web (quản trị), và 3 server NestJS riêng biệt. Member app kết nối với server thành viên; Sale app và Shipper app kết nối với server bán hàng; Admin web kết nối với server quản trị. Server bán hàng tích hợp thêm WebSocket server (SocketIO) để đẩy dữ liệu realtime tới Sale app, Shipper app, và server thành viên khi có đơn hàng mới.

2. Người dùng đăng ký và đăng nhập vào Member app theo cơ chế nào? Cả đăng ký và đăng nhập đều sử dụng mã OTP 6 chữ số gửi qua SMS đến số điện thoại đăng ký, thông qua dịch vụ Twilio. Tài khoản được duy trì 10 phút để xác nhận mã OTP. Không sử dụng mật khẩu truyền thống cho ứng dụng thành viên; riêng ứng dụng cửa hàng và giao hàng thì đăng nhập bằng tài khoản/mật khẩu do admin cấp.

3. Hệ thống tích điểm và phân cấp bậc thành viên hoạt động như thế nào? Thành viên được tích điểm dựa trên số tiền của đơn hàng. Khi mua tại quầy, nhân viên quét barcode mã thành viên để tích điểm. Tổng điểm tích lũy quyết định cấp bậc (rank); cấp bậc cao hơn cho phép nhận nhiều ưu đãi hơn. Điểm thành viên cũng có thể dùng để đổi ưu đãi thông qua các chương trình ưu đãi (promotion). Khi áp dụng ưu đãi tại quầy, nhân viên quét QR code của ưu đãi.

4. Tính năng realtime được triển khai như thế nào và cho những luồng nghiệp vụ nào? Hệ thống sử dụng SocketIO — thư viện Websocket truyền tin qua kết nối TCP — được tích hợp vào server bán hàng. Tính năng realtime được áp dụng cho: (1) nhân viên cửa hàng nhận đơn hàng online mới ngay lập tức; (2) trạng thái đơn hàng thay đổi được đồng bộ tức thì; (3) tài xế nhận thông báo khi có đơn hàng mới cần giao. Server thành viên cũng kết nối với WebSocket server để phát tin khi có đơn đặt hàng mới.

5. Quy trình thanh toán online qua Momo được tích hợp và kiểm thử như thế nào trong môi trường phát triển? Hệ thống tích hợp Momo Business API để tạo yêu cầu thanh toán và nhận thông báo trạng thái thanh toán. Do Momo yêu cầu server có địa chỉ công khai để nhận callback, nhóm sử dụng Ngrok để tạo một domain tĩnh (static domain) và tunnel kết nối từ máy cá nhân ra internet. Nhờ đó, quá trình kiểm thử thanh toán Momo có thể thực hiện mà không cần triển khai server lên cloud. Sequence diagram cho luồng đặt hàng thanh toán Momo được mô tả riêng (Hình 10 trong báo cáo).

Kết luận

Đồ án "Xây dựng hệ thống mua bán cho cửa hàng cafe" của nhóm sinh viên Nguyễn Quang Vinh và Phan Trung Tín (Khoa Công nghệ Thông tin, ĐH Sư phạm Kỹ thuật TP.HCM, 2023) là một dự án phần mềm quy mô vừa, xây dựng hệ thống thương mại điện tử đa nền tảng gồm bốn ứng dụng và ba server với kiến trúc rõ ràng. Hệ thống tích hợp đầy đủ các luồng nghiệp vụ thực tế của một chuỗi cà phê — từ đặt hàng, giao hàng, tích điểm thành viên đến quản trị và thống kê — với các dịch vụ bên thứ ba như Momo, Twilio, Amazon S3 và Google Map Platform. Đây là minh chứng cho khả năng áp dụng phương pháp Project-based learning trong đào tạo kỹ sư CNTT, đồng thời là tài liệu tham khảo thực tiễn cho các nhóm sinh viên muốn tìm hiểu cách xây dựng hệ thống full-stack đa nền tảng với Flutter, NestJS và NuxtJS.