Xây dựng ứng dụng tuyên truyền và theo dõi dịch bệnh covid19 (đồ án SE121 l21 PMCL)

ĐẠ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
-----☺☺☺-----

ĐỒ ÁN 1
ĐỀ TÀI: “Xây dựng ứng dụng tuyên truyền và theo dõi dịch
bệnh Covid19”
Giảng viên hướng dẫn: Thái Thụy Hàn Uyển
Sinh viên thực hiện:
1. Tạ Quang Tiến

17521129

2. Ngô Hà Thế Vĩ

17521255

1

Tp. Hồ Chí Minh, 23 tháng 06 năm 2021


LỜI CẢM ƠN
Nhóm 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ợ cho
nhóm trong q trình nghiên cứu để nhóm hồn thành đ ề tài này.
Vì kiên thức của chúng em vẫn cịn han 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 q 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.
Nhóm nghiên cứu

2


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

................................................................................................... ......................................................................
......................................................................................... ................................................................................
............................................................................... ..........................................................................................
..................................................................... ....................................................................................................
........................................................... ..............................................................................................................
................................................. ........................................................................................................................
....................................... ..................................................................................................................................
............................. ............................................................................................................................................
................... ......................................................................................................................................................
......... ...............................................................................................................................................................
............................................................................................................................................................... ..........
..................................................................................................................................................... ....................
........................................................................................................................................... ..............................
................................................................................................................................. ........................................
..........................................................................................................................................................................
....................................
3


MỤC LỤC

4


1. MỞ ĐẦU
1.1. Lí do chọn đề tài
Với tình hình dịch Covid đang nhiều biên động, trong hoàn c ảnh cả
nước đang cố gắng chung tay chống chọi với dịch bệnh thì đa phần chúng ta
vẫn chưa thực sự nắm rõ tình hình chung của dịch bệnh cũng nh ư cịn thi êu
hiểu biêt về virus Corona.

Sau thời gian tìm hiểu và cân nhắc, nhóm nhận th ấy đây là v ấn đ ề
mang tính thực tê, vơ cùng thiêt yêu nên nhóm đã quyêt định l ựa ch ọn đề tài
này để nghiên cứu và phát triển cho môn học.

1.2. Phương pháp nghiên cứu & phát triển
Nhóm chúng em sẽ thực hiện đề tài này b ằng ngôn ngữ Dart v ới cơng
nghệ ứng dụng là Flutter.
Trong q trình tìm hiểu nghiệp vụ, nhóm chúng em có tham kh ảo các
trang thơng tin về tình hình dịch bệnh trên mang xã hội. Cùng v ới đó là các
ứng dụng có sẵn và phát triển thành cơng trên ch ợ ứng dụng đ ể có cái nhìn
tổng qt về đề tài đã chọn.
• Nhóm phát triển tn theo quy chuẩn thiêt k ê ứng dụng hiện hành.
Nhóm đã thực hiện bài bản từng bước sau trong quá trình phát tri ển ứng
d
5 ụng:
Bước 1: Nhóm tiên hành thu thập thơng tin yêu cầu người dùng.


Bước 2: Nhóm tiên hành vẽ Usecase Diagram để mơ hình hố u cầu
của người dùng.
Bước 3: Nhóm tiên hành nghiên cứu các ứng dụng sẵn có (với ch ức
năng tương tự) trên thị trường để bắt kịp xu hướng.
Bước 4: Nhóm thực hiện chỉnh sửa lai mơ hình hố yêu cầu người
dùng theo những gì đã thu thập được.
Bước 5: Nhóm tiên hành nghiên cứu các cơng nghệ sẵn có để lựa chọn
một mơi trường phù hợp phát triển ứng dụng của mình. Nhóm đã ch ọn
Flutter
(Cross platform) để phát triển ứng dụng vì phát huy tối đa đ ược t ốc độ th ực
thi, đồng thời hỗ trợ các tính năng cấp phục vụ cho yêu cầu c ủa ng ười dùng
cũng như rút ngắn thời gian phát triển ứng dụng dựa trên tính cấp thiêt của

đề tài trong giai đoan hiện nay.
Bước 6: Nhóm tiên hành thiêt kê giao diện Prototype cho ứng dụng.
Bước 7: Nhóm tiên hành cơng đoan cài đặt cho ứng dụng.
Bước 8: Nhóm tiên hành cơng việc bảo trì (sửa chữa lỗi và phát tri ển
thêm những tính năng chưa được đề ra ban đầu).
Bước 9: Nhóm hồn thành đồ án.
• Mơ hình sử dụng để xây dựng đề tài: MVC

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

Ứng dụng hướng đên tất cả đối tượng người dùng sử dụng điện thoai thông
minh.


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
2.1.1. Ngơn ngữ lập trình Dart là gì?
- 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 (ECMA-408). Nó được sử dụng để xây
dựng các loai ứng dụng: web, server, di động (IOS và Android).
- Dart là ngơn ngữ lập trình hướng đối tượng, với cơ chê garbage
collector, cú pháp kiểu C. Nó hỗ tr ợ những khái niệm lập trình hiện đai nh ư
interface, mixin, abstract, generic, và type-safe. Đây là ngôn ng ữ lập trình mã
nguồn mở, được cơng bố trên Github.
7

2.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: Dart có cú pháp dễ hiểu, rõ ràng và súc tích. Type-safe giúp
lập trình viên có thể xác định sớm các lỗi. Bên canh đó Dart có h ệ sinh thái
rộng lớn lên đên hàng nghìn packages.
- Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời han để có
được dự đốn hiệu suất cao và khởi động nhanh trên các thiêt bị di đ ộng và
web.
- Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên rất dễ học. Nêu
ban đã biêt C ++, C # hoặc Java, ban 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 tai trong thời gian ngắn, chẳng h an nh ư các widget
UI, thông qua phân bổ đối tượng nhanh và garbage collector. 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.
Từ ngơn ngữ lập trình Dart, Google giới thiệu Framework Futter s ử
dụng ngôn ngữ Dart để phát triển ứng dụng di động chay đa nền tảng.

8


2.2. Giới thiệu về framework Flutter

Hình 1-2 Logo Flutter
2.2.1. Flutter là gì?
- Flutter được phát triển nhằm giải quyêt bài toán thường gặp trong
việc phát triển ứng dụng là Fast Development (phát triển ứng d ụng nhanh)
và Native Performance (hiệu suất tối ưu cho từng nền tảng). Nêu nh ư React

Native chỉ đảm bảo Fast Development còn Native language chỉ đ ảm bảo
Native Performance thì Flutter làm được cả 2 điều trên.
- Phiên bản đầu tiên của Flutter được gọi là "Sky" và chay trên hệ điều
hành Android. Nó được công bố tai hội nghị nhà phát triển Dart 2015, h ỗ tr ợ
các ứng dụng hoat động ở mức 120 khung hình trên giây.
- Trong bài phát biểu chính ở hội nghị Google Developer Days t ai
Thượng Hải, Google công bố phiên bản Flutter Release Preview 2, đây là
phiên bản lớn cuối cùng trước Flutter 1.0.
- Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã đ ược phát hành t ai s ự
kiện
9

Flutter Live, là phiên bản "ổn định" đầu tiên framework này.


2.2.2. 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 đoan mã xây d ựng
lên một ứng dụng Flutter. Các đoan 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 chay. Ở tầng này cịn có máy ảo Dart VM. Khái ni ệm máy ảo là khái ni ệm
v10ề một ứng dụng chay 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 đoan mã Dart theo phương thức JIT (Just in time) hoặc
AOT (Ahead of Time).
+ Thực thi các đoan 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.

2.2.3. Ư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.
- Hỗ trợ hot reload – các sửa đổi trong mã nguồn sẽ được cập nh ật tr ực
tiêp lên ứng dụng đang chay. Ngoài ra Flutter cịn bổ sung thêm tính năng
stateful hot reload - cập nhật ngay lập tức các thay đổi lên ứng dụng đang
chay mà không cần phải khởi động lai và giữ trang thái đang có. Tính năng
này đặc biệt hữu ích, giúp nhà phát triển ứng dụng tiêt kiệm r ất nhi ều th ời
gian.
- Ứng dụng được viêt bằng Flutter hỗ trợ hiển thị lên đên 60FPS (hoặc
120FPS
tuỳ thiêt bị). Cho hiệu ứng chuy ển cảnh m ượt mà, nâng cao tr ải
11
nghiệm người dùng.


- Một đối thủ khác của Flutter là React Native. Đây là framework đ ược
tao 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
Khả năng tái
sử dụng

Cấu trúc mã
nguồn

Cài đặt môi
trường phát
triển

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

Flutter
Flutter cho phép Overwriting
code. Hỗ trợ tốt cho việc tái
sử dụng về sau.

React Native
React Native cho phép ban
sử dụng lai code, nhưng
điều này lai bị giới han
trong một vài components
cơ bả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
lai,
vì vậy các trải nghiệm trên
Flutter khá tiêt kiệm thời
gian.
Việc cài đặt Flutter diễn ra
nhanh chóng, tiện lợi với sự
hỗ trợ của câu lệnh flutter
doctor -v giúp chẩn đốn lỗi
trong q trình cài đặt.

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

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

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.


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
khảo

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

đơn giản, dễ hiểu nên việc tài
liệu hóa cho Flutter cơ bản là
hiệu quả.

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
ngồi, u 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.

Bang 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. 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
13

- Công cụ: Visual Studio Code, Android Studio, IntelliJ,…


3.2. Hướng dẫn cài đặt Flutter
- Tải Flutter tai đườ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 ban nên 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, tai mục System Variables ban chọn
PATH và nhấn tiêp chọn Edit. Trong cửa sổ Edit System Variable ban ch ọn
14
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 ban tìm tập tin flutter_console.bat và
khởi chay 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

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

3.3.

- Mở Visual Studio Code.
- Nhấn tổ hợp phím Ctrl + Shift + P sau đó gõ “new project” và ấn Enter
để tao project mới.

Hình
2-4

15

project Flutter mới trong Visual Studio Code

Tạo


- Sau đó chọn thư mục đích nơi chứa project, và nh ập tên project nh ư
hình dưới.

Hình 2-5 Nhập tên project Flutter mới

- Sau khi hồn tất q trình tao project mới. Chúng ta sẽ th ấy Visual
Studio Code có giao diện tương như sau.
Hình 2-6 Giao
diện Visual
Studio Code
sau khi tạo
thành công
project
Flutter

16


4. PHÁT TRIỂN ỨNG DỤNG TUYÊN TRUYỀN VÀ THEO DÕI
DỊCH BỆNH COVID19

4.1. Đặt vấn đề
Với tình hình dịch Covid đang nhiều biên động, trong hoàn c ảnh cả
nước đang cố gắng chung tay chống chọi với dịch bệnh thì đa phần chúng ta
vẫn chưa thực sự nắm rõ tình hình chung của dịch bệnh cũng nh ư còn thi êu
hiểu biêt về virus Covid19.
Sau thời gian tìm hiểu và cân nhắc, nhóm nhận th ấy đây là v ấn đ ề
mang tính thực tê, vơ cùng thiêt u nên nhóm đã quyêt định l ựa ch ọn đề tài
này để nghiên cứu và phát triển cho môn học.

4.2. Phạm vi ứng dụng
Trước tình hình dịch bệnh cịn đang diễn biên phức tap thì m ọi người
đều cần phải nắm bắt thông tin kịp thời và hiểu biêt về dịch bệnh đ ể phòng
trách và cùng cả nước chung tay chống chọi với đai dịch

4.3. Mơ tả bài tốn
- u cầu chức năng: Phần mền hiển thị được thơng tin tình hình d ịch
bệnh covid19 và cập nhật liên tục , hiển thị các bài báo về tình hình d ịch
bệnh trong và ngồi nước , thơng tin về virus cũng như cách phòng d ịch
- Yêu cầu phi chức năng: Phần mềm đáp ứng được với kích cỡ màn hình
của các thiêt bị di động phổ biển, giao diện trực quan, sinh động, thao tác
đơn giản, tốc độ đáp ứng và phản hồi ở mức khá, tao cảm giác thân thiện cho
người sử dụng.
17

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


- Chức năng Thống kê tình hình dịch bệnh.
- Chức năng Xem triệu chứng.
- Chức năng Xem cách phòng tránh.

- Chức năng Xẹm cảnh báo dề dịch.
- Chức năng Thông tin về virus covid.
- Chức năng Tin tức về dịch bệnh.

4.5. Phân tích thiết kế
4.5.1. Lược đồ phân cấp chức năng

Hình 3-1 Lược đồ phân cấp chức năng

18


4.5.2. Sơ đồ use case và đặc ta use case

Hình 3-2 Use case tổng quát

19


Hình 3-3 Use case Thống kê tình hình dịch bệnh
Mô tả Usecase :
-

Usecase cho phép người dùng xem các thống kê về hình tình dịch

-

bệnh
Thống kê theo quốc gia có thơng tin về top 5 các nước có s ố ca m ắc

-

nhiều nhất
Thống kê theo quốc gia có thể xem thống kê của ngày hôm nay và

-

hôm qua
Bản đồ dịch bệnh cho phép xem vị trí bị bùng phát corona

Hình 3-4 Use case Thông tin triệu chứng
Mô tả Usecase :
-

20

Xem thơng tin về các triệu chứng có khả năng bị lây nhiễm corona


Hình 3-5 Use case Thơng tin cách phịng tránh
Mơ tả Usecase:
-

Xem thơng tin về các cách phịng tránh dịch bệnh

Hình 3-6 Use case Thông tin canh báo
Mô tả Usecase:
-

Xem thông tin đính chính về các thơng tin sai lệch

Hình 3-7 Use case Thông tin về virus corona
Mô tả Usecase
-

Xem thông tin giới thiệu về virus corona

Hình 3-8 Use case Tin tức về tình hình dịch bệnh
Mô tả Usecase:
-

Xem tin tức mới nhất về tình hình corora trên các trang báo

4.6. Giao diện ứng dụng
21

-

Màn hình Dashboard


-

Màn hình thống kê tình hình dịch bệnh trên thê giới

22


-

23

Màn hình

tìm kiêm quốc gia


-

24

Màn hình thống kê tình hình dịch bệnh quốc gia


25