xây dựng hệ thống mua bán cho cửa hàng cafe

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ác cửa hàng theo dõi, thực hiện các đơn đặt hàng; ứng dụng mobile để nhân viên giao hàng và we

NỘI DUNG

Flutter là một framework phát triển ứng dụng di động giao diện người dùng (UI) đa nền tảng được phát triển bởi Google Với Flutter, bạn có thể xây dựng các ứng dụng di động đẹp, tương tác và hiệu suất cao cho cả iOS và Android từ một mã nguồn duy nhất Flutter sử dụng ngôn ngữ lập trình Dart, được tối ưu hóa để xây dựng giao diện người dùng nhanh chóng và mượt mà Đặc điểm nổi bật:

− Giao diện người dùng tương tự trên nhiều nền tảng: Flutter cho phép bạn xây dựng giao diện người dùng đẹp và tương tự trên cả iOS và Android từ một mã nguồn duy nhất Bạn không cần phải viết mã riêng cho mỗi nền tảng, giúp tiết kiệm thời gian và công sức phát triển

− Hot Reload: Flutter cung cấp tính năng Hot Reload cho phép bạn thay đổi mã nguồn và xem kết quả ngay lập tức trên thiết bị hoặc máy ảo Điều này giúp tăng tốc quá trình phát triển và kiểm thử ứng dụng

− Đồng bộ với nền tảng: Flutter cung cấp các widget và các thành phần giao diện tương tự như giao diện người dùng trên các nền tảng iOS và Android Điều này giúp bạn xây dựng ứng dụng với trải nghiệm người dùng tốt trên cả hai nền tảng mà không cần nhiều công cụ bổ sung

− Hiệu suất cao: Flutter sử dụng khung Render Engine riêng biệt để vẽ giao diện người dùng, giúp cải thiện hiệu suất và tốc độ của ứng dụng Bạn có thể xây dựng các ứng dụng đa nhiệm, mượt mà và phản hồi nhanh

− Cộng đồng lớn và hỗ trợ mạnh mẽ: Flutter có một cộng đồng lớn và sôi nổi, với rất nhiều tài liệu, các package và các công cụ hỗ trợ sẵn sàng Bạn có thể tận dụng những tài nguyên này để giúp xây dựng ứng dụng của mình nhanh chóng và hiệu quả.

CƠ SỞ LÝ THUYẾT

CÔNG NGHỆ SỬ DỤNG

Flutter là một framework phát triển ứng dụng di động giao diện người dùng (UI) đa nền tảng được phát triển bởi Google Với Flutter, bạn có thể xây dựng các ứng dụng di động đẹp, tương tác và hiệu suất cao cho cả iOS và Android từ một mã nguồn duy nhất Flutter sử dụng ngôn ngữ lập trình Dart, được tối ưu hóa để xây dựng giao diện người dùng nhanh chóng và mượt mà Đặc điểm nổi bật:

− Giao diện người dùng tương tự trên nhiều nền tảng: Flutter cho phép bạn xây dựng giao diện người dùng đẹp và tương tự trên cả iOS và Android từ một mã nguồn duy nhất Bạn không cần phải viết mã riêng cho mỗi nền tảng, giúp tiết kiệm thời gian và công sức phát triển

− Hot Reload: Flutter cung cấp tính năng Hot Reload cho phép bạn thay đổi mã nguồn và xem kết quả ngay lập tức trên thiết bị hoặc máy ảo Điều này giúp tăng tốc quá trình phát triển và kiểm thử ứng dụng

− Đồng bộ với nền tảng: Flutter cung cấp các widget và các thành phần giao diện tương tự như giao diện người dùng trên các nền tảng iOS và Android Điều này giúp bạn xây dựng ứng dụng với trải nghiệm người dùng tốt trên cả hai nền tảng mà không cần nhiều công cụ bổ sung

− Hiệu suất cao: Flutter sử dụng khung Render Engine riêng biệt để vẽ giao diện người dùng, giúp cải thiện hiệu suất và tốc độ của ứng dụng Bạn có thể xây dựng các ứng dụng đa nhiệm, mượt mà và phản hồi nhanh

− Cộng đồng lớn và hỗ trợ mạnh mẽ: Flutter có một cộng đồng lớn và sôi nổi, với rất nhiều tài liệu, các package và các công cụ hỗ trợ sẵn sàng Bạn có thể tận dụng những tài nguyên này để giúp xây dựng ứng dụng của mình nhanh chóng và hiệu quả

Khóa luận tốt nghiệp Công nghệ phần mềm 6

NuxtJS là một framework mã nguồn mở dựa trên Vue.js, được tạo ra để giúp bạn xây dựng ứng dụng web chuyên nghiệp và hiệu quả Với việc kết hợp những tính năng mạnh mẽ của Vue.js và các khả năng bổ sung như routing tự động, server-side rendering (SSR) và cấu hình dựa trên tệp, NuxtJS cung cấp một cách tiếp cận linh hoạt cho việc phát triển ứng dụng web Điểm nổi bật:

− Vue.js cốt lõi: NuxtJS được xây dựng dựa trên Vue.js, một trong những framework JavaScript phổ biến nhất và có cộng đồng lớn Sự kết hợp này mang lại cho bạn sự linh hoạt và khả năng mở rộng khi phát triển ứng dụng web

− Server-side rendering (SSR): Với SSR, NuxtJS cho phép tạo ra các ứng dụng web với trang tĩnh được tạo ra từ máy chủ trước khi gửi tới trình duyệt Điều này cung cấp trải nghiệm nhanh chóng và cải thiện khả năng tìm kiếm của ứng dụng web của bạn

− Routing tự động: NuxtJS giúp bạn quản lý routing một cách dễ dàng và tự động dựa trên cấu trúc thư mục của ứng dụng Bạn không cần phải cấu hình routing một cách thủ công, điều này giảm bớt công việc lặp lại và tăng khả năng duy trì của dự án

− Cấu hình dựa trên tệp: Với NuxtJS, bạn có thể quản lý cấu hình ứng dụng của mình thông qua các tệp tin Điều này cho phép bạn tùy chỉnh các thiết lập một cách dễ dàng, như cấu hình máy chủ, biến môi trường và nhiều hơn nữa

− Quản lý trạng thái ứng dụng: NuxtJS tích hợp sẵn Vuex, một thư viện quản lý trạng thái mạnh mẽ cho ứng dụng Vue.js Điều này giúp bạn quản lý trạng thái ứng dụng một cách hiệu quả và dễ dàng

Tích hợp và mở rộng:

NuxtJS hỗ trợ nhiều plugin và module từ cộng đồng Vue.js, giúp bạn tích hợp các tính năng phổ biến như quản lý trạng thái với Vuex, xử lý HTTP với Axios và quản lý metadata với Vue Meta Bên cạnh đó, bạn cũng có thể sử dụng các module mở rộng của NuxtJS để tăng khả năng và linh hoạt của ứng dụng của mình

NestJS là một framework phát triển ứng dụng server-side đa nền tảng (cross- platform) và hiệu suất cao cho Node.js Được xây dựng trên cấu trúc module của Angular, NestJS cung cấp một cách tiếp cận tương tự và cú pháp tương đồng với Angular, giúp bạn xây dựng ứng dụng server-side một cách dễ dàng và nhất quán Điểm nổi bật:

− Kiến trúc module và Dependency Injection: NestJS sử dụng kiến trúc module để tổ chức và chia nhỏ ứng dụng thành các phần độc lập và có khả năng tái sử dụng

Nó cũng hỗ trợ Dependency Injection, cho phép bạn quản lý các phụ thuộc và tạo mối quan hệ giữa các thành phần một cách dễ dàng

KIẾN TRÚC HỆ THỐNG

Để thêm tính năng realtime trong hệ thống mua hàng, hệ thống có sử dụng thêm Websocket để tạo kết nối TCP giữa các ứng dụng giúp hệ thống trao đổi dữ liệu theo thời gian thực, cụ thể như sau:

− Server bán hàng tích hợp thêm server websocket để nhận và phát tin đến các ứng dụng khác

− Ứng dụng mobile cửa hàng và tài xế có thêm kết nối đến server websocket để nhận dữ liệu theo thời gian thực

− Server của thành viên cũng kết nối đến server websocket để truyền tin khi có đơn đặt hàng mới

Các server kết nối và lấy dữ liệu từ MongoDB thông qua một ODM (Object Data Model) của MongoDB tên Mongoose

Các server cũng có kết nối tới các bên thứ 3 gồm Amazon S3, Twilito, Momo

1.2.1 Cách thức tổ chức và hoạt động của front-end Ứng dụng flutter sử dụng mô hình BLoC để quản lý state Bloc là một mô hình để quản lý state cho Flutter application B.L.o.C nghĩa là Business Logic Component Nhận 'Event' như là input và trả về output là 'State' Bloc được xây dựng dựa trên RxDart Gồm 3 lớp biểu diễn chính như sau:

− Data layer: Có nhiệm vụ cung cấp data từ bất kể nguồn nào Data Provider cung cấp data và repository sẽ là trình đóng gói một hoặc nhiều data providers

− Bloc hay Business Logic: có nhiệm vụ nhận event từ lớp biểu diễn và trả về state mới Hoạt động như một cầu nối giữa lớp data và lớp presentation

− Presentation Layer (UI): Có nhiệm vụ render chính nó dựa trên một hoặc nhiều state của bloc Nó cũng xử lý các sự kiện input của user và lifecycle event của application

Hình 2 Mô hình BLoC trong Flutter

Luồng hoạt động của mô hình BLoC trong ứng dụng như sau:

Mô hình BLoC (Business Logic Component) trong Flutter hoạt động theo các bước cơ bản sau:

1 Gửi Event: Giao diện người dùng (UI) hoặc bất kỳ nguồn dữ liệu nào có thể gửi Event tới Bloc Event đại diện cho một hành động, ví dụ như người dùng nhấn nút, dữ liệu từ API được nhận, hoặc sự kiện từ cảm biến

2 Xử lý Event: Bloc nhận Event và thực hiện logic kinh doanh liên quan đến Event đó Điều này có thể bao gồm gọi API, xử lý nghiệp vụ, truy vấn cơ sở dữ liệu, hoặc thay đổi trạng thái của ứng dụng

3 Cập nhật State: Sau khi xử lý Event, Bloc cập nhật trạng thái mới của ứng dụng Trạng thái được truyền qua một Stream để thông báo cho giao diện người dùng về sự thay đổi này

4 Nghe Stream: Giao diện người dùng lắng nghe trạng thái mới thông qua Stream Khi có sự thay đổi, giao diện người dùng cập nhật giao diện tương ứng để phản ánh trạng thái mới

5 Hiển thị UI: Giao diện người dùng sẽ được cập nhật với trạng thái mới nhận được từ Bloc Các thành phần UI sẽ được cập nhật hoặc hiển thị dựa trên trạng thái hiện tại

6 Lặp lại quá trình: Quá trình này sẽ được lặp đi lặp lại khi có các Event mới được gửi từ UI hoặc nguồn dữ liệu khác Bloc tiếp tục xử lý Event, cập nhật trạng thái và gửi thông tin mới tới UI để cập nhật giao diện người dùng

1.2.2 Cách thức tổ chức và hoạt động của back-end

Hình 3 Đường đi của request và response trong NestJS

Khi một yêu cầu HTTP đến, nó sẽ được đi qua một pipeline xử lý yêu cầu Pipeline này bao gồm các middleware, interceptor và guards được áp dụng trên yêu cầu theo thứ tự đã được đăng ký

− Middleware: Middleware là các thành phần trung gian trong pipeline, chịu trách nhiệm xử lý yêu cầu và phản hồi trước khi chúng được chuyển đến controller hoặc action tương ứng Middleware có thể thực hiện các tác vụ như xác thực, xử lý lỗi, ghi log, kiểm tra quyền truy cập và nhiều hơn nữa Các middleware có thể được đăng ký trên toàn ứng dụng hoặc chỉ áp dụng cho một nhóm routes cụ thể

− Interceptor: Interceptor là các lớp decorator được áp dụng trên controller hoặc action để thực hiện các tác vụ xử lý trước và sau khi action được gọi Interceptor có thể thay đổi dữ liệu yêu cầu hoặc phản hồi, thực hiện xử lý bổ sung và áp dụng logic tùy chỉnh trước khi phản hồi được trả về cho client

− Guard: Guard được sử dụng để kiểm tra và quyết định việc tiếp tục xử lý yêu cầu Guard có thể kiểm tra quyền truy cập, xác thực người dùng, kiểm tra các điều kiện và hành động tùy chỉnh khác Nếu guard không cho phép yêu cầu tiếp tục, quá trình xử lý yêu cầu sẽ kết thúc và phản hồi tương ứng được trả về

PHÂN TÍCH YÊU CẦU VÀ THIẾT KẾ HỆ THỐNG

MÔ TẢ CÁC THÀNH PHẦN DỮ LIỆU CHÍNH

Các sản phẩm của nhãn hàng, gồm loại sản phẩm dùng để phân loại Một sản phẩm có thể có các tùy chọn để mua hàng

Các loại dùng để phân loại sản phẩm

Các tùy chọn của các sản phẩm như cách pha (nóng, lạnh), size (nhỏ, vừa, lớn), topping, đường, …

Chứa các thông tin của chi nhánh cửa hàng như tên, địa chỉ, … Một cửa hàng có thể thay đổi sửa đổi menu sản phẩm, loại sản phẩm, tùy chọn sản phẩm riêng bằng cách vô hiệu hóa từ menu chính Đơn hàng (order)

Các đơn hàng gồm các sản phẩm với các tùy chọn

Gồm 3 loại đơn hàng: Đơn hàng giao đi (delivery), đơn hàng đến lấy (pickup), và đơn hàng tại cửa hàng (in-store) Đối với đơn hàng delivery sẽ có thêm phí giao hàng

Nếu đơn hàng là của thành viên cửa hàng thì sẽ có thêm thông tin của thành viên và có thể có ưu đãi của thành viên được áp dụng

Tài khoản dùng để đăng nhập vào ứng dụng cửa hàng, được tạo và cấp bởi admin

Mỗi tài khoản sẽ định danh cho một cửa hàng và dùng để tạo và nhận đơn hàng cho cửa hàng đó

Tài khoản dùng để đăng nhập ứng dụng giao hàng được tạo và cung cấp bởi admin

Mỗi tài khoản dùng cho một tài xế và tài xế có thể xem và nhận đơn hàng để giao

Những đơn thanh toán online shipper sẽ nhận tiền giao hàng vào vào ví tài xế và có thể gửi yêu cầu rút tiền với một số tiền tối thiểu cụ thể

Là những người đã đăng ký thành công tài khoản trên ứng dụng mobile, sau khi đăng ký thành viên

Thành viên sẽ có một mã thành viên riêng được hệ thống dùng để tích điểm khi mua hàng dựa trên số tiền của đơn hàng

Khi mua hàng tại quầy sẽ dùng mã thành viên thông qua một barcode và cửa hàng sẽ quét để lấy mã

Là các cấp bậc của thành viên, được tính toán dựa trên tổng số điểm mà thành viên tích lũy được Cấp bậc càng cao thì sẽ nhận được nhiều phúc lợi và ưu đãi hơn Ưu đãi (voucher)

Các mã khuyến mãi được cung cấp từ phía cửa hàng, mỗi mã khuyến mãi sẽ có điều kiện để được áp dụng và các tính ưu đãi khác nhau Được admin tạo và gán cho thành viên thông qua cấp bậc

Khi mua tại cửa hàng, để áp dụng ưu đãi thì nhân viên sẽ quét

QR code của ưu đãi

Là các chương trình cung cấp từ phía cửa hàng giúp các thành viên đổi khuyến mãi từ cửa hàng, mỗi chương trình sẽ có một số điểm quy đổi nhất định Ưu đãi từ chương trình có thể áp dụng cho sản phẩm của cửa

Khóa luận tốt nghiệp Công nghệ phần mềm 18 hàng hoặc cho đối tác của cửa hàng Được admin tạo và gán cho thành viên thông qua cấp bậc Đơn hàng (order)

Các đơn hàng gồm các sản phẩm với các tùy chọn

Gồm 3 loại đơn hàng: Đơn hàng giao đi (delivery), đơn hàng đến lấy (pickup), và đơn hàng tại cửa hàng (in-store) Đối với đơn hàng delivery sẽ có thêm phí giao hàng

Nếu đơn hàng là của thành viên cửa hàng thì sẽ có thêm thông tin của thành viên và có thể có ưu đãi của thành viên được áp dụng

Là các nhân viên thuộc những cửa hàng cụ thể, thông tin các nhân viên có thể được thêm vào thông tin các đơn hàng với mục đích để tra cứu trách nhiệm trên các đơn hàng Đối tác (partner)

Là những thương hiệu bán hàng khách hợp tác với cửa hàng, muốn tìm thêm khách hàng thông qua cung cấp ưu đãi thương hiệu của họ cho cửa hàng

Các ưu đãi của đối tác sẽ được thành viên quy đổi thông qua các chương trình ưu đãi

Table 1 Các thành phần dữ liệu chính

LƯỢC ĐỒ USECASE

− Người dùng phải đăng ký/đăng nhập ứng dụng qua mã OTP đến số điện thoại

− Thành viên có thể xem danh sách sản phẩm theo loại

− Thành viên có thể xem chi tiết sản phẩm và các lựa chọn của một sản phẩm

− Thành viên có thể xem danh sách các cửa hàng và tìm kiếm theo tên, địa chỉ

− Thành viên có thể xem chi tiết của một cửa hàng

− Thành viên có thể xem cấp bậc, điểm tích lũy của bản thân và lịch sử thay đổi điểm

− Thành viên có thể xem danh sách và chi tiết các chương trình ưu đãi và quy đổi điểm lấy ưu đãi từ chương trình

− Thành viên có thể thêm sản phẩm vào giỏ hàng và thực hiện đặt hàng

− Thành viên có thể xem danh sách các ưu đãi của bản thân và áp dụng vào giỏ hàng nếu đủ điều kiện của ưu đãi

− Thành viên có thể xem lịch sử đơn hàng theo trạng thái đơn hàng

− Thành viên có thể xem các sản phẩm được gợi ý cho bản thân

− Thành viên có thể xem các thông báo liên quan tới ưu đãi, đơn hàng

Hình 5 Use case ứng dụng thành viên

− Nhân viên phải đăng nhập vào ứng dụng bằng tài khoản mật khẩu của cửa hàng

− Nhân viên có thể xem danh sách sản phẩm

− Nhân viên có thể thực hiện tạo đơn hàng cho khách hàng hoặc thành viên của cửa hàng

− Nhân viên có thể xem danh sách ưu đãi còn hiệu lực của thành viên đó

− Nhân viên có thể gợi ý ưu đãi có thể áp dụng cho đơn hàng

− Nhân viên có thể xem danh sách đơn hàng của cửa hàng

− Nhân viên có thể cập nhật trạng thái đơn hàng

Hình 6 Use case ứng dụng cửa hàng

− Tài xế có thể nhận danh sách đơn hàng đang chờ giao

− Tài xế có thể nhận đơn để giao và xem chi tiết đơn hàng

− Tài xế có thể xem danh sách đơn hàng đang giao và xem chi tiết đơn hàng

− Tài xế có thể xem lịch sử các đơn hàng đã giao

− Tài xế có thể thay đổi trạng thái giao hàng của đơn hàng

− Tài xế có thể yêu cầu rút tiền từ ví tài xế và xem lịch sử rút tiền

Hình 7 Use case ứng dụng giao hàng

− Admin có thể quản lý các thông tin liên quan tới sản phẩm: sản phẩm, phân loại sản phẩm, tùy chọn sản phẩm

− Admin có thể quản lý các thông tin liên quan tới cửa hàng: cửa hàng, nhân viên cửa hàng

− Admin có thể quản lý các thông tin liên quan tới người dùng: người dùng và cấp bạc

− Admin có thể xem lịch sử đơn hàng và cập nhật trạng thái đơn hàng

− Admin có thể quản lý các thông tin liên quan tới ưu đãi: ưu đãi, đổi ưu đãi và đối tác ưu đãi

− Admin có thể quản lý các thông tin liên quan tới tài khoản: tài khoản admin, phân quyền admin, tài khoản cửa hàng, tài khoản tài xế

− Admin có thể xe nhiều số liệu thống kê số liệu về doanh thu, doanh số, số đơn hàng, số thành viên,… b

Hình 8 Use case ứng dụng quản trị

ĐẶC TẢ USECASE

2.3.1 Module thành viên Đặc tả use case Đăng ký (Register)

− Mô tả: Cho phép đăng ký tài khoản mới

B1: Hệ thống hiển thị trang đăng nhập

B2: Khách hàng bấm nút đăng ký tài khoản

B3: Hệ thống hiển thị thông tin đăng ký gồm số điện thoại và các thông tin khác

B4: Khách hàng điền đầy đủ thông tin thành viên và bấm đăng ký

B5: Hệ thống chuyển sang màn hình nhập mã OTP 6 số

B6: Khách hàng nhận mã OTP qua SMS số điện thoại điền trong thông tin tài khoản và nhập vào input

B7: Nhập OTP bấm xác nhận để thực hiện đăng ký

− Tiền điều kiện: Khách hàng phải bấm nút đăng ký

1 Nếu nhập thông tin không hợp lệ, sẽ báo lỗi và nhập lại

2 Nếu nhập thông tin hợp lệ, hệ thống mới chuyển sang màn hình xác nhận

3 Nếu nhập mã OTP không đúng sẽ báo lỗi và nhập lại, tài khoản được duy trì 10p cho việc xác nhận mã OTP

4 Nếu nhập mã OTP đúng sẽ thông báo đăng ký thành công và chuyển sang màn hình chính Đặc tả use case Đăng nhập (Login)

− Mô tả: Cho phép đăng nhập tài khoản

B2: Khách hàng nhập số điện thoại của tài khoản và bấm đăng nhập

B3: Hệ thống chuyển sang màn hình nhập mã OTP 6 số

B4: Khách hàng nhận mã OTP qua SMS số điện đăng nhập và nhập OTP vào input

B5: Nhập OTP bấm xác nhận để thực hiện đăng ký

1 Nếu nhập mã OTP không đúng sẽ báo lỗi và nhập lại

2 Nếu nhập mã OTP đúng sẽ chuyển sang màn hình chính Đặc tả use case Danh sách sản phẩm (View product list)

− Mô tả: Cho phép người dùng xem Danh sách sản phẩm

− Actor: Khách hàng (Customer), Thành viên (Member)

B1: Khi trong màn hình ứng dụng, bấm vào mục Đặt hàng ở dưới menu để xem danh sách sản phẩm

B2: Khi bấm vào một sản phẩm, mở popup hiển thị thông tin chi tiết của sản phẩm cùng với các tùy chọn khi mua sản phẩm

B3: Trong popup chi tiết của sản phẩm có thể chọn các tùy chọn, số lượng sản phẩm và chọn thêm vào giỏ hàng

B1: Ở giữa màn hình danh sách sản phẩm, sẽ có danh sách sản phẩm Gợi ý cho bạn

B2: Bấm vào một sản phẩm trong gợi ý để hiện popup chi tiết sản phẩm tương tự như trên

− Tiền điều kiện: Cần đăng nhập để thêm sản phẩm vào giỏ hàng, nếu chưa đăng nhập thì sẽ bị yêu cầu đăng nhập để thực hiện

− Hậu điều kiện: Không Đặc tả use case Danh sách cửa hàng (View store list)

− Mô tả: Cho phép người dùng xem Danh sách cửa hàng

− Actor: Khách hàng (Customer), Thành viên (Member)

B1: Khi trong màn hình ứng dụng, bấm vào mục Cửa hàng ở dưới menu để xem danh sách cửa hàng

B2: Khi bấm vào một cửa hàng, mở popup hiển thị thông tin chi tiết của cửa hàng

B3: Trong popup chi tiết cửa hàng, bấm vào nút Đặt hàng tại cửa hàng

B4: Chuyển qua trang danh sách sản phẩm

B1: Ở trên cùng màn hình danh sách cửa hàng, bấm vào ô input search cửa hàng

B2: Nhập tên cửa hàng và xem danh sách kết quả bên dưới

− Tiền điều kiện: Cần đăng nhập để hiển thị nút Chọn cửa hàng để đặt hàng

− Hậu điều kiện: Sau khi chọn cửa hàng để đặt hàng, chuyển qua màn hình danh sách sản phẩm phải tải lại menu theo cửa hàng vừa chọn Đặc tả use case Thông tin thành viên (View member info)

− Mô tả: Thành viên xem thông tin thành viên của mình

B1: Khi trong màn hình ứng dụng, bấm vào mục Ưu đãi ở dưới menu

B2: Trên cùng có thẻ thành viên gồm các thông tin: tên thành viên, mã thành viên + barcode (dùng cho việc tích điểm), cấp bậc, số điểm hiện tại

B3: Bấm vào mục Lịch sử điểm bên dưới, mở màn hình lịch sử thay đổi điểm

B1: Ở màn hình trang chủ cũng có thẻ thành viên được thu gọn còn tên thành viên, số điểm và cấp bậc

B2: Bấm vào tích điểm để mở rộng hiển thị của thẻ thành viên

B3: Thẻ sau khi mở rộng sẽ gồm mã thành viên và barcode của mã thành viên dùng cho việc tích điểm

− Tiền điều kiện: Đối với người dùng chưa đăng nhập, trong màn hình sẽ có thông tin quyền lợi của các cấp bậc thành viên khi đăng ký thành viên của cửa hàng

− Hậu điều kiện: Trong màn hình lịch sử điểm, điểm sẽ được cộng khi mua hàng và bị trừ khi sử dụng đổi ưu đãi hoặc điểm bị hết hạn (hướng phát triển sau này) Đặc tả use case Danh sách ưu đãi (View voucher list)

− Mô tả: Thành viên xem danh sách ưu đãi

B1: Trong màn hình ưu đãi, kéo xuống mục Phiếu ưu đãi của bạn, bạn sẽ thấy danh sách ưu đãi của bản thân

B2: Bấm vào Xem tất cả ở bên phải tiêu đề, mở màn hình danh sách tất cả ưu đãi của bạn

B3: Bấm vào một ưu đãi, mở popup thông tin chi tiết của ưu đãi

B4: Bấm vào Sử dụng ưu đãi để áp dụng ưu đãi vào giỏ hàng hiện tại

B1: Ở màn hình trang chủ, bấm vào icon voucher ở trên cùng màn hình cũng có thể mở danh sách ưu đãi

1 Thành viên phải có ưu đãi

2 Thành viên phải có sản phẩm trong giỏ hàng thì chọn Sử dụng ưu đãi mới được áp dụng, còn không thì sẽ được chuyển tới màn hình Đặt hàng để thêm món vào giỏ hàng

− Hậu điều kiện: Sau khi chọn Sử dụng ưu đãi, hệ thống sẽ kiểm tra đơn hàng có đủ điều để áp dụng ưu đãi hay không, nếu không thì sẽ thông báo giỏ hàng không thể áp dụng ưu đãi Đặc tả use case Giới thiệu ưu đãi (View voucher banner)

− Mô tả: Thành viên xem slider giới thiệu ưu đãi

B1: Ở màn hình trang chủ, bên dưới thẻ thành viên sẽ có slider các banner của ưu đãi bản thân đang sở hữu

B2: Bấm vào một banner sẽ chuyển đến trang danh sách ưu đãi của bạn và mở popup chi tiết của ưu đãi xuất hiện trên banner

B3: Ta có thể sử dụng ưu đãi như use case trên

− Hậu điều kiện: Không Đặc tả use case Danh sách chương trình ưu đãi (View promotion list)

− Mô tả: Thành viên xem Danh sách chương trình ưu đãi

B1: Ở màn hình Ưu đãi, bấm chọn mục Đổi Bean/Đổi điểm để mở màn hình danh sách các chương trình ưu đãi

B2: Trong màn hình danh sách chương trình ưu đãi, gồm có 3 danh sách chương trình ưu đãi là nổi bật, từ cửa hàng và từ đối tác

B3: Bấm chọn một chương trình ưu đãi để mở popup chi tiết của chương trình

B4: Trong popup chi tiết, bên dưới cùng ta bấm Đổi Bean để thực hiện đổi ưu đãi

B1: Trong màn hình ưu đãi, cuộn xuống dưới cùng cũng có danh sách ngắn của các chương trình ưu đãi tên Đổi Bean

B2: Bấm chọn vào Xem tất cả để mở màn hình danh sách các chương trình ưu đãi tương tự như trên hoặc bấm chọn 1 ưu đãi trong danh sách ngắn để mở màn hình ưu đãi và mở popup chi tiết của chương trình đó lên

2 Khi thực hiện Đổi Bean trong 1 chương trình, số điểm (Bean) hiện tại phải lớn hơn hoặc bằng số Bean của chương trình

3 Sau khi đổi Bean thành công thì hệ thống sẽ trừ số Bean của bạn tương đương với số Bean của chương trình

4 Sau khi đổi thành công thì ưu đãi sẽ được lưu vào danh sách ưu đãi của bản thân Đặc tả use case Giỏ hàng (View cart)

− Mô tả: Thành viên xem Giỏ hàng

B1: Bên trên bottom menu của app, có một khung nội dung dùng để mở màn hình giỏ hàng

B2: Khi mở màn hình gồm 2 sự lựa chọn là giao hàng và đến lấy, nếu chọn mua đến lấy thì phải chọn cửa hàng nhận hàng trước

B3: Trong giỏ hàng ta có thể thay đổi số lượng, tùy chọn của sản phẩm trong giỏ cũng như là xóa sản phẩm

B4: Có thể chỉnh sửa thông tin người nhận hàng

B5: Bấm vào phần Voucher để mở màn hình danh sách ưu đãi và chọn 1 ưu đãi

B6: Bấm đặt hàng để thực hiện đặt hàng

− Tiền điều kiện: Đối với giao hàng giao đi, cần nhập/chọn địa chỉ giao hàng của bản thân Đối với giao hàng mang đi, cần phải chọn một cửa hàng để đến nhận hàng

1 Nếu thêm voucher, hệ thống sẽ kiểm tra xem giỏ hàng hiện tại có đạt điều kiện của ưu đãi hay không, nếu có thì áp dụng, không thì thông báo lỗi Đặc tả use case Lịch sử đơn hàng (View product history list)

− Mô tả: Thành viên xem Lịch sử đơn hàng

B1: Ở màn hình Khác, ta chọn mục Lịch sử đơn hàng

B2: Ở lịch sử đơn hàng, các đơn hàng được hiển thị theo các tab trạng thái của đơn hàng, gồm Đang thực hiện, Đã hoàn tất và Đã hủy Mặc định khi mở sẽ ở mục Đang thực hiện

B3: Bấm vào một đơn hàng sẽ mở popup chi tiết của đơn hàng đó

B4: Bấm vào các icon ngôi sao để mở popup đánh giá đơn hàng đó nếu đơn chưa được đánh giá

B5: Bấm vào nút Đặt lại để sửa giỏ hàng hiện tại giống các sản phẩm trong đơn cũ này

− Hậu điều kiện: Không Đặc tả use case Danh sách thông báo (View notification list)

− Mô tả: Thành viên xem danh sách thông báo của bản thân

B1: Ở màn hình trang chủ, bấm chọn icon hình cái chuông ở góc trên bên phải để mở màn hình danh sách thông báo của bản thân

B2: Bấm vào một thông báo để mở popup chi tiết của thông báo

B3: Trong popup chi tiết, bấm vào nút trong popup sẽ chuyển tiếp đến màn hình khác tùy vào loại thông báo

B4: Ở góc trên màn hình danh sách thông báo có 1 nút dùng để đánh dấu đã đọc tất cả thông báo

B1: Sau khi thực hiện đặt đơn hàng theo 1 cách nào đó (qua app, tại quầy), hệ thống sẽ gửi 1 thông báo review đơn hàng

B2: Sau khi bạn vừa có 1 ưu đãi mới thì hệ thống cũng gửi thông báo cho ưu đãi đó

B3: Sau khi vừa có chương trình ưu đãi mới dành cho bạn thì hệ thống cũng gửi thông báo chương trình đó cho bạn

1 Danh sách thông báo chỉ chứa tối đa 20 thông báo mới nhất

2 Các thông báo đã đọc có nền màu trắng và thông báo chưa đọc có nền màu vàng nhạt

1 Sau khi nhấn vào nút trong chi tiết của thông báo, tùy vào loại thông báo sẽ chuyển đến màn hình khác nhau:

+ Nếu là thông báo của đơn hàng thì chuyển đến trang chi tiết của đơn hàng và mở popup review đơn hàng (nếu chưa review)

+ Nếu là thông báo của ưu đãi thì chuyển đến trang màn hình danh sách ưu đãi và mở popup của ưu đãi đó

+ Nếu là thông báo của chương trình ưu đãi thì chuyển đến trang màn hình danh sách chương trình ưu đãi và mở popup chi tiết của chương trình đó

2.3.2 Module bán hàng Đặc tả use case Đăng nhập (Login)

− Mô tả: Cho phép nhân viên đăng nhập

B1: Hệ thống ở màn hình đăng nhập

B2: Nhập username và mật khẩu và bấm đăng nhập

B3: Hệ thống trả về thông báo thành công và mở màn hình trang chủ bán hàng

1 Nếu username hoặc mật khẩu không chính xác, sẽ có thông báo Tài khoản hoặc mật khẩu không chính xác và yêu cầu nhập lại tài khoản Đặc tả use case Danh sách sản phẩm của cửa hàng (View store product list)

− Mô tả: Cho phép người bán hàng xem danh sách sản phẩm

− Actor: Nhân viên bán hàng (Salesperson)

B1: Khi trong màn hình ứng dụng, bấm vào mục Đặt hàng ở dưới menu để xem danh sách sản phẩm

B2: Khi bấm vào một sản phẩm, mở popup hiển thị thông tin chi tiết của sản phẩm cùng với các tùy chọn khi mua sản phẩm

B3: Trong popup chi tiết của sản phẩm có thể chọn các tùy chọn, số lượng sản phẩm và chọn thêm vào giỏ hàng

− Hậu điều kiện: Không Đặc tả use case Tạo nhiều giỏ hàng (Create multi cart)

− Mô tả: Người bán có thể quản lý nhiều đơn hàng

B1: Ở màn hình chính, ta thêm người mua hàng bằng ô input trên cùng, có thể nhập tay tên của khách hàng hoặc quét mã QR để lấy mã thành viên

B2: Chọn Thêm thì ở màn hình sẽ tạo một giỏ hàng trống cho người mua đó và mỗi giỏ hàng là một tab trên giao diện với các sản phẩm trong giỏ là riêng biệt

B3: Bấm icon X trên tab để xóa bỏ cart

− Hậu điều kiện: Không Đặc tả use case Thêm sản phẩm vào giỏ hàng (View cart)

− Mô tả: Người bán thêm các sản phẩm vào giỏ hàng

B1: Ở màn hình danh sách sản phẩm, nhân viên chọn vào sản phẩm để mở màn hình chi tiết của sản phẩm

B2: Chỉnh sửa số lượng và tùy chọn của sản phẩm và bấm thêm vào giỏ hàng B3: Thêm voucher bằng cách quét QR code của ưu đãi hoặc nhập mã ưu đãi

B4: Bấm đặt hàng để thực hiện đặt hàng

− Hậu điều kiện: Không Đặc tả use case Xem lịch sử đơn hàng của cửa hàng (View order history)

− Mô tả: Người bán xem lịch sử đơn hàng của cửa hàng

B1: Mở màn hình Đơn hàng để xem các đơn hàng theo lịch sử đơn

B2: Lịch sử đơn hàng được hiển thị theo trạng thái của đơn hàng: Đang xử lý, Đã hoàn thành và Đã hủy

B3: Nhấn chọn Tab tên trạng thái để chuyển xem các đơn hàng theo trạng thái tương đương

B4: Bấm vào một đơn hàng để xem chi tiết đơn hàng đó

2.3.3 Module giao hàng Đặc tả use case Đăng nhập (Login)

− Mô tả: Cho phép đăng nhập tài khoản

− Actor: Nhân viên giao hàng (Shipper)

B2: Tài xế nhập số điện thoại đã cung cấp cho admin và bấm đăng nhập B3: Hệ thống chuyển sang màn hình nhập mã OTP 6 số

B4: Tài xế nhận mã OTP qua SMS số điện đăng nhập và nhập OTP vào input B5: Nhập OTP bấm xác nhận để thực hiện đăng ký

1 Nếu nhập mã OTP không đúng sẽ báo lỗi và nhập lại

2 Nếu nhập mã OTP đúng sẽ chuyển sang màn hình chính Đặc tả use case Nhận đơn hàng mới

− Mô tả: Nhận đơn hàng mới đang chờ giao hàng

− Actor: Nhân viên giao hàng (Shipper)

B1: Mở màn hình nhận đơn hàng mới

B2: Đợi đơn hàng mới hoặc chọn đơn đã có sẵn

B3: Bấm chọn vào đơn hàng để nhận đơn

1 Thông báo nhận đơn thành công

2 Thông báo nhận đơn thất bại (vì đơn hàng đã bị nhận trước hoặc hủy) Đặc tả use case Hiển thị đơn hàng đang giao

− Mô tả: Xem cách đơn hàng đang giao

− Actor: Nhân viên giao hàng (shipper)

B2: Chọn Đơn đang giao để xem danh sách các đơn đang giao

− Hậu điều kiện: Không Đặc tả use case Đổi trạng thái đơn hàng

− Mô tả: Đổi trạng thái của đơn hàng đang giao

B2: Chọn Đơn đang giao để xem danh sách các đơn đang giao

B3: Chọn vào một đơn đang giao

B4: Chọn trạng thái mới cho đơn

B5: Nếu đã giao đơn, cần chụp ảnh xác nhận đã giao

B6: Thông báo trạng thái cập nhật

− Hậu điều kiện: Không Đặc tả use case Hiển thị lịch sử đơn hàng đã giao

− Mô tả: Xem lịch sử đơn hàng đã giao

B2: Chọn Đơn đã giao để xem danh sách các đơn đã giao

− Hậu điều kiện: Không Đặc tả use case Yêu cầu rút tiền từ ví

− Mô tả: Yêu cầu rút tiền từ ví

B1: Vào màn hình Tài khoản

B2: Bấm nút yêu cầu rút tiền bên số tiền trong ví

B3: Nhập số tiền cần rút, phải đảm bảo mức tối thiểu

B4: Bấm Rút tiền để gửi yêu cầu rút tiền

1 Nếu số tiền trong ví không có đủ số tiền cần rút hoặc đã có gửi yêu cầu rút trước đó, thông báo lỗi Đặc tả use case Hiển thị lịch sử yêu cầu rút tiền

− Mô tả: Xem lịch sử yêu cầu rút tiền

B1: Vào màn hình Tài khoản

B2: Cuộn xuống để xem lịch sử các yêu cầu rút tiền

2.3.4 Module quản trị Đặc tả use case Đăng nhập (Login)

− Mô tả: Cho phép nhân viên đăng nhập

B1: Hệ thống ở màn hình đăng nhập

B2: Nhập username và mật khẩu và bấm đăng nhập

B3: Hệ thống trả về thông báo thành công và mở màn hình trang chủ

1 Nếu username hoặc mật khẩu không chính xác, sẽ có thông báo Tài khoản hoặc mật khẩu không chính xác và yêu cầu nhập lại tài khoản Đặc tả use case Quản lý sản phẩm (Manage product)

− Mô tả: Cho phép Admin quản lý sản phẩm

B1: Ở bên sidebar, mở rộng tab Product và chọn Product list

B2: Màn hình danh sách sản phẩm với phân trang

B3: Click nút New để mở dialog tạo product mới

B4: Click vào icon edit ở cuối dòng để mở trang chỉnh sửa product

B5: Click vào icon delete ở cuối dòng để xóa (xóa mềm)

− Tiền điều kiện: Các input khi tạo hoặc sửa product sẽ được validate, nếu không hợp lệ sẽ có text lỗi dưới input

− Hậu điều kiện: Khi xóa sẽ mở dialog confirm có xóa hay không Đặc tả use case Quản lý loại sản phẩm (Manage product category)

− Mô tả: Cho phép Admin quản lý loại sản phẩm

B1: Ở bên sidebar, mở rộng tab Product và chọn Product category

B2: Màn hình danh sách loại sản phẩm với phân trang

B3: Click nút New để mở dialog tạo loại sản phẩm mới

B4: Click vào icon edit ở cuối dòng để mở trang chỉnh sửa loại sản phẩm

− Tiền điều kiện: Các input khi tạo hoặc sửa loại sản phẩm sẽ được validate, nếu không hợp lệ sẽ có text lỗi dưới input

− Hậu điều kiện: Khi xóa sẽ mở dialog confirm có xóa hay không Đặc tả use case Quản lý tùy chọn sản phẩm (Manage product option)

− Mô tả: Cho phép Admin quản lý tùy chọn sản phẩm

B1: Ở bên sidebar, mở rộng tab Product và chọn Product option

B2: Màn hình danh sách tùy chọn sản phẩm với phân trang

B3: Click nút New để mở dialog tạo tùy chọn sản phẩm mới

B4: Click vào icon edit ở cuối dòng để mở trang chỉnh sửa tùy chọn sản phẩm B5: Click vào icon delete ở cuối dòng để xóa (xóa mềm)

− Tiền điều kiện: Các input khi tạo hoặc sửa tùy chọn sản phẩm sẽ được validate, nếu không hợp lệ sẽ có text lỗi dưới input

− Hậu điều kiện: Khi xóa sẽ mở dialog confirm có xóa hay không Đặc tả use case Quản lý cửa hàng (Manage store)

− Mô tả: Cho phép Admin quản lý cửa hàng

B1: Ở bên sidebar, mở rộng tab Store

B2: Màn hình danh sách cửa hàng với phân trang

B3: Click nút New để mở dialog tạo cửa hàng mới

B4: Click vào icon edit ở cuối dòng để mở trang chỉnh sửa cửa hàng

− Tiền điều kiện: Các input khi tạo hoặc sửa cửa hàng sẽ được validate, nếu không hợp lệ sẽ có text lỗi dưới input

− Hậu điều kiện: Khi xóa sẽ mở dialog confirm có xóa hay không Đặc tả use case Quản lý thành viên (Manage member)

− Mô tả: Cho phép Admin quản lý thành viên

B1: Ở bên sidebar, mở rộng tab Member

B2: Màn hình danh sách thành viên với phân trang

− Hậu điều kiện: Khi xóa sẽ mở dialog confirm có xóa hay không Đặc tả use case Quản lý cấp bậc (Manage rank)

− Mô tả: Cho phép Admin quản lý cấp bậc

B1: Ở bên sidebar, mở rộng tab Member và chọn Member rank

B2: Màn hình danh sách cấp bậc với phân trang

B3: Click nút New để mở dialog tạo cấp bậc mới

B4: Click vào icon edit ở cuối dòng để mở trang chỉnh sửa cấp bậc

− Tiền điều kiện: Các input khi tạo hoặc sửa cấp bậc sẽ được validate, nếu không hợp lệ sẽ có text lỗi dưới input

5 Để xóa cần không có thành viên nào thuộc cấp bậc đó để

6 Khi xóa sẽ mở dialog confirm có xóa hay không Đặc tả use case Quản lý ưu đãi (Manage voucher)

− Mô tả: Cho phép Admin quản lý ưu đãi

B1: Ở bên sidebar, mở rộng tab Voucher

B2: Màn hình danh sách ưu đãi với phân trang

B3: Click nút New để mở dialog tạo ưu đãi mới

B4: Click vào icon edit ở cuối dòng để mở trang chỉnh sửa ưu đãi

B6: Click vào nút Publish để gán ưu đãi cho thành viên

− Tiền điều kiện: Các input khi tạo hoặc sửa ưu đãi sẽ được validate, nếu không hợp lệ sẽ có text lỗi dưới input

− Hậu điều kiện: Khi xóa sẽ mở dialog confirm có xóa hay không Đặc tả use case Quản lý chương trình ưu đãi (Manage promotion)

− Mô tả: Cho phép Admin quản lý chương trình ưu đãi

B1: Ở bên sidebar, mở rộng tab Promotion

B2: Màn hình danh sách chương trình ưu đãi với phân trang

B3: Click nút New để mở dialog tạo chương trình ưu đãi mới

B4: Click vào icon edit ở cuối dòng để mở trang chỉnh sửa chương trình ưu đãi

B6: Click vào nút Publish để gán chương trình ưu đãi cho thành viên

− Tiền điều kiện: Các input khi tạo hoặc sửa chương trình ưu đãi sẽ được validate, nếu không hợp lệ sẽ có text lỗi dưới input

− Hậu điều kiện: Khi xóa sẽ mở dialog confirm có xóa hay không Đặc tả use case Quản lý đơn hàng (Manage order)

− Mô tả: Cho phép Admin quản lý đơn hàng

B1: Ở bên sidebar, mở rộng tab Order history

B2: Màn hình danh sách lịch sử đơn hàng theo trạng thái đơn hàng

B3: Cập nhật trạng thái đơn hàng bằng cách chọn trong select box của đơn hàng

LƯỢC ĐỒ SEQUENCE

Lược đồ mô tả luồng hoạt động các chức năng chính của hệ thống:

2.4.1 Đặt hàng giao tận nơi

Thanh toán bằng tiền mặt

Giải thích các bước chạy của chương trình:

− Sau khi thêm sản phẩm vào giỏ và bấm đặt hàng, app đặt hàng của Thành viên gọi API tạo đơn hàng đến server

− Server lấy từ database thông tin các sản phẩm, ưu đãi, tùy chọn trong giỏ hàng để xác nhận dữ liệu đơn hàng có đúng đắn không

− Nếu dữ liệu đơn hàng đúng đắn, thực hiện tính toán lại các số tiền và lưu lại vào database

− Trả response về cho ứng dụng thành viên khi hoàn tất lưu đơn hàng

− Đồng thời, gửi socket đến ứng dụng cửa hàng và ứng dụng giao hàng theo thời gian thực để cửa hàng và tài xế biết có đơn mới

− Tài xế nhận đơn hàng bằng cách gọi API đến server, server kiểm tra tình trạng đơn hàng để xác nhận chưa ai nhận và lưu thông tin tài xế vào đơn hàng

− Sau khi lưu thành công gửi socket đến các tài xế khác để xóa đơn hàng đó khỏi hàng đợi Gửi socket đến cửa hàng để biết đã có Gửi socket đến ứng dụng thành viên để thông báo trạng thái đơn hàng

− Khi tài xế cập nhật trạng thái đơn đã giao thành công, cửa hàng xác nhận đơn đã thành công và cập nhật trạng thái đơn đã hoàn tất và lưu vào database Gửi socket đến ứng dụng Thành viên trạng thái mới

Hình 9 Sequence diagram - Đặt hàng giao về thanh toán bằng tiền mặt

Hình 10 Sequence diagram - Đặt hàng giao về thanh toán bằng Momo

− Người dùng yêu cầu thanh toán Momo và gọi API đến server

− Server request đến Momo tạo đơn thanh toán với số tiền của đơn hàng, server lưu yêu cầu thanh toán trả về từ Momo và response lại cho thành viên đường dẫn thanh toán

− Khi người dùng thanh toán thành công, Momo gọi 1 api IPN được cung cấp trước đó đến server để cập nhật lại tình trạng thanh toán của đơn hàng

− Đồng thời, gửi socket đến ứng dụng cửa hàng và ứng dụng giao hàng theo thời gian thực để cửa hàng và tài xế biết có đơn mới

− Tài xế nhận đơn hàng bằng cách gọi API đến server, server kiểm tra tình trạng đơn hàng để xác nhận chưa ai nhận và lưu thông tin tài xế vào đơn hàng

− Sau khi lưu thành công gửi socket đến các tài xế khác để xóa đơn hàng đó khỏi hàng đợi Gửi socket đến cửa hàng để biết đã có Gửi socket đến ứng dụng thành viên để thông báo trạng thái đơn hàng

− Khi tài xế cập nhật trạng thái đơn đã giao thành công, cửa hàng xác nhận đơn đã thành công và cập nhật trạng thái đơn đã hoàn tất và lưu vào database Gửi socket đến ứng dụng Thành viên trạng thái mới

Hình 11 Sequence diagram - Đặt hàng đến cửa hàng lấy

− Người dùng yêu cầu thanh toán Momo và gọi API đến server

− Server request đến Momo tạo đơn thanh toán với số tiền của đơn hàng, server lưu yêu cầu thanh toán trả về từ Momo và response lại cho thành viên đường dẫn thanh toán

− Khi người dùng thanh toán thành công, Momo gọi 1 api IPN được cung cấp trước đó đến server để cập nhật lại tình trạng thanh toán của đơn hàng

− Đồng thời, gửi socket đến ứng dụng cửa hàng theo thời gian thực để cửa hàng biết có đơn mới

− Sau đó khi cửa hàng cập nhật trạng thái mới, server sẽ cập nhật vào database và gửi socket đến cho thành viên biết trạng thái đơn đã cập nhật

2.4.3 Mua hàng tại cửa hàng

Hình 12 Sequence diagram - Mua tại cửa hàng

XÂY DỰNG ỨNG DỤNG

THIẾT KẾ GIAO DIỆN

Hình 15 Code mẫu định nghĩa model cho collection products

3.2.1 Giao diện ứng dụng Thành viên

Hình 16 Member app - Danh sách sản phẩm Hình 17 Member app – Thêm hàng vào giỏ

Hình 18 Member app - Danh sách cửa hàng Hình 19 Member app - Định vị cửa hàng

Hình 20 Member app - Màn hình thành viên Hình 21 Member app - Màn hình ưu đãi

Hình 22 Member app - Màn hình đổi ưu đãi Hình 23 Member app - Màn hình giỏ hàng

Hình 24 Member app - Màn hình chọn địa chỉ Hình 25 Member app - Màn hình ghim địa chỉ

Hình 26 Member app - Đơn chưa thanh toán Hình 27 Member app - Thanh toán Momo

Hình 28 Member app - Đơn đã thanh toán Hình 29 Member app - Chi tiết đơn hàng

Hình 30 Member app - Lịch sử đơn hàng Hình 31 Member app - Đơn hàng đã hoàn tất

3.2.2 Giao diện ứng dụng Bán hàng

Hình 32 Sale app - Màn hình đăng nhập cửa hàng

Hình 33 Sale app – Trang chủ

Hình 34 Sale app - Thêm sản phẩm vào giỏ hàng

Hình 35 Sale app - Giỏ hàng

Hình 36 Sale app - Nhận đơn online và danh sách đơn của cửa hàng

Hình 37 Sale app - Tìm kiếm thành viên

3.2.3 Giao diện ứng dụng Giao hàng

Hình 38 Shipper app - Tài xế chọn vị trí Hình 39 Shipper app - Tài xế ghim vị trí

Hình 40 Shipper app - Đơn hàng đang chờ Hình 41 Shipper app - Chi tiết một đơn hàng

Hình 42 Shipper app - Chỉ đường tài xế giao hàng trong app

Hình 43 Shipper app - Chỉ đường tài xế giao hàng bằng google map

Hình 44 Shipper app - Chụp ảnh xác nhận Hình 45 Shipper app - Gửi ảnh xác nhận

3.2.4 Giao diện ứng dụng Quản trị

Trang chủ – Màn hình thống kê

Hình 48 Admin app - Màn hình trang chủ - Chức năng thống kê

Hình 46 Shipper app - Thông tin cá nhân Hình 47 Shipper app - Lịch sử rút tiền

Màn hình quản lý sản phẩm

Hình 49 Admin app - Màn hình danh sách sản phẩm

Hình 50 Admin app - Màn hình danh sách phân loại sản phẩm

Hình 51 Admin app - Màn hình danh sách tùy chọn của sản phẩm

Màn hình quản lý cửa hàng

Hình 52 Admin app - Màn hình danh sách cửa hàng

Hình 53 Admin app - Màn hình danh sách nhân viên

Hình 54 Admin app - Màn hình danh sách thành viên

Hình 55 Admin app - Màn hình danh sách cấp bậc thành viên

Hình 56 Admin app - Màn hình danh sách đơn hàng

Hình 57 Admin app - Màn hình danh sách ưu đãi

Hình 58 Admin app - Màn hình danh sách chương trình đổi ưu đãi

Hình 59 Admin app - Màn hình danh sách đối tác ưu đãi

Hình 60 Admin app - Danh sách tài khoản admin

Hình 61 Admin app - Màn hình phân quyền tài khoản

Hình 62 Admin app - Màn hình danh sách tài khoản bán hàng

Hình 63 Admin app - Màn hình danh sách tài khoản nhân viên giao hàng

3.3 HƯỚNG DẪN CÀI ĐẶT HỆ THỐNG

3.3.1 Cài đặt và chạy server back-end

− NodeJS từ phiên bản 16 ( node >= 16.x )

− PNPM từ phiên bản 8 ( pnpm >= 8.x )

B1: Đầu tiên cần cài đặt NodeJS nếu chưa cài: https://nodejs.org/en/download

B2: Cài đặt pnpm từ npm bằng một trong các cách sau: https://pnpm.io/installation

B3: Clone source code về từ repository: https://github.com/VT-Store-Manager/vt-api.git

B4: Cài đặt package với pnpm bằng lệnh: pnpm install

B5: Hệ thống gồm 3 server backend, để build chương trình của cả 3 server chạy lệnh: pnpm build-all

B6: Chạy từng ứng dụng bằng các lệnh tương ứng sau đây:

− Server quản trị: pnpm start:prod:admin

Hình 64 Terminal server quản trị chạy thành công

− Server bán hàng: pnpm start:prod:sale

Hình 65 Terminal server bán hàng chạy thành công

− Server đặt hàng: pnpm start:prod:client

Hình 66 Terminal server đặt hàng chạy thành công, kết nối socket thất bại

(socket của server đặt hàng vẫn chưa kết nối được với socket server bên server bán hàng)

B7: Nếu cần kiểm tra tính năng realtime và thanh toán Momo ở local, cần thực hiện tạo tài khoản Ngrok, tạo một tên miền cố định trên tài khoản Ngrok cá nhân và cấu hình ở local: Tạo tài khoản Ngrok và hướng dẫn cấu hình (vì cần dùng một domain đã host để thực hiện toàn bộ chức năng của thanh toán Momo)

B8: Thêm cấu hình vào file env : SALE_URL=

Với your_ngrok_domain là domain bạn tạo trên Ngrok

Hình 67 Tạo một domain tĩnh cho Ngrok cá nhân Ở ví dụ ở ảnh trên, bạn cần thêm SALE_URL=tops-mentally-toad.ngrok-free.app vào file env

B8: Cần tắt và chạy lại server bán hàng và sever đặt hàng để tải lại env mới, sau đó host server bán hàng bằng ngrok để có thể realtime và thanh toán Momo hoàn tất

− Server bán hàng: pnpm start:prod:sale

− Host server bán hàng bằng Ngrok: pnpm ngrok:sale

Hình 68 Host server bán hàng lên domain tĩnh đã config bằng Ngrok

− Server đặt hàng: pnpm start:prod:client

Hình 69 Terminal chạy server đặt hành và kết nối socket thành công

3.3.2 Cài đặt và chạy web admin

− NodeJS từ phiên bản 16 ( node >= 16.x )

− PNPM từ phiên bản 8 ( pnpm >= 8.x )

B1: Đầu tiên cần cài đặt NodeJS nếu chưa cài: https://nodejs.org/en/download

B2: Cài đặt pnpm từ npm bằng một trong các cách sau: https://pnpm.io/installation

B3: Clone source code về từ repository:

Khóa luận tốt nghiệp Công nghệ phần mềm 75 https://github.com/VT-Store-Manager/vt-admin.git

B4: Cài đặt package với pnpm bằng lệnh: pnpm install

B5: Build chương trình bằng lệnh: pnpm build

B6: Sau khi build thành công, chạy lệnh: pnpm preview

Hình 70 Terminal chạy web quản trị thành công

3.3.3 Cài đặt và chạy các ứng dụng flutter

− Thiết bị chạy ứng dụng có thể là máy ảo hoặc máy thật cho cả 3 app: o Thiết bị chạy Android 5.0 (API level 21) trở lên o Thiết bị chạy IOS 11.0 trở lên

− IDE khuyên dùng là Android Studio https://developer.android.com/studio/install

Cài đặt: Cần cài đặt Flutter nếu chưa cài đặt https://docs.flutter.dev/get- started/install

Chạy ứng dụng: Đầu tiên ta cần kiểm tra xem flutter đã được cấu hình đúng để chạy trên các nền tảng mà chúng ta mong muốn hay chưa bằng cách sử dụng lệnh: flutter doctor

Hình 71 Kiểm tra cấu hình các nền tảng để chạy Flutter

Tiếp theo cần tiến hành cài đặt các package bằng cách vào file pubspect.yaml và chọn Pub get hoặc sử dụng lệnh flutter pub get

Hình 72 Cài package bằng tính năng sẵn của IDE

Hình 73 Terminal kết quả cài package Flutter

Chọn thiết bị để chạy ứng dụng bằng cách chọn device trên thanh công cụ (Android Studio) và sau đó chọn biểu tượng play để chạy ứng dụng Hoặc cũng có thể sử dụng

Khóa luận tốt nghiệp Công nghệ phần mềm 77 lệnh flutter run -d Ta có thể xem thông tin devices đang kết nối thông qua lệnh flutter devices

Hình 74 Chạy app Flutter bằng tính năng sẵn của IDE

Hình 75 Chọn thiết bị chạy app Flutter bằng tính năng của IDE

Hình 76 Terminal kiểm tra thông tin các device để chạy app Flutter

Hình 77 Terminal chạy app flutter với ID của device

KẾT LUẬN

ƯU NHƯỢC ĐIỂM CỦA ĐỀ TÀI

− Ứng dụng có tính luồng hoạt động giống với ứng dụng thực tế

− Ứng dụng cung cấp đầy đủ chức năng cho quy trình mua bán trực tuyến và tại cửa hàng

− Ứng dụng người dùng có giao diện đẹp, thân thiện với người dùng

− Ngoài bán hàng, hệ thống còn có những tính năng khác thu hút, giữ chân người dùng

− Ứng dụng có tích hợp hoạt động theo thời gian thực giúp trải nghiệm mua bán tốt hơn

− Ứng dụng admin vẫn chưa hoàn thiện dẫn tới admin chưa thao tác quản lý được hoàn toàn

− Giao diện ứng dụng bán hàng và giao hàng còn đơn giản

− Chức năng giao hàng vẫn còn nhiều khuyết điểm: tính toán khoảng cách, theo dõi tài xế, logic tính tiền, logic nhận đơn

HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI

− Mở rộng quy mô quản lý cho các cửa hàng như thêm quản lý kho/nguyên liệu, quản lý nhân sự

− Sau khi thêm nhiều quản lý hơn thì hệ thống có thể thống kê chi tiết hơn số tiền thu vào và chi ra

− Cải thiện logic giao hàng bằng cách thay thế bằng dịch vụ thứ 3 để giao hàng như GHN, Lalamove,…

− Tích hợp thêm một số phương thức thanh toán online khác như ZaloPay, VnPay hoặc thanh toán quốc tế bằng Paypal, thẻ quốc tế Visa/Master

Tiêu đề	Xây dựng hệ thống mua bán cho cửa hàng cafe
Tác giả	Nguyễn Quang Vinh, Phan Trung Tín
Người hướng dẫn	ThS. Nguyễn Minh Đạo
Trường học	Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ Thông tin
Thể loại	Khóa luận tốt nghiệp
Năm xuất bản	2023
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	97
Dung lượng	12,02 MB