Khóa luận tốt nghiệp Hệ thống thông tin: Phát triển ứng dụng di động tích hợp lên hệ thống CRM cho trường mầm non, tiểu học

Vì vậy, phát triển và ứng dung công nghệ thông tin trong giáo dục là nhiệm vụ quan trọng của các cơ sở đào tạo, doanh nghiệp làm trong lĩnh vực này, Trong số các ứng dụng của công nghệ t

ĐẠI HỌC QUOC GIA TP HO CHÍ MINH

TRUONG DAI HQC CONG NGHE THONG TIN

KHOA HE THONG THONG TIN

TRAN HỮU PHAT - 17520126 MAI NHƯ NGỌC - 17520812

KHÓA LUẬN TÓT NGHIỆP

PHAT TRIEN UNG DUNG DI ĐỘNG TÍCH HỢP LÊN HỆ

THONG CRM CHO TRUONG MAM NON, TIỂU HỌC

DEVELOPING MOBILE APPLICATIONS INTEGRATED INTO

CRM SYSTEM FOR KINDERGARTENS AND PRIMARY

SCHOOLS

KY SƯ HE THONG THONG TIN

TP HO CHi MINH, 2021

ĐẠI HỌC QUOC GIA TP HO CHÍ MINH TRUONG DAI HQC CONG NGHE THONG TIN

KHOA HE THONG THONG TIN

TRAN HUU PHAT - 17520126

MAI NHU NGOC - 17520812

KHOA LUAN TOT NGHIEP

PHAT TRIEN UNG DUNG DI DONG TÍCH HỢP LEN HE

THONG CRM CHO TRUONG MAM NON, TIEU HOC

DEVELOPING MOBILE APPLICATIONS INTEGRATED INTO

CRM SYSTEM FOR KINDERGARTENS AND PRIMARY

SCHOOLS

KY SU HE THONG THONG TIN

GIANG VIEN HUONG DAN

THS HUYNH ĐỨC HUY

TP HO CHi MINH, 2021

DANH SÁCH HỘI ĐÒNG BẢO VỆ KHÓA LUẬN

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số

TBầy -cce+ của Hiệu trưởng Trường Đại học Công nghệ Thông tin.

1 Chủ tịch.

2.Thu ký.

3.Ủy viên.

4.Ủy viên.

LỜI CẢM ƠN

Lời đầu tiên, nhóm tác giả xin chân thành gửi lời cảm ơn đến quý thầy cô trường Đại học Công nghệ Thông tin — Dai học Quốc Gia thành phố Hồ Chi Minh Đặc biệt, nhóm tác giả xin gửi lời cảm ơn và bày tỏ lòng biết ơn sâu sắc đến ThS Huỳnh Đức Huy — người đã trực

tiếp hướng dẫn và cung cấp kiến thức để chúng em có được kết quả tốt nhất trong khoá luận

tốt nghiệp.

Nhóm tác giả cũng xin gửi lời cảm ơn đến gia đình đã động viên, cho những lời khuyên

bổ ích, khuyến khích tinh thần dé hoàn thành khoá luận Và xin gửi lời cảm ơn đến tập thé Công ty phần mềm DotB đã tạo điều kiện hỗ trợ nhóm trong thời gian qua.

Nhóm tác giả đã vận dụng những kiến thức nền tảng được tích lũy, phối hợp với việc

tự học hỏi và nghiên cứu những kiến thức mới, từ đó nhóm đã hoàn thành được đề tài Trong

quá trình thực hiện, kiến thức của các thành viên vẫn còn hạn chế nên không tránh khỏi những

thiếu sót Chính vì vậy, nhóm chúng em hy vọng nhận được những ý kiến đóng góp từ phía quý thầy cô nhằm cải thiện và nâng cao kỹ năng, qua đó hoàn thiện hành trang của mình trong

Đối tượng

PHAM VỈ o 5-5 <5 13 g0 0H 0000104 0 090000010404000080008000809Ø 5

Kết cấu khóa luận s-s s£2se©+e©++e©E+AEEYAsEEEAeEErkeeErkestErksetrksserksserrsee 5

CƠ SỞ LÝ THUYẾT - t ,2212142131112111 E1 rrrriiiiiiiiirie 6

Các nghiên cứu liên Quan 5 <5 5 2s£ S2 <SsEs£sES<EEsEsEsEEESEstsrketesersrsree 6

XÂY DỰNG UNG DUNG weccsssscssssssssccsssscccssssecsesssscessansccesssseccessnseccessneccesssseceessses 20

Khao sát một số ứng dụng liên quan cs°°+vv+xesssertrrrrrxxssee 20

Phân tích thiết kế -+++-e2eeceeerttti EEEEErrrHH 0 1 tre 21 Ứng dụng cho giáo Vụ scccsssssssssssssssssssssssssssssssnssssssssssssusssecsessssnussssesssssssssesssssssssseess 22

Ứng dụng cho phụ huynh ° +++++e©©©Evv+++eseettorrrkxseertstrrrrkssee 59 Phat triển ứng dụng sssssscssssscccssssscccssssscccssnscccssuseccessusccssssssceessnsccsssuseessessseesssees 78

ÁP Ga ng SMB, co l c in cnịngn100031001050010000000000000000nss0 79

Hệ thống backend ss -s«<©2se+VEV++eetEEY+xeeEvrvxseeervrxstttrrrssrtsrrsssrorrrsee 80

Triển khai -2222222111 T111 T111 T1 rmtrrrrrirree 81

Đăng tải ứng dung lên cửa hang ứng dụng của Android va iOS 82

Quy trình hoạt động trên ứng dụng . -s-<cscsesessesersessssessrssrs 85

KET LUAN VA HUONG PHAT TRIEN

¡O1 0a ốẽ.ẻ 96

Han chế

Hướng phát triỂn 2° ++esdSE©EEEEEL+.EEEEEEEEL.tetESYErvkkteertrtrrrkksree 97

PHỤ LỤC

Phụ lục A Công cu sử dụng Phụ lục B_ Hướng dẫn cài đặt Phụ lụcC_ Mô tả các API

DANH MỤC BẢNG

Bảng 3.1 Khảo sát một số ứng dụng liên quan :-222v++++22++z2tvvxvesrrsseee 20

Bang 3.2 Danh sách các usecase ứng dụng giáo VỤ - - ¿+22 ++srerkrksxsrerreree 2 Bang 3.3 Đặc tả usecase Đăng nhập - + + tt HH nghệ 25

Bảng 3.4 Đặc tả usecase Đăng Xuất 222222222222 212227111122271112271111.11111 Xe 27 Bang 3.5 Đặc tả usecase Xem thông tin cá nhân 2: 555525552++x+xsxcserxcxe 29

Bảng 3.6 Đặc tả usecase Xem phản hồi 2: 22222222E22+2tSEEEEEteEEEvrrrtrrrrrrrrrrrree 31

Bang 3.7 Đặc ta usecase Đăng tai album ảnh ccceesessessseseeeeeseseseeseneseseseeeeseseseeeeneseee 34 Bảng 3.8 Đặc ta usecase Cập nhật tin tức mới từ nhà trường -. -c5- +2 36

Bảng 3.9 Đặc tả usecase Điểm danh 52c 2222 222 2E22231222221112222112 2221122 39 Bảng 3.10 Đặc tả usecase Kiểm tra bài tẬp 2c:-222222c22 22 t2EEEErrrerrkrrrrrrrrrrrrrrrrree 4I

Bang 3.11 Đặc ta usecase Xem giáo ấ ¿c1 43 Bang 3.12 Đặc ta usecase Xem lịch giảng day 6-5 c5 k‡kekerrrrkerrkrrrrke 46 Bang 3.13 Đặc ta usecase Tương tác nhanh với học viÊn - - + +55 <+s++e£++xe 48 Bảng 3.14 Đặc tả usecase Checkin/Checkout học viên - 5 +555++c+s+<sc<>xz 53

Bang 3.15 Đặc tả usecase Cập nhật hành trình đưa đón bằng xe buýt - 56

Bang 3.16 Danh sách các usecase ứng dụng phụ huynh -¿- + ¿5< <+++x+c+£+xercxe 60 Bảng 3.17 Đặc tả usecase Xem album ảnh của lớp 62 Bảng 3.18 Đặc tả usecase Theo dõi thông tin học phí 63

Bảng 3.19 Đặc tả usecase Gửi yêu cau, phan hồi 65

Bang 3.20 Dac tả ussecase Xem tai liệu Ó08

Bảng 3.21 Đặc ta usecase Xem bảng điểm 2222222222+S22YEErtSEEEvrrrrrrrrrrrrrrrvee 72 Bảng 3.22 Đặc tả usecase Xem số liên LO 73

Bang 3.23 Đặc ta usecase Theo dõi hành trình xe buýt ¿-¿- - ¿5< <+++x+c+£++crccxe 76 Bảng 3.24 Danh sách API SchOOly - - - ¿552 + 2StSE2E2EEE#EEEEEEEEEEkrrrrkrkrkrrrrkrrrke 79 Bang 3.25 Danh sách API Schooly 'Teaclher- - + xxx #EEkEeEekekekrkrkrkrkrkreee 80

DANH MỤC SƠ ĐÒ

Sơ đồ 3.1 Usecase ứng dụng cho giáO VỤ - + 2+ + ©E2+EE+EE£EEEEEEEEE2EEE21E71211211 211 EErxe 22

Sơ đồ 3.2 Usecase quản lý tài khoản cá nhân -2- 2 2 2 +E£EE+EE£EE2EE£EzEerxerkrrerree 24

Sơ đồ 3.3 Sơ đồ hoạt động Đăng nhập - 2: 2 2222E+2E£EE2EEE2EE2212221 21127121121 crk 26

Sơ đồ 3.4 Sơ đồ hoạt động Đăng xuẤt 2-52 St SE SE E12E1571711211211711 111112111111 xe 28

Sơ đồ 3.5 Sơ đồ hoạt động Xem thông tin cá nhân -2- 2 ¿+ 2£ +2 E£+E££Eerxzrxzrszsez 30

Sơ đồ 3.6 Sơ đồ hoạt động xem phản hỒi - ¿- ¿2° 2 E+SE2E££E£EE£EEEEEEEEEEEEEEEEEEEerkrrkrree 32

Sơ đồ 3.7 Usecase Quản lý album ảnh của lỚp .: 2: 2 5¿22+£2++£x2E++EE+zrxezrxerxesree 33

Sơ đồ 3.8 Sơ đồ hoạt động Đăng tải album ảnh 2-2 2 5SSE£2E22EE+EE£EEEEEZEEzEerxersee 35

Sơ đồ 3.9 Sơ đồ hoạt động Cập nhật tin tức mới từ nhà trường .: -: 5: 38

Sơ d6 3.10 Sơ đồ hoạt động Điểm danh - 2-2: 2© £+SE+EE+EE£EEEEE2EEEEEEEEEEEEEEEkrrkerree 40

Sơ đồ 3.11 Sơ đồ hoạt động Kiểm tra bài tập -¿-¿ :- 2-52 2+EEESEEEEEEEE2EEEEEEEEEkerkrrkrree 42

Sơ đồ 3.12 Sơ đồ hoạt động Xem GIAO áT - + k2 E931 11121119119 HH ng nệt 44

Sơ đồ 3.13 Usecase Xem lịch giảng day c scccscsssesssesssssessessssssesasecsscssecssscscssecsuecseeasecsseens 45

Sơ đồ 3.14 Sơ đồ hoạt động Xem lịch giảng đạy -2- 2-52 ©5£+E22EE+EEeEE£EezEzExrrxerxee 47

Sơ đồ 3.15 Usecase Tương tác nhanh với học viÊn 2-2 ¿+ 2£ +2 £££E££E+£EeEszrszse2 48

Sơ đồ 3.17 Sơ đồ hoạt động Tự động đếm giờ - 2-22 S¿+2E2EE+EE2EEtEEEEEErerxrrresree 50

Sơ d6 3.18 Sơ đồ hoạt động Tạo nhóm - 2-2 +2 £+EE+EE£EE£EEEEEE2EEEEEEEEEEEEEEEEExrrkerkee 51

Sơ đồ 3.19 Sơ đồ hoạt Ong 1001100117777 7 52

Sơ đồ 3.20 Sơ đồ hoạt động Checkin/Checkout học viên 2 ¿ + + sz+z++zx+zzx2 55

Sơ đồ 3.21 Sơ đồ hoạt động Cập nhật hành trình đưa đón bằng xe buýt «- 58

Sơ đồ 3.22 Usecase tổng quan ứng dung cho phụ huynh 2-2 2 s2+s£+£z+£e+zxersez 60

Sơ đồ 3.23 Sơ đồ hoạt động Xem album ảnh của lớp + 2 22 + £+£+s++£++£++zxzsez 63

Sơ đồ 3.24 Sơ đồ hoạt động Theo dõi thông tin học phí 2-2 s2 s2+s£+z++zz+zxezsez 64

Sơ đồ 3.25 Sơ đồ hoạt động Gửi yêu cầu, phản hồi 2 ¿2 2 £+S£E£Ee£Eerxerxrrssree G7

Sơ đồ 3.26 Usecase Theo dõi quá trình học ¿+ +¿©+++++++£E++EE+2ExvExterxrzrxerresree 68

Sơ đồ 3.27 Sơ đồ hoạt động Xem tài liệu -2- 2-52 E+EE#EEEEEEEEE2EEEE1E71E21E211 211 EErxe 70

Sơ d6 3.28 Sơ đồ hoạt động Xem bảng điỀm - 2 2 SE+SESE2E22EEEEEEEEEEEEEEEEErrkerkee 73

Sơ đồ 3.29 Sơ đồ hoạt động Xem số liên lạc - 2-2 2 2 +E£EE£EE£EE+EEZEeEEerkerxrrkrree 75

Sơ đồ 3.30 Sơ đồ hoạt động Theo dõi hành trình xe buýt - 2-5 5¿+s2+sz+£z+zxecsez 71

DANH MỤC HÌNH ANH

Hình 2.1 Kiến trúc nền tang Flutter (Nguồn: flutter.đev) -¿ ¿©2+z©s+2zxzzxecsxee: 9Hình 2.2 So sánh kiến trúc nền tảng (Nguồn: flutter.dev), 2-55 s252+sz+£zrxerxees 12Hình 2.3 Minh họa đồng bộ hóa dữ liệu (Nguồn: firebase.google.com) . - 15Hình 2.4 Luông hoạt động của FCM (Nguồn: firebase.google.com) -5- 5+: 16Hình 2.5 Quy trình trải nghiệm người dùng (Nguồn UX Mastery) .: -:-2-5¿ 19

Hình 3.1 Mockup giao diện Trang Chủ - 5 1 1393113911 311 9111 911g ng ng 24

Hình 3.2 Mockup giao diện Đăng nhập - - 5c 3213323133211 1 9 111811 8111 111 gv rry 27

Hình 3.3 Mockup giao diện Phản hỒi - 2: 2-22 S22E+EE££EE2EEEEEESEEEEEEEEEEEErrrkerkrsree 33

Hình 3.4 Mockup giao diện Thư viện anh 5 3 2132111311811 8111 8111 8111 gxv rrn 36

Hình 3.5 Mockup giao diện Xem Gid0 ấn - 5 1 1119119 1 HH ng ng 45

Hình 3.6 Mockup giao diện Checkin/Checkout học Vien - 25+ ++<<+++skessesees 56

Hình 3.7 Mockup giao diện Cập nhật hành trình đưa đón bằng xe buýt -. - 59

Hình 3.8 Mockup giao diện Trang Chủ - - - c1 332111393113 11 11 8111 11 1x ng ng 61 Hình 3.9 Mockup giao diện Theo dõi thông tin học phí - 5 + + sx£+s£es+sesserse 65

Hình 3.10 Mockup giao diện Xem tài LU 5 2 3211333118911 811 81118111 ren 71

Hình 3.11 Mockup giao diện Theo dõi hành trình xe buýt - - - 5 ++5<++<++xx+sexsess 78

Hình 3.12 Kiến trúc RESTful API (Nguồn: https://restfulapi.net/) -. -:5z 5+: 79Hình 3.13 Ứng dụng giáo vụ được đăng tải trên CH Play ¿+©5+2cs++z++zx+zr+z 82

Hình 3.14 Ứng dụng giáo vụ được đăng tải trên ¡OS -2 2 52 EsEeEEeEErErrxerkerkeee 83Hình 3.15 Ứng dụng cho phụ huynh được tăng tải trên CH Play - 2-2-2 s55: 84

Hình 3.16 Ung dụng cho phụ huynh được tăng tải trên iOS -¿ 5¿©5s+cs+cc+2 85

Hình 3.17 Quy trình chung trên ứng dụng gláO ViEN 0 ee eee eeteeeseceeneeeenecesneeeeeceaeeeeseeees 86

Hình 3.18 Quy trình điểm damhin cccccccccccscsssesssesssesssessecssscsseesscssecsssesscssecssseseeasecssesseeasecsseens 87

Hình 3.19 Quy trình xem lịch day eee es escseesecseceseeseeseesecsessessecseessessessessessesseseaeeaeeaees 87

Hình 3.20 Quy trình checkin/checkout << 1133111311831 9111 119911 ng ren 88

Hình 3.21 Quy trình cập nhật hành trình đưa đón 5 5c 22c *+*+EEssxeesseersssresss 88

Hình 3.22 Quy trình tương tác nhanh với học viÊn eee «+ + kg ng ng re 89

Hình 3.23 Quy trình chung trên ứng dụng phụ huynh - 55c s + ssvseseeeserere 90

Hình 3.24 Quy trình xem lịch HỌC - <6 2< 1131131133193 919 11911 9v TH nghệ 91

Hình 3.25 Quy trình xem thông tin hoc phí - - 5 + + 6+1 13118 E911 E1 EEExkrxkkervkeere 91

Hình 3.26 Quy trình xem thư viện anh eee cccccscessecesecseeesceeseeesecseeeseesseeesecsseeseeeseesseeegs 92

Hình 3.27 Quy trình gửi phản hồii - 2: 2£ 522SS2EE2EE+2EE2EEEEEESEEEEEEEEEESEkrrrrerkrsrke 92

Hình 3.28 Quy trình truy cập tài LGU Q G1 SH SH HH Hư, 93

Hình 3.29 Quy trình xem kết quả học tập ¿2+2 +£+Ex++EE+EEE+EE2EEtEEEerxrzrrerkesree 93Hình 3.30 Quy trình xem SỐ liên lạC tt 3S v21 1E SEE1EE1 1151111151111 115111111112 94

Hình 3.31 Quy trình theo dõi hành trình xe ĐuỨ( - 5 S3 ng ngư 95

DANH MỤC TỪ VIET TAT

Từ viết tắt Tên đầy đủ

AI Artificial Intelligence

API Application Programming Interface

CRM Customer Relationship Management (Quan tri méi quan hé khach hang)

FCM Firebase Cloud Messaging

GPS Global Positioning System (Hé théng dinh vi toan cau)

MỞ DAUHiện nay, số lượng các tai nạn ngoài ý muốn liên quan đến trẻ em ngày càng gia

tăng Một số van dé có thé gặp phải như trẻ bị bỏ quên trong xe đưa đón của nhà trường,

xuống nhầm trạm khi di chuyền đến trường băng xe buýt, bị bắt cóc, Do đó, sự antoàn của trẻ nhỏ là mối quan tâm hàng đầu đối với phụ huynh và nhà trường Sự an toànphải được đảm bảo ngay từ thời điểm rời khỏi nhà cho đến suốt thời gian học tập tạitrường và quay trở về nhà Ngoài ra, việc hỗ trợ phụ huynh giám sát, tham gia vào quá

trình học, theo dõi các hoạt động thường nhật của trẻ cũng là van dé được nhiều phụ

huynh quan tâm Trong bối cảnh đó, nhà trường và giáo viên đóng vai trò vô cùng quan

trọng.

Dựa trên thực trạng đó, nhóm tác giả tiến hành thực hiện đề tài phát triển ứng dụng

di động tích hợp lên hệ thống CRM cho trường mam non, tiểu học Cung cấp giải pháp

hỗ trợ giám sát hành trình di chuyên của phương tiện đưa/đón đựa trên GPS (Global

Positioning System); nhận diện/định danh học viên và phụ huynh dựa trên QR (Quick

Response); hỗ trợ giao tiếp, kết nối giữa các bên và hỗ trợ giảng viên trong công tác

giảng dạy.

Tiếp đó, dit liệu từ ứng dụng di động được tích hợp quản lý trên hệ thống CRM

(Customer Relationship Management) phục vu trong việc lưu trữ, quản ly va phân tích

nhăm nâng cao chất lượng phục vụ và cải thiện mối quan hệ lâu dài, vững chắc với

khách hàng Cụ thé hơn, ứng dụng sẽ hỗ trợ:

+ Về phía phụ huynh, theo dõi tình hình của trẻ nhỏ trên hành trình từ nhà đếntrường: liên lạc, phản hồi với nhà trường trực tiếp, nhanh chóng thông qua ứng dung; số

liên lạc điện tử; Giúp phụ huynh an tâm hơn và cập nhật tình hình trẻ nhỏ mọi thời

điểm trong ngày

+ Về phía nhà trường, hỗ trợ ghi nhận lưu trữ hoạt động nhận/trả trẻ; hỗ trợ nhân

vién/giang viên nhà trường trong công tác giảng day Từ đó, nâng cao hiệu qua quản lý,

đào tạo.

Chuong 1 TONG QUAN ĐÈ TÀI

Chương | mô ta tổng quan về nhu cầu của một số doanh nghiệp trong mang dao tạo,

giáo duc đặc biệt là ở cấp độ mầm non - tiêu học, trình bày một số hiện trạng gặp phải trongcông tác quản lý Qua đó, đặt ra vấn đề cần giải quyết; mục tiêu và hướng giải quyết; đối

tượng, phạm vi của đề tài

1.1 Mô tả bài toán

Công nghệ thông tin đã và dang là yếu tố được đây mạnh dé cải thiện sự phát triển của

giáo dục, tạo sự liên kết chặt chẽ giữa nhà trường, học viên, giáo viên và phụ huynh Một sốchuyên đề ứng dụng nôi bật có thê kế đến như soạn thảo giáo án, hỗ trợ giảng dạy, tra cứu dữliệu, cải thiện cách học của học viên Từ đó, nhà trường có thể thay đôi được chat lượng dạy

học, tạo dựng niềm tin với học viên cũng như phụ huynh Có thể nói, công nghệ thông tin làmột công cụ đắc lực, hỗ trợ đổi mới phương pháp giảng dạy, học tập góp phan nâng cao hiệu

quả, chat lượng dao tạo Vì vậy, phát triển và ứng dung công nghệ thông tin trong giáo dục là

nhiệm vụ quan trọng của các cơ sở đào tạo, doanh nghiệp làm trong lĩnh vực này,

Trong số các ứng dụng của công nghệ thông tin vào môi trường giáo dục, nổi bật có thé

nói đến các doanh nghiệp, tổ chức làm trong lĩnh vực này có xu hướng xem giáo dục là mộtngành dịch vụ, trong đó việc ứng dụng CRM vào môi trường giáo dục để nâng cao lợi thế

cạnh tranh Xem học viên là khách hàng mang lại lợi thế cạnh tranh, nâng cao khả năng thu

hút, giữ chân và phục vụ học viên của nhà trường [1] Các ứng dụng CRM chuyên sâu cho

giáo dục ngày nay đã không đơn thuần là một phần mềm quản lý ở giai đoạn tư van, bán hàng

mà còn mở rộng vao nghiệp vụ quản lý các giai đoạn sau đó như theo đõi hành trình học tập,

bảng điểm, tài liệu học tập, giải đáp & phản hồi [1] Việc triển khai CRM tại các doanh

nghiệp, trung tâm đảo tạo có thé được coi như một tiêu chuẩn dé cải thiện dich vụ cho khách

hang [2].

Trên thực tế, việc hỗ trợ phụ huynh giám sát, tham gia vào quá trình học, theo dõi cáchoạt động thường nhật của trẻ là mục tiêu của nhiều cơ sở giáo dục [3] Cùng với sự phô biếncủa thiết bị di động và tính thiết yếu của nó, việc triển khai ứng dụng di động cùng với hệthống CRM được coi là một phương pháp mới đem lại hiệu quả trong quan lý [4] Đã và đang

có rất nhiều những ứng dụng giáo dục hỗ trợ cho sự tương tác này, ví dụ như: Seasaw Class!,

! https://web.seesaw.me/

Klassly?, ClassDojo3, Remind#, và được nhiều doanh nghiệp, cá nhân tin tưởng sử dụng.Bên cạnh đó, cũng có những nghiên cứu về triển khai ứng dung di động trong môi trường

giáo dục khác Trong số đó, có thể kê đến nghiên cứu trình bày mô hình UML ứng dung di

động cho phụ huynh — học viên (2017) của A Setiawan and R Widaryanto [5] hay nghiên cứu

đến từ nhóm tác giả Ahmed và Ghareb thiết kế framework cho ứng dụng di động hỗ trợ họctập (2017) [6] Ngoài ra, nghiên cứu về khó khăn và thách thức trong quá trình xây dựng,triển khai ứng dụng cũng là vấn đề đáng cân nhắc [7]

Các ứng dụng, nghiên cứu kể trên chủ yếu phục vụ cho quá trình tương tác, kết nỗi trongthời gian học tập tại trường của trẻ và chưa có sự kết nối với CRM Bên cạnh việc tương tácvẫn còn nhiều khía cạnh khác chưa được giải quyết như những sự cố xảy ra trong quá trìnhtrẻ di chuyển đến trường bằng xe đưa/đón của nhà trường, những tai nạn liên quan đến sự antoàn của trẻ do sự bat cân trong công tác giao/nhận trẻ, bị bỏ quên trong thời gian dai trên xehay lên nhằm xe, xuống nhằm trạm, người lái xe không xác định được tông số học viên cầnđưa/ đón, Một số doanh nghiệp cũng đã phát triển các ứng dụng về theo dõi thời gian thực(realtime) vị trí xe đưa đón Nhưng các ứng dụng này thường bị tách rời với hệ thống quản lý

CRM của nhà trường Điều này gây khó khăn, mat nhiều thời gian trong công tác quan lý và

chưa mang lại sự tối ưu

Vậy bài toán đặt ra cho các ứng dụng áp dụng tại các trung tâm, doanh nghiệp đảo tạo là

làm thé nào dé giảm thiểu tôi đa khả năng xảy ra các sự cô không mong muốn? Tạo cho phụhuynh môi trường để tham gia vào quá trình học tập, giám sát con cái? Đảm bảo thông tinliên lạc, tương tác, nhận thông báo về mọi hoạt động thường nhật của trẻ? Tất cả điều này cầnđược lưu trữ, quan lý và tích hợp chung trên một hệ thống CRM dé dé dàng theo dõi, đem lạitrải nghiệm tốt hơn cho người dùng

Dé giải quyết bài toán trên, nhóm tác giả xây dựng ứng dung cho phép theo dõi hành

trình đưa/đón học viên từ nhà đến trường thông qua GPS của điện thoại người dùng (bảo mẫu,tài xế, ) kết hợp với Google Maps Platform5, hỗ trợ nhận diện/định danh học viên và phụ

huynh thông qua mã QR Ngoài ra, ứng dụng được xây dựng bao gồm các tính năng như một

số liên lạc điện tử, giúp phụ huynh theo dõi hành trình học tập của con em, liên hệ với nhà

? https://klass.ly/

3 https://www.classdojo.com/

* https://www.remind.com/

> https://developers.google.com/maps/documentation

trường, giáo viên nhanh chóng Tắt cả dữ liệu liên quan được lưu trữ trong cơ sở dữ liệumySQL’ và tích hợp lên hệ thống CRM của nhà trường nhằm tối ưu hóa công tác quản lý.

1.2 Mục tiêu đề tài

Trong nghiên cứu này, nhóm tác giả phát triển hai ứng dụng di động dành cho phụ huynh

và bộ phận giáo vụ của nhà trường Các dữ liệu liên quan được lưu trữ lên cùng một hệ thốngCRM để đảm bảo sự đồng nhất thông tin và mang lại hiệu quả trong quản lý

Ở góc độ phụ huynh:

- Theo dõi kết quả và hoạt động học tập của trẻ

- _ Kênh liên lạc nhanh chóng với nhà trường thông qua ứng dung.

- Cap nhật tin tức mới từ nhà trường.

- Có thé giám sát (khi sử dung phương tiện của nhà trường) theo thời gian thực về

vị trí, tuyến đường, tốc độ, danh sách hành khach, nhận thông báo về các hoạt

động lên/xuống xe

- _ Được thông báo khi trẻ đến/rời khỏi trường

Ở góc độ nhà trường:

- _ Hỗ trợ cập nhật các yêu cầu, phản hồi của phụ huynh nhanh chóng

- _ Lưu trữ, cập nhật moi hoạt động diễn ra xung quanh học viên.

- _ Tối ưu công việc giảng dạy, quản lý cho bộ phận giáo vu

- Cai thiện chất lượng dao tạo, giảng dạy

Ứng dụng được phát triển dựa trên việc nghiên cứu các công trình liên quan, khảo sát từ

những yêu cầu thiết thực ở các cơ sở giáo dục ở các cấp độ mầm non - tiểu học, đào tạo ngoại

ngữ Tích hợp với các công nghệ đã có nhăm tiết kiệm thời gian và chỉ phí thực hiện

1.3 Đối tượng và phạm vi

5 https://www.mysql.com/

- Phu huynh/người giám hộ của học viên.

- Bộ phận giáo vụ (người chịu trách nhiệm quan sát, quan lý trẻ nhỏ ở trường học —

giáo viên/bảo mẫu/trợ giảng)

1.3.2 Phạm vi

Các chức năng, thiết kế được xây dựng và phát triển phù hợp với nhu cầu của các bậc phụhuynh, nhà trường ở phạm vi Việt Nam — môi trường mà phụ huynh đặc biệt quan tâm đến

sự an toàn và mong muốn theo dõi, tham gia vào quá trình học tập của con cái

1.4 Kết cấu khóa luận

Bài nghiên cứu được chia thành 4 chương như sau:

Chương 1 Tổng quan: Trong chương đầu tiên, trình bày sơ lược về thực trạng, yêu cầuđặt ra Từ đó đặt ra mục tiêu và hướng giải quyết cho vấn đề, cũng như xác định đối tượng và

phạm vi thực hiện.

Chương 2 Cơ sở lý thuyết: Trình bày các cơ sở lý thuyết được ứng dụng trong quá trìnhthực hiện đề tài, cũng như các công nghệ được sử dụng

Chương 3 Xây dựng ứng dụng: Trình bày toàn bộ quá trình thực hiện ứng dụng từ những

giai đoạn đầu tiên đến khi ứng dụng được hoàn thiện và triển khai đến người dùng

Chương 4: Kết luận và hướng phát triển: Trình bày kết quả đạt được, những hạn chếcòn tồn đọng trong quá trình thực hiện dé tài và nêu ra hướng phát triển trong tương lai

Chương2 CƠ SỞ LÝ THUYET

Ở chương này, nhóm tác giả trình bày một số nghiên cứu liên quan, các cơ sở lý thuyếtđược áp dụng trong quá trình thực hiện, cũng như các công nghệ được ứng dụng trong đề tài

2.1 Cac nghiên cứu liên quan

2.1.1 Smart Kindergartens Giáo viên và phụ huynh ngày càng hứng thú với các ứng dụng giáo duc có trên internet

hiện nay Cùng với đó, họ mong đợi về việc cải thiện chất lượng quản lý nhà trẻ và sự hợptác, kết nối giữa phụ huynh và nhà trường [8] Vì vậy, việc ứng dụng và triển khai Smart

Kindergartens (Mẫu giáo thông minh) đã và đang trở thành xu hướng của thời đại [9] Dựa

trên kết luận đó, nhóm tác giả Jingrong Liu và Miao Liu đã nghiên cứu thiết kế và phát triểnmột hệ thống các ứng dụng thông minh dành cho trường mẫu giáo mà ở đó mỗi ứng dụngđược kết nối và có thể tương tác với nhau Dựa vào các lĩnh vực khác nhau, các ứng dụngdành cho mầm non được phân thành bốn nhóm chính: giảng dạy, quản lý nội bộ, tương tácgiữa phụ huynh với nhà trường và mạng xã hội [9] Trong nghiên cứu này, nhóm tác giả triểnkhai ứng dụng theo dõi quá trình phát triển, học tập của trẻ tại trường; ứng dụng quản lý nội

bộ của nhà trường (quản lý lớp học, lịch biểu, điểm danh ); hệ thống checkin — checkout

thông qua mã vạch hoặc nhận diện khuôn mặt; công thông tin điện tử cho nhà trường (nhậnđơn đăng ký học, khảo sát, tuyên dụng ); lưu trữ, đồng bộ hóa và sao lưu, khôi phục dữ liệu

khi gặp rủi ro.

2.1.2 Điểm danh bằng QR Code

Hệ thống điểm danh cũng là một phần quan trọng là trở thành một đề tài nghiên cứu rộngrãi Có rất nhiều ứng dung di động giúp các giáo viên có thé sử dụng dé điểm danh học viên

của mình, trong đó phải kế đến QR Code Theo Jeson Jacinto Galgo, mã QR rất hiệu quả cho

cả giáo viên và học viên trong công việc bởi việc xử lý nhanh chóng, chỉ cần một lần quét và

hệ thống sẽ ghi nhận lại ngay lập tức [10] Trong nghiên cứu này, mã QR được nhúng vào thẻ

ID của học viên, dựa vào việc quét mã mỗi lần ra/vào trường, hệ thống lưu trữ lại các lần quét

này và cho ra các báo cáo phục vụ cho giáo viên Ngoài ra, ứng dụng còn hỗ trợ gửi tin nhắn

SMS đề họ nhận được thông báo từ nhà trường

2.1.3 Bus Tracking

Ngoài các ứng dụng phục vụ cho công tác dạy và học tại trường học, các ứng dụng hỗ

trợ cho việc đảm bảo an toàn cho học viên trên đường đến trường như bus tracking, children

6

tracking, bus monitor, cũng đã và đang được phát triển Một nghiên cứu đến từ An Độ củanhóm tác giả Judy Thyparampil Raj và Jairam Sankar nghiên cứu, phát triển ứng dụng giám

sát xe buýt trường học và hệ thống thông báo Theo họ, điều quan trọng là các trường học

phải có dịch vụ đưa đón an toan và đáng tin cậy đề đảm bảo an toàn cho học viên [11] Nghiêncứu dé xuất thiết bi theo dõi xe buýt với chi phí thấp giúp theo dõi real-time vị trí, tốc độ xe,lịch trình tuyến đường và một sỐ thông tin khác liên quan đến xe đưa đón học viên Sau đó,

gửi thông báo về ứng dụng di động cho phụ huynh

Có thé thấy, các ứng dụng ké trên đều hỗ trợ được nhu cầu quan lý cơ bản của một trườngmẫu giáo — tiêu học và đáp ứng được sự kỳ vọng của phụ huynh với nhà trường Tuy nhiên,các ứng dụng trên còn rời rạc và chưa có sự kết nối với nhau Một trường học đã có cho mình

hệ thống quản lý nội bộ trong nhà trường, tuy nhiên phải sử dụng hệ thống của bên thứ bakhác cho việc theo dõi xe đưa đón Điều này khá bat tiện trong việc quản lý của nhà trường

và thiếu sự kết nối giữa phụ huynh và nhà trường Hoặc phụ huynh phải cài nhiều ứng dụng

cùng một lúc trên điện thoại của mình Vì vậy, việc xây dựng môi trường “Smart

Kindergartens” không đơn thuần là việc sử dụng nhiều ứng dụng khác khau mà các ứng dụng

phải có sự kết nối và tương tác với nhau [8]

2.2 Ứng dụng di động

Là sự giao tiếp, một chiều hoặc 2 chiều, liên quan đến hoạt động bán hàng, tiếp thị và

chăm sóc khách hàng được thực hiện thông qua các phương tiện di động cho mục đích xây

dựng và duy trì mối quan hệ giữa một doanh nghiệp và các khách hàng của doanh nghiệp đó

Dựa trên những tài liệu đã có về ứng dụng di động, nhóm tác giả làm rõ các khái nệmliên quan cũng như phân tích phân tích những đặc điểm nỗi bật khi triển khai ứng dụng diđộng vào môi trường giáo dục, đặc biệt là ở cấp độ mầm non — tiểu học tại thi trường ViệtNam, cụ thê:

* Đặc điểm nổi bật đầu tiên liên quan đến cá nhân hóa Không giống như các phương

tiện truyền thông khác, điện thoại di động thường thuộc về chỉ một cá nhân và thường đượcmang theo bên người Theo đó, thông tin được gửi qua phương tiện di động sẽ đến với người

dùng hầu như mọi lúc và có thê đạt được hiệu quả cao Vì rõ ràng khi gửi thông tin liên quanđến đúng khách hàng sẽ luôn mang lại hiệu quả cao hơn so với gửi thông thiệp chung đến

một số lượng khách hàng lớn [12]

» Thi hai là sự linh hoạt trong giao tiếp được cung cấp bởi công nghệ điện thoại di động

7

[13] Vì người dùng điện thoại di động luôn mang theo thiết bị của mình Cùng với mạngkhông dây, phương tiện di động có thể truy cập vào hệ thống hầu vào bat kỳ lúc nào và ở bat

cứ đâu Trong khi tất cả các kênh khá đều bị hạn chế về mặt này Vậy nên, phương tiện di

động cung cấp quyền truy cập vượt trội cho người dùng so với các kênh thông tin khác

ứng dụng trên iOS!°, Android!!, Fuchsia!2 và trang web Riêng với ứng dụng web, Dart biên

t!3, Mục đích của Dart không phải dé thay thé Javascript

dịch ban thân thành code Javascrip

như là ngôn ngữ chính trong trình duyệt web, mà là cung cấp một sự lựa chọn hiện đại hơn

[20].

Dart phù hợp cho cả thiết bi di động và web, giúp tao ra những trải nghiệm đẹp, chat

lượng cao với:

- Ngôn ngữ tối ưu hóa cho may khách (client)

thành các đoạn mã được tôi ưu và chạy trên những môi trường trung gian

Cấu trúc Flutter Framework Model được 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ụngFlutter Các đoạn mã này cung cấp phương tiện dé có thé thay đổi và chỉnh sửa chúng Từ đó

7 https://dart.dev/

8 https://about.google/

? http://gotocon.com/aarhus-201 1/

10 Hệ điều hành thiết bị di động của tập đoàn công nghệ đa quốc gia Apple

!! Hệ điều hành thiết bị di động của Google

!2 Hệ điều hành thời gian thực được phát triển bởi Google

13 https://www.javascript.com/

! flutter.dev

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 Applicationnà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 nam ở sâu bên dưới và được viết bằng C++ Tang Shell này

chứa các công tụ trợ giúp ứng dung Flutter trong quá trình chạy Nồi bật cần lưu ý ở tang này

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

o Lam ứng dụng trung gian giữa mã nguồn được viết bởi Dart và thiết bị phần cứng

o Thông dich các đoạn mã Dart theo phương thức JIT! hoặc AOT'®.

o 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, một vài các thư viện cân có của ngôn ngữ.

(Dart) ent erng

C++

là,

Hình 2.1 Kiến trúc nền tảng Flutter (Nguồn: flutter.dev)

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.3.1.3 So sánh với các Cross-platform Framework khác

Một ứng dụng dé chạy được trên các thiết bị thông thường sẽ tạm quan tâm tới hai thành

5 Just in time - mã nguồn chỉ được thông địch khi được gọi đến.

'6 Ahead of Time

9

phan Thành phan gần với lập trình viên hơn là lớp Ứng dụng (Application) Lớp Applicationchứa các đoạn mã được viết bởi lập trình viên và các công cụ giúp ứng dụng hoạt động vàquản lý hoạt động của ứng dụng Thành phần được quan tâm thứ hai là lớp Nền tảng

(Platform) ở đây dùng dé chỉ các hệ điều hành hoặc các ứng dụng trung gian giữa ứng dụngcủa lập trình viên và thiết bị Trong phạm vi lập trình ứng dụng di động, lớp Platform đượcchia làm ba thành phần bao gồm

¢ Services: Bao gom các ứng dung được viết và cài đặt mặc định trong thiết bị có

trách nhiệm quản lý giao tiếp giữa các ứng dụng trong thiết bị với nhau, cungcấp thông tin của thiết bị cho các ứng dụng hoặc thực thi các yêu cầu của ứngdụng dé điều khiến thiết bị (Location, Camera, Sensors )

* Canvas/Events: Là các ứng dụng giúp hiển thị giao diện lên màn hình hoặc các

thiết bị trình chiếu đồng thời nhận lại các sự kiện xuất hiện trên các giao diện

này (ví dụ như tương tác của người dùng hoặc các sự kiện từ các animation ).

* OEM Widgets: Thành phần phụ được cấu thành do sự thống nhất giữa các

vendor (nhà cung cấp thiết bị (HTC!”), đơn vi phát hành thiết bi (NTTDocomo!Š)) nhằm thống nhất một quy chuẩn chung cho các UI được sử dungtrong các Platform Quy chuẩn được thống nhất này tạo ra một vài giới hạn cho

việc viết lên UI sẽ được nói kĩ ở phần sau

Thành phần sẽ được so sánh là kiến trúc của lớp Application cũng như cách mà lớp

Application giao tiếp với lớp Platform Giống như đã đề cập ở phần trước Tầng Application

của Flutter cung cấp kiến trúc cho một ứng dụng viết bằng Flutter và tầng Shell cung cấp khảnăng giao tiếp giữa ứng dụng viết bằng Flutter và lớp Platform Lấy ví dụ về một ứng dụngđược viết bằng đoạn mã Native?! Toàn bộ mã thực thi được viết ở dạng Native sẽ được biêndịch hoặc thông dịch qua dạng mà tầng Platform có thé hiểu được và thực thi trên đó

Đối với ứng dụng viết ở dang Hybrid, các đoạn mã giao diện của ứng dụng được viết băngHTML/CSS và được vẽ ra với DOM qua dạng hiển thị được trên WebView Web View sẽ trực

tiếp điều khiển Canvas vẽ lên UI và nhận các event ngược lại thông qua WebView đó Mãthực thi của các ứng dụng viết dựa trên Hybrid được sử dụng dưới dạng Javascript

JavaScript có thé dé dang điều khién HTML/CSS thông qua giao tiếp với Web View tuy nhiên

7 https://www.htc.com/

'8 https://www.nttdocomo.co.jp/

10

nhằm mục đích bảo mật, Web View không được cung cấp khả năng giao tiếp với các serviceshoặc điều khiển phần cứng của lớp Platform dẫn đến các ứng dụng viết dựa trên Hybrid cầnmột module trung gian thường gọi là Bridge dé làm điều nay Module này phải đọc hiểuJavascript và tồn tại luôn trong mã nguồn của ứng dụng dẫn đến kích thước của ứng dụng bịtăng lên đáng kể.

Đối với các ứng dụng được viết 6 dạng WebNative hoặc Cross compiled, sẽ không có

phần WebView được sử dụng mà thay vào đó module Bridge sẽ thực hiện toàn bộ các hành

vi trung gian giữa lớp Application và lớp Shell Mã nguồn của ứng dụng cũng không bị giớihạn bởi Javascript nữa mà tùy thuộc vào nhà phát triển các nền tảng dạng này Có thê làNative Code có thê là Non-native code

Đối với Flutter, mã nguồn được cross compile thành native code Dựa vào máy ao Dart

VM, những thành phan ít thay đổi sẽ được compile dang AOT còn những thành phần thườngxuyên thay đôi sẽ được compile thành dang JIT Flutter không cam kết với các OEM Widgets.Flutter cho phép lập trình viên thay đôi và điều khiến từng pixel trên màn hình và không cầnquan tâm đến những giới hạn của OEM Widgets Tuy nhiên khác với các ứng dụng viết ở

dạng Hybrid khi lập trình viên phải tự quan tâm đến các chuẩn của OEM Widgets, Flutter

cũng cung cấp các Widget mặc định hỗ trợ hai nền tảng giao diện là Material Design (cho

Android/Fuchsia) và Cupertino (cho iOS) Bạn cũng có thê quay trờ về với Flat Design thông

qua một số thư viện trôi nồi trên thị trường Sự so sánh kiến trúc của các nền tảng này được

vẽ trong hình bên dưới [21].

11

— &

Pee |

NATIVE & CROSS COMPILED

WEB NATIVE & CROSS COMPILED

RESTful APP? là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web

dé quản lý các tài nguyên RESTful API là một trong những kiêu thiết kế API được sử dụngphô biến ngày nay dé cho các ứng dụng giao tiếp với nhau

+ APIA tập các quy tắc và cơ chế mà theo đó, một ứng dụng hay một thành phan

sẽ tương tác với ứng dụng hay thành phan khác

¢ REST (REpresentational State Transfer) là một dang chuyén đổi cấu trúc dit

liệu, một kiến trúc dé viết API Sử dụng phương thức HTTP”? dé tạo giao tiếp

Trong đề tài này, dé theo dõi thời gian thực hành trình của xe buýt nhóm sử dụng phương

pháp đọc GPS từ điện thoại của bảo mẫu phụ trách đưa đón, sau đó sử dụng Goolge Maps

Platform dé xác định quãng đường, ước tính thời gian từ vi trí của xe đến các điểm đón trong

danh sách và hiền thị lên bản đỏ

Google Map Platform là một dịch vụ bản đồ trực tuyến trên web và app miễn phí doGoogle phát hành và quản lý, ứng dụng hỗ trợ nhiều dịch vụ, tinh năng cho người ding nhưng

phô biến nhất là dò đường, chỉ đường, tim vị trí; hiển thị những tuyến đường tối ưu cho từng

phương tiện tham gia giao thông, ngoài ra còn hướng dẫn cách bắt xe và chuyền tuyến xedành cho người tham gia các phương tiện lưu thông công cộng (xe bus), hiển thị những địađiểm xung quanh vi trí người dùng hoặc vi trí chỉ định như ATM, trạm xăng, bệnh viện,

[22].

Google Maps API là phương thức cho phép một ứng dụng sử dung dich vụ ban đồ của

Google Map và nhúng vào ứng dụng của minh dé sử dụng các dịch vụ mà Google Maps cung

cấp thông qua Google Maps API như: đi chuyên, phóng to, thu nhỏ, đánh dấu trên bản đồ,chi dẫn đến các địa điểm, tinh trạng giao thông các khu vuc, Hiện nay, Google Maps API

đã được nâng cấp dé có thể hỗ trợ cho cả máy tính và thiết bị di động, giúp ứng dụng hoạtđộng nhanh và hiệu quả hơn Một ưu điểm của dịch vụ Google API là miễn phí khi sử dụngcho các ứng dụng nhỏ, yêu cầu thấp

Google Maps Directions API là dịch vụ tính toán đường đi giữa các vị trí Qua đó, có

thé xem hướng dẫn đường di cụ thé cho một số phương tiện di chuyển (xe may, ô tô, đi bộ,

xe đạp) Cấu trúc của request gửi đi bao gồm:

* Origin: địa điểm, kinh độ/vĩ độ hoặc ID của địa điểm xuất phát

* Destination: địa điểm, kinh độ/vĩ độ hoặc ID của đích đến

¢ API Key: key khi đăng ký sử dụng dịch vụ Google Maps API.

° Một số thông số khác như: mode (loại phương tiện), Alternative (các tuyến

đường), Avoid (tránh một số vấn đề như đường cao tốc, trạm thu phi),

* Cau trúc respone có thê ở dang JSON hoặc XML

13

Distance Matrix API là dịch vụ cung cấp khoảng cách và thời gian di chuyển cho một

ma trận các điểm xuát phát (origins) và điểm đến (destinations) API trả về thông tin dựa trên

tuyến đường được đề xuất giữa xuất phát và điểm cuối, được tính toán bởi Google Maps API

và thông tin về khoảng cách và thời gian di chuyển ước tính giữa các điểm

2.3.4 Firebase

Firebase?! là một nền tảng được phát trién bởi Google được sử dụng dé phát triển các ứngdụng di động và các website bao gồm các API giúp chúng ta xây dựng các hệ thống không

cần tới Backend

Đề dữ liệu về vị trí được cập nhật thời gian thực (realtime) đến ứng dụng của phụ huynh,

sử dụng Firebase Realtime Database — công nghệ hỗ trợ việc lưu trữ và đồng bộ hóa realtime

giúp phụ huynh có thé theo dõi hành trình, vị trí của xe ở mọi thời điểm Các thông tin về học

viên trong quá trình học được thông báo trực tiếp đến ứng dụng phụ huynh nhờ vào Firebase

Cloud Messaging.

2.3.4.1 Firebase Realtime Database

Firebase Realtime Database là một cơ sở dữ liệu NoSQL được lưu trữ đám mây cho phép

lưu trữ và đồng bộ hóa dữ liệu Dữ liệu lưu trữ dưới dạng JSON và được đồng bộ hóa realtime

cho mọi máy kết nối phù hợp với các ứng dụng di động [23]

Tính năng chính:

- Realtime: Mỗi khi dữ liệu thay đôi, mọi thiết bị kết nối sẽ nhận được thay đôi ngay

lập tức.

* Offline: Dữ liệu vẫn khả dụng khi ngoại tuyến, khi có kết nối trở lại, dữ liệu sẽ

được cập nhật và đồng bộ hóa với máy chủ

° Su dụng cho nhiều thiết bị: Firebase Realtime Database có thé được truy cập trực

tiếp từ nhiều thiết bị như đi động hay trình duyệt web

- Kha năng mở rộng: Sử dụng kết hợp nhiều database

?! https://firebase.google.com/

14

2.3.4.2 Firebase Cloud Messaging

Firebase Cloud Messaging là một dich vu miễn phí của Google, cung cấp giải pháp gửithông điệp cho nhiều nền tảng như Android, iOS một cách nhanh chóng, an toàn tới các thiết

bị cải đặt ứng dụng [24].

Tính năng chính:

» Gui thông điệp thông báo (notification messages) hay gửi thông điệp dữ liệu (data

messages).

* Linh hoạt: phân phối tin nhắn đến ứng dụng bang các cách sau — đến thiết bi don

lẻ, tới nhóm thiết bị hoặc tới thiết bị có đăng đăng ký trước

* _ Gửi thông điệp từ ứng dụng khách: Gửi xác nhận, tin nhắn hoặc các dạng thông

điệp khác từ thiết bị đến máy chủ thông qua FCM

Luéng hoạt động của FCM [24]:

15

Message building FCM Platform-level SDK

and targeting backend message transport on device

Hình 2.4 Luéng hoạt động của FCM (Nguồn: firebase.google.com)

1 Message building and targeting: Tạo thông điệp trong môi trường đáng tin cậy (có hỗ

trợ Firebase Admin SDK hoặc các giao thức FCM như HTTP/XMPP) Môi trường này có thé

là Cloud Functions của Firebase, Google App Engine hoặc server.

2 FCM backend: làm nhiệm vụ chấp nhận yêu cầu, thực hiện tạo dữ liệu cho thông điệp

(ví dụ như ID).

3 Platform-level message transport: xác định thông điệp được gửi đến thiết bị thuộc nền

tảng nào, xử lý việc gửi thông điệp và ứng dụng các cấu hình dành riêng cho từng nên tảng:

° Android transport layer (ATL) cho các thiết bị Android với Google Play

services.

¢ Apple Push Notification service (APNs) cho các thiét bi iOS

* Web push protocol cho các web app.

4 SDK on device: nơi thông điệp được hiển thị, các thông điệp được xử lý logic khi app

mở ở foreground hay background.

2.3.5 Mã Quick Response (Mã QR)

16

Mã Quick Response là một mã vạch ma trận được phát triển bởi công ty Denso Wave”?(Nhật Bản) vào năm 1994 Mã QR gồm một hình vuông gồm các pixel tối hoặc sáng được sử

dung dé mã hóa và truy xuất nhanh bằng các thiết bị kỹ thuật số Ban đầu, mã QR được sử

dụng để theo dõi các bộ phận của xe Tuy nhiên ngày nay, mã QR được ứng dụng tron nhiềungữ cảnh khác nhau hướng đến sự tiện lợi cho những người sử dụng điện thoại di động.Những ứng dụng phổ biến của mã QR có thé kể đến như thêm danh thiếp vCard vào thiết bi

người dùng, mở URL, thanh toán điện tử,

Cách dùng mã QR rất đơn giản: chỉ cần quét bằng cảm biến hình ảnh có trên camera điện

thoại, ứng dụng sẽ chuyên đoạn mã sang dạng nhị phân và hién thị thông tin hoặc thực hiện

hành vi đã được lập trình sẵn như mở ra website, hay nói cách khác là cho phép đồ vật thực

tế gan siêu liên kết tới một địa điểm kỹ thuật số

Trong dé tài này, nhóm sử dụng mã QR dé định danh một học viên, sử dụng mã QR khi

đưa học viên đến trường và khi đến đón học viên nhằm xác định chính xác và nhanh chóng

thông tin người đưa/đón.

?? https://www.denso-wave.com/en/about/

17

2.4 Thiết kế giao diện

Dé phát triển ứng dụng thành công, cần có những thiết kế UI (User Interface) và UX(User Experience) Trải nghiệm khi sử dụng của người dùng cuối không tốt là một trong các

lý do người dùng xóa ứng dụng Thiết kế đóng vai trò quan trọng trong quá trình phát triểnứng dụng Các lập trình viên không cần phải vừa lập trình, vừa suy nghĩ về bố cục hay màu

sắc, họ chỉ cần nhìn vào thiết kế có sẵn dé thực hiện Ngoài ra, các thiết kế còn được trải

qua nhiều lần đánh giá phản hồi, điều này giúp đội phát triển tiết kiệm được thời gian cũng

như cho ra ứng dụng hoàn thiện, chất lượng hơn.

2.4.1 UI (User Interface)

Theo Soren Lauesen tác giả của User Interface Design a Software Engineering

Perspective [14], Scott W Amber tác giả của User Interface Design: Tips and Techiques xuất

bản bởi Cambridge University Press [15] va Wilbert O.Galitz tác gia của The Essential Guide

to User Interface Design [16] có rất nhiều quy tắc cần tuân theo khi thiết kế giao diện ngườidùng Các quy tắc được nhắc tới trong các cuốn sách trên giúp ứng dụng dễ sử dụng, linh hoạt

và đảm bảo tính nhất quán

Một số quy tắc cơ bản khi thiết kế UI [17]:

* Nguoi dùng có thé kiểm soát được giao diện sử dung: cho phép người dùng

hoàn tác các hành động, giao điện dé điều hướng, có phản hồi rõ ràng, hién thịtrạng thái hiện tại của hệ thống (ví dụ tiến độ đăng tải tài liệu )

* Tao sự thoải mái: không hiển thi các thông tin thừa, tránh dùng các thuật ngữ

khó hiểu, sử dụng các icon quen thuộc, dé hình dung

* _ Giảm thao tác: người dùng có thé tim thấy thông tin mong muốn chỉ với ba lần

click hay tap.

* Nhat quán: nhất quán về giao diện (sử dụng chung bộ icon, phông chữ, ), nhất

quán về chức năng, phù hợp với mong đợi của người dùng (tuân theo một sốquy tắc cơ bản, tránh sáng tạo các thuật ngữ hay quy ước )

18

2.4.2 UX (User Experience)

Việc phân tích, thiết kế UX (User Experience) là một phan trong cải thiện trải nghiệm

người dùng và được nhắc đến như một trong những nguyên tắc cơ bản nhất dé có một thiết

kế thân thiện với người dùng

Quy trình trải nghiệm người dùng được mô tả như hình 2.1 theo UX Mastery [18].

STRATEGY BETA LAUNCH © LAUNCH

Chương3 XÂY DỰNG ỨNG DỤNG

Trong chương này nhóm thực hiện trình bày quá trình thực hiện đề tài từ nghiêncứu khảo sát, phân tích thiết kế, xây dựng mockup (giao diện mẫu) cho đến hoàn

thiện ứng dụng Các công nghệ, giải pháp cho các chức năng có trong ứng dụng đã

được trình bày ở Chương 2.

3.1 Khao sát một số ứng dụng liên quan

Trong môi trường giáo dục ngày càng được quan tâm, việc cải thiện mối quan

hệ giữa giáo viên và phụ huynh là điều không thể thiếu Giáo viên cần nơi để quản

lý công việc trong quá trình giảng dạy của mình Về phụ huynh, có thể tham gia vào

quá trình học tập của con em Hiện nay có rất nhiều ứng dụng dùng để phục vụ cho

các mục dich nay trong đó có thé kế đến một số ứng dụng như LittleLives23, SC

Family?t, BrightWheel?Š, ClassDojo, Classroom”®, Vin School”T,

Bảng 3.1 Khảo sát một số ứng dụng liên quan

Little SC | Bright | ClassDojo | Classroom | Vin

Lives | Family | Wheel School

3.2.1 Ứng dụng cho giáo vụ

3.2.1.1 Mô hình usecase tổng quan

a Usecase tông quan

tức mới từ

Trường học

Xem phản hồi

Cập nhật, quản Quản lý tài

Bảng 3.2 Danh sách các usecase ứng dụng giáo vụ

STT Tên usecase Mô tả

; Quan lý tài khoản cá nhân gồm đăng nhập,

UCOI Quản lý tài khoản cá nhân ,

dang xuât, xem thông tin cá nhân

22

Xem các phản hồi phụ huynh gửi về choUC02 | Xem phản hồi

UC05 | Điểm danh Thực hiện điểm danh học viên

UC06 | Kiểm tra bài tập Kiểm tra bài tập của học viên

UC07 Xem giáo án Xem giáo án dạy của các buồi học

UC08 Xem lịch giảng dạy Xem lịch biểu

Chức năng đếm ngược thời gian, tạo nhóm,UC09 Tương tác nhanh với học | chọn ngẫu nhiên học viên nhăm hỗ trợ

viên trong quá trình tương tác với học viên tại

lớp.

UCI0 Checkin/Checkout học | Thực hiện checkin/ checkout cho học viên

viên mỗi khi đến/ rời trườngUCI Cập nhật hành trình đưa | Cập nhật hành trình chuyến đưa đón học

23

Hình 3.1 Mockup giao diện Trang chủ

3.2.1.2 Usecase UC01: Quản lý tài khoản cá nhân

Người dùng tin cá nhân

Sơ đồ 3.2 Usecase quản lý tài khoản cá nhân

a Đặc tả usecase Đăng nhập

24

Bảng 3.3 Đặc tả usecase Đăng nhập

Tên Usecase

Mô tả

Tác nhân

Điều kiện kích hoạt

Tiên điều kiện

Hậu điêu kiện

Người dùng đăng nhập vào hệ thống dé sử dung

Người dùng (Giáo viên, Trợ giảng/Bảo mẫu)

Người dùng muốn đăng nhập sử dụng ứng dụng

- Người dùng đã được tạo tài khoản, mật khẩu trên hệthống và đã được phân quyền

- Thiết bị đi động có kết nối internet

Đăng nhập thành công

1 Người dùng truy cập ứng dụng

2 Tìm kiếm và chọn tên trường trực thuộc từ danh sách

3 Nhập tên đăng nhập và mật khâu

Mật khẩu của người dùng phải được hash

b Sơ đồ hoạt động Đăng nhập

25

Không có thông tin trong hệ thống

Có thông tin

trong hệ thống

Sơ đồ 3.3 Sơ đồ hoạt động Đăng nhập

c Mockup man hinh Dang nhap

26

Đăng nhập

Hình 3.2 Mockup giao diện Đăng nhập

d Dac ta use case Dang xuat

Bang 3.4 Dac ta usecase Dang xuat

Tén Usecase Dang xuat

Mô tả Người dùng thực hiện đăng xuất khỏi ứng dụng

Tác nhân Người dùng (Giáo viên, Trợ giảng/Bảo mẫu)

Điều kiện kích hoạt Người dùng yêu cầu đăng xuất

Tiền điều kiện Người dùng đã đăng nhập trước đó

Hậu điều kiện Đăng xuất khỏi hệ thống

Dòng sự kiện chính _ 1 Người dùng truy cập ứng dụng

2 Chọn chức năng đăng xuất

3 Chọn lệnh đăng xuất

4 Xác nhận đăng xuất

27