Khóa luận tốt nghiệp Hệ thống thông tin: Xây dựng ứng dụng quản lý gia sư tích hợp trợ giảng AI chatbot

TOM TAT KHÓA LUẬNĐề tài "Xây Dựng Ứng Dụng Quản Lý Gia Sư Tích Hợp Trợ Giảng AIChatbot" EduMentor nhân mạnh vào việc phát triển một ứng dụng hiện đại và tiệních cho quản lý và hỗ trợ giả

ĐẠI HỌC QUÓC GIA TP HÒ CHÍ MINH

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

KHOA HỆ THÓNG THÔNG TIN

PHAM MANH LỢI - 19521772

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

XÂY DỰNG ỨNG DỤNG QUẢN LÝ GIA SƯ TÍCH HỢP

TRỢ GIẢNG AI CHATBOT

BUILDING A TUTOR MANAGEMENT APPLICATION

INTEGRATED

WITH AI CHATBOT TEACHING ASSISTANT

KY SU NGANH HE THONG THONG TIN

GIANG VIEN HUONG DAN

THS THAI BAO TRAN

TP HO CHÍ MINH, 1/2024

THONG TIN HỘI DONG CHAM KHÓA LUẬN TOT NGHIỆP

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

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

Tôi đông ý với báo cáo và cho phép dé tài khóa luận được ra bảo vệ trước Hội Đông

Tốt Nghiệp ngày 23/01/2024

TP HCM, ngày 18/01/2024

Giảng viên hướng dẫn

ThS Thái Bảo Trân

LOI CAM ON

Bang sự biết ơn và kính trong, tac giả xin gửi lời cảm ơn chân thành đến quýthầy cô trường Dai học Công nghệ thông tin — Dai học Quốc Gia thành phố Hồ Chi

Minh đã nhiệt tình hướng dẫn, giảng dạy và tạo mọi điều kiện thuận lợi giúp đỡ nhóm

trong suốt quá trình học tập, nghiên cứu và hoàn thiện khóa luận tốt nghiệp này

Đặc biệt, tác gia xin bày tỏ lòng biết ơn sâu sắc tới Cô Thái Bảo Trân, Cô đã

trực tiếp hướng dẫn, giảng dạy và cung cấp kiến thức quý giá để em có được kết quả

tốt nhất trong khóa luận tốt nghiệp

Trong quá trình thực hiện đề tài, tác giả đã vận dụng những kiến thức nền tảng

được tích lũy, kết hợp với việc tự học hỏi và nghiên cứu những kiến thức mới Tuynhiên, do kiến thức vẫn còn hạn chế nên không thẻ tránh khỏi những thiếu sót Chính

vì vậy, tác giả mong 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 tri thức của minh trong tương

lai.

Xin chân thành cam on!

Tac gia, Pham Mạnh Lợi.

MỤC LỤC

DANH MỤC HINH ÍNH se Set SxEkEEEEEkEEkEkeEkerkrrrerrkrrkrkerrerrerre iDANH MỤC BANG iocssssssessesssesssessssssesssesssssusssscsssssessscsssssuessscsnsssscssecsucssscsnesaseesseess iiiDANH MỤC SO DO vecssessessssssessessesssssssssessessssssssssssessesscssessessssssesscsacssesassasesscssceseenss viDANH MỤC TU VIET TAT esssssssssessessessesssssssssessessessssssssscssessssssssssssssssssssssssesssesess viiiTOM TAT KHÓA LUAN Wosssessssssssssssessesssssssssssssssesssssssssssscsssssssssssssssssssssssssssessseseseees 1CHUONG 1: TONG QUAN DE TÀI sssssssssssssssssssssssssssessessesssssssssssssssesssssssssssssssseees 2

1.1 bá in nan 6Š e 2

1.2 Muc go 1 3

1.3 Đối tượng và phạm vỉ nghiên cứu . -s- 5s ssssessessesssessessessss 3

1.3.1 Đối tượng nghiên cứu - + + 2 £+x+SESEE#EE2EEEEEEEEEEEEEEEEEEEEEErkerkerkree 31.3.2 Phạm vi nghiên cứu đề tài - 2-5 +S2E£+EE+EEEEEEEEEEEEEEEEEkrrkerkerkrres 4

1.4 Phương pháp thurc lhÏỆT d G5 G5 S99 %9 99 99.99 590 5 0 065056566 4

1.5 Môi trường phat triỄn e-° 5-5 << 5£ ©s£ SsSsESsEseEseEseEsessesseesersersessee 5

CHƯƠNG 2: CƠ SỞ LÝ THUYÉT VÀ CÔNG NGHỆ SỬ DỤNG 6

2.1 Co’ ân 5 6 6

2.2 Công nghỆ SỬ (ng - 2-5 < << HH 0085084086860 13

2.2.1 Phát triển web với framework ReactJS :- + s+s+x+x+EeEtzesrrrsrees 132.2.2 Framework phát triển ứng dung React Native ¿5-5552 17

3.1 Thu thập yêu cầu c.ccsssssssssssssssescessesssssssssessessessesssssssssessessessssesssssseeseesessees 27

3.1.1 Khảo sát hiện trang eee eecessesseceeeeseeseeeseeeeesseeesecececeeseeeeeeeseeeaees 27

3.1.2 Thị trường Việt Nam G6 HH HH TH HH tr nrkt 28

3.2 Phân tích thiết Ké ssssssssssssssssssscsssssssssssssssssssssssssssssssssssesssssnesssssssesesssssees 32

3.2.2 Danh sách CAC ÁC{OT - -.- - + 111 1H TH ng HH ng re 33

3.2.3 Mô tả USE CAS€ Q2 HH HH HH in 34

3.2.4 Đặc tả Use Case và mô tả luồng hoạt động: . -+-s<c++<<x+ssess 38

3.3 Thiết kế dữ liệu s-s- 5£ s<©se©ss©ss£EseEseEssEvsEEsEEseEsersersetssersrssersee 68

3.3.3 Sơ đồ luồng dữ liệu ( Data Floww) -2- ¿+ z+xz2E2EEeEEerkerrrrkerkrree 76

3.3.4 Hệ thống triển khai -¿- 2-5 +S9EEE2E2+EEEEEEEEEEEEEEEEEEEEEEEEErkerkrree 76

4.1 Các giai đoạn phát trién ứng dụng -s s-s<ssssessessesssesee 77

4.2 Ứng dụng dành cho người dùng - EduMentor -. s- << 77

4.2.1 Những tính năng cơ bản trong ứng dụng EduMentor 77

4.2.2 Đối với người dùng là học viên 2-2 2+££+£++EE+EEerEzEz+rxrrxerxee 864.2.3 Đối với người ding là giảng VIEN Lecce cesessessessessesssessessessecsesseessesseeses 91

4.3 Web quản lý dành cho admÏ 5< 5< << 5< S5 £sS£sEeessseesse 924.4 Kết quả dat ÑưỢC e5 scscsscssvesvvsEsserserserssrkersssrssrssrssrssrssrssse 94

CHUONG 5: KET LUẬN VA HUONG PHAT TRIEN -. -c «c-s 97

5.1 Kết luận Chunng c.cccsssssssssssessessessssussscssesscesssucssssscsosssecsucsncsscsocsasesecsnceseeees 97

5.2 Hạn ChẾ - 2° +©es©+++©EL4©E.4EEL4 7144 7A4 E44 E744 074407442744 07412224EE 985.3 Hướng phat triỂn s 2 ss©©++s©k+©E.AtE.AetEEAAEEA4AA1AA1rAerkee 98

TÀI LIEU THAM KHẢ O -«°©e+©++e+tE++eetttxeeerreeterreersrrrerrrrrree 100

PHU LUC essssssssssssscssssssscssssssssssssssessssssssssssssessssssssssssssssessssscssssssssssssssesessssesssssssees 102

A Đặc tả Usecase và mô tả luồng hoạt động . -sssss 102

A.1 Usecase đăng nhập của quan tri VIÊN - ¿+ s- + + s + sskreserreeeeerses 102

A.3 Usecase đổi mật khâu của quản frỊ VIÊN: .c + ss<ssscrssrssers 104

A.4 Đăng xuất của quản trị viên -2¿- + 5++cx+2E++Ex+2Exerxxerxrsrxerkrsred 106

A.5 Usecase xem thông tin tổng quan của quản trị viên -: 107

B Web quản lý dành cho quan tri VIÊN o5- << 555 55s 59559455995 109

4 Cách hoạt động của ChafP T - + cv *tEtktskksekrreerersrerrrerree 9

5 Thống kê số lượng sử dung của các fraMeWOTK j$ .:© -©5: - 14

6 Cách Element được thể hiện trong DOMM 2- 2s s+cs+cs+ce+cee: 14

S Độ quan tâm của Các FrAMEWOTK jS c3 kESsekssekreseersse 16

9 Ảnh minh họa React Native v.ccccccccssscccsssscscsrssesveesssvevecssssvsersavsvssesvaveneeees 18

11 Sơ đồ hoạt động cua thread trong React Native - «©+-«+<<«2 20

12 Các tinh năng của Express TS cccccccccceccccesscessscesseeesseceseeeuseeseeeseeesseeesgs 24

13 Sơ đô middleware trong ExpressJS ccccccscssscsssesssessisssssssssssssesssssessseesees 24

14 So đồ triển khai cơ bản với Express JS - ¿c2 s+ctccerterkerrsrssred 25

I)0/2/42 ,1,.0nnnẽnn e- 29

2 Gia sư đất VIỆt : (o5cc-55cccc SE thue 30

& Trang tim KGCMcecsceseesessesssssesvesvesesssssssvessesessssussussnesecassassussucavsavsatsnssneaveass 54

9 Trang chỉnh sửa thông tin người đÙng cccccckssseisseereseereee 65

10 Trang chỉnh sua mật khẩu NQUOT đÙng Ăn hi, 66

11 Trang chỉ tiết yeu cầu dạy NOC - 2 2+5£SceEeE+EzEerkerkerrrrrered 67

12 Trang tạo yêu câu dạy NOC - 5c ©5z+52+E+EEEEEEEEEEEEEEEEErkerkerkerrrres 86

14 Trang chỉnh sửa các thông tin bằng cấp -c-5cccccccccccsresred 90

15 Xem chỉ tiết yêu CGU đÌẠy - + 2-5 St‡Sk‡EE+EEEEEEEEEEEEEEEEEEEEEEkerkrrrkrred 91

16 Trang CHU AAMIN ececeeccccescecessceeseceeecesnecencecescecececeaceceeeesaeeceaeeceanessaeessas 92

T7 Trang xem danh sách người AUN ccceccccesccessccessscenseeeseeeeseeeeseeeeeeeeeeeeas 93

18 Trang xem chỉ tiết người AUN veesceccescescssssessessessessessesssessessessesseesesesseees 93

19 Tạo dữ liệu nỄH - 5c SttEEtStEEEEEEKEEEEEEEEEEEEEEEEEEEEEEEEEEEEErrrkrrrrkrre 94

2D Trang CRU GAIMIN 8n nan n.ố.e 110

4 Trang xem chỉ tiẾt người dùñg - :- 2-5252 +ce£t+£+E+EczEerkerererreee Ill

5 Trang xem danh sách yêu câu trở thành giảng VIÊN «<< +2 112

6 Trang xem chỉ tiết yêu câu trở thành giảng viên cece 113

7 Trang xem danh sách lớp học, yêu cầu dạy học -s-=s¿ 114

8 Trang xem chỉ tiết lớp học, yêu cầu dạy học -z-secscsze: 114

1

DANH MỤC BANG

Bảng I Khác nhau của Flutter và React NGFÏV© cv viissiseserersee 23Bang 2 Danh sách các Actor của hệ MONG -:- 5c ©ce©ce+E+EeEerkerkrrrreerxee 33

Bang 3 Danh sách các Usecase của người Aung «se ssitsitreree 36

Bảng 6 Usecase: đăng nhẬp cv HH TH HH ng rưy 40

Bảng 7 Use case: Quên mật khiẩM - ©5522 Sk‡EE‡EE‡EECEEEEEEEEEEkerkerkrrrerrsee 41

Bang 8 Usecase: Xem danh sách ĐA SU ccccccsccccccesscessesseesseeseceseeuseensesesessseeseenseensees 42Bảng 9 Use case: Xem chỉ tiét Gi SU cccccccccscesssssessessesssessessessessesssessessessessesssesessee 43

Bang 10 Usecase: Tim SiG SU cecccccscccsscccssscssecssseceseeceseeceeeseseeesaeessaecesseeeeseeseaeeesaes 44

Bang 11 Usecase: Xem danh sách lớp học, yêu câu dạy học -: 45Bang 12 Usecase: Quản lý lớp học, yêu cau dạy học của người dùng 46Bang 13 Use case: Xem chỉ tiết lớp học, yêu câu AY hỌC àcsccsSSssceseses 47

Bang 14 Usecase: Tìm kiếm yêu cầu day học, lớp học -z©ss+ss+s+cse¿ 48

Bang 18 Usecase: Tạo yêu câu day NOC scccessccsscesvessessesseessesessessessessesstessessessesseaees 53Bang 19 Usecase: Xem danh sách tin nhắn cccceccecccscssscesvessessessesseessessessessessesssessee 54

Bang 20 Usecase: Nhắn tin với người dùng khác -:- +5 sece+c+ecreerterssrs 55

Bang 21 Use case: Nhắn tin với trợ giảng ChatbOt - 5c 5t+ccteccEztertered 56

Bảng 22 Usecase: Xem hồ sơ cá HhẬNH - 52-5252 E‡EE‡EEE2EEEEEEEEEEEEEErkerkerssrs 57

Bảng 23 Usecase: Chỉnh sửa hồ sơ cá nhẬH - 5c cseEềEEEEEEEEEEkeEkerrrrreree 58

Bảng 25 Use case: Đồi mật khẩM c.cecceccesccsscessessessessessesssessessessessssstesessessessesssesessen 61

Bảng 26 Use case: DGNg XHẤT 5-55 SE SE SE 1121111111111 11 xe 63

[7.11.800) 8)08/4.2.1.)., 0000nn0n8088.ẻ ố 64

1H

30 Mơ tả chỉ tiết thơng tin người dùng 5c©5+©cs+cs+cecerxerrsrsrsereee 70

31 Mơ tả trợ giảng Chat-bot của người đÙng à«cccscssseksseereseers 70

32 MG td MON NOC 8n 70

33 Mơ tả yêu câu dạy NOC cesvessecescescssveseeseesessessessessesssesssssessesessesessvssesseaeesess 72

35 Mơ Phịng chỉ tiết ChAt cescecsessssssesssesssessssssesssessscssessssssssssecsssssecssessecsseeseee 73

36 M6 Phịng chỉ tiết Chat ĐOLL - +52 5s‡EE‡E‡EE‡EESEEEEEEEEEEEEEEEErrrrrrrker 73

37 Mơ tả chỉ tiết đánh giá - 5S EE‡EEEE+EEEEEEEEEEEEEEEEEEEEEEEEErrrrkrred 74

38 ,(0 8,19.- 00n0nnnn8 74

39 Giải thích về trang Đăng Kh coescecsessessssssesssessssssesssessssssesssssssssecssesseessesseee 78

40 Giải thích về trang đăng nhậpD c- 55552 SE ‡E‡EEeEeErrrrerrerkeree 79

42 Giải thích trang quản lý yêu câu day NOC cececcscssvesvssvessssessessessessessesesseeseess &1

44 Giải thích trang chat với ChafBOI «c5 S<csS+‡+ksekkseexeexeerxserrsers 8&3

45 Giải thích trang tim Kit voeccccscccscsssesseesscsssessssssesssessssssssssssssssscssesseesseesses 84

46 Giải thích trang Chỉnh sửa hổ $Ơ 2-5 ©tS£+S£+E£+E£+E£EEeEE+EzEeztered 85

47 Giải thích trang mật khẩM À - 2: © + ©5£2S++EE+2EE£EE£EE+EEeEEeerxezreersere 86

48 Giải thích trang chi tiết yêu cầu day hoc của học viên -: 87

40 giải thích trang tạo YEU ẨM vecseecsesssessssssesssesssesssssssssessssssssstsssessssssecasesseee 88

50 Giải thích trang hơ sơ cá nhân của học viÊn -z©cscs+cs+ccsreesce2 8&9

51 Giải thích trang thơng tin bằng cấp gia SU-.sceccecseessesssssssessesssessessseessesseee 90

52 Giải thích trang chỉ tiết yêu cầu dạy học của giảng viên - 91

55 Quản trị viên đổi mật khiẩM - St teEkEEEEEEEEEkerkekerrkerkererves 105

56 Quản trị viên đăng xuất tài khoảin - 2-52 5ecsccectetEzErrersersees 107

57 Admin xem thơng tin tong qMAïI 5-5-5252 S£+E‡E‡ESEE2E+EeEEeEersrreei 108

iv

Bảng 58 Trang đăng nhập dành cho ađÏHÌ c5 +seeeeeeeseeeres 109

Bang 60 Trang xem danh sách người AUng cccccccccceccccesccessecessecesceseseeeeseeeeseeeeeeees 1H

Bang 61 Trang xem chỉ tiết người đÌngg - 5552252 EeEeEeEEerEertrrrerkerkeree 112

Bang 63 Trang xem chi tiết yêu câu trở thành QIANG VIÊN ec cà ằẰc + 113

Bang 65 Trang xem chỉ tiết lớp học, yêu cầu dạy NOC -z©ce+cssccscea 115

DANH MỤC SO DO

Sơ đồ I Usecase diagram của người ung cecceccccceccessesssssssssessessessessssssessessessesssessesees 32

Sơ đồ 2 Usecase diagram cho AdMin vocccecccscescssscesvessessssssesessvessessessessesssssessesseeseesees 33

Sor dO 3 WONG AGN Kb eecsceccessesssesssesssessssssessssssssssecssssssssssssssssscssessesssscsusssecssecssessecsses 39

Sơ đồ 4 Luông đăng NG piccecceccccccescesvessessessssssessessessessssssessessessesssssssessessessessesseeses 40

Sơ đồ 5 luỗng quên mật khiẩÌ 2+- 52-52 StSE££E£SEE£EE£EEEEEEEEEEEEEEEEEEEEerkrrrrrrrrrkee 42

Sơ đồ 6 luông Xem danh sách Qid SU - 5-55 52+ +E‡EE‡EEEEEEEeEEEEkerkerkrrerrees 42Sor dO 7 Xem Chi ti€t Gid SU ng g Ả 43

Sor AO 8 Tim gid SU nnnnnggớgớ ũ 44

Sơ đồ 9 Xem danh sách lớp học, yêu cau L8 45

Sơ đồ 10 Quản lý lớp học, yêu câu dạy học của người dùng -:- :-c-cs©+ 46

Sơ đồ 11 Xem chỉ tiết lóp học, yêu câu dạy hỌC -. -z©-s+-s+cs+csecse+ee+xecsee 47

Sơ đồ 12 Tìm kiếm yêu cầu dạy học, lóp NOC - +2: 2+ s+ce+ce+ke+kertsrssrzrezreei 48

Sơ đô 13 Nhận lÓp NOC crccccccssccscssvssvesesssssesssssesvessessssessessesesvessssssassestssvsssssessessessesees 49

Sơ đồ 14 Tham gia lip hỌC s55 52-52 5< EEEE‡EE2E12E1EEEEEEEE1211211211E11 11111 ctree 51

Sơ đồ 15 Đánh giá giảng viên lớp NOC cececcescesscescessessessesssessessessessesssessessessessesstessesses 52

Sơ đồ 16 Tạo yêu câu dạy HỌC - 5c 5e 5£5£ SE EEEE2E2EEEEEEEEEEEEEEEEEEEEEErrkrrerreeo 53

Sơ đồ 17 Xem danh sách tin nhiẮN - 2: ©5£©5£+5£+SE£EE£EE£EEEEEEEEEEEerkerkrrrrrreerkee 54

Sơ đồ 18 Nhắn tin với người dùng khác - -©-¿5s+cs+Et+EEe£EeEEt+Esrerkerkerrerreee 55

Sơ đồ 19 Nhắn tin với trợ giảng ChatfÖot - 2-55 ©+2+££+EE+EeEterEzrrreerkee 57

Sơ đồ 20 Xem hô sơ cá nhÂin -s:-5c+EEE+EEEEErEEEHHH 38

Sơ đồ 21 Chỉnh sửa hô sơ cá nhân -cc2cSveeettEEktteirrtttttkrrrrrrrrrrree 59

Sơ đồ 22 Đăng kí trở thành Gid SU veeceececcescesssssesessessessesseseesesssssessssssesseesessessssessessees 60

1202001 8N nh 62

Sơ đồ 24 luông Đăng xuấT 5+5 S£+ESE‡EEEEEEEEEEEEEEEEEEEEE121121211111211211 1111 x0 63

Sơ đồ 25 Quản lý người đùngg ¿-2:- + 5k StcEEEEEEEEEEEE121121211211211 1111 re 65

Sơ đồ 26 Quản lý yêu câu trở thành gia st +: 25c SteSe+E‡E+EeEEeEkerkerrrerkees 66

Sơ đồ 27 Quan trị viên quản lý lóp học, yêu câu dạy học -z s+cs+cse: ó8

Sơ đồ 28 Sơ đổ MOP - 52-5 StEEEE E21 115 121111121121 1101121111111 1c 75

VI

Sơ đồ 29 Sơ đồ ludng dữ liệu ( Data F ÏOW)) - - 2-52 £©teS++EE+E£+EeEEeEeEerzrerreei 76

Sor 46 )/02)817.1 N8Nnn0nnnnn 103

Sơ đồ 32 Quản trị viên đổi mật khiẩ - 5-5 SE EEE‡EEEEEEEEEEerkerkerkerkerrree 106

Sơ đồ 34 Quản trị viên xem thông tin tong qMAH -2-52-©5c©c5c£cc+czrsreered 108

vũ

DANH MUC TU VIET TAT

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

JS Javascript

DOM Document Object Model

JSX Javascript XML

SPA Single Page Application

MVC Model View Controller

RN — React Native |

UI User Interface

viii

TOM TAT KHÓA LUẬN

Đề tài "Xây Dựng Ứng Dụng Quản Lý Gia Sư Tích Hợp Trợ Giảng AIChatbot" (EduMentor) nhân mạnh vào việc phát triển một ứng dụng hiện đại và tiệních cho quản lý và hỗ trợ giảng dạy trong lĩnh vực giáo dục Ứng dụng EduMentorđược xây dựng với mục đích tối ưu hóa quá trình tìm kiếm gia sư, quản lý thông tin

học viên và gia sư, cũng như cung cấp một hệ thống trợ giảng thông minh dựa trêncông nghệ Chatbot AI.

Ứng dụng EduMentor giúp người dùng dễ dàng tìm kiếm gia sư phù hợp vớinhu cầu học tập, với khả năng lọc và đánh giá gia sư theo các tiêu chí quan trọng Hệ

thống sẽ chọn lọc và đưa ra các lựa chọn tối ưu nhất cho việc tìm kiếm gia sư của học

viên.

Đặc biệt, hệ thống tích hợp trợ giảng AI chatbot mang lại trải nghiệm học tậptốt hơn Chatbot sử dụng trí tuệ nhân tạo dé hiểu và phản hồi trực tiếp với học viên,

giúp giải đáp thắc mắc, cung cấp tài liệu học và hỗ trợ trong quá trình học Điều này

giúp tăng cường sự tương tác và hiệu suất học tập, đồng thời nâng cao chất lượng

dịch vụ gia sư.

Với sự kết hợp giữa quản lý thông tin linh hoạt và công nghệ trí tuệ nhân tạo,

đề tài này hứa hẹn mang lại một giải pháp toàn diện và hiệu quả cho việc quản lý và

hỗ trợ giảng dạy trong lĩnh vực gia sư.

Khóa luận bao gồm 5 chương và phụ lục với các nội dung chính sau:

Chương 1: Tổng quan đề tài

Chương 2: Cơ sở lý thuyết và công nghệ sử dụng

Chương 3: Phân tích thiết kế hệ thống

Chương 4: Phát triển ứng dụng

Chương 5: Kết luận và hướng phát triển

CHUONG 1: TONG QUAN DE TÀI

1.1 M6 ta bai toan

Với sự phát triển nhanh chóng của công nghệ va nhu cầu học tập ngày càng

tăng, việc xây dựng một ứng dụng quản lý gia sư tích hợp trợ giảng AI chatbot

-EduMentor trở thành một nhiệm vụ quan trọng Ứng dụng này nhằm giúp học sinhtìm kiếm và kết nối với gia sư một cách thuận tiện và hiệu quả, đồng thời mang đến

trợ giúp thông qua trợ giảng AI chatbot.

Với ứng dụng này, học sinh có thể đăng ký và tạo tài khoản cá nhân Họ có

thé tìm kiếm gia sư dựa trên nhiều tiêu chí như môn học và trình độ thông qua trang

cá nhân của gia sư với những thông tin chỉ tiết về kinh nghiệm, trình độ học vấn và

phản hồi từ các học sinh trước đó Học sinh cũng có thể sử dụng trợ giảng AI chatbot

dé hỗ trợ trong việc học tập, Chatbot sẽ có khả năng trò chuyện và hiểu ngôn ngữ tự

nhiên đê trả lời các câu hỏi và cung câp thông tin liên quan.

Đối với gia sư, ứng dụng EduMentor cần được gia sư cung cấp một số thông

tin liên quan đến kĩ năng và trình độ học van dé đảm bảo chất lượng dạy hoc Gia sư

sẽ xử lý yêu cầu và tìm các lớp được tạo bởi học viên thông qua các thông tin nhưmôn học, giá cả,

Ứng dụng EduMentor quản lý gia sư tích hợp trợ giảng AI chatbot cũng cung

cấp tính năng đánh giá và phản hồi từ học sinh sau khi học với gia sư Điều này giúp

cải thiện chât lượng dịch vụ và mang lại lợi ích cho cả học sinh và gia sư.

Tóm lại, ứng dụng quản lý gia sư tích hợp trợ giảng AI chatbot sẽ tạo ra một

môi trường học tập tốt hơn, giúp học sinh tìm kiếm và kết nối với gia sư một cách

thuận tiện và hiệu quả Đồng thời, nó cung cấp trợ giúp thông qua trợ giảng AI chatbot

làm tăng tính tương tác và tiện ích của ứng dụng.

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

Mục tiêu của đê tai là xây dựng ứng dụng nhăm cung cap một nên tảng toàn diện và tiện ích cho việc quản ly gia sư và tương tác giữa học sinh và gia sư Sau đây

là những mục tiêu chính của đê tải này:

- Tao ra một hệ thống quan lý gia sư hiệu qua: Ứng dung sẽ cung cấp một

giao diện dễ sử dụng và tích hợp các tính năng quản lý thông tin cá nhân, lớp

học và nhận thông báo về yêu cầu mới từ học sinh Mục tiêu là giúp gia sư dễ

dàng quản lý thông tin và lịch trình của mình, từ đó tăng cường khả năng tìm

kiếm và kết nối với học sinh phù hợp

- _ Tối ưu hóa quá trình tìm kiếm gia sư cho học sinh: Học sinh sẽ có thé tìm

kiếm và lựa chọn gia sư dựa trên các tiêu chí như môn học, địa điểm và trình

độ Ứng dụng sẽ cung cấp thông tin chỉ tiết về gia sư và đánh giá từ những

người khác Mục tiêu là giúp học sinh tìm kiếm và kết nối với gia sư phù hợp

với nhu cầu học tập của họ một cách nhanh chóng và thuận tiện

- Cung cấp trợ giúp thông qua trợ giảng AI chatbot: Trợ giảng AI chatbot

sẽ được tích hợp trong ứng dụng, giúp hỗ trợ học sinh và gia sư trong việc trò

chuyện, tìm kiếm thông tin và đặt câu hỏi liên quan đến việc giảng dạy Mục

tiêu là cung cấp một trợ giúp nhanh chóng, chính xác và tương tác cho người

dùng, từ đó tăng cường trải nghiệm học tập và giảng dạy.

- _ Đảm bảo chất lượng dịch vu: Ứng dụng sẽ có tính năng đánh giá và phản hồi

từ học sinh sau quá trình học với gia sư Mục tiêu là thu thập phản hồi từ người

dùng để cải thiện chất lượng dịch vụ va đảm bảo sự hai lòng của học sinh va

gia su.

1.3 Đối tượng va phạm vi nghiên cứu

1.3.1 Đối tượng nghiên cứu

- Người học: Người sử dụng chính của ứng dung, là những người đang tham gia

vào quá trình học tập và muốn tìm kiếm gia sư phù hợp

- _ Người day: Người cung cấp dịch vụ giảng dạy hoặc hỗ trợ học tập Đối tượng

này sẽ sử dụng ứng dung dé tạo thông tin cá nhân, cung cấp thông tin về kỹ

năng và khả năng giảng dạy của mình.

1.3.2 Phạm vi nghiên cứu đề tài

- _ Nghiên cứu và tích hợp Chatbot AI được phát triển bởi OpenAI vào ứng dụng

dé hỗ trợ học tập và giảng day Chatbot sẽ có khả năng trả lời câu hỏi, giải đáp

thắc mắc và cung cấp thông tin hữu ích liên quan đến học tập Mục tiêu của

chúng ta là đảm bảo tính tương tác tự nhiên và hiệu quả của Chatbot trong việc

giao tiếp với người dùng

- Xây dựng hệ thống bằng cách sử dụng ngôn ngữ lập trình Typescript va

framework ExpressJS Cơ sở dữ liệu sẽ được lưu trữ trong MongoDB, giúp

quản lý và truy xuất dữ liệu một cách hiệu quả

- Dé đáp ứng nhu cầu sử dụng trên các nền tảng di động, tác giả sẽ xây dựng

ứng dụng trên cả nền tảng Android và iOS sử dụng ngôn ngữ lập trìnhTypescript và framework React Native Điều này giúp chúng ta phát triển mộtứng dụng đa nên tảng, có khả năng chạy trên cả hai hệ điều hành phổ biến

nhất

- _ Cuối cùng, tác giả sẽ xây dựng trang admin dé quản ly và kiểm soát dir liệu

người dùng Trang admin sẽ được xây dựng băng ngôn ngữ lập trình Javascript

va framework ReactJS, giúp quan ly dữ liệu một cách hiệu quả và đơn giản.

1.4 Phương pháp thực hiện

- Thu thập dữ liệu người dùng với các thông tin: môn học, giảng viên,

- _ Thiết kế phần mềm tìm kiếm gia sư dành cho học viên Sử dung framework

React Native để xây dựng ứng trên các nền tảng Android và IOS

- Sử dụng ExpressJS để xây dựng hệ thống Backend với cơ sở dữ liệu

MongoDB.

- Su dung Api của OpenAI dé tich hợp chatbot hỗ trợ việc học tap

- Su dụng các dich vụ Cloud dé lưu trữ va hosting server

1.5 Môi trường phát triển

- _ Xây dựng ứng dụng bang ngôn ngữ lập trình JavaScript

- Framework: React, React Native, ExpressJS

- Luu trữ các dữ liệu như hình ảnh, file: Firebase

- Cloud Database: MongoDB Atlas

- Hosting Server: Render với tên miền https://tutor-api.onrender.com

- _ Công cụ quản lý mã nguồn: Github

CHƯƠNG 2: CƠ SỞ LÝ THUYET VÀ CÔNG NGHỆ SỬ DỤNG

2.1 Cơ sở lý thuyết

2.1.1 Ngôn ngữ Javascript, Typescript

2.1.1.1 Định nghĩa

- JavaScript là một ngôn ngữ lập trình được sử dụng dé tao trang web tương tác

Nó giúp cải thiện trải nghiệm người dùng bằng cách thêm các chức năng động

vào trang web Ban đầu chỉ hoạt động trong trình duyệt web, nhưng sau đó đã

mở rộng sử dụng để phát triển cả ở phía máy chủ JavaScript giúp thực hiện

các chức năng như thay đổi nội dung trang, xử lý sự kiện người dùng và tạo

hiệu ứng động trên trang web.

- TypeScript là một ngôn ngữ lập trình cải tiễn JavaScript bằng cách thêm các

kiêu loại vào cú pháp TypeScript thêm cú pháp bổ sung vào JavaScript dé cáccông cụ soạn thảo mã có thé sớm phát hiện những lỗi viết mã Đồng thời, mã

TypeScript chuyển đôi sang JavaScript và cung cấp tat cả các lợi ích tương tựnhư ở JavaScript TypeScript cũng chạy trong các ứng dung va với các khung

và thư viện JavaScript.

== )| The browser cant

lôi] run TypeScript

Hình 2 1 Mới liên hệ giữa typescript và javascript

2.1.1.2 Phương thức hoạt động

Trình phân tích (Parser):

Trình phân tích trong JS Engine sẽ tiếp nhận các dòng lệnh JavaScript đầu

tiên.

Công việc của trình phân tích là kiểm tra lỗi cú pháp từng dòng một Khi phát

hiện lỗi, trình phân tích sẽ dừng lại và thông báo lỗi ở dòng tương ứng.

AST: Trình phân tích tạo ra cấu trúc đữ liệu tên là AST (Abstract Syntax Tree

— Cây cú pháp trừu tượng) sau khi nó đảm bảo tat cả dòng lệnh không còn lỗi

Chuyên đôi thành mã máy: JavaScript Engine tiễn hành chuyền đổi các dòng

lệnh JavaScript thành mã máy (là ngôn ngữ máy tính có thê hiểu) sau khi Trình

phân tích hoàn thành AST.

Thực thi: JavaScript Engine gửi mã máy đến hệ thống tương ứng đề thực thi ở

giai đoạn cuôi cùng.

ileal avaScript Engin‹

9919191 91101919

- Chat GPT là một chương trình trí tuệ nhân tao tao ra đối thoại Được tạo ra

bởi OpenAI, chatbot có khả năng cao này sử dụng các thuật toán học máy dé

xử lý và phân tích lượng lớn dữ liệu dé tạo ra câu trả lời cho các câu hỏi của

người dùng Chương trình xử lý ngôn ngữ này có khả năng hiểu được ngôn

ngữ của con người khi nó được nói hoặc viết, cho phép nó hiểu thông tin mà

nó được cung cấp và cách xử lý nó Một người học có thé gõ một câu hỏi, và

Chat GPT sẽ trả về một câu trả lời dé hiéu - trong nhiều định dạng khác nhau

với các yêu cầu cụ thê

2.1.2.2 Cách hoạt động cua Chat GPT

Chat GPT được hoạt động theo những cơ chế sau [2]:

- Chat GPT sử dụng một bộ dữ liệu lớn chứa văn ban dé học về ngôn ngữ, ngữ

pháp, cau trúc và ý nghĩa của từ và câu Bằng cách này, nó có khả năng hiểu

ngữ cảnh và ý định của câu hỏi từ người dùng và tạo ra các câu trả lời phù hợp.

- Qua trình hoc của Chat GPT dựa trên việc xem xét và phân tích lượng lớn

văn bản từ đa dạng nguồn Nó học cách từ ngữ được sử dụng trong các bối

cảnh khác nhau, cách các câu được hình thành, và cách các từ được sắp xêp

để tạo nên ý nghĩa Điều này giúp nó xây dựng một mô hình ngôn ngữ đachiêu, từ đó có thê hiêu và tạo ra các câu trả lời một cách chính xác và tự

Alabeler demonstrates the desired output behavior.

This data is used to fine-tune GPT-3.5 with supervised learning.

Anew prompt is sampled from the dataset.

The PPO model is initialized from the supervised policy.

The policy generates

an output,

The reward model calculates a reward for the output.

The reward is used

to update the policy using PPO.

Hình 2 4 Cách hoạt động của ChatGPT

Tao Phan Ung Tự Nhiên: Chat GPT có kha năng tao ra các câu trả lời tự

nhiên và giông như con người, giúp tương tác người dùng một cách chan

thực.

Đa Dạng Công Việc: Có thé giải quyết nhiều công việc khác nhau như trả lời

câu hỏi, giải phương trình toán, dịch ngôn ngữ, sửa mã lỗi, viết câu chuyện

hoặc thơ.

- Toc Độ và Hiệu Quả: Tạo ra phản ứng và câu trả lời nhanh chóng, giúp tiết

kiệm thời gian so với việc nghiên cứu và viết thủ công

- Kha Năng Học Từ Dữ Liệu Lớn: Học từ một lượng lớn di liệu văn bản, giúp

nó hiéu vê ngôn ngữ và câu trúc câu một cách tự nhiên.

b Hạn chê

- Han Chế Hiểu Biết: Dù có khả năng tạo ra câu trả lời tự nhiên, nhưng Chat

GPT có thê không hiểu sâu về một chủ dé cụ thé và có thé tạo ra thông tin

không chính xác.

- _ Giới Hạn Thời Gian: Các cau trả lời được tạo ra nhanh chóng, nhưng đôi khi

có thê thiếu sự chỉ tiết và độ sâu so với việc nghiên cứu kỹ lưỡng

- Phu Thuộc vào Dữ Liệu Hudn Luyện: Chat GPT phản anh thông tin dựa trên

dữ liệu mà nó được huấn luyện, vì vậy nếu đữ liệu có giới hạn hoặc khôngchính xác, câu trả lời có thể bị ảnh hưởng

- Kha Năng Tao Ra Thông Tin Ao: Do khả năng sinh câu trả lời mà không cần

hiểu sự logic đằng sau, Chat GPT có thê tạo ra thông tin ảo hoặc không có cơ

sở thực tế

- Kha Năng Tạo Ra Nội Dung Thiếu Đạo Đức: Không có khả năng phân biệt

đạo đức, Chat GPT có thể tạo ra nội dung không phù hợp hoặc không đạo

đức nêu được yêu câu một cách không đảm bảo.

Những tính năng và hạn chế nay phản ánh cả những tiến bộ và thách thức trong lĩnh

vực của trí tuệ nhân tạo và xử lý ngôn ngữ tự nhiên.

2.1.3 Cơ sở dữ liệu MongoDB

2.1.3.1 Định nghĩa

- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, thuộc loại NoSQL,

và được sử dụng rộng rãi Nó là hệ quản tri cơ sở đữ liệu hướng tài liệu, lưu trữ dtr

liệu trong các tài liệu JSON thay vì trong bảng như các hệ quan tri cơ sở dữ liệu quan

hệ Trong MongoDB, chúng ta sử dụng khái niệm "collection" thay vì "bang" như

trong hệ quản trị cơ sở dữ liệu quan hệ Mỗi "document" trong MongoDB tương

10

đương với một "row" trong hệ quản tri cơ sở dữ liệu quan hệ Điều đặc biệt là các

collection trong MongoDB có cấu trúc linh hoạt, cho phép lưu trữ dữ liệu mà không

cần tuân theo một cấu trúc cụ thé Thông tin liên quan thường được lưu trữ cùng nhau

dé hỗ trợ truy vấn nhanh bang ngôn ngữ truy van của MongoDB [7]

2.1.3.2 Tại sao lại sử dụng MongoDB

- MongoDB: là cơ sở dit liệu phi quan hệ vì vậy dữ liệu của nó được lưu trữ dưới

dang document Với dạng lưu trữ nay giúp việc lưu trữ dtr liệu linh hoạt hon

và phù hợp hơn với các yêu cầu phát triển đữ liệu trong thực tế

- Truy vấn đặc biệt: MongoDB hỗ trợ bạn tìm kiếm dữ liệu theo trường, truy

vấn theo miền, hoặc tìm kiếm các biểu thức thông thường Các truy vấn đượcthực hiện dé có thé trả về các trường cụ thé trong document

- _ Đánh chỉ mục (Index): Đánh chỉ mục đề giúp việc tìm kiếm nhanh chóng hơn

và trong MongoDB có thê đánh chỉ mục cho bat kỳ trường nao [12]

- Ban sao (Replication): MongoDB luôn san sàng cung cấp bộ các bản sao Một

bộ bản sao bao gồm hai hoặc nhiều thê hiện của MongoDB Mỗi bộ bản sao

có thê đóng vai trò là bản sao chính (bản sao thứ cấp) hoặc bản sao phụ (bản

sao sơ cấp) bất cứ lúc nào Bản sao thứ cấp là server chính tương tác với client

dé thực hiện việc doc/ghi Ban sao sơ cấp một bản sao di liệu của ban sao thứ

cấp Khi bản sao thứ cấp thất bại, bản sao thứ cấp tự động được chuyên qua

bản sao sơ cấp đề chuyền thành thứ cấp sau đó nó trở thành server thứ cấp

- Cdn bằng tải: MongoDB sử dụng khái niệm sharding dé chia cắt dữ liệu thành

nhiều thé hiện của MongoDB MongoDB có thể chạy trên nhiều server cân

bang tải, và hoặc sao chép dữ liệu dé hệ thống luôn hoạt động ngay cả khi có

lỗi phần cứng

11

2.1.3.3 Cách hoạt động của MongoDB

MongoDB hoạt động dưới một tiễn trình ngầm service, luôn mở một công(Công mặc định là 27017) để lắng nghe các yêu cầu truy vấn, thao tác từ các

ứng dụng gửi vào sau đó mới tiến hành xử lý [7]

Mỗi một bản ghi của MongoDB được tự động gan thêm một field có tên “_¡d”thuộc kiểu dữ liệu Objectld mà nó quy định dé xác định được tính duy nhấtcủa bản ghi này so với bản ghi khác, cũng như phục vụ các thao tác tìm kiếm

và truy vấn thông tin về sau Trường dit liệu “ id” luôn được tự động đánh

index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất [12]

Mỗi khi có một truy van di liệu, ban ghi được cache (ghi đệm) lên bộ nhớRam, dé phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc

từ 6 cứng [7]

Khi có yêu cầu thêm/sửa/xóa bản ghi, để đảm bảo hiệu suất của ứng dụng mặc

định MongoDB sẽ chưa cập nhật xuống 6 cứng ngay, mà sau 60 giây

MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đôi từ RAM xuống 6 cứng

[7]

2.1.3.4 Cac loại dit liệu trong MongoDB

Nếu như mô hình dé liệu trong hệ quản tri cơ sở dữ liệu quan là các bảng quan hệ thi

trong hệ quản trị cơ sở dữ liệu phi quan hệ lại được lưu trữ dưới nhiều dạng khác

nhau, dưới đây là các dạng lưu trữ:

Key - Value: dit liệu lưu trữ kiêu này chúng ta sẽ dựa vào key dé lay value

Dữ liệu dạng này có tốc độ truy vấn nhanh và đặc biệt Key - Value được sử

dụng để làm cache cho đữ liệu

Document: Mỗi object được lưu trữ trong cơ sở đữ liệu dưới dạng document.

Dữ liệu sẽ được lưu trữ dưới dạng BSON/JSON/XML dưới database Với dangnày chúng ta có thé dé dàng thêm, sửa, xóa trường một cach linh hoạt vì vay

nó khac phục được câu trúc cứng nhac của Schema.

12

- Column - Family: Dữ liệu được lưu trữ dạng cột khác với SQL là dạng hàng,

mỗi hàng có key/id riêng Đặc biệt mỗi hàng trong một bảng lại có số lượngcột khác nhau Với dạng lưu trữ này sẽ thích hợp cho việc ghi một số lượng

lớn đữ liệu.

- Graph: Đây là kiểu cơ sở dit liệu đồ thị, dữ liệu sẽ được lưu trữ theo từng node

Node chính là các thực thé hoặc là đối tượng Properties là các thuộc tính liên

quan đến từng Node, nó sẽ được đặt tên sao cho có quan hệ gần gũi với Node

nhất Edges là cạnh nối các Node, nó biểu thị cho quan hệ gitra các Node Với

dạng lưu trữ này thường được sử dụng trong các mạng noron, mạng xã hội

Ưu điểm của nó là sử dụng các thuật toán duyệt node đề tăng tốc độ truy vấn

(Nguồn tham khảo: https://www.mongodb.com/databases/types)

2.2 Công nghệ sử dụng

2.2.1 Phát triển web với framework ReactJS

2.2.1.1 Định nghĩa

- React (ReactJS hay React.js) là 1 thư viện JavaScript mã nguồn mở được phát

triển bởi đội ngũ kỹ sư đến từ Facebook Nguyên lý xây dựng của React dựa

trên components (component-based approach), có thể tái sử dụng và phù hợp

với ứng dung | trang SPA React giúp lập trình viên xây dựng giao diện người

dùng dựa trên JSX (môt cú pháp mở rộng của JavaScript), tạo ra các DOM ảo

(virtual DOM) để tối ưu việc render 1 trang web

- Hiện tại sau hơn nhiều năm phát triển thi React vẫn đang chiếm vị trí số 1

trong các thư viện Front-end hiện tại.

Downloads in past 5 Years ~

13

Hình 2 5 Thống kê số lượng sử dụng của các framework js

(Nguồn: hffps://dev.to/hb/react-vs-vue-vs-angular-vs-svelte-Ifdm )2.2.1.2 Các thành phan và cách hoạt động của ReactJS

a JSX

- Trang web cơ bản dựa chủ yếu vào các tài liệu HTML Khi bạn truy cập trang

web từ trình duyệt, nó sẽ đọc các tài liệu HTML này dé hiển thị nội dung trên

màn hình của máy tính, tablet, hoặc điện thoại Trong quá trình này, trình duyệt

tạo ra một cái gọi là Document Object Model (DOM) - một cau trúc cây biểu

diễn cách website được hién thi

- Lap trình viên có khả năng thêm nội dung động vào dự án của họ bằng cách

sử dụng ngôn ngữ JavaScript dé thay đôi cây DOM JSX, hay JavaScriptextension, là một phần mở rộng của React giúp chúng ta dé dang thay đổi câyDOM bằng cách viết mã giống như HTML Với sự hỗ trợ đầy đủ từ trình duyệt

cua ReactJS trên mọi trình duyệt web hiện dai, bạn có thé thoải mái sử dụng

JSX trên bất kỳ trình duyệt nào bạn đang làm việc

Document

R nent

Element: Element:

<head> <body>

Element: Attribute: Element: Element:

<title> “href” <a> <h1>

Text: Text: Text:

“My tithe” “My link” “My header”

Hinh 2 6 Cach Element duoc thé hién trong DOM

(Nguén: https://www.w3schools.com/js/js_htmldom.asp )

b Virtual DOM

- Néu không sử dung ReactJS (và JSX), website sẽ phải dựa vào HTML dé cập

nhật cây DOM, làm cho trang phải tai lai mỗi khi có sự thay đổi Đối với các

14

trang web đơn giản, tĩnh, điều này có thể chấp nhận được Tuy nhiên, đối với

các trang web lớn, đặc biệt là có nhiều tương tác người dùng, cách làm này có

thé gây ảnh hưởng nghiêm trọng đến hiệu suất do việc tải lại toàn bộ cây DOM

- Khi sử dụng JSX và ReactJS, Virtual DOM sẽ được tạo ra Điều này là một

bản sao của DOM thực và giúp tìm kiếm những phần cần cập nhật một cáchhiệu quả Khi có sự kiện như thêm bình luận, ReactJS chỉ cập nhật những phầncan thiết trong Virtual DOM, giảm tải và tiết kiệm tài nguyên, cải thiện hiệu

suất, đặc biệt là trên các trang web lớn và phức tạp

Virtual DOM Real DOM

- ThéJSX có tên thé, con và thuộc tính Dau ngoặc kép trong các thuộc tính JSX

đại diện cho chuỗi Yếu tố này tương tự như JavaScript Ngoài ra, các giá trị

sô và biêu thức phải được việt bên trong dâu ngoặc nhọn.

- Hau hết các phần của React được viết bang cách sử dụng JSX (JavaScript

XML) chứ không phải JavaScript tiêu chuẩn (JS)

15

2.2.1.3 Uu điểm và nhược điểm của ReactJS

a Ưu điểm

- Pht hợp với Da dạng Thể loại Website: ReactJS hỗ trợ việc khởi tạo website

dễ dàng hơn, cung cấp nhiều công cụ linh hoạt cho nhiều trường hợp sử dụng

- Tdi sử dụng các Component: Khả năng tái sử dụng Component giúp tiết kiệm

thời gian va công sức, đặc biệt hữu ích khi xây dựng các dự án mới.

- Than thiện với SEO: ReactJS có khả năng tương tác tốt với công cụ tìm kiếm,

đặc biệt là Google, giúp cải thiện khả năng SEO của trang web.

- Debug dé dàng: Có các công cụ hỗ trợ debug như Chrome extension, giúp quá

trình phát triển và sửa lỗi diễn ra thuận lợi

- Công cụ phát triển Web hot nhất: ReactJS là một công nghệ phổ biến, có số

lượng tuyển dụng lớn, độ phổ biến cao trên thị trường Việt Nam, làm cho nótrở thành một lựa chọn hấp dẫn cho các nhà phát triển

- Tóm lại, ReactJS mang lại nhiều lợi ích và tiện ích cho quá trình phát triển ứng

dụng web, từ sự linh hoạt trong xây dựng giao diện đến khả năng tái sử dụng

và tích hợp linh hoạt trên nhiều nền tang

e react}s ” @ AngularJS ® VueJS + Thêm lượt so sánh

Việt Nam + 12 tháng qua * Tất cả danh mục + Tìm kiếm trên web

@ iy ant từ tìm kié t lữ ay du r khá TÌM HIẾU THÊM

Hình 2 6 Độ quan tâm cua các framework js

16

b Nhược điểm

Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nó không phải

là một MVC framework như những framework khác Đây chỉ là thư viện của

Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và

Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có

2-way binding hay là Ajax

Tích hop Reactjs vào các framework MVC truyền thống yêu cau can phải cấu

hình lại.

React khá nặng nếu so với các framework khác React có kích thước tươngtương với Angular (Khoảng 35kb so với 39kb cua Angular) Trong khi đó

Angular là một framework hoàn chỉnh

Khó tiếp cận cho người mới học Web2.2.2 Framework phát triển ứng dụng React Native

2.2.2.1 Định nghĩa

React Native là một framework mã nguồn mở được sáng tạo bởi Facebook

Nó được sử dụng dé phát triển ứng dụng đi động Android, iOS, Web va UWP bằngcách cho phép các nhà phát triển sử dụng React cùng với môi trường ứng dụng gốc

17

Welcome to React

Step One

Edit App.js to change this screen and then

Step One come back to see your edits.

Edit App.js to chang

then come back to 4

See Your Changes

Double tap R on your keyboard to reload your

app’s code.

your app's code

, Debug

Press menu button or Shake your device to

Debug open the React Native debug menu.

Press Cmd+D in thả

your device to open]

debug menu Learn More

Read the docs to discover what to do next:

Learn More

Hinh 2 9 Anh minh hoa React Native

2.2.2.2 Các thành phan và cách thức hoạt động

a Các thành phần chính trong React Native

Về cơ bản, React Native có thể được coi là tập các React component, trong đó, mỗi

component sẽ đại điện cho các Native View và Component tương ứng Vì thế, người

dùng có thé viết code giống như React Web nhưng kết quả lại là một ứng dung native

Vi dụ: Một TextInput component trong RN sẽ tương ứng với một native EditText

trong Android và UITextField trong IOS

Tổng quan có 3 thành phần chính từ React Native Platform [10]:

- Native Code/Modules: Hầu hết các native code trong iOS được viết bởi

Objective C hoặc Swift, trong android là Java.

- Javascript virtual machine: là nơi thực thi phần mã code javascript Trong

android/iOS simulator hoặc device, React Native sé dùng các JavaScriptCore,

đây là opensource Javascript engine thường được build cho Webkit Trongtrường hợp iOS, React Native sẽ dùng JavaScriptCore cung cap bo iOS

platform Còn đối với android, React Native sẽ gói kèm JavaScriptCore trong

18

ứng dụng, điều này làm cho size của ứng dụng React Native của android tăng

lên một ít.

- React Native Bridge: là một cầu nỗi C++/Java có trách nhiệm giao tiếp giữa

các native thread va JS thread Một custom protocol được dùng dé trao đồi

message

RN Bridge

(Java/C++)

Hinh 2 10 Hinh anh minh hoa React Native Bridge

b Cach React Native hoat dong

Khi ứng dung React Native được khởi chạy, nó sé sinh ra các threading queues sau

[10]:

- Main Thread: Thread chính được tạo khi ứng dụng khởi chạy, xử lý sự kiện

UI và chạy mã native Nó tương tác với JS thread thông qua React Native

Bridge, nhận va render thông tin từ JS thread Shadow node thread tính toán

layout và trả kết qua về Main thread dé render lên View

- Javascript thread: Thread chạy mã JS, xử ly business logic của ứng dụng Nhận

va gửi thong tin tới Main thread thong qua React Native Bridge.

- Custom Native Modules: Thread tạo ra bởi React Native hoặc custom native

modules dé tối ưu hóa hiệu năng của ứng dung Vi dụ, hiệu ứng của ứng dụng

có thé được xử lý trên một native thread dé giảm tải cho JS thread

19

RENDER NATIVE COMPONENTS MAIN

- Tiét Kiệm Thời Gian va Chi Phi: Viết một lần, chạy được trên cả hai nền tảng

(iOS và Android), giảm thời gian và chi phí phát triển

- Tan Dụng Nguồn Nhân Lực: Sử dụng nguồn nhân lực hiệu quả hơn, vì cùng

một đội ngũ có thê phát triển cho cả hai hệ điều hành

- Tai Sử Dụng Code: Tái sử dụng lên đến 80-90% mã nguồn giúp giảm lượng

code cần duy trì và giảm số lượng lỗi

- _ Cộng Đồng Lớn: Có một cộng đồng người dùng lớn, hỗ trợ và giải quyết van

đề một cách nhanh chóng thông qua các diễn đàn

- Tinh Ôn Định và Tối Ưu: Phát triển bởi Facebook, React Native có hiệu suất

6n định và giúp đơn giản hóa xử ly dit liệu

Nhược điểm:

- _ Yêu Cau Native Code: Đôi khi cần sử dụng mã nguồn native khi cần truy cập

các API cụ thé của hệ điều hành

- _ Hiệu Năng Kém Hon Native App: Hiệu suất có thé kém hơn so với ứng dụng

native trong một sé truong hop dac biét

20

2.2.2.4 So sánh với Flutter

Giống nhau:

- Phát Triển Bởi Các Ong Léon Trong Lĩnh Vực Công Nghệ: Cả Flutter và React

Native được phát triển bởi các công ty lớn trong ngành công nghiệp công nghệ

(Google cho Flutter, Facebook cho React Native), đảm bảo sự hỗ trợ và phát

triển liên tục

- Miễn Phí và Mã Nguôn Mở: Cả hai đều miễn phí và có mã nguồn mở, cho

phép người dùng truy cập và tùy chỉnh mã nguồn theo nhu cầu cụ thể

- Trải Nghiệm Người Dùng Tốt: Cả Flutter va React Native đều chú trọng vào

việc cung cấp trải nghiệm người dùng tốt, đóng góp vào sự phát triển tích cực

của cả hai framework.

- Hot Reload: Cả hai đều hỗ trợ tính năng Hot Reload, cho phép nhìn thấy sự

thay đổi trong giao diện ngay lập tức mà không cần phải load lại ứng dụng,giúp tăng tốc quá trình phát triên

- Chia Sẻ Codebase: Ca Flutter va React Native đều hỗ trợ chia sẻ codebase

giữa các nền tang, giúp tôi ưu hóa quá trình phat triển va giảm chi phi

21

Tuy nhiên, nếu đã từng

làm việc với các ngôn ngữ

hướng đối tượng thì việc

sử dụng ngôn ngữ này sẽ

thuận lợi hơn nhiều

Flutter nỗi bật hơn React

Native bởi công cụ C++

được sử dụng trong

framework Flutter và thư

viện đồ họa Skia Quátrình viết mã nhanh hơn

JavaScript — ngôn ngữ số

1 đối với 1 số lập trìnhviên Gần 70% chuyên

gia đang sử dụng ngôn

ngữ này cho biết việcchuyên đổi sang React

Native tương đối dé

dàng.

React Native sử dụng

một cầu nói Javascript dé

kết nối với ngôn ngữ

native Với các phươngthức bất đồng bộ thì việcthông qua cây cầu sẽ

khiến cho việc render trở

nên chậm chạp hơn.

các thành phan render tích | thư viện của bên thứ 3.

hợp có sẵn, điều hướng,

các công cụ đê kiêm tra,

Flutter không được nhiều | React Native có thể chọnlựa chon dé trở thành môi | hầu hết mọi IDE

trường phát triển do công

nghệ còn mới Flutter

được hỗ trợ bởi Visual

Studio Code, IntelliJ và Android Studio.

Phong pht Không hoạt động dựa

trên hướng đó, phần tài

liệu tập trung vào việc mô

tả các quy trình phức tạp

và hàm ý tất cả những

người đọc nó đều đã quen

với JavaScrIpt.

Bảng I Khác nhau cua Flutter va React Native

2.2.3 Xây dựng hệ thống backend với ExpressJS

2.2.3.1 Định nghĩa

- ExpressJS là một khung ứng dụng web back end dé xây dựng các API RESTful

với Node.js, được phát hành dưới dạng phần mềm mã nguồn mở và miễn phí

theo giấy phép MIT Nó được thiết kế dé xây dựng các ứng dụng web và API

Nó đã được gọi là khung máy chủ tiêu chuẩn trên thực tế cho Node.js

2.2.3.2 Các tính năng trong ExpressJS

23

Mean Stack e © Middleware

Google V8 Template

Engine Support €2 © G (a) Engine Support

Hinh 2 12 Cac tinh nang cua Express JS

Cac tinh nang của express js

Routing: ExpressJS cung cấp hệ thống định tuyến mạnh mẽ giúp quan lý cácyêu cầu HTTP đến các địa chỉ URL cụ thể và xác định xử lý tương ứng

Middleware: là một cách mà Express xử lý các yêu cầu trước khi chúng đến

đích Điều này giúp thực hiện các nhiệm vụ như xác thực, xử lý lỗi, logging

và nhiêu công việc khác một cách modun hóa và dê dàng tái sử dụng.

HTTP Request

-+>

HTTP Response

Matched Roule.

Templating Engine: Express hỗ trợ nhiều động cơ template như EJS, Pug

(trước đây là Jade), Handlebars, cho phép bạn tạo các trang web động dễ dàng.

Error Handling: Express có khả năng xử lý lỗi thông qua middleware, giúp

quản lý và xử lý lỗi một cách dễ dàng.

24

- RESTful API: Express thích hợp cho việc xây dựng RESTful APIs, với kha

năng đơn giản hóa quá trình xây dựng và quản lý các API.

- Database Integration: Dé dang tích hợp với các cơ sở dữ liệu như MongoDB,

MySQL, PostgreSQL thông qua các thư viện va middleware như Mongoose,

2.2.3.3 Ưu và nhược điểm của ExpressJS

Hỗ trợ Middleware: Cung cấp hệ thống middleware mạnh mẽ, giúp thực hiện

các chức năng như xác thực, ghi log, nén dữ liệu và xử lý lỗi một cách linh

hoạt va dé dàng.

Hiệu suất cao: Xây dựng trên Node.js, nền tảng có hiệu suất cao, cho phép xử

lý nhanh chóng các yêu cầu web đồng thời và có khả năng mở rộng tốt

Nhược điềm:

Thiếu Cấu Trúc: Do ExpressJS không áp đặt một cấu trúc nghiêm ngặt, việc

tổ chức dự án và quản lý mã nguồn có thé trở nên khó khăn, đặc biệt khi ứngdụng phát triển lớn và phức tạp

Khả Năng Mở Rộng: Quản lý mã nguồn và mở rộng có thể trở nên khó khănkhi ứng dụng phát triển lớn và phức tạp Yêu cầu sự kiểm soát cân thận đểtránh sự phức tạp và rối rắm trong việc quản lý các module và tương tác giữa

chúng.

Cộng Đồng Hỗ Trợ: Mặc dù có một cộng đồng lớn và tài liệu đầy đủ, nhưng

không đạt được mức độ hỗ trợ như các framework web khác như Angular hoặc