Khóa luận tốt nghiệp tìm hiểu FLUTTER và xây dựng ứng dụng đặt hàng ONLINE

Vì vậy, nhóm em quyết định chọn đề tài “Tìm hiểu Flutter và xây dựng ứng dụng đặt hàng online” nhằm mục đích tạo ra một ứng dụng đặt hàng cho một chuỗi cửa hàng bán đồ ăn thức uống cụ

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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

HỒ NGUYỄN NHẬT TIẾN HUỲNH NGUYỄN QUANG TÍN

KHÓA LUẬN TỐT NGHIỆP TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG

ĐẶT HÀNG ONLINE Flutter Research and build an online odering app

KỸ SƯ CÔNG NGHỆ PHẦN MỀM

TP HỒ CHÍ MINH, 2021

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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

HỒ NGUYỄN NHẬT TIẾN - 16521218 HUỲNH NGUYỄN QUANG TÍN – 16521242

KHÓA LUẬN TỐT NGHIỆP TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG

ĐẶT HÀNG ONLINE Flutter Research and build an online odering app

KỸ SƯ CÔNG NGHỆ PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN

TS NGUYỄN TẤT BẢO THIỆN ThS: TRẦN ANH DŨNG

TP HỒ CHÍ MINH, 2021 THÔNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ……… ngày ……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin

1 - Chủ tịch

2 - Thư ký

3 - Ủy viên

4 - Ủy viên

ĐẠ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

TP HCM, ngày… tháng… năm……

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP

(CỦA CÁN BỘ HƯỚNG DẪN/PHẢN BIỆN) Tên khóa luận:

TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG ĐẶT HÀNG ONLINE

Nhóm SV thực hiện: Cán bộ hướng dẫn:

Huỳnh Nguyễn Quang Tín - 16521242

Đánh giá Khóa luận

1 Về cuốn báo cáo:

Số trang _ Số chương _

Số bảng số liệu _ Số hình vẽ _

Số tài liệu tham khảo _ Sản phẩm _

Một số nhận xét về hình thức cuốn báo cáo:

………

………

………

2 Về nội dung nghiên cứu:

Đánh giá chung:Khóa luận đạt/không đạt yêu cầu của một khóa luận tốt nghiệp kỹ sư/ cử

nhân, xếp loại Giỏi/ Khá/ Trung bình

Điểm từng sinh viên:

ĐẠ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

TP HCM, ngày… tháng… năm……

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP

(CỦA CÁN BỘ HƯỚNG DẪN/PHẢN BIỆN) Tên khóa luận:

TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG ĐẶT HÀNG ONLINE

Nhóm SV thực hiện: Cán bộ phản biện:

Hồ Nguyễn Nhật Tiến – 16521218

Huỳnh Nguyễn Quang Tín - 16521242

Đánh giá Khóa luận

5 Về cuốn báo cáo:

Số trang _ Số chương _

Số bảng số liệu _ Số hình vẽ _

Số tài liệu tham khảo _ Sản phẩm _

Một số nhận xét về hình thức cuốn báo cáo:

………

………

………

6 Về nội dung nghiên cứu:

Đánh giá chung:Khóa luận đạt/không đạt yêu cầu của một khóa luận tốt nghiệp kỹ sư/ cử

nhân, xếp loại Giỏi/ Khá/ Trung bình

Điểm từng sinh viên:

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG ĐẶT HÀNG ONLINE

TÊN ĐỀ TÀI (tiếng Anh): FLUTTER RESEARCH AND BUILD AN ONLINE ORDERING APP

Cán bộ hướng dẫn: TS Đỗ Thị Thanh Tuyền ,ThS Trần Anh Dũng

Thời gian thực hiện: Từ ngày 21/9/2020 đến ngày 02/01/2021

Sinh viên thực hiện:

Huỳnh Nguyễn Quang Tín - 16521242

Hồ Nguyễn Nhật Tiến - 16521218

Nội dung đề tài:(Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực hiện,

kết quả mong đợi của đề tài)

1 Mục tiêu của đề tài

1 Bối cảnh chọn đề tài

Ngày nay, nhiều cửa hàng đồ ăn thức uống được mở ra nhằm phục vụ nhu cầu

ăn uống của con người Người dùng thường sử dụng các dịch vụ đặt hàng và giao hàng như GrabFood, GoFood, Beamin,… Điều này làm đem lại sự tiện lợi cho cả khách hàng và cửa hàng Nhưng đối với những cửa hàng lớn, việc này có thể đem lại bất lợi cho những cửa hàng đó Bởi vì thông qua các ứng dụng đặt hàng, vô tình một cửa hàng và các cửa hàng đối thủ đang sử dụng chung một tệp khách hàng tuy nhu cầu, sở thích ăn uống khác nhau Có người thích cửa hàng A, có người thích cửa hàng B, nếu vô tình 2 bên có sự chênh lệch về khuyến mãi thì việc mất đi một

lượng khách hàng của 1 trong 2 cửa hàng nêu trên có thể sẽ xảy ra Vì vậy, nhóm

em quyết định chọn đề tài “Tìm hiểu Flutter và xây dựng ứng dụng đặt hàng

online” nhằm mục đích tạo ra một ứng dụng đặt hàng cho một chuỗi cửa hàng bán

đồ ăn thức uống cụ thể Mục tiêu: - Xây dựng ứng dụng bán đồ ăn thức uống cho mộ

2 Tính mới/ khác biệt về chức năng của đề tài so với một số ứng dụng đặt thức ăn/ đồ uống online hiện nay

Tính mới của đề tài:

 Áp dụng Flutter, framework mới, đa nền tảng, hiệu năng cao, giải quyết được bài toán thường gặp là Fast Development và Native Performance

 Áp dụng Microservices để dễ dàng quản lý và triển khai từng phần so với kiến trúc Monolithic thông thường

 Áp dụng Docker để triển khai ứng dụng, giải quyết vấn đề cài đặt môi trường trên một hoặc nhiều server

 Áp dụng Golang, một ngôn ngữ lập trình mới có hiệu năng cao

Thứ hai là phát triển ứng dụng có tính thực tiễn cao, có khả năng triển khai ứng dụng vào thực tế

Nhóm hy vọng dựa trên nền tảng lý thuyết đã được thầy cô truyền thụ lại, kết hợp với sự tìm hiểu công nghệ của nhóm, luận văn tốt nghiệp của nhóm sẽ đạt được mục đích mong đợi.

4 Ý nghĩa của đề tài

Trước hết, đề tài ““Tìm hiểu Flutter và xây dựng ứng dụng đặt hàng

online”” là một ứng dụng được xây dựng như một đề tài thể hiện việc áp dụng

những kiến thức quý báu đã được các thầy cô của trường Đại học Công nghệ Thông tin – Đại học Quốc gia thành phố Hồ Chí Minh đã nhiệt tình truyền thụ lại cho chúng em Và đặc biệt là sự theo dõi và quan tâm giúp đỡ của thầy Trần Anh Dũng trong suốt thời gian nhóm chúng em thực hiện đề tài này

Thứ hai là những kinh nghiệm quý báu mà nhóm có được trong quá trình thực hiện đề tài sẽ là hành trang tuyệt vời giúp ích rất nhiều cho công việc sau này của mỗi thành viên trong nhóm

5 Nhiệm vụ của đề tài

Đề tài “Tìm hiểu Flutter và xây dựng ứng dụng đặt hàng online” là một

ứng dụng chạy trên điện thoại sử dụng hệ điều hành Android

Ứng dụng gồm có 2 phần: Ứng dụng viết cho nền tảng mobile và Webservice quản trị viết bằng ngôn ngữ Golang

 Mobile app dành cho người tiêu dùng

 Xem thông tin sản phẩm

 Bình luận và đánh giá

 Đặt mua đồ ăn hoặc thức uống tại cửa hàng Người dùng có thể

chọn đến lấy hoặc được giao tận nơi

 Tích điểm khi thanh toán, chỉnh sửa thông tin cá nhân

 Sử dụng voucher cá nhân được lưu trữ trong tài khoản người dùng

 Tích hợp bản đồ để xem địa chỉ, thông tin các chi nhánh của cửa hàng, xem cửa hàng gần nhất

 Ứng dụng web cho người quản trị

 Ứng dụng web cho nhân viên chi nhánh:

 Nhận thông báo có đơn đặt hàng

 Quản lý đơn hàng

 Thống kê của chi nhánh Mục tiêu của đề tài này là:

- Tìm hiểu các hoạt động kinh doanh trong thực tế.

- Tìm hiểu cách thức xây dựng một ứng dụng di động bằng flutter

- Xây dựng thành công ứng dụng đặt hàng với đầy đủ các tính năng đề ra

- Hệ thống tối ưu hóa lợi nhuận đối với những khách hàng mới

- Hệ thống có khả năng ứng dụng và triển khai vào thực tiễn nhanh chóng

2 Phạm vi nghiên cứu

Ứng dụng được nhóm xây dựng bằng framework Flutter trên môi trường Android/iOS và Webservice được xây dựng bằng ngôn ngữ Golang

Tìm hiểu microservices và ứng dụng vào đề tài

3 Đối tượng nghiên cứu

 Các công nghệ:

 Front-end: Flutter, Reactjs

 Back-end: Golang

 Sử dụng Docker, Microservice,

 Database: MySQL, Firebase…

 Đối tượng trong phạm vi đề tài hướng đến:

 Những chuỗi cửa hàng có hệ thống chi nhánh lớn

 Tệp khách hàng của cửa hàng/ chuỗi cửa hàng

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

 Cách tiếp cận: ứng dụng được xây dựng dựa theo kiến trúc microservices

 Nhóm đã sử dụng các phương pháp nghiên cứu:

 Phương pháp đọc tài liệu

 Phương pháp phân tích những ứng dụng hiện có hiện có

 Phương pháp thực nghiệm

5 Kết quả dự kiến

Sau khi xác định đề tài và nghiên cứu, tìm hiểu thực tế, nhóm đã xây dựng ý tưởng thiết kế ứng dụng đặt đồ ăn/ thức uống online cần đạt được những mục tiêu sau:

 Hoàn thành ứng dụng đặt hàng online, đáp ứng các yêu cầu nghiệp vụ đã đề

ra

 Ứng dụng tạo được sự thân thiện với người dùng, dễ sử dụng

 Hiểu rõ, nắm vững kiến thức của công nghệ được sử dụng trong đề tài

Kế hoạch thực hiện: (Mô tả kế hoạch làm việc và phân chia công việc các thành viên

tham gia)

Với thời gian thực hiện từ 01/09/2020 tới 02/01/2021, nhóm chia thành 6 sprint với 2 giai đoạn cụ thể:

 Giai đoạn 1: Khảo sát hiện trạng, tìm hiểu các ứng dụng hiện có trên thị

trường, tìm hiểu công nghệ sử dụng, phân tích thiết kế hệ thống,

 Sprint 1: Chọn đề tài, khảo sát các ứng dụng hiện có

 Sprint 2: Tìm hiểu nghiệp vụ và thiết kế giao diện cho ứng dụng

 Sprint 3: Xác định và đặc tả chức năng

 Sprint 4: Tìm hiểu công nghệ được xác định sử dụng trong đề tài

Sprint Hồ Nguyễn Nhật Tiến Huỳnh Nguyễn Quang Tín

Khảo sát ứng dụng hiện có: The Coffee House,

Tìm hiểu Flutter

Tìm hiểu ReactJs

 Giai đoạn 2: Hoàn thành ứng dụng và kiểm thử Viết báo cáo đề tài

 Sprint 5: Xây dựng API, xây dựng UI, xây dựng trang quản trị

 Sprint 6: Hoàn thành sản phẩm

Sprint Hồ Nguyễn Nhật

Tiến

Huỳnh Nguyễn Quang Tín

5 (08/10/2020 –

26/12/2020)

Xây dựng services

Kiểm thử các chức năng

Xây dựng trang quản trị

Xây dựng giao diện ứng dụng phía client

Kiểm thử các chức năng

Xây dựng trang quản trị

6 (26/12/2020 –

(Ký tên và ghi rõ họ tên)

Huỳnh Nguyễn Quang Tín

LỜI CẢM ƠN Lời đầu tiên, em xin chân thành cảm ơn ban giám hiệu nhà trường, các thầy cô của Trường Đại học Công Nghệ Thông Tin nói chung và các thầy cô trực thuộc khoa Công Nghệ Phần Mềm nói riêng, những người luôn tận tình dạy hỗ, truyền đạt cho em nhiều kiến thức mới mẻ và bổ ích trong suốt thời gian mà em theo học tại trường

Đặc biệt, em xin gửi đến thầy Trần Anh Dũng và thầy Nguyễn Tất Bảo Thiện lời cảm ơn chân thành và sâu sắc nhất Cảm ơn thầy cô vì đã tận tình chỉ bảo, hướng dẫn và chia sẻ nhiều kinh nghiệm quý báu trong suốt những ngày em làm luận văn Nếu không được thầy cô quan tâm, không có những lời góp ý dẫn của thầy cô thì nhóm em đã không thể hoàn thành khoá luận tốt nghiệp một cách trọn vẹn được

Đồng thời, chúng em cũng muốn được thể hiện lòng biết ơn của mình đến các bạn cùng lớp làm khoá luận, các anh chị đồng nghiệp đã luôn động viên, giúp đỡ và đưa ra những ý kiến đóng góp vô cùng bổ ích Nhờ có những góp ý từ mọi người mà em có thể nhận ra những mặt hạn chế còn tồn tại trong bài luận của mình để từ đó cố gắng hoàn thiện nó một cách tốt nhất có thể

Trong suốt quá trình làm khoá luận em luôn cố gắng làm mọi thứ thật tốt Tuy nhiên có thể vẫn sẽ không tránh khỏi những sai sót Vì vậy em rất mong nhận được thật nhiều những lời góp ý quý giá từ phía thầy cô, bạn bè và tất cả mọi người quan tâm đến bài luận của em

Sau cùng, em xin kính chúc toàn thể quý thầy cô thật nhiều sức khoẻ, nhiệt huyết

và luôn thành công trong sự nghiệp giảng dạy của mình

TP Hồ Chí Minh, tháng 01 năm 2021

Sinh viên thực hiện Huỳnh Nguyễn Quang Tín

Hồ Nguyễn Nhật Tiến

MỤC LỤC

NGƯỜI NHẬN XÉT 4

NGƯỜI NHẬN XÉT 6

CHƯƠNG 1 TỔNG QUAN ĐỀ TÀI 2

1.1 GIỚI THIỆU ĐỀ TÀI 2

1.2LÝ DO CHỌN ĐỀ TÀI 2

1.3MỤC TIÊU 3

1.4PHƯƠNG PHÁP THỰC HIỆN 3

1.5Ý NGHĨA THỰC TIỄN 4

1.6KẾT QUẢ DỰ KIẾN 4

CHƯƠNG 2 TÌM HIỂU FLUTTER 5

2.1FLUTTER 5

2.3KIẾN TRÚC FLUTTER 10

2.4WIDGET 11

2.5ANIMATION 17

2.6SỬ DỤNG PLATFORM-SPECIFIC CODE 21

2.7PACKAGE 25

CHƯƠNG 3 TÌM HIỂU CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI 27

3.1ECHO FRAMEWORK 27

3.2MICROSERVICES 28

3.3REDIS 30

3.4GOOGLE MAPS API 32

3.5FIREBASE CLOUD MESSAGING 33

3.6DOCKER 33

3.7NATS.IO 36

3.8KRAKEND 37

3.9TWILIO 39

3.10GOOGLE CLOUD STORAGE 40

3.11MYSQL 40

CHƯƠNG 4 XÂY DỰNG ỨNG DỤNG ĐẶT HÀNG ONLINE DÀNH CHO CHUỖI CỬA HÀNG 41

4.1ĐẶT VẤN ĐỀ 41

4.2TÌM HIỂU CÁC ỨNG DỤNG TƯƠNG TỰ 42

4.3XÂY ĐỊNH VÀ PHÂN TÍCH YÊU CẦU 42

4.5KIẾN TRÚC HỆ THỐNG 48

4.6THIẾT KẾ CƠ SỞ DỮ LIỆU 50

4.7THIẾT KẾ GIAO DIỆN 74

CHƯƠNG 5 KẾT LUẬN 95

5.1KẾT QUẢ ĐẠT ĐƯỢC 95

5.2THUẬN LỢI VÀ KHÓ KHĂN 95

5.3HƯỚNG PHÁT TRIỂN: 96

DANH MỤC HÌNH

Hình 2.1: Các công ty sử dụng Flutter 6

Hình 2.2: Kiến trúc Flutter 10

Hình 2.3: Minh họa cây widget của một chương trình Flutter đơn giản 12

Hình 2.4: Widget tree, Element tree, Render tree 14

Hình 2.5: Vòng đời của stateful widget 15

Hình 2.6: Kênh giao tiếp giữa ứng dụng Flutter và Platform host 22

Hình 3.1: Kiến trúc Microservices 28

Hình 3.2: Logo redis 30

Hình 3.3 Mô tả cách hoạt động của NATS 37

Hình 3.4 So sánh KrankenD với các sản phẩm hiện có trên thị trường Dựa trên số requests/giây trong kiều kiện như nhau 39

Hình 4.1: Sơ đồ Usecase khách hàng sử dụng ứng dụng 43

Hình 4.2: Sơ đồ Usecase Admin phần 1 44

Hình 4.3: Sơ đồ Usecase Admin phần 2 45

Hình 4.4: Sơ đồ Usecase nhân viên cửa hàng 46

Hình 4.5: Kiến trúc hệ thống 50

Hình 4.6: Màn hình đăng nhập 74

Hình 4.7: Màn hình nhập mã OTP 75

Hình 4.8: Màn hình tạo thông tin tài khoản 76

Hình 4.9: Màn hình trang chủ 77

Hình 4.10: Màn hình danh sách sản phẩm theo danh mục 78

Hình 4.11: Màn hìn chi tiết sản phẩm 79

Hình 4.12: Màn hình thêm sản phẩm 80

Hình 4.13: Màn hình danh sách cửa hàng 81

Hình 4.14: Màn hình chi tiết cửa hàng 82

Hình 4.15: Màn hình thông tin cá nhân 83

Hình 4.16: Màn hình chỉnh sửa thông tin cá nhân 84

Hình 4.17: Màn hình danh sách ưu đãi 85

Hình 4.18: Màn hình chi tiết ưu đãi 86

Hình 4.19: Màn hình xác nhận đổi ưu đãi 87

Hình 4.20: Màn hình danh sách coupon 88

Hình 4.21: Màn hình chi tiết Coupon 89

Hình 4.22: Màn hình giỏ hàng 90

Hình 4.23: Màn hình tìm kiếm địa chỉ 91

Hình 4.24: Màn hình thông tin thành viên 92

Hình 4.25: Màn hình của hàng ưu đãi 93

Hình 4.26: Màn hình tài khoản 94

DANH MỤC BẢNG

Bảng 1.1 Bảng so sánh Flutter và React Native 9

Bảng 4.1: Danh sách và ý nghĩa các Actor 42

Bảng 4:2: Danh sách các Usecase của hệ thống 48

Bảng 4.3: Danh sách các thuộc tính của bảng Accounts 51

Bảng 4.4: Danh sách các thuộc tính của bảng Customers 51

Bảng 4.5 Danh sách các thuộc tính của bảng Branchs 52

Bảng 4.6: Danh sách các thuộc tính của bảng Account_Branch 53

Bảng 4.7 Danh sách các thuộc tính của bảng Discount_code 54

Bảng 4.8: Danh sách các thuộc tính của bảng Lables 55

Bảng 4.9: Danh sách các thuộc tính của bảng Rewards 56

Bảng 4.10: Danh sách các thuộc tính của bảng Reward_categories 56

Bảng 4.11: Danh sách các thuộc tính của bảng Customer_coupon 57

Bảng 4.12: Danh sách các thuộc tính của bảng Discount_code_details 57

Bảng 4.13 Danh sách các thuộc tính của bảng History_add_point 58

Bảng 4.14: Danh sách các thuộc tính của bảng Points 58

Bảng 4.15: Danh sách các thuộc tính của bảng Config_exhange_points 59

Bảng 4.16: Danh sách các thuộc tính của bảng Orders 60

Bảng 4.17: Danh sách các thuộc tính của bảng Payments 61

Bảng 4.18: Danh sách các thuộc tính của bảng Transactions 62

Bảng 4.19: Danh sách các thuộc tính của bảng Transaction_Orders 62

Bảng 4.20: Danh sách các thuộc tính của bảng Order_Details 63

Bảng 4.21: Danh sách các thuộc tính của bảng Order_Detail_Toppings 63

Bảng 4.22: Danh sách các thuộc tính của bảng Categories 64

Bảng 4.23: Danh sách các thuộc tính của bảng Products 65

Bảng 4.24: Danh sách các thuộc tính của bảng Attributes 66

Bảng 4.25: Danh sách các thuộc tính của bảng Toppings 66

Bảng 4.26: Danh sách các thuộc tính của bảng Attribute_values 67Bảng 4.27: Danh sách các bảng thuộc tính của bảng Attribute_value_products 68Bảng 4.28: Danh sách các thuộc tính của bảng Discount_products 68Bảng 4.29: Danh sách các thuộc tính của bảng Comments 69Bảng 4.30: Danh sách các thuộc tính của bảng Ratings 70Bảng 4.31: Danh sách các thuộc tính của bảng Topping_Products 70Bảng 4.32: Danh sách các thuộc tính của bảng NewsCategory 71Bảng 4.33: Danh sách các thuộc tính của bảng Posts 72Bảng 4.34: Danh sách các thuộc tính của bảng Message_notifications 72Bảng 4.35: Danh sách các thuộc tính của bảng Notification_token_accounts 73

DANH MỤC VIẾT TẮT

8 REST Representational State Stransfer

14 RDBMS Relational Database Management System

1

TÓM TẮT KHÓA LUẬN – Tổng quan đề tài: đặt vấn đề, lý do chọn đề tài và mục tiêu dự kiến

– Nghiên cứu về các công nghệ sẽ sử dụng để thực hiện đề tài: kiến trúc Microservices, Flutter Framework, Echo Framework, …

– Tìm hiểu về nhu cầu

– Nghiên cứu các ứng dụng đặt hàng dành cho chuỗi cửa hàng trên thị trường

– Đưa ra các giải pháp để giải quyết những khó khăn đó

– Xây dựng ứng dụng đặt hàng online, phân tích các use case, tính năng cần có cho ứng dụng

– Thiết kế kiến trúc hệ thống, thiết kế cơ sở dữ liệu và giao diện cho ứng dụng di động – Triển khai ứng dụng lên server

– Tổng hợp kết quả đã đạt được, phân tích thuận lời và khó khăn cũng như đề ra hướng phát triển trong tương lai cho ứng dụng

2

Chương 1 TỔNG QUAN ĐỀ TÀI

1.1 Giới thiệu đề tài

Ngày nay, nhiều cửa hàng đồ ăn thức uống được mở ra nhằm phục vụ nhu cầu ăn uống của con người Người dùng thường sử dụng các dịch vụ đặt hàng và giao hàng như GrabFood, GoFood, Beamin,… Điều này làm đem lại sự tiện lợi cho cả khách hàng và cửa hàng Nhưng đối với những cửa hàng lớn, việc này có thể đem lại bất lợi cho những cửa hàng đó Bởi vì thông qua các ứng dụng đặt hàng, vô tình một cửa hàng và các cửa hàng đối thủ đang sử dụng chung một tệp khách hàng tuy nhu cầu, sở thích ăn uống khác nhau Có người thích cửa hàng A, có người thích cửa hàng B, nếu vô tình 2 bên có sự chênh lệch về khuyến mãi thì việc mất đi một lượng khách hàng của 1 trong 2 cửa hàng

nêu trên có thể sẽ xảy ra Vì vậy, nhóm em quyết định chọn đề tài “Tìm hiểu Flutter và

xây dựng ứng dụng đặt hàng online” nhằm mục đích tạo ra một ứng dụng đặt hàng

cho một chuỗi cửa hàng bán đồ ăn thức uống cố định

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

Ngày nay, công nghệ thông tin ngày một phát triển, kéo theo đó là sự bùng nổ của các thiết bị điện tử, đặc biệt là điện thoại thông minh và máy tính Nếu như trước đây việc sở hữu một chiếc điện thoại thông minh hay máy tính khá khó khăn thì ngày nay

do sự cạnh tranh gay gắt giữa các thương hiệu khiến giá thành những thiết bị này rẻ hơn

và việc sở hữu chúng trở nên dễ dàng hơn Vì thế nhu cầu phát triển ứng dụng cho các thiết bị này càng ngày càng tăng cao

Để tiếp cận đến nhiều người dùng, các nhà phát triển ứng dụng mong muốn ứng dụng của họ chạy được trên nhiều nền tảng đặc biệt là Android, iOS, Windows, MacOS

và web Thay vì phải tìm hiểu nhiều ngôn ngữ, công nghệ khác nhau ứng với từng nền tảng thì hiện nay trên thị trường có nhiều công cụ hỗ trợ lập trình đa nền tảng như Flutter, React Native, Ionic, … giúp các nhà phát triển ứng dụng tiết kiệm thời gian, chi phí dành cho quá trình phát triển ứng dụng

3

Trong số đó có Flutter mặc dù là công cụ ra đời muộn nhất nhưng có tốc độ phát triển vượt trội và nhiều ưu điểm so với các công nghệ đi trước, nhiều công ty công nghệ lớn sử dụng Flutter để phát triển sản phẩm của mình như Google, Alibaba, Tencent, … Ứng dụng xây dựng với Flutter hoạt động với hiệu năng mạnh mẽ và hiếm có vấn

đề về mặt tương thích, ngoài ra đây còn là công cụ mã nguồn mở nên ngày càng nhiều lập trình viên và công ty quan tâm đến công nghệ mới này

Đây là lý do nhóm chọn đề tài khóa luận tốt nghiệp là “Tìm hiểu Flutter và xây dựng ứng dụng đặt hàng online”

- Tham khảo các ứng dụng tương tự hiện có trên thị trường

- Nghiên cứu các công nghệ để áp dụng

- Phát triển ứng dụng

- Đưa cho một số người dùng sử dụng thử để lấy ý kiến phản hồi

- Kiểm thử và hoàn thiện ứng dụng

o Đăng nhập sử dụng số điện thoại cá nhân

o Thêm sản phẩm vào giỏ hàng

o Sử dụng coupon phù hợp cho giỏ hàng

5

o Tích điểm khi đặt hàng

o Quy đổi điểm thành ưu đãi

Chương 2 TÌM HIỂU FLUTTER

2.1 Flutter

2.1.1 Tổng quan và lịch sử

Flutter là một bộ công cụ phát triển phần mềm mã nguồn mở giúp các lập trình viên xây dựng ứng dụng trên nền tảng di động, web và máy tính với một codebase duy nhất Flutter được giới thiệu vào năm 2015 sau đó được thử nghiệm và phát triển cho đến khi

ra mắt phiên bản chính thức vào ngày 4 tháng 12 năm 2018 Từ đó Flutter đã phát triển mạnh mẽ và trở thành đối thủ đáng gồm với các công cụ lập trình đa nền tảng trước đó, hiện tại thì Flutter đang là một trong những giải pháp phát triển ứng dụng đa nền tảng được sử dụng nhiều nhất với cộng đồng không ngừng phát triển Flutter đang là ứng dụng

có số sao đứng thứ 17 trên github Tháng 4 năm 2020 theo thống kê của Google có hơn hai triệu lập trình viên đã sử dụng Flutter và hơn 50.000 ứng dụng sử dụng Flutter được đưa lên PlayStore Chỉ sau một tháng con số đó đã lên tới 60.000

Flutter được sử dụng để phát triển nhiều ứng dụng nổi tiếng phục vụ hàng trăm triệu người dùng trên thế giới

6

Hình 2.1: Các công ty sử dụng Flutter

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

2.1.2.1 Ưu điểm

Tiết kiệm thời gian và nhân lực: Flutter là một công cụ lập trình đa nền

tảng, vì vậy ta có thể tạo ứng dụng cho cả Android và iOS Từ đó tiết kiệm được thời gian và nguồn nhân lực khi phát triển, kiểm thử, cập nhật và bảo trì

Hiệu năng tuyệt vời: Flutter sử dụng ngôn ngữ Dart, sẽ được biên dịch trực

tiếp thành mã máy mà không phải thông qua các cách giao tiếp trung gian khác

Vì thế ứng dụng sẽ hoạt động với hiệu năng cao hơn các công cụ phát triển ứng dụng đa nền tảng khác

Hỗ trợ hot reload: Hot reload cho phép trực tiếp thay đổi giao diện trên máy

ảo hay thiết bị thật mà không cần phải rebuild hay khởi động lại ứng dụng, từ đó tiết kiệm thời gian của lập trình viên và giúp việc xây dựng ứng dụng, sửa lỗi dễ dàng hơn

Khả năng tương thích: Flutter sử dụng giao diện của chính nó nên lập trình

viên sẽ gặp ít vấn đề liên quan tới khả năng tương thích hơn vì các giao diện này

ít gặp sự vấn đề trên các phiên bản hay hệ điều hành khác nhau

7

Mã nguồn mở: Flutter là một công nghệ mã nguồn mở được phát triển bởi

Google và cộng đồng lập trình viên hoạt động tích cực Việc phát triển và ra mắt ứng dụng với Flutter hoàn toàn miễn phí Nhiều gói mở rộng và tài liệu được đóng góp giúp việc phát triển phần mềm bằng Flutter trở nên dễ dàng hơn

2.1.2.2 Nhược điểm

Phải học ngôn ngữ mới: Nếu muốn lập trình với Flutter, lập trình viên cần

phải học một ngôn ngữ mới là Dart Tuy nhiên đây không phải vấn đề lớn vì Dart

là một ngôn ngữ dễ học

Không phù hợp để xây dựng ứng dụng thuần theo giao diện Android hay iOS: một vài ứng dụng xây dựng giao diện thuần theo Android hay iOS sẽ không

phù hợp với Flutter

Kích thước ứng dụng lớn: vì Flutter không sử dụng giao diện trong hệ điều

hành mà sử dụng thư viện của nó nên kích thước hiện tại của ứng dụng khá lớn Tuy nhiên Google nói rằng sẽ cải thiện điều này trong tương lai

Công nghệ còn mới và các thư viện có sẵn chưa đa dạng: Flutter mới được

giới thiệu bản chính thức chưa được 3 năm, vì vậy vẫn còn nhiều lỗi và vấn đề chưa được giải quyết Cộng đồng tuy đang phát triển nhưng số lượng thư viện vẫn chưa thật sự đa dạng

2.1.3 So sánh Flutter với React Native

8

Hiệu năng Dart được biên dịch thành

native code và được thực thi trên thiết bị Cho nên Flutter đạt được hiệu năng cao hơn so với React Native

Mã JavaScript được biên dịch sang mã native (Java/Kotlin cho Android, Object-C/ Swift cho iOS) khi chạy chương trình thông qua JavaScript Bridge

Chia sẻ code giữa

các nền tảng

- Android và iOS -Chưa hỗ trợ các thiết bị đeo

-Android và iOS -Chính thức hỗ trợ AppleTV và AndroidTV

-Đang phát triển cho nền tảng web và máy tính

Giao diện người

dùng

-Vì chỉ có một codebase nên ứng dụng sẽ hoạt động giống nhau trên Android và iOS

Nhưng người dùng có thể sử dụng các widget của material

và cupertino đã được bao gồm trong Flutter để giao diện giống

-Các component (thành phần giao diện trong React Native) sẽ

có giao diện giống như ứng dụng native Khi cập nhật hệ điều hành, các component này sẽ tự động được cập nhật

-Các component sẵn có không

đa dạng như Flutter nên lập trình

9

-Fluttter cung cấp nhiều hiệu ứng animation widget sẵn có

viên thường tìm đến các component bên thứ ba

Cộng đồng -Cộng đồng ngày càng lớn

mạnh với tốc độ tăng nhanh

-Số lượng thư viện chưa nhiều như React Native nhưng đang dần phát triển với tốc độ rất nhanh

Dart là ngôn ngữ mã nguồn mở và miễn phí, được phát triển trên Github Phiên bản mới nhất hiện nay là 2.9.0

Dart hỗ trợ hai cách biên dịch là “Just In Time” (JIT) và “Ahead Of Time” (AOT)

- Với Flutter, khi release ứng dụng ngôn ngữ Dart được biên dịch AOT thành các thư viện native, ARM, x86 Sau đó tất cả các thư viện này và resource được dựng thành file apk hoặc ipa Với cách này khi chạy ứng sẽ có hiệu năng tốt nhất, dung lượng nhỏ hơn và loại bỏ những thứ không cần thiết

- Khi trong chế độ debug Dart sẽ được biên dịch JIT ngay khi ứng dụng đang chạy, những gì lập trình viên thay đổi sẽ được cập nhật ngay lập tức nhờ đó tạo

sự thuận tiện trong quá trình phát triển phần mềm

10

2.3 Kiến trúc Flutter

Flutter gồm hai tầng chính là Engine và Framework

- Tầng engine chứa một thư viện đồ họa 2D giúp render giao diện người dùng và máy ảo Dart là môi trường để thực thi mã và biên dịch mã Dart Đây cũng là nơi thực hiện việc kết nối với hệ thống

- Flutter framework: được viết bằng Dart, cung cấp các lớp, chức năng và widget được dùng để tạo ứng dụng Flutter Lập trình viên sẽ sử dụng chủ yếu tầng này

để lập trình Flutter framework cung cấp hai tập hợp widget là Material và Cupertino ứng với hai hệ điều hành Android và iOS

Hình 2.2: Kiến trúc Flutter

Các widget trong chương trình được tổ chức dưới dạng cây, widget chứa các widget khác gọi là widget cha, widget được chứa trong widget khác gọi là widget con Ngay cả ứng dụng Flutter cũng là một widget lớn chứa các widget khác

Ví dụ: Một ứng dụng flutter đơn giản sử dụng widget material

12

Hình 2.3: Minh họa cây widget của một chương trình Flutter đơn giản

2.4.2 Phân loại widget

Widget gồm hai loại là “Stateless widget” và “Stateful widget

- Stateless widget: loại widget chuyên dùng để chỉ hiển thị dữ liệu Chúng không thay đổi khi ứng dụng đang chạy

Ví dụ: Tạo một stateless widget

Ví dụ: Tạo một stateful widget

2.4.3 Khái niệm về Widget tree và Element tree

Widget tree là tất cả các widget trong chương trình, ta có thể tác động trực tiếp tới widget tree thông qua các đoạn mã Widget tree có thể xem là các cấu hình ta có thể thiết lập, nó không trực tiếp được vẽ lên màn hình mà nó mô tả những gì sẽ được

vẽ lên màn hình Widget tree sẽ thay đổi mỗi khi widget được thay mới hoặc rebuild Element tree được tạo flutter framework dựa trên widget tree, có nhiệm vụ liên kết các widget trong widget tree với các đối tượng được vẽ lên màn hình Element tree không phải lúc nào cũng thay đổi khi widget rebuild

Render tree chứa các đối tượng được vẽ lên màn hình, render tree ít khi thay đổi

14

Hình 2.4: Widget tree, Element tree, Render tree

2.4.4 Vòng đời của stateful widget

Vòng đời của một stateful widget trải qua các bước sau:

- createState: hàm này tạo một State ứng với Stateful element Bước này được gọi

để tạo widget

- initState: hàm này được gọi ngay sau khi widget được tạo ra, ở đây ta thường

khởi tạo giá trị cho dữ liệu của stateful widget

- dirty: khi thuộc tính dirty của stateful widget có giá trị là true Flutter framework

sẽ biết rằng widget này sẽ được vẽ lại ở khung hình sau Lúc này một widget mới được tạo để sẵn sàng thay thế cho widget cũ trong widget tree

- build: hàm này thực hiện vẽ widget lên màn hình

- clean: thuộc tính dirty có giá trị là false, widget không cần vẽ lại ở khung hình

sau

- didUpdateWidget: hàm này được gọi khi dữ liệu của widget cha thay đổi và

widget này phải vẽ lại, giá trị dirty sẽ được đặt là true

15

- setState: hàm này sẽ thay đổi giá của dữ liệu trong state và thông báo với

framework rằng state hiện tại có thay đổi, giá trị dirty sẽ được đặt là true Hàm này

có thể được gọi bởi frameowork hoặc lập trình viên

- dispose: hàm này được gọi khi State object bị xóa khỏi widget tree

Hình 2.5: Vòng đời của stateful widget

2.4.5 Các widget quan trọng

2.4.5.1 Widget tạo ứng dụng/thiết lập trang

MaterialApp/ CupertinoApp: widget gói nhiều widget thường dùng để xây

dựng ứng dụng theo phong cách có sẵn cho Android và iOS Widget này cung cấp các chức năng như tương tác phím vật lý, vuốt để lùi, tùy chỉnh chủ đề, … đây là widget vô cùng quan trọng để quyết định phong cách của ứng dụng

16

Scaffold/ CupertinoPageScaffold: widget đóng vai trò như phần nền để bố

trí các widget khác theo phong cách Material (Android) hoặc Cupertino (iOS) Loại widget này cung cấp nơi để đặt các widget như NavigationBar, AppBar, BottomSheet, …

2.4.5.2 Widget dùng để bố trí

Container: một widget rất đa dụng và thường được sử dụng trong Flutter

Widget này có thể kích thước tùy chỉnh, thêm viền, tô màu, chỉnh hình dáng, …

Nó có thể chứa một widget con và căn chỉnh widget con theo nhiều cách khác nhau

Row/ Column: dùng để đặt nhiều widget cạnh nhau theo chiều ngang hoặc dọc

Các widget con có thể được căn chỉnh theo nhiều cách khác nhau Để tạo kiểu Row/ Column, lập trình viên thường kết hợp sử dụng với Container

Flexible/ Expanded: giúp tùy chỉnh kích thước của widget trong Row hoặc

Column

Stack: dùng để đặt nhiều widget chồng lên nhau, khi dùng Stack có thể dùng

widget Positioned để hỗ trợ đặt widget ở một vị trí dễ dàng hơn

Card: một Container có sẵn các thiết lập tạo kiểu như đổ bóng, màu nền, bo tròn

góc,

…

2.4.5.3 Widget cuộn

GridView: dùng để chứa tập hợp nhiều widget con và được sắp xếp theo

dạng lưới Thường dùng để chứa dữ liệu dạng chuỗi và có số lượng lớn

ListView: dùng để chứa tập hợp nhiều widget con, giống như Row và

Column nhưng có thể cuộn Thường dùng để chứa dữ liệu dạng chuỗi và có số lượng lớn

17

ListTile: một container đã được tạo kiểu sẵn thường dùng để tạo các phần tử

con trong danh sách Mỗi ListTile hỗ trợ tạo widget với phần đầu, tiêu đề, các nút hành động Widget tiện dụng để tạo UI cho nhiều loại ứng dụng trên thị trường

2.4.5.4 Widget dùng để chứa nội dung

Text: widget dùng để chứa văn bản, văn bản có thể được chỉnh kiểu, chỉnh

cách hiển thị, … Đây là một trong những widget không thể thiếu với Flutter

Image: widget dùng để chứa và hiển thị ảnh, hỗ trợ từ nhiều nguồn (trong bộ

nhớ, từ internet, …)

Icon: dùng để hiển thị biểu tượng, hỗ trợ nhiều biểu tượng đa dạng theo

phong cách Material, Cupertino Có thể thêm nhiều biểu tượng từ bên ngoài một cách dễ dàng

2.4.5.5 Widget nhận đầu vào của người dùng

TextField: tạo ra một trường để người dùng có thể nhập văn bản, hỗ trợ nhiều

loại bàn phím

RaiseButton/ FlatButton/ IconButton: các loại nút bấm để tương tác với

ứng dụng, dùng để xử lý hành động khi nhấn qua thuộc tính onPress

GestureDetector: có thể kết hợp với hầu hết mọi loại widget để xử lý các

hành động của người dùng như bấm, nhấp đôi, vuốt, kéo, … trên các widget này

2.5 Animation

2.5.1 Khái niệm

Animation là một trong những ưu điểm của Flutter so với các công nghệ lập trình

đa nền tảng khác Với Flutter lập trình viên có thể dễ dàng tạo ra các hiệu ứng chuyển động mượt mà và bắt mắt thông qua đó nâng cao trải nghiệm người dùng