Đồ án tìm HIỂU FLUTTER và xây DỰNG hệ THỐNG PHÂN TÍCH và lưu TRỮ THÔNG TIN THỰC PHẨM

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
-----🙞🙜🕮🙞🙜-----

BÁO CÁO
ĐỒ ÁN 1

ĐỀ TÀI: TÌM HIỂU FLUTTER VÀ XÂY DỰNG HỆ THỐNG
PHÂN TÍCH VÀ LƯU TRỮ THƠNG TIN THỰC PHẨM

Giảng viên hướng dẫn:
Cô Thái Thụy Hàn Uyển
Sinh viên thực hiện:
Lương Kim Phượng
18521275
Đinh Quang Hồng
18520282

TP. Hồ Chí Minh, ngày 20 tháng 6 năm 2021


LỜI CẢM ƠN
Lời đầu tiên em xin chân thành cảm ơn sự hướng dẫn tận tình của cơ
Thái Thụy Hàn Uyển - giảng viên hướng dẫn môn Đồ án 1 đã hỗ trợ những
thông tin cần thiết và giải đáp những thắc mắc cho nhóm trong suốt q
trình thực hiện đề tài.
Đồng thời nhóm em cũng muốn gửi lời cảm ơn đến các anh chị khóa trên,
đặc biệt là những anh chị trong khoa đã chia sẻ những kinh nghiệm quý báu
về môn học cũng như những kiến thức liên quan.
Vì kiến thức của chúng em vẫn cịn hạn hẹp nên khơng thể tránh khỏi những

thiếu sót trong q trình thực hiện đồ án. Vì vậy nhóm chúng em ln mong
đợi nhận được những ý kiến đóng góp quý báu từ phía giảng viên để qua đó
có thể rút kinh nghiệm, tự sửa chữa, hồn thiện bản thân mình trên tinh thần
nghiêm túc, tự giác học hỏi. Một lần nữa nhóm chúng em xin chân thành
cảm ơn cơ.

Nhóm nghiên cứu


NHẬN XÉT CỦA GIÁO VIÊN

...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................

...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................
...............................................................................................................................................................


MỤC LỤC
1.

2.

MỞ ĐẦU
1.1.

Lý do chọn đề tài

5

1.2.

Đối tượng hướng đến

5

GIỚI THIỆU VỀ FLUTTER
2.1.

3.

4.

5.

6.

5

Giới thiệu ngơn ngữ lập trình Dart

CÀI ĐẶT MƠI TRƯỜNG PHÁT TRIỂN FLUTTER

7
7
12

3.1.

u cầu cấu hình phần cứng

12

3.2.

Hướng dẫn cài đặt Flutter

12

3.3.

Tạo project Flutter đầu tiên với Visual Studio Code

14

CÀI ĐẶT FIREBASE LƯU TRỮ CƠ SỞ DỮ LIỆU

15

4.1.

Tạo Project Firebase

15

4.2.

Thêm Android vào project Firebase

18

4.3.

Thêm IOS vào project Firebase

21

PHÁT TRIỂN HỆ THỐNG PHÂN TÍCH VÀ LƯU TRỮ THƠNG TIN THỰC PHẨM

26

5.1.

Đặt vấn đề

26

5.2.

Phạm vi ứng dụng

26

5.3.

Mơ tả bài tốn

27

5.4.

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

27

5.5.

Phân tích thiết kế

28

5.6.

Giao diện ứng dụng

34

KẾT LUẬN

43

6.1.

Kết quả thu được

43

6.2.

Khó khăn

43

6.3.

Phương hướng phát triển

43

TÀI LIỆU THAM KHẢO

44


1.

MỞ ĐẦU

1.1. Lý do chọn đề tài
Thực phẩm là nhu cầu tất yếu của con người. Nếu khơng có thực phẩm thì
cuộc sống trên trái đất khơng tồn tại được. Hằng ngày trung bình mỗi người ăn
từ 3 đến 4 bữa ăn. Và để nấu được những bữa ăn đó chúng ta cần hiểu biết rất
nhiều về thực phẩm, các loại thực vật như rau, củ, quả, trái cây... hay động vật
như gia cầm, gia súc, hải sản, …
Tuy nhiên, những năm gần đây, người dân Việt Nam nói riêng và trên tồn
thế giới nói chung đang dần khơng trang bị cho mình nhiều kiến thức cơ bản về
thực phẩm và nấu ăn. Từ đó gặp nhiều khó khăn và gây mất thời gian khi muốn

tự chuẩn bị những bữa ăn của mình dẫn đến việc phụ thuộc vào fast food – loại
thức ăn nhanh không tốt cho sức khỏe. Hiện tại đời sống của mỗi người dân
ngày càng được nâng cao. Chính vì vậy nhu cầu về sức khỏe, dinh dưỡng cũng
dần dần trở nên quan trọng hơn bao giờ hết. Con người bắt đầu quan tâm đến
dinh dưỡng và muốn tự nấu ăn nhiều hơn nhưng hiện tại chưa có một cơng cụ
nào thực sự hữu hiệu để làm tất cả những việc đó.
Và bắt đầu với một ý tưởng tạo một nền tảng mới, nơi mà mọi người dùng
có thể tìm kiếm và trang bị mọi thơng tin về các loại thực phẩm như hình ảnh,
nguồn gốc, thành phần dinh dưỡng và cơng thức nấu các món ăn u thích của
mình. Từ đó giúp người dùng có thể đích thân xây dựng và chuẩn bị cho mình
những bữa ăn đầy đủ chất dinh dưỡng.

1.2. Đối tượng hướng đến
Nhóm đối tượng chủ yếu của ứng dụng là các tổ chức/cá nhân có và biết
sử dụng smart phone ở mọi độ tuổi từ 12 -> 60, cụ thể:
- Những cá nhân khơng có nhiều kinh nghiệm cũng như kiến thức về thực
phẩm muốn tìm hiểu và trang bị thêm cho mình kiến thức.
- Những cá nhân/tổ chức quan tâm lĩnh vực thực phẩm và dinh dưỡng, mong
muốn nâng cao chế độ dinh dưỡng, sức khỏe của mình.
- Những cá nhân/tổ chức muốn có một cơng cụ giúp dễ dàng tìm kiếm mọi
thơng tin liên quan đến thực phẩm


- Những cá nhân/tổ chức chưa hài lòng về các cơng cụ hỗ trợ tìm kiếm và
lưu trữ thơng tin thực phẩm đang sử dụng.
Ứng dụng này sẽ là trợ thủ đắc lực giúp họ có thể tìm kiếm và trang bị mọi
thông tin về các loại thực phẩm như hình ảnh, nguồn gốc, thành phần dinh dưỡng
và cơng thức nấu các món ăn u thích của mình. Từ đó giúp người dùng có thể
đích thân xây dựng và chuẩn bị cho mình những bữa ăn đầy đủ chất dinh dưỡng.

2.

GIỚI THIỆU VỀ FLUTTER

Hình 1-1 Logo Dart

2.1. Giới thiệu ngôn ngữ lập trình Dart
1.1.1. Ngơn ngữ lập trình 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.
1.1.2. Ưu điểm của Dart
Một số ưu điểm vượt trội của Dart so với các ngơn ngữ lập trình khác:
- 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.

Hình 1-2 Logo Flutter
1.1.3. 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 hồn tồn miễn phí và cũng là mã nguồn mở.


1.1.4. Kiến trúc của Flutter

Hình 1-3 Kiến trúc Flutter
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 Framework 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 ngôn ngữ
C++. Tầng Shell này chứa các công cụ trợ giúp ứng dụng Flutter trong q trình
chạy. Ở tầng này cịn có 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 ngồi ứng dụng).
+ Thơng dịch các đoạn mã Dart theo phương thức JIT (Just in time) hoặc
AOT (Ahead of Time).
+ 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, và các thư viện cần có khác.


→ Máy ảo Dart VM chịu trách nhiệm lớn nhất trong việc quản lý các
runtime system, hỗ trợ debugging hoặc hot reload cho các ứng dụng viết bằng
Flutter.
1.1.5. Ưu điểm của Flutter so với các framework khác
- Flutter là bộ SDK đa nền tảng, hỗ trợ cả Android, iOS và web.
- Fast Development: Tính năng Hot Reload hoạt động trong milliseconds
để hiện thị giao diện tới bạn. Sử dụng tập hợp các widget có thể customizable để
xây dựng giao diện trong vài phút. Ngồi ra Hot Reload cịn giúp bạn thêm các
tính năng, fix bug tiết kiệm thời gian hơn mà không cần phải thông qua máy ảo,
máy android hoặc iOS.
- Expressive and Flexible UI: Có rất nhiều các thành phần để xây dựng
giao diện của Flutter vô cùng đẹp mắt theo phong cách Material Design và
Cupertino, hỗ trợ nhiều các APIs chuyển động, smooth scrolling...
- Native Performance: Các widget của Flutter kết hợp các sự khác biệt của
các nền tảng ví dụ như scrolling, navigation, icons, font để cung cấp một hiệu
năng tốt nhất tới iOS và Android.
- Một đối thủ khác của Flutter là React Native. Đây là framework được tạo
bởi Facebook. Tương tự như Flutter, React Native cũng cho phép các lập trình
viên sử dụng JavaScript để làm ứng dụng di động đa nền tảng, trên cả Android
và iOS.
So sánh Flutter và React Native

Flutter
Khả năng tái
sử dụng

React Native

Flutter cho phép Overwriting React Native cho phép bạn sử
code. Hỗ trợ tốt cho việc tái
dụng lại code, nhưng điều này
lại bị giới hạn trong một vài
sử dụng về sau.
components cơ bản.


Cấu trúc mã
nguồn

Khi sử dụng Flutter, các Sử dụng React Native cần có
Developer có thể thực hiện
thêm JSX hoặc XML để tạo
mọi thứ trên cùng một màn
giao diện hay các cơng cụ đặc
biệt để tạo layout.
hình, trong đó đặc biệt không
cần phải chuyển từ code sang
chế độ thiết kế hoặc ngược lại,
vì vậy các trải nghiệm trên
Flutter khá tiết kiệm thời gian.

Cài đặt môi

Việc cài đặt Flutter diễn ra

trường phát

nhanh chóng, tiện lợi với sự

triển

hỗ trợ của câu lệnh flutter

Cài đặt môi trường phát triển
React Native trông khá loằng
ngoằng và khó khăn đối với
các lập trình viên mới.

doctor -v giúp chẩn đốn lỗi
trong q trình cài đặt.

Các thư viện
hỗ trợ

Độ phổ biến

Từ khi React Native trở lên
phổ biến, đã có rất nhiều các
packages đang được sử dụng
thirdparty packages được phát
và đang ngày càng được phát
triển và được sử dụng rất nhiều

triển, và chúng thực sự rất hữu trong ứng dụng.
dụng.
Có nhiều các third-party

Số lượng người sử dụng
Flutter đang ngày càng gia
tăng. Đặc biệt nhờ sự hậu
thuẫn tích cực từ phía Google.

Tài liệu tham

Cách viết tài liệu của Google

khảo

đơn giản, dễ hiểu nên việc tài

React Native có lượng
developer sử dụng đang nhiều
hơn bởi vì lượng developer sử
dụng JavaScript rất dễ dàng để
sử dụng với các thư viện của
React

Việc tìm kiếm tài liệu có lúc
khá khó khăn, phụ thuộc vào
các cơng cụ dev bên ngoài, yêu


liệu hóa cho Flutter cơ bản là

hiệu quả.

cầu người dùng phải kiếm tài
liệu cho từng bộ mặc dù
Facebook đã khá
nỗ lực để xây dựng một kho tài
liệu trực quan nhất.

Bảng 1-1 So sánh giữa Flutter và React Native

3.

CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER

3.1. Yêu cầu cấu hình phần cứng
- Hệ điều hành: Windows 7, Windows 8.1, Windows 10
- Dung lượng ổ cứng: 1GB
- Công cụ: Visual Studio Code, Android Studio, IntelliJ, …

3.2. Hướng dẫn cài đặt Flutter
- Tải Flutter tại đường dẫn: rồi
giải nén. Tránh giải nén thư mục flutter vào ổ C:\Program Files\
- Sau khi giải nén xong, thiết lập biến mơi trường, vào Control Panel tìm
kiếm từ khóa System và chọn vào mục Edit the system environment variables.


Hình 2-1 Chỉnh sửa biến môi trường
+ Chọn Environment Variables, tại mục System Variables bạn chọn PATH
và nhấn tiếp chọn Edit. Trong cửa sổ Edit System Variable bạn chọn New và dán
đường dẫn tới thư mục Flutter đã giải nén trước đó.

+ Trong thư mục vừa giải nén bạn tìm tập tin flutter_console.bat và khởi
chạy sau đó nhập lệnh flutter doctor -v

Hình 2-2 Chẩn đoán Flutter với flutter doctor


Cài đặt extension/plugin hỗ trợ cho IDE. Ví dụ như extension Flutter (sẽ
tự động cài thêm Dart) trên Visual Studio Code.

Hình 2-3 Extension Flutter trên Visual Studio

3.3. Tạo project Flutter đầu tiên với Visual Studio Code
- Mở Visual Studio Code, nhấn tổ hợp phím Ctrl + Shift + P sau đó gõ
“new project” và ấn Enter để tạo project mới.

Hình 2-4 Tạo project Flutter mới trong Visual Studio Code
- Sau đó chọn thư mục đích nơi chứa project, và nhập tên project


Hình 2-5 Nhập tên project Flutter mới
- Sau khi hoàn tất, ta sẽ thấy Visual Studio Code có giao diện như sau.

Hình 2-6 Giao diện sau khi tạo thành công project

4.

CÀI ĐẶT FIREBASE LƯU TRỮ CƠ SỞ DỮ LIỆU

4.1. Tạo Project Firebase
Truy cập đường dẫn: />Nhấp vào Add project và đặt tên cho project:

Hình 3-1 Tạo project Firebase

Hình 3-2 Nhập tên project Firebase mới
Lưu ý: Tên dự án thực tế có thể tạo thêm một số ký tự ở cuối để tạo tính duy nhất.
Nhấp vào Continue. Để đơn giản, không bật Google Analytics cho dự án
này, vì vậy hãy tắt nó và nhấp vào Create project. Nếu bạn muốn sử dụng Google
Analytics, hãy bật nó lên và sẽ có thêm một bước là chọn hoặc tạo dự án Google
Analytics.


Hình 3-3 Chọn các tiêu chí và Create project
Đợi trong vài giây khi dự án được tạo, cho đến khi bạn thấy rằng nó đã sẵn
sàng và nhấp vào Continue.


Hình 3-4 Hồn thành tạo project

4.2. Thêm Android vào project Firebase
Chọn vào icon Android để thêm Android vào project Firebase mới tại nhé.


Hình 4-1 Thêm Firebase vào app android
Sau đó điền các thông tin lấy ra từ project Flutter và điền vào. Bao gồm
các thông tin về package, SHA1 và nick name của Project. Tiếp là tải file googleservices. json và import vào trong project Flutter như ảnh bên dưới.

Hình 4-2 Điền thông tin đăng ký

Cấu hình build.gradle theo hướng dẫn.

Hình 4-3 Cấu hình file build gradle
Chọn Next và Continue ở màn hình sau đó, thế là xong phần cấu hình cho
Android.


4.3. Thêm IOS vào project Firebase
Bước đầu cũng giống như Android. Click vào icon iOS thay vì icon
Android.

Hình 5-1 Thêm Firebase vào app IOS
Để lấy Bundle id app chúng ta làm như sau: vào Android studio (nếu đang
dùng để code Flutter) chuột phải vào folder iOS và chọn Flutter -> Open module
in Xcode


Hình 5-2 Lấy Bundle id IOS
Ở Xcode, chọn thư mục Runner ở Root -> trong General, các bạn sẽ tìm
thấy bundle identifier, nó chính là bundle id. Sau đó quay lại Firebase console,
nhập bundle Id và tìm được -> click Register app Tiếp theo tải file GoogleServiceInfo.plist ở bước kế tiếp.


Hình 5-3 Tải và di chuyển file GoogleService.json
File tải về phải được bỏ vào thư mục Runner/Runner.


Hình 5-4 Cấu hình Firebase
Ở đây chúng ta cấu hình như hình trên. Ở bước add SDK nên build App
lên điện thoại để quá trình kết nối giữa iOS và Firebase diễn ra, nếu thành cơng

thì sẽ hiển thị theo bên dưới.


Hình 5-5 Giao diện thiết lập Firebase với IOS thành công