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... NHẬN XÉT CỦA GIÁO VIÊN..... - Màn hình cách phòng tránh 28.

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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 quá trình nghiên c u đ nhóm hoàn thành đ tài này.ứ ể ề

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ê ứ ủ ẫ a ẹ ể ỏ

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.ả ơ

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 quá 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 m ng xã h i Cùng v i đó là cácề ị ệ a ộ ớ

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

B ướ c 2: Nhóm ti n hành vẽ Usecase Diagram đ mô hình hoá yê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 l i mô hình hoá yêu c u ngự ệ ỉ ử a ầ ườidù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ùngcũ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 đo n hi n nay ề a ệ

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 đo n cài đ t cho ng d ng ê a ặ ứ ụ

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 hoà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 ế

ng d ng h ng đ n t t c đ i t ng ng i dùng s d ng đi n tho i thông

minh

6

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 lo i ng d ng: web, server, di đ ng (IOS và Android) ự a ứ ụ ộ

- 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 đ i nhể ỗ ợ ữ ệ ậ ệ a ư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: ộ ủ ớ ữ ậ

l p trình viên có th xác đ nh s m các l i Bên c nh đó Dart có h sinh tháiậ ể ị ớ ỗ a ệ

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 h n đ cóờ a ể

đượ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

- D làm quen: ễ Do Dart có cú pháp ki u C/C++, nên r t d h c 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 saua ê ặ a ể ệ ệ ả ớ ỉ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ồ a ờ ắ ẳ a ư

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 ch y đa n n t ng ụ ữ ể ể ứ ụ ộ a ề ả

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à ch y trên h đi uọ a ệ ềhành Android Nó được công b t i h i ngh nhà phát tri n Dart 2015, h trố a ộ ị ể ỗ ợcác ng d ng ho t đ ng m c 120 khung hình trên giây ứ ụ a ộ ở ứ

- Trong bài phát bi u chính h i ngh Google Developer Days t iể ở ộ ị a

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 i sa ự

ki n ệ

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

9

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 đo n mã xây d ngầ ở ử ụ ữ ấ a ựlên m t ng d ng Flutter Các đo n mã này cung c p phộ ứ ụ a ấ ươ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 ma Ở ầ ả ệ ả ệ

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ề ộ ứ ụ a ớ ồ ư ộ ầ ủ ứ

d ng Máy o Dart VM có ba nhi m v chính bao g m: ụ ả ệ ụ ồ

10

+ Làm ng d ng trung gian gi a mã ngu n đứ ụ ữ ồ ược vi t b i Dart và thi tê ở ê

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 ch y Ngoài ra Flutter còn b sung thêm tính năngê ứ ụ a ổstateful hot reload - c p nh t ngay l p t c các thay đ i lên ng d ng đangậ ậ ậ ứ ổ ứ ụ

ch y mà không c n ph i kh i đ ng l i và gi tr ng thái đang có Tính nănga ầ ả ở ộ a ữ anà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ảnghi m ngệ ười dùng

11

- M t đ i th khác c a Flutter là React Native Đây là framework độ ố ủ ủ ược

t o b i Facebook Ta ở ươ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 b n.ơ ả

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

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ặ ể agiao di n hay các công cệ ụ

h tr c a câu l nh ỗ ợ ủ ệ flutter doctor -v giúp ch n đoán l i ẩ ỗtrong quá trình cài đ t.ặ

Cài đ t môi trặ ường pháttri n React Native trông kháể

và đang ngày càng được pháttri 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ụ ấ ề ứ

12

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ượngdeveloper s d ng đangử ụnhi u h n b i vì lề ơ ở ượngdeveloper sử d ngụJavaScript r t d dàng đ sấ ễ ể ử

d ng v i các th vi n c aụ ớ ư ệ ủReact

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

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

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

- T i Flutter t i đả a ườ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 b n nên thi t l p bi n môi trả a ê ậ ê ường, vào ControlPanel 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ọ a ụ a ọPATH và nh n ti p ch n Edit Trong c a s Edit System Variable b n ch nấ ê ọ ử ổ a ọ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àư ụ ừ ả a ậ

kh i ch y sau đó nh p l nh ở a ậ ệ flutter doctor -v

14

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

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ấ ổ ợ ấ

- 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 hoàn t t quá trình t o project m i Chúng ta sẽ th y Visualấ a ớ ấ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 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 ể ứ ể ọ

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 t p thì m i ngị ệ ễ ê ứ a ọ ườ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 đ i d chố ọ ớ a ị

4.3 Mô t bài toán ả

- Yê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à ngoà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á, t o c m giác thân thi n choơ ả ố ộ ứ ả ồ ở ứ a ả ệ

ngườ ử ụi s d ng

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

17

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 t use case ơ ồ ặ a

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 ố ị ệ

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

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

20

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 c nh báo a

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àn hình th ng kê tình hình d ch b nh trên th gi iố ị ệ ê ớ

22

- Màn hình tìm ki m qu c giaê ố

23

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

24

- Màn hình b n đ vùng d ch ả ồ ị

26

- Màn hình tri u ch ngệ ứ

27

- Màn hình cách phòng tránh

28

- Màn hình c nh báoả

29

- Màn hình Virus SARS CoV-2

30

- Màn hình tin t c d ch b nhứ ị ệ

31

5 K T LU N Ế Ậ

5.1 K t qu thu đ ế ả ượ c

- Căn b n v n d ng Dart và Flutter vào vi c phát tri n ng d ng diả ậ ụ ệ ể ứ ụ

đ ng ộ

- S d ng API đ l y d li u t ngu n thông tin ữ ụ ể ấ ữ ệ ừ ồ

- N m b t đắ ắ ược nhu c u c a ngầ ủ ười dùng trước tình hình d ch ph c t p.ị ứ a

- K t thúc môn h c, nhóm đã cùng tìm hi u và hoàn thành m t ngê ọ ể ộ ứ

d ng ụ

32

tương đ i hoàn ch nh V i s hố ỉ ớ ự ướng d n t cô, cùng ki n th c mà cô cungẫ ừ ê ứ

c p, chúng em đã áp d ng đấ ụ ược nh ng design pattern t t và nh ng quyữ ố ữchu n phát tri n ng d ng đ có đẩ ể ứ ụ ể ượ ức ng d ng t t nh t ụ ố ấ

Trong m t kho ng th i gian h n ch , nhóm đã phát tri n m t ph nộ ả ờ a ê ể ộ ầ

- Công ngh thệ ường xuyên c p nh t và thay đ i d n đ n vi c phát sinhậ ậ ổ ẫ ê ệ

l i trong quá trình thi t k thỗ ê ê ường xuyên

- Yêu c u máy tính có c u hình cao đ phát tri n ng d ng, chi mầ ấ ể ể ứ ụ ênhi u tài nguyên khi Debug ề

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

- Hoàn thi n h n v m t giao di n, c i thi n t c đ ph n h i, cung c pệ ơ ề ặ ệ ả ệ ố ộ ả ồ ấ