Xây dựng ứng dụng quản lý phòng trọ bằng flutter framework

Tìm hiểu cách xây dựng ứng dụng dùng Flutter Framework và kết hợp với các công cụ trên Google Firebase Authentication, Cloud Firestore, Cloud Functions, Cloud Storage, Cloud Messaging, R

BỘ GIÁO DỤC VÀ ĐÀO TẠO

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

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ PHẦN MỀM

KHÓA 2016 – 2020

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

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

—&œ–

XÂY DỰNG ỨNG DỤNG QUẢN LÝ PHÒNG TRỌ

BẰNG FLUTTER FRAMEWORK

KHOÁ LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIẢNG VIÊN HƯỚNG DẪN

TS NGUYỄN THIÊN BẢO

NGUYỄN VĂN RUM – 16110438

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

KHOA CÔNG NGHỆ THÔNG TIN

KHOÁ LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIẢNG VIÊN HƯỚNG DẪN

TS NGUYỄN THIÊN BẢO

KHÓA 2016 – 2020

ĐH SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

*******

CH XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên: Nguyễn Văn Rum MSSV: 16110438

Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng ứng dụng quản lý phòng trọ bằng Flutter Framework

Họ và tên Giáo viên hướng dẫn: Nguyễn Thiên Bảo

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không? 5 Đánh giá loại: 6 Điểm: Tp Hồ Chí Minh, ngày … tháng … năm ……

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

ĐH SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

*******

CH XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên: Nguyễn Văn Rum MSSV: 16110438

Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng ứng dụng quản lý phòng trọ bằng Flutter Framework

Họ và tên Giáo viên phản biện:

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không? 5 Đánh giá loại: 6 Điểm: Tp Hồ Chí Minh, ngày … tháng … năm ……

Giáo viên phản biện (Ký & ghi rõ họ tên)

i

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và tên sinh viên thực hiện: Nguyễn Văn Rum Mã số SV: 16110438 Thời gian làm luận văn: từ 01/03/2020 đến 31/07/2020

Chuyên ngành: Công nghệ phần mềm

Tên luận văn: Xây dựng ứng dụng quản lý phòng trọ bằng Flutter Framework

Giảng viên hướng dẫn: TS Nguyễn Thiên Bảo

Nhiệm vụ của luận văn:

1 Tìm hiểu Flutter Framework Hệ điều hành, công cụ phát triển SDK Android và iOS

2 Tìm hiểu cách xây dựng ứng dụng dùng Flutter Framework và kết hợp với các công

cụ trên Google Firebase (Authentication, Cloud Firestore, Cloud Functions, Cloud Storage, Cloud Messaging, Remote Config, Dynamic Links, Events)

3 Xây dựng ứng dụng quản lý phòng trọ bằng Flutter Framework kết hợp với các công

cụ trên Google Firebase

Đề cương viết luận:

MỤC LỤC

MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

2 MỤC ĐÍCH CỦA ĐỀ TÀI

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

4 PHÂN TÍCH NHỮNG CÔNG TRÌNH CÓ LIÊN QUAN

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

NỘI DUNG

CHƯƠNG 1: TỔNG QUAN VỀ FLUTTER FRAMEWORK

1.1 GIỚI THIỆU FLUTTER FRAMEWORK

1.1.1 Khái niệm

1.2.2 Công cụ phát triển phần mềm Android SDK

1.2.3 Giới thiệu hệ điều hành iOS

1.2.4 Công cụ phát triển phần mềm iOS Kit

1.3 NGÔN NGỮ LẬP TRÌNH DART

2.3.1 Giới thiệu

2.3.2 Cú pháp căn bản

2.3.3 Lập trình hướng đối tượng với Dart

2.3.4 Một số tính năng ngôn ngữ nổi bật

1.4 PHÁT TRIỂN ỨNG DỤNG VỚI FLUTTER FRAMEWORK 1.4.1 Môi trường, công cụ phát triển, IDE

1.4.2 Khái niệm Widget

1.4.3 Giới thiệu những Widget cơ bản

1.4.4 Xử lý những cử chỉ tương tác (Gesture)

1.4.5 Thiết kế giao diện, bố cục (Layout)

1.4.6 Điều hướng và chuyển trang (Navigation, Routing)

1.4.7 Trang trí, điều chỉnh thuộc tính Widget

1.4.8 Quản lý trạng thái (State) của Widget

CHƯƠNG 2: TỔNG QUAN VỀ GOOGLE FIREBASE SERVICES

2.1 GIỚI THIỆU GOOGLE FIREBASE

2.2 CÁC DỊCH VỤ TRÊN GOOGLE FIREBASE

2.2.9 Analytics, Tracking Events

CHƯƠNG 3: LỢI ÍCH VÀ THÁCH THỨC TRONG ỨNG DỤNG CÔNG NGHỆ FLUTTER FRAMEWORK KẾT HỢP VỚI GOOGLE FIREBASE

3.1 LỢI ÍCH CỦA SỰ KẾT HỢP

3.1.1 Ứng dụng hiệu năng tốt, mượt mà

3.1.2 Triển khai nhanh, giảm chi phí bảo trì phát triển

3.1.3 Hệ thống ổn định, nhanh, tự mở rộng

3.1.4 Tập trung vào sản phẩm

3.2 NHỮNG THÁCH THỨC VÀ RỦI RO

3.2.1 Hệ thống phụ thuộc vào bên thứ ba (Google)

3.2.2 Khả năng tuỳ biến hệ thống

3.2.3 Ước tính chi phí phát sinh cho hệ thống

CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG QUẢN LÝ PHÒNG TRỌ BẰNG

FLUTTER FRAMEWORK KẾT HỢP VỚI GOOGLE FIREBASE

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

4.2 ĐẶC TẢ ỨNG DỤNG

4.2.1 Tổng hợp các yêu cầu chức năng

iv

4.2.2 Mô hình Usecase

4.2.3 Kiến trúc hệ thống

4.4 THIẾT KẾ GIAO DIỆN

4.3 THIẾT KẾ HỆ THỐNG DỮ LIỆU VỚI CLOUD FIRESTORE

4.5 TÍCH HỢP CHỨC NĂNG VỚI CÁC DỊCH VỤ KHÁC CỦA GOOGLE FIREBASE

4.5.1 Đăng nhập với Firebase Authentication (Google Mail)

4.5.2 Nhận thông báo Notification với Cloud Function, Cloud Messaging 4.5.3 Cấu hình giao diện động với Remote Config

4.5.4 Quản lý lỗi, hiệu năng ứng dụng qua Crashlytics, Performance

4.5.5 Ghi lại hành động của người dùng qua Tracking Events

4.5.6 Thống kê, báo cáo qua Analytics

4.5.7 Mở ứng dụng qua Dynamic Links

v

2 02/04/2020 – 12/04/2020

- Tìm hiểu về nền tảng Android, iOS

- Làm quen với Xcode, iOS Kit

- Cách cấu hình một số thông tin ở ứng dụng Flutter trên Android SDK và iOS Kit

2 12/04/2020 – 24/04/2020 - Tìm hiểu về các dịch vụ trên Firebase

3 24/04/2020 – 04/05/2020

- Tìm hiểu cách xây dựng ứng dụng Flutter kết hợp với Firebase

- Tìm kiểu về Cloud Firestore API dùng trên Flutter

4 04/05/2020 – 10/05/2020 - Thiết kế dữ liệu với Cloud Firestore

5 10/05/2020 – 17/05/2020

- Cách cấu hình Cloud Messaging, Crashlytics, Performance, Dynamic Links trên ứng dụng Android, iOS

6 17/05/2020 – 10/07/2020

- Khảo sát, thiết kế chức năng, dữ liệu

- Xây dựng giao diện ứng dụng

- Hoàn thiện các chức năng của ứng dụng

7 10/07/2020 – 31/07/2020 - Hoàn thiện báo cáo, chuẩn bị bài

thuyết trình

Ý kiến của giáo viên hướng dẫn

Hồ Chí Minh, ngày 01 tháng 03 năm 2020

Người viết đề cương

Nguyễn Văn Rum

vi

LỜI CẢM ƠN

Để hoàn thành tốt Khoá luận tốt nghiệp nói chung và tìm hiểu, nghiên cứu và phát triển sản phẩm ứng dụng Phòng trọ sử dụng Flutter Framework nói riêng, tôi xin gửi lời cảm ơn chân thành đến:

Giảng viên TS Nguyễn Thiên Bảo, người đã giúp tôi chọn đề tài, định hình hướng nghiên cứu, tận tình hướng dẫn và chỉ bảo tôi trong suốt quá trình thực hiện Khoá luận tốt nghiệp

Quý thầy, cô giáo khoa Công Nghệ Thông Tin - Trường Đại Học Sư phạm Kỹ thuật thành phố Hồ Chí Minh đã tạo điều kiện thuận lợi, và tư vấn kiến thức cho tôi thực hiện đề tài này Các thầy, cô giáo đã dạy bảo và truyền đạt cho tôi rất nhiều kiến thức, giúp tôi có được một nền tảng kiến thức vững chắc sau những năm học tập tại trường

Ban giám hiệu trường Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh đã tạo điều kiện về cơ sở vật chất tốt, đáp ứng tốt nhu cầu của sinh viên, giảng viên với phòng học sạch đẹp, máy chiếu, wifi, máy lạnh, đặc biệt là Thư viện chất lượng cao đã phục vụ không gian học tập và tìm kiếm thông tin của tôi

Xin chân thành cảm ơn các bạn sinh viên cùng khoa, cùng lớp đã ủng hộ, giúp đỡ

và hỗ trợ tôi trong thời gian học tập và nghiên cứu

Do kinh nghiệm còn hạn chế nên không thể tránh khỏi những thiếu sót trong quá trình nghiên cứu phát triển, rất mong nhận được ý kiến đóng góp từ phía thầy, cô để đề tài được hoàn thiện hơn nữa

Tp Hồ Chí Minh, ngày … tháng … năm

……

Sinh viên thực hiện

Nguyễn Văn Rum

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 2

CHƯƠNG 1: TỔNG QUAN VỀ FLUTTER FRAMEWORK 3

1.1.2 Tại sao phải chọn Flutter? 3

1.1.3 So sánh với các công cụ khác 4

1.2 HỆ ĐIỀU HÀNH, CÔNG CỤ PHÁT TRIỂN ANDROID IOS 5

1.2.1 Giới thiệu hệ điều hành Android 5

1.2.2 Công cụ phát triển phần mềm Android SDK 7

1.2.3 Giới thiệu hệ điều hành iOS 8

1.2.4 Công cụ phát triển phần mềm iOS Kit 10

viii

1.3.3 Lập trình hướng đối tượng với Dart 12

1.3.4 Một số tính năng ngôn ngữ nổi bật 14

1.4 PHÁT TRIỂN ỨNG DỤNG VỚI FLUTTER FRAMEWORK 15

1.4.1 Môi trường, công cụ phát triển, IDE 15

1.4.3 Giới thiệu những Widget cơ bản 18

1.4.4 Xử lý những cử chỉ tương tác (Gesture) 20

1.4.5 Thiết kế giao diện, bố cục (Layout) 21

1.4.6 Điều hướng và chuyển trang (Navigation, Routing) 24

1.4.7 Trang trí, điều chỉnh thuộc tính Widget 24

1.4.8 Quản lý trạng thái của Widget (State) 25

1.4.9 Kiến trúc hệ thống Flutter 27

CHƯƠNG 2: TỔNG QUAN VỀ GOOGLE FIREBASE SERVICES 29

2.1 CÁC DỊCH VỤ TRÊN GOOGLE FIREBASE 30

ix

2.1.9 Analytics, Tracking Events 40

CHƯƠNG 3: LỢI ÍCH VÀ THÁCH THỨC TRONG ỨNG DỤNG CÔNG NGHỆ FLUTTER FRAMEWORK KẾT HỢP VỚI GOOGLE FIREBASE 42

3.1.1 Ứng dụng hiệu năng tốt, mượt mà 42

3.1.2 Triển khai nhanh, giảm chi phí bảo trì phát triển 42

3.1.3 Hệ thống ổn định, nhanh, tự mở rộng 42

3.2.1 Hệ thống phụ thuộc vào bên thứ ba (Google) 42

3.2.2 Khả năng tuỳ biến hệ thống 43

CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG QUẢN LÝ PHÒNG TRỌ BẰNG

FLUTTER FRAMEWORK KẾT HỢP VỚI GOOGLE FIREBASE 44

x

4.4 THIẾT KẾ HỆ THỐNG DỮ LIỆU VỚI CLOUD FIRESTORE 64

4.5 TÍCH HỢP CHỨC NĂNG VỚI CÁC DỊCH VỤ KHÁC CỦA GOOGLE

4.5.1 Đăng nhập với Firebase Authentication (Google Mail) 68

4.5.2 Nhận thông báo Notification với Cloud Function, Cloud Messaging 69

4.5.3 Cấu hình giao diện động với Remote Config 70

4.5.4 Quản lý lỗi, hiệu năng ứng dụng qua Crashlytics, Performance 72

4.5.5 Ghi lại hành động của người dùng qua Tracking Events 73

4.5.6 Thống kê, báo cáo qua Analytics 74

4.5.7 Mở ứng dụng qua Dynamic Links 74

xi

DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ

Hình 1.1 Logo hệ điều hành Android 5

Hình 1.2 Kiến trúc hệ điều hành Android 6

Hình 1.3 Logo Android Studio 7

Hình 1.4 Hệ điều hành iOS 13, iPadOS 13 8

Hình 1.5 Kiến thúc hệ điều hành iOS 9

Hình 1.6 Logo Xcode 10

Hình 1.7 Flutter sử dụng Dart làm ngôn ngữ phát triển 11

Hình 1.8 Cài đặt Flutter DevTools trên Android Studio 16

Hình 1.9 Cài đặt Flutter DevTools trên Visual Studio Code 16

Hình 1.10 Tất cả là Widget 17

Hình 1.11 Một số Value Widgets 19

Hình 1.12 Một số Layout Widgets 19

Hình 1.13 Một số Navigation Widgets 20

Hình 1.14 Một số Widget khác 20

Hình 1.15 Một số cử chỉ thiết đặt lên Widget 21

Hình 1.16 Vùng thiết kế bố cục 21

Hình 1.17 Khi các Widget được bố cục hoàn chỉnh 22

Hình 1.18 Cách mà các Widget bố cục trên màn hình 23

Hình 1.19 Giao diện của màn hình phụ thuộc vào trạng thái (State) 27

Hình 1.20 Kiến trúc Flutter Framework 27

Hình 2.1 Logo Firebase 29

Hình 2.2 Tất cả các dịch vụ hiện có ở Firebase 30

Hình 2.3 Logo Firebase Authentication 30

Hình 2.4 Giao diện Firebase Authentication trên Firebase Console 31

Hình 2.5 Logo Cloud Firestore 32

Hình 2.6 Giao diện Cloud Firestore trên Firebase Console 33

Hình 2.7 Logo Cloud Function 33

Hình 2.8 Giao diện Firebase Firestore trên Firebase Console 34

Hình 2.9 Logo Cloud Storage 34

Hình 2.10 Giao diện Cloud Storage trên Firebase Console 35

xii

Hình 2.11 Logo Cloud Messaging 35

Hình 2.12 Giao diện Cloud Messaging trên Firebase Console 36

Hình 2.13 Logo Remote Config 36

Hình 2.14 Giao diện Remote Config trên Firebase Console 36

Hình 2.15 Logo Dynamic Links 37

Hình 2.16 Giao diện Dynamic Links trên Firebase Console 37

Hình 2.17 Logo App Distribution 38

Hình 2.18 Giao diện App Distribution trên Firebase Console 39

Hình 2.19 Tester tải ứng dụng sau khi nhận lời mời 39

Hình 2.20 Logo Firebase Analytics 40

Hình 2.21 Giao diện Analytics trên Firebase Console 41

Hình 2.22 Danh sách các sự kiện người dùng đã phát trên Firebase Console 41

Hình 4.1 Giao diện màn hình chủ Ohana 45

Hình 4.2 Giao diện màn hình tìm bạn Ohana 45

Hình 4.3 Giao diện màn hình chính Nhà Trọ 360 46

Hình 4.4 Giao diện màn hình tìm kiếm Nhà Trọ 360 47

Hình 4.5 Sơ đồ Usecase của ứng dụng 49

Hình 4.6 Kiến trúc hệ thống, ứng dụng 50

Hình 4.7 Ứng dụng Trọ Là Nhà trên Android và iOS 51

Hình 4.8 Giao diện màn hình trang chủ - Tìm kiếm 52

Hình 4.9 Giao diện màn hình tìm kiếm nhập địa chỉ - chọn mức giá 53

Hình 4.10 Giao diện màn hình tìm kiếm theo loại phòng – các tiện ích 54

Hình 4.11 Giao diện màn hình tìm kiếm theo giới tính, số người – sắp xếp theo giá, thời gian đăng 55

Hình 4.12 Giao diện màn hình kết quả tìm kiếm 56

Hình 4.13 Giao diện màn hình đăng phòng nhập thông tin – địa chỉ 57

Hình 4.14 Giao diện màn hình đăng phòng chọn tiện ích – xác nhận 58

Hình 4.15 Giao diện màn hình danh sách phòng mới nhất – giá tốt 59

Hình 4.16 Giao diện màn hình tìm kiếm bạn ở ghép – lọc 60

Hình 4.17 Giao diện màn hình xem giá phòng trên bản đồ - phòng gần đây 61

Hình 4.18 Giao diện màn hình tài khoản – hồ sơ cá nhân 62

Hình 4.19 Giao diện màn hình quản lý lịch hẹn – phòng của tôi 63

xiii

Hình 4.20 Giao diện màn hình duyệt phòng 64

Hình 4.21 Bật tính năng đăng nhập với Google 68

Hình 4.22 Chức năng đăng nhập với Google 69

Hình 4.23 Ứng dụng nhận được thông báo khi có lịch hẹn 70

Hình 4.24 Các cấu hình hiện tại đang sử dụng trên Firebase Console 71

Hình 4.25 Chức năng tìm kiếm theo quận và xu hướng khi bật tắt trên Firebase Console 71

Hình 4.26 Các lỗi đã được Firebase Crashlytics nhận dạng và báo cáo 72

Hình 4.27 Hiệu năng của các màn hình, thời gian chờ khởi động được Firebase Performance báo cáo 72

Hình 4.28 Các sự kiện Tracking được Firebase Analytics tổng hợp 73

Hình 4.29 Firebase Analytics tổng hợp thông tin người dùng 74

Hình 4.30 Liên kết được tạo từ Firebase Console 75

Hình 4.31 Mở ứng dụng từ liên kết https://trolanha.page.link/trongay 75

xiv

DANH MỤC BẢNG BIỂU

Bảng 1.1 So sánh các công nghệ đa nền tảng 4

Bảng 1.2 So sánh các Compile-to-native Framework đa nền tảng 5

Bảng 4.1 Bảng thiết kế dữ liệu cho Collection rooms 64

Bảng 4.2 Bảng thiết kế dữ liệu cho Collection users 65

Bảng 4.3 Bảng thiết kế dữ liệu cho Collection invites 66

Bảng 4.4 Bảng thiết kế dữ liệu cho Collection cities 66

Bảng 4.5 Bảng thiết kế dữ liệu cho Sub Collection districts 67

Bảng 4.6 Bảng thiết kế dữ liệu cho Collection friends 67

1

PHẦN 1: MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Ngày nay, theo xu hướng phát triển của xã hội, công nghệ thông tin đã nắm một vai trò chủ chốt trong mọi ngành nghề Chỉ có công nghệ thông tin với có thể đem sản phẩm đến mọi người nhanh và hiệu quả nhất Việc sở hữu một trang website hay ứng dụng di động cho riêng một cá nhân hay doanh nghiệp là nhu cầu rất lớn, nó sẽ giúp cho cá nhân, doanh nghiệp mang được sản phẩm, ý tưởng tốt đến cộng đồng, xã hội

Nhưng vấn đề để sở hữu một ứng dụng hay website đòi hỏi nhiều chi phí sản xuất, phát triển Ba nền tảng thường quan tâm nhất là Android, iOS, Browser (Website) Mỗi nền tảng lại có bộ công cụ để phát triển riêng, dẫn đến chi phí bảo trì cao, triển khai chậm dẫn đến vượt khả năng chi trả cho việc phát triển

Chính vì vậy việc sử dụng các công nghệ hỗ trợ phát triển ứng dụng trên đa nền tảng

là một sự lựa chọn đúng đắn Có rất nhiều công nghệ hỗ trợ đa nền tảng hiện nay như: Xamarin, Ionic, React Native… có thể giúp xây dựng một ứng dụng nhanh chóng, nhưng thực tế đã cho thấy kết quả đem lại còn nhiều vấn đề như: Hiệu suất thấp, không phổ biến, cộng đồng nguồn mở không phát triển, …

Flutter Framework là một bộ công cụ phát triển đang được quan tâm, sử dụng Flutter

để xây dựng ứng dụng không chỉ gỉải quyết được các vấn đề nêu trên Nó còn mang đến nhiều lợi ý khác như: Phát triển nhanh, dễ bảo trì,… kết hợp với các sản phẩm của Google Firebase sẽ giúp chúng ta xây dựng một ứng dụng hiệu năng cao, đảm bảo yêu cầu và chi phí thấp

2 MỤC ĐÍCH CỦA ĐỀ TÀI

Tìm hiểu về Flutter Framework, cách triển khai ứng dụng để hoàn thiện các yêu cầu phức tạp trong thực tế

Nghiên cứu và tìm hiểu các dịch vụ của Google Firebase, cách sử dụng các dịch vụ

để xây dựng một ứng dụng thực tế Cách thiết kế dữ liệu, hệ thống với Firebase cũng như các dịch vụ khác như xem thống kê, phân tích người dùng từ dữ liệu đã thu thập,…

Kết hợp Flutter với Google Firebase để xây dựng ứng dụng Quản lý phòng trọ với đầy đủ các chức năng của một sản phẩm thực tế

2

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

- Đối tượng nghiên cứu: Flutter Framework, các dịch vụ của Google Firebase, cách

phát triển ứng dụng kết hợp hai đối tượng trên

- Phạm vi nghiên cứu: Flutter Framework, các dịch vụ của Google Firebase, triển

khai, phát triển ứng dụng Quản lý phòng trọ trên hai nền tảng Android và iOS

- Phương pháp nghiên cứu: Phương pháp nghiên cứu tài liệu Tài liệu bao gồm các

nguồn sách, những bài viết khách quan, cũng như các trang tài liệu chính thống do nhà cung cấp phát hành, các mã nguồn mở, ví dụ mẫu mã nguồn của Flutter, Firebase

4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

Hiểu rõ được bộ công cụ Flutter Framework, cách dùng và triển khai phát triển ứng dụng di động trên Android, iOS

Vận dụng, tích hợp được các dịch vụ của Google Firebase để hiện thực được các chức năng có trong thực tế

Phát triển hoàn thiện xong ứng dụng di động Quản lý phòng trọ được kết hợp từ Flutter Framework và Google Firebase trên Android, iOS

3

PHẦN 2: NỘI DUNG CHƯƠNG 1: TỔNG QUAN VỀ FLUTTER FRAMEWORK

1.1 GIỚI THIỆU FLUTTER FRAMEWORK

• Được phát triển, bảo trì bởi Google và cả cộng đồng lập trình

• Hiện đang được sử dụng rộng rãi bởi những nhà phát triển trên toàn thế giới

• Giải quyết được bài toàn phát triển nhanh chóng (Fast Development) và hiệu suất cao (Native Performance)

• Với duy nhất một bộ mã nguồn có thể triển khai trên hàng trăm loại Browser, iPhone, iPad, Android khác nhau

1.1.2 Tại sao phải chọn Flutter?

Phát triển ứng dụng nhanh chóng, hiệu quả Trong môi trường phát triển, Flutter có tính năng Hot Reload giúp nhà phát triển có thể xem được các thay đổi giao diện, trạng thái ngay tức thì, giúp thêm tính năng nhanh và sửa lỗi dễ dàng hơn Điều mà ở Android Native (Java/Kotlin) hay iOS Native (Objective-C/Swift) vẫn chưa làm được Đội CRM của Google đã phát triển ứng dụng nội bộ của họ và kết quả cho thấy thời gian nhanh hơn gấp

ba lần so với việc dùng bộ công cụ Android thuần

Giao diện trực quan, tương thích với nền tảng Ứng dụng di động được viết bởi Flutter có khả năng nhận thức được nền tảng (Platform awareness), điều này giúp ứng dụng khi chạy trên mỗi nền tảng khác nhau sẽ có giao diện tương thích (Adaptive) với nền tảng

đó giúp trực quan và thân thiện với người dùng hơn

Dễ tiếp cận, làm quen với lập trình Tài liệu của Flutter đầy đủ và chính xác giúp cho kể cả người mới tiếp cận lập trình cũng có thể nghiên cứu, phát triển ứng dụng cho riêng mình

Xây dụng các mô-đun gắn trên các ứng dụng di động hiện có Flutter cung cấp Flutter Module, một phương thức để xây dựng các chức năng có thể gắn vào mã nguồn của

4

ứng dụng thuần hiện có (Android, iOS) giúp cho việc sử dụng linh động và có thể dùng lại cho các ứng dụng khác

1.1.3 So sánh với các công cụ khác

Hiện nay có nhiều bộ công cụ giúp phát triển ứng dụng đa nền tảng Tuy nhiên cũng

có nhiều vấn đề ở những bộ công cụ này

Bảng 1.1 So sánh các công nghệ đa nền tảng

Cho thấy giải pháp Compile-to-native ưu việt hơn so với những cách còn lại

Các công nghệ Ưu điểm Khuyết điểm

Progessive

Web Apps

(PWA)

HTML/CSS, React, Angular, Vue

Viết nhanh, dễ phát triển

Không phải là một ứng dụng thực sự Chạy trong một trang web

trình duyệt Không có sẵn trong ứng dụng cửa hàng (Google Play, App Store) Không thể truy cập vào các chức năng liên quan đến cảm biến (Sensor), la bàn, Bluetooth, NFC, …

Hybrid PhoneGap,

Ionic

Rất dễ cho lập trình viên Web

vì nó chỉ dùng HTML và Javascript để mô

tả

Ứng dụng chạy trên một WebView nên hiệu suất kém Gần như không thể chia sẽ mã nguồn với ứng dụng Web (Web App)

Giải pháp

Compile-to-native

React Native, Native Script, Flutter,

Xamarin

Tạo ra ứng dụng thực (Native app) nên có thể đưa lên cửa hàng ứng dụng

Mất nhiều thời gian để tìm hiểu cách dùng Framework, bộ công cụ

5

Bảng 1.2 So sánh các Compile-to-native Framework đa nền tảng

Xamarin NativeScript React Native Flutter

Phát triển bởi Microsoft Telerik Facebook Google

Ngôn ngữ sử dụng XAML và/hoặc Xamarin.Forms Giống XML Giống JSX Dart

Viết bằng ngôn ngữ C# JavaScript JavaScript Dart

Trên đây là những Framework khác nhau để xây dụng một ứng dụng đa nền tảng, tất cả đều miễn phí Đã và đang được sử dụng trên toàn thế giới để xây dựng ứng dụng, cũng như đã triển khai trong các công ty tập đoàn lớn

Nhưng chỉ có một lựa chọn có thể xây dựng Web app và ứng dụng có thể triển khai lên cửa hàng ứng dụng là Flutter Flutter ra mắt muộn nhất trong các lựa chọn nên sẽ có

cách tiếp cận tốt hơn so với các công nghệ đa nền tảng trước đó

1.2 HỆ ĐIỀU HÀNH, CÔNG CỤ PHÁT TRIỂN ANDROID IOS

1.2.1 Giới thiệu hệ điều hành Android

Hình 1.1 Logo hệ điều hành Android

6

Android là một hệ điều hành dựa trên nền tảng Linux được thiết kế riêng cho các thiết

bị di động có màn hình cảm ứng Ban đầu, Android được phát triển bởi Tổng công ty Android, với sự hỗ trợ tài chính từ Google và sau này được chính Google mua lại vào năm

2005 Android ra mắt vào năm 2007

Android có mã nguồn mở và Google phát triển thành mã nguồn theo giấy phép Apache Google Play là cửa hàng ứng dụng chính của Android

Android có một kernel dựa trên nhân của Linux phiên bản 2.6, kể từ phiên bản Android 4.0 Ice Cream Sandwich trờ về sau là phiên bản 3.x

Android sử dụng máy ảo Dalvik với một trình biên dịch tự động để chạy “mã dex” của Dalvik, thường được biên dịch sang Java bytecode Nền tảng phần cứng chính của Android là kiến trúc ARM Người ta củng hỗ trợ x86 thông qua dự án Android x86

Hình 1.2 Kiến trúc hệ điều hành Android

7

Kiến trúc hệ điều hành Android bao gồm các tầng chính:

• Tầng Applications: Là tầng chứa các ứng dụng Danh bạ, Gọi điện, Trình duyệt,

Nghe nhạc,… các ứng dụng mặc định có sẵn trong máy

• Tầng Framework: Là tầng chứa các API để làm việc với hệ điều hành như lấy

thông tin danh bạ, quản lý các Activity, quản lý địa điểm, quản lý các View

• Tầng Libraries: Chứa các thư viện, API gần như là cốt lõi của Android, bao gồm

bộ quản lý bề mặt cảm ứng (Surface Manager), OpenGL (Phục vụ cho việc dựng đồ họa phức tạp),…

• Tầng Android Runtime: Chứa các thư viện lõi của Android và máy ảo Dalvik

Virtual Machine (Từ Android 4.0 trở lên chúng ta có thêm máy ảo Android Runtime

- ART)

• Tầng Kernel: Là nhân lõi của hệ điều hành, chứa các tập lệnh, driver giao tiếp giữa

phần cứng và phần mềm của Android

1.2.2 Công cụ phát triển phần mềm Android SDK

Tháng 5 năm 2013, Google công bố Android Studio, một môi trường phát triển ứng dụng tích hợp (IDE) dành riêng cho Android, mã nguồn mở, dựa trên IDE Java IntelliJ của hãng JetBrains (đối thủ với Eclipse và Netbeans, vốn khá quen thuộc với dân lập trình Java)

Android Studio chạy trên Windows, Mac và Linux, nhằm thay thế cho Eclipse Android Development Tool (ADT) vốn được sử dụng làm IDE chính trong các năm trước

đó

Hình 1.3 Logo Android Studio

8

Bộ công cụ phát triển phần mềm Android (SDK) là một lựa chọn các công cụ cần thiết để phát triển Android Các công cụ này bao gồm mã bổ sung sẽ đóng vai trò là cầu nối giữa Java/Kotlin và Android để có thể truy cập các tính năng Android Native Phiên bản Android mới nhất hiện tại là Android 11 với bộ SDK API Level 30

1.2.3 Giới thiệu hệ điều hành iOS

Hệ điều hành iOS (trước đây là iPhone OS) là hệ điều hành trên các thiết bị di động của Apple Đây là hệ điều hành chạy trên các sản phẩm iPhone, iPad, và iPod Touch và là hệ điều hành phổ biến thứ 2 trên toàn cầu, sau Android của Google

Ban đầu hệ điều hành này chỉ được phát triển để chạy trên iPhone (gọi là iPhone OS), nhưng sau đó được mở rộng để chạy trên các thiết bị khác của Apple như iPod Touch (tháng 9 năm 2007) và máy tính bảng iPad (tháng 1 năm 2010) Tính đến tháng 7 năm 2020, App Store trên iOS chứa khoảng 1.8 triệu ứng dụng, 1 triệu trong số đó là ứng dụng chỉ dành cho iPad và được tải về tổng cộng khoảng 130 tỷ lần

Giao diện người dùng của iOS thân thiện với thao tác cảm ứng đa điểm bằng tay, cũng như hỗ trợ bút stylus Apple Pencil (chỉ dành cho iPad Pro)

Phiên bản mới nhất là iOS 13 và iPadOS 13 được ra mắt chính thức vào tháng 9 năm 2019 cùng với bộ ba iPhone 11, iPhone 11 Pro và iPhone 11 Pro Max

Hình 1.4 Hệ điều hành iOS 13, iPadOS 13

9

Hình 1.5 Kiến thúc hệ điều hành iOS

Kiến trúc của hệ điều hành iOS bao gồm các lớp chính:

• Lớp Media: Cung cấp cho hệ điều hành iOS các dịch vụ đa phương tiện như âm thanh, video, hình ảnh, đồ hoạ

• Lớp Core Services: Cung cấp một số dịch vụ cơ bản cho hệ điều hành và các lớp khác

• Lớp Core OS: Cung cấp một số dịch vụ hệ thống như Memory Manager, Networking, File System,…

• Lớp Cocoa Touch: Cung cấp các Framework chung cho các lập trình viên phát triển ứng dụng, bao gồm:

o UIKit Framework

o Map Kit Framework

o Push Notification Service

o Message UI Framework

10

o Address Book UI Framework

o Game Kit Framework

1.2.4 Công cụ phát triển phần mềm iOS Kit

Ngoài hệ điều hành iOS, Apple còn cung cấp một bộ SDK bao gồm một tập các công cụ phát triển (Kit) để nhà phát triển có thể sử dụng cho việc triển khai các ứng dụng trên hệ điều hành iOS nói riêng và hệ sinh thái Apple nói chung

Xcode là một IDE chính thức của Apple dùng để tích hợp các công cụ phát triển phần mềm do Apple phát triển Xuất hiện lần đầu tiên năm 2003, phiên bản mới nhất hiện nay của Xcode là bản Xcode 11.5 và có thể tải về miễn phí dùng ở Mac App Store cho người dùng macOS Catalina Trình biên dịch của Xcode gọi là Apple LLVM Compiler Trình biên dịch này hỗ trợ các ngôn ngữ lập trình như C, C++, Objective-C, Objective-C++, Java, AppleScript, Python và Ruby,…

kỳ dễ dàng dễ tiếp thu cho những người đã có kinh nghiệm với Java, C#, C++ hoặc ngôn ngữ hướng đối tượng khác

11

Ban đầu, Dart là một ngôn ngữ lập trình Web do Google phát triển Nó được chính thức công bố tại Hội thảo GOTO ngày 12-10-2011 tại Aarhus Mục đích của Dart không phải để thay thế JavaScript như là ngôn ngữ kịch bản chính bên trong trình duyệt Web, mà là cung cấp sự lựa chọn hiện đại hơn Và Flutter cũng đã chọn Dart để xây dựng ứng dụng đa nền tảng

Hình 1.7 Flutter sử dụng Dart làm ngôn ngữ phát triển

12

o Mảng/Danh sách:

o Câu điều kiện:

o Vòng lặp:

1.3.3 Lập trình hướng đối tượng với Dart

Lập trình hướng đối tượng với Dart cũng tương tự với các ngôn ngữ khác Khai báo lớp (Class):

13

Các tính chất của hướng đối tượng:

o Tính trừu tượng (Abtraction): Giống như các ngôn ngữ khác, tính trừu tượng

thể hiện ở việc lựa chọn các thuộc tính và hành vi của đối tượng mà không phải liệt kê hết tất cả các thuộc tính và hành vi của đối tượng đó

o Tính đóng gói (Encapsulation): Thể hiện tính che dấu trong đối tượng với

mục đích bảo vệ dữ liệu và tăng khả năng mở rộng Trong Dart, sử dụng dấu

“_” trước đầu tên biến thể hiện cho private dữ liệu

14

o Tính kế thừa (Inheritance): Phân chia ứng dụng chương trình thành nhiều

lớp khác nhau cùng các thành phần khác nhau, mối quan hệ giữa các lớp có mối quan hệ kế thừa gồm lớp cha (Super class) và lớp con (Sub class) Dart

thể hiện tính chất này qua từ khoá extends:

o Tính đa hình (Polymorphism): Thể hiện tính chất cùng biểu diễn một hành

vi nhưng từng lớp có cách biểu diễn khác nhau

1.3.4 Một số tính năng ngôn ngữ nổi bật

Ngôn ngữ Dart cung cấp một số tính năng ngôn ngữ giúp cho việc sử dụng ngôn ngữ lập trình trở nên dễ dàng và thuận tiện hơn:

15

o Type inference: Đây là tính năng xuất hiện trên nhiều ngôn ngữ mới sau này Khi khai báo kiểu dữ liệu không cần phải chỉ ra kiểu ban đầu, Dart sẽ kiểu

dữ liệu sau dấu “=” thuộc kiểu dữ liệu nào

o final và const: Kiểu dữ liệu khi dùng với final có nghĩa là biến đó không được gán lại một giá trị khác nhưng cho phép dữ liệu đó thay đổi const sử dụng

trong trường hợp cần định nghĩa dữ liệu đó ở compile time, giá trị không thay đổi trong suốt run time

o Khởi tạo: Mặc định khi khai báo không khởi tạo giá trị, tất cả các biến đều

mang giá trị là null cho mọi trường hợp (kể cả các kiểu dữ liệu int, double)

o Multiline strings: Ta có thể tạo một chuỗi với nhiều dòng thông qua việc sử dụng “””

o Spead operator: Rất giống với JavaScript Đây là một toán tử giúp “trải dài” các phần tử trong mảng/danh sách/

o Kiểu dữ liệu Map: Giống như Hash hay Dictionary Đây là một dạng dữ liệu lưu ở dạng Key-Value, Key hay Value có thể lưu ở bất kỳ dạng dữ liệu nào

o Tất cả Function là Object: Những Function có thể là một tham số hay kiểu

dữ liệu trả về của một hàm khác

o Lượt bỏ keyword new và this: Trong Dart, việc sử dụng từ khoá này là tuỳ

chọn, có thể dùng để cho mã nguồn được rõ ràng hơn

o Mixins: Khác với extends Từ khoá này giúp thể hiện một class có thể gộp

những thuộc tính hay phương thức của class này sang một class khác (Merge properties, methods)

1.4 PHÁT TRIỂN ỨNG DỤNG VỚI FLUTTER FRAMEWORK

1.4.1 Môi trường, công cụ phát triển, IDE

Flutter SDK là công cụ duy nhất không thể thiếu khi xây dựng ứng dụng Nó bao gồm trình biên dịch Flutter (Flutter Compiler), Project Creator, trình quản lý thiết bị (Device Manager), Test Runner và những công cụ để chuẩn đoán chính xác các vấn đề khi cấu hình với Flutter (Flutter doctor)

Việc cài đặt Flutter SDK có thể tìm thấy ở https://flutter.dev/docs/ started/install Sẽ hướng dẫn cách tải tập zip file chứa SDK mới nhất, sau đó cấu hình

đã cài trước đó Nhưng thực tế hầu như không ai làm việc đó Hiện tại đã có một số IDE

đã có hỗ trợ các Plugin Flutter để phục vụ cho việc phát triển nhanh hơn và tiện hơn:

• Visual Studio Code (Microsoft)

• Android Studio/IntelliJ (JetBrains)

Một công cụ khác giúp ích rất tốt trong việc phát triển đó là Flutter DevTools Hỗ trợ việc gỡ lỗi (Debugging), xem logs, kết nối tới máy ảo và nhiều lợi ích khác Với Android Studio/IntelliJ, mở “Preferences -> Plugins” từ thanh Menu chính Với VS Code, mở

“View -> Extenstions” Tìm từ khoá Flutter, sau đó nhấn Install

Hình 1.8 Cài đặt Flutter DevTools trên Android Studio

Hình 1.9 Cài đặt Flutter DevTools trên Visual Studio Code

1.4.2 Khái niệm Widget

Một ứng dụng phức tạp được tạo ra bởi nhiều màn hình, nhiều trang khác nhau Mỗi màn hình hoặc trang đó lại được bố cục từ các thành phần như Header, Body, Footer Tiếp

17

tục mỗi thành phần đó lại được cấu thành từ những phần nhỏ hơn, đến khi thành phần là nhỏ nhất Quá trình phân nhỏ như vậy được gọi là thành phần hoá – componentization Việc chia nhỏ ra sẽ giúp ta có thể dễ dàng bảo trì cũng như dùng lại một số thành phần (Component) liên quan với nhau Giúp cho việc phát triển hiệu quả hơn

Thành phần hoá không phải là một thứ mới mẻ Nó được dùng rất phổ biến ở các Web Framework như Vue, React, Angular Trong thế giới Flutter, các thành phần (Component) này được dùng với tên Widget Một loại đối tượng cho phép tạo ra một thành phần hiển thị (Presentation) trên ứng dụng cũng như nhận các cử chỉ (Behavior)

“Everything is wigets” là câu nói mang ý nghĩa mọi thứ ở Flutter là Widget – thành phần nhỏ nhất cấu tạo nên giao diện Widget đóng cả hai vai trò vừa là thể hiện Presentation, vừa là nhận cử chỉ Behavior Việc này gọi gói gọn là “UI as code”

Hình 1.10 Tất cả là Widget

Vậy như thế nào để một giao diện được tạo ra ?

Giống như các Framework và ngôn ngữ khác, Flutter App bắt đầu với một hàm

main Trong Flutter, hàm main sẽ gọi một hàm tên là runApp() Hàm này nhận vào là một

Widget duy nhất hay còn gọi là Root Widget

18

1.4.3 Giới thiệu những Widget cơ bản

Các Widget nền nảng (Build-in Widget) là tất cả những gì để có thể xây dựng một giao diện phức tạp bằng các tổ hợp (Compose) chúng lại Có hơn 160 Build-in Widget để

sử dụng, ta có thể chia thành bốn nhóm Widget chính:

o Value Widgets: Những Widget chứa dữ liệu, dữ liệu này có thể từ Local Storage,

một dịch vụ trên Internet (Image, …) hoặc là từ người dùng Chúng được dùng để hiện thị dữ liệu và truyền dữ liệu đến App Điển hình nhất là Text Widget, được dùng để hiện thị một đoạn text trên App Hay Image Widget, để hiện thị hình ảnh Một số Widget khác:

19

Hình 1.11 Một số Value Widgets

o Layout Widgets: Đây là những Widget giúp bố cục vị trí các Widget con khác để

tạo nên các Widget lớn hơn hay có thể làm cho Widget đó có khả năng cuộn (Scrollable), … Ví dụ như Column Widget giúp thể hiện giao diện ở dạng cột từ trên xuống Một số Widget khác:

Hình 1.12 Một số Layout Widgets

o Navigation Widgets: Khi ứng dụng chứa nhiều màn hình hay trang, để thực hiện

việc chuyển giữa các màn hình hay trang đó cần sử dụng đến các Navigation Widgets Chúng sẽ điều khiển cách mà một màn hình chuyển sang màn hình khác như thế nào, việc điều hướng có thể xảy ra bằng cách bấm trực tiếp vào Button hay

là thao tác vuốt Slide Điển hình như MaterialApp Widget Một số Widget khác:

20

Hình 1.13 Một số Navigation Widgets

o Other Widgets: Một số Widget khác phục vụ cho nhiều mục đích như Theming,

Transtion hay thêm Behavior cho Widget con Một số Widget như:

Hình 1.14 Một số Widget khác

1.4.4 Xử lý những cử chỉ tương tác (Gesture)

Xử lý cử chỉ tương tác trong Flutter được dùng qua hai loại Widget:

o Built-in Widgets: Một vài cử chỉ có thể dễ dàng dùng thông qua việc sử dụng các Button Widget vì Button Widget được tạo ra để mục đích nhận Gesture Tap hay OnPressed Để sử dụng, bạn chỉ đơn giản định nghĩa phương thức khi Button được Tap/Click

Tương tự như trên với các Widget: RaisedButton, FlatButton, IconButton, FloatingActionButton, CupertinoButton

21

o Custom Widgets: Thông qua Widget GestureDetector, một Custom Widget bất kỳ

có thể nhận được các loại cử chỉ của người dùng lên Widget đó Các cử chỉ đó có thể là:

Hình 1.15 Một số cử chỉ thiết đặt lên Widget

1.4.5 Thiết kế giao diện, bố cục (Layout)

Để bố cục một giao diện từ nhiều Widget con, ta phải dùng đến các Layout Widget

để thiết kế giao diện của màn hình/trang Thực hiện việc này thông qua những bước sau:

o Bố cục trên toàn bộ màn hình: Đây chính là nơi sẽ thực hiện việc bố cục giao diện Bao gồm tiêu đề, các nút tương tác (Action Button) và thanh Menu

Hình 1.16 Vùng thiết kế bố cục

o Thiết đặt vị trí giữa các Widget trên và dưới với nhau hoặc cạnh bên nhau

o Thêm các khoảng trống giữa các Widget bằng việc dùng các loại Layout Widgets

có thuộc tính như Margin, Padding (Container, SizedBox)

o Xử lý các trường hợp khi khoảng trống không đủ (Overflow) để điền nội dung