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

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

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

KHOA 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

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

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ÔN CÔ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ỄN HỮ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 khoa Cô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ích lũ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ăng cò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

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á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ác xử lý cá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 được cá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 nhanh chó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ông nhắ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 gas ngay 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á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

o Thống kê

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á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ác giao diện chất lượng cao trên iOS và Android trong khoảng thời gian ngắn Flutter hoạt động với những code sẵn có được sử dụng bởi các lập trình viên, cá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 Fast Development 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ấp cá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ương tiệ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ằng C++ Tầng Shell này chứa các công tụ trợ giúp ứng dụng Flutter trong quá trình chạ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ái niệ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 ứng dụ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ần cứ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ã)

 Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng như cung cấp cá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ới hai 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ớp Application 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 ứng dụ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 gian giữ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ụng mobile, 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ấp thô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ều khiể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ống nhất một quy chuẩn chung cho các UI (thành phần giao diện) được sử dụng trong các Platform 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ớp Application 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

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ết bằ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ông dị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ên WebView WebView sẽ trực tiếp điều khiển Canvas vẽ lên UI và nhận các event ngược lại thông qua WebView đó Mã thực thi của các ứng dụng viết dựa trên Hybrid được sử dụng dưới dạng Javascript JavaScript có thể dễ dàng điều khiển HTML/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ển phầ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ột module trung gian thường gọi là Bridge để làm điều này Module này phải đọc hiểu Javascript 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 ứng dụ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ện toàn bộ các hành vi trung gian giữa lớp Application và lớp Shell Mã nguồn của ứng dụ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ác nề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

ảo Dart VM, những thành phần ít thay đổi sẽ được compile dạng AOT còn những thành phần thường xuyên thay đổi sẽ được compile thành dạng JIT Flutter không cam kết với các OEM Widgets Flutter cho phép lập trình viên thay đổi và điều khiển từng pixel trên màn hình và không cần quan tâm đến những giới hạn của OEM Widgets Tuy nhiê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 đến các chuẩn của OEM Widgets, Flutter cũng cung cấp các Widget mặc định hỗ trợ hai nề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ách nhiệm hình thành cấu trúc của Diagnosticable Tree4 (Cây chuẩn đoán là một cấu trú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 ứng dụng viết bằng Flutter) trong khi class Element chịu trách nhiệm quản lý trạng thái củ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 Web Application Tất cả trong một Flutter căng ra một mảnh vải là canvas và vẽ tất cả mọi thứ lên đó Khi trạng thái của dữ liệu thay đổi ví dụ như người dùng chuyển màn hì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ác Widget cũ

và vẽ lên các Widget mới Chính vì vậy thay vì phải biết đến các StoryBoard (trong iOS) hay các Activity (trong Android), Flutter đưa tất cả các khái niệm liên quan đế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ái của cá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ày cũ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ực hiện việc đó trong Widget hiện tại mà được khuyến khích bọc Widget đó trong một Widget nào đó chỉ chuyên làm việc này Điều này khiến cho tính chất

"Trong Flutter thì 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ành phầ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ộc

tính Widget#key Mọi Widget đều độc lập Lí do là vì Widget không thể tự vẽ lại bản thâ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 Widget Tree đượ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à StatefulWidget và 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ủa Widget đó sẽ được khởi tạo lại thông qua việc gọi đến phương thức StatefulWidget#createState() Generic type5 (kiểu giữ chỗ) của State định nghĩa

ra kiể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ông qua State#_element Khi cần vẽ lại, có hai sự kiện được sử dụng để làm bẩ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ép 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ê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á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áp 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:

 Một ngôn ngữ được tối ưu hóa cho client

 Framework mạnh mẽ

 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

 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 ứng dụ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á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 client còn phần server và database đã có firebase lo Firebase là sự kết hợp giữa nền tảng cloud với hệ thống máy chủ cực kì mạnh mẽ tới từ Google, để cung cấp cho chúng ta nhữ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ộ database tới tất cả 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ác client này sẽ cùng sử dụng chung 1 database đế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áp 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 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ống Firebase, và các dữ liệu sẽ được lưu trữ đám mây đồng thời được bảo mật thông qua giao 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ác chức năng của google firebase, vậy cá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á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ác API của Firebase Không chỉ có vậy Firebase còn hỗ trợ đa nền tảng nên bạn sẽ càng

đỡ mất thời gian 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òn giúp

ta đơn giản hóa quá trình đăng kí và đăng nhập vào ứng dụng bằng cách sử dụng hệ thống xác thực do chính Firebase cung cấp

o Bảo mật:

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 giao thứ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ép 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ép 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ép bạn tự xây dựng server của riêng mì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ộc trong cá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ủa riêng bạn

o Sự ổn định:

Firebase hoạt động dựa trên nền tảng cloud đến từ Google vì vậy hầu như bạn khô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ết nối lúc nhanh lúc chậm, … nữa, bởi đơn giản là Firebase hoạt động trên hệ thống server của Google Hơn nữa nhờ hoạt động trên nền tảng Cloud nê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

o Giá thành:

Google Firebase có rất nhiều gói dịch vụ với các mức dung lượng lưu trữ cũng như 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ất chi

phí để bảo trì, nâng cấp, khắc phục 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

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

- Các Chức năng chính

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

o Thông tin hệ thống đại lý

Hinh 1: ứng dụng Gas24h

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

o Truy cập hệ thông nhanh chóng

1.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

Hinh 2: ứng dụng VipGas

- 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

- Chức năng chính

o Tìm kiếm sản phẩm

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

Hinh 3: ứng dụng Lazada

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 hàng

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

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

- Lưu Trữ

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

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

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

- Tính Toán

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

o Tính số tiền phải thanh toán

o Tính thời gian bình luận

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 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ân

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:

Giao diện của phần mềm:

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ìn

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

- Tính tương thích:

o Phần mềm cài đặt được trong hầu hết cá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ác phần mềm khác

2.2.2 Phí a cửa hàng

- Tính tái sử dụng:

o Các thiết kế và chức năng của phần mềm có thể được sử dụng lại cho những

lần phát triển sau này

o Các đoạn mã có thể được sử dụng nhiều lần và áp dụng được cho nhiều

chương trình khác nhau mà không cần phải thay đổi code quá nhiều

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ác nghiệp vụ của khách hàng, cá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ác thông tin sản phẩm, thông tin về dịch vụ khách hàng, cá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ê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

Tra cứu, kết xuất

3 Xem thông tin

Tra cứu, lưu trữ

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ác chức năng này để sử dụng được 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 Bình luận cần có nội dung

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

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

2 QĐ_BLSP Quy định bình

luận sản phẩm

- Nhập bình luận vào editText trước khi bấm gửi Không được để trống nội dung

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ác chức năng riêng để thêm, sửa, xóa, cập nhập các mục cho phần mề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ân 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á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

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 thêm các mục chưa tồn tại

o Ta chỉ được xóa người dùng là khách hà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

STT Mã Số Tên Quy Định /

Công Thức

Mô Tả Chi Tiết Ghi Chú

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

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

khách hàng

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

7 QĐ_XSP Quy định xóa sản

phẩm

Chỉ được xóa sản phẩm khi sản phẩm không được bán ở cửa hàng

1.2 Usecase Diagram

1.2.1 Sơ đồ Usecase Admin

- Nhìn vô sơ đồ ta có thể thấy Admin có thể thấy Admin ngoài việc truy cập đến thông tinh của mình thì Admin sẽ quản lý thêm Sản phẩm và Khách hàng

1.2.2 Sơ đồ Usecase khách hàng

Hinh 4: Sơ đồ Usecase admin

- Khách hàng sẽ có những đặc quyền truy cập riêng của khách hàng

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

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

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

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

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

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

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

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

Hinh 13: Firebase admin quản lý danh sách khách hàng đặt hàng Hinh 11: Firebase khách hàng bình luận về sản phẩm

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

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

- Trường hợp chưa có tài khoản ta có thể đăng kí bằng cách nhấp vào nút ĐĂNG KÝ hiện trên màn hình mà làm theo hướng dẫn

- Trường hợp quên mật khẩu, ta chọn mục quên mật khẩu, sau đó hiện lên thông báo, người dùng sẽ nhập email đã đăng kí của mình vào và chọn gửi, mật khẩu mới sẽ được gửi về email

- Dưới đây là màn hình của Đăng ký và Quên mật khẩu

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

2.1.1.2 Mô tả thành phần và các xử lý

- Bảng dưới đây mô tả các thành phần và các sử lý thành phần có trong giao

diện đăng nhập, đăng ký và màn hình quên mật khẩu

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ý

STT Tên thành phần Loại thành phần Mô tả Ghi chú

Dùng để nhập mật khẩu người dùng

6 Đăng nhập bằng

Facebook (đăng

nhập)

tài khoản facebook để đăng nhập, không cần đăng ký

7 Đăng ký (đăng

nhập)

người dùng muốn đăng

ký một tài khoản mới

thông tin để có một tài khoản mới

yêu cầu quên mật khẩu về mail của người dung

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ý

STT Tên xử lý Điều kiện gọi thực

2 Quên mật khẩu Click vào nút quên

mật khẩu

Khi click vào nút “Quên mật khẩu?” trên giao diện đăng nhập sẽ xuất hiện thông báo “Quên mật khẩu” và yêu cầu gửi password về mail

Khi click vào nút trên thìxuất hiện hộp thoại và sau đó chọn email hoặc tài khoản facebook để đăng nhập vào