Tìm hiểu flutter và xây dựng ứng dụng quản lý và bán máy chơi game hệ console

Để đáp ứng những nhucầu đó, nhóm em quyết định chọn đề tài này, phát triển một ứng dụng cung cấp nhanh chóng thôngtin về cửa hàng cũng như các loại sản phẩm của cửa hàng và tích hợp chat

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1

ĐỀ TÀI:

Tìm hiểu Flutter và xây dựng ứng dụng quản lý và

bán máy chơi game hệ console

Thành phố Hồ Chí Minh, năm 2022

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1

ĐỀ TÀI:

Tìm hiểu Flutter và xây dựng ứng dụng quản lý và

bán máy chơi game hệ console

Thành phố Hồ Chí Minh, năm 2022

Mục lục

DANH MỤC TỪ VIẾT TẮT 5

LỜI CẢM ƠN 6

ĐỀ CƯƠNG CHI TIẾT 7

NỘI DUNG 12

CHƯƠNG 1: GIỚI THIỆU CHUNG 12

1.1 Tổng quan đề tài 12

1.2 Lý do chọn đề tài 12

1.3 Đối tượng sử dụng 13

1.4 Phạm vi nghiên cứu 13

1.4.1 Phạm vi môi trường 13

1.4.2 Phạm vi chức năng 13

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

2.1 Android Studio 14

2.2 Dart 15

2.3 Flutter 16

2.4 Firebase 17

2.5 GitHub 18

2.6 NodeJs 19

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 20

3.1 Kiến trúc hệ thống: Mô hình MVC 20

3.2 Chi tiết các thành phần trong hệ thống 21

CHƯƠNG 4: ĐẶC TẢ USE CASE 22

4.1 Sơ đồ Use Case 22

4.2 Danh sách tác nhân 23

4.3 Danh sách Use Case 23

4.4 Mô tả chi tiết Use Case 25

CHƯƠNG 5: THIẾT KẾ CƠ SỞ DỮ LIỆU 48

5.1 Sơ đồ logic 48

5.2 Danh sách các quan hệ 49

5.2.1 Bảng users: 49

5.2.2 Bảng bills: 49

5.2.3 Bảng products: 49

5.2.4 Bảng messages: 50

5.2.5 Bảng contents: 50

6.2 Danh sách màn hình 53

6.3 Mô tả chi tiết 54

6.3.1 Navigation 54

a Mô tả chung: 54

b Các đối tượng trên màn hình: 54

6.3.2 Trang đăng nhập 55

a Mô tả chung: 55

b Các đối tượng trên màn hình: 55

6.3.3 Trang Quên mật khẩu 56

a Mô tả chung: 56

b Các đối tượng trên màn hình: 56

6.3.4 Trang đăng ký 57

a Mô tả chung: 57

b Các đối tượng trên màn hình: 58

6.3.5 Trang chính(User) 59

a Mô tả chung: 59

b Các đối tượng trên màn hình: 60

6.3.6 Trang Yêu thích 61

a Mô tả chung: 61

b Đối tượng trên màn hình: 62

6.3.7 Trang Trò chuyện 63

a Mô tả chung: 63

b Đối tượng trên màn hình: 64

6.3.8 Trang Hồ sơ 65

a Mô tả chung; 65

b Đối tượng trên màn hình: 66

6.3.9 Trang Sản phẩm theo loại 67

a Mô tả chung: 67

b Đối tượng trên màn hình: 67

6.3.10 Trang Giỏ hàng 68

a Mô tả chung: 68

b Đối tượng trên màn hình: 69

6.3.11 Trang Tìm kiếm 70

a Mô tả chung: 70

b Đối tượng trên màn hình: 70

6.3.12 Trang thông tin hàng 71

a Mô tả chung: 71

b Đối tượng trên màn hình: 72

6.3.14 Trang Danh sách khách hàng 75

a Mô tả chung: 75

b Đối tượng trên màn hình: 76

6.3.15 Trang danh sách thanh toán 77

a Mô tả chung: 77

b Đối tượng trên màn hình: 78

6.3.16 Trang Doanh thu theo năm 79

a Mô tả chung: 79

b Đối tượng trên màn hình: 80

6.3.17 Trang Danh sách hàng 81

a Mô tả chung: 81

b Đối tượng trên màn hình: 82

6.3.18 Trang Thêm hàng và Cập nhật hàng 83

a Mô tả chung: 83

b Đối tượng trên màn hình: 84

6.3.19 Trang xóa hàng 85

a Mô tả chung: 85

b Đối tượng trên màn hình: 85

6.3.20 Trang Danh sách cuộc trò chuyện 86

a Mô tả chung: 86

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

7.1 Môi trường cài đặt và kiểm thử 87

7.2 Kết quả kiểm thử 87

CHƯƠNG 8: KẾT LUẬN 88

8.1 Tổng kết 88

8.2 Khó khăn 88

8.3 Kết quả thu được 89

8.4 Hạn chế của đồ án 89

8.5 Hướng phát triển đồ án 89

TÀI LIỆU THAM KHẢO 90

Danh sách hình ảnh

Hình 2.1.1: Android Studio 14

Hình 2.2.1: Ngôn ngữ lập trình Dart 15

Hình 2.3.1: Flutter 16

Hình 2.4.1: Hệ quản trị cơ sở dữ liệu Firebase 17

Hình 2.5.1: Hệ thống quản lý mã nguồn GitHub 18

Hình 2.6.1: NodeJS 19

Hình 3.1.1: Sơ đồ mô hình MVC 20

Hình 4.1.1: Sơ đồ Use Case 22

Hình 5.1.1: Sơ đồ logic của cơ sở dữ liệu 48

Hình 6.1.1.1: Screen flow Người dùng 51

Hình 6.1.2.1: Screen flow Admin 52

Hình 6.3.1.1: Navigation 54

Hình 6.3.2.1: Trang Login 55

Hình 6.3.3.1: Trang Forgot Password 56

Hình 6.3.4.1: Trang Register Account 57

Hình 6.3.5.1: Trang UserHome 59

Hình 6.3.6.1: Trang Favorite 61

Hình 6.3.7.1: Trang Chat Admin 64

Hình 6.3.7.2: Trang Chat 63

Hình 6.3.8.1: Trang Profile 65

Hình 6.3.9.1: Trang Product Type 67

Hình 6.3.10.1: Trang Your cart 68

Hình 6.3.11.1: Trang Search 70

Hình 6.3.12.1: Trang View Product 71

Hình 6.3.13.1: Trang Admin Panel 73

Hình 6.3.14.1: Trang Customer List 75

Hình 6.3.15.1: Trang Revenue Detail 77

Hình 6.3.16.1: Trang Yearly Revenue Chart 79

Hình 6.3.17.1: Trang Product List 81

Hình 6.3.18.1: Trang Add New Product và Update Product 83

Hình 6.3.19.1: Trang Remove Product 85

Hình 6.3.20: Trang Messages 86

DANH MỤC TỪ VIẾT TẮT

2 API Application ProgrammingInterface Giao diện lập trình ứng dụng

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại họcCông nghệ Thông tin – ĐHQG TP.HCM chúng em đã được trang bị các kiến thức cơbản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 1 của mình

Để hoàn thành Đồ án này, chúng em xin gửi lời cảm ơn chân thành đến:

Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM vì đãtạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các loại sách, tàiliệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin

Chúng em xin gửi lời cảm ơn chân thành đến thầy Trần Anh Dũng đã tận tìnhgiúp đỡ, định hướng cách tư duy và cách làm việc khoa học Đó là những góp ý hết sứcquý báu không chỉ trong quá trình thực hiện luận văn này mà còn là hành trang tiếpbước cho chúng em trong quá trình học tập và lập nghiệp sau này

Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất cả thầy cô trongkhoa, bạn bè, tập thể lớp KTPM2019 là những người luôn sẵn sàng sẻ chia và giúp đỡtrong học tập và cuộc sống Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau

Trong quá trình làm Đồ án này chúng em không tránh khỏi được những sai sót,chúng em kính mong nhận được sự chỉ dẫn và góp ý của quý thầy cô để hoàn thiện vàphát triển đồ án hơn trong môn học Đồ án 2 cũng như trong Khóa luận tốt nghiệp trongtương lai

Chúng em xin chân thành cảm ơn Xin chúc những điều tốt đẹp nhất sẽ luôn đồnghành cùng mọi người

Thành phố Hồ Chí Minh, 28 tháng 5 năm 2022

Sinh viênHOÀNG MẠNH TÂN

HỒ HOÀNG PHƯƠNG

HCM, ngày 28 tháng 5 năm 2022

ĐỀ CƯƠNG CHI TIẾT

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

TÊN ĐỀ TÀI: Tìm hiểu Flutter và xây dựng ứng dụng quản lý và bán máy chơi game hệ console

Cán bộ hướng dẫn: ThS Trần Anh Dũng

Thời gian thực hiện: Từ ngày 07/03/2022 đến ngày 10/6/2022

Sinh viên thực hiện:

hệ máy có thể chơi theo một nhóm hay gia đình và không cần đòi hỏi nhiều phụ kiện đi kèm Do đó,nhu cầu lựa chọn và được tư vấn các loại máy chơi game phù hợp cho bản thân là một vấn đề đangđược nhiều người mon muốn và quan tâm, vì thế họ có thể sắm cho mình một máy chơi game theo ýmuốn một cách thuận tiện và nhanh nhẹn mà không cần đến tận cửa tiệm Để đáp ứng những nhucầu đó, nhóm em quyết định chọn đề tài này, phát triển một ứng dụng cung cấp nhanh chóng thôngtin về cửa hàng cũng như các loại sản phẩm của cửa hàng, thực hiện mua và liên hệ giữa người dùng

và chủ cửa hàng Ứng dụng của nhóm sẽ tập trung bán 3 thứ chính, bao gồm:

- Máy chơi game console

- Đĩa game

- Phụ kiện đi kèm(nếu có)

Ứng dụng cung cấp những tính năng tiện ích giúp khách hàng có thể tiếp cận đến những

2 Mục tiêu: bao gồm 2 mục tiêu chính:

Xây dựng User-side:

+ Có thể đăng nhập hay đăng ký(qua bước OTP) để sử dụng dịch vụ của cửa hàng

+ Có thể xem sản phẩm, tìm kiếm sản phẩm theo keyword, thêm vào giỏ hàng, thêm vào yêuthích, chat với chủ cửa hàng, chỉnh sửa thông tin cá nhân

+ Có thể xem thông tin giỏ hàng, xóa hàng đã thêm vào giỏ, tiến hành thanh toán và xuất bill.Xây dựng Admin-side:

+ Cho phép chủ cửa hàng thêm, xóa, sửa thông tin hàng và xem thông tin hàng.+ Chat với người mua hàng

+ Xem doanh thu của cửa hàng

+ Quản lý thông tin cá nhân

3.Phạm vi:

Phạm vi môi trường: Ứng dụng di động

Phạm vi chức năng:

 Đối với User:

+ Có khả năng xem hàng, mua hàng hay thêm hoặc xóa hàng trong giỏ hàng cũng nhưdanh mục yêu thích

+ Xem thông tin giỏ hàng và tiến hành thanh toán, xuất bill

+ Chat với người bán để lấy thêm thông tin cũng như hỏi đáp về sản phẩm

+ Quản lý và chỉnh sửa thông tin cá nhân

 Đối với Admin:

+ Cung cấp thông tin mới nhất về cửa hàng, về sản phẩm

+ Cung cấp chức năng quản lí như thêm xóa, sửa, thay đổi những vấn đề liên quan tớisản phẩm

+ Quản lý doanh thu, thông tin cá nhân và khách hàng

+ Trao đổi với khác hàng qua mục Chat

4 Đối tượng sử dụng:

 Tất cả mọi người muốn lựa chọn và mua bán các loại máy game, phụ kiện đi kèm

và game cũng như bán lại đĩa game cũ

5 Phương pháp thực hiện:

Phương pháp làm việc:

 Làm việc nhóm 2 thành viên thông qua cả 2 phương thức online lẫn offline

dưới sự hướng dẫn của giảng viên hướng dẫn

Phương pháp nghiên cứu:

 Phân tích nhu cầu sử dụng của đối tượng người dùng

 Nghiên cứu tài liệu các công nghệ liên quan

Phương pháp công nghệ:

 Xây dựng giao diện mobile app để tương tác với người dùng

 Quản lý source code thông qua Github

 Sử dụng Trello, Google doc, Drive… để quản lý tiến trình và tài liệu

7.Kết quả mong đợi:

 Cả User-side và Admin-side thực hiện được hết các chức năng của mình

 Ứng dụng di động hoạt động ổn định, có thể xử lý thông tin nhanh chóng

8.Hướng phát triển của đề tài:

 Nâng cấp tính năng quản lý việc ship hàng tới khách hàng

 Thêm chatbot để tối ưu hóa chức năng hỗ trợ người dùng

9.Kế hoạch làm việc:

Thời gian thực hiện từ ngày 18/03/2022 đến ngày kết thúc môn Đồ án 1

Nhóm chia thành 2 giai đoạn cụ thể:

Giai đoạn 1: Hoàn thiện giao diện người dùng, database và tìm hiểu công nghệ.

Sprint 2: Phân tích yêu cầu và chức năng, chuẩn bị tài liệu, bản vẽ và các diagram liên quan.Sprint 3: Tìm hiểu công nghệ Firebase, xây dựng CSDL, xây dựng UI và các chức năng cơ bản.

Gồm 4 sprint với thời gian mỗi sprint kéo dài khoảng 2 tuần:

Thời gian: 29/04/2021 - báo cáo cuối kỳ

Sprint 4: Hoàn thiện backend ứng với frontend đã thiết kê

Sprint 5: Hoàn thiện và mở rộng frontend(nếu có thể)

Sprint 6: Hoàn thiện và mở rộng back-end(nếu có thể)

Sprint 7: Triển khai kiểm thử và viết báo cáo

_ Hoàn thiện ứng dụng._ Tiến hành kiểm thử

_ Kiểm tra lại ứng dụng._ Hoàn chỉnh bài báo cáo

2 Phân công công việc:

Công việc chung _ Tìm hiểu công nghệ

_ Phân tích yêu cầu

_ Hỗ trợ lẫn nhau back-end/front-end

_ Chuẩn bị tài liệu và viết báo cáo

_ Lập kế hoạch

_ Xây dựng bản vẽ

Công việc cá nhân _ Lập trình back-end

_ Hỗ trợ xây dựng CSDL,logic

_ Xây dựng, liên kết CSDL_ Lập trình front-end_ Kiểm thử

Tp.Hồ Chí Minh, ngày 10 tháng 5 năm 2021

NỘI DUNG

CHƯƠNG 1: GIỚI THIỆU CHUNG

1.1 Tổng quan đề tài

- Tên ứng dụng: Game Station

- Chủ đề chính: Quản lý và bán máy chơi game hệ console

hệ máy có thể chơi theo một nhóm hay gia đình và không cần đòi hỏi nhiều phụ kiện đi kèm Do đó,nhu cầu lựa chọn và được tư vấn các loại máy chơi game phù hợp cho bản thân là một vấn đề đangđược nhiều người mon muốn và quan tâm, vì thế họ có thể sắm cho mình một máy chơi game theo

ý muốn một cách thuận tiện và nhanh nhẹn mà không cần đến tận cửa tiệm Để đáp ứng những nhucầu đó, nhóm em quyết định chọn đề tài này, phát triển một ứng dụng cung cấp nhanh chóng thôngtin về cửa hàng cũng như các loại sản phẩm của cửa hàng và tích hợp chatbot hỗ trợ tự động tư vấn,hướng dẫn mua sắm đến với người dùng truy cập vào ứng dụng Ứng dụng của nhóm sẽ tập trungviệc bán 3 thứ chính, bao gồm:

- Máy chơi game console

- Đĩa game

- Phụ kiện đi kèm(nếu có)

Ứng dụng cung cấp những tính năng tiện ích giúp khách hàng có thể tiếp cận đến nhữngthông tin mới về cửa hàng, về các sản phẩm mà cửa hàng cung cấp thông qua các danh mục sảnphẩm như Popular hay New arrival, xem thông tin hàng và trao đổi với chủ cửa hàng Bên cạnh

đó, chủ cửa hàng có thể vào hệ thống để quan lý việc mua, bán và cập nhật thông tin mới về sản

1.3 Đối tượng sử dụng

 Tất cả mọi người muốn lựa chọn và mua bán các loại máy game, phụ kiện đi

kèm và game cũng như bán lại đĩa game cũ

 Chủ cửa hàng muốn quản lý thông tin bài đăng (về cửa hàng, về sản phẩm,…)

đến mọi người truy cập vào ứng dụng

+ Có thể xem thông tin giỏ hàng, xóa hàng đã thêm vào giỏ, tiến hành thanh toán vàxuất bill

Xây dựng Admin-side:

+ Cho phép chủ cửa hàng thêm, xóa, sửa thông tin hàng và xem thông tin

hàng

+ Chat với người mua hàng

+ Xem doanh thu của cửa hàng

+ Quản lý thông tin cá nhân

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

2.1 Android Studio

Hình 2.1.1: Android Studio

Android Studio là một phầm mềm bao gồm các bộ công cụ khác nhau dùng đểphát triển ứng dụng chạy trên thiết bị sử dụng hệ điều hành Android như các loại điệnthoại smartphone, các tablet Android Studio được đóng gói với một bộ code editor,debugger, các công cụ performance tool và một hệ thống build/deploy (trong đó có trìnhgiả lập simulator để giả lập môi trường của thiết bị điện thoại hoặc tablet trên máy tính)cho phép các lập trình viên có thể nhanh chóng phát triển các ứng dụng từ đơn giản tớiphức tạp

2.2 Dart

Hình 2.2.1: Ngôn ngữ lập trình Dart

Dart là ngôn ngữ lập trình cho Flutter- bộ công cụ giao diện người dùng củaGoogle để xây dựng các ứng dụng Mobile, Web và Desktop app đẹp, được biên dịchnguyên bản từ một cơ sở mã code duy nhất

Về đặc điểm của ngôn ngữ lập trình Dart, Dart gần giống như ngôn ngữ Java từ70%-80%.Cú pháp Dart rõ ràng và súc tích, công cụ của nó đơn giản nhưng mạnh mẽ.Type-safe giúp xác định sớm các lỗi tinh tế Dart có các thư viện cốt lõi và một hệ sinhthái gồm hàng ngàn package Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để

có được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web.Dart biên dịch thành mã ARM và x86, để các ứng dụng di động của Dart có thể chạy tựnhiên trên iOS, Android và hơn thế nữa Đối với các ứng dụng web, chuyển mã từ Dartsang JavaScript Dart quen thuộc với nhiều nhà phát triển hiện có, nhờ vào cú pháp vàđịnh hướng đối tượng không gây ngạc nhiên của nó Nếu đã biết C ++, C # hoặc Java,

có thể làm việc hiệu quả với Dart Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ

để quản lý các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget UI,thông qua phân bổ đối tượng nhanh và GC Dart hỗ trợ lập trình không đồng bộ thôngqua các tính năng ngôn ngữ và API sử dụng các đối tượng Future và Stream

2.3 Flutter

Hình 2.3.1: Flutter

Flutter được Google giới thiệu là một người mới trong thế giới ứng dụng diđộng Là một SDK mới của Google dành cho các thiết bị di động giúp developers vàdesigners xây dựng nhanh chóng ứng dụng dành cho các thiết bị di động (Android,iOS) Flutter là dự án mã nguồn mở đang trong giai đoạn thử nghiệm Flutter bao gồmReactive framework và công nghệ hiển thị 2D (2D rendering engine)và các công cụphát trển(development tool) Các thành phần này làm việc cùng nhau giúp ta thiết kế,xây dựng, test, debug ứng dụng Không có gì ngạc nhiên khi Flutter giúp các nhà pháttriển tạo ra các ứng dụng native đẹp mắt và giúp họ phát triển các ứng dụng đa nềntảng một cách dễ dàng

2.4 Firebase

Hình 2.4.1: Hệ quản trị cơ sở dữ liệu Firebase

Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud Kèm theo đó

là hệ thống máy chủ cực kỳ mạnh mẽ của Google Chức năng chính là giúp người dùng lậptrình ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu

Với firebase, ta có thể tạo ra những ứng dụng real-time như app chat, cùng nhiều tínhnăng như xác thực người dùng, Cloud Messaging, Có thể dùng firebase giống như phầnbackend của app

Các dịch vụ của firebase hoàn toàn miễn phí, tuy nhiên cần phải trả thêm tiền nếu muốnnâng cấp lên Cần cân nhắc điều này nếu muốn xây dựng một ứng dụng lớn sử dụng phầnbackend là firebase, vì cái giá khi muốn nâng cấp còn khá đắt đỏ so với việc xây

dựngbackendtruyền thống

2.5 GitHub

Hình 2.5.1: Hệ thống quản lý mã nguồn GitHub

GitHub là một hệ thống quản lý dự án và phiên bản code, hoạt động giống nhưmột mạng xã hội cho lập trình viên Các lập trình viên có thể clone lại mã nguồn từ mộtrepository và Github chính là một dịch vụ máy chủ repository công cộng, mỗi người cóthể tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để có thể làm việc.Github có đầy đủ những tính năng của Git, ngoài ra nó còn bổ sung những tính năng vềsocial để các developer tương tác với nhau

Github cung cấp các tính năng social networking như feeds, followers, vànetwork graph để các developer học hỏi kinh nghiệm của nhau thông qua lịch sửcommit

2.6 NodeJs

Hình 2.6.1: NodeJS

Node js được viết bằng ngôn ngữ javascript, nó là một trình biên đóng gói của Google’sV8 JavaScript engine, libuv platform abstraction layer, và một thư viện lõi được viết bằngJavascript Mục tiêu của Node js là làm cho web có khả năng push như trong một số ứng dụnggmail Node js cung cấp công cụ giúp lập trình viên có thể làm việc trong non-blocking, môhình I/O

Ưu điểm về tốc độ thực thi và khả năng mở rộng Node.js có tốc độ rất nhanh Đó làmột yêu cầu khá quan trọng khi bạn là một startup đang cố gắng tạo ra một sản phẩm lớn vàmuốn đảm bảo có thể mở rộng nhanh chóng, đáp ứng được một lượng lớn người dùng khitrang web của bạn phát triển lên

Node.js có thể xử lý hàng ngàn kết nối đồng thời Bên cạnh các lợi ích về tốc độ thựcthi và khả năng mở rộng, có thể bạn cũng đã biết một chút về JavaScript nên việc bắt đầukhông còn là quá khó khăn nữa Và điều quan trọng là, Node.js đang ngày càng trở nên lớnmạnh hơn

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG

3.1 Kiến trúc hệ thống: Mô hình MVC

Model: Lưu trữ tất cả dữ liệu của ứng dụng Bộ phận này là cầu nối giữa cơ sở

dữ liệu quản lý cả nhân và trình bày giao diện người dùng Cho phép người dùng có thểnhập và xuất đến các cơ sở dữ liệu lần lượt theo quyền của họ khi cần thiết và dữ liệu

sẽ được lưu dữ trên database

View: giao diện người dùng, nơi người dùng có thể lấy được thông tin dữ liệucủa MVC thông qua các công thức truy vấn và ghi lại hoạt động của người dùng đểtương tác với Controller

Controller: xử lý yêu cầu từ người dùng thông qua View Từ đó, Controller gửi

dữ liệu hợp lý đến người dùng bằng các kết nối đến Model và trưng bày nó trên Viewcho người dùng

Hình 3.1.1: Sơ đồ mô hình MVC

3.2 Chi tiết các thành phần trong hệ thống

1 Giao diện người dùng Cung cấp một giao diện cho người dùng

thực hiện các thao tác nhập/xuất dữ liệu

Đồng thời, trong lúc sử dụng, thông báocho người dùng nếu có lỗi xảy ra

2 Mô hình MVC Tiếp nhận yêu cầu từ giao diện người

dùng, kiểm tra tính đúng đắn theo ràngbuộc và thực thi yêu cầu nếu điều kiệnđược đáp ứng

3 Cơ sở dữ liệu Lưu trữ toàn bộ dữ liệu liên quan đến

thông tin cửa hàng

CHƯƠNG 4: ĐẶC TẢ USE CASE

4.1 Sơ đồ Use Case

Hình 4.1.1: Sơ đồ Use Case

4.2 Danh sách tác nhân

1 Người dùng Bắt buộc phải có tài khoản để đăng nhập vào ứngdụng để sử dụng chức năng.

2 Admin Người dùng sỡ hữu tài khoản nội bộ, quản lý toàn

hoạt động của ứng dụng và cửa hàng

4.3 Danh sách Use Case

nhập vào ứng dụng

2 Đăng ký Dành cho người dùng chưa tài khoản đăngnhập vào hệ thống

3 Quên mật khẩu Dành cho Người dùng khi quên mật khẩu củatài khoản đang sử dụng.

dùng muốn đổi tài khoản hoặc Admin khimuốn đăng xuất ra khỏi ứng dụng

5 Thông tin cá nhân Dành cho khách hàng khi muốn xem thôngtin cá nhân

6 Thay đổi mật khẩu Dành cho Người dùng khi muốn thay đổimật khẩu

7 Giỏ hàng Dành cho Người dùng khi muốn xem thôngtin giỏ hàng

8 Sửa thông tin cá nhân Dành cho Người dùng khi muốn chỉnh sửathông tin cá nhân

9 Xóa hàng Dành cho Người dùng khi muốn xóa hàngkhỏi giỏ hàng.

10 Thanh toán Dành cho Người dùng khi muốn thanhtoán giỏ hàng.

11 Bill Dành cho Admin khi muốn xem bill củakhách hàng.

12 Quản lý hàng Dùng cho Admin khi muốn xem danh sáchsản phẩm

13 Thông tin hàng Dùng cho Admin và Người dùng khimuốn xem thông tin sản phẩm

15 Sửa hàng Dùng cho Admin khi muốn sửa thông tinsản phẩm.

17 Doanh thu Dùng cho Admin khi muốn xem doanh thucủa cửa hàng.

18 Thêm vào yêu thích Dành cho Người dùng khi muốn thêm hàngvào danh sách yêu thích.

19 Xóa khỏi yêu thích Dành cho Người dùng khi muốn xóa hàngvào danh sách yêu thích.20

Tìm kiếm Dành cho Người dùng khi muốn tìm kiếmhàng theo keyword.21

Thêm vào giỏ hàng Dành cho Người dùng khi muốn thêm hàngvào giỏ hàng.22

Tìm sản phẩm theo loại Dành cho Người dùng khi muốn xem tất cảhàng theo loại.

4.4 Mô tả chi tiết Use Case

Mô tả chi tiết tính năng “Đăng nhập”

Mô tả chi tiết Admin/Người dùng dùng tài khoản đãđăng kí để đăng nhập vào ứng dụng.

Luồng phụ

(1) Thực hiện theo (1) tới (2) ở luồngchính

(2) Hệ thống xác thực tài khoảntrong Database, thất bại

(3) Không đăng nhập vào tài khoản, hiểnthị thông báo “Tài khoản hoặc mật khẩucủa bạn không hợp lệ” lên màn hình

Yêu cầu đặc biệt Tài khoản đã đăng kí với mã xác nhậnOTP qua email mà Người dùng cung cấp.Điều kiện trước Tài khoản và mật khẩu nhập vào phải

hợp lệ và chính xác

Điều kiện sau Sử dụng ứng dụng với tư cách Ngườidùng/Admin dựa theo vị trí của tài khoản

đăng nhập

Mô tả chi tiết tính năng “Đăng ký”

Mô tả chi tiết

Người dùng mới hoặc muốn tạo thêm tàikhoản khác

(5) Hệ thống tiến hành xử lý xác thực

và tạo tài khoản

Luồng phụ

(1) Thực hiện từ (1) tới (3)(2) Tại mục OTP, người dùng nhậpsai mã OTP

(3) Hệ thống thông báo đang ký tàikhoản thất bại

Yêu cầu đặc biệt Nhận được mã OTP xác thực danh tínhqua email mà Người dùng cung cấp.

Điều kiện trước _ Người dùng ấn vào nút “SignUp”

_ Nhập mã OTP xác nhận được gửi đếnemail Người dùng

Điều kiện sau

Người dùng đăng ký thành công tàikhoản

Mô tả chi tiết tính năng “Quên mật khẩu”

Mô tả chi tiết

Người dùng/Admin khi quên mật khẩucủa mình và muốn đổi lại

Yêu cầu đặc biệt Nhận được link reset email qua gmail.

Điều kiện trước Người dùng/Admin đã có tài khoản

đăng ký và nhấp vào “ForgotPassword?”

Điều kiện sau Người dùng/Admin đã thay đổi mật khẩumới

Mô tả chi tiết tính năng “Đăng xuất”

Mô tả chi tiết

Người dùng/Admin muốn đăng xuất khỏitài khoản của mình

Luồng sự kiện

Luồng chính

(1) Người dùng chọn mục mục “Profile”trên thanh navigation bar/Admin tạiAdmin panel

(2) Người dùng/Admin ấn vào nút “Logout”

Điều kiện trước _ Người dùng đã đăng nhập vào tài

Mô tả chi tiết tính năng “Thông tin cá nhân”

Mô tả chi tiết

Người dùng muốn xem thông tin cá nhâncủa tài khoản mình

Điều kiện trước _ Người dùng đã đăng nhập vào tài

khoản

_ Người dùng nhấn vào mục “Profile”

Điều kiện sau Người dùng có thể xem thông tin cánhân

Mở rộng _ Sửa thông tin cá nhân

_ Thay đổi mật khẩu

Mô tả chi tiết tính năng “Sửa thông tin cá nhân”

Mô tả chi tiết

Người dùng khi muốn chỉnh sửa thôngtin cá nhân của mình

(2) Người dùng click “Cancel” button

(3) Thông tin sẽ trở lại như cũ

Yêu cầu đặc biệt Người dùng đã điền đủ thông tin cần

chỉnh sửa

Điều kiện trước _ Người dùng đã đăng nhập tài khoản

_ Người dùng ấn vào icon button “Edit”

và “Save”

Điều kiện sau Người dùng đã thay đổi thông tin cá

nhân

Mô tả chi tiết tính năng “Thay đổi mật khẩu”

Mô tả chi tiết Người dùng khi muốn đổi mật khẩu củamình.

Luồng sự kiện

Luồng chính

(1) Người dùng ấn vào button “ChangePassword” ở phần “Profile” ở thanhnavigation bar

(2) Người dùng ấn vào button “Send to

Yêu cầu đặc biệt Nhận link reset email từ gmail.

Điều kiện trước _ Người dùng đã đăng nhập vào tàikhoản.

_ Người dùng nhấp vào button “ChangePassword”

Điều kiện sau Người dùng đã thay đổi mật khẩu.

Mô tả chi tiết tính năng “Giỏ hàng”

Mô tả chi tiết

Người dùng khi muốn xem danh sáchhàng đã thêm vào giỏ

Luồng sự kiện

Luồng chính

(1) Người dùng ấn vào icon button

“Cart” ở page “Home”

(2) Hệ thống chuyển người dùngsang page “Your cart”

Điều kiện trước _ Người dùng đã đăng nhập vào tàikhoản.

_ Người dùng ấn vào icon button “Cart”

Điều kiện sau Người dùng có thể xem danh sách hàng

đã thêm vào giỏ

Mô tả chi tiết tính năng “Xóa hàng”

Mô tả chi tiết Người dùng khi muốn xóa hàng khỏi giỏhàng của mình.

Luồng sự kiện

Luồng chính

(1) Người dùng vào ấn vào icon button

“Cart” và ở page “Your cart”

(2) Tại giỏ hàng, sẽ xuất hiện các cardhàng đã thêm vào giỏ

(3) Người dùng quẹt card hàng cần xóaqua trái

(4) Hàng đã được xóa khỏi giỏ hàng

Mô tả chi tiết tính năng “Thanh toán”

Mô tả chi tiết Người dùng muốn thanh toán giỏhàng của mình.

Điều kiện trước _ Người dùng đã đăng nhập vào tàikhoản.

_ Người dùng vào page “Your cart” vànhấn button “Check out”

Điều kiện sau Giỏ hàng đã được thanh toán và bill đượcxuất.

Mô tả chi tiết tính năng “Revenue”

Mô tả chi tiết Admin dùng để xem danh sách thanhtoán từ khách hàng.

Yêu cầu đặc biệt Đăng nhập tài khoản Admin

Điều kiện trước Admin ấn vào mục “Revenue” trongAdmin panel.

Điều kiện sau Admin có thể xem tất cả danh sách đơnhàng thanh toán.

Mở rộng Biểu đồ doanh thu theo năm

Mô tả chi tiết tính năng “Biểu đồ doanh thu theo năm”

Mô tả chi tiết

Admin muốn xem doanh thu của cửahàng theo năm

Yêu cầu đặc biệt Đăng nhập vào tài khoản Admin

Điều kiện trước _ Vào mục “Revenue” trong Admin

Mô tả chi tiết tính năng “Danh sách khách hàng”

Mô tả chi tiết Admin muốn xem thông tin kháchhàng.

Luồng sự kiện

Luồng chính

(1) Admin nhấp vào mục “Customers”

trong Admin panel

(2) Hệ thống hiện danh sách khách hàngcủa cửa hàng

Yêu cầu đặc biệt Đăng nhập vào tài khoản Admin

Điều kiện trước Vào mục “Customers” trong Admin

panel

Điều kiện sau Hệ thống hiện danh sách khách hàng củacửa hàng.

Mô tả chi tiết tính năng “Chat”

Mô tả chi tiết Người dùng và Admin dùng để trao đổivới nhau.

(2) Hệ thống chuyển Admin tới page

“Messages” và hiện danh sách tin nhắn từkhách hàng

(3) Admin chọn một khách hàng muốntrao đổi

(4) Admin được chuyển vào trang tròchuyện với Khách hàng và có thể nhắn tintrao đổi

Điều kiện trước _ Người dùng/Admin đăng nhập vào tài

khoản_ Người dùng/Admin đã vào mục tròchuyện

Điều kiện sau Admin và Người dùng có thể trao đổivới nhau.