Xây dựng ứng dụng bán hàng trên thiết bị di động sử dụng flutter framework g

CƠ SỞ LÝ THUYẾT

FLUTTER

tìm hiểu và triển khai gặp nhiều khó khăn

Nodejs không phải là một ngôn ngữ quá mới nhưng do thành viên trong nhóm chưa biết nhiều về ngôn ngữ này nên việc code vẫn chưa được tốt

Tìm hiểu và đọc các tài liệu cũng như video về các ngôn ngữ này nhiều hơn

2 Chưa thành thục việc truy vấn cũng như truy xuất dữ liệu từ mongoDb Đọc doc cũng như các bài giảng trên web

Ba thành viên trong nhóm vẫn còn thiếu kinh nghiệm, dẫn đến khó khăn trong việc sửa lỗi và viết mã, gây ra sự chậm trễ so với kế hoạch.

Dành thời gian tìm hiểu và code nhiều hơn

4 Khả năng sử dụng công cụ lưu trữ cũng như quản lý (github) code vẫn còn yếu

Tìm hiểu các câu lệnh CLI hoặc sử dụng các App hổ trợ như git desktop

5 Các thành viên trong nhóm đã đi làm nên vẫn còn khá hạn chế về thời gian để tìm hiểu và xây dựng ứng dụng

Sắp xếp lịch trình cũng như thời gian nghỉ ngơi hợp lí

DANH MỤC HÌNH VẼ I DANH MỤC BẢNG IV

KẾ HOẠCH THỰC HIỆN VI

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 2

1.2 Lý do sử dụng Flutter là gì? 2

1.3 Ưu điểm và nhược điểm của Flutter 2

2.1 Khái niệm về ngôn ngữ lập trình Dart 3

2.2 Tại sao lại chọn ngôn ngữ Dart 3

2.3 Vài nét cơ bản về Dart 3

4.2 Lịch sử ra đời 4

7.4 Nhóm công cụ phát triển 6

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 7

1.7 App Thế giới di động 13

2.2 Yêu cầu phi chức năng 15

3 MÔ HÌNH HÓA YÊU CẦU 16

3.2 Mô tả chi tiết Usecase 18

CHƯƠNG 3: THIẾT KẾ ỨNG DỤNG 39

3.1 Lược đồ tuần tự Usecase Quản lí thông tin giỏ hàng 41

3.2 Lược đồ tuần tự Usecase Xem sản phẩm 42

3.3 Lược đồ tuần tự Usecase Xem thông tin chi tiết sản phẩm 43

3.4 Lược đồ tuần tự Usecase Lấy sản phẩm yêu thích 43

3.5 Lược đồ tuần tự Usecase Khôi phục mật khẩu 44

3.6 Lược đồ tuần tự Usecase Đăng nhập 45

3.7 Lược đồ tuần tự Usecase Đăng ký 46

3.8 Lược đồ tuần tự Usecase Đặt hàng 47

3.9 Lược đồ tuần tự Usecase Tìm kiếm sản phẩm 48

3.10 Lược đồ tuần tự Usecase Thay đổi mật khẩu 49

3.11 Lược đồ tuần tự Usecase Thêm sản phẩm – Admin 50

3.12 Lược đồ tuần tự Usecase Sửa sản phẩm – Admin 51

3.13 Lược đồ tuần tự Usecase Xóa sản phẩm – Admin 52

3.14 Lược đồ tuần tự Usecase Xác nhận đơn hàng – Admin 53

3.15 Lược đồ tuần tự Usecase Thống kê số lượng đơn hàng, sản phẩm đã bán – Admin 54

3.16 Lược đồ tuần tự Usecase Quản lí khách hàng - Admin 55

3.17 Lược đồ tuần tự Usecase Xem thông tin blog 55

3.18 Lược đồ tuần tự Usecase Đánh giá sản phẩm 56

3.19 Lược đồ tuần tự Usecase Chính sửa thông tin (Có sửa ảnh) 56

3.20 Lượt đồ tuần tự Usecase Thanh toán 57

4 THIẾT KẾ CƠ SỞ DỮ LIỆU 58

4.1 Lược đồ cơ sở dữ liệu 58

4.2 Chi tiết bảng dữ liệu 58

5.1 Giao diện trên ứng dụng Android (Khách hàng) 76

5.2 Giao diện trên Website (Quản trị viên) 107

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 122

2.1 Test chức năng đăng nhập của khách hàng 124

2.2 Test chức năng đăng ký của khách hàng 125

2.3 Test chức năng đăng xuất của khách hàng 125

2.4 Test chức năng tìm kiếm sản phẩm theo thương hiệu 126

2.5 Testcase chức năng tìm kiếm sản phẩm theo tên sản phẩm 126

2.6 Testcase chức năng cập nhật thông tin cá nhân 127

2.7 Testcase chức năng thêm số lượng sản phẩm tại giỏ hàng 127

2.8 Testcase chức năng cập nhật số lượng sản phẩm bằng không trong giỏ hàng 128 2.9 Testcase chức năng xóa sản phẩm khỏi giỏ hàng 128

2.10 Testcase chức năng Hủy đơn hàng đã đặt 129

2.11 Testcase chức năng Xem thông tin chi tiết blog 130

2.12 Testcase chức năng Xem các sản phẩm yêu thích 130

Hình 2.1: Giao diện App Tiki 7

Hình 2.2: Giao diện App Shopee 8

Hình 2.3: Giao diện app Chợ Tốt 9

Hình 2.4: Giao diện App Adayroi 10

Hình 2.5: Giao diện app Alibaba 11

Hình 2.6: Giao diện App Lazada 12

Hình 2.7: Giao diện app Thế giới di dộng 13

Hình 2.8: Giao diện app Sendo 14

Hình 3.1: Hình thiết kế tổng quan phần mềm 39

Hình 3.3:Lược đồ tuần tự Usecase Quản lí thông tin giỏ hàng 41

Hình 3.4: Lược đồ tuần tự Usecase Xem sản phẩm 42

Hình 3.6: Lược đồ tuần tự Usecase Chọn sản phẩm yêu thích 43

Hình 3.7: Lược đồ tuần tự Usecase Khôi phục mật khẩu 44

Hình 3.8: Lược đồ tuần tự Usecase Đăng nhập 45

Hình 3.9: Lược đồ tuần tự Usecase Đăng ký 46

Hình 3.10: Lược đồ tuần tự Usecase Đặt Hàng 47

Hình 3.12: Lược đồ tuần tự Usecase Thay đổi mật khẩu 49

Hình 3.13: Lược đồ tuần tự Usecase Thêm sản phẩm – Admin 50

Hình 3.14: Lược đồ tuần tự Usecase Sửa sản phẩm – Admin 51

Hình 3.15: Lược đồ tuần tự Usecase Xóa sản phẩm - Admin 52

Hình 3.16: Lược đồ tuần tự Usecase Xác nhận đơn hàng – Admin 53

Hình 3.17: Lược đồ tuần tự Usecase Thống kê số lượng đơn hàng – Admin 54

Hình 3.18: Lược đồ tuần tự Usecase Thống kê số lượng sản phẩm đã bán – Admin 54

Hình 3.19: Lược đồ tuần tự Usecase Quản lí khách hàng – Admin 55

Hình 3.20: Lược đồ tuần tự Usecase Xem thông tin blog 55

Hình 3.21:Lược đồ tuần tự Usecase Đánh giá sản phẩm 56

Hình 3.22: Lược đồ tuần tự Usecase Chính sửa thông tin (Có sửa ảnh) 56

Hình 3.23: Lược đồ tuần tự Usecase Thanh toán 57

Hình 3.24: Lược đồ cơ sở dữ liệu 58

Hình 3.25: Màn hình đầu của ứng dụng 80

Hình 3.26: Màn hình Đăng nhập 81

Hình 3.27: Màn hình Đăng ký 82

Hình 3.28: Màn hình Khôi phục mật khẩu 83

Hình 3.29: Màn hình Xác nhận mã Otp 84

Hình 3.30: Màn hình Thay đổi mật khẩu (Khôi phục mật khẩu) 85

Hình 3.32: Màn hình Chi tiết thông tin sản phẩm 88

Hình 3.33: Màn hình Giỏ hàng 89

Hình 3.34: Màn hình Thanh toán 91

Hình 3.36: Màn hình Chọn phương thức thanh toán 93

Hình 3.38: Màn hình Hóa đơn 95

Hình 3.39: Màn hình Chi tiết đơn hàng 96

Hình 3.40: Màn hình Danh sách sản phẩm yêu thích 97

Hình 3.41: Màn hình Thông tin chi tiết tài khoản 98

Hình 3.42: Màn hình Thay đổi mật khẩu 99

Hình 3.44: Màn hình Chi tiết Blog 101

Hình 3.45: Màn hình Địa chỉ 102

Hình 3.46: Màn hình Thêm địa chỉ mới 103

Hình 3.47: Màn hình Chỉnh sửa địa chỉ 105

Hình 3.48: Màn hình Đánh giá 106

Hình 3.49: Màn hình Xóa địa chỉ 106

Hình 3.51: Trang Thay đổi mật khẩu 109

Hình 3.52: Trang Đổi mật khẩu 110

Hình 3.53: Trang Quản lí blog 112

Hình 3.54: Trang Cập nhật hồ sơ 113

Hình 3.55: Trang Quản lí đơn hàng 114

Hình 3.56: Trang Quản lí phiếu đánh giá 115

Hình 3.57: Trang Quản lí khách hàng 115

Hình 3.58: Trang Quản trị viên 116

Hình 3.59: Trang Quản lí sản phẩm 116

Hình 3.60: Trang Tạo-Sửa Blog 117

Hình 3.61: Trang Tạo-Sửa phiếu giảm giá 118

Hình 3.62: Trang Tạo-Sửa sản phẩm 119

Hình 3.63: Trang Tạo-Sửa thương hiệu 120

Hình 4.1: Soure code sau khi đã tải về 122

Hình 4.2: Soure code Nuxt + Vue sau khi đã tải về 123

Hình 4.3: Soure code NodeJs + Express sau khi đã tải về 124

Hình 4.4: Testcase đăng nhập của khách hàng 125

Hình 4.5: Testcase đăng ký của khách hàng 125

Hình 4.6: Testcase đăng xuất của khách hàng 126

Hình 4.7: Testcase tìm kiếm sản phẩm theo thương hiệu 126

Hình 4.8: Testcase tìm kiếm sản phẩm theo tên sản phẩm 127

Hình 4.9: Testcase cập nhật thông tin cá nhân 127

Hình 4.10: Testcase thêm số lượng sản phẩm tại giỏ hàng 128

Hình 4.11: Testcase cập nhật số lượng sản phẩm bằng không trong giỏ hàng 128

Hình 4.12: Testcase xóa sản phẩm khỏi giỏ hàng 129

Hình 4.13: Testcase hủy đơn hàng đã đặt 130

Hình 4.14: Testcase Xem thông tin chi tiết blog 130

Hình 4.15: Testcase Xem các sản phẩm yêu thích 130

Bảng 2.1: Mô tả Usecase Đăng nhập 18

Bảng 2.2: Mô tả Usecase Đăng ký 19

Bảng 2.3: Mô tả Usecase Đăng Xuất 20

Bảng 2.4: Mô tả Usecase Xem sản phẩm 21

Bảng 2.5: Mô tả Usecase Tìm kiếm sản phẩm 22

Bảng 2.6: Mô tả Usecase Khôi phục mật khẩu 23

Bảng 2.7: Mô tả Usecase Sửa thông tin cá nhân 24

Bảng 2.8: Mô tả Usecase Quản lý thông tin giỏ hàng 25

Bảng 2.9: Mô tả Usecase Xem thông tin chi tiết sản phẩm 27

Bảng 2.10: Mô tả Usecase Lọc các sản phẩm yêu thích 27

Bảng 2.11: Mô tả Usecase Đổi mật khẩu 28

Bảng 2.12: Mô tả Usecase Xem thông tin đơn hàng 29

Bảng 2.13: Mô tả Usecase Đặt hàng 30

Bảng 2.14: Mô tả Usecase Quản lí sản phẩm 31

Bảng 2.15: Mô tả Usecase Quản lí voucher 32

Bảng 2.16: Mô tả Usecase Quản lí thống kê 33

Bảng 2.17: Mô tả Usecase Quản lí thông tin blog 34

Bảng 2.18: Mô tả Usecase Xem sản phẩm theo thương hiệu 36

Bảng 2.19: Mô tả Usecase Đánh giá sản phẩm 36

Bảng 2.20: Mô tả Usecase Quản lí đơn hàng 37

Bảng 3.1: Thông tin các trường dữ liệu bảng Account 58

Bảng 3.2:Thông tin các trường dữ liệu bảng About 60

Bảng 3.3: Thông tin các trường dữ liệu bảng Rates 62

Bảng 3.4: Thông tin các trường dữ liệu bảng Products 63

Bảng 3.5: Thông tin các trường dữ liệu bảng Vouchers 65

Bảng 3.6: Thông tin các trường dữ liệu bảng Addresses 66

Bảng 3.7: Thông tin các trường dữ liệu bảng Orders 68

Bảng 3.8 Thông tin các trường dữ liệu bảng Cart 70

Bảng 3.9.Thông tin các trường dữ liệu bảng Paypals 72

Bảng 3.10 Thông tin các trường dữ liệu bảng Companies 72

Bảng 3.11 Thông tin các trường dữ liệu bảng Blogs 73

Bảng 3.12 Mô tả màn hình của ứng dụng di dộng 76

Bảng 3.13 Bảng chi tiết các field màn trên màn hình 80

Bảng 3.14.Bảng chi tiết các field màn trên màn hình 81

Bảng 3.37 Mô tả màn hình của Web quản lí 107

Tuần Ngày Nhiệm vụ(Công việc dự kiến) Trạng thái Ghi chú

- Xác định chức năng của ứng dụng

- Thiết kế usecase và mô hình hóa yêu cầu

- Viết Scenario và vẽ Sequence

- Thiết kế cơ sở dữ liệu

4 07/03 – 13/03 - Tìm hiểu về Flutter cho Android và

- Tìm hiểu và học ngôn ngữ Dart để thực hiện phát triển Flutter Framework

- Tìm hiểu và tích hợp Firebase vào đồ án

- Tìm hiểu về Vue và Nuxtjs để xây dựng web quản lí

- Tìm hiểu Nodejs và MongoDb để xây dựng API

- Thiết kế giao diện người dùng trên figma

6 + 7 + 8 21/03 – 10/04 - Thiết kế giao diện người dùng trên ứng dụng di dộng

- Xây dựng một số API CRUD đơn giản và kết nối với cơ sở dữ liệu MongoDb

11/04 – 01/05 - Hoàn thiện việc xây dựng các API đơn giản

- Kết nối API với ứng dụng di dộng Đang thực hiện

12 + 13 02/05 – 15/05 - Xây dựng giao diện trang web

Admin và kết nối API cho trang web đó

14 + 15 16/05 – 29/05 - Phát triển thêm một số tính năng nâng cao trong việc thanh toán cũng như trải nghiệm của người dùng

16 + 17 30/5 – 12/06 - Kiểm thử chương trình và tiến hành tìm kiếm lỗi

- Sửa chữa các lỗi hiện đã tìm thầy

- Thực hiện viết các bug report

- Viết báo cáo cho đồ án

Giáo viên hướng dẫn (Ký và ghi rõ họ tên)

Tp Hồ Chí Minh, ngày 18 tháng 06 năm 2022

Người viết đề cương (Ký và ghi rõ họ tên)

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

Flutter là khung giao diện người dùng di động do Google phát triển, cho phép tạo ra các giao diện chất lượng cao trên cả Android và iOS một cách nhanh chóng Với tính năng mã nguồn mở và hoàn toàn miễn phí, Flutter trở thành lựa chọn lý tưởng cho các nhà phát triển ứng dụng.

Flutter là công cụ phát triển giao diện người dùng do Google cung cấp, cho phép tạo ra các ứng dụng hấp dẫn Nó hỗ trợ biên dịch nguyên bản cho nhiều nền tảng, bao gồm thiết bị di động, web và máy tính để bàn, tất cả từ một mã nguồn duy nhất.

Lập trình trên Flutter yêu cầu sử dụng ngôn ngữ Dart, được Google phát triển vào năm 2011 và đã trải qua nhiều cải tiến đáng kể trong thời gian gần đây.

1.2 Lý do sử dụng Flutter là gì?

Flutter sử dụng ngôn ngữ lập trình Dart, đây là ngôn ngữ nhanh, hướng đối tượng với nhiều tính năng hữu ích như Static Type, Generic, Isolate, Mixin

Các lý do sử dụng:

 UI đẹp mắt và có tính biểu cảm

 Có khả năng phát triển các ứng dụng thống nhất (Android và IOS)

 Tính năng phát triển nhanh chóng các ứng dụng di dộng

 Quá trình truy cập với nhiều tính năng và SDK native

1.3 Ưu điểm và nhược điểm của Flutter a Ưu điểm

 Sử dụng một dạng ngôn ngữ lập trình Dart vô cùng đơn giản và dễ học

 Phát triển các ứng dụng nhanh chóng và dễ dàng

 Các giao diện của người dùng đẹp, linh hoạt

 Hỗ trợ được rất nhiều widget khác nhau và các thư viện linh động

 Flutter sẽ được thể hiện ngay cùng trên một nền tảng hoàn toàn khác

 Hiệu năng làm việc cao, nhanh chóng b Nhược điểm

 Bộ render UI đã được nhóm phát triển viết lại hầu hết nên thường không còn liên quan tới UI đã có sẵn trong UI Framework native

Số lượng lập trình viên am hiểu về Dart còn hạn chế, dẫn đến rủi ro rằng sau khi hoàn thành khóa học, họ có thể bị ràng buộc vào việc sử dụng Dart trong phát triển ứng dụng di động.

 Một mô hình dữ liệu hoàn toàn mới nên việc học sẽ mất nhiều thời gian.

DART

2.1 Khái niệm về ngôn ngữ lập trình Dart

Dart là ngôn ngữ lập trình đa mục đích do Google phát triển và đã được công nhận là tiêu chuẩn Ngôn ngữ này được sử dụng để xây dựng các ứng dụng web, server, máy tính để bàn và thiết bị di động Dart là ngôn ngữ hướng đối tượng, xác định theo lớp, mã nguồn mở và miễn phí, phát triển trên GitHub Phiên bản hiện tại của Dart là 2.17.

2.2 Tại sao lại chọn ngôn ngữ Dart

 Một ngôn ngữ được tối ưu hóa cho client

Google đang nỗ lực phát triển một ngôn ngữ lập trình mới, vượt trội hơn Javascript, với khả năng hỗ trợ cả hai phương pháp biên dịch Just In Time (JIT) và Ahead of Time (AOT).

2.3 Vài nét cơ bản về Dart

- Dart là một ngôn ngữ thuần OOP (hướng đối tượng)

- Ngôn ngữ Dart giông giống Java, là cải tiến lên từ Javascript, cũng là hệ

C có thể cú pháp tương tự nhau.

NODEJS

Node.js là một nền tảng phần mềm lý tưởng cho việc phát triển các ứng dụng internet mở rộng, đặc biệt là máy chủ web Được xây dựng bằng JavaScript, Node.js áp dụng kỹ thuật điều khiển sự kiện và nhập/xuất không đồng bộ, giúp tối ưu hóa chi phí và nâng cao khả năng mở rộng của hệ thống.

Nền tảng này, được phát triển bởi Ryan Dahl vào năm 2009, là giải pháp lý tưởng cho các ứng dụng xử lý nhiều dữ liệu nhờ vào mô hình event-driven không đồng bộ.

 Hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

 Sử dụng JavaScript – một trong những ngôn ngữ lập trình dễ học

 Vừa có thể xây dụng backend và frontend

 NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ

 Có cộng đồng lớn và tích cực hỗ trợ nhau

 Cho phép phân luồng các file có kích thước lớn

 Không phù hợp với các tác vụ đòi hỏi nhiều CPU

 Không có khả năng mở rộng

 Khó thao tác với cơ sở dữ liệu Sql

 Cần có kiến thức chuyên môn tốt về JavaScript.

VUEJS

Vue.js là một framework linh hoạt, phổ biến trong việc xây dựng giao diện người dùng Khác với các framework nguyên khối khác, Vue được thiết kế để khuyến khích phát triển ứng dụng theo từng bước một, giúp việc phát triển trở nên dễ dàng hơn Khi kết hợp với các kỹ thuật hiện đại, Vue có khả năng đáp ứng mọi nhu cầu xây dựng ứng dụng phức tạp.

Vue được phát triển bởi Evan You, một kỹ sư tại Google, khi ông sử dụng Angular cho các dự án Ông đã nêu ra ý tưởng về việc tạo ra một framework nhẹ nhàng hơn bằng cách trích xuất những phần yêu thích từ Angular mà không cần các khái niệm bổ sung phức tạp Điều này đã dẫn đến sự ra đời của Vue vào đầu năm 2014, ngay lập tức thu hút sự chú ý trên HackerNew và Echo Js trong ngày đầu tiên phát hành.

NUXTJS

Nuxt.js là thư viện JavaScript mã nguồn mở và miễn phí, dựa trên Vue.js, Node.js, Webpack và Babel.js, lấy cảm hứng từ Next.js, một framework tương tự cho React.js Nuxt.js cung cấp tùy chọn triển khai gọi là nuxt generate, cho phép xây dựng trang web tĩnh cho ứng dụng Vue.js, mở ra cơ hội phát triển ứng dụng Web trên Microservices Bên cạnh đó, Nuxt.js còn tích hợp nhiều tính năng hữu ích cho việc phát triển ứng dụng, bao gồm hỗ trợ dữ liệu không đồng bộ, middleware và layouts, giúp tối ưu hóa trải nghiệm giữa client và server.

Nuxt.js bao gồm những framework sau để tạo ra một ứng dụng web:

MONGODB

MongoDB là một cơ sở dữ liệu NoSQL hướng tài liệu, giúp tránh cấu trúc dựa trên bảng của cơ sở dữ liệu quan hệ Thay vào đó, nó sử dụng BSON, một định dạng linh hoạt cho các tài liệu như JSON Với việc lưu trữ dữ liệu dưới dạng tài liệu JSON, mỗi collection trong MongoDB có thể chứa các kích cỡ và tài liệu khác nhau, cho phép truy vấn diễn ra nhanh chóng và hiệu quả.

MongoDB was first introduced by MongoDB Inc in October 2007 as part of the 10th generation of products, functioning as a PaaS (Platform as a Service) similar to Windows Azure and Google App Engine It transitioned to an open-source model in 2009.

 Cơ sở dữ liệu Nosql nên không có tính ràng buộc, toàn vẹn nên tính sẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ

 Dữ liệu được ghi đệm vào RAM, hạn chế truy cập vào ổ cứng nên tốc độ ghi, đọc cao

 Không ứng dụng được cho các mô hình giao dịch nào có yêu cầu độ chính xác cao do không có ràng buộc

 Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụng ngân hàng

Mọi thay đổi dữ liệu mặc định chưa được lưu xuống ổ cứng ngay lập tức, do đó, nguy cơ mất dữ liệu do mất điện đột ngột là rất cao.

FIREBASE

Firebase là dịch vụ cơ sở dữ liệu mạnh mẽ của Google, hoạt động trên nền tảng đám mây, giúp đơn giản hóa quy trình lập trình ứng dụng thông qua việc quản lý cơ sở dữ liệu hiệu quả.

Firebase cung cấp dịch vụ đa năng với bảo mật cao, hỗ trợ cả hai nền tảng Android và iOS Việc Flutter và Firebase đều do Google phát triển giúp chúng dễ dàng kết nối và tích hợp nhiều chức năng cũng như gói sẵn có.

7.2 Ưu điểm Firebase Ưu điểm nổi bật của Firebase:

 Có hổ trợ message và thông báo cho ứng dụng di dộng

 Tạo tài khoản và sử dụng dễ dàng

 Nhiều dịch vụ trong một nền tảng

 Là nơi lưu trữ dữ liệu tốt

 Có dữ liệu thời gian thực

 Tốc độ phát triển nhanh

 Có thể tạo các đăng nhập bằng Google, Facebook

 Tập trung vào phát triển giao diện người dùng

 Không phải tất cả các dịch vụ Firebase đều miễn phí và giá khá đắt, không ổn định

 Người dùng không có quyền truy cập mã nguồn

 Một số quốc gia chưa được hỗ trợ sử dụng

 Không hoạt động với cơ sở dữ liệu Sql

 Chỉ chạy trên Cloud của Google

7.4 Nhóm công cụ phát triển

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

KHẢO SÁT HIỆN TRẠNG

Hình 2.1: Giao diện App Tiki

 Giao diện đẹp, dễ nhìn

 Hiển thị hình ảnh trực quan và giá niêm yết của sản phẩm

 Có sự liên kết với các ví điện tử/internet banking khác nhau giúp đa dạng thanh toán

 Có chức năng quản lý các đơn hàng rất chi tiết (bao gồm các đơn đã thanh toán, đang xử lý, đang vận chuyển, đã giao và đã hủy)

 Có lưu lại thông tin các mặt hàng đã xem hoặc đã thích để dễ dàng tìm kiếm cho lần mua sau

 Sản phẩm khi cho vào giỏ hàng thì khi tiến hành mua phải mua toàn bộ, không có tính năng mua từng món trong giỏ hàng

 Khi lướt trong giao diện thì đôi lúc bị lag, không được mượt

Hình 2.2: Giao diện App Shopee

 Giao diện đẹp, dễ nhìn

 Hiển thị hình ảnh trực quan, giá niêm yết và kèm cả số lượng đã bán của sản phẩm

 Có thể mua từng món riêng có trong giỏ hàng của bản thân

 Có liên kết ví điện tử và internet banking giúp đa dạng thanh toán

 Có lưu lại thông tin các mặt hàng đã xem hoặc đã thích để dễ dàng tìm kiếm cho lần mua sau

Hệ thống quản lý đơn hàng cung cấp chức năng chi tiết, cho phép theo dõi tình trạng của các đơn hàng từ lúc chờ xác nhận, chờ lấy hàng, đang giao, đã giao, đã hủy cho đến hàng trả.

 Chỉ có một lựa chọn duy nhất khi thanh toán với ví điện tử (ví AirPay)

Hình 2.3: Giao diện app Chợ Tốt

 Giao diện đẹp, dễ nhìn, danh mục rõ ràng, dễ lựa chọn và tìm kiếm

 Danh mục chia ra theo lĩnh vực dễ nắm bắt và tiện lợi theo nhu cầu

 Hiển thị sản phẩm rõ ràng, giá cụ thể, thông tin chi tiết khá rõ ràng

 Hỗ trợ trao đổi giữa người bán và người mua tốt, dễ dàng, thuận lợi thông qua các chức năng gọi và trò chuyện messenger

 Có chức năng thông báo giúp người dùng cập nhật tin tức bán và mua

 Hỗ trợ đăng tin rao bán tiện lợi, dễ sử dụng

 Tin đăng dễ bị trôi

 Kiểm duyệt tin chưa tốt, dễ mất tin, tin ảo, giá ảo gây hoang mang

 Có hiện tượng trùng lặp không cho đăng tin khi trùng sản phẩm

Hình 2.4: Giao diện App Adayroi

 Giao diện dễ nhìn, dễ sử dụng

 Danh mục được chia rẽ theo từng nhóm khác nhau

 Các sản phẩm yêu thích và saler được cập nhật liên tục và nổi bật

 Thông tin liên quan đến sản phẩm chi tiết, đầy đủ

 Giỏ hàng đầy đủ chức năng, nhiều phương thức thanh toán dễ chọn lựa

 Chức năng đăng nhập facebook chưa hiệu quả, không thực hiện được các chức năng cần đăng nhập khi đã đăng nhập được rồi

 Xử lý scroll chưa hiệu quả, phải kéo xuống thì mới thấy được chức năng giỏ hàng và các chức năng cần dùng khác

Hình 2.5: Giao diện app Alibaba

 Giao diện bắt mắt, dễ nhìn, tiện dụng

 Các danh mục được phân chia rõ ràng theo từng nhóm

 Các chức năng được phân bố dễ nhìn, dễ nắm bắt

 Các sản phẩm được sale, yêu thích được đẩy tin nổi bật dễ cập nhật cho ng dùng

 Có hỗ trợ xem thật, xem những video sản phẩm đã được sử dụng ngoài đời sống

 Cho phép thanh toán riêng từng sản phẩm trong list giỏ hàng

 Là một app tầm quốc tế nhưng ko hỗ trợ tiếng việt nên việc mua bán ở thị trường việt nam kém hiệu quả

 Giá niêm yết không rõ dễ gây tư tưởng lừa đảo

Hình 2.6: Giao diện App Lazada

 Cách bố trí rõ ràng, bố cục hợp lý

 Cung cấp chức năng mua hàng online ở mọi lúc mọi nơi

 Có thông tin khách hàng, sản phẩm, cửa hàng

 Chat trực tiếp với cửa hàng để đưa ra các quyết định mua sắm hợp lý

 Tìm kiếm sản phẩm theo tên sản phẩm

 Coi thông tin, trạng thái của đơn hàng đã được đặt

 Có trò chơi giải trí kiếm thêm xu để giảm số tiền cần phải trả khi mua hàng

 Đôi khi xảy ra một số lỗi do bản cập nhật gây khó khăn cho người mua hàng

1.7 App Thế giới di động

Hình 2.7: Giao diện app Thế giới di dộng

 Giao diện dễ nhìn, bố cục hợp lý

 Có thêm phần tin tức về thị trường sản phẩm để hiểu rõ về công nghệ cũng như sản phẩm

 Các sản phẩm mới nhất sẽ nằm đầu tiên để khách hàng tiện nắm bắt các sản phẩm vừa ra

 Thông tin chi tiết về sản phẩm rõ ràng, chính xác giúp người mua hàng tin tưởng

 Mức độ liên kết giữa app và web app chặt chẽ

 Chỉ có thanh toán khi nhận hàng và tới tận cửa hàng

 Không có chức năng hủy cũng như xem lại đơn hàng

 Thông tin đăng nhập và cá nhân thường gặp lỗi

 Là một app bán hàng nhưng hầu như toàn là tin tức

Hình 2.8: Giao diện app Sendo

 Giao diện đẹp, bố cục hợp lý

 Có thể đăng nhập bằng nhiều loại tài khoản ( facebook, gmail, )

 Đầy đủ các trạng thái giao hàng

 Có nhiều chức năng như trả góp, vay tiền, bán hàng

XÁC ĐỊNH YÊU CẦU

 Danh mục chi tiết, dễ tìm kiếm sản phẩm theo loại

 Có thể trao đổi với shop bán hàng

 Thủ tục đặt hàng phức tạp khiến khách hàng nhiều lúc không thể mua sản phẩm

2 XÁC ĐỊNH YÊU CẦU

- Thêm, xóa, sửa sản phẩm

- Tìm kiếm thông tin sản phẩm, thể loại sản phẩm

- Quản lí dữ liệu thông tin

- Thông tin các sản phẩm của cửa hàng

- Quản lí thông tin blogs

- Thống kê sản phẩm bán được

- Quản lí trạng thái đơn hàng

- Quản lí khuyến mãi, voucher

Khách hàng có thể tìm kiếm thông tin và thể loại sản phẩm, hiển thị chi tiết từng sản phẩm, và tương tác bằng cách chọn sản phẩm yêu thích Họ cũng có thể đặt hàng, quản lý giỏ hàng bằng cách thêm, xóa sản phẩm và cập nhật số lượng Thanh toán được thực hiện qua nhiều hình thức, đồng thời khách hàng có thể quản lý trạng thái đơn hàng, xem thông tin đơn hàng, và quản lý thông tin cá nhân Ngoài ra, khách hàng có thể thay đổi mật khẩu tài khoản, đánh giá sản phẩm và xem thông tin các blog liên quan.

2.2 Yêu cầu phi chức năng o Hạn chế lỗi khi cập nhật thêm chức năng và sản phẩm

Để khắc phục tình trạng load chậm và tăng tốc độ chuyển trang, cần thiết kế thêm các chức năng theo yêu cầu nhằm nâng cao trải nghiệm người dùng Tính linh hoạt trong thiết kế sẽ giúp ứng phó với những thay đổi trong tương lai về yêu cầu Đồng thời, đảm bảo khả năng tương thích với nền tảng, phần mềm, công cụ và tiêu chuẩn hiện hành là yếu tố quan trọng để tối ưu hóa hiệu suất.

MÔ HÌNH HÓA YÊU CẦU

3.1.1 Usecase cho toàn bộ hệ thống

3.2 Mô tả chi tiết Usecase

3.2.1 Mô tả chi tiết Usecase Đăng Nhập

Bảng 2.1: Mô tả Usecase Đăng nhập

Brief description Người dùng đăng nhập vào ứng dụng

Pre-conditions Tài khoản đã được đăng kí trong hệ thống

Post-conditions Nếu đúng thông tin người dùng thì sẽ vào trang ứng dụng

Nếu sai thông tin người dùng thì sẽ không thể truy cập vào hệ thống

Basic flow Usecase được sử dụng khi người dùng thực hiện các chức năng cần xác thực người dùng

1 Ứng dụng hiển thị màn hình đăng nhập cho người dùng

2 Người dùng cần nhập email và password sau đó nhấn “Sign in”

3 Ứng dụng sẽ gửi yêu cầu về server để xác thực người dùng và quyền của họ

4 Màn hình chức năng cần thực hiện hiện ra

Alternative flow Nếu người dùng nhập sai email hoặc mật khẩu thì:

 Nếu để trống màn hình sẽ báo lỗi kêu người dùng nhập dữ liệu

 Nếu tài khoản hoặc mật khẩu sai sẽ có dialog báo lỗi và yêu cầu người dùng nhập lại

3.2.2 Mô tả chi tiết Usecase Đăng ký

Bảng 2.2: Mô tả Usecase Đăng ký

Brief description Người dùng đăng ký tài khoản

Pre-conditions Tài khoản chưa có trong hệ thống

Post-conditions Nếu tài khoản đã có hoặc nhập thông tin sai định dạng sẽ không thể tạo tài khoản

Nếu tài khoản đúng yêu cầu sẽ tạo tài khoản thành công

Basic flow Usecase sẽ được sử dụng khi khách muốn tạo tài khoản

1 Ứng dụng hiển thị màn hình đăng kí

2 Khách sẽ nhập các thông tin cơ bản như (email, tên, số điện thoại, mật khẩu )sau đó nhấn “Sign up”

3 Hệ thống sẽ xác thực thông tin người dung

4 Gửi xác thực đến emal

5 Người dùng nhận xác thực và tài khoản sẽ được tạo trong hệ thống

6 Màn hình đăng nhập sẽ hiện ra

Alternative flow Nếu người dùng nhập sai định dạng hoặc email đã tồn tại thì:

 Nếu để trống màn hình sẽ báo lỗi kêu người dùng nhập dữ liệu

 Nếu tài khoản hoặc sai định sẽ có dialog báo lỗi và yêu cầu người dùng nhập lại

Nếu người dùng không xác thực email thì tài khoản vẫn sẽ không được tạo

3.2.3 Mô tả chi tiết Usecase Đăng xuất

Bảng 2.3: Mô tả Usecase Đăng Xuất

Brief description Người dùng thoát khỏi tài khoản

Pre-conditions Đã đăng nhập vào hệ thống

Post-conditions Người dùng sẽ thoát tài khoản trở thành GUESS khi đăng xuất

Basic flow Usecase sẽ được sử dụng khi người dùng muốn đăng xuất:

1 Màn hình nơi nút “Đăng xuất” hiển thị

2 Người dùng sẽ nhấn vào nút “Đăng xuất”

3 Hệ thống xác nhận hành động đăng xuất

4 Màn hình Đăng nhập sẽ hiện ra

3.2.4 Mô tả chi tiết Usecase Xem sản phẩm

Bảng 2.4: Mô tả Usecase Xem sản phẩm

Name Xem sản phẩm của shop

Brief description Người dùng xem các sản phẩm có mặt tại shop

Pre-conditions Đang ở một màn hình khác

Post-conditions Các sản phẩm của shop được trình bày trên màn hình của người dùng

Basic flow Usecase sẽ được sử dụng khi người dùng muốn xem các sản phẩm người dùng

1 Ứng dụng hiển thị màn hình Sản phẩm

2 Hệ thống sẽ gửi yêu cầu về server

3 Trả về dữ liệu trên màn hình người dùng

Alternative flow Nếu thông tin hoặc kết nối gặp lỗi thì ứng dụng sẽ báo lỗi lên

3.2.5 Mô tả chi tiết Usecase Tìm kiếm sản phẩm

Bảng 2.5: Mô tả Usecase Tìm kiếm sản phẩm

Name Tìm kiếm sản phẩm

Brief description Người dùng tìm kiếm sản phẩm cần

Pre-conditions Hiển thị tất cả các sản phẩm trên màn hình

Post-conditions Các sản phẩm mà người dùng cần được hiển thị trên màn hình

Basic flow Usecase sẽ được sử dụng khi khách muốn tìm sản phẩm

1 Ứng dụng hiển thị màn hình tất cả sản phẩm

2 Khách sẽ nhập các thông tin cần tìm kiếm vào thanh tìm kiếm

3 Hệ thống sẽ kiểm tra thông tin nhập vào

4 Các sản phẩm có kí tự trong thanh tìm kiếm sẽ hiện ra

Alternative flow Nếu người dùng nhập kí tự đặc biệt sẽ có lỗi hiện lên

Nếu người dùng nhập vào không thuộc sản phẩm nào thì màn hình sẽ có text thông báo “Không có sản phẩm”

3.2.6 Mô tả chi tiết Usecase Khôi phục mật khẩu

Bảng 2.6: Mô tả Usecase Khôi phục mật khẩu

Name Khôi phục mật khẩu

Brief description Người dùng muốn đăng nhập nhưng khôi phục mật khẩu của mình

Pre-conditions Đã có tài khoản trong hệ thông

Post-conditions Có thể đăng nhập thành công với mật khẩu mới

Basic flow Usecase sẽ được sử dụng khi người dùng khôi phục mật khẩu

1 Ứng dụng hiển thị màn hình nhập email

2 Người dùng sẽ nhập email tài khoản của mình

3 Hệ thống sẽ kiểm tra thông tin tài khoản

4 Hệ thống gửi tin về email

5 Người dùng vào link để đổi mật khẩu

Alternative flow Nếu người dùng nhập email không tồn tại màn hình báo lỗi sẽ hiện lên

Nếu người dùng nhập đinh dạng email sai màn hình sẽ thông báo và yêu cầu người dùng nhập lại

Nếu người dùng không xác nhận email gửi về thì tài khoản sẽ không được cập nhật

3.2.7 Mô tả chi tiết Usecase Sửa thông tin cá nhân

Bảng 2.7: Mô tả Usecase Sửa thông tin cá nhân

Name Sửa thông tin cá nhân

Brief description Người dùng muốn cập nhật thông tin cá nhân của mình trên ứng dựng

Pre-conditions Đã có tài khoản trong hệ thống

Post-conditions Thông tin cá nhân người dùng được cập nhật

Basic flow Usecase sẽ được sử dụng khi người dùng muốn sửa thông tin cá nhân của họ

1 Ứng dụng hiển thị màn hình thay đổi thông tin

2 Các dữ liệu thông tin có sẳn sẽ hiển thị trên các ô ở màn hình

3 Người dùng thay đổi các thông tin của mình và nhấn nút “Cập nhật”

4 Hệ thống sẽ kiểm tra và cập nhật lại dữ liệu cho người dùng

5 Màn hình thông tin cá nhân của người dùng với thông tin mới sẽ được hiển thị

Alternative flow Nếu người dùng nhập sai định dạng các trường thông tin hệ thống sẽ báo lỗi và yêu cầu người dùng nhập lại

3.2.8 Mô tả chi tiết Usecase Quản lý thông tin giỏ hàng

Bảng 2.8: Mô tả Usecase Quản lý thông tin giỏ hàng

Name Quản lý thông tin giỏ hàng (Thêm, Sửa, Xóa)

Brief description Người dùng cập nhật sản phẩm trong giỏ hàng của bản thân

Pre-conditions Đã có tài khoản trong hệ thống

Post-conditions Các sản phẩm trong giỏ hàng được cập nhật theo các hành dộng của người dùng

Basic flow Usecase sẽ được sử dụng khi người dùng thêm, sửa, xóa thông tin giỏ hàng cá nhân của họ

1 Ứng dụng hiển thị màn hình sản phẩm

2 Khi người nhấn nút “Thêm vào giỏ hàng” thì sản phẩm sẽ được thêm vào trong giỏ hàng

4 Mở ứng dụng màn hình giỏ hàng

5 Các sản phẩm được thêm sẽ xuất hiện

6 Người dùng bấm các nút number để thay đổi số lượng sản phẩm

8 Người dùng bấm vào nút “x” sản phẩm sẽ biến mất

10 Người dùng chọn nút “Đặt hàng”

11 Hệ thống kiểm tra và cập nhật

12 Màn hình Đơn hàng sẽ hiện lên

Alternative flow Nếu thêm sản phẩm gặp lỗi sẽ có dialog hiện thông báo lỗi

Nếu dặt hàng bị lỗi sẽ có dialog hiện thông báo lỗi

3.2.9 Mô tả chi tiết Usecase Xem thông tin chi tiết sản phẩm

Bảng 2.9: Mô tả Usecase Xem thông tin chi tiết sản phẩm

Name Xem chi tiết từng sản phẩm

Brief description Người dùng xem chi tiết từng sản phẩm của shop

Pre-conditions Đang ở một màn hình xem tất cả sản phẩm

Post-conditions Màn hình chi tiết sản phẩm được hiển thị, đưa ra thông tin rõ hơn về sản phẩm

Basic flow Usecase sẽ được sử dụng khi người dùng muốn xem thông tin chi tiết của sản phẩm

2 Người dùng chọn một sản phẩm nào đó

3 Hệ thống kiểm tra thông tin

4 Màn hình thông tin chi tiết của sản phẩm đó hiện ra

Alternative flow Nếu xảy ra lỗi khi sản phẩm bị xóa, màn hình thông báo lỗi sẽ hiện lên và quay lại trang tất cả sản phẩm

3.2.10 Mô tả chi tiết Usecase Lọc các sản phẩm yêu thích

Bảng 2.10: Mô tả Usecase Lọc các sản phẩm yêu thích

Name Lọc sản phẩm yêu thích

Brief description Người dùng muốn lưu các sản phẩm mà họ yêu thích tại màn hình yêu thích (favorite)

Pre-conditions Đang ở một màn hình xem tất cả sản phẩm

Post-conditions Các sản phẩm yêu thích sẽ hiện trong màn hình yêu thích

Basic flow Usecase sẽ được sử dụng khi người dùng muốn lọc ra những sản phẩm mà mình yêu thích

2 Người dùng chọn biểu tượng “:tym” trên các khung hiển thị sản phẩm

3 Hệ thống kiểm tra thông tin và truyền dữ liệu

4 Người dùng chọn màn hình yêu thích

6 Các sản phẩm yêu thích hiện trên màn hình yêu thích

Alternative flow Nếu xảy ra lỗi khi sản phẩm bị xóa, màn hình thông báo lỗi sẽ hiện lên và quay lại trang tất cả sản phẩm

3.2.11 Mô tả chi tiết Usecase Đổi mật khẩu

Bảng 2.11: Mô tả Usecase Đổi mật khẩu

Brief description Người dùng muốn thay đổi mật khẩu tài khoản cá nhân

Post-conditions Mật khẩu cũ bị thay thê bằng mật khẩu mới

Basic flow Usecase sẽ được sử dụng khi người muốn thay đổi mật khẩu cá nhân

1 Ứng dụng hiển thị màn hình đổi mật khẩu

2 Người dùng sẽ nhập mật khẩu cũ, mật khẩu mới, và nhập lại mật khẩu mới

3 Người dùng bấm nút “Đổi mật khẩu”

4 Hệ thống sẽ xác thực mật khẩu cũ

5 Hệ thông kiểm tra mật khẩu mới có giống mật khẩu nhập lại không

6 Màn hình profile hiện lên và cửa sổ thông báo đã thay đổi mật khẩu thành công

Alternative flow Nếu người dùng nhập password không đúng màn hình báo lỗi sẽ hiện lên

Nếu người dùng nhập password mới và password cũ khác nhau, màn hình sẽ hiện lên báo lỗi và thông báo nhập lại

3.2.12 Mô tả chi tiết Usecase Xem thông tin đơn hàng

Bảng 2.12: Mô tả Usecase Xem thông tin đơn hàng

Name Xem thông tin đơn hàng

Brief description Người dùng muốn xem trạng thái các đơn hàng đã được đặt của mình

Pre-conditions Đã có tài khoản trong hệ thông và đã đặt hàng trên shop

Post-conditions Thông tin đơn hàng và trạng thái đơn hàng sẽ được hiện ra

Basic flow Usecase sẽ được sử dụng khi người dùng muốn xem thông tin các đơn hàng

1 Ứng dụng hiển thị thông tin người dùng

2 Người dùng chọn “Thông tin các đơn hàng”

3 Hệ thống sẽ trả về dữ liệu

4 Màn hình thông tin đơn hàng sẽ hiện ra và cho chúng ta các đơn hàng đỡ được đặt”

Alternative flow Nếu không có đơn hàng nào thì màn hình sẽ hiển thị text

“Không có đơn hàng nào được trong trạng thái

3.2.13 Mô tả chi tiết Usecase Đặt hàng

Bảng 2.13: Mô tả Usecase Đặt hàng

Brief description Người dùng muốn đặt hàng của cửa hàng

Post-conditions Đơn hàng được đặt thành công

Basic flow Usecase sẽ được sử dụng khi khách hàng muốn đặt hàng

1 Ứng dụng hiển thị thông tin giỏ hàng

2 Người dùng chọn các sản phẩm muốn đặt hàng

3 Người dùng chọn Thanh toán

4 Trang thanh toán hiện ra người dùng chọn địa chỉ nhận hàng, phương thức thanh toán và voucher (nếu có)

5 Chọn vào nút thanh toán

Alternative flow Nếu số lượng sản phẩm không đủ sẽ thông báo “Số lượng sảm phẩm không đủ”

3.2.14 Mô tả chi tiết Usecase Quản lí sản phẩm

Bảng 2.14: Mô tả Usecase Quản lí sản phẩm

Name Quản lí sản phẩm

Brief description Cửa hàng muốn thêm, xóa, sửa sản phẩm hiện có

Pre-conditions Tài khoản ADMIN

Post-conditions Thực hiện thao tác thêm, sửa hoặc xóa sản phẩm thành công

Basic flow Usecase sẽ được sử dụng khi quản lí muốn thêm, xóa hoặc sửa sản phẩm:

1 Ứng dụng hiển thị thông tin sản phẩm hiện có

2 Quản lí chọn vào thêm sản phẩm

3 Điền thông tin sản phẩm mới

4 Chọn vào button thêm sản phẩm

5 Quản lí chọn vào một sản phẩm cần thay đổi

6 Thay đổi thông tin trước đó bằng thông tin mới

7 Chọn vào button thay đổi

8 Nhấn button xóa của sản phẩm muốn loại bỏ

Alternative flow Hiển thị lỗi khi thông tin chỉnh sửa hoặc thông tin thêm không đúng định dạng

3.2.15 Mô tả chi tiết Usecase Quản lí voucher

Bảng 2.15: Mô tả Usecase Quản lí voucher

Brief description Cửa hàng muốn thêm, xóa, sửa voucher hiện có

Post-conditions Thực hiện thao tác thêm, sửa hoặc xóa voucher thành công

Basic flow Usecase sẽ được sử dụng khi quản lí muốn thêm, xóa hoặc sửa voucher:

1 Ứng dụng hiển thị thông tin voucher hiện có

2 Quản lí chọn vào thêm voucher

3 Điền thông tin voucher mới

4 Chọn vào button thêm voucher

5 Quản lí chọn vào một voucher cần thay đổi

8 Nhấn button xóa của voucher muốn loại bỏ

3.2.16 Mô tả chi tiết Usecase Quản lí thống kê

Bảng 2.16: Mô tả Usecase Quản lí thống kê

Name Quản lí thống kê

Brief description Cửa hàng muốn thống kê doanh thu, và số lượng đơn hàng theo tháng,năm

Post-conditions Thông tin doanh thu và số lượng đơn hàng hiển thị trên màn hình

Basic flow Usecase sẽ được sử dụng khi quản lí muốn xem các thông tin thống kê:

1 Truy cập vào trang thống kê

2 Biểu đồ thống kê về doanh thu sẽ hiện ra

3 Chọn biểu đồ thống kê số lượng đơn hàng để xem thống kê về số lượng đơn hàng

Alternative flow Hiển thị thông báo “Chưa có đơn hàng nào”và “Doanh thu trống” nếu dữ liệu trả về rỗng

3.2.17 Mô tả chi tiết Usecase Quản lí thông tin Blog

Bảng 2.17: Mô tả Usecase Quản lí thông tin blog

Name Quản lí thông tin blog

Brief description Cửa hàng muốn thêm, xóa, sửa các blog hiện có trên ứng dụng

Post-conditions Thực hiện thao tác thêm, sửa hoặc xóa blog thành công

Basic flow Usecase sẽ được sử dụng khi quản lí muốn thêm, xóa hoặc sửa blog:

1 Ứng dụng hiển thị thông tin blog hiện có

2 Quản lí chọn vào thêm blog

3 Điền thông tin blog mới

4 Chọn vào button thêm blog

5 Quản lí chọn vào một blog cần thay đổi

8 Nhấn button xóa của blog muốn loại bỏ

3.2.18 Mô tả chi tiết Usecase Xem sản phẩm theo thương hiệu

Bảng 2.18: Mô tả Usecase Xem sản phẩm theo thương hiệu

Name Xem sản phẩm theo thương hiệu

Brief description Khách hàng muốn xem sản phẩm thuộc thương hiệu mình chọn

Pre-conditions Mở ứng dụng ở trang Home

Post-conditions Hiển thị các sản phẩm theo thương hiệu mà người dùng chọn

Basic flow Usecase sẽ được sử dụng khi người dùng muốn lọc sản phẩm theo thương hiệu mà họ chọn:

1 Tại trang home chọn một thương hiệu mà bạn muốn xem sản phẩm

2 Màn hình chuyển sang tag sản phẩm và hiển thị các sản phẩm theo thương hiệu mà bạn chọn

Alternative flow Hiện thị “Không có sản phẩm nào” nếu thương hiệu đó không có sản phẩm hoặc chương trình bị lỗi

3.2.19 Mô tả chi tiết Usecase Đánh giá sản phẩm

Bảng 2.19: Mô tả Usecase Đánh giá sản phẩm

Name Đánh giá sản phẩm

Brief description Khách hàng muốn đánh giá lại sản phẩm mình đã mua

Pre-conditions Tài khoản User

Post-conditions Đánh giá sản phẩm thành công

Basic flow Usecase sẽ được sử dụng khách hàng muốn đánh giá sản phẩm đã từng mua:

2 Chọn đơn hàng chứa sản phẩm muốn đánh giá

3 Chọn vào nút “Đánh giá” tại sản phẩm muốn đánh giá

4 Chọn số sao muốn đánh giá và nhấn nút “Xác nhận”

Alternative flow Hiển thị thông báo thành công nếu đánh giá thành công và thông báo thất bại nếu đánh giá thất bại

3.2.20 Mô tả chi tiết Usecase Quản lí đơn hàng

Bảng 2.20: Mô tả Usecase Quản lí đơn hàng

Name Quản lí đơn hàng

Brief description Cửa hàng muốn thay đổi status đơn hàng, hủy đơn hàng và xem các đơn hàng theo trạng thái

Post-conditions Hiển thị thông tin các đơn hàng theo trạng thái Thay đổi status hoặc hủy đơn hàng thành công

Basic flow Usecase sẽ được sử dụng khi quản lí muốn xem các đơn hàng theo status hoặc chỉnh sửa trạng thái đơn hàng:

6 Thông tin các đơn hàng theo các trạng thái hiện ra

7 Chuyển trạng thái để xem chi tiết từng đơn hàng trong từng trạng thái

8 Chọn đơn hàng bất kì

9 Chọn vào thay đổi đơn hàng để thay đổi đơn hàng hoặc chọn hủy đơn hàng để hủy đơn hàng đó ( chỉ có ở trạng thái chờ xác nhận)

10 Thông báo thực hiện thành công hiện lên

Alternative flow Hiện thị “Không có đơn hàng nào” nếu trạng thái đó không có đơn hàng nào

CHƯƠNG 3: THIẾT KẾ ỨNG DỤNG

Hình 3.1: Hình thiết kế tổng quan phần mềm

3.1 Lược đồ tuần tự Usecase Quản lí thông tin giỏ hàng

Hình 3.3:Lược đồ tuần tự Usecase Quản lí thông tin giỏ hàng

3.2 Lược đồ tuần tự Usecase Xem sản phẩm

Hình 3.4: Lược đồ tuần tự Usecase Xem sản phẩm

3.3 Lược đồ tuần tự Usecase Xem thông tin chi tiết sản phẩm

3.4 Lược đồ tuần tự Usecase Lấy sản phẩm yêu thích

Hình 3.6: Lược đồ tuần tự Usecase Chọn sản phẩm yêu thích

3.5 Lược đồ tuần tự Usecase Khôi phục mật khẩu

Hình 3.7: Lược đồ tuần tự Usecase Khôi phục mật khẩu

3.6 Lược đồ tuần tự Usecase Đăng nhập

Hình 3.8: Lược đồ tuần tự Usecase Đăng nhập

3.7 Lược đồ tuần tự Usecase Đăng ký

Hình 3.9: Lược đồ tuần tự Usecase Đăng ký

3.8 Lược đồ tuần tự Usecase Đặt hàng

Hình 3.10: Lược đồ tuần tự Usecase Đặt Hàng

3.9 Lược đồ tuần tự Usecase Tìm kiếm sản phẩm

3.10 Lược đồ tuần tự Usecase Thay đổi mật khẩu

Hình 3.12: Lược đồ tuần tự Usecase Thay đổi mật khẩu

3.11 Lược đồ tuần tự Usecase Thêm sản phẩm – Admin

Hình 3.13: Lược đồ tuần tự Usecase Thêm sản phẩm – Admin

3.12 Lược đồ tuần tự Usecase Sửa sản phẩm – Admin

Hình 3.14: Lược đồ tuần tự Usecase Sửa sản phẩm – Admin

3.13 Lược đồ tuần tự Usecase Xóa sản phẩm – Admin

Hình 3.15: Lược đồ tuần tự Usecase Xóa sản phẩm - Admin

3.14 Lược đồ tuần tự Usecase Xác nhận đơn hàng – Admin

Hình 3.16: Lược đồ tuần tự Usecase Xác nhận đơn hàng – Admin

3.15 Lược đồ tuần tự Usecase Thống kê số lượng đơn hàng, sản phẩm đã bán – Admin

Hình 3.17: Lược đồ tuần tự Usecase Thống kê số lượng đơn hàng – Admin

Hình 3.18: Lược đồ tuần tự Usecase Thống kê số lượng sản phẩm đã bán – Admin

3.16 Lược đồ tuần tự Usecase Quản lí khách hàng - Admin

Hình 3.19: Lược đồ tuần tự Usecase Quản lí khách hàng – Admin

3.17 Lược đồ tuần tự Usecase Xem thông tin blog

Hình 3.20: Lược đồ tuần tự Usecase Xem thông tin blog

3.18 Lược đồ tuần tự Usecase Đánh giá sản phẩm

Hình 3.21:Lược đồ tuần tự Usecase Đánh giá sản phẩm

3.19 Lược đồ tuần tự Usecase Chính sửa thông tin (Có sửa ảnh)

Hình 3.22: Lược đồ tuần tự Usecase Chính sửa thông tin (Có sửa ảnh)

3.20 Lượt đồ tuần tự Usecase Thanh toán

Hình 3.23: Lược đồ tuần tự Usecase Thanh toán

4 THIẾT KẾ CƠ SỞ DỮ LIỆU

4.1 Lược đồ cơ sở dữ liệu

Hình 3.24: Lược đồ cơ sở dữ liệu

4.2 Chi tiết bảng dữ liệu

4.2.1 Bảng Account: Thông tin của khách hàng và admin của cửa hàng bán Bảng 3.1: Thông tin các trường dữ liệu bảng Account

STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Id account Lưu ID của tài khoản ObjectId Khóa chính

2 fullName Tên của người dùng

Lưu tên của người dùng và admin

Số điện thoại của người dùng

Lưu số điện thoại của người dùng hoặc admin

4 email Email của người dùng

Lưu email của người dùng hoặc admin

Mật khẩu của người dùng

Lưu mật khẩu của người dùng và admin

6 role Role của người dùng

Lưu thông tin xác thực tài khoản của người dùng hoặc admini

Thời gian tài khoản được tạo

Lưu khoảng thời gian tài khoản được tạo trên ứng dụng

Thời gian tài khoản được cập nhật

Lưu khoảng thời gian tài khoản được cập nhật lại trên ứng dụng

9 isCreatedOtp Thời gian mã otp được tạo

Lưu khoảng thời gian mã otp được tạo từ người dùng

10 isDeleted Cờ kiểm tra tài khoản

Lưu thông tin tài khoản đã bị xóa hay chưa (true đã xóa)

11 otp Mã otp Lưu mã otp được tạo Int

Danh sách id sản phẩm yêu thích

Lưu danh sách id sản phẩm được người dùng yêu thích

13 avatar Ảnh đại diện người dùng

Lưu link hình ảnh đại diện của người dùng trên ứng dụng

4.2.2 Bảng About: Lưu các thông tin cơ bản về cửa hàng bán giày

Bảng 3.2:Thông tin các trường dữ liệu bảng About STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id ID About Lưu ID của

2 Email Email của cửa hàng

Lưu email của cửa hàng bán giày

Lưu thông tin mô tả cơ bản về cửa hàng

4 Branch Chi nhánh Lưu chi nhánh của cửa hàng String

Lưu link facebook cửa hàng

Lưu link Instagram của cửa hàng

7 Zalo Số điện thoại của cửa hàng

Lưu số điện thoại cũng như thông tin của liên hệ zalo của cửa hàng

8 createdAt Thời gian tạo thông tin

Lưu thời gian tạo thông tin Date

Thời gian chỉnh sửa thông tin

Lưu thời gian chỉnh sửa thông tin

10 descriptionVi Mô tả bằng tiếng Việt

Lưu thông tin mô tả bằng tiếng Việt

11 descriptionEn Mô tả bằng tiếng Anh

Lưu thông tin mô tả bằng tiếng Anh

4.2.3 Bảng Rates: Lưu thông tin đánh giá của người dùng đối với sản phẩm của cửa hàng

Bảng 3.3: Thông tin các trường dữ liệu bảng Rates

2 idProduct Id của sản phẩm

Lưu id của sản phẩm được đánh giá

3 Rating Số liệu đánh giá

Chỉ số đánh giá của người dùng dành cho sản phẩm

Id tài khoản của người dùng

Lưu id tài khoản người dùng đã đánh giá sản phẩm

Thời gian người dùng đánh giá

Lưu khoảng thời gian sản phẩm được đánh giá trên ứng dụng

6 updateAt Thời gian người dùng

Lưu khoảng thời gian sản phẩm được cập nhật lại đánh

63 thay đổi đánh giá giá lại trên ứng dụng

7 isDeleted Cờ kiểm tra đánh giá

Lưu thông tin đánh giá đã bị xóa hay chưa (true = đã xóa)

4.2.4 Bảng Products: Lưu thông tin đăng nhập của người dùng và quản lí của cửa hàng

Bảng 3.4: Thông tin các trường dữ liệu bảng Products

1 _id Id của sản phẩm

Lưu Id của sản phẩm ObjectId Khóa chính

Tên của sản phẩm theo tiếng Việt

Lưu tên của sản phẩm theo tiếng anh

Tên của sản phẩm theo tiếng Anh

Lưu tên của sản phẩm theo tiếng Anh

Link hình ảnh sản phẩm

Lưu danh sách hình ảnh của sản phẩm

Số liệu đánh giá của sản phẩm

Lưu thông tin đánh giá của sản phẩm

8 QuantitySold Số lượng sản phẩm đã bán

Lưu thông tin số lượng của sản phẩm đã bán

9 Type Loại của sản phẩm

Lưu thông tin các loại của sản phẩm

10 Discount Giảm giá sản phẩm

Lưu phần trăm giảm giá của sản phẩm

11 idCompany Id của công ty bán giày

Lưu id của công ty bán giày

12 Price Giá của sản phẩm

Lưu giá của sản phẩm Int

13 productCode Mã sản phẩm Lưu mã của sản phẩm String

Thời gian sản phẩm được tạo

Lưu khoảng thời gian sản phẩm được tạo trên ứng dụng

Thời gian sản phẩm được cập nhật

Lưu khoảng thời gian sản phẩm được cập nhật lại trên ứng dụng

16 isDeleted Cờ kiểm tra sản phẩm

Lưu thông tin sản phẩm đã bị xóa hay chưa (true đã xóa)

4.2.5 Bảng Vouchers: Lưu thông tin những khuyến mãi của người dùng, được sử dụng để giảm giá các đơn hàng của người dùng Bảng 3.5: Thông tin các trường dữ liệu bảng Vouchers

1 _id ID Vouchers Lưu ID của

Thông tin của voucher khuyến mãi

Lưu thông tin của voucher khuyến mãi

3 Discount Phần trăm giảm giá

Lưu phần trăm giảm giá của khuyến mãi

4 MaxDiscount Giá trị tối đa được giảm

Lưu giá trị tối đa được giảm giá của đơn hàng khi xài voucher

Lưu thời gian voucher hết hạn sử dụng

Thời gian voucher được tạo

Lưu khoảng thời gian voucher được tạo trên ứng dụng

Thời gian voucher được cập nhật

Lưu khoảng thời gian voucher được cập nhật lại trên ứng dụng

8 isDeleted Cờ kiểm tra voucher

Lưu thông tin voucher đã bị xóa hay chưa (true = đã xóa)

Lưu số lượng voucher Int

4.2.6 Bảng Addresses: Lưu thông tin các địa chỉ của người dùng, dùng để chọn khi đặt hàng

Bảng 3.6: Thông tin các trường dữ liệu bảng Addresses STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id ID Address Lưu ID của địa chỉ ObjectId Khóa chính

Lưu thông tin quận của người dùng

3 nameReceiver Tên của người nhận hàng

Lưu tên của người nhận hàng

Số điện thoại của người dùng nhận hàng

Lưu số điện thoại của người dùng nhận hàng

Lưu thông tin phường/xã của người dùng

6 Status Trạng thái của address

Lưu trạng thái của địa chỉ có được người dùng chọn làm mặc định hay không

Lưu thông tin đường của người dùng

Lưu thông tin tỉnh của người dùng

9 idAccount Id tài khoản người dùng

Lưu thông tin id tài khoản của người dùng

10 createdAt Thời gian địa chỉ được tạo

Lưu khoảng thời gian địa chỉ được tạo trên ứng dụng

Thời gian địa chỉ được cập nhật

Lưu khoảng thời gian địa chỉ được cập nhật lại trên ứng dụng

12 isDeleted Cờ kiểm tra địa chỉ

Lưu thông tin địa chỉ đã bị xóa hay chưa (true = đã xóa)

4.2.7 Bảng Orders: Lưu thông tin các đơn hàng được đặt trên hệ thống của người dùng

Bảng 3.7: Thông tin các trường dữ liệu bảng Orders

1 _id ID Order Lưu ID của đơn hàng ObjectId Khóa chính

2 address Địa chỉ của người nhận hàng

Lưu địa chỉ của người dùng Object

3 voucher Mã voucher Lưu mã voucher String

4 lstCart Danh sách sản phẩm

Lưu danh sách sản phẩm đã đặt Array[Object]

Lưu thông tin Id của người dùng sở hữu

Trạng thái của đơn hàn

Lưu trạng thái đơn hàng của người dùng

Trạng thái thanh toán của đơn hàng

Lưu thông tin trạng thái đã thanh toán hay thanh toán rồi của đơn hàng

Lưu thông tin về phương thức thanh toán

Thời gian đơn hàng được tạo

Lưu khoảng thời gian đơn hàng được tạo trên ứng dụng

Thời gian đơn hàng được cập nhật

Lưu khoảng thời gian đơn hàng được cập nhật lại trên ứng dụng

Giá trị được giảm giá

Thông tin giá trị được giảm giá Int

Lưu giá trị của phí giao hàng Int

Cờ kiểm tra đơn hàng

Lưu thông tin đơn hàng đã bịxóa hay chưa (true = đã xóa)

Tổng giá trị của các sản phẩm

Lưu tổng giá trị của sản phẩm Int

15 TotalPrice Giá trị của đơn hàng

Lưu tổng giá trị của đơn hàng ( totalPriceProduct – totalDiscount - totalShipping)

4.2.8 Bảng Carts: Lưu thông tin các đơn hàng chi tiết của khách hàng được đặt trên hệ thống

Bảng 3.8 Thông tin các trường dữ liệu bảng Cart STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Id Cart Lưu ID của đơn hàn ObjectId Khóa chính

2 lstProduct Thông tin sản phẩm

Thông tin sản phẩm trong giỏ hàng

3 Amount Số lượng sản phẩm

Số lượng sản phẩm đó trong giỏ

Tổng giá trị số lượng sản phẩm

5 idAccount Id của tài khoản

Id tài khoản người dùng String

6 isOrdered Cờ kiểm tra sản phẩm

Kiểm tra sản phẩm có được đặt hay chưa

Thời gian sản phẩm được thêm vào giỏ hàng

Lưu khoảng sản phẩm được thêm vào giỏ hàng trên ứng dụng

Thời gian sản phẩm được cập nhật trong giỏ hàng

Lưu thời gian sản phẩm được cập nhật trong giỏ hàng trên ứng dụng

Cờ kiểm tra sản phẩm trong giỏ hàng

Lưu thông tin sản phẩm trong giỏ hàng đã bị xóa hay chưa (true = đã xóa)

4.2.9 Bảng Paypals: Lưu thông tin về thanh toán bằng paypal

Bảng 3.9.Thông tin các trường dữ liệu bảng Paypals STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Id của bảng paypals

Lưu ID của giao dịch

2 idPaypal Id của giao dịch Lưu id của giao dịch trên paypal

3 Transaction Giá trị giao dịch Giá trị giao dịch đơn hàng

4 idOrder Id của đơn hàng Id của đơn hàng String

5 createdAt Thời gian giao dịch trên paypal

Thời gian giao dịch trên paypal Date

Thời gian thay đổi thông tin giao dịch

4.2.10 Bảng Companies: Lưu thông tin về công ty phân phối giày

Bảng 3.10 Thông tin các trường dữ liệu bảng Companies

STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu

Lưu ID của công ty

2 nameCompany Tên công ty Lưu tên công ty phân phối giày

3 logoCompany Ảnh địa diện thương hiệu

Lưu link ảnh đại diện

73 thương hiệu cho công ty đó

4 isDeleted Cờ kiểm tra công ty

Lưu thông tin công ty đã bị xóa hay chưa (true = đã xóa)

5 createdAt Thời gian công ty được tạo

Thời gian công ty được thêm vào từ Admin

Thời gian thay đổi thông tin công ty

Thời gian thông tin công ty được thay đổi từ Admin

4.2.11 Bảng Blogs: Lưu thông tin về một số blogs

Bảng 3.11 Thông tin các trường dữ liệu bảng Blogs

2 ContentVi Thông tin cơ bản của blogs bằng tiếng Việt

Lưu thông tin cơ bản của blogs bằng tiếng Việt

3 Time Thời gian blog được tạo

Lưu thời gian blog được tạo ở trên một trang web nào đó

4 imageBlog Hình ảnh của blog

Lưu link hình ảnh của blog

5 descriptionShortVi Mô tả ngắn về blog bằng tiếng Việt

Mô tả ngắn về blog bằng tiếng Việt

6 descriptionShortEn Mô tả ngắn về blog bằng tiếng Anh

Mô tả ngắn về blog bằng tiếng Anh

7 ContentEn Thông tin cơ bản của blogs bằng tiếng Anh

Lưu thông tin cơ bản của blogs bằng tiếng Anh

8 Link Đường dẫn tới blog

Lưu đường dẫn tới blog được viết từ trang web khác

Chủ đề bài blog bằng tiếng Việt

Chủ đề bài blog bằng tiếng Anh

11 isDeleted Cờ kiểm tra blog

Lưu thông tin blog đã bị xóa hay chưa (true = đã xóa)

12 createdAt Thời gian blog được tạo

Thời gian blog được thêm vào

Thời gian thông tin blog được thay đổi từ Admin

5.1 Giao diện trên ứng dụng Android (Khách hàng)

Bảng 3.12 Mô tả màn hình của ứng dụng di dộng

STT Tên màn hình Miêu tả

Người dùng có thể dễ dàng bỏ qua trang giới thiệu của ứng dụng để đến trang đăng nhập hoặc đăng ký, hoặc tiếp tục với tư cách khách vãng lai bằng cách nhấn vào nút Bắt đầu.

Màn hình Đăng nhập cho phép người dùng thực hiện đăng nhập bằng cách nhập tài khoản và mật khẩu Bên cạnh đó, người dùng cũng có tùy chọn để đăng ký tài khoản mới hoặc khôi phục mật khẩu nếu cần.

SC_003 Màn hình Đăng kí o Người dùng thực hiện đăng ký bằng cách nhập số điện thoại, mật khẩu và email Sau đó nhấn vào nút Submit

Sau khi chọn tính năng khôi phục mật khẩu trên màn hình đăng nhập, người dùng sẽ được chuyển đến màn hình khôi phục mật khẩu Tại đây, người dùng cần nhập số điện thoại đã đăng ký trước đó và yêu cầu gửi mật khẩu đã bị quên.

SC_005 Màn hình Xác nhận mã

Sau khi người dùng nhập số điện thoại để phục hồi mật khẩu trên trang kho, một trang OTP sẽ xuất hiện yêu cầu nhập mã OTP được gửi đến điện thoại Khi mã OTP được xác nhận thành công, màn hình sẽ chuyển sang giao diện thay đổi mật khẩu.

SC_006 Màn hình Thay đổi mật khẩu(Khôi phục mật khẩu) o Nhập mật khẩu mới vào TextField o Nhấn vào nút Reset để thay đổi lại mật khẩu lại

Màn hình Home của SC_007 hiển thị các sản phẩm đang được giảm giá, sản phẩm mới và sản phẩm bán chạy Người dùng có thể dễ dàng tìm kiếm sản phẩm theo thương hiệu bằng cách chọn thương hiệu hiển thị trên màn hình.

Màn hình chi tiết thông tin sản phẩm cho phép người dùng xem thông tin cụ thể của từng sản phẩm Người dùng có thể dễ dàng đặt hàng bằng cách nhấn nút "Thêm vào giỏ hàng" và có thể thay đổi kích cỡ cũng như số lượng sản phẩm theo nhu cầu.

Màn hình Giỏ hàng cho phép người dùng dễ dàng xóa hoặc chỉnh sửa số lượng các sản phẩm đã chọn Ngoài ra, người dùng cũng có thể chọn "Payment" để chuyển sang màn hình Thanh toán.

Màn hình thanh toán cho phép người dùng điều chỉnh thông tin liên quan đến đơn hàng như địa chỉ giao hàng, voucher, phương thức thanh toán và thông tin sản phẩm Sau khi hoàn tất, người dùng có thể tiếp tục đến bước thanh toán và đặt hàng.

SC_011 Màn hình Voucher o Người dùng có thể chọn loại Voucher mà tài khoản khách hàng được tặng

SC_012 Màn hình chọn Phương thức thanh toán o Người dùng có thể chọn loại Phương thức thanh toán mà khách hàng muốn

Màn hình Profile hiển thị các thông tin cơ bản của người dùng, bao gồm tùy chọn để thay đổi thông tin cá nhân, xem sản phẩm yêu thích, kiểm tra hóa đơn, thay đổi ngôn ngữ và thêm thông tin mới.

SC_014 Màn hình Hóa đơn o Hiển thị các đơn hàng và trạng thái của từng đơn hàng

SC_015 Màn hình Chi tiết đơn hàng o Hiển thị tất cả sản phẩm trong một đơn hàng

SC_016 Màn hình Sản phẩm yêu thích o Hiển thị các sản phẩm mà tài khoản này đã thích

Màn hình thông tin chi tiết cá nhân SC_017 hiển thị đầy đủ thông tin tài khoản, cho phép người dùng thay đổi thông tin và nhấn nút Submit để cập nhật Ngoài ra, người dùng cũng có thể xem danh sách địa chỉ của người nhận.

Người dùng có thể dễ dàng thay đổi mật khẩu bằng cách nhập mật khẩu cũ, sau đó nhập mật khẩu mới và xác nhận lại mật khẩu mới.

SC_019 Màn hình Blog o Người dùng có thể xem các blog được tổng hợp từ cửa hàng

SC_020 Màn hình Blog chi tiết o Người dùng có thể xem chi tiết blog đã chọn

SC_021 Màn hình Địa chỉ o Người dùng có thể xem địa chỉ mặc định và các địa chỉ khác o Có các thao tác thêm, xóa, sửa địa chỉ

SC_022 Màn hình Thêm địa chỉ mới o Người dùng nhập các thông tin của người nhận o Có thể hủy việc thêm hoặc xác nhận thêm sản phẩm

Người dùng có thể chỉnh sửa thông tin của người nhận và đặt làm địa chỉ mặc định Họ cũng có tùy chọn hủy hoặc xác nhận việc sửa sản phẩm.

SC_024 Màn hình Đánh giá o Đánh giá sản phẩm đã mua

SC_025 Màn hình Xóa địa chỉ o Người xác nhận xóa các địa chỉ không cần thiết

5.1.1 Giao diện màn hình đầu của ứng dụng

Hình 3.25: Màn hình đầu của ứng dụng Bảng 3.13 Bảng chi tiết các field màn trên màn hình

No Name Required Type Note

1 Start button True GestureDetector Nhấp để vào trang đăng nhâp

(chưa đăng nhập) hoặc vào trang Home (đăng nhập)

5.1.2 Giao diện màn hình Đăng nhập

Hình 3.26: Màn hình Đăng nhập Bảng 3.14.Bảng chi tiết các field màn trên màn hình

1 Your phone True TextField Ô nhập số điện thoại

True TextField Ô nhập mật khẩu

Nhấn vào text này để chuyển sang trang Đăng kí

Nhấn vào text này để chuyển sang trang Khôi phục mật khẩu

Button Nhấn để thực hiện chức năng đăng nhập

6 Back Button Button Nhấn để quay lại trang mở đầu

5.1.3 Giao diện màn hình Đăng ký

Hình 3.27: Màn hình Đăng ký Bảng 3.15.Bảng chi tiết các field màn trên màn hình

3 Your email True TextField Ô nhập email

5 Back Button Button Nhấn để quay lại trang đăng nhập

5.1.4 Giao diện màn hình Khôi phục mật khẩu

Hình 3.28: Màn hình Khôi phục mật khẩu Bảng 3.16.Bảng chi tiết các field màn trên màn hình

2 Cancel Button Button Nhấn để quay lại trang đăng nhâpk

Button Nhấn để chuyển sang trang nhập mã Otp

5.1.5 Giao diện xác nhận mã Otp

Hình 3.29: Màn hình Xác nhận mã Otp Bảng 3.17.Bảng chi tiết các field màn trên màn hình

1 Enter the otp True TextField Ô nhập số otp

True Text Hiện thị thời gian còn hạn của mã otp

4 Back Button Button Nhấn để quay lại trang trước

5.1.6 Giao diện Thay đổi mật khẩu (Khôi phục mật khẩu)

Hình 3.30: Màn hình Thay đổi mật khẩu (Khôi phục mật khẩu)

Bảng 3.18.Bảng chi tiết các field màn trên màn hình

True TextField Ô nhập mật khẩu mới

2 Reset Button Button Nhấn vào để cập nhật lại mật khẩu cho tài khoản

5.1.7 Giao diện màn hình Home

Hình 3.31: Màn hình Home Bảng 3.19.Bảng chi tiết các field màn trên màn hình

1 New products True Container Hiển thị các sản phẩm mới

2 Go Detail GestureDetector Chuyển sang trang chi tiết của sản phẩm đó

3 Sale products True Container Hiển thị danh sách sản phẩm giảm giá

4 Branchs True Container Hiển thị danh sách các thương hiệu và chuyển sang trang sản

87 phẩm theo thương hiệu khi nhấn vào

True Container Hiển thị danh sách sản phẩm bán chạy

6 Cart Button Button Nhấn vào để chuyển sang giỏ hàng

7 Tag Home True BottomNavigatio nBar

Nhấn vào để vào trang Home

8 Tag Product True BottomNavigatio nBar

Nhấn vào để vào trang Product

9 Tag Search True BottomNavigatio nBar

Nhấn vào để vào trang Tìm kiếm

10 Tag Blog True BottomNavigatio nBar

Nhấn vào để vào trang Blog

11 Tag Profile True BottomNavigatio nBar

Nhấn vào để vào trang Profile

12 All True GestureDetector Nhấn vào để xem các sản phẩm

5.1.8 Giao diện màn hình Chi tiết thông tin sản phẩm

Hình 3.32: Màn hình Chi tiết thông tin sản phẩm Bảng 3.20.Bảng chi tiết các field màn trên màn hình

2 Favorite Button Button Nhấn vào để thêm vào danh sách sản phẩm yêu thích

DropdownButton Nhấn để chọn kích cỡ

4 quantityButton Button Thay đổi số lượng sản phẩm

5 Add to cart Button Thêm sản phẩm vào giỏ hàng

TabController Xem thông tin mô tả và chi tiết về sản phẩm

7 Related Product Container Hiển thị danh sách sản phẩm liên quan

8 Cart Button Chuyển sang trang giỏ hàng

5.1.9 Giao diện màn hình Giỏ Hàng

Hình 3.33: Màn hình Giỏ hàng Bảng 3.21.Bảng chi tiết các field màn trên màn hình

Radio Button Chọn sản phẩm muốn đặt hàng

3 Quantity Button Button Thay đổi số lượng sản phẩm

4 selectAll Button Button Chọn tất cả sản phẩm

5 Payment Button Button Màn hình thanh toán được hiện ra

6 Deleted Button Button Xóa sản phẩm

5.1.10 Giao diện màn hình Thanh toán

Hình 3.34: Màn hình Thanh toán Bảng 3.22.Bảng chi tiết các field màn trên màn hình

1 Địa chỉ mặc định Text Thông tin địa chỉ nhận hàng mặc định

2 Address Button Button Chuyển sang trang địa chỉ

3 Líst Product ListView Danh sách các sản phẩm được chọn để đặt hàng

4 Voucher Text Thông tin voucher đã chọn

5 Voucher Submit GestureDetector Chuyển sang trang voucher

Radio Button Chọn phương thức thanh toán

7 Prices Text Các phí cần trả cũng như phí được giảm giá

8 Payment Button Button Chọn để thanh toán

5.1.11 Giao diện màn hình Voucher

Hình 3.35: Màn hình Voucher Bảng 3.23.Bảng chi tiết các field màn trên màn hình

1 Voucher Text Thông tin voucher

2 Voucher Button Button Chuyển sang trang payment và chọn voucher đó

5.1.12 Giao diện màn hình Chọn Phương thức thanh toán

Hình 3.36: Màn hình Chọn phương thức thanh toán

5.1.13 Giao diện màn hình Profile

Hình 3.37: Màn hình Profile Bảng 3.24.Bảng chi tiết các field màn trên màn hình

1 Avatar NetworkImage Ảnh đại diện của accout

Text Thông tin của tài khoản

(số điện thoại, email, tên)

3 Edit Button Button Nhấn vào để chỉnh sửa thông tin và chuyển sang trang Chỉnh sửa thông tin cá nhân

DropDownButton Hiển thị các ngôn ngữ có thể thay đổi Khi chọn ngôn ngữ sẽ thay đổi theo người dùng

5 Dark Theme Switch Chuyển đổi Theme của toàn ứng dụng

6 Change Password Button Chuyển sang trang đổi mật khẩu

7 Favorites Button Chuyển sang trang sản phẩm yêu thích

8 Bill Button Chuyển sang trang Hóa đơn

9 Logout Button Đăng xuất khỏi tài khoản và chuyển sang trang đăng nhập

Hình 3.38: Màn hình Hóa đơn Bảng 3.25.Bảng chi tiết các field màn trên màn hình

1 Status TagController Danh sách các trạng thái theo từng tag

2 OrderByStatus ListView Danh sách các đơn hàng trong trạng thái đó

5.1.15 Giao diện Chi tiết đơn hàng

Hình 3.39: Màn hình Chi tiết đơn hàng Bảng 3.26.Bảng chi tiết các field màn trên màn hình

Container Thông tin cơ bản của đơn hàng

2 List Product ListView Danh sách các sản phẩm cũng như thông tin các sản phẩm đó thuộc đơn hàng

5.1.16 Giao diện Sản phẩm yêu thích

Hình 3.40: Màn hình Danh sách sản phẩm yêu thích Bảng 3.27.Bảng chi tiết các field màn trên màn hình

1 Favorites button Button Nhấn vào để thêm sản phẩm vào danh sách yêu thích của tài khoản

2 Cart button Button Nhấn vào để thêm sản phẩm vào giỏ hàng

Text Thông tin của sản phẩm

5.1.17 Giao diện Thông tin chi tiết cá nhân

Hình 3.41: Màn hình Thông tin chi tiết tài khoản Bảng 3.28.Bảng chi tiết các field màn trên màn hình

2 Camera Button Button Nhấn vào để thay đổi hình ảnh

3 Your Name TextField Nhập tên hoặc thay đổit tên

4 Your Phone TextField Nhập số điện thoại hoặc thay đổi số điện thoại

5 Your Email TextField Nhập email hoặc thay đổi email

6 Local Button Button Chuyển sang trang địa chỉ

7 Skip (nếu có) GestureDetector Bỏ qua phần nhập thông tin khi vừa tạo tài khoản

8 Continue Button Button Xác nhận thay đổi thông tin và quay lại trang Profile

5.1.18 Giao diện Thay đổi mật khẩu

Hình 3.42: Màn hình Thay đổi mật khẩu Bảng 3.29.Bảng chi tiết các field màn trên màn hình

1 Old password TextField Nhập mật khẩu cũ

2 New password TextField Nhập mật khẩu mới

TextField Nhập lại mật khẩu mới

4 Continue Button Button Xác nhận thay đổi mật khẩu và quay lại trang Profile

Hình 3.43: Màn hình Blog Bảng 3.30.Bảng chi tiết các field màn trên màn hình

Danh sách các blog Khi bạn chọn một blog sẽ

101 chuyển sang trang Blog detail

5.1.20 Giao diện Chi tiết Blog

Hình 3.44: Màn hình Chi tiết Blog Bảng 3.31.Bảng chi tiết các field màn trên màn hình

Text Thông tin của blog

2 Share Button Nhấn vào để chia sẽ link blog với người khác

Danh sách các blog khác Khi bạn chọn một blog sẽ chuyển sang trang Blog detail

Hình 3.45: Màn hình Địa chỉ Bảng 3.32.Bảng chi tiết các field màn trên màn hình

1 Default Address Text Thông tin địa chỉ mặc định

ListView Danh sách các địa chỉ khác

3 Edit Button Button Nhấn vào để chuyển sang trang thay đổi địa chỉ

4 Delete Button Button Nhấn để hiện dialog xác nhận xóa sản phẩm

5 Add Button Button Nhấn để chuyển sang trang tạo địa chỉ mới

5.1.22 Giao diện Thêm địa chỉ mới

Hình 3.46: Màn hình Thêm địa chỉ mới Bảng 3.33.Bảng chi tiết các field màn trên màn hình

1 Receiver name TextField Nhập tên người nhận

TextField Nhập số điện thoại người nhận

3 Province/City DropDownButton Chọn Tỉnh/Thành phố người nhận

4 District DropDownButton Chọn Quận/Huyện người nhận

5 Ward DropDownButton Chọn Phường/Xã người nhận

6 Street TextField Thông tin chi tiết hơn về địa chỉ

7 Cancel Button Button Quay lại trang Địa chỉ

8 Comfirm Button Button Xác nhận thêm địa chỉ

9 X Button Button Quay lại trang Địa chỉ

5.1.23 Giao diện Chỉnh sửa địa chỉ

Hình 3.47: Màn hình Chỉnh sửa địa chỉ Bảng 3.34.Bảng chi tiết các field màn trên màn hình

1 Default Switch Switch Cập nhật địa chỉ mặc định

Hình 3.48: Màn hình Đánh giá Bảng 3.35.Bảng chi tiết các field màn trên màn hình

1 Rating Package Chọn sao đánh giá sản phẩm

2 Cancel Button Button Hủy thao tác đánh giá quay lại trang Chi tiết đơn hàng

3 Comfirm Button Button Xác nhận đánh giá

5.1.25 Giao diện Xóa địa chỉ

Hình 3.49: Màn hình Xóa địa chỉ Bảng 3.36.Bảng chi tiết các field màn trên màn hình

1 Cancel Button Button Hủy thao tác xóa địa chỉ

2 Comfirm Button Button Xác nhận xóa địa chỉ

5.2 Giao diện trên Website (Quản trị viên)

Bảng 3.37 Mô tả màn hình của Web quản lí

SC_001 Màn hình Đăng nhập o Quản lí đăng nhập tài khoản ở đây o Quản lí có thể lựa chọn tính năng Khôi phục mật khẩu và nhớ mật khẩu

SC_002 Màn hình Khôi phục mật khẩu o Dùng để thay đổi mật khẩu khi khôi phục mật khẩu

SC_003 Màn hình Đổi mật khẩu o Quản lí đổi lại mật khẩu của mình khi đã đăng nhập

SC_004 Màn hình Quản lí Blog o Quản lí thông tin của blog o Có các chức năng thêm, xóa, sửa

SC_005 Màn hình Cập nhật hồ sơ o Cập nhật lại thông tin của quản lí

SC_006 Màn hình Quản lí đơn hàng o Quản lí thông tin đơn hàng theo trạng thái o Thay đổi trạng thái đơn hàng

SC_007 Màn hình Quản lí phiếu giảm giá o Quản lí thông tin của phiếu giảm giá o Có các chức năng thêm, xóa, sửa

SC_008 Màn hình Quản lí khách hàng o Quản lí thông tin của khách hàng

SC_009 Màn hình Quản trị viên o Quản lí thông tin của quản trị viên

SC_010 Màn hình Quản lí sản phẩm o Quản lí thông tin sản phẩm o Có các chức năng thêm, xóa, sửa

SC_011 Màn hình Tạo – Sửa blog o Dùng để tạo mới hoặc thay đổi thông tin blog có sẳn

SC_012 Màn hình Tạo – Sửa sản phẩm o Dùng để tạo mới hoặc thay đổi thông tin sản phẩm có sẳn

SC_013 Màn hình Tạo – Sửa phiếu giảm giá o Dùng để tạo mới hoặc thay đổi thông tin phiếu giảm giá có sẳn

SC_014 Màn hình Tạo - Sửa thương hiệu o Dùng để tạo mới hoặc thay đổi thông tin thương hiệu có sẳn

SC_015 Màn hình thương hiệu o Quản lí thông tin của các thương hiệu o Có các chức năng thêm, xóa, sửa

Hình 3.50: Trang Đăng nhập Bảng 3.38.Bảng chi tiết các field màn trên màn hình

1 Phone number TextField Nhập số điện thoại

2 Password TextField Nhập mật khẩu

3 Remember Text Nhớ mật khẩu

4 Forgotpassword Text Chuyển sang màn hình khôi phục mật khẩu

5 Submit button Button Xác nhận đăng nhập

Hình 3.51: Trang Thay đổi mật khẩu

4 Save Button Button Nhấn vào để lưu dữ liệu

5.2.3 Giao diện Đổi mật khẩu

Hình 3.52: Trang Đổi mật khẩu Bảng 3.40.Bảng chi tiết các field màn trên màn hình

5 Tag Khách hàng TagControll Chuyển sang màn hình quản lí khách hàng

6 Tag Quản trị viên TagControll Chuyển sang màn hình quản trị viên

7 Tag Giày TagControll Chuyển sang màn hình sản phẩm

8 Tag Blog TagControll Chuyển sang màn hình blog

9 Tag Thương hiệu TagControll Chuyển sang màn hình thương hiệu

TagControll Chuyển sang màn hình phiếu giảm giá

11 Tag Đơn hàng TagControll Chuyển sang màn hình đơn hàng

5.2.4 Giao diện Quản lí blog

Hình 3.53: Trang Quản lí blog Bảng 3.41.Bảng chi tiết các field màn trên màn hình

1 SearchTextField TextField Nhập tên blog muốn tìm kiếm

2 Search Button Button Lọc sản phẩm phía dưới theo keyword từ SearchTextField

3 Export Excel Button Xuất bản file Excel chứa thông tin các blog

4 Create Button Nhấn để tạo mới một blog

5 Blog Container Các thông tin của một blog

6 Edit Icon IconButton Nhấn vào để chuyển sang trang chính sửa blog

7 Delete Icon IConButton Nhấn vào để xóa thông tin blog vừa chọn

8 Number Button Phân trang dữ liệu

5.2.5 Giao diện Cập nhật hồ sơ

Hình 3.54: Trang Cập nhật hồ sơ Bảng 3.42.Bảng chi tiết các field màn trên màn hình

1 Your name TextField Nhập tên của quản trị viên

2 Your phone TextField Nhập số điện thoại của quản trị viên

3 Your email TextField Nhập email của quản trị viên

4 Avatar Link Hình ảnh đại diện của quản trị viên

5 Cancel Button Button Quay lại màn hình trước

6 Save Button Button Cập nhật thông tin

5.2.6 Giao diện Quản lí đơn hàng

Hình 3.55: Trang Quản lí đơn hàng Bảng 3.43.Bảng chi tiết các field màn trên màn hình

1 List status ListView Các button trạng thái của đơn hàng Khi click vào trạng thái nào thì dữ liệu đơn hàng bên dưới sẽ thay đổi theo

2 List Order ListView Danh sách các đơn hàng

3 Statictis Button Chuyển sang màn hình thống kê

5.2.7 Giao diện Quản lí phiếu giảm giá

Hình 3.56: Trang Quản lí phiếu đánh giá

5.2.8 Giao diện Quản lí khách hàng

Hình 3.57: Trang Quản lí khách hàng

5.2.9 Giao diện Quản trị viên

Hình 3.58: Trang Quản trị viên

5.2.10 Giao diện Quản lí sản phẩm

Hình 3.59: Trang Quản lí sản phẩm

5.2.11 Giao diện Tạo-Sửa blog

Hình 3.60: Trang Tạo-Sửa Blog Bảng 3.44.Bảng chi tiết các field màn trên màn hình

1 ContentVi TextField Ô nhập tiêu đề của blog bằng tiếng Việt

2 DescriptionVi TextField Ô nhập mô tả blog bằng tiếng Việt

3 ContentEn TextField Ô nhập tiêu đề của blog bằng tiếng Anh

4 DescriptionEn TextField Ô nhập mô tả blog bằng tiếng Anh

5 Link TextField Link bài viết

6 Image File Chọn hình ảnh cho blog

5.2.12 Giao diện Tạo-Sửa phiếu giảm giá

Hình 3.61: Trang Tạo-Sửa phiếu giảm giá Bảng 3.45.Bảng chi tiết các field màn trên màn hình

1 Name TextField Ô nhập tên phiếu giảm giá

2 Percent TextField Ô nhập phần trăm giảm giá

3 Time TextField Ô nhập thời gian hết hạn

4 Max TextField Ô nhập giá trị giảm giá tối đa

5 Quantity TextField Ô nhập số lượng phiếu giảm giá

6 Image File Chọn hình ảnh cho phiếu giảm giá

5.2.13 Giao diện Tạo-Sửa sản phẩm

Hình 3.62: Trang Tạo-Sửa sản phẩm Bảng 3.46.Bảng chi tiết các field màn trên màn hình

1 Name TextField Ô nhập tên sản phẩm

2 DescriptionVi TextField Ô nhập mô tả sản phẩn bằng tiếng Việt

3 DescriptionEn TextField Ô nhập mô tả sản phẩm bằng tiếng Anh

4 Type TextField Ô thêm loại của sản phẩm

5 Image File Chọn hình ảnh cho sản phẩm

5.2.14 Giao diện Tạo-Sửa thương hiệu

Hình 3.63: Trang Tạo-Sửa thương hiệu Bảng 3.47.Bảng chi tiết các field màn trên màn hình

1 Name TextField Ô nhập tên thương hiệu

5 Image File Chọn hình ảnh cho thương hiệu

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ

To set up your development environment for Flutter, follow these steps: First, install the Flutter Framework by visiting [Flutter Installation Guide](https://docs.flutter.dev/get-started/install) Next, download and install either Android Studio or Visual Studio Code After that, retrieve the source code from the GitHub repository at [GitHub Shoes Shop App](https://github.com/blackbee2000/shoes-shop-app/tree/linhtd) Finally, open the project you just downloaded from the provided link.

To install the project's package, first, download the source code Then, open the Terminal in your IDE (either Android Studio or Visual Code) and enter the command: flutter pub get.

THIẾT KẾ ỨNG DỤNG

LƯỢC ĐỒ LỚP

LƯỢC ĐỒ TUẦN TỰ

3.1 Lược đồ tuần tự Usecase Quản lí thông tin giỏ hàng

Hình 3.3:Lược đồ tuần tự Usecase Quản lí thông tin giỏ hàng

3.2 Lược đồ tuần tự Usecase Xem sản phẩm

3.3 Lược đồ tuần tự Usecase Xem thông tin chi tiết sản phẩm

3.4 Lược đồ tuần tự Usecase Lấy sản phẩm yêu thích

3.5 Lược đồ tuần tự Usecase Khôi phục mật khẩu

Hình 3.7: Lược đồ tuần tự Usecase Khôi phục mật khẩu

3.6 Lược đồ tuần tự Usecase Đăng nhập

Hình 3.8: Lược đồ tuần tự Usecase Đăng nhập

3.7 Lược đồ tuần tự Usecase Đăng ký

Hình 3.9: Lược đồ tuần tự Usecase Đăng ký

3.8 Lược đồ tuần tự Usecase Đặt hàng

Hình 3.10: Lược đồ tuần tự Usecase Đặt Hàng

3.9 Lược đồ tuần tự Usecase Tìm kiếm sản phẩm

3.10 Lược đồ tuần tự Usecase Thay đổi mật khẩu

Hình 3.12: Lược đồ tuần tự Usecase Thay đổi mật khẩu

3.11 Lược đồ tuần tự Usecase Thêm sản phẩm – Admin

Hình 3.13: Lược đồ tuần tự Usecase Thêm sản phẩm – Admin

3.12 Lược đồ tuần tự Usecase Sửa sản phẩm – Admin

Hình 3.14: Lược đồ tuần tự Usecase Sửa sản phẩm – Admin

3.13 Lược đồ tuần tự Usecase Xóa sản phẩm – Admin

Hình 3.15: Lược đồ tuần tự Usecase Xóa sản phẩm - Admin

3.14 Lược đồ tuần tự Usecase Xác nhận đơn hàng – Admin

Hình 3.16: Lược đồ tuần tự Usecase Xác nhận đơn hàng – Admin

3.15 Lược đồ tuần tự Usecase Thống kê số lượng đơn hàng, sản phẩm đã bán – Admin

Hình 3.17: Lược đồ tuần tự Usecase Thống kê số lượng đơn hàng – Admin

Hình 3.18: Lược đồ tuần tự Usecase Thống kê số lượng sản phẩm đã bán – Admin

3.16 Lược đồ tuần tự Usecase Quản lí khách hàng - Admin

Hình 3.19: Lược đồ tuần tự Usecase Quản lí khách hàng – Admin

3.17 Lược đồ tuần tự Usecase Xem thông tin blog

Hình 3.20: Lược đồ tuần tự Usecase Xem thông tin blog

3.18 Lược đồ tuần tự Usecase Đánh giá sản phẩm

Hình 3.21:Lược đồ tuần tự Usecase Đánh giá sản phẩm

3.19 Lược đồ tuần tự Usecase Chính sửa thông tin (Có sửa ảnh)

Hình 3.22: Lược đồ tuần tự Usecase Chính sửa thông tin (Có sửa ảnh)

3.20 Lượt đồ tuần tự Usecase Thanh toán

Hình 3.23: Lược đồ tuần tự Usecase Thanh toán

THIẾT KẾ CƠ SỞ DỮ LIỆU

4 THIẾT KẾ CƠ SỞ DỮ LIỆU

4.1 Lược đồ cơ sở dữ liệu

Hình 3.24: Lược đồ cơ sở dữ liệu

4.2 Chi tiết bảng dữ liệu

4.2.1 Bảng Account: Thông tin của khách hàng và admin của cửa hàng bán Bảng 3.1: Thông tin các trường dữ liệu bảng Account

1 _id Id account Lưu ID của tài khoản ObjectId Khóa chính

2 fullName Tên của người dùng

Lưu tên của người dùng và admin

Số điện thoại của người dùng

Lưu số điện thoại của người dùng hoặc admin

4 email Email của người dùng

Lưu email của người dùng hoặc admin

Mật khẩu của người dùng

Lưu mật khẩu của người dùng và admin

6 role Role của người dùng

Lưu thông tin xác thực tài khoản của người dùng hoặc admini

Thời gian tài khoản được tạo

Lưu khoảng thời gian tài khoản được tạo trên ứng dụng

Thời gian tài khoản được cập nhật

Lưu khoảng thời gian tài khoản được cập nhật lại trên ứng dụng

9 isCreatedOtp Thời gian mã otp được tạo

Lưu khoảng thời gian mã otp được tạo từ người dùng

10 isDeleted Cờ kiểm tra tài khoản

Lưu thông tin tài khoản đã bị xóa hay chưa (true đã xóa)

11 otp Mã otp Lưu mã otp được tạo Int

Danh sách id sản phẩm yêu thích

Lưu danh sách id sản phẩm được người dùng yêu thích

13 avatar Ảnh đại diện người dùng

Lưu link hình ảnh đại diện của người dùng trên ứng dụng

4.2.2 Bảng About: Lưu các thông tin cơ bản về cửa hàng bán giày

Bảng 3.2:Thông tin các trường dữ liệu bảng About STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id ID About Lưu ID của

2 Email Email của cửa hàng

Lưu email của cửa hàng bán giày

Lưu thông tin mô tả cơ bản về cửa hàng

4 Branch Chi nhánh Lưu chi nhánh của cửa hàng String

Lưu link facebook cửa hàng

Lưu link Instagram của cửa hàng

7 Zalo Số điện thoại của cửa hàng

Lưu số điện thoại cũng như thông tin của liên hệ zalo của cửa hàng

8 createdAt Thời gian tạo thông tin

Lưu thời gian tạo thông tin Date

Thời gian chỉnh sửa thông tin

Lưu thời gian chỉnh sửa thông tin

4.2.3 Bảng Rates: Lưu thông tin đánh giá của người dùng đối với sản phẩm của cửa hàng

Bảng 3.3: Thông tin các trường dữ liệu bảng Rates

2 idProduct Id của sản phẩm

Lưu id của sản phẩm được đánh giá

3 Rating Số liệu đánh giá

Chỉ số đánh giá của người dùng dành cho sản phẩm

Id tài khoản của người dùng

Lưu id tài khoản người dùng đã đánh giá sản phẩm

Thời gian người dùng đánh giá

Lưu khoảng thời gian sản phẩm được đánh giá trên ứng dụng

6 updateAt Thời gian người dùng

Lưu khoảng thời gian sản phẩm được cập nhật lại đánh

63 thay đổi đánh giá giá lại trên ứng dụng

7 isDeleted Cờ kiểm tra đánh giá

Lưu thông tin đánh giá đã bị xóa hay chưa (true = đã xóa)

4.2.4 Bảng Products: Lưu thông tin đăng nhập của người dùng và quản lí của cửa hàng

Bảng 3.4: Thông tin các trường dữ liệu bảng Products

1 _id Id của sản phẩm

Lưu Id của sản phẩm ObjectId Khóa chính

Tên của sản phẩm theo tiếng Việt

Lưu tên của sản phẩm theo tiếng anh

Tên của sản phẩm theo tiếng Anh

Lưu tên của sản phẩm theo tiếng Anh

Link hình ảnh sản phẩm

Lưu danh sách hình ảnh của sản phẩm

Số liệu đánh giá của sản phẩm

Lưu thông tin đánh giá của sản phẩm

8 QuantitySold Số lượng sản phẩm đã bán

Lưu thông tin số lượng của sản phẩm đã bán

9 Type Loại của sản phẩm

Lưu thông tin các loại của sản phẩm

10 Discount Giảm giá sản phẩm

Lưu phần trăm giảm giá của sản phẩm

11 idCompany Id của công ty bán giày

Lưu id của công ty bán giày

12 Price Giá của sản phẩm

Lưu giá của sản phẩm Int

13 productCode Mã sản phẩm Lưu mã của sản phẩm String

Thời gian sản phẩm được tạo

Lưu khoảng thời gian sản phẩm được tạo trên ứng dụng

Thời gian sản phẩm được cập nhật

Lưu khoảng thời gian sản phẩm được cập nhật lại trên ứng dụng

16 isDeleted Cờ kiểm tra sản phẩm

Lưu thông tin sản phẩm đã bị xóa hay chưa (true đã xóa)

4.2.5 Bảng Vouchers: Lưu thông tin những khuyến mãi của người dùng, được sử dụng để giảm giá các đơn hàng của người dùng Bảng 3.5: Thông tin các trường dữ liệu bảng Vouchers

1 _id ID Vouchers Lưu ID của

Thông tin của voucher khuyến mãi

Lưu thông tin của voucher khuyến mãi

3 Discount Phần trăm giảm giá

Lưu phần trăm giảm giá của khuyến mãi

4 MaxDiscount Giá trị tối đa được giảm

Lưu giá trị tối đa được giảm giá của đơn hàng khi xài voucher

Lưu thời gian voucher hết hạn sử dụng

Thời gian voucher được tạo

Lưu khoảng thời gian voucher được tạo trên ứng dụng

Thời gian voucher được cập nhật

Lưu khoảng thời gian voucher được cập nhật lại trên ứng dụng

8 isDeleted Cờ kiểm tra voucher

Lưu thông tin voucher đã bị xóa hay chưa (true = đã xóa)

Lưu số lượng voucher Int

4.2.6 Bảng Addresses: Lưu thông tin các địa chỉ của người dùng, dùng để chọn khi đặt hàng

Bảng 3.6: Thông tin các trường dữ liệu bảng Addresses STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id ID Address Lưu ID của địa chỉ ObjectId Khóa chính

Lưu thông tin quận của người dùng

3 nameReceiver Tên của người nhận hàng

Lưu tên của người nhận hàng

Số điện thoại của người dùng nhận hàng

Lưu số điện thoại của người dùng nhận hàng

Lưu thông tin phường/xã của người dùng

6 Status Trạng thái của address

Lưu trạng thái của địa chỉ có được người dùng chọn làm mặc định hay không

Lưu thông tin đường của người dùng

Lưu thông tin tỉnh của người dùng

9 idAccount Id tài khoản người dùng

Lưu thông tin id tài khoản của người dùng

10 createdAt Thời gian địa chỉ được tạo

Lưu khoảng thời gian địa chỉ được tạo trên ứng dụng

Thời gian địa chỉ được cập nhật

Lưu khoảng thời gian địa chỉ được cập nhật lại trên ứng dụng

12 isDeleted Cờ kiểm tra địa chỉ

Lưu thông tin địa chỉ đã bị xóa hay chưa (true = đã xóa)

4.2.7 Bảng Orders: Lưu thông tin các đơn hàng được đặt trên hệ thống của người dùng

Bảng 3.7: Thông tin các trường dữ liệu bảng Orders

1 _id ID Order Lưu ID của đơn hàng ObjectId Khóa chính

2 address Địa chỉ của người nhận hàng

Lưu địa chỉ của người dùng Object

3 voucher Mã voucher Lưu mã voucher String

4 lstCart Danh sách sản phẩm

Lưu danh sách sản phẩm đã đặt Array[Object]

Lưu thông tin Id của người dùng sở hữu

Trạng thái của đơn hàn

Lưu trạng thái đơn hàng của người dùng

Trạng thái thanh toán của đơn hàng

Lưu thông tin trạng thái đã thanh toán hay thanh toán rồi của đơn hàng

Lưu thông tin về phương thức thanh toán

Thời gian đơn hàng được tạo

Lưu khoảng thời gian đơn hàng được tạo trên ứng dụng

Thời gian đơn hàng được cập nhật

Lưu khoảng thời gian đơn hàng được cập nhật lại trên ứng dụng

Giá trị được giảm giá

Thông tin giá trị được giảm giá Int

Lưu giá trị của phí giao hàng Int

Cờ kiểm tra đơn hàng

Lưu thông tin đơn hàng đã bịxóa hay chưa (true = đã xóa)

Tổng giá trị của các sản phẩm

Lưu tổng giá trị của sản phẩm Int

15 TotalPrice Giá trị của đơn hàng

Lưu tổng giá trị của đơn hàng ( totalPriceProduct – totalDiscount - totalShipping)

4.2.8 Bảng Carts: Lưu thông tin các đơn hàng chi tiết của khách hàng được đặt trên hệ thống

Bảng 3.8 Thông tin các trường dữ liệu bảng Cart STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Id Cart Lưu ID của đơn hàn ObjectId Khóa chính

2 lstProduct Thông tin sản phẩm

Thông tin sản phẩm trong giỏ hàng

3 Amount Số lượng sản phẩm

Số lượng sản phẩm đó trong giỏ

Tổng giá trị số lượng sản phẩm

5 idAccount Id của tài khoản

Id tài khoản người dùng String

6 isOrdered Cờ kiểm tra sản phẩm

Kiểm tra sản phẩm có được đặt hay chưa

Thời gian sản phẩm được thêm vào giỏ hàng

Lưu khoảng sản phẩm được thêm vào giỏ hàng trên ứng dụng

Thời gian sản phẩm được cập nhật trong giỏ hàng

Lưu thời gian sản phẩm được cập nhật trong giỏ hàng trên ứng dụng

Cờ kiểm tra sản phẩm trong giỏ hàng

Lưu thông tin sản phẩm trong giỏ hàng đã bị xóa hay chưa (true = đã xóa)

4.2.9 Bảng Paypals: Lưu thông tin về thanh toán bằng paypal

Bảng 3.9.Thông tin các trường dữ liệu bảng Paypals STT Thuộc tính Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Id của bảng paypals

Lưu ID của giao dịch

2 idPaypal Id của giao dịch Lưu id của giao dịch trên paypal

3 Transaction Giá trị giao dịch Giá trị giao dịch đơn hàng

4 idOrder Id của đơn hàng Id của đơn hàng String

5 createdAt Thời gian giao dịch trên paypal

Thời gian giao dịch trên paypal Date

Thời gian thay đổi thông tin giao dịch

4.2.10 Bảng Companies: Lưu thông tin về công ty phân phối giày

Bảng 3.10 Thông tin các trường dữ liệu bảng Companies

Lưu ID của công ty

2 nameCompany Tên công ty Lưu tên công ty phân phối giày

3 logoCompany Ảnh địa diện thương hiệu

Lưu link ảnh đại diện

73 thương hiệu cho công ty đó

4 isDeleted Cờ kiểm tra công ty

Lưu thông tin công ty đã bị xóa hay chưa (true = đã xóa)

5 createdAt Thời gian công ty được tạo

Thời gian công ty được thêm vào từ Admin

Thời gian thông tin công ty được thay đổi từ Admin

4.2.11 Bảng Blogs: Lưu thông tin về một số blogs

Bảng 3.11 Thông tin các trường dữ liệu bảng Blogs

2 ContentVi Thông tin cơ bản của blogs bằng tiếng Việt

Lưu thông tin cơ bản của blogs bằng tiếng Việt

3 Time Thời gian blog được tạo

Lưu thời gian blog được tạo ở trên một trang web nào đó

4 imageBlog Hình ảnh của blog

Lưu link hình ảnh của blog

5 descriptionShortVi Mô tả ngắn về blog bằng tiếng Việt

Mô tả ngắn về blog bằng tiếng Việt

6 descriptionShortEn Mô tả ngắn về blog bằng tiếng Anh

Mô tả ngắn về blog bằng tiếng Anh

7 ContentEn Thông tin cơ bản của blogs bằng tiếng Anh

Lưu thông tin cơ bản của blogs bằng tiếng Anh

8 Link Đường dẫn tới blog

Lưu đường dẫn tới blog được viết từ trang web khác

Chủ đề bài blog bằng tiếng Việt

Chủ đề bài blog bằng tiếng Anh

11 isDeleted Cờ kiểm tra blog

Lưu thông tin blog đã bị xóa hay chưa (true = đã xóa)

12 createdAt Thời gian blog được tạo

Thời gian blog được thêm vào

Thời gian thông tin blog được thay đổi từ Admin

THIẾT KẾ GIAO DIỆN

5.1 Giao diện trên ứng dụng Android (Khách hàng)

Bảng 3.12 Mô tả màn hình của ứng dụng di dộng

Màn hình đầu của ứng dụng cho phép người dùng bỏ qua trang giới thiệu để trực tiếp đến trang đăng nhập hoặc đăng ký, hoặc tiếp tục với tư cách khách vãng lai bằng cách nhấn nút Bắt đầu.

Người dùng có thể thực hiện đăng nhập vào hệ thống bằng cách nhập tài khoản và mật khẩu Bên cạnh đó, họ cũng có tùy chọn để đăng ký tài khoản mới hoặc khôi phục mật khẩu nếu cần thiết.

SC_003 Màn hình Đăng kí o Người dùng thực hiện đăng ký bằng cách nhập số điện thoại, mật khẩu và email Sau đó nhấn vào nút Submit

Sau khi chọn tính năng khôi phục mật khẩu trên màn hình đăng nhập, người dùng sẽ được chuyển đến màn hình khôi phục mật khẩu Tại đây, người dùng cần nhập số điện thoại đã đăng ký trước đó để thực hiện yêu cầu gửi mật khẩu đã bị quên.

SC_005 Màn hình Xác nhận mã

Sau khi người dùng nhập số điện thoại trên trang khôi phục mật khẩu, hệ thống sẽ hiển thị trang OTP yêu cầu nhập mã OTP được gửi đến điện thoại Khi mã OTP được xác nhận thành công, màn hình sẽ chuyển sang giao diện thay đổi mật khẩu.

SC_006 Màn hình Thay đổi mật khẩu(Khôi phục mật khẩu) o Nhập mật khẩu mới vào TextField o Nhấn vào nút Reset để thay đổi lại mật khẩu lại

Màn hình Home của SC_007 hiển thị các sản phẩm đang giảm giá, sản phẩm mới và sản phẩm bán chạy Người dùng cũng có thể dễ dàng tìm kiếm sản phẩm theo thương hiệu bằng cách chọn thương hiệu hiển thị trên màn hình.

Người dùng có thể dễ dàng xóa hoặc chỉnh sửa số lượng các sản phẩm trong giỏ hàng Ngoài ra, họ có thể chọn "Payment" để chuyển sang màn hình thanh toán.

Màn hình Thanh toán cho phép người dùng điều chỉnh thông tin đơn hàng, bao gồm việc chọn địa chỉ giao hàng, voucher, phương thức thanh toán và thông tin sản phẩm Sau khi hoàn tất, người dùng có thể tiến hành thanh toán và đặt hàng.

SC_011 Màn hình Voucher o Người dùng có thể chọn loại Voucher mà tài khoản khách hàng được tặng

SC_012 Màn hình chọn Phương thức thanh toán o Người dùng có thể chọn loại Phương thức thanh toán mà khách hàng muốn

Màn hình Profile hiển thị các thông tin cơ bản của người dùng, bao gồm nút để thay đổi thông tin cá nhân, xem sản phẩm yêu thích, hóa đơn, và tùy chọn thay đổi ngôn ngữ.

SC_014 Màn hình Hóa đơn o Hiển thị các đơn hàng và trạng thái của từng đơn hàng

SC_015 Màn hình Chi tiết đơn hàng o Hiển thị tất cả sản phẩm trong một đơn hàng

SC_016 Màn hình Sản phẩm yêu thích o Hiển thị các sản phẩm mà tài khoản này đã thích

Màn hình thông tin chi tiết cá nhân SC_017 hiển thị đầy đủ thông tin tài khoản của người dùng Người dùng có khả năng chỉnh sửa thông tin và sau đó nh

Người dùng có thể thay đổi mật khẩu bằng cách nhập mật khẩu cũ, sau đó nhập mật khẩu mới và xác nhận mật khẩu mới để hoàn tất quá trình.

SC_019 Màn hình Blog o Người dùng có thể xem các blog được tổng hợp từ cửa hàng

SC_020 Màn hình Blog chi tiết o Người dùng có thể xem chi tiết blog đã chọn

SC_021 Màn hình Địa chỉ o Người dùng có thể xem địa chỉ mặc định và các địa chỉ khác o Có các thao tác thêm, xóa, sửa địa chỉ

SC_022 Màn hình Thêm địa chỉ mới o Người dùng nhập các thông tin của người nhận o Có thể hủy việc thêm hoặc xác nhận thêm sản phẩm

Người dùng có thể chỉnh sửa thông tin của người nhận và thiết lập địa chỉ này làm địa chỉ mặc định Ngoài ra, họ cũng có tùy chọn để hủy bỏ hoặc xác nhận việc sửa đổi sản phẩm.