PBL6: DỰ ÁN CHUYÊN NGÀNH CÔNG NGHỆ PHẦN MỀM Nguyễn Trọng Hoàng - Thiết kế giao diện app mobile user và shipper - Triển khai giao diện app mobile Trong thời đại số hóa ngày nay, việc sử d
GIỚI THIỆU
Mục đích
Trong thời đại số hóa, công nghệ thông tin đã trở thành yếu tố quan trọng trong quản lý và kinh doanh Hệ thống giao thức ăn nhanh trực tuyến giúp người dùng dễ dàng đặt món từ các nhà hàng trong khu vực qua website và ứng dụng di động Đối với người bán, hệ thống này mở ra cơ hội tiếp cận lượng khách hàng lớn mà không cần tốn nhiều chi phí quảng cáo Họ có thể quản lý menu, đơn hàng và giao hàng hiệu quả nhờ giao diện quản lý dễ sử dụng Người mua cũng được lợi khi có thể tìm kiếm, so sánh và đặt món từ các quán ăn yêu thích ngay tại nhà, đồng thời có thể đánh giá và bình luận về chất lượng dịch vụ, cung cấp thông tin hữu ích cho cộng đồng người dùng.
Phạm vi
Hệ thống quản lý giao thức ăn nhanh trực tuyến trên nền tảng web và ứng dụng Android cho phép người dùng đăng ký và đặt món ăn từ các nhà hàng, quán ăn miễn phí Mục tiêu của hệ thống là chia sẻ món ăn từ các nhà cung cấp đến người tiêu dùng Hệ thống phục vụ cho 5 đối tượng người dùng chính, mang lại tiện ích và trải nghiệm tốt nhất cho khách hàng trong việc đặt món ăn.
Website cho phép chủ cửa hàng đăng ký, đăng món ăn và quản lý món ăn của mình, đồng thời theo dõi đơn đặt hàng từ người dùng Người dùng có thể tìm thấy thông tin chính xác và hữu ích, tạo ra một môi trường thuận lợi cho việc đặt món ăn Người giao hàng sử dụng ứng dụng di động để nhận và giao hàng Quản trị viên quản lý toàn bộ hệ thống và đảm bảo hoạt động ổn định.
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Tác nhân
Sơ đồ dưới đây minh họa các tác nhân trong hệ thống quản lý giao thức ăn nhanh, bao gồm Quản lý, Chủ cửa hàng, Người dùng và Người giao hàng Mỗi tác nhân thực hiện các thao tác khác nhau khi truy cập hệ thống, dựa trên quyền hạn của mình.
Khách là những người sử dụng hệ thống để tìm kiếm các cửa hàng và món ăn:
• Tìm kiếm cửa hàng và món ăn
Quản trị viên có nhiệm vụ kiểm soát và quản lý tài khoản, quyền truy cập, và hoạt động trên hệ thống:
• Quản lý và kiểm soát quyền truy cập của người dùng, chủ cửa hàng và người giao hàng
• Theo dõi và bảo đảm hoạt động suôn sẻ của hệ thống
• Hỗ trợ và duy trì hệ thống sau khi triển khai
Chủ cửa hàng là những người quản lý hoặc sở hữu cửa hàng kinh doanh trong lĩnh vực ẩm thực hoặc giao thức ăn nhanh:
• Thêm, sửa đổi và xoá thông tin cửa hàng, thực đơn và giá cả
• Xử lý và quản lý các đơn đặt hàng từ người dùng
• Xem đánh giá và phản hồi từ người dùng
Người dùng là những người sử dụng hệ thống để tìm kiếm các cửa hàng và món ăn, đặt hàng, và thực hiện thanh toán:
• Tìm kiếm cửa hàng và món ăn dựa trên vị trí, danh mục, giá cả và đánh giá
• Đặt hàng và chọn phương thức thanh toán
• Theo dõi trạng thái đơn hàng
Người giao hàng tham gia vào quá trình vận chuyển và giao hàng từ cửa hàng đến người tiêu dùng:
• Nhận và quản lý đơn đặt hàng để thực hiện giao hàng
• Cung cấp dịch vụ giao hàng
Biểu đồ ca sử dụng của hệ thống
Sơ đồ sau đây cung cấp một cái nhìn tổng quan về các nhóm chức năng, tác nhân tham gia vào hệ thống giao thức ăn nhanh:
2.2.1 Biểu đồ ca sử dụng của Khách
Hình 1 :Biểu đồ ca sử dụng của Khách
2.2.2 Biểu đồ ca sử dụng của Người giao hàng
Hình 2: Biểu đồ ca sử dụng của Người giao hàng
2.2.3 Biểu đồ ca sử dụng cửa Chủ cửa hàng
Hình 3: Biểu đồ ca sử dụng của Quản trị viên
2.2.4 Biểu đồ ca sử dụng Quản trị viên
Hình 4: Biểu đồ ca sử dụng của Quản trị viên
2.2.5 Biểu đồ ca sử dụng Người dùng
Lược đồ cơ sở dữ liệu
- Nhóm sử dụng MongoDB làm cơ sở dữ liệu để lưu trữ các thông tin cần thiết nhằm phục vụ các tác vụ truy xuất, tìm kiếm dữ liệu.
- Hình bên dưới là thiết kế cơ sở dữ liệu của nhóm.
Hình 6: Lược đồ cơ sở dữ liệu
Biểu đồ hoạt động
Hình 7: Biểu đồ hoạt động chức năng đặt hàng
Hình 8: Biểu đồ hoạt động chức năng giao hàng
Biểu đồ tuần tự
Hình 9: Biểu đồ tuần tự đăng nhập
Hình 10: Biểu đồ tuần tự đăng kí
Kiến trúc hệ thống
2.6.1 Xây dựng Front End bằng - React
React.js, hay còn gọi là React, là một thư viện JavaScript mã nguồn mở do Facebook phát triển, chuyên dùng để xây dựng giao diện người dùng (UI) và các ứng dụng Single Page (SPA) Thư viện này mở rộng JavaScript tiêu chuẩn, cung cấp một bộ công cụ mạnh mẽ cho việc phát triển giao diện người dùng của các ứng dụng web responsive React hoạt động dựa trên mô hình component-based, cho phép mỗi phần của giao diện được xây dựng dưới dạng các component riêng biệt, dễ dàng tái sử dụng và kết hợp với nhau.
• Hiệu suất cao: React sử dụng Virtual DOM, giúp cải thiện hiệu suất khi cập nhật và render lại giao diện
React cho phép tạo ra các component riêng biệt và có thể tái sử dụng, giúp giảm thiểu lượng mã code và tăng tốc độ phát triển ứng dụng.
• Hỗ trợ mạnh mẽ: Được phát triển và hỗ trợ bởi Facebook, React có một cộng đồng lớn và nhiều tài liệu hỗ trợ
• Unidirectional data flow: Dữ liệu trong React chỉ đi theo một hướng từ parent component đến child component, giúp dễ dàng quản lý và kiểm soát dữ liệu
• Độ dốc học tập: React có nhiều khái niệm mới và phức tạp, có thể khó khăn cho người mới học
React chỉ là một thư viện UI, chủ yếu tập trung vào việc xây dựng giao diện người dùng Do đó, bạn cần tìm hiểu và kết hợp với các thư viện khác để phát triển các chức năng khác cho ứng dụng của mình.
• Thay đổi nhanh: React cập nhật thường xuyên, có thể gây khó khăn cho việc theo kịp và cập nhật code
2.6.2 Xây dựng Back End với - NodeJS
Node.js là môi trường chạy mã JavaScript phía máy chủ, được xây dựng trên nền tảng V8 JavaScript Engine của Google, cho phép phát triển ứng dụng hiệu suất cao bằng JavaScript - ngôn ngữ phổ biến trong cộng đồng lập trình web.
• Hiệu suất cao: Node.js sử dụng JavaScript Engine V8 của Google, cho phép thực thi mã JavaScript nhanh chóng
• Non-blocking I/O: Node.js sử dụng mô hình non blocking I/O, giúp tăng - hiệu suất khi xử lý các yêu cầu đồng thời
Node.js đi kèm với npm, một công cụ quản lý gói mạnh mẽ, giúp người dùng cài đặt và quản lý thư viện cũng như module một cách dễ dàng và hiệu quả.
Node.js sử dụng JavaScript, cho phép các nhà phát triển sử dụng cùng một ngôn ngữ cho cả phía máy chủ và phía người dùng, tạo thuận lợi trong quá trình phát triển Tuy nhiên, việc sử dụng JavaScript cũng có những nhược điểm cần xem xét.
Callback Hell trong Node.js xảy ra khi sử dụng callback để xử lý các tác vụ không đồng bộ, dẫn đến tình trạng lồng nhau phức tạp nếu có quá nhiều tác vụ.
Node.js không thích hợp cho các ứng dụng đòi hỏi xử lý CPU nặng, vì điều này có thể làm giảm hiệu suất tổng thể của ứng dụng.
Node.js thiếu một mô hình chuẩn hoặc quy ước rõ ràng cho việc phát triển ứng dụng, điều này có thể dẫn đến những khó khăn trong việc bảo trì và mở rộng ứng dụng.
2.6.3 Xây dựng app Mobile với Flutter
Flutter là framework mã nguồn mở do Google phát triển, cho phép xây dựng ứng dụng di động cho cả iOS và Android từ một mã nguồn duy nhất Sử dụng ngôn ngữ Dart, Flutter cung cấp hệ thống widget phong phú, giúp tạo ra giao diện người dùng đẹp mắt và linh hoạt.
Flutter cho phép tái sử dụng mã nguồn, giúp phát triển ứng dụng cho cả iOS và Android một cách hiệu quả, tiết kiệm thời gian và công sức cho lập trình viên.
• Hiệu suất cao: Flutter sử dụng Dart, một ngôn ngữ biên dịch trực tiếp thành mã máy, giúp tăng hiệu suất của ứng dụng
• Hệ thống widget phong phú: Flutter cung cấp một hệ thống widget phong phú, giúp xây dựng giao diện người dùng mạnh mẽ và đẹp mắt
Flutter hỗ trợ tính năng Hot Reload, cho phép người dùng xem ngay lập tức các thay đổi trong mã nguồn mà không cần khởi động lại ứng dụng, giúp tăng tốc quá trình phát triển.
Cộng đồng hỗ trợ của Flutter hiện tại vẫn còn nhỏ hơn so với các framework như React Native, điều này có thể dẫn đến khó khăn trong việc tìm kiếm giải pháp cho những vấn đề phát sinh trong quá trình phát triển.
Các ứng dụng được phát triển bằng Flutter thường có kích thước lớn, điều này có thể gây trở ngại cho người dùng trong quá trình tải và cài đặt ứng dụng.
Mặc dù Flutter cung cấp khả năng phát triển đa nền tảng, nhưng vẫn còn thiếu hỗ trợ cho một số tính năng native của iOS và Android, điều này có thể ảnh hưởng đến trải nghiệm người dùng.
2.6.4 Deploy với Vercel a) CI/CD với Vercel
QUẢN LÝ DỰ ÁN
Mô hình SCRUM
Hệ thống quản lý giao thức ăn nhanh trực tuyến trên nền tảng web và Android áp dụng mô hình Scrum cho quản lý dự án Hệ thống này cho phép người dùng đăng ký và đặt món ăn miễn phí từ các nhà hàng, quán ăn do các nhà cung cấp đăng tải, nhằm mục đích chia sẻ món ăn.
Hệ thống phục vụ cho 4 đối tượng người dùng chính: Quản trị viên, Chủ cửa hàng, Người dùng và Người giao hàng
Scrum cho phép dự án linh hoạt thay đổi ở mọi giai đoạn, giúp hiểu rõ nhu cầu của khách hàng và liên tục cải tiến để hoàn thiện hệ thống.
Ba nguyên lý nòng cốt của Scrum đó chính là:
• Transparency (sự minh bạch): các artifact (tạo phẩm hoặc tài liệu) phải
• Inspection (sự thanh tra): bạn cần phải kiểm tra thường xuyên, đều đặn các artifact và tiến độ công việc
• Adaptation (sự thích nghi): nếu xảy ra vấn đề nghiêm trọng thì phải điều chỉnh quy trình hoặc các artifact
Tất cả giá trị của Scrum được thể hiện qua ba artifact, là những sản phẩm phục vụ cho mô hình Scrum Những artifact này giúp tối đa hóa tính minh bạch và tạo cơ hội cho việc kiểm tra và điều chỉnh quy trình làm việc.
Product Backlog là danh sách có thứ tự và liên tục được cập nhật về các yêu cầu cần thiết để cải tiến sản phẩm Danh sách này không chỉ bao gồm những tính năng và nhiệm vụ cần thực hiện mà còn thể hiện các mục tiêu sản phẩm dài hạn mà đội ngũ Scrum cần đạt được.
Sprint Backlog là tập hợp các mục tiêu của vòng sprint, các hạng mục từ product backlog dành cho vòng sprint, và phương pháp tạo ra gói tăng trưởng Nói cách khác, nó bao gồm những hạng mục cần thiết, cùng với lý do và cách thức để đạt được các mục tiêu đó.
Increment (gói tăng trưởng) là tổng hợp các hạng mục trong product backlog đã hoàn thành cho đến vòng sprint hiện tại Cuối mỗi vòng sprint, các increment mới và đã hoàn thành sẽ được bổ sung vào bộ tổng hợp này.
Quản lý công việc bằng Trello
Trello là một công cụ quản lý dự án và công việc dựa trên phương pháp Kanban
Nó cho phép người dùng tạo và quản lý các bảng công việc (boards), trong đó mỗi bảng chứa nhiều danh sách (lists)
Mỗi danh sách trong ứng dụng quản lý công việc chứa nhiều thẻ (cards) đại diện cho các nhiệm vụ cụ thể Người dùng có thể tạo thẻ cho từng công việc, gán người thực hiện, đặt hạn chót, và thêm ghi chú cùng tệp đính kèm Thẻ có thể được di chuyển giữa các danh sách để theo dõi tiến trình công việc, từ “Cần làm” đến “Đang làm” và cuối cùng là “Đã hoàn thành”.
Trello là một công cụ quản lý dự án hiệu quả, cung cấp cái nhìn tổng quan giúp người dùng theo dõi tiến độ và phân công công việc dễ dàng Đặc biệt hữu ích trong môi trường làm việc nhóm và phát triển phần mềm, Trello hỗ trợ tối ưu hóa quy trình làm việc và nâng cao hiệu quả cộng tác.
Hình 15: Quản lí công việc bằng Trello (1)
Quản lý source code bằng GitHub
Nhóm quản lý source code sử dụng GitHub và áp dụng Git Flow để thiết lập các nhánh (branches) và quy trình hợp nhất (merge) một cách tối ưu Git Flow cung cấp một quy trình làm việc rõ ràng, giúp tổ chức và quản lý các thay đổi trong mã nguồn hiệu quả hơn.
Branch chính trong Git, được gọi là Main, là nơi lưu trữ mã nguồn khởi tạo của ứng dụng cùng với các phiên bản đã sẵn sàng để phát hành cho người dùng.
• Feature: Được base trên branches Main Mỗi khi phát triển một feature mới chúng ta cần tạo một branches để viết mã nguồn cho từng feature.
• Fix: Được base trên nhánh master để sửa nhanh những lỗi trên feature hoặc sửa những cấu hình đặc biệt chỉ có trên môi trường productions
Hình 17:Các nhánh trên github
GIAO DIỆN WEB VÀ CÁC CHỨC NĂNG
Các chức năng của khách
Hình 18: Giao diện Đăng nhập
Description Cho phép khách đăng nhập vào hệ thống
Access Khách chọn đăng nhập ở màn hình trang chủ
Email Text field – String (50) Trường dành cho khách nhập email
Mật khẩu Password - String(100) Trường dành cho khách nhập mật khẩu
Logo Image Hủy đăng nhập và quay về trang chủ Đăng nhập Button Đăng nhập vào hệ thống Đăng nhập với Google
Button Đăng nhập thông qua tài khoản google Screen Actions
Khi khách hàng nhấn nút đăng nhập, hệ thống sẽ xác minh tính hợp lệ của dữ liệu Nếu dữ liệu không hợp lệ, một thông báo sẽ được hiển thị để thông báo cho người dùng.
Nếu dữ liệu không hợp lệ, hệ thống sẽ thông báo lỗi Ngược lại, nếu dữ liệu hợp lệ, hệ thống sẽ kiểm tra xem tài khoản và mật khẩu có tồn tại hay không Nếu thông tin đúng, người dùng sẽ được phép đăng nhập; nếu không, hệ thống sẽ hiển thị thông báo "Tài khoản hoặc mật khẩu không đúng".
Vào trang chủ của hệ thống dành cho người dùng
“Dữ liệu không hợp lệ” Hiện thông báo: “Tài khoản hoặc mật khẩu không đúng”
Hủy Đóng màn hình đăng nhập và quay trở về trang chủ
Trở về màn hình trang chủ
Khi người dùng quên mật khẩu và cần tìm cách khôi phục tài khoản
Chuyển sang trang web dùng để khôi phục tài khoản Đăng ký Khi người dùng chưa có tài khoản đăng nhập và muốn đăng kí
Bảng : Giao diện Đăng nhập 4 4.1.2 Đăng ký
Hình 19 :Giao diện Đăng ký
Description Cho phép khách đăng ký tài khoản người dùng
Screen AccessKhách chọn đăng kí ở màn hình trang chủ
Email Text field String (50) – Trường dành cho khách nhập email
Mật khẩu Password - String(50) Trường dành cho khách nhập mật khẩu
Password - String(100) Trường dành cho khách nhập lại mật khẩu
Logo Image Hủy đăng nhập và quay về trang chủ
Họ Text field String (50) – Trường giành cho khách nhập Họ
Tên Text field String (50) – Trường giành cho khách nhập Tên
Số điện thoại Text field String (50) – Trường giành cho khách hàng nhập
Số điện thoại và địa chỉ cụ thể là các trường thông tin quan trọng mà khách hàng cần nhập vào Trường "Địa chỉ cụ thể" được định dạng là một chuỗi văn bản với độ dài tối đa 50 ký tự Sau khi điền đầy đủ thông tin, khách hàng có thể nhấn nút "Đăng ký" để hoàn tất quá trình đăng ký vào hệ thống.
Khi người dùng nhấn nút đăng ký, hệ thống sẽ tiến hành kiểm tra tính hợp lệ của dữ liệu Nếu dữ liệu không hợp lệ, thông báo “Dữ liệu không hợp lệ” sẽ được hiển thị Ngược lại, nếu dữ liệu hợp lệ, quá trình đăng ký sẽ tiếp tục.
Vào trang xác thực người dùng
“Dữ liệu không hợp lệ”
Hủy Đóng màn hình đăng nhập và quay trở về trang chủ
Trở về màn hình trang chủ Đăng ký Khi người dùng chưa có tài khoản đăng nhập và muốn đăng kí
Bảng : Giao diện Đăng ký 5 4.1.3 Xác thực người dùng
Hình 20 :Giao diện xác thực người dùng Screen Xác thực người dùng
Description Người dùng nhập mã xác thực sau khi đăng ký
Access Sau khi điền biểu mẫu Đăng ký và bấm nút Đăng ký
Trường dành cho khách hàng nhập mã xác thực sau khi đăng ký
Tiếp theo Button Gửi mã xác thực
Gửi mã xác nhận Điền mã xác nhận được gửi đến Email sau đó bấm vào nút
Tiếp tục để gửi mã xác nhận Đăng ký thành công và trở về Trang chủ ứng với quyền người dùng
Hiển thị thông báo “Mã xác thực không hợp lệ hoặc đã hết hạn” và yêu cầu nhập lại
4.1.4 Tìm kiếm thông tin sản phẩm
Hình 21 :Giao diện tìm kiếm thông tin Sản phẩm
Screen Tìm kiếm thông tin Sản phẩm
Description Tìm kiếm thông tin Sản phẩm
Tên sản phẩm Text field –
String (50) Trường nhập thông tin sản phẩm muốn tìm
Tìm kiếm Button Nút tìm kiếm sản phẩm
Khu vực Chọn quận/huyện muốn tìm kiếm sản phẩm Địa điểm Chọn tỉnh/thành phố muốn tìm kiếm sản phẩm
Danh mục Chọn danh mục muốn tìm kiếm sản phẩm Screen Actions
Action Name Description Success Failure
Tìm kiếm Khi khách kích nút tìm kiếm, hệ thống sẽ tìm kiếm theo yêu cầu của các trường có dữ liệu
Hiện danh sách các sản phẩm được tìm kiếm
Bảng 7: Tìm kiếm thông tin Sản phẩm
4.1.5 Xem thông tin cửa hàng
Hình 22 :Giao diện xem thông tin cửa hàng (1)
Hình 23: Giao diện xem thông tin cửa hàng( 2) Screen Xem thông tin cửa hàng
Description Xem thông tin chi tiết của cửa hàng bất kỳ
Screen AccessChọn cửa hàng bất kỳ ở trang chủ
Text Area Thông tin cơ bản của cửa hàng
Tìm món Text Nhập tên món ăn muốn tìm kiếm Screen Actions
Action Name Description Success Failure Xem thông tin cửa hàng
Nhấn vào cửa hàng bất kỳ để xem thông tin
Chuyển sang trang thông tin chi tiết của cửa hàng
Các chức năng của người dùng
4.2.1 Cập nhật thông tin cá nhân
Hình 24 :Giao diện cập nhật thông tin cá nhân
Screen Cập nhật thông tin cá nhận
Description Cập nhật thông tin cá nhận
Screen AccessChọn mục thông tin tài khoản trên thanh header
Item Type Data Description Ảnh đại diện input file Trường nhập ảnh để cập nhật ảnh đại diện
Cập nhật Button Xác nhận cập nhật ảnh đại diện
Họ input String Chỉnh sửa họ
Tên input String Chỉnh sửa tên
Email input String Xem Email Địa chỉ Input String Chỉnh sửa địa chỉ
Số điện thoại Input String Chỉnh sửa số điện thoại
Lưu thay đổi button Cập nhật thông tin
Action Name Description Success Failure
Cập nhật Khi người dùng click vào hệ thống sẽ cập nhập lại thông tin người dùng theo thông tin đã nhập
Thông báo cập nhật thất bại
Thông báo cập nhật thất bại
Bảng :Cập nhật thông tin Người dùng 9 4.2.2 Đổi m t kh u ậ ẩ
Hình 25 : Giao diện thay đổi mật khẩu
Screen Cập nhật thông tin cá nhân
Description Cập nhật mật khẩu
Screen AccessChọn mục thông tin tài khoản trên thanh header
Mật khẩu cũ input String Nhập mật khẩu cũ
Xác nhận mật khẩu mới input String Xác nhận lại mật khẩu mới Đổi mật khẩu button Cập nhật mật khẩu
Action Name Description Success Failure Đổi mật khẩu Khi người dùng click vào hệ thống sẽ cập nhật lại mật khẩu
Thông báo cập nhật thành công
Thông báo cập nhật thất bại
Bảng :Đổi mật khẩu 10 4.2.3 Thông tin địa ch ỉ
Hình 26: Giao diện xem thông tin địa chỉ người dùng
Screen Cập nhật địa chỉ
Description Cập nhật địa chỉ
Screen AccessChọn mục quản lý đơn hàng trên thanh navbar trong trang thôn tin tài khoản
Item Type Data Description Địa chỉ Text String Thông tin địa chỉ
Số điện thoại Text String Số điện thoại
Cập nhật Button Mở form cập nhật địa chỉ
Xóa Button Xóa địa chỉ
Thêm Button Mở form cập nhật địa chỉ
Action Name Description Success Failure
Cập nhật Khi người dùng click vào sẽ mở form cập nhật địa chỉ
Mở form cập nhật địa chỉ Xóa Khi người dùng click vào sẽ xóa địa chỉ đó khỏi thông tin người dùng
Thông báo xóa thành công
Thông báo xóa thất bại
Thêm Khi người dùng click vào sẽ mở form cập nhật địa chỉ
Mở form cập nhật địa chỉ
Bảng :Xem thông tin địa chỉ 11
Hình 27: Giao diện cập nhật địa chỉ
Screen Form cập nhật địa chỉ
Description Form cập nhật địa chỉ
Screen AccessChọn nút cập nhật hoặc thêm tại trang thông tin địa chỉ Screen Content
Item Type Data Description Địa chỉ Text String Thông tin địa chỉ
Số điện thoại Text String Số điện thoại
OK Button Xác nhận thêm/cập nhật địa chỉ Đóng Button Đóng form
Action Name Description Success Failure
Xác nhận Khi người dùng click vào hệ thống sẽ cập nhập lại thông tin địa chỉ của người dùng theo thông tin đã nhập
Thông báo cập nhật thành công
Thông báo cập nhật thất bại
Bảng :Cập nhật địa chỉ 12 4.2.4 Thông tin đơn hàng
Hình 26 :Giao diện xem lịch sử đơn hàng
Screen Thông tin đơn hàng
Description Thông tin đơn hàng
Screen AccessChọn mục lịch sử đơn hàng trên thanh header hoặc chọn mục thông tin đơn hàng trong mục quản lí đơn hàng trong trang thông tin tài khoản
Trạng thái Select String Chọn trạng thái để tìm kiếm đơn hàng
Từ ngày Date String Chọn thời gian để tìm kiếm đơn hàng Đến ngày Date String Chọn thời gian để tìm kiếm đơn hàng
Thời gian hiển thị các mốc thời gian của đơn hàng, địa chỉ cung cấp thông tin về cửa hàng, tên người giao hàng được hiển thị rõ ràng, và tổng tiền của đơn hàng được thể hiện chính xác.
Trạng thái Text String Hiển thị thông tin trạng thái của đơn hàng
Chi tiết Button Hiển thị thông tin chi tiết của đơn hàng
Hủy Button Hủy đơn hàng Đánh giá Button Đánh giá cửa hàng
Action Name Description Success Failure
Về cửa hàng Khi người dùng click vào tên cửa hàng trong cột địa điểm trang sẽ chuyển về trang của cửa hàng tương ứng
Chuyển sang trang thông tin cửa hàng
Xem thông tin người giao
Khi người dùng click vào tên người giao hàng trong cột người giao sẽ mở modal thông tin người giao hàng tương ứng
Mở modal thông tin người giao hàng
Xem thông tin chi tiết đơn hàng
Khi người dùng click vào chi tiết đơn hàng trong cột chi tiết đơn hàng sẽ mở modal chi tiết đơn hàng
Mở modal thông tin chi tiết đơn hàng
Hủy đơn hàng Chỉ khi đơn hàng có trạng thái
‘đang chờ nhận hàng’ mới được phép hủy
Khi người dùng click vào nút hủy trong cột thao tác hệ thống sẽ hủy đươn hnagf đó trên hệ thống
Thông báo hủy đơn thành công
Thông báo hủy đơn thất bại Đánh giá cửa hàng
Chỉ khi đơn hàng có trạng thái Mở modal đánh
Khi người dùng click vào nút đánh giá trong cột thao tác sẽ mở modal đánh giá cửa hàng
Bảng :Xem thông tin đơn hàng 13 4.2.5 Xem thông tin người giao hàng
Hình 28 Giao diện xem thông tin nhân viên giao hàng
Screen Thông tin nhân viên giao hàng
Description Hiển thị thông tin chi tiết của nhân viên giao hàng cũng như các đánh giá của người dùng cho nhân viên đó
Screen AccessChọn vào tên người giao hàng ở cột người giao trong trang lịch sử đơn hàng
Text String Họ tên người giao hàng
Email Text String Email của người giao hàng Địa chỉ Text String Đại chỉ của người giao hàng
Số điện thoại của người giao hàng là một chuỗi văn bản quan trọng để liên lạc Biển số xe của người giao hàng cũng được ghi lại dưới dạng chuỗi văn bản để xác định phương tiện Loại xe mà người giao hàng sử dụng được mô tả bằng chuỗi văn bản Ngoài ra, có một nút đánh giá cho phép người dùng hiển thị modal để đánh giá nhân viên giao hàng.
Action Name Description Success Failure Đánh giá Khi người dùng click vào nút đánh giá, sẽ hiển thị form đánh giá nhân viên giao hàng
Hiển thị form đánh giá
Bảng :Xem thông tin người giao hàng 14
Hình 29 Xem nội dung đánh giá
Screen Đánh giá của người dùng
Description Hiển thị thông tin của người dùng cho đối tượng sau khi trải nghiệm dịch vụ
Screen AccessChọn vào xem chi tiết đối tượng
Sao đánh giá Image Hiển thị số sao trung bình đối tượng được đánh giá trên hệ thống
Filter Button Chọn để lọc đánh giá theo điều kiện
Hiển thị các thông tin: ảnh, tên người dùng, thời gian đánh giá, số sao đánh giá, nội dung đánh giá, hình ảnh đi kèm
Nút Xóa cho phép người dùng xóa đánh giá mà họ đã gửi cho một đối tượng cụ thể Tính năng này chỉ hiển thị khi người dùng đăng nhập bằng tài khoản đã sử dụng để gửi đánh giá.
Button Dùng để mở form cập nhật đánh giá bản thân đã đánh giá cho đối tượng
Chỉ hiển thị khi người dùng truy cập bằng tài khoản đã gửi đánh giá đó
Action Name Description Success Failure
Khi người dùng click vào filter tương ứng, hệ thống sẽ hiển thị những đánh giá khớp với filter
Khi người dùng nhấn vào biểu tượng xóa, hệ thống sẽ xóa đánh giá của họ và cho phép người dùng đánh giá lại đối tượng đó.
Thông báo xóa thành công
Thông báo xóa thất bại
Khi người dùng click vào nút đánh giá, sẽ hiển thị form đánh giá nhân viên giao hàng
Hiển thị form đánh giá
Bảng :Xem nội dung đánh giá 15
Hình 30 Giao diện xem chi tiết đơn hàng
Screen Chi tiết đơn hàng
Description Hiển thị chi tiết đơn hàng
Screen AccessChọn vào chi tiết đơn hàng ở cột chi tiết trong trang lịch sử đơn hàng
Tên cửa hàng Text String Hiển thị tên của cửa hàng đặt đơn
Món Text String Hiển thị tên của các món được đặt trong đơn Yêu cầu đặc biệt
Text String Hiển thị yêu cầu riêng của khách hàng cho riêng món đó
Số lượng Text String Số lượng của mỗi món
Giá Text String Giá của món đó trên 1 đơn vị
Tổng cộng hiển thị giá của món ăn bằng cách nhân giá với số lượng đánh giá Ngoài ra, tổng tiền hàng sẽ được hiển thị để người dùng biết tổng chi phí của tất cả các món đã chọn.
Text String Hiển thị phí vận chuyển
Text String Hiển thị tổng thanh toán cho đơn hàng Đóng Button Đóng modal
Action Name Description Success Failure Đánh giá Khi người dùng click vào nút đánh giá sẽ hiển thị form đánh giá tương ứng cho món ăn
Chỉ hiện thị form khi đươn hàng đã hoàn thành
Mở form đánh giá cho món ăn Đóng Khi người dùng click vào nút đóng, sẽ đóng modal chi tiết đơn hàng Đóng modal hiển thị đơn hàng
Bảng :Xem chi tiết đơn hàng 16
Hình 31 Giao diện đánh giá
Để đánh giá cửa hàng, món ăn hoặc người giao hàng, bạn hãy chọn nút đánh giá trên trang thông tin đơn hàng, chi tiết đơn hàng hoặc thông tin người giao hàng để mở form đánh giá tương ứng.
Item Type Data Description Ảnh Image file Ảnh của cửa hàng/món ăn/người giao hàng
Tên Text String Tên cửa hàng/ món ăn / người giao hàng
Sao image Hiển thị số sao trung bình được đánh giá trên hệ thống
Select String Đánh giá chi tiết
TextArea String Nhập chi tiết đánh giá dành cho đối tượng
Chọn ảnh để đánh giá
Input File Chọn ảnh muốn gửi kèm theo đánh giá
Gửi đánh giá Button Gửi thông tin đánh giá lên hệ thống Screen Actions
Action Name Description Success Failure
Khi người dùng nhấn nút gửi đánh giá, nội dung đánh giá mà họ đã nhập sẽ được gửi lên hệ thống Lưu ý rằng việc đánh giá theo sao là bắt buộc để hoàn tất quá trình gửi đánh giá.
Mỗi khách hàng chỉ đưuọc đánh giá cho 1 đối tượng 1 lần
Thông báo đánh giá thành công
Thông báo đánh giá thất bại
Hình 32 Giao diện giỏ hàng
Screen AccessChọn biểu tượng giỏ hàng trên thanh header hoặc thêm sản phẩm vào giỏ hàng để mở giỏ hàng
Tên cửa hàng Text String Tên cửa hàng có các món ăn được thêm vào giỏ hàng
Tăng Button Tăng số lượng của món ăn trong giỏ hàng
Giảm Button Giảm số lượng của món ăn trong giỏ hàng
Số lượng Text Int Hiển thị số lượng của món ăn trong giỏ hàng ăn
Tên món ăn Text String Hiển thị tên món ăn
Text String Hiển thị giá tổng của món ăn (giá x số lượng)
Xóa Button Xóa món khỏi giỏ hàng
The total amount displays the cumulative cost of all items in the shopping cart The order button navigates to the order page, showcasing the selected dishes in the cart.
Action Name Description Success Failure
Xóa Khi người dùng click vào nút xóa, món ăn tương ứng sẽ được xóa khổi giỏ hàng
Khi người dùng nhấn nút đặt đơn, hệ thống sẽ chuyển hướng đến trang đặt đơn, nơi hiển thị các món ăn đã được thêm vào giỏ hàng.
Nếu người dùng chưa đăng nhập hệ thống sẽ yêu cầu người dùng đăng nhập
Chuyển sang trang đặt đơn hoặc trang đăng nhập nếu người dùng chưa đăng nhập
Hình 33 Giao diện đặt hàng Screen Đặt hàng
Description Người dùng xem xét, điều chỉnh và xác nhậ đặt hàng
Screen AccessNhấn vào nút đặt hàng ở giỏ hàng
Item Type Data Description Địa chỉ nhận hàng
Text String Hiển thị thông tin của người nhận: Họ tên, só điện thoại, địa chỉ nhận
Thay đổi Button Mở form hay đổi địa chỉ nhận hàng
Text String Hiển thị tên quán ăn và thời gian giao hàng dự kiến Thông tin món ăn
Text String Hiển thị thông tin chi tiết của mỗi món ăn trong đơn hàng nhận từ giỏ hàng
Tổng tiền hàng Text String Hiển thị tổng tiền của các món ăn và số lượng món
Text String Hiển thị phương thức thanh toán
Text String Hiển thị khoảng cách từ quán đến địa điểm nhận đơn và phí vận chuyển
The total order amount is displayed as a text string, indicating the overall payment cost for the order A confirmation button allows users to proceed to the online payment page.
Action Name Description Success Failure
Khi người dùng nhấn vào nút thay đổi, hệ thống sẽ hiển thị các địa chỉ đã nhập trong thông tin cá nhân, cho phép người dùng chọn một địa chỉ hoặc thêm và cập nhật địa chỉ mới.
Hiển thị form chọn địa chỉ Đặt đơn Khi người dùng click vào nút đặt đơn, hệ thống sẽ chuyển sang trang thanh toán trực tuyến VNpay
Nếu người dùng chưa đăng nhập hệ thống sẽ yêu cầu người dùng đăng nhập
Chuyển sang trang đặt đơn hoặc trang đăng nhập nếu người dùng chưa đăng nhập
Các chức năng của chủ cửa hàng
Hình 34 :Giao diện thống kê Screen Thống kê
Screen AccessChọn nút thống kê ở bên trái màn hình
Biểu đồ doanh thu theo danh mục
Biểu đồ tròn Hiển thị doanh thu theo danh mục
Biểu đồ cột Hiển thị doanh thu
Biểu đồ số lượng đơn hàng
Biểu đồ tròn Hiển thị phần trăm theo đơn hàng
Table Hiển thị các sản phẩm bán chạy nhất Ngày/ tháng / quý
Select Chọn thống kê doanh thu theo ngày tháng quý
Thông kê đơn hàng/ thống kê doanh thu
Select Chọn thống kê doanh thu/ hoặc đơn hàng theo ngày tháng quý
Hình 35 :Giao diện thông tin cửa hàng
Screen Thông tin cửa hàng
Description Thông tin cửa hàng
Screen AccessChọn nút thống kê ở bên trái màn hình
Item Type Data Description Ảnh Input File Hiển thị ảnh đại diện của cửa hàng
Tên quán Text String Tên của cửa hàng Địa chỉ Text String Địa chỉ của cửa hàng
Số điện thoại Text Int Số điện thoại của của hàng
Mô tả TextArea String Hiển thị mô tả của cửa hàng Giờ mở cửa Datetime Datetime Hiển thị giờ mở cửa của cửa hàng
Giờ đóng cửa Datetime Datetime Hiển thị giờ đóng cửa của cửa hàng
Mật khẩu cũ Password Password Nhập mật khẩu của nếu đổi mật khẩu
Mật khẩu mới Password Password Chọn mật khẩu mới khi đổi mật khẩu
Password Password Xác nhận mật khẩu mới
Chọn Button Chọn ảnh đại diện mới cho của hàng
Lưu thay đổi Button Lưu những thay đổi về thông tin cửa hàng, hình ảnh hoặc mật khẩu
Action Name Description Success Failure
Khi người dùng nhấn vào nút chọn, họ có khả năng thay đổi ảnh đại diện của mình Việc thay đổi ảnh đại diện này giúp cá nhân hóa tài khoản, trong khi những ảnh không được thay đổi vẫn giữ nguyên.
Lưu thay đổi Khi người dùng nhấn lưu thay đổi, mọi thông tin sẽ được cập nhật mới theo thay đổi của chủ cửa hàng
Thay đổi thông tin hiển thị và thông báo thay đổi thành công
Hiển thị thông báo cập nhật không tình công và đưa ra lỗi ngoài màn hình
Bảng :Thông tin cửa hàng 21 4.3.3 Quản lý s n phả ẩm
Hình 36 :Giao diện quản lý sản phẩm Screen Danh sách sản phẩm
Description Danh sách sản phẩm
Screen Access Chọn nút danh sách sản phẩm ở bên trái màn hình
Item Type Data Description phẩm
Trạng thái của sản phẩm
Select Chọn trạng thái hiển thị của sản phẩm
Button Thêm sản phẩm mới
Chỉnh sửa Button Cập nhật sản phẩm
Xóa Button Xóa sản phẩm
Xem đánh giá Button Xem đánh giá của khác hàng
Action Name Description Success Failure Tìm kiếm sản phẩm
Người dùng nhập tên sản phẩm cần tìm vào ô
Hiển thị thông tin cần tìm kiếm ở bảng
Dữ liệu trong bảng không thay đổi
Thêm sản phẩm mới cho cửa hàng
Chuyển sang trang thêm sản phẩm
Không có gì thay đổi Chỉnh sửa Cập nhật thông tin cho sản phẩm
Chuyển sang trang cập nhật sản phẩm
Không có gì thay đổi
Xóa Xóa sản phẩm Hiển thị thông báo xác nhận sẽ xáo sản phẩm đã chọn
Không có gì thay đổi
Xem đánh giá Xem đánh giá của người dùng về sản phẩm
Chuyển sang trang xem đánh giá của sản phẩm
Không có gì thay đổi
Bảng :Quản lý sản phẩm 22
Hình 37 :Giao diện thêm sản phẩm Screen Thêm sản phẩm
Screen AccessChọn nút thêm sản phẩm trang danh sách sản phẩm ở
Tên sản phẩm Textfield String Nhập tên sản phẩm
Giá tiền Textfield Int Nhập giá tiền
Mô tả Textfield String Thêm mô tả cho sản phẩm
Danh mục Select Chọn danh mục cho sản phẩm
Hình ảnh Input File Thêm ảnh cho sản phẩm
Trang thái RadioButton Chọn trạng thái
Lưu Button Lưu sản phẩm mới
Action Name Description Success Failure
Chọn ảnh Nhấn vào ô vuông dưới hình ảnh để thêm ảnh cho sản phẩm
Hiển thị ảnh ở ô hình ảnh
Lưu Thêm sản phẩm mới Hiển thị thông báo thêm thành công quay lại trang danh sách
Hiển thị thông báo lỗi
Hình 38 :Cập nhật sản phẩm Screen Cập nhật sản phẩm
Description Cập nhật sản phẩm
Screen AccessChọn nút chỉnh sửa bảng ở trang danh sách sản phẩm
Tên sản phẩm Textfield String Hiển thị tên sản phẩm, cho phép người dùng có thể thay đổi
Giá tiền Textfield Int Hiển thị giá tiền cho phép người , dùng có thể thay đổi
Mô tả Textfield String Hiển thị mô tả của sản phẩm, cho phép người dùng có thể thay đổi
Danh mục Select Chọn danh mục của sản phẩm, cho phép người dùng có thể thay đổi
Hình ảnh Input File Hiển thị ảnh của sản phẩm, cho phép người dùng có thể thay đổi
Trang thái RadioButton Hiển thị trạng thái
Lưu Button Cập nhât thông tin sản phẩm
Action Name Description Success Failure
Chọn ảnh Nhấn vào ô vuông dưới hình ảnh để thêm ảnh cho sản phẩm
Hiển thị ảnh ở ô hình ảnh
Xóa ảnh Nhấn vào dấu x nơi ảnh để xóa Xóa ảnh khỏi ô hình ảnh
Lưu Thêm sản phẩm mới Hiển thị thông báo cập nhật thành công, quay lại trang danh sách sản phẩm
Hiển thị thông báo lỗi
Bảng :Cập nhật sản phẩm 23 4.3.6 Xóa sản phẩm
Hình 39 :Giao diện xoá sản phẩm
Screen AccessChọn nút xóa ở trang danh sách sản phẩm
Bạn muốn xóa sản phẩm
Textfield String Hiển thị tên sản phẩm muốn xóa Đóng Button Đóng biểu mẫu
Xóa Button Xác nhận xóa sản phẩm
Action Name Description Success Failure Đóng Quay lại trang danh sách sản phẩm
Xóa Xóa sản phẩm Hiển thị xóa thành công và quay lại trang danh sách sản phẩm
Hiển thị thông báo lỗi xóa không thành công và quay lại trang danh sách sản phẩm
Bảng :Xoá sản phẩm 24 4.3.7 Xem đánh giá sản phẩm
Hình 40 :Xem đánh giá sản phẩm
Screen Xem đánh giá sản phẩm
Description Xem đánh giá sản phẩm
Screen AccessChọn nút xem đánh giá ở trang danh sách sản phẩm
Item Type Data Description Ảnh Image file Ảnh đại diện của người dùng và hình ảnh đánh giá của người dùng
Text String Tên của người dùng
Sao image Hiển thị số sao trung bình được đánh giá trên hệ thống và hiển thị số sao của từng người bình luận
Datetime Datetime Hiển thị thời gian bình luận
Bình luận Text String Hiển thị bình luận của người dùng cho sản phẩm được chọn
Bảng :Xem đánh giá sản phẩm 25
Hình 41 :Giao diện quản lý đơn hàng Screen Xem danh sách đơn hàng
Description Xem danh sách đơn hàng
Screen AccessChọn nút xem danh sách đơn hàng phái trái màn hình chính
Từ ngày Datetime Datetime Chọn ngày bắt đầu Đến ngày Datetime Datetime Chọn ngày kết thúc
Tìm kiếm Button Tìm kiếm danh sách đơn hàng từ ngày bắt đầu đến ngày kết thúc đã chọn trước đó
Xem Button Khi chọn vào xem chi tiết đơn hàng được chọn Screen Actions
Action Name Description Success Failure Xem Nhấn vào nút xem trên màn hình chuyển đến trang thông tin chi tiết đơn hàng của hàng được chọn
Chuyển đến trang chi tiết đơn hàng được chọn
Bảng :Quản lý đơn hàng 26 4.3.9 Chi tiết đơn hàng
Hình 42 :Giao diện xem chi tiết đơn hàng Screen Chi tiết đơn hàng
Description Chi tiết đơn hàng
Screen AccessChọn nút xem ở trang danh sách đơn hàng
Sản phẩm Table Hiển thị danh sách sản phẩm của đơn hàng
Tiền hàng Text Int Hiển thị tổng giá tiền của các đơn hàng đã mua
Text Int Hiển thị phí vận chuyển của đơn hàng
Tổng tiền Text Int Hiển thị tổng số tiền phải trả cho đơn hàng
Ngày đặt hàng Text String Hiển thị thời gian mà đơn hàng được đặt
Text String Hiển thị thông tên và số điện thoại của người giao hàng
Khách hàng Text String Hiển thị số điện thoại tên địa chỉ của người nhận hàng
Các chức năng của quản trị viên
Hình 43 :Giao diện danh sách cửa hàng Screen Danh sách cửa hàng
Description Danh sách cửa hàng
Text String Nhập tên cửa hàng cần tìm kiếm
Trạng thái của cửa hàng
Select Chọn trạng thái của cửa hàng
Table Hiển thị cửa hàng
Xem chi tiết Button Xem chi tiết cửa hàng
Khoá cửa hàng Button Khoá cửa hàng
Screen Actions Action Name Description Success Failure
Người dùng nhập tên cửa hàng cần tìm vào ô và nhấn Enter
Hiển thị danh sách cửa hàng với tên đã nhập
Dữ liệu trong bảng không thay đổi
Xem chi tiết Xem thông tin chi tiết của cửa hàng
Chuyển sang trang chi tiết cửa hàng
Không có gì thay đổi
Tìm kiếm theo trạng thái
Chọn trong Trạng thái của cửa hàng
Hiển thị danh sách cửa hàng với tên đã nhập
Dữ liệu trong bảng không thay đổi
Khoá cửa hàng Khoá cửa hàng nếu họ vi phạm điều khoản của hệ thống hoặc đơn giản là tạm dừng kinh doanh
Hiển thị thông báo đã khoá cửa hàng
Không có gì thay đổi
Bảng :Danh sách cửa hàng 28
Hình 44 :Giao diện danh sách cửa hàng chờ xác nhận
Screen Cấp phép cửa hàng
Description Danh sách cửa hàng chờ được cấp phép
Screen AccessChọn nút cấp phép cửa hàng ở bên trái màn hình
Danh sách cửa hàng chờ xác nhận
Table Hiển thị cửa hàng chờ được cấp phép
Xem chi tiết Button Xem chi tiết cửa hàng
Chấp nhận Button Cấp phép cho cửa hàng
Từ chối Button Từ chối cửa hàng
Action Name Description Success Failure
Xem chi tiết Xem thông tin chi tiết của cửa hàng
Chuyển sang trang chi tiết cửa hàng
Không có gì thay đổi
Chấp nhận cửa hàng trên hệ thống
Hiển thị thông báo cấp phép thành công và gửi mail
Hiển thị thông báo thất bại
Từ chối cửa hàng trên hệ thống
Hiển thị thông báo từ chối thành công và gửi mail
Hiển thị thông báo thất bại
4.4.3 Danh sách người giao hàng
Hình 45 :Giao diện danh sách người giao hàng
Screen Danh sách người giao hàng
Description Danh sách người giao hàng
Screen AccessChọn nút danh sách người giao hàng ở bên trái màn hình
Danh sách người giao hàng
Table Hiển thị người giao hàng
Xem chi tiết Button Xem chi tiết người giao hàng Khoá tài khoản
Button Khoá tài khoản người giao hàng
Screen Actions Action Name Description Success Failure Khoá tài khoản
Khoá tài khoản người giao hàng nếu họ vi phạm điều khoản của hệ thống
Hiển thị thông báo đã khoá tài khoản
Không có gì thay đổi
Xem chi tiết Xem thông tin chi tiết của người giao hàng
Chuyển sang trang chi tiết người giao hàng
Không có gì thay đổi
Bảng 30: Danh sách người giao hàng
4.4.4 Cấp phép người giao hàng
Hình 46:Danh sách người giao hàng chờ xác nhận Screen Cấp phép người giao hàng
Description Danh sách người giao hàng chờ được cấp phép
Screen AccessChọn nút cấp phép người giao hàng ở bên trái màn hình
Danh sách người giao hàng chờ xác nhận
Table Hiển thị người giao hàng chờ được cấp phép
Xem chi tiết Button Xem chi tiết người giao hàng
Chấp nhận Button Chấp nhận cho người giao hàng
Từ chối Button Từ chối người giao hàng
Action Name Description Success Failure
Xem chi tiết Xem thông tin chi tiết của người giao hàng
Chuyển sang trang chi tiết người giao hàng
Không có gì thay đổi
Chấp nhận người giao hàng
Chấp nhận người giao hàng trên hệ thống
Hiển thị thông báo chấp nhận thành công và gửi mail
Hiển thị thông báo thất bại giao hàng trên hệ thống từ chối thành công và gửi mail báo thất bại
Bảng : Cấp phép người giao hàng 31 4.4.5 Danh sách người dùng
Hình 47:Danh sách người dùng Screen Danh sách người dùng
Description Danh sách người dùng
Screen AccessChọn danh sách người dùng ở bên trái màn hình
Table Hiển thị danh sách người dùng hiện tại của hệ thống
Xem chi tiết Button Xem chi tiết người giao hàng Screen Actions
Action Name Description Success Failure
Xem chi tiết Xem thông tin chi tiết của người dùng
Chuyển sang trang chi tiết người dùng
Không có gì thay đổi
Bảng :Danh sách người dùng 32
Hình 48:Màn hình thống kê Screen Thống kê
Description Thống kê số lượng khách hàng đã đăng kí và thống kê doanh thu theo tháng và theo quý
Screen AccessChọn thống kê ở bên trái màn hình
Chart Hiển thị danh sách khách hàng hiện t của hệ thống
Chart Xem chi tiết người giao hàng
Thời gian Select Chọn mốc thời gian để thống kê
Xuất file Select Chọn định dạng khi xuất ra file
Action Name Description Success Failure
Biểu đồ thành đổi thành các tháng ở cột ngang
Biểu đồ thành đổi thành các quý ở cột ngang Xuất file Nhấp vào và Hiện thị hộp thoại lưu muốn xuất ra
Các chức năng của người giao hàng
4.5.1 Xem đơn hàng hiện tại
Hình 49 :Giao diện người giao hàng khi có và không có đơn hàng
Screen Danh sách đơn hàng hiện tại
Description Danh sách đơn hàng hiện tại
Screen AccessMàn hình chỉ đường của người giao hàng
Danh sách hiển thị các đơn hàng gần người giao hàng giúp dễ dàng quản lý và theo dõi Người giao hàng có thể xem chi tiết thông tin đơn hàng bằng cách nhấn vào nút "Xem chi tiết" Để nhận đơn hàng, người giao hàng chỉ cần nhấn nút "Nhận đơn".
Action Name Description Success Failure Xem danh sách đơn hàng
Hiển thị thông tin các đơn hàng gần người giao hàng
Xem chi tiết Xem thông tin chi tiết đơn hàng mà không đặt đơn
Chuyển sang trang chi tiết người giao hàng
Bảng :Danh sách đơn hàng hiện tại 34 4.5.2 Chi tiết đơn hàng
Hình 50 :Giao diện chi tiết đơn hàng Screen Chi tiết đơn hàng
Description Xem chi tiết đơn hàng
Screen AccessMàn hình chi tiết đơn hàng
Xác nhận đơn Button Xác nhận nhận đơn hàng
Thông tin chi tiết đơn hàng
Text Chi tiết thông tin đơn hàng
Action Name Description Success Failure
Xác nhận nhận đơn của người giao hàng
Thông báo nhận đơn thành công
Thông báo không thể nhận đơn hàng
Bảng :Chi tiết đơn hàng 35 4.5.3 Nhận đơn hàng từ cửa hàng
Hình 51 :Giao diện chi tiết đơn hàng Screen Chi tiết đơn hàng
Description Nhận đơn hàng từ cửa hàng
Screen AccessMàn hình chi tiết đơn hàng sau khi bấm nút nhận đơn hàng Screen Content
Item Type Data Description Đã nhận hàng Button Xác nhận nhận đơn hàng từ cửa từ cửa hàng hàng
Action Name Description Success Failure Đã nhận hàng từ cửa hàng
Xác nhận người giao hàng đã đến cửa hàng nhận đơn, sau đó bắt đầu vận chuyển cho khách
Thông báo xác nhận đã nhận đơn hàng
Bảng 36: Chi tiết đơn hàng
4.5.4 Xác nhận đã hoàn thành giao hàng
Bảng : Giao diện trước và sau khi giao hàng thành công 37
Screen Chi tiết đơn hàng
Description Sau khi người giao hàng đã giao hàng cho khách và bấm giao hàng thành công
Màn hình chi tiết đơn hàng sau khi bấm nút xác nhận giao hàng thành công
Xác nhận đã giao hàng thành công
Button Người giao hàng bấm nút xác nhận sau khi đến điểm giao và giao hàng cho khách
Button Người giao hàng tìm kiếm đơn khác sau khi hoàn thành giao hàng Screen Actions
Xác nhận đã giao hàng thành công
Xác nhận người giao hàng đã giao hàng thành công và bấm nút Xác nhận đã giao hàng thành công
Thông báo Đã hoàn thành giao hàng
Tìm kiếm đơn khác sau khi hoàn thành đơn hàng
Trở về màn hình chính người giao hàng
Bảng 38: Chi tiết đơn hàng
4.5.5 Xem thu nhập người giao hàng
Hình 52 : Giao diện thống kê thu nhập của Người giao hàng
Screen Màn hình thống kê thu nhập
Description Xem thu nhập của người giao hàng theo ngày và theo tuần Screen AccessSau khi bấm thống kê thu nhập
Nút "Xem thống kê" cho phép người dùng theo dõi thu nhập theo ngày và tuần, đồng thời hiển thị bảng thống kê thu nhập dưới dạng biểu đồ cột.
Action Name Description Success Failure
Tuần Xem thống kê thu nhập trong tuần
Các chức năng trên Mobile
4.6.1 Xem thông tin cửa hàng
Hình 53: Xem thông tin cửa hàng
Screen Thông tin cửa hàng
Description Xem thông tin cửa hàng
Screen Access Người dùng bấm vào cửa hàng bất kì trong trang chủ Screen Content
Thêm món ăn Button Trường dành cho người dùng nhập OTP
Xoá món ăn Button Text Gửi lại OTP
Text - Image Thông tin cơ bản của cửa hàng
Danh sách món ăn cửa hàng
List Hiển thị danh sách món ăn cửa hàng
Thanh toán Button Chuyển qua xem đơn hàng trước khi thanh toán
Action Name Description Success Failure
Thêm món ăn Người dùng thêm món ăn vào giỏ hàng
Hiện giỏ hàng và tổng tiền thanh toán
Xoá món ăn Người dùng xoá món ăn giỏ hàng
Xoá số lượng món ăn khỏi giỏ hàng
Bảng :Xem thông tin cửa hàng 40
4.6.2 Xem thông tin đơn hàng trước khi thanh toán
Hình 54 :Giao diện xác nhận đơn hàng
Screen Thông tin đơn hàng trước khi thanh toán
Description Xem thông tin đơn hàng trước khi thanh toán
Access Người dùng bấm nút thanh toán sau khi chọn xong món chuyển qua màn hình xem thông tin trước khi thanh toán
Item Type Data Description Địa chỉ giao hàng
Text Hiển thị địa chỉ mà người dùng muốn shipper giao đến
Thông tin List Hiển thị thông tin món ăn đơn hàng món ăn đơn hàng
Tổng tiền Text Thông tin tổng tiền đơn hàng
Button Phương thức thanh toán Đặt đơn Button Xác nhận đặt đơn và thanh toán chuyển khoản Screen Actions
Người dùng thực hiện hành động đặt đơn bằng cách chọn địa chỉ giao hàng, kiểm tra thông tin món ăn và phương thức chuyển khoản, sau đó xác nhận đơn hàng với cách thức thanh toán đã chọn.
Chuyển qua màn hình thanh toán bằng vnpay
Chọn địa chỉ giao hàng Chọn địa chỉ giao hàng Chuyển qua trang chon địa chỉ giao hàng
Chỉnh sửa món ăn trong đơn hàng
Người dùng có thể thay đổi số lượng món ăn và ghi chú cho món ăn
Bảng :Thông tin đơn hàng 41
Hình 55 :Giao diện tìm kiếm món ăn Screen Tìm kiếm món ăn
Description Tìm kiếm món ăn trên app
Access Tìm kiếm món ăn ở phần tìm kiếm
Tìm kiếm Text field Nhập món ăn cần tìm kiếm Screen Actions
Action Name Description Success Failure
Tìm kiếm Người dùng nhập món ăn tìm kiếm, ứng dụng hiển thị các món ăn có liên quan đến thông tin tìm kiếm
Bảng :Tìm kiếm thông tin món ăn 42