Đồ á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

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à

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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 Hoà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 quá 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 quá trình thực hiện đồ án Vì vậy nhóm chúng em luôn 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, hoà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.1 Lý do chọn đề tài 5

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

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

3.1 Yê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

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

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

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

Tuy nhiên, những năm gần đây, người dân Việt Nam nói riêng và trên toà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 yê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 yê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

- 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

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 hoàn toà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 quá 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 ngoà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

- 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 Ngoà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 React Native

Cấu trúc mã

nguồn

Khi sử dụng Flutter, các Developer có thể thực hiện mọi thứ trên cùng một màn 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

Sử dụng React Native cần có thêm JSX hoặc XML để tạo giao diện hay các công cụ đặc biệt để tạo layout

trong quá trình cài đặt

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

Các thư viện

hỗ trợ

Có nhiều các third-party packages đang được sử dụng

và đang ngày càng được phát triển, và chúng thực sự rất hữu dụng

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

Độ phổ biến 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

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

Tài liệu tham

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: https://flutter.dev/docs/get-started/install 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: https://console.firebase.google.com/

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 Hoà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 google-services 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 GoogleService-Info.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

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

Tuy nhiên, những năm gần đây, người dân Việt Nam nói riêng và trên toà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 yê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

5.2 Phạm vi ứng dụng

Với sự bùng nổ của Smartphone, 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, 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