(Đồ án tốt nghiệp) phát triển ứng dụng quản lý mua bán gas trên IOS sử dụng ngôn ngữ DART trên nền tảng flutter

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC  Hiểu rõvề Flutter  Các dùng ngôn ngữ dart trên nền tảng flutter  Cài đặt phần mềm được trên 2 nền tảng Android vàIOS  Phần mềm quản lýGas cótối thiểu cá chứ

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 SƯ PHẠM CÔNG NGHỆ THÔNG TIN

PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ MUA BÁN GAS TRÊN IOS - SỬ DỤNG NGÔN NGỮ DART

TRÊN NỀN TẢNG FLUTTER

GVHD: NGUYỄN HỮU TRUNG SVTT:VÕ TRƯỜNG DUY THIÊN MSSV:15110379

SVTT:VI VĂN SANG MSSV:15110390

SKL007219

Tp Hồ Chí Minh, 2020

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ~~~o0o~~~

VÕ TRƯỜNG DUY - 15110379

VI VĂN SANG – 15110390

Đề Tài:

PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ MUA BÁN GAS

TRÊN IOS - SỬ DỤNG NGÔN NGỮ DART

TRÊN NỀN TẢNG FLUTTER

KHÓA LUẬN TỐT NGHIỆP

GIÁO VIÊN HƯỚNG DẪN ThS: NGUYỄN HỮU TRUNG

KHÓA 2015-2020

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ~~~o0o~~~

KHÓA LUẬN TỐT NGHIỆP

GIÁO VIÊN HƯỚNG DẪN ThS:

NGUYỄN HỮU TRUNG KHÓA

2015-2020

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT Độ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ọ tên sinh viên 1:

Họ tên sinh viên 2:

Chuyên ngành:

VÕ TRƯỜNG DUY MSSV: 15110379 VI VĂN SANGMSSV: 15110390 SƯ PHẠM CÔNG NGHỆ THÔNGTIN

Tên đề tài: Xây dựng ứng dụng quản lýgas trên IOS, sử dụng ngôn ngữ DART

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

Giáo viên hướng dẫn

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

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM

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

Họ tên sinh viên 1:

Họ tên sinh viên 2:

Chuyên ngành:

VÕ TRƯỜNG DUY VI VĂN SANG SƯ PHẠM CÔNG NGHỆ

MSSV: 15110379MSSV: 15110390THÔ NG TIN

Tên đề tài: Xây dựng ứng

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

Giáo viên phản biện

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

LỜI CẢM ƠN

Nhóm em xin chân thành cảm ơn khoa CÔNG NGHỆ THÔNG TIN, BỘ MÔNCÔNG NGHỆ PHẦN MỀM, TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM đãtạo điều kiện thuận lợi cho chúng em thực hiện đề tài này

Chúng em cũng xin được gửi lời cảm ơn chân thành nhất đến thầy NGUYỄNHỮU TRUNG, người đã tận tình chỉ bảo và hướng dẫn nhóm em thực hiện đề tài

Bên cạnh đó, chúng em xin gửi lời cảm ơn đến các thầy cô giảng viên của trườngĐại Học Sư Phạm Kỹ Thuật Tp.HCM nói chung cũng như các thầy cô giảng viên khoaCông Nghệ Thông Tin nói riêng, những người đã giảng dạy, tạo điều kiện cho em tíchlũy được những kiến thức quý báu trong những năm học qua

Chúng em đã nỗ lực rất nhiều để hoàn thành tốt nhất đề tài, nhưng do khả năngcòn hạn chế nên chắc chắn sẽ không tránh khỏi thiếu sót Chúng em mong nhận được sựchỉ bảo tận tình của các thầy cô để ngày càng tiến bộ

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

Nhóm sinh viên thực hiện:

VÕ TRƯỜNG DUY- 15110379

VI VĂN SANG - 15110390

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

KHOA CNTT

******

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Họ vàtên sinh viên:

Thời gian làm tiểu luận từ: 15/2/2020 đến 4/8/2020

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

 Tìm hiểu về quy trình xây dựng ứng dụng trên nền tảng IOS

 Tìm hiểu về Firebase vàứng dụng vào đồ án

 Xây dựng ứng dụng quản lýgas trên nền tảng IOS

Mục Lục

1.1 Tính Cấp thiết đề tài

1.2 Mục đích của đề tài

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

1.4 Kết quả dự kiến đạt được

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

1 Tìm hiểu về Flutter 1.1 Flutter làgì?

1.2 Flutter Framework Model Cấu thành như thế nào?

1.3 So Sánh với các Cross-platform framework khác

1.4 Các Widget trong flutter

1.5 Statefullwidget vàstatelesswidget

1.6 Phương thức render của flutter

2 Ngôn Ngữ Dart 2.1 Dart làgì?

2.2 Các Ưu điểm của Ngôn ngữ Dart

2.3 Tại sao Flutter lại sử dụng Dart

3 Giới thiệu về firebase

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

1 Thiết kế Cơ sở dữ liệu

1.1 Môtả công việc

2.1.4 Thông tin sản phẩm và đánh giá

2.1.5 Giỏ hàng

2.1.6 Thanh toán

2.2 Admin

2.2.1 Trang chủ2.2.2 Menu tùy chọn2.2.3 Quản lý đơn hàng

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

1 Thiết lập môi trường

2 Cài đặt vàkiểm thử các giao diện

3.1 Kết quả đạt được

3.2 Ưu điểm, nhược điểm

3.3 Hướng phát triển trong tương lai

(Công việc dự kiến)

1+2 15/02- - Tìm hiểu về Flutter và

- Thêm ý tưởng cá chức

-Hoàn thànhnăng nâng cáo cho ứng

- Hoàn thiện vàsửa lỗi cá -Cách chức

9-15 12/04- chức năng của từng giao năng của cá

23 15/07- - Tiến hành vàhoàn thiện - Hoàn thành

26/07- - Kiểm tra lại báo cáo vàứng -Hoàn chỉnh

31/07

dụng

Ý kiến của Giáo viên hướng dẫn Ngày … tháng … năm 2020

5

Mục Lục

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP 2

PHẦN 1: PHẦN MỞ ĐẦU 10

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

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

3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 11

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

PHẦN 2: PHẦN NỘI DUNG 12

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

1 TÌM HIỂU VỀ FLUTTER 12

1.1 Flutter làgì? 12

1.2 Flutter Framework Model Cấu thành như thế nào? 12

1.3 So Sánh với các Cross-platform framework khác 13

1.4 Các Widget trong flutter 15

1.5 Statefullwidget vàstatelesswidget 17

1.6 Phương thức render của flutter 18

2 NGÔN NGỮ DART 19

2.1 Dart làgì? 19

2.2 Các Ưu điểm của Ngôn ngữ Dart 19

2.3 Tại sao Flutter lại sử dụng Dart 20

3 GIỚI THIỆU VỀ FIREBASE 20

3.1 Giới thiệu về firebase 20

3.2 Các chức năng chính của firebase 20

3.3 Những lợi ích của firebase 21

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 24

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

1.1 Ứng dụng Gas24h 24

1.2 Ứng dụng VipGas 25

1.3 Ứng dụng bán Lazada 26

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

2.1 Yêu cầu Chức năng 27

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

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 30

1 THIẾT KẾ CƠ SỞ DỮ LIỆU 30

1.1 Môtả công việc 30

1.2 Usecase Diagram 35

1.3 Thiết kế cở sở dữ liệu 37

-Dưới đây là cá hình ảnh của cơ sở dữ liệu được thiết kế dựa vào Firebase 37

37

2 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 40

2.1 Khách hàng 40

2.1.1.Màn hình khởi đầu, Đăng ký, Quên mật khẩu 40

2.1.2.Trang chủ khách hàng 44

2.1.3.Menu tùy chọn của khách hàng 48

2.1.4.Thông tin sản phẩm-đánh giá sản phẩm 51

2.1.5 Giỏ hàng 53

2.1.6 Thanh toán 56

2.2 Admin 58

2.2.1 Trang chủ admin 58

2.2.2.Chi tiết đơn hàng của admin 60

2.2.3.Menu tùy chọn admin 63

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

PHẦN 3: PHẦN KẾT LUẬN 82

1 KẾT QUẢ ĐẠT ĐƯỢC 82

2 ƯU ĐIỂM, NHƯỢC ĐIỂM 82

3 HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI 82

5 TÀI LIỆU THAM KHẢO 83

DANH MỤC HÌNH ẢNH.

Hinh 1: ứng dụng Gas24h 24

Hinh 2: ứng dụng VipGas 25

Hinh 3: ứng dụng Lazada 26

Hinh 4: Sơ đồ Usecase admin 35

Hinh 5: 3-2 Sơ đồ Usecase khách hàng 36

Hinh 6: Danh sách tài khoản 37

Hinh 7: Xét các tài khoản có thể đăng nhập được vào phần mềm 37

Hinh 8: Firebase khách hàng hủy đơn hàng 38

Hinh 9: Firebase khi tiến hành nhận hàng 38

Hinh 10: Firebase thông tin khách hàng khi đặt hàng 38

Hinh 11: Firebase khách hàng bình luận về sản phẩm 39

Hinh 13: Firebase admin quản lý danh sách khách hàng đặt hàng 39

Hinh 12: Firebase quản lý khách hàng đã nhận, đã hủy hay trong quá trình đợi nhận hàng 39

Hinh 14: Màn hình khởi đầu và đăng nhập 40

Hinh 15: Giao diện đăng ký, quên mật khẩu 41

Hinh 16: Giao diện trang chủ 44

Hinh 17: Giao diện trang chủ với menu tùy chọn 45

Hinh 18: Giao diện menu tùy chọn khách hàng 48

Hinh 19: Giao diện chi tiết sản phẩm và đánh giá 51

Hinh 20: Giao diện giỏ hàng 54

Hinh 21: Giao diện thanh toán 56

Hinh 22: Giao diện trang chủ admin 58

Hinh 23: Giao diện chi tiết đơn hàng admin 61

Hinh 24: Giao diện menu tùy chọn admin 64

Hinh 25: Biểu đồ kết quả Test 81

DANH MỤC BẢNG BIỂU

Bảng 1: Bảng các yêu cầu chức năng nghiệp vụ của khách hàng 30

Bảng 2: Bảng các quy định/ công thức liên quan của khách hàng 32

Bảng 3: Bảng các yêu cầu các chức năng nghiệp vụ của admin 33

Bảng 4: Bảng các quy định, công thức liên quan đến chức năng của admin 34

Bảng 5: Bảng mô tả các thành phần giao diện đăng nhập, quên mật khẩu, đăng ký 42

Bảng 6: Bảng mô tả các xử lý giao diện đăng nhập, quên mật khẩu, đăng ký 43

Bảng 7: Bảng mô tả các thành phần trang chủ khách hàng 46

Bảng 8: Bảng môtả xử lýtrang chủ khách hàng 47

Bảng 9: Bảng môtả cá thành phần giao diện menu tùy chọn khách hàng 48

Bảng 10: Bảng môtả cá xử lýcá thành phần giao diện menu tùy chọn khách hàng 49

Bảng 11: Bảng môtả thành phần thông tin sản phẩm 52

Bảng 12: Bảng mô tả xử lý thông tin sản phẩm 52

Bảng 13: Bảng mô tả các thành phần giao diện giỏ hàng 54

Bảng 14:3-14: Bảng xử lý các thành phần 55

Bảng 15:3-15 Bảng mô tả màn hình thanh toán 57

Bảng 16:3-16 Bảng mô tả xử lý màn hình thanh toán 57

Bảng 17: Bảng mô tả thành phần giao diện trang chủ admin 59

Bảng 18: Bảng mô tả xử lý giao diện trang chủ của admin 60

Bảng 19: Bảng mô tả thành phần giao diện chi tiết đơn hàng admin 61

Bảng 20: Bảng mô tả xử lý giao diện chi tiết đơn hàng 62

Bảng 21: Bảng mô tả thành phần giao diện menu tùy chọn admin 65

Bảng 22: Bảng mô tả xử lý thành phần giao menu tùy chọn admin 66

Bảng 23: Bảng kiểm thử màn hình “đăng nhập” 67

Bảng 24: Bảng kiểm thử màn hình trang chủ và thông tin khách hàng 70

Bảng 25: Bảng kiểm thử màn hình trang chủ và thông tin admin 72

Bảng 26: Bảng kiểm thử màn hình Giỏ hàng 74

Bảng 27: Bảng kiểm thử “Thanh toán” 75

Bảng 28: Bảng kiểm thử mà hình đánh giá sản phẩm cảu khách hàng 76

Bảng 29: Bảng kiểm thử màn hình đánh giá chi tiết đơn hàng của khách hàng 77

Bảng 30: Bảng kết quả kiểm thử 78

PHẦN 1: PHẦN MỞ ĐẦU

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

Trong thời đại 4.0 hiện nay công nghệ phát triển, chất lượng của sản phẩm cũng đượccác doanh nghiệp trú trọng tới vì thế chất lượng không phải là thế mạnh để cạnh tranh giữa các sản phẩm mà thay vào đó là trải nghiệm người dùng, sự tiện lợi, tính chất nhanhchóng của dịch vụ bán hàng mà doanh nghiệp đó cung cấp

Sự bùng nổ của các ứng dụng đặt hàng, đặt dịch vụ trực tuyến mà ta không thể khôngnhắc tới như những ông lớn Uber, Grab, Lazada,… và cũng có cả đồ ăn như foody, now

và gần đây nhất là BaeMin, vậy câu hỏi đặt ra là “Vậy các mặt hàng thiết yếu khác thì sao? Chúng ta có cần một ứng dụng tương tự?”

Người tiêu dùng vẫn chưa biết nhiều về các loại gas, mẫu mã trên thị trường Hiện tượng gas giả và gas kém chất lượng ngày càng nhiều trên thị trường Làm sao để người tiêu dùng có cái nhìn khách quan hơn về gas mình đang dùng Hôm nay nhóm em phát triển một ứng dụng QUẢN LÝ MUA BÁN GAS Ứng dụng cho phép người dùng đặt gasngay trên điện thoại của mình

o Đăng ký, Đăng nhập, Đăng xuất

o Đăng nhập nhanh chóng bằng Google vàFacebook (cá tài khoản rất phổ biến tại thờiđiểm hiện tại)

o Quản lýtài khoản (Xem/Cập nhật thông tin, đổi mật khẩu, lấy lại mật khẩu)

o Xem chi tiết sản phẩm

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

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

o Cập nhật sản phẩm.

o Quản lýcửa hàng

3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU

 Dịch vụ cơ sở dữ liệu FireBase

 Flutter vàsự tiện tích của nótrong lập trình di động

 Ngôn ngữ dart, Tại sao flutter lại sử dụng ngôn ngữ dart

 Các chức năng cơ bản của một phần mềm bán hàng

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

 Hiểu rõvề Flutter

 Các dùng ngôn ngữ dart trên nền tảng flutter

 Cài đặt phần mềm được trên 2 nền tảng Android vàIOS

 Phần mềm quản lýGas cótối thiểu cá chức năng cơ bản của một phần mềm bán hàng

PHẦN 2: PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1 TÌM HIỂU VỀ FLUTTER 1.1 Flutter làgì?

Flutter làmobile UI framework của Google để tạo ra cá giao diện chất lượng caotrên iOS vàAndroid trong khoảng thời gian ngắn Flutter hoạt động với những codesẵn có được sử dụng bởi cá lập trình viên, cá tổ chức

Flutter được phát triển nhằm giải quyết bài toán thường gặp trong mobile làFast

Development và Native Performance Nếu như React Native chỉ đảm bảo FastDevelopment vàcode native thuần chỉ đảm bảo Native Performance thìFlutter làmđược cả 2 điều trên

1.2 Flutter Framework Model Cấu thành như thế nào?

Flutter được viết chia làm hai tầng Tầng ở trên sử dụng ngôn ngữ Dart cung cấpcác đoạn mã xây dựng lên một ứng dụng Flutter Các đoạn mã này cung cấp phươngtiện để có thể thay đổi và chỉnh sửa chúng Từ đó giúp ứng dụng của lập trình viên

có thể được tùy chỉnh theo mong muốn

Tầng Application này giúp lập trình viên thay đổi mã nguồn ứng dụng ở thờiđiểm compile time Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằngC++ Tầng Shell này chứa các công tụ trợ giúp ứng dụng Flutter trong quá trìnhchạy Nổi bật cần lưu ý ở tầng này là máy ảo Dart VM Khái niệm máy ảo là kháiniệm về một ứng dụng chạy song song với mã nguồn chính như một phần của ứngdụng Máy ảo Dart VM có ba nhiệm vụ chính bao gồm

 Làm ứng dụng trung gian giữa mã nguồn được viết bởi Dart và thiết bị phầncứng (hoặc phần mềm nằm ngoài ứng dụng)

 Thông dịch các đoạn mã Dart theo phương thức JIT (Just in time - mã nguồn chỉ được thông dịch khi được gọi đến) hoặc AOT (Ahead of Time – Mã)

12

 Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng như cung cấpcác runtime system bao gồm garbage collector, một vài các thư viện cần có của ngôn ngữ.

1.3 So Sánh với các Cross-platform framework khác.

Một ứng dụng để chạy được trên các thiết bị thông thường sẽ tạm quan tâm tớihai thành phần Thành phần gần với lập trình viên hơn là lớp Application LớpApplication chứa các đoạn mã được viết bởi lập trình viên và các công cụ giúp ứngdụng hoạt động và quản lý hoạt động của ứng dụng Thành phần được quan tâm thứhai là lớp Platform ở đây dùng để chỉ các hệ điều hành hoặc các ứng dụng trung giangiữa ứng dụng của lập trình viên và thiết bị Trong phạm vi lập trình ứng dụngmobile, Lớp Platform được chia làm ba thành phần bao gồm

 Services: Bao gồm các ứng dụng được viết và cài đặt mặc định trong thiết

bị có trách nhiệm quản lý giao tiếp giữa các ứng dụng trong thiết bị với nhau, cung cấpthông tin của thiết bị cho các ứng dụng hoặc thực thi các yêu cầu của ứng dụng để điềukhiển thiết bị (Location, Camera, Sensors )

 Canvas/Events: Là các ứng dụng giúp hiển thị giao diện lên màn hình hoặc

các thiết bị trình chiếu đồng thời nhận lại các sự kiện xuất hiện trên các giao diện này (ví dụnhư tương tác của người dùng hoặc các sự kiện từ các animation )

 OEM Widgets: Thành phần phụ được cấu thành do sự thống nhất giữa các

vendor (nhà cung cấp thiết bị (HTC), đơn vị phát hành thiết bị (NTT Docomo)) nhằm thốngnhất một quy chuẩn chung cho các UI (thành phần giao diện) được sử dụng trong cácPlatform Quy chuẩn được thống nhất này tạo ra một vài giới hạn cho việc viết lên UI sẽđược nói kĩ ở phần sau

Thành phần sẽ được so sánh trong phạm vi bài viết này là kiến trúc của lớpApplication cũng như cách mà lớp Application giao tiếp với lớp Platform Giống như

đã đề cập ở phần trước Tầng Application của Flutter cung cấp kiến trúc cho một ứng

13

dụng viết bằng Flutter và tầng Shell cung cấp khả năng giao tiếp giữa ứng dụng viếtbằng Flutter và lớp Platform Lấy ví dụ về một ứng dụng được viết bằng đoạn mãNative Toàn bộ mã thực thi được viết ở dạng Native sẽ được biên dịch hoặc thôngdịch qua dạng mà tầng Platform có thể hiểu được và thực thi trên đó.

Đối với ứng dụng viết ở dạng Hybrid, các đoạn mã giao diện của ứng dụngđược viết bằng HTML/CSS và được vẽ ra với DOM qua dạng hiển thị được trênWebView WebView sẽ trực tiếp điều khiển Canvas vẽ lên UI và nhận các eventngược lại thông qua WebView đó Mã thực thi của các ứng dụng viết dựa trênHybrid được sử dụng dưới dạng Javascript JavaScript có thể dễ dàng điều khiểnHTML/CSS thông qua giao tiếp với WebView tuy nhiên nhằm mục đích bảo mật,WebView không được cung cấp khả năng giao tiếp với các services hoặc điều khiểnphần cứng của lớp Platform dẫn đến các ứng dụng viết dựa trên Hybrid cần mộtmodule trung gian thường gọi là Bridge để làm điều này Module này phải đọc hiểuJavascript và tồn tại luôn trong mãnguồn của ứng dụng dẫn đến kích thước của ứngdụng bị tăng lên đáng kể3

Đối với các ứng dụng được viết ở dạng WebNative hoặc Cross compiled, sẽkhông có phần WebView được sử dụng mà thay vào đó module Bridge sẽ thực hiệntoàn bộ các hành vi trung gian giữa lớp Application và lớp Shell Mã nguồn của ứngdụng cũng không bị giới hạn bởi Javascript nữa mà tùy thuộc vào nhà phát triển cácnền tảng dạng này Có thể là Native Code có thể là Non-native code Tùy họ

Đối với Flutter, mã nguồn được cross compile thành native code Dựa vào máy ảoDart VM, những thành phần ít thay đổi sẽ được compile dạng AOT còn những thànhphần thường xuyên thay đổi sẽ được compile thành dạng JIT Flutter không cam kết vớicác OEM Widgets Flutter cho phép lập trình viên thay đổi và điều khiển từng pixeltrên màn hình và không cần quan tâm đến những giới hạn của OEM Widgets Tuynhiên khác với các ứng dụng viết ở dạng Hybrid khi lập trình viên phải tự quan tâm đếncác chuẩn của OEM Widgets, Flutter cũng cung cấp các Widget mặc định hỗ trợ hainền tảng giao diện là Material Design (cho Android/Fuchsia) và

Cupertino (cho iOS) Bạn cũng có thể quay trờ về với Flat Design thông qua một số thư viện trôi nổi trên thị trường.

1.4 Các Widget trong flutter

Trong Flutter, mọi thứ đều làWidgets vậy Widget làgì? Chúng ta xét qua thử mộtđoạn code mẫu bên dưới

Đây là hai class quan trọng nhất trong Flutter Theo đó, class Widget chịu tráchnhiệm hình thành cấu trúc của Diagnosticable Tree4 (Cây chuẩn đoán là một cấutrúc dữ liệu dạng cây hỗ trợ việc định nghĩa cấu trúc giao diện được vẽ lên trong ứngdụng viết bằng Flutter) trong khi class Element chịu trách nhiệm quản lýtrạng tháicủa từng Widget trên cái cây đó Tư tưởng cơ bản của Flutter tương tự như một WebApplication Tất cả trong một Flutter căng ra một mảnh vải làcanvas vàvẽ tất cả mọithứ lên đó Khi trạng thái của dữ liệu thay đổi vídụ như người dùng chuyển mànhình hay thay đổi dữ liệu trên màn hình được phản ánh thông qua việc xóa đi cácWidget cũ vàvẽ lên cá Widget mới Chính vìvậy thay vìphải biết đến cá StoryBoard(trong iOS) hay các Activity (trong Android), Flutter đưa tất cả cá khái niệm liênquan đến giao diện về một khái niệm duy nhất gọi làWidget Việc quản lý trạng tháicủa cá Widget cũng được đưa về cho lập trình viên thực hiện Điểm khác biệt nàycũng đặc biệt hơn khi Dart là ngôn ngữ Component Based Trong Flutter, khi muốnđiều chỉnh trạng thái về kích thước hay vị trícủa một Widget nào đó, ta không thựchiện việc đó trong Widget hiện tại mà được khuyến khích bọc Widget đó trong mộtWidget nào đó chỉ chuyên làm việc này Điều này khiến cho tính chất "Trong Flutterthìmọi thứ đều làWidget" lại càng chuẩn hơn bao giờ hết Màn hình làWidget, thànhphần giao diện cũng là Widget, thậm chícả thông tin về layout cũng

làWidget

Một điểm nữa cần lưu tâm cũng là đặc tính của Widget trong Flutter đó là thuộctính Widget#key Mọi Widget đều độc lập Lído làvìWidget không thể tự vẽ lại bảnthân Để thực hiện điều này ta cần thông báo cho Element Cách dễ nhất để cóthể dễdàng thông báo cho Element làlàm bẩn (dirty) instance tương ứng dẫn đến WidgetTree được vẽ lại Widget Tree được vẽ lại thìinstance của Widget cũ sẽ không còn

Trong một vài trường hợp cần phải tìm lại giátrị của Widget tại vị trí được vẽ lại, ta

sử dụng key làm chìa khóa cho vấn đề này

1.5 Statefullwidget vàstatelesswidget.

1.5.1 StatefulWidget làgì?

Đi qua một vídụ về StatefulWidget để dễ hình dung

Khi tạo mới một StatefulWidget, ta quan tâm đến hai class làStatefulWidgetvàState của Widget đó StatefulWidget là phần không thay đổi trong Widget Tree,thay vào đó, State làphần được thay đổi Mỗi khi Widget bị làm bẩn, state củaWidget đó sẽ được khởi tạo lại thông qua việc gọi đến phương thứcStatefulWidget#createState() Generic type5 (kiểu giữ chỗ) của State định nghĩa rakiểu dữ liệu của thuộc tính State#widget chứa trong nó Thuộc tính này chính là

instance của StatefulWidget đã tạo ra State đó Chính nhờ vậy, từ trong State hoàn

toàn cóthể lấy được những giátrị được truyền vào bên trong StatefulWidget thay vì

phải truyền vào thông qua hàm khởi tạo

ExampleStatefulWidget class nằm trong Widget Tree và ít thay đổi Thay vìtạo một

class dễ thay đổi trong cây, Flutter cung cấp cho Widget này một thành phần gọi

làState

Trong State chứa một thể hiện của Element tương ứng trong cây thôngqua State#_element Khi cần vẽ lại, có hai sự kiện được sử dụng để làmbẩn Element làdidUpdateWidget() vàsetState() Ở hàm thứ nhất, khi configuration bị

thay đổi, Widget sẽ được thông báo về sự thay đổi này Lập trình

viên @override lại phương thức didUpdateWidget() để bắt sự kiện trước khi Flutter

build lại Còn để thực hiện yêu cầu Widget thay đổi State, lập trình viên sử dụng

phương thức setState() Trong phương thức setState()cócho phé truyền vào một hàm

Mục đích của việc này là đôi khi công việc build lại Widget sẽ tốn một khoảng thời

gian trước khi mọi thứ hoàn thành Hàm callback được truyền vào sẽ đảm bảo Flutter

thực thi được trọn vẹn công việc của mình Vídụ sau khi thay đổi kích thước của một

list view màmuốn scroll xuống cuối list

1.5.2 Statelesswidget làgì?

Bên cạnh khái niệm về StatefulWidget ta cũng có StatelessWidget Cách thức để

khai báo thì đơn giản hơn rất nhiều và cũng vô cùng nhạt nhẽo Đại để là cái gì mà

đưa nó thành StatelessWidget được thì nên để nólàStatelessWidget

1.6 Phương thức render của flutter

Flutter sử dụng Diff Algorithm để xác định sự thay đổi trong Widget Tree Nhờ

vậy, Flutter biết được nê build chỉ một phần của Widget Tree giúp cho việc vẽ lại

giao diện được nhanh hơn

2 NGÔN NGỮ DART 2.1 Dart làgì?

Dart làngôn ngữ lập trình đa mục đích ban đầu được phát triển bởi Google vàsau

đó được Ecma (ECMA-408) phêchuẩn làm tiêu chuẩn Nó được sử dụng để xây dựng cá ứng dụng web, server, máy tính để bàn vàthiết bị di động Dart làmột ngôn ngữ hướng đối tượng, được xác định theo lớp, với cơ chế garbage-collected, sử dụng

cú phá kiểu C để dịch mãtùy ýsang JavaScript Nóhỗ trợ interface, mixin, abstract, generic, static typing vàsound type (2 cái cuối cóthể hiểu làtype-safe) Dart làngôn ngữ mãnguồn mở vàmiễn phí, được phát triển trên GitHub

Các nhà phát triển tại Google và các nơi khác sử dụng Dart để tạo các ứng dụng chất lượng cao, quan trọng cho iOS, Android và web Với các tính năng nhắm đến sự phát triển phía khách hàng, Dart rất phù hợp cho cả ứng dụng di động và web Dart giúp bạn tạo ra những trải nghiệm đẹp, chất lượng cao trên tất cả các màn hình, với:

Công cụ linh hoạt

2.2 Các Ưu điểm của Ngôn ngữ Dart

 Năng suấ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ẽ Type-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

 Nhanh 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

 Di động 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

19

 Dễ gần 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

 Reactive 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

2.3 Tại sao Flutter lại sử dụng Dart

Như đã nói ở trên, Dart được phát triển bởi Google, và Flutter cũng vậy

Google muốn viết (phát triển) một ngôn ngữ mà nó cải tiến hơn Javascript và hỗ trợ

cả 2 cách biên dịch là Just In Time (JIT) và Ahead Of Time (AOT):

 Ahead Of Time (AOT): Với AOT thì trình biên dịch chuyển ngôn ngữ Dart thẳng sang Native Code giúp hiệu năng tốt nhất có thể (tức là khi chạy chương trình, nó sẽ biên dịch từ đầu đến cuối)

 Just In Time (JIT): Còn với JIT cho phép hot reloading hoạt động, giúp phát triển

sản phẩm nhanh và tiện dụng hơn (được hiểu như việc debug trong ngôn ngữ khác là debug hàm nào chạy hàm đó thì ở đây nó sẽ viết đến đâu biên dịch ngay đến đấy)

3 GIỚI THIỆU VỀ FIREBASE

3.1 Giới thiệu về firebase

Firebase làmột dịch vụ hệ thống backend được Google cung cấp sẵn cho ứngdụng Mobile, Firebase cóthể rút ngắn thời gian phát triển, triển khai vàthời gian mởrộng quy môcủa ứng dụng mobile đang phát triển Hỗ trợ cả 2 nền tảng Android vàIOS, Firebase mạnh mẽ, đa năng, bảo mật vàlàdịch vụ cần thiết đầu tiên để xây dưngứng dụng với hàng triệu người sử dụng

3.2 Các chức năng chính của firebase

Với Google Firebase, bạn cóthể tạo ra cá ứng dụng chat như Yahoo Message của ngày xưa hoặc như Facebook Messager của ngày nay trong thời gian cực ngắn

như khoảng một ngày thậm chílàvài giờ bởi đơn giản làbạn chỉ cần lo phần clientcòn phần server và database đã có firebase lo Firebase là sự kết hợp giữa nền tảngcloud với hệ thống máy chủ cực kìmạnh mẽ tới từ Google, để cung cấp cho chúng tanhững API đơn giản, mạnh mẽ và đa nền tảng trong việc quản lý, sử dụng database.

Cụ thể hơn Google Firebase cung cấp tới chúng ta những chức năng chính sau:

o Realtime Database – Cơ sở dữ liệu thời gian thực:

Firebase lưu trữ dữ liệu database dưới dạng JSON vàthực hiện đồng bộ databasetới tất cả cá client theo thời gian thực Cụ thể hơn là bạn cóthể xây dựng được client

đa nền tảng (cross-platform client) vàtất cả cá client này sẽ cùng sử dụng chung 1database đến từ Firebase vàcóthể tự động cập nhật mỗi khi dữ liệu trong databaseđược thêm mới hoặc sửa đổi

Ngoài ra Firebase còn cho phép bạn phân quyền một các đơn giản bằng cúphátương tự như javascript

o Firebase Authentication – Hệ thống xác thực của Firebase:

Với Firebase bạn cóthể dễ dàng tích hợp cá công nghệ xác thực của Google,Facebook, Twitter, … hoặc một hệ thống xác thực màbạn tự mình tạo ra vào trongứng dụng của bạn ở bất kìnền tảng nào như Android, iOS hoặc Web

o Firebase Hosting:

Các bạn có thể triển khai một ứng dụng nền web nhanh chóng với hệ thốngFirebase, vàcá dữ liệu sẽ được lưu trữ đám mây đồng thời được bảo mật thông quagiao thức truy cập SSL

Các ứng dụng sẽ được cấp 1 tên miền dạng *.firebaseapp.com hoặc bạn cóthểtrả tiền để sử dụng tên miền của riêng mình

3.3 Những lợi ích của firebase

Ở phía trên làcá chức năng của google firebase, vậy cá chức năng đó sẽ đem

lại cho bạn những lợi ích gì, cólẽ một số bạn đã mường tượng ra rồi nhưng cũng cóbạn cólẽ vẫn còn mơ hồ vìvậy hãy đọc kĩ phần này sẽ biết câu trả lời chính xác nhất

o Triển khai ứng dụng nhanh:

Với Firebase bạn cóthể giảm bớt rất nhiều thời gian cho việc viết cá dòng code đểquản lý và đồng bộ cơ sở dữ liệu, mọi việc sẽ diễn ra hoàn toàn tự động với cá API củaFirebase Không chỉ cóvậy Firebase còn hỗ trợ đa nền tảng nê bạn sẽ càng đỡ mất thờigian rất nhiều khi ứng dụng bạn muốn xây dựng làứng dụng đa nền tảng

Không chỉ nhanh chóng trong việc xây dựng database, Google Firebase còngiúp ta đơn giản hóa quá trình đăng kí và đăng nhập vào ứng dụng bằng cáh sử dụng

hệ thống xác thực do chính Firebase cung cấp

Firebase hoạt động dựa trên nền tảng cloud vàthực hiện kết nối thông qua giaothức bảo mật SSL, chính vìvậy bạn sẽ bớt lo lắng rất nhiều về việc bảo mật của dữliệu cũng như đường truyền giữa client vàserver Không chỉ cóvậy, việc cho phéphân quyền người dùng database bằng cú pháp javascipt cũng nâng cao hơn nhiều độbảo mật cho ứng dụng của bạn, bởi chỉ những user màbạn cho phé mới cóthể cóquyền chỉnh sửa cơ sở dữ liệu

o Tính linh hoạt vàkhả năng mở rộng:

Sử dụng Firebase sẽ giúp bạn dễ dàng hơn rất nhiều mỗi khi cần nâng cấp hay

mở rộng dịch vụ Ngoài ra firebase còn cho phé bạn tự xây dựng server của riêngmình để bạn cóthể thuận tiện hơn trong quá trình quản lý

Việc Firebase sử dụng NoSQL, giúp cho database của bạn sẽ không bị bóbuộctrong cá bảng và các trường màbạn cóthể tùy ýxây dựng database theo cấu trúc củariêng bạn

Firebase hoạt động dựa trên nền tảng cloud đến từ Google vìvậy hầu như bạnkhông bao giờ phải lo lắng về việc sập server, tấn công mạng như DDOS, tốc độ kếtnối lúc nhanh lúc chậm, … nữa, bởi đơn giản làFirebase hoạt động trên hệ thốngserver của Google Hơn nữa nhờ hoạt động trên nền tảng Cloud nê việc nâng cấp,

bảo trì server cũng diễn ra rất đơn giản màkhông cần phải dừng server để nâng cấp như truyền thống.

Google Firebase córất nhiều gói dịch vụ với cá mức dung lượng lưu trữ cũngnhư băng thông khác nhau với mức giá dao động từ Free đến $1500 đủ để đáp ứngđược nhu cầu của tất cả các đối tượng Chính vìvậy bạn cóthể lựa chọn gói dịch vụphùhợp với nhu cầu của bản thân Điều này giúp bạn tối ưu hóa được vốn đầu tư vàvận hành của mình tùy theo số lượng người sử dụng Ngoài ra bạn còn không mấtchi phí để bảo trì, nâng cấp, khắc phục cá sự cố vìnhững điều này đã có Firebase lo

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

1 KHẢO SÁT HIỆN TRẠNG 1.1 Ứng dụng Gas24h

Hinh 1: ứng dụng Gas24h

- Làứng dụng bán Gas trực tuyến của CÔNG TY CỔ PHẦN DẦU KHÍMIỀNNAM Ứng dụng cho phé bạn đặt hàng (Gas vàcá sản phẩm đi kèm) trực tuyến, bạn sẽ đượcgiao dịch với đại lýgas trực thuộc công ty gần nhất

o Đăng nhập, đăng ký(bằng số điện thoại)

o Tìm kiếm đại lý gas (được ủy quyền từ công ty) gần nhất thông qua gbs

o Thông tin khuyến mãi

o Thông báo từ công ty đến khác hàng sử dụng

24

o Giao diện đơn giản, dễ sử dụng.

1.2 Ứng dụng VipGas

Hinh 2: ứng dụng VipGas

- Làứng dụng được phát triển trên cả IOS và ANDROID, dùng để đặt gas trực tuyến

- Chỉ sau 1 nhắn chuột vào đặt Gas tổng đài sẽ điện ngay cho bạn hỏi thông tin yêu cầu.

- Bạn cóthể theo dõi đơn hàng của mình trên app

1.3 Ứng dụng bán Lazada.

Hinh 3: ứng dụng Lazada

o Đằng ký, đăng nhập (bằng facebook, google)

o Giỏ hàng để lưu trữ những vật muốn mua

o Nhắn tin trực tiếp với cửa hàng

o Thông tin tài khoản, địa chỉ giao hàng được lưu lại để thuận tiện cho việc giao

2.1 Yêu cầu Chức năng

2.1.1.Yêu cầu chức năng nghiệp vụ

o Thông tin người dùng

o Đánh giá sản phẩm của người dùng

o Danh sách sản phẩm của cửa hàng

o Danh sách sản phẩm khách hàng đã mua

o Danh sách sản phẩm khách hàng đã đặt oDanh sách sản phẩm khách hàng đã nhận

o Danh sách sản phẩm của khách hàng đã hủy

o Danh sách khách hàng mua sản phẩm

o Xem danh sách giỏ hàng

o Xem danh sách sản phẩm

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

o Xem hình thức thanh toán

o Xem bình luận của khách hàng

o Xem sản phẩm của khách hàng đã đặt oXem sản phẩm của khách hàng đã nhận oXem sản phẩm của khách hàng đã hủy

o Tính số lượng sản phẩm trong giỏ hàng.

o Tính thời gian hết gas (Mặc định 45 ngày)

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

o Xem thông tin dịch vụ của cửa hàng

o Xem bình luận sản phẩm của những khách hàng khác

o Yêu thích sản phẩm

o Xem sản phẩm đã đặt oXem sản phẩm đã nhận oXem sản phẩm đã hủy

o Đăng nhập/ Đăng xuất (với Email đã đăng kí)

o Thêm, xóa, sửa tài khoản

o Quản lý đơn hàng của khách hàng

o Quản lý đơn hàng đang giao

o Quản lý đơn hàng đã giao

o Quản lý đơn hàng đã hủy

o Thêm, xóa, sửa class

o Chỉnh sửa thông tin cánhâ

o Đăng nhập/ Đăng xuất (với Email đã đăng kí)

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

2.2.1 Phía người dùng

- Tính tiến hóa:

Phần mềm cóthể chỉnh sửa vànâng cấp cho phùhợp với yêu cầu của cửa hàng mong muốn tạo nên sự thuận tiện tối đa với với người dùng

- Tính tiện dụng:

o Thân thiện với người dùng, dễ dàng thao tác

o Các nút chức năng được bố trí đơn giản vàdễ nhì

o Các màn hình chức năng tương tác tốt với nhau, tạo sự thuận tiện cho người dùng

- Tính hiệu quả:

o CSDL được lưu trữ an toàn vàdễ dàng truy xuất

o Phần mềm hoạt động ổn định, tốc độ truy cập vàxử lýnhanh

o Phần mềm cài đặt được trong hầu hết cá thiết bị iOS

o Phần mềm cóthể đáp ứng yêu cầu của người dùng màkhông làm ảnh hưởngđến sự hoạt động của cá phần mềm khác

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM

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

1.1 Môtả công việc

1.1.1 Khách hàng

1.1.1.1 Yêu cầu chức năng nghiệp vụ của khách hàng

- Mục này ta sẽ biết được cá nghiệp vụ của khách hàng, cá chứ năng mà

khách hàng cóthể sử dụng trong ứng dụng

- Phần mềm mang tiêu chí đơn giản, dễ sử dụng

- Khách hàng chỉ được xem cá thông tin sản phẩm, thông tin về dịch vụ kháchhàng, cá bình luận của khách hàng khác mà không được sửa xóa hay cập nhập

- Vì đặt gas qua tài khoản nê mỗi khách hàng sẽ cóquyền chỉnh sửa thông tin của mình trên ứng dụng như thổng tin cánhân, mật khẩu,

- Chức năng lấy lại mật khẩu khi quên mật khẩu

- Và dĩ nhiên khách hàng cóquyền bình luận, góp ýcủa mình với những mặt sản phẩm đã và đang được bán trên ứng dụng

Bảng 1: Bảng các yêu cầu chức năng nghiệp vụ của khách hàng

ST Công Việc Loại Công Việc Quy Định / Công Thức Ghi Chú

5 Xem bình luận Tra cứu

10 Chỉnh sửa thông Tra cứu, lưu trữ

tin

12 Đăng xuất

1.1.1.2 Các quy định, công thức liên quan

- Với những chức năng của người dùng thìcónhững quy định đi kèm Màkhách hàng

sẽ cần phản tuân thủ theo cá chức năng này để sử dụng được cá chắc năng trong ứng dụng

- Các quy định cũng hết sức cơ bản như:

o Đăng nhập đúng tài khoản, mật khẩu

o Quyên mật khẩu cần nhập đúng email đã đăng kí

o Đổi mật khẩu cần nhập đúng mật khẩu cũ, mật khẩu ít nhất 6 kítự

- Và dưới đây là bảng quy định liên quan của khách hàng

31

Bảng 2: Bảng các quy định/ công thức liên quan của khách hàng

Công Thức

của phụ huynh

luận sản phẩm editText trước khi bấm

gửi Không được để trốngnội dung

mật khẩu kí để được nhận link tạo tài

khoản mới

6 kítự

1.1.2.Admin

1.1.2.1 Yếu cầu chức năng của Admin

- Admin sẽ cónhững chức năng riêng gần giống như của khác hàng và đểquản trị thìadmin sẽ cócá chức năng riêng để thêm, sửa, xóa, cập nhập cá mục cho phầnmềm

- Admin phải đăng nhập để cóquyền sử dụng phần mềm

- Xem thông tin cánhân, chỉnh sửa thông tin cánhâ làchức năng giống của khách hàng

- Và admin được quyền xem, thêm, xóa, sửa danh sách khách hàng vàcá mặt

hàng đang được giao bán trên ứng dụng

Bảng 3: Bảng các yêu cầu các chức năng nghiệp vụ của admin

ST Công Việc Loại Công Quy Định / Công Ghi Chú

1.1.2.2 Các quy định, công thức liên quan.

- Và admin cũng sẽ cónhững rang buộc, những quy định riêng của admin để ứng dụng được vẫn hành và người dùng cóthể trải nghiệp tốt ứng dụng

- Những lưu ý trong bảng:

o Ta chỉ được chỉnh sửa địa chỉ giao hàng của khách hàng

o Thêm khách hàng bằng email nê không được dùng email đã tồn tại

Bảng 4: Bảng các quy định, công thức liên quan đến chức năng của admin

Công Thức

1 QĐ_ĐN Quy định đăng nhập - Nhập đúng email, password

để thực hiện cá chức năng củakhách hàng

2 QĐ_TKH Quy định thêm Thêm khách hàng bằng email

khách hàng nên không được sử dụng email