xây dựng ứng dụng quản lý đặt nước uống tại quán sahami ở thành phố đà nẵng

Nội dung chính của đồ án: Quá trình xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng: - Thu thập thông tin tài liệu liên quan và khảo sát thực tế.. Mục tiêu ch

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG ỨNG DỤNG QUẢN LÝ ĐẶT NƯỚC UỐNG TẠI QUÁN SAHAMI

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG ỨNG DỤNG QUẢN LÝ ĐẶT NƯỚC UỐNG TẠI QUÁN SAHAMI

Ở THÀNH PHỐ ĐÀ NẴNG

Giảng viên hướng dẫn duyệt

Đà Nẵng, tháng 06/2023

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

Sau khi khách hàng đăng ký tài khoản, họ có thể sử dụng tài khoản để truy cập các chức năng, bao gồm xem danh sách các loại nước uống, đặc biệt là những loại nổi bật có sẵn tại quán, thêm nước uống vào giỏ hàng, thanh toán, theo dõi đơn hàng và xem lịch sử các đơn hàng đã hoàn thành Khách hàng có thể sử dụng thanh tìm kiếm để nhanh chóng tìm kiếm đồ uống Sau đó, họ có thể chọn loại nước uống mà họ muốn mua và tuỳ chọn các yếu tố như kích cỡ, lượng đường, lượng đá, topping, v.v

Khách hàng có thể nhập địa chỉ giao hàng mong muốn hoặc sử dụng địa chỉ mặc định Nếu khách hàng chưa chỉnh sửa địa chỉ (địa chỉ trống), khi họ đến màn hình thanh toán mà quên nhập địa chỉ, sẽ xuất hiện một thông báo nhắc nhở họ nhập địa chỉ Sau khi thanh toán thành công, họ sẽ được chuyển đến màn hình hiển thị các đơn hàng hiện tại để theo dõi tiến trình của đơn hàng Ngoài ra, khách hàng cũng có thể xem lịch sử các đơn hàng mà họ đã mua

Quản trị viên là người quản trị cao nhất của hệ thống, quản lý tất cả thông tin của ứng dụng: xem thống kê tổng số sản phẩm, đơn hàng, khách hàng, doanh thu, xem thống kê đơn hàng theo thời gian, cập nhật danh mục, nước uống, khách hàng và đơn hàng

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Trình bày các sơ đồ use case, kịch bản cho các use case, sơ đồ ERD của các chức năng trong hệ thống Từ những phân tích ở trên, tiến hành thiết kế cơ sở dữ liệu cho hệ thống sẽ triển khai

CHƯƠNG 3: XÂY DỰNG CHƯƠNG TRÌNH Từ những phân tích và thiết kế về hệ thống ở trên, áp dụng xây dựng các chức năng hệ thống Trình bày giao diện của phần mềm triển khai

3 Nội dung chính của đồ án:

Quá trình xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng:

- Thu thập thông tin tài liệu liên quan và khảo sát thực tế - Phân tích thiết kế các chức năng của hệ thống

- Phân tích thiết kế cơ sơ dữ liệu - Thiết kế giao diện cho các chức năng - Xây dựng hệ thống ứng dụng

- Kiểm thử ứng dụng - Hoàn thành báo cáo tổng hợp

4 Các sản phẩm dự kiến:

- Ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng - File báo cáo hoàn chỉnh

5 Ngày giao đồ án: 10/02/2023 6 Ngày nộp đồ án: 07/06/2023

Đà Nẵng, ngày tháng năm 2023

Trưởng khoa Giảng viên hướng dẫn

LỜI NÓI ĐẦU

Trong thời đại công nghệ thông tin và truyền thông phát triển vượt bậc như hiện nay, việc áp dụng các giải pháp số hóa vào quản lý kinh doanh không chỉ giúp tối ưu hóa quá trình hoạt động mà còn tạo ra trải nghiệm tốt hơn cho khách hàng Đặc biệt, trong lĩnh vực dịch vụ nước uống, sự tiện lợi và nhanh chóng là yếu tố quan trọng trong việc tạo dựng lòng tin và tăng cường sự hài lòng của khách hàng

Đồ án này tập trung vào việc xây dựng một ứng dụng quản lý đặt nước uống tại quán Sahami tại thành phố Đà Nẵng Hình ảnh mà Sahami xây dựng là sự chất lượng và đa dạng của danh sách nước uống mà quán cung cấp, và ứng dụng này sẽ đóng vai trò quan trọng trong việc nâng cao trải nghiệm của khách hàng và cải thiện quy trình quản lý nội bộ của quán

Mục tiêu chính của đồ án là xây dựng một hệ thống ứng dụng tiện ích và hiệu quả, giúp khách hàng có thể dễ dàng tìm hiểu và đặt hàng từ danh sách nước uống phong phú của Sahami Hệ thống đặt đồ uống trên điện thoại di động sẽ giúp cho người sử dụng Internet có thể dễ dàng truy cập cửa hàng đồ uống Sahami bất cứ lúc nào và bất cứ ở đâu để tìm kiếm và đặt đồ uống mà không cần đến tại quán Điều này mang lại sự tiện nghi cho khách hàng, đồng thời cũng tiết kiệm được thời gian và chi phí đi lại Ngoài ra ứng dụng còn cung cấp một giao diện thân thiện, dễ sử dụng và tối ưu hóa quy trình đặt hàng, từ việc tìm kiếm nhanh chóng cho đến tuỳ chọn cá nhân hóa với kích cỡ, đường, đá, topping và nhiều yếu tố khác Bên cạnh đó, khách hàng cũng có khả năng quản lý địa chỉ giao hàng và theo dõi tiến trình của đơn hàng

Với ứng dụng quản lý đặt nước uống tại quán Sahami, hy vọng sẽ đem đến một trải nghiệm mua sắm thuận tiện và hài lòng cho khách hàng, đồng thời giúp quán Sahami tối ưu hóa quy trình kinh doanh và tăng cường tương tác với khách hàng

Em xin gửi lời cảm ơn chân thành đến quý thầy cô đã giúp đỡ em thực hiện đề tài này, đặc biệt là ThS Trần Bửu Dung, cô đã tận tình giúp đỡ em trong suốt quá trình thực hiện đề tài tốt nghiệp này

Đồng thời, em cũng xin chân thành cảm ơn quý thầy cô thuộc ngành Công Nghệ Thông Tin trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng đã truyền đạt những kiến thức cần thiết và những kinh nghiệm quý báu cho chúng em trong suốt thời gian trên giảng đường để em thực hiện tốt đề tài này

Trong quá trình thực hiện đề tài, do kiến thức và thời gian còn hạn chế nên không thể tránh khỏi những sai sót Vì vậy em mong quý thầy, cô thông cảm và góp ý để em

LỜI CAM ĐOAN

Em xin cam đoan đồ án “Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng” là một công trình nghiên cứu độc lập dưới sự hướng

dẫn của giảng viên Ths Trần Bửu Dung Ngoài ra không có bất cứ sự sao chép nào của người khác Đề tài, nội dung báo cáo đồ án là sản phẩm mà em đã nỗ lực nghiên cứu trong quá trình học tập tại trường Các kết quả trình bày trong báo cáo là hoàn toàn trung thực, em xin chịu hoàn toàn trách nhiệm, kỷ luật của trưởng bộ môn và nhà trường đề ra nếu như có vấn đề xảy ra

Sinh viên thực hiện

2 Mục tiêu và nhiệm vụ nghiên cứu 1

3 Đối tượng và phạm vi nghiên cứu 1

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

5 Ý nghĩa khoa học và thực tiễn 2

6 Giải pháp công nghệ 2

7 Cấu trúc của đồ án tốt nghiệp 3

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

1.1 Tổng quan về ngôn ngữ lập trình Dart 4

1.2 Dịch vụ cơ sở dữ liệu Firebase 4

1.3 Framework và thư viện hỗ trợ 5

2.4 Sơ đồ Use case 12

2.5 Kịch bản cho Use case 12

2.5.3.3 Cập nhật thông tin cá nhân 25

2.5.3.4 Xem thống kê tình trạng đơn hàng 25

CHƯƠNG 3 XÂY DỰNG CHƯƠNG TRÌNH 32

3.1 Giao diện người dùng (Khách vãng lai và Khách hàng) 32

Giao diện trang chủ 32

Giao diện sản phẩm chi tiết 32

Giao diện thanh toán 35

Giao diện đơn hàng đang chờ thanh toán 35

Giao diện lịch sử đơn hàng 36

Giao diện profile 36

Giao diện tìm kiếm 37

3.2 Giao diện admin 37

Giao diện trang chủ 37

Giao diện cập nhật khách hàng 38

Giao diện cập nhật sản phẩm 39

Giao diện quản lý đơn hàng 41

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 42

TÀI LIỆU THAM KHẢO 44

DANH MỤC BẢNG BIỂU

Bảng 2 1 Kịch bản cho use case đăng ký 13

Bảng 2 2 Kịch bản cho use case xem trang chủ 14

Bảng 2 3 Kịch bản cho use case xem chi tiết sản phẩm 15

Bảng 2 4 Kịch bản cho use case xem tìm kiếm sản phẩm 16

Bảng 2 5 Kịch bản cho use case cập nhật giỏ hàng 16

Bảng 2 6 Kịch bản cho use case thanh toán 18

Bảng 2 7 Kịch bản cho use case theo dõi tình trạng đơn hàng 19

Bảng 2 8 Kịch bản cho use case nhận xét và đánh giá 20

Bảng 2 9 Kịch bản cho use case xem lịch sử đơn hàng 21

Bảng 2 10 Kịch bản cho use case cập nhật khách hàng 22

Bảng 2 10 Kịch bản cho use case cập nhật khách hàng 24

Bảng 2 11 Kịch bản cho use case cập nhật thông tin cá nhân 25

Bảng 2 12 Kịch bản cho use case thống kê tình trạng đơn hàng 25

Bảng 2 13 Kịch bản cho use case xem lịch sử đơn hàng 27

Hình 1 6 Ảnh minh họa Adroid Studio 7

Hình 1 7 Ảnh minh họa Postman 8

Hình 1 8 Ảnh minh họa mô hình MVVM 9

Hình 2 1 Sơ đồ Use case 12

Hình 2 2 Form phác thảo đăng ký 13

Hình 2 3 Form phác thảo trang chủ 14

Hình 2 4 Form phác thảo trang chi tiết 15

Hình 2 5 Form phác thảo trang giỏ hàng 17

Hình 2 6 Form phác thảo trang thanh toán 18

Hình 2 7 Form phác thảo trang theo dõi tình trạng đơn hàng 19

Hình 2 8 Form phác thảo trang nhận xét và đánh giá 20

Hình 2 9 Form phác thảo trang xem lịch sử đơn hàng 21

Hình 2 10 Form phác thảo trang cập nhật khách hàng 23

Hình 2 11 Form phác thảo trang cập nhật khách hàng 24

Hình 2 12 Form phác thảo trang xem tình trạng đơn hàng 26

Hình 2 13 Sơ đồ quan hệ 27

Hình 3 1 Giao diện trang chủ 32

Hình 3 2 Giao diện sản phẩm chi tiết 32

Hình 3 3 Giao diện xem thông tin dinh dưỡng 33

Hình 3 4 Giao diện xem đánh giá sản phẩm 33

Hình 3 5 Giao diện chọn topping 34

Hình 3 4 Giao diện thanh toán 35

Hình 3 7 Giao diện đơn hàng đang chờ thanh toán 35

Hình 3 8 Giao diện lịch sử đơn hàng 36

Hình 3 9 Giao diện profile 36

Hình 3 10 Giao diện tìm kiếm sản phẩm 37

Hình 3 11 Giao diện trang chủ admin 37

Hình 3 12 Giao diện cập nhật khách hàng 38

Hình 3 13 Giao diện tạo mới khách hàng 38

Hình 3 14 Giao diện cập nhật sản phẩm 39

Hình 3 15 Giao diện thêm sản phẩm 40

Hình 3 16 Giao diện quản lý đơn hàng 41

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

Kinh doanh đồ uống đang trở thành xu hướng start up phổ biến hiện nay do nhu cầu ăn uống đa dạng của mọi người Trong cuộc sống hện đại ngày nay, app đặt đồ uống là một "chân ái" đối với khách hàng Đặc biệt trong tình hình mà cửa hàng không thể phục vụ khách tại chỗ như dịch bệnh Covid19 vừa rồi thì app đặt đồ uống lại trở

nên cần thiết Em quyết định thực hiện đề tài "Xây dựng ứng dụng quản lý đặt nước

uống tại quán Sahami ở thành phố Đà Nẵng" để giúp cho những khách hàng có nhu

cầu mua đồ uống có thể thực hiện một cách nhanh chóng, tiện lợi và đảm bảo tính bảo mật

2 Mục tiêu và nhiệm vụ nghiên cứu

- Mục tiêu: Xây dựng ứng dụng với mục tiêu chủ yếu là giới thiệu đồ uống của cửa hàng với khách hàng Khách hàng có thể tìm kiếm, xem thông tin về đồ uống mà không cần phải trực tiếp đến cửa hàng Sahami Quản trị viên có thể quản lý hệ thống một cách chính xác và hiệu quả

- Nhiệm vụ: + Nghiên cứu đề tài + Phân tích và thiết kế hệ thống + Thiết kế và xây dựng ứng dụng

3 Đối tượng và phạm vi nghiên cứu

- Đối tượng nghiên cứu: + Khách hàng là những người có nhu cầu đặt đồ uống

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 2

+ Quản lý và nhân viên tại quán Sahami + Tài liệu tham khảo

- Phạm vi nghiên cứu: + Ứng dụng này được ứng dựng cho quán Sahami - là một quán đồ uống tư nhân có quy mô và hình thức nghiệp vụ nhỏ

+ Đề tài xây dựng ứng dụng đồ uống Sahami + Lĩnh vực thiết kế ứng dụng

+ Hoạt động bán đồ uống, cập nhật thông tin về sản phẩm

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

- Tham khảo các ứng dụng đặt đồ uống trên mạng như ShopeeFood, GoFood, Loship, Baemin, …

- Khảo sát thực tế - Tìm kiếm tài liệu trên Internet có liên quan đến nội dung nghiên cứu - Tìm hiểu về công cụ hỗ trợ lập trình và cách sử dụng

- Thu tập tài liệu liên quan đên nghiệp vụ quản lý ứng dụng đặt đồ uống Sahami

5 Ý nghĩa khoa học và thực tiễn

a) Ý nghĩa khoa học của đề tài - Giúp sinh viên bổ sung kiến thức để bắt đầu trên con đường trở thành kỹ sư lập

trình giỏi - Rèn luyện kỹ năng phân tích và thiết kế dự án

b) Ý nghĩa thực tiễn của đề tài Qua việc xây dựng ứng dụng này, em có thể áp dụng những kiến thức trong quá trình học tập và trao dồi sự hiểu biết về kiến thức như:

- Kiến thức về ngôn ngữ Dart - Kiến thức về Flutter Framework - Kiến thức Firebase

- Phát huy tính sáng tạo và cách làm việc độc lập cho mình

6 Giải pháp công nghệ

- Thiết kế cơ sở dữ liệu, sơ đồ usecase, sơ đồ hoạt động: StarUML - Hỗ trợ soạn thảo mã nguồn: Visual Studio Code, Android Studio - Ngôn ngữ lập trình: Dart (Framework Flutter)

- Dịch vụ CSDL: Firebase

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 3

7 Cấu trúc của đồ án tốt nghiệp

Bài báo cáo ngoài các nội dung gồm phần mở đầu và phần kết thúc thì bố cục gồm có 3 chương:

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Nêu các cơ sở lý thuyết sẽ áp dụng trong hệ thống: ngôn ngữ Dart, Framwork Flutter và dịch vụ cơ sở dữ liệu Firebase,

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Trình bày các sơ đồ use case, kịch bản cho các use case, sơ đồ ERD của các chức năng trong hệ thống Từ những phân tích ở trên, tiến hành thiết kế cơ sở dữ liệu cho hệ thống sẽ triển khai

CHƯƠNG 3: XÂY DỰNG CHƯƠNG TRÌNH Từ những phân tích và thiết kế về hệ thống ở trên, áp dụng xây dựng các chức năng hệ thống Trình bày giao diện của phần mềm triển khai

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 4

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

1.1 Tổng quan về 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ủa Google để xây dựng các ứng dụng Mobile, Web và Desktop app đẹp, được biên dịch nguyên bản từ một cơ sở mã code duy nhất

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ẽ safe giúp bạn 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ệ sinh thá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ừ Dart sang JavaScript

Type-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 bạn đã biết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài ngày

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ông qua các tính năng ngôn ngữ và API sử dụng các đối tượng Future và Stream

Hình 1 1 Icon Dart

1.2 Dịch vụ 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ập trì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

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

Đối với các ứng dụng đa nền tảng, tất cả các client đều sử dụng cùng một cơ sở dữ liệu Nó được tự động cập nhật dữ liệu mới nhất bất cứ khi nào các lập trình viên phát triển ứng dụng Cuối cùng, tất cả các dữ liệu này được truyền qua kết nối an toàn SSL có bảo mật với chứng nhận 2048 bit

Trong trường hợp bị mất mạng, dữ liệu được lưu lại ở local Vì thế khi có mọi sự thay đổi nào đều được tự động cập nhật lên Server của Firebase Bên cạnh đó, đối với các dữ liệu ở local cũ hơn với Server thì cũng tự động cập nhật để được dữ liệu mới nhất

Hình 1 3 Icon Flutter

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 6

Ưu điểm của Flutter: - Ít phải viết các config khi tạo project mới theo cách thủ công, ngược lại với

React Native - Chỉ cần tải về Flutter từ git, chạy “flutter doctor”, và nó sẽ cho bạn biết những

loại vấn đề bạn có thể có trong hệ thống Sau đó, tạo một project từ Android Studio hoặc bất kỳ IDE nào sau khi cài đặt Flutter Plug-in sơ bộ và start project Ngoài ra nó còn có Hot-reload giống như trong React-Native

- Hỗ trợ tuyệt vời cho IDE (Android Studio, IDE IntelliJ, VSCode) - Trình điều hướng tích hợp sẵn Sau khi tạo ra một ứng dụng trên Flutter, có thể

thấy nó có Navigator được xây dựng sẵn Có thể tạo một route mới mà không cần kết nối bất kỳ thứ gì (không giống như trong React-Native, kết nối bất kỳ package điều hướng gốc nào, …)

- Giải pháp quản lý dữ liệu được tạo sẵn, ví dụ trong Flutter này là "Mọi thứ đều có một Widget" cho nó Có một StatefulWidget đặc biệt, với sự giúp đỡ của nó mà chúng ta có thể quản lý trạng thái widget và thay đổi nó một cách năng động

1.4 Công cụ hỗ trợ xây dựng hệ thống 1.4.1 Android Studio

Android Studio cung cấp môi trường phát triển tích hợp (IDE) cho Flutter, với đầy đủ tính năng và công cụ hỗ trợ cho việc phát triển ứng dụng di động Flutter Nó cung cấp giao diện đồ họa và trình soạn thảo mã nguồn mạnh mẽ, cùng với các tính năng như tìm kiếm và sửa lỗi, tự động hoàn thành mã, và tích hợp công cụ quản lý phiên bản Android Studio không chỉ hỗ trợ phát triển ứng dụng di động Android mà còn hỗ trợ việc phát triển ứng dụng di động iOS thông qua công cụ Flutter Điều này cho phép chúng tôi xây dựng ứng dụng đa nền tảng cho cả hai hệ điều hành Android và iOS từ một mã nguồn duy nhất Android Studio tích hợp sẵn Git và các công cụ quản lý phiên bản khác, cho phép quản lý mã nguồn và tiến trình phát triển một cách thuận tiện Hỗ trợ các plugin chính thức của Flutter, cho phép cài đặt và sử dụng các công cụ Flutter một cách dễ dàng Các plugin này bao gồm Flutter SDK, Flutter Inspector, Flutter DevTools, và nhiều công cụ khác giúp phát triển, kiểm tra và gỡ lỗi ứng dụng Flutter một cách hiệu quả

Flutter Inspector

- Gỡ lỗi giao diện người dùng (UI): Flutter Inspector cho phép kiểm tra và gỡ lỗi giao diện người dùng trong ứng dụng Flutter Có thể xem các thành phần UI,

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

- Tương tác với Widget và trạng thái ứng dụng: Flutter Inspector cho phép tương tác trực tiếp với các Widget trong ứng dụng, thay đổi trạng thái và các thuộc tính của chúng Điều này giúp thử nghiệm và kiểm tra sự phản ứng của ứng dụng trong nhiều trạng thái khác nhau mà không cần phải khởi chạy lại ứng dụng

- Hỗ trợ quản lý và chỉnh sửa layout: Flutter Inspector cung cấp các công cụ để quản lý và chỉnh sửa layout của ứng dụng Có thể di chuyển, thay đổi kích thước, và sắp xếp các Widget trong cây Widget một cách thuận tiện và trực quan

Hình 1 4 Ảnh minh họa Adroid Studio

1.4.2 Postman

Postman là một công cụ để test API của cty Postdot Technologies, cho phép làm việc với các API, nhất là REST, giúp ích rất nhiều cho việc testing Hỗ trợ tất cả các phương thức HTTP (GET, POST, PUT, DELETE, OPTIONS, HEAD )

Ưu điểm: - Dễ sử dụng, hỗ trợ cả chạy bằng UI và non-UI

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 8

- Hỗ trợ viết code cho assert tự động bằng Javascript - Hỗ trợ cả RESTful services và SOAP services - Có chức năng tạo API document

Hình 1 5 Ảnh minh họa Postman

1.5 Lý thuyết xây dựng ứng dụng

Bên dưới tất cả ứng dụng là một tập các dịch vụ và các hệ thống bao gồm: Một tập hợp các View có thể được mở rộng, được sử dụng để xây dựng các ứng dụng bao gồm các List, Grid, Text Box, Button, …

Content Provider: cho phép ứng dụng truy xuất dữ liệu từ ứng dụng khác (Contacts chẳng hạn), hoặc chia sẻ dữ liệu của nó cho các ứng dụng khác

Resource Manager: cho phép truy cập đến các tài nguyên non-code như là các tập tin layout, hình ảnh, dữ liệu dạng chuỗi được định vị …

Notification Manager: cho phép tất cả các ứng dụng hiển thị một thông báo nào đó trên thanh trạng thái

Activity Manager: quản lý vòng đời của ứng dụng và quản lý điều hướng backstack của các Activity trong ứng dụng

Ứng dụng Flutter sử dụng mô hình MVVM (Model - View - ViewModel)

Mô hình này khá giống với MVC (Model - View - Controller), sự khác biệt duy nhất là nẳm ở cách xây dựng nên C (Controller) của MVC và VM (ViewModel) của MVVM

Đầu tiên là xây dựng Model trước, sau đó là Repository, ViewModel và cuối cùng là View Để lấy dữ liệu của model chúng ta cần một Repository Các phương thức của Repository trả về một đối tượng Future Future là một class của Dart, được sử dụng để

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 9

phục vụ lập trình đa luồng, ví dụ phương thức get trong Repository có thể phải đợi rất lâu mới lấy được dữ liệu, sử dụng Future giống như một dạng callback, nó sẽ trả về dữ liệu khi dữ liệu lấy được thành công Repository sẽ được sử dụng trong ViewModel và dùng để thao tác với các cơ sở dữ liệu (từ database hoặc api) Để thao tác dữ liệu trong database, sử dụng thư viện sqflite được cung cấp thông qua Dartlang Package Với các ứng dụng Android Native, ViewModel sẽ giao tiếp với View thông qua Databinding và LiveData, tuy nhiên Flutter chưa support Databinding hay LiveData, do đó sẽ sử dụng một plugin có tên Scoped Model Plugin này hỗ trợ việc truyền model từ Widget cha đến các Widget con, khi model cập nhật trạng thái, các Widget con sẽ tự động được build lại, cũng giống với khả năng của LiveData tuy nhiên chúng ta phải tự thông báo trạng thái đến View thay vì để model tự cập nhật chúng Các function đánh dấu async sẽ thực hiện bất đồng bộ so với luồng chính để đảm bảo UI không bị block, việc lập trình bất đồng bộ theo async await pattern rất dễ dàng do đã được Dart support sẵn, không cần tạo thêm luồng mới, quản lý luồng Tiếp theo là xây dựng tầng View Sử dụng Widget ScopedModel để hỗ trợ việc cập nhật dữ liệu giữa View và ViewModel), ScopedModel này lắng nghe dữ liệu từ ViewModel Để sử dụng Material Design, child của ScopedModel sẽ sử dụng Scaffold Scaffold là một class đã được xây dựng sẵn trong package:flutter/material.dart, hỗ trợ nhiều component như AppBar, Drawer, Floating Button, BottomNavigation

Hình 1 6 Ảnh minh họa mô hình MVVM

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 10

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Tác nhân

- Khách vãng lai - Khách hàng - Quản trị viên

2.2 Đặc tả yêu cầu nghiệp vụ 2.2.1 Khách vãng lai

Khách vãng lai đăng ký tài khoản để sử dụng các chức năng của khách hàng

2.2.2 Khách hàng

Sau khi đăng ký tài khoản khách hàng có thể sử dụng để đăng nhập Đồng thời khách hàng có thêm các chức năng như cập nhật thông tin cá nhân, cập nhật giỏ hàng, thanh toán, theo dõi tình trạng đơn hàng, xem lịch sử đơn hàng, nhận xét và đánh giá

2.2.3 Quản trị viên

Quản trị viên có thể thực hiện cập nhật một số thông tin của hệ thống như cập nhật khách hàng, cập nhật sản phẩm, cập nhật đơn hàng, cập nhật danh mục, thay đổi trạng thái nhận xét, thay đổi trạng thái đơn hàng, xem thống kê đơn hàng, thống kê về doanh thu và các số liệu khác…

2.3 Đặc tả yêu cầu phần mềm 2.3.1 Khách vãng lai

- Xem thông tin

+ Xem trang chủ + Xem chi tiết sản phẩm - Tìm kiếm sản phẩm theo tên hoặc lọc theo giá, danh mục - Cập nhật giỏ hàng

+ Thêm sản phẩm vào giỏ hàng + Cập nhật số lượng

+ Xoá sản phẩm ra khỏi giỏ hàng - Đăng ký tài khoản thành viên

2.3.2 Khách hàng

Có đầy đủ chức năng của khách vãng lai, ngoài ra còn có thêm các chức năng:

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 11

- Đăng nhập, đăng xuất hệ thống

+ Đăng nhập bằng Facebook + Đăng nhập bằng Gmail + Quên mật khẩu

- Thanh toán đơn hàng

+ Chọn phương thức thanh toán + Chọn phương thức giao hàng + Ghi chú

- Xem chi tiết đơn hàng - Theo dõi tình trạng đơn hàng - Xem lịch sử đơn hàng

- Cập nhật thông tin tài khoản

2.3.3 Quản trị viên

- Đăng nhập, đăng xuất hệ thống

+ Đăng nhập bằng Facebook + Đăng nhập bằng Gmail + Quên mật khẩu

- Cập nhật khách hàng - Cập nhật sản phẩm - Cập nhật đơn hàng - Cập nhật danh mục - Thay đổi trạng thái nhận xét - Cập nhật thông tin cá nhân - Xem biểu đồ thống kê về doanh thu và đơn hàng - Xem tổng số lượng khách hàng, sản phẩm, doanh thu và đơn hàng

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 12

2.4 Sơ đồ Use case

Hình 2 1 Sơ đồ Use case

2.5 Kịch bản cho Use case 2.5.1 Khách vãng lai 2.5.1.1 Đăng ký

STT Use case name Đăng ký 1 Description Actor đăng ký tài khoản để có thể sử dụng các chức năng

cho người dùng

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

SVTH: Lê Thị Trúc Vy Trang 13

2 Actor Khách vãng lai 3 Input Khách vãng lai vào trang đăng ký 4 Output Giao diện trang chủ hiển thị

5 Basic flow

1) Bắt đầu use case 2) Khách vãng lai vào trang đăng ký 3) Điển đầy đủ thông tin và nhấn nút đăng ký 4) Chuyển hướng đến trang chủ của khách hàng 5) Kết thúc use case

6 Alternative flow Không có 7 Exception flow Không có

Bảng 2 1 Kịch bản cho use case đăng ký

Form phác thảo

Hình 2 2 Form phác thảo đăng ký

Xây dựng ứng dụng quản lý đặt nước uống tại quán Sahami ở thành phố Đà Nẵng

4) Kết thúc use case 6 Alternative flow Không có

7 Exception flow Không có

Bảng 2 2 Kịch bản cho use case xem trang chủ

Form phác thảo

Hình 2 3 Form phác thảo trang chủ