Bao Cao Đồ Án Flutter

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

ĐỒ ÁN CHUYÊN NGÀNH

ỨNG DỤNG BÁN HÀNG

Ngành:

CÔNG NGHỆ THÔNG TIN

Chuyên ngành:

CÔNG NGHỆ PHẦN MỀM

Giảng viên hướng dẫn:
Lớp: 16DTHA1
Sinh viên thực hiện:

TP. Hồ Chí Minh, 2020

MỤC LỤC


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

LỜI NÓI ĐẦU

Ngày nay công nghệ thông tin ngày càng phát triển có rất nhiều công
nghệ mới được cho ra mắt. Bên cạnh đó có rất nhiều công cụ hổ trợ các lập

trình viên xây dựng cho mình một phần mềm riêng và trong lĩnh vực đa nền
tảng cũng vậy.
Flutter Là một bộ SDK đa nền tảng dành riêng cho thiết bị di động được
Google cung cấp để tạo ra các giao diện native chất lượng cao, các ứng dụng
Flutter có thể hoạt động trên cả IOS và Android. Nó như một thủ thuật khôn
khéo để tương thích được với framework UI trên cả hai hệ điều hành này
Flutter được Google cho ra mắt năm 2017 vẫn còn khá mới mẽ, Nhưng
các lập trình viên lại rất ưa chuộng và tiếp cận rất nhanh nhờ những tính năng
và lợi ích mà Flutter mang lại.
Sau một thời gian tìm hiểu và nghiên cứu thì chúng em đã vận dụng để
làm một ứng dụng để có thể áp dụng vào cuộc sống. Nhận thấy việc ăn uống
của sinh viên trong trường còn gặp nhiều khó khăn nên chúng em đã áp dụng
những kiến thức đã học để làm một Ứng dụng bán hàng, có thể hỗ trợ cả 2 hệ
điều hành là Android và IOS.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

2


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

LỜI CẢM ƠN

Sau quá trình học tập, nghiên cứu và sự nỗ lực của bản thân đặc biệt là
sự hướng dẫn tận tình của Cô: Nguyễn Thị Kim Anh em đã hoàn thành đề tài
đúng tiến độ.
Em xin bày trỏ lòng biết ơn chân thành tới Cô: Nguyễn Thị Kim Anh đã

hướng dẫn, chỉ bảo và đôn đốc em trong suốt quá trình thực hiên đề tài.
Đồng cảm ơn sâu sắc đến tất cả quý thầy cô trường Đại Học Công Nghệ
Thành Phố Hồ Chí Minh, Các Thầy Cô khoa công nghệ thông tin đã tạo điều
kiên hỗ trợ chúng em về cơ sở vật chất cũng như truyền đạt chúng em những
kiến thức, những cái hay trong công nghệ thông tin.
Với mong muốn vận dụng kiến thức đã học được vào thực tế, qua đó làm
quen và đúc kết kinh nghiệm để sau này có thể xây dựng nên 1 phần mềm có
thể ứng dụng được vào cuộc sống, đáp ứng được nhu cầu xã hội. Đồng thời qua
đó, chúng em có thể hiểu sâu vào nôi dung và nắm bắt được ý nghĩa thực tiễn
của đề tài nghiên cứu. Vì đây là phần mềm Flutter đầu tiên của chúng em nên
vẫn còn thiếu sót chưa hoàn chỉnh. Em rất mong nhận được sự thông cảm, góp
ý và tận tình chỉ bảo của Cô.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

3


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

CHƯƠNG I. TỔNG QUAN
1.1.

Giới thiệu về đề tài:
Tại sao chọn Flutter mà không phải là ngôn ngữ khác?
•

Nếu bạn đang tìm kiếm các phương pháp thay thế để phát triển ứng dụng

Android, bạn nên cân nhắc thử Flutter của Google, một framework dựa
trên ngôn ngữ lập trình Dart.

•

Các ứng dụng được xây dựng với Flutter hầu như không thể phân biệt với
những ứng dụng được xây dựng bằng cách sử dụng Android SDK, cả về
giao diện và hiệu suất. Hơn nữa, với những tinh chỉnh nhỏ, chúng có thể
chạy trên thiết bị iOS.

•

Phát triển ứng dụng thống nhất: Flutter có các công cụ và thư viện để
giúp bạn dễ dàng đưa ý tưởng của mình vào cuộc sống trên iOS và
Android. Nếu bạn chưa có kinh nghiệm phát triển trên thiết bị di động, thì
Flutter là một cách dễ dàng và nhanh chóng để xây dựng các ứng dụng di
động tuyệt đẹp. Nếu bạn là một nhà phát triển iOS hoặc Android có kinh
nghiệm, bạn có thể sử dụng Flutter cho các View của bạn và tận dụng
nhiều code Java / Kotlin / ObjC / Swift hiện có của bạn.

•

Framework hiện đại và reactive: Dễ dàng tạo giao diện người dùng của
bạn với framework hiện đại, reactive của Flutter và tập hợp các platform,
layout và widget phong phú. Giải quyết các thách thức giao diện người
dùng khó khăn của bạn với các API mạnh mẽ và linh hoạt cho 2D,
animation, gesture, hiệu ứng và hơn thế nữa.

•

UI đẹp và biểu cảm: Thỏa mãn người dùng của bạn với các widget builtin đẹp mắt của Flutter theo Material Design và Cupertino (iOS-flavor),
các API chuyển động phong phú, scroll tự nhiên mượt mà và tự nhận thức
được nền tảng.

•

Chạy ở 60 fps, giao diện.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

4


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH
•

GVHD:

Người dùng được tạo ra với Flutter thực thi tốt hơn nhiều so với những
ứng dụng được tạo ra với các framework phát triển đa nền tảng khác
chẳng hạn như React Native và Ionic. Một số lí do khiến bạn có thể hứng
thú với Flutter:
o

Flutter sử dụng Dart, một ngôn ngữ nhanh, hướng đối tượng với
nhiều tính năng hữu ích như mixin, generic, isolate, và static type.

o

Flutter có các thành phần UI của riêng nó, cùng với một cơ chế để

kết xuất chúng trên nền tảng Android và iOS. Hầu hết các thành
phần giao diện người dùng, đều sẵn dùng, phù hợp với các nguyên
tắc của Material Design.

o

Các ứng dụng Flutter có thể được phát triển bằng cách4 sử dụng
IntelliJ IDEA, một IDE rất giống với Android Studio.

Hiện nay có rất nhiều ngôn ngữ hổ trợ da nền tảng một cái tên lớn phải
nhắc đến là React Native. Các công ty lớn như UberEats, Discord và
Facebook đã chuyển sang React Native – như một phần tất yếu của sự dịch
chuyển công nghệ. Nhưng Google cũng không chịu thua. Họ đã nhận thấy độ
phủ sóng của React Native. Sau 2 năm nghe ngóng, Google cho ra mắt phiên
bản alpha của Flutter.
 Hỗ trợ hot reload:

Thông thường với lập trình Android bằng Android Studio. Mỗi lần chúng ta
thay đổi một dòng code thì đều phải build và chạy lại ứng dụng.
Hot reload sẽ giúp chúng ta không phải build lại ứng dụng và chỉ reload lại
màn hình đã thay đổi code mà thôi. Điều này sẽ tiết kiệm rất nhiều thời gian
cho developer.
 Code structure:

Ngược với React Native, Flutter không tách biệt data, style, và templates.
Mình biết bạn có thể cảm thấy kì lạ nếu như bạn đã quen với React native.
Tuy nhiên, cách tiếp cận này cũng thuận tiện và được khá nhiều người chấp

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

5


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

thuận. Flutter không cần thêm ngôn ngữ tạo giao diện như JSX hoặc XML
hay các công cụ đặc biệt để tạo layout.
Khi sử dụng Flutter, bạn có thể tiết kiệm thời gian khi không cần phải
chuyển từ chế độ thiết kế sang code và ngược lại. Flutter cho phép bạn làm
mọi thứ trong cùng một màn hình. Ngoài ra, tất cả các công cụ cần thiết đều
có thể truy cập từ cùng một vị trí.
 Cài đặt môi trường phát triển:

Flutter được đơn giản hóa quá trình cài đặt. Framework này cũng cung cấp
một công cụ hữu ích để kiểm tra lỗi hệ thống được gọi là ” Flutter doctor”.
 Hiệu suất sử dụng:

Flutter là kiến trúc cho phép chúng ta xây dựng các ứng dụng native, có
hiệu suất nhanh. Bởi vì Flutter không cần cầu nối, nó có thể hoạt động
nhanh hơn nhiều. Do đó, Flutter có thể chạy animation với 60 khung hình
/giây.

1.2.

Mục đích nghiên cứu:

-

Cũng cố và nắm chắc kiến thức về lập trình di động

-

Tạo ra một phần mềm ứng dụng vào thực tế.

-

Phương pháp để xây dựng một ứng dụng

-

Biết được cách để tiếp cận một ngôn ngữ mới

-

Nắm được những kiến thức cơ bản về Android Studio

1.3.

Phương pháp nghiên cứu:

-

Thu thập tham khảo các tài liệu trên các trang web

-

Tham khảo ý kiến của giảng viên hướng dẫn để hoàn thiện phần mềm

-

Xây dựng một phần mềm với công cụ hỗ trợ Flutter và ngôn ngữ Dart

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

6


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

CHƯƠNG II. CƠ SỞ LÝ THUYẾT
2.1. Flutter:

2.1.1.

Giới thiệu về Flutter:

Flutter là một Framework viết trên nền ngôn ngữ Dart. Flutter được sinh ra
như một Cross-platform framework nhưng khác với những Cross-platform
hiện tại, Flutter viết mã và build ra các đoạn mã thực thi tương ứng trên các
thiết bị khác nhau thay vì build ra thành các đoạn mã được tối ưu và chạy trên
những môi trường trung gian.
Flutter được viết chia làm hai tầng. Tầng ở trên sử dụng ngôn ngữ 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.
•

Flutter là SDK dành cho thiết bị di động của Google để tạo ra các giao
diện native chất lượng cao trên iOS và Android trong thời gian ngắn.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

7


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

Flutter làm việc với source code có sẵn, được sử dụng bởi các nhà
phát triển và các tổ chức trên khắp thế giới, đồng thời nó open-source
và miễn phí.
•

Flutter có các công cụ và thư viện để giúp bạn dễ dàng đưa ý tưởng
của mình vào cuộc sống trên iOS và Android. Nếu bạn chưa có kinh
nghiệm phát triển trên thiết bị di động, thì Flutter là một cách dễ dàng
và nhanh chóng để xây dựng các ứng dụng di động tuyệt đẹp. Nếu
bạn là một nhà phát triển iOS hoặc Android có kinh nghiệm, bạn có
thể sử dụng Flutter cho các View của bạn và tận dụng nhiều code Java

/ Kotlin / ObjC / Swift hiện có của bạn.

•

Flutter sử dụng Dart, một ngôn ngữ nhanh, hướng đối tượng với
nhiều tính năng hữu ích như mixin, generic, isolate, và static type.

•

Flutter có các thành phần UI của riêng nó, cùng với một cơ chế để kết
xuất chúng trên nền tảng Android và iOS. Hầu hết các thành phần
giao diện người dùng, đều sẵn dùng, phù hợp với các nguyên tắc của
Material Design.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

8


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

2.1.2.

GVHD:

Mô hình cấu tạo nên một project Flutter:

Hình 1. Mô hình cấu tạo nên một project Flutter
•

Phần lớn nhất chính là: My App

•

Bên trong Material App sẽ có các thuộc tính: title, theme, và home .
Trong đó, tên title có ý nghĩa tương đương với Android
@string/app_name để được đặt trong AndroidManifest với thuộc tính
application:android: name, hay với iOS là Product Name, hay chí ít là
Identity#Display name. Tên theme này có vai trò tương tự như phần
theme trong values/styles của Android. Cuối cùng là home. Vai trò của
tên này tương ứng với việc bạn định nghĩa Activity

•

Scaffold: đóng vai trò như phần nền để bố trí các thành phần khác
theo phong các Material Design hay Material Theming. Nếu bạn đã

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

9


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

quen với việc viết ứng dụng Android theo phong cách mặc định là
Google cung cấp thông qua theme Theme.AppCompat hay
android:Theme.Material thì bạn không còn lạ gì với Scaffold này. Nó
tương tự như vậy và giống như là sự tổng hợp của DrawerLayout và

CoordinatorLayout vậy.
•

AppBar: Nó tương tự như Toolbar hay ActionBar trong Android Sdk
và Support Lib. Tuy nhiên, nó không đơn giản như Toolbar hay
ActionBar, vì thực sự bạn phải chỉ định Widget con của nó bằng tay,
thay vì dùng hàng loạt methods để thực hiện các thao tác đã định sẵn
với các Widgets mặc định trong Android như setText hay
setNavigationIcon.

•

Column và Row: Đây sẽ là những widget quen thuộc đối với các bạn
chuyên code Android, vì chúng tương đồng với LinearLayout. Trong
khi Row tương ứng với LinearLayout với orientation là horizontal, tức
chiều ngang, thì Column resemble vertical LinearLayout, tức chiều
dọc. Còn đối với các bạn chưa thao tác với Android Sdk, thì chúng sẽ
sắp

xếp tuần

tự các

widget

con

theo

một

hướng

ngang

từ start sang end đối với Row, hay từ top xuống bottom với Column
•

Center: Đây sẽ là một Widget có thể gây cho bạn sự lầm lẫn khá tai
hại bởi hành vi của nó có khác khi nó đi một mình hay đi chung với ai
đó. Nếu nó đi một mình, và parent của nó không đi kèm – hay nói
theo kiểu vui của tôi là không có cặp kè – với Widget ngang hàng (với
tên parent đó) nào khác và bản thân của nó cũng không “nắm tay” ai,
thì kích thước của nó sẽ tăng lên chiếm trọn không gian. Còn nếu nó
phải đi kèm với ai đó, thì nó sẽ e dè mà điều chỉnh kích thước chỉ vừa
đủ bọc con/child của nó mà thôi.

2.1.3.

Ưu Điểm của Flutter:
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 DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

10


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

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

2.1.4.

Các thành phần quan trọng trong Flutter:

 Widget

Widget chịu trách nhiệm hình thành cấu trúc của Diagnosticable
Tree (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 đó, 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

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

11


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

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...
 StatefulWidget

Là widget mà trạng thái của chúng có thể thay đổi. Để tạo state thì
statefulwidget phải gọi method createState();
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. 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.
 StatelessWidget

Là các widget không chứa State. Tất cả các giá trị của StatelessWidget
đều là final →

không thể thay đổi trong thời gian chạy, do đó

StatelessWidget chỉ hiển thị những gì được truyền vào trong contructor.
Ngược lại, để thay đổi trạng thái của widget ta dùng statefulwidget

2.2. Dart:

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

12


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

2.2.1.

GVHD:

Giới thiệu ngôn ngữ Dart:

Dart là ngôn ngữ lập trình dạng hướng đối tượng. Cũng là một ngôn ngữ viết ở
một lần dùng ở nhiều nơi nhưng khác với Java, Dart thay vì tạo ra những môi
trường trung gian giữa code thực thi và môi trường thiết bị thì Dart sử dụng
những trình biên dịch khác nhau để biên dịch ra mã máy tương ứng. Hiện
tại Dart đang hỗ trợ để tạo ra những ứng dụng trên iOS, Android, Fuchsia và
Web. Riêng với Web Application, Dart biên dịch bản thân thành code
Javascript (ở trường hợp này, Dart được coi như là một synxtax sugar cho
Javascript).
Dart đồng thời cũng là một ngôn ngữ hỗ trợ asynchrony. Tức nghĩa là
trong Dart chỉ có một dòng chảy tuần tự chảy từ trên xuống dưới. Code được
đưa vào hàng đợi và hoàn toàn có thứ tự khi được thực thi
•

Dart là ngôn ngữ lập trình mới, được phát triển bởi Google, hiện đã
được chấp thuận bởi tổ chức Ecma.

•

Dart được sử dụng để xây dựng các loại ứng dụng: web, server, di
động (IOS và Android với công cụ Flutter).

•

Dart là ngôn ngữ hỗ trợ lập trình hướng đối tượng, cú pháp kiểu C,
mã code Dart có thể biên dịch thành JavaSript để chạy trên trình
duyệt. Nó hỗ trợ những khái niệm lập trình hiện đại như giao diện
lớp, lớp trừu tượng ...

•

Từ ngôn ngữ lập trình Dart, Google giới thiệu SDK Flutter để sử
dụng ngôn ngữ Dart phát triển ứng dụng di động chạy đa nền tảng
(Một lần viết code build ra ứng dụng cho ISO và Android).

 Tại sao lại lựa chọn ngôn ngữ Dart?

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 DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

13


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

độ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:

2.2.2.
•

•

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

•

Framework mạnh mẽ

•

Công cụ linh hoạt

Đặc điểm của ngôn ngữ Dart:
Dart đi kèm với trình soạn thảo nhẹ, Bạn có thể dung Dart Editor để
viết, chạy và gỡ lỗi các ứng dụng Dart, Dart editor có thể giúp bạn
phát hiện các lỗi tiềm năng.

•

Giúp bạn viết code tốt và nhanh hơn.

•

Dart được thiết kế để biên dịch sang JavaScript.

2.2.3.
•

Những ưu điểm của 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

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

14


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

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. Visual studio code:

2.3.1.

Giới thiệu:

Visual Studio Code là một trong những công cụ soạn thảo văn bản lập trình tốt
nhất. Nó thay thế Sublime Text làm lựa chọn trình soạn thảo code của nhiều
nhà lập trình. Đây là một ứng dụng JavaScript dựa trên điện tử (như Atom,
một trình soạn thảo code được đánh giá cao khác), nhưng nó nhanh và không
gặp phải các vấn đề về hiệu suất như hầu hết các ứng dụng JavaScript khác.
Visual Studio Code là mã nguồn mở và có trên GitHub. Dưới đây là một số
mẹo về Visual Studio Code cần thiết mà bạn nên tìm hiểu nếu muốn tăng năng
suất và luồng công việc của mình.
2.3.2.


Những tính năng hay của VsCode:

Tính năng sửa Conflict:
Bạn chỉ cần tìm chọn tìm kiếm trên tất cả các file có dấu xương cá <<<<<.
Lúc này VSCode sẽ hiện thị 2 phần, phía trên là code của nhánh chính
(thường là master), còn phía dưới là code của nhánh hiện tại. Sẽ có 4 sự lựa
chọn Accept Current Change nó sẽ lấy code phía trên, Accept Incoming

Change sẽ lấy phần code dưới, Accept Both Changes sẽ chấp nhận cả 2,
còn Compare sẽ hiện ra 1 màn hình để so sánh. Ngoài ra chúng ta có thể
copy phần cần thiết từ phần dưới lên phần trên và lấy sự thay đổi gộp đó,
cũng như làm ngược lại là đưa phần nào ta cần của phần trên xuống phần
dưới và chọn lấy những code phần dưới.
 Xem nhiều file cùng lúc:

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

15


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

Hầu hết các trình soạn thảo văn bản hiện đại đều có thể hỗ trợ nhiều file
cùng một lúc, cho phép bạn chuyển đổi giữa các file mở thông qua một số
loại giao diện dựa trên tab. Các trình soạn thảo văn bản nâng cao hơn thậm
chí có thể hỗ trợ chỉnh sửa văn bản song song và Visual Studio Code thực
hiện được việc đó, mặc dù theo chiều ngang.
Tuy nhiên việc chỉnh sửa song song rất khó trên màn hình nhỏ như máy
tính xách tay hoặc màn hình cũ hơn, nhưng với Visual Studio Code điều đó
đã được giải quyết. Nó có tính năng Dynamic panel, giúp điều chỉnh các
bảng tài liệu nếu mở quá hẹp sẽ tự động mở rộng khi chỉ con trỏ vào nó.
Nếu thích sử dụng độ phân giải gần 720p, bạn sẽ thích tính năng này.
 Đổi tên tất cả các biến hoặc phương thức cụ thể:
Tái cấu trúc là một việc cần thiết để viết và duy trì code sạch, nhưng nó có
thể khá đau đầu, đặc biệt khi bạn đang tái cấu trúc một module lớn hoặc
một đoạn code lớn. Vì vậy, thay vì tìm kiếm trong hàng chục file để thay

đổi tên biến hoặc phương thức, hãy để Visual Studio Code làm điều đó cho
bạn.
Nếu chọn một biến/phương thức và nhấn F2, bạn có thể chỉnh sửa tên và nó
sẽ thay đổi trên toàn bộ dự án đang làm việc. Nếu chỉ muốn thay đổi tên
trong một file, sử dụng phím tắt Ctrl+F2 và Visual Studio Code sẽ hiển thị
một con trỏ ở các instance trong file đó.
Tìm kiếm trên nhiều file:
Nếu đang làm việc với các file không phải là mã nguồn, các tính năng tìm


kiếm biểu tượng ở trên (trong mẹo số 6) sẽ không thể sử dụng được. Vì vậy,
khi muốn tìm một câu hoặc một từ mà không nhớ tên file, bạn có thể sử
dụng hàm find cơ bản.
Trên file hiện tại, nhấn Ctrl+F, nếu muốn tìm kiếm ở tất cả các file trong dự
án hiện tại, kể cả trong các thư mục phụ, bạn có thể nhấn Ctrl+Shift+F.
 Cài đặt thêm theme:
Visual Studio Code cho phép bạn cài đặt theme cho cú pháp giúp làm nổi
bật văn bản và mã nguồn. Tuy nhiên, nó không cho phép người dùng thay
đổi theme giao diện, nhưng làm nổi bật cú pháp cũng khá quan trọng. Bạn
sẽ ngạc nhiên khi biết rằng việc cài đặt theme này sẽ đẩy nhanh năng suất
của bạn như thế nào. Bạn có thể tìm theme mới trong Visual Studio Code

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

16


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

Marketplace (miễn phí) hoặc tìm kiếm trực tiếp trong Visual Studio Code.
Đầu tiên sử dụng tổ hợp phím Ctrl+Shift+P rồi gõ theme, sau đó chọn
theme mong muốn.

2.4. Firebase Realtime:

2.4.1.

Giới thiệu:

Firebase là một dịch vụ hệ thống backend được Google cung cấp sẵn cho ứng
dụng Mobile của bạn, với Firebase bạn 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 mình đ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. Sử dụng Firebase bạn sẽ có được hưởng các lợi ích sau:
•

Xây dựng ứng dụng nhanh chóng mà không tốn thời gian, nhân lực để
quản lý hệ thống và cơ sơ sở hạ tầng phía sau: Firebase cung cấp cho
bạn chức năng như phân tích, cơ sở dữ liệu, báo cáo hoạt động và báo
cáo các sự cố lỗi để bạn có thể dễ dàng phát triển, định hướng ứng
dụng của mình vào người sử dụng nhằm đem lại các trải nghiệm tốt
nhất cho họ.

•

Uy tín chất lượng đảm bảo từ Google: Firebase được google hỗ trợ và
cung cấp trên nền tảng phần cứng với quy mô rộng khắp thế giới,

được các tập đoàn lớn và các ưng dụng với triệu lượt sử dụng từ
người dùng.

•

Quản lý cấu hình và trải nghiệm các ứng dụng của Firebase tập trung
trong một giao diện website đơn giản, các ứng dụng này hoạt động
độc lập nhưng liên kết dữ liệu phân tích chặt chẽ.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

17


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

2.4.2.

GVHD:

Những thành phần trong Firebase Realtime:

 Crashlytics:

Hệ thống theo dõi và lưu trữ thông tin lỗi của ứng dụng đang chạy trên
máy người dùng. Các thông tin lỗi này được thu thập một các toàn diện
và ngay tức thời. Cách trình bày hợp lý với từng chu trình hoạt động đến
khi xảy ra lỗi, các báo cáo trực quan giúp người phát triển có thể nắm bắt
và xử lý kịp thời các lỗi chính của ứng dụng.
 Cloud Firestore:

Lưu trữ và đồng bộ dữ liệu giữa người dùng và thiết bị – ở quy mô toàn
cầu – sử dụng cơ sở dữ liệu noSQL được lưu trữ trên hạ tầng
cloud. Cloud Firestore cung cấp cho bạn tính năng đồng bộ hóa trực
tuyến và ngoại tuyến cùng với các truy vấn dữ liệu hiệu quả. Tích hợp
với các sản phẩm Firebase khác cho phép bạn xây dựng các ứng dụng
thực sự ngay cả khi kết nối internet bị gián đoạn.
 Authentication:

Quản lý người dùng một cách đơn giản và an toàn. Firebase Auth cung
cấp nhiều phương pháp để xác thực, bao gồm email và mật khẩu, các nhà
cung cấp bên thứ ba như Google hay Facebook, và sử dụng trực tiếp hệ
thống tài khoản hiện tại của bạn. Xây dựng giao diện của riêng bạn hoặc
tận dụng lợi thế của mã nguồn mở, giao diện người dùng tùy biến hoàn
toàn.
 Cloud Functions:

Mở rộng ứng dụng của bạn bằng mã phụ trợ tùy chỉnh mà không cần
quản lý và quy mô các máy chủ của riêng bạn. Các chức năng có thể
được kích hoạt bởi các sự kiện, được phát sinh ra bởi các sản phẩm
Firebase, dịch vụ Google Cloud hoặc các bên thứ ba có sử dụng
webhooks.
 Cloud Storage:

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

18


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

Lưu trữ và chia sẻ nội dung do người dùng tạo ra như hình ảnh, âm thanh
và video với bộ nhớ đối tượng mạnh mẽ, đơn giản và tiết kiệm chi phí
được xây dựng cho quy mô của Google. Các Firebase SDK cho Cloud
Storage thêm tính năng bảo mật của Google để tải lên và tải tệp cho các
ứng dụng Firebase của bạn, bất kể chất lượng mạng.
 Hosting:

Đơn giản hóa lưu trữ web của bạn với các công cụ được thực hiện cụ thể
cho các ứng dụng web hiện đại. Khi bạn tải lên nội dung web, chúng tôi
sẽ tự động đẩy chúng đến CDN toàn cầu của chúng tôi và cung cấp cho
họ chứng chỉ SSL miễn phí để người dùng của bạn có được trải nghiệm
an toàn, đáng tin cậy, độ trễ thấp, dù họ ở đâu.
 Test Lab for Android:

Chạy thử nghiệm tự động và tùy chỉnh cho ứng dụng của bạn trên các
thiết bị ảo và vật lý do Google cung cấp. Sử dụng Firebase Test Lab
trong suốt vòng đời phát triển của bạn để khám phá lỗi và sự không nhất
quán để bạn có thể cung cấp một trải nghiệm tuyệt vời trên nhiều thiết bị.
 Performance Monitoring:

Chẩn đoán các vấn đề về hiệu suất ứng dụng xảy ra trên thiết bị của
người dùng của bạn. Sử dụng dấu vết để theo dõi hiệu suất của các phần
cụ thể trong ứng dụng của bạn và xem chế độ xem tổng hợp trong bảng
điều khiển Firebase. Luôn cập nhật thời gian khởi động của ứng dụng và
theo dõi các yêu cầu HTTP mà không cần viết bất kỳ mã nào.

2.5. Dialogflow:

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

19


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

2.5.1.
•

GVHD:

Giới thiệu:
Các giải pháp AI được hỗ trợ bởi học máy có thể thích ứng với hành
vi của người dùng và hiểu rõ hơn cách các cá nhân nói với ứng dụng
hoặc thiết bị. Điều này có thể thúc đẩy việc sử dụng nhận dạng giọng
nói và giọng nói sâu hơn, có khả năng đến mức mọi người ngừng sử
dụng bàn phím, màn hình cảm ứng và các đầu vào tương tự và chuyển
sang nói chuyện đơn giản với công nghệ mọi lúc. Vấn đề là AI nói
chung và máy học nói riêng, dựa vào lượng dữ liệu khổng lồ và đi
kèm với một gánh nặng kỹ thuật đáng kể để khởi đầu.

•

Dialogflow (tiền thân là API.AI) là một dịch vụ do Google cung cấp
nhằm giúp các lập trình viên dễ dàng hơn khi lập trình các sản phẩm
có giao tiếp giữa người dùng với sản phẩm thông qua các đoạn hội
thoại bằng văn bản (text) hoặc giọng nói (voice).

•

Dialogflow sử dụng trí tuệ nhân tạo (AI) giúp phân tích ngôn ngữ tự
nhiên để hiểu được những gì người dùng đưa vào.

•

Dialogflow loại bỏ những thách thức ban đầu này bằng cách tích hợp
nhận dạng giọng nói dựa trên AI và học máy cùng Google Cloud. Từ
đó, các ứng dụng khác trong nền tảng có thể tận dụng Dialogflow
để hỗ trợ dễ dàng hơn các tương tác dựa trên giọng nói , điều này
được thực hiện thông qua các điều sau:


Các hệ thống máy học của Google bao gồm các mẫu dựng sẵn
có nghĩa là nhận dạng các mẫu giọng nói cho các trường hợp
sử dụng cụ thể hoặc cho phép các nhóm xây dựng trên các
công cụ hiểu ngôn ngữ hiện có để tạo các tác nhân kỹ thuật số
của riêng họ.



Tích hợp dữ liệu từ các hệ thống doanh nghiệp có thể cung cấp
thông tin và kiến thức liên quan đến một tác nhân ảo, cho phép
trợ lý AI đáp ứng tốt hơn các yêu cầu của khách hàng.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

20

BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH


GVHD:

Hỗ trợ nhiều ngôn ngữ và khả năng đáp ứng để xử lý người
dùng đa ngôn ngữ.

2.5.2.


Những công cụ trong Dialogflow:
Intent: Theo định nghĩa của từ điển vdict.com, INTENT là danh từ, có
nghĩa

là

ý

định/mục

đích/nghĩa.

Còn

theo dialogflow.com,

một INTENT là đại diện cho một ánh xạ giữa những gì người dùng
đưa vào, và hành động sẽ được thực hiện bởi phần mềm.

•

Để bạn dễ hiểu hơn, tôi có một ví dụ này, bạn đang cần làm một
Chatbot dự báo thời tiết, giả sử khi người dùng hỏi với bot:



•

Ngày mai ở Hà Nội trời có mưa không?
Hay, Thứ 6 này đến Đà Nẵng thì có cần mang áo ấm không?

Với cả hai câu hỏi này, người dùng đều đang mong muốn Chatbot
trả lời thông tin dự báo về thời tiết. Như vậy, khi lập trình Chatbot,
bạn chỉ cần 1 hành động cho cả hai câu hỏi, hay bạn cần tạo một
INTENT cho chúng.

•

Nói một cách khác, một INTENT là một tập những gì người dùng
nói mà chúng có cùng một ý nghĩa.



Entity: cũng theo từ điển vdict.com, Entity là thực thể hay sự tồn tại
(của một vật), Với Dialogflow.com, Entities là những công cụ được sử
dụng để trích xuất các giá trị của tham số từ ngôn ngữ tự nhiên. Bất kì
những gì bạn muốn biết từ nội dung của người dùng đều có một

Entity tương ứng.

 Agent: Trong dialogflow.com, AGENT là khái niệm được dùng để đại
diện cho một mô-đun (module)
 NLU (Natural Language Understanding – Phân tích để hiểu ngôn ngữ
tự nhiên). AGENT giúp bạn phân tích những những gì người dùng
đưa vào (text hoặc voice) để chuyển thành những dữ liệu mà bạn có

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

21


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

GVHD:

thể xử lý được bằng lập trình.Bạn sẽ sử dụng một AGENT để quản lý
các đoạn hội thoại thông qua INTENTS, ENTITIES.

CHƯƠNG III. KẾT QUẢ THỰC NGHIỆM
3.1. Ý tưởng đề tài:
3.1.1.

Tại sao chọn đề tài ứng dụng Kin Food ?

Công nghệ ngày một phát triển nhu cầu của con người cũng tăng theo. Trong
ăn uống cũng vậy. Ứng dụng giao hàng sẽ là một ứng dụng được sử dụng khá
phổ biến trên thế giới, trong thời đại công nghệ ngày nay để đặt món có rất
nhiều phương pháp khác nhau bạn có thể đến trực tiếp cửa hàng hay quán ăn.
Nhưng với những người có thời gian rảnh hạn chế thì có thể đặt món trực tiếp
trên Internet hay đơn giản hơn là đặt món qua một ứng dụng trên thiết bị di

động. Chúng ta có thể đặt món ở bất kỳ đâu, bất kỳ thời điểm nào bạn muốn.
Hơn nữa, lại có rất nhiều ưu đãi giảm giá hấp dẫn, có cả những món ăn mà chỉ
có khi đặt món qua ứng dụng, độ ngon thì không thua gì bạn đến ăn trực tiếp
tại quán mà lại tiết kiện thời gian, công sức.
Xuất phát từ nhu cầu và tính áp dụng vào đời sống hàng ngày mà việc cần
thiết trang bị cho bản thân một vài ứng dụng giao thức ăn đóng vai trò không
thể thiếu. Chính vì vậy chúng em đã thực hiện đề tài xây dựng “Ứng dụng Kin
Food” này nhằm đáp ứng được một phần nhu cầu của người dùng hiện nay.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

22


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

3.1.2.


GVHD:

Một số ứng dụng đặt món trực tuyến trên thiết bị di động:
GrabFood:
Chỉ mới 8 tháng từ khi ra mắt tại Việt Nam, GrabFood đã gây ấn
tượng về tốc độ giao hàng trên thị trường với thời gian giao hàng
trung bình chỉ 20 phút - con số cạnh tranh nhất thị trường ở thời điểm
hiện tại cho "một người đến sau". Tốc độ ấn tượng này đến từ 3 ưu thế
lớn: sở hữu lượng dữ liệu khổng lồ từ công ty mẹ - Grab, mạng lưới
đối tác kinh doanh rộng khắp (tăng 10 lần từ tháng 6) và lượng đối tác
tài xế lớn nhất thị trường.

•

Ưu điểm:
o Tính tiện lợi cao, giá cả hợp lý, giao hàng nhanh chóng.
o Sử dụng được hầu hết trên các thiết bị di động.
o Luôn có nhiều ưu đãi hấp dẫn.
o Số lượng món ăn đa dạng, phong phú.

•

Nhược điểm:
o Tuy số lượng shipper rất đông nhưng tính chuyên nghiệp

của họ lại không tốt bằng những đối thủ khác.


Now:
Là ứng dụng thuộc Foody, một startup sở hữu hệ sinh thái ẩm thực
toàn diện và có "lực" nhất tại Việt Nam. Từ vài năm nay, trước cả khi
Now ra đời, Foody đã xây dựng được lượng user đáng kể xem review
nhà hàng, sau này là đặt bàn qua TableNow và rồi đặt món qua Now.

•

Ưu điểm:
o Số lượng nhà hàng, quán ăn được liên kết rất lớn.
o Có được lượng người dùng đáng kể

•

Nhược điểm:
o quá trình đặt hàng và giao hàng có phần rườm rà khi phải

thông qua bộ phận call center . Vì thế, tốc độ xử lý đơn
hàng và giao nhận đồ ăn không là lợi thế của Now.

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

23


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH


GVHD:

GoFood:
Là dịch vụ tương tự như GrabFood, Now...vì tận dụng được lượng tài
xế chạy Go-Bike sau đó kết nối các đối tác nhà hàng để hiển thị các
địa điểm quán ăn lên ứng dụng Go-Viet từ đó tăng thu nhập cho đối
tác của Go-Viet đồng thời giúp khách hàng tiếp cận với các dịch vụ ăn
uống một cách trực tuyến đem lại nguồn thu nhập cho các của hàng
bán đồ ăn, thức uống.Ưu điểm: Giúp cho học viên tại English Town
sau khi được học trên lớp thì về nhà có thể ôn luyện lại mọi lúc mọi

•

nơi nên đây là giải pháp hợp lý cho người đi làm.
Nhược điểm: cũng giống như GrabFood, do một người có thể đảm nhận nhiều

vai trò nên tính chuyên nghiệp không tốt.

3.2. Mô tả sơ lược ứng dụng Kin Food
Đề tài “KinFood: Hệ thống app dành cho khách hàng” là một ứng dụng chạy
được trên cả 2 hệ điều hành lớn nhất hiện nay là Android và IOS. Ứng dụng này được
phát triển trên nền Android Studio và Framework Flutter viết bằng ngôn ngữ Dart.
Ứng dụng Kin Food là một ứng dụng đặt món chỉ dành riêng cho sinh viên Kin.
•

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

Tại màn hình bắt
đầu, sinh viên
được phép lựa
chọn giữa đăng ký
mới hoặc đăng
nhập tài khoản sẵn
có.

24


BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH
•

GVHD:

Đăng ký: Sinh viên bắt buộc phải cung cấp đầy đủ
thông tin mà ứng dụng cần để tạo một tài khoản.
Sau đó sinh viên chỉ cần chọn “ĐĂNG KÝ” để

hoàn tất quá trình đăng ký.

•

•

ỨNG DỤNG DÀNH CHO KHÁCH HÀNG - FOOD

Màn hình sẽ xuất
hiện thông báo bạn
đăng ký tài khoản
thành công.
Sau đó chọn “TIẾP
TỤC” để chuyển
đến màn hình đăng
nhập.

25