Khóa luận tốt nghiệp Công nghệ thông tin: Xây dựng ứng dụng quản lý quy trình thực hiện khóa luận tốt nghiệp tại khoa Công nghệ thông tin trường đại học Nông Lâm TP.HCM

TÊN DE TÀI: Xây dựng ứng dụng quản lý quy trình thực hiện khóa luận tốt nghiệp tại khoa Công nghệ thông tin trường đại học Nông Lâm TP.HCM Il.. TÓM TẮTHiện tại, việc quản lý quy trình và

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG LAM TPHCM

LUẬN VĂN TÓT NGHIỆP

Xây dựng ứng dụng quản lý quy trình thực hiện khóa

luận tốt nghiệp tại khoa Công nghệ thông tin trường

Đại học Nông Lâm TP.HCM

Ngành : Công nghệ thông tin Niên khóa : 2019-2023

Lớp : DHI9DT

TP HO CHÍ MINH - Thang 8 năm 2023

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRUONG ĐẠI HỌC NÔNG LAM TPHCM

KHOA CÔNG NGHỆ THÔNG TIN

LUẬN VĂN TÓT NGHIỆP

Xây dựng ứng dụng quản lý quy trình thực hiện khóa

luận tốt nghiệp tại khoa Công nghệ thông tin trường

Đại học Nông Lâm TP.HCM

Giảng viên hướng dẫn Sinh viên thực hiện

Nguyễn Văn Dũ Nguyễn Trần Anh

Nguyễn Minh Châu

Xây dựng ứng dụng quản lý quy trình thực hiện khoá Năm luận tốt nghiệp tại khoa CNTT trường Đại học Nông 2023

Lâm TP.HCM

CONG TRÌNH HOÀN TAT TẠI TRƯỜNG ĐẠI HỌC

NÔNG LÂM TP HCM

Cán bộ hướng dẫn: TS Nguyễn Văn Dũ

Can bộ phản biện: ThS Khương Hải Châu

Luận van cử nhân được bảo vệ tại HỘI DONG CHAM KHÓA LUẬN TOT

NGHIỆP TRƯỜNG ĐẠI HỌC NONG LAM TP HCM ngày tháng năm

Nhận xét của giảng viên hướng dẫn:

Nhân xét của giảng viên phản biện:

BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRUONG DH NONG LAM TP HCM Độc Lập — Tự do — Hanh Phúc

NHIỆM VỤ LUẬN VĂN CỬ NHÂN

Họ tên sinh viên: Nguyễn Trần Anh Họ tên sinh viên: Nguyễn Minh Châu

Giới tính: Nam Giới tính: Nam

Ngày tháng năm sinh: 08/11/2001 Ngày tháng năm sinh: 14/06/2001

Nơi sinh: Bình Thuận Nơi sinh: Bình Định

Chuyên ngành: Công nghệ thông tin Chuyên ngành: Công nghệ thông tin

Ngành: Công nghệ thông tin Ngành: Công nghệ thông tin

I TÊN DE TÀI: Xây dựng ứng dụng quản lý quy trình thực hiện khóa luận tốt

nghiệp tại khoa Công nghệ thông tin trường đại học Nông Lâm TP.HCM

Il NHIEM VU VA NOI DUNG

- Nhiém vu: Xây dựng ứng dụng quan lý quy trình thực hiện khóa luận tốt

nghiệp

- Noi dung nghiên cứu:

e _ Nghiên cứu quy trình thực hiện khóa luận tốt nghiệp

e Tìm hiểu các công nghệ sử dung: React, Spring Boot, MySQL

e _ Nghiên cứu về thuật toán doc2vec trong thư viện deeplearning4j dé ápdụng vào bai toán so sánh độ tương đồng giữa tên đề tài của các đề cươngchỉ tiết khóa luận tốt nghiệp.

Ill NGÀY GIAO NHIỆM VỤ: 01/02/2023

IV NGÀY HOÀN THÀNH NHIỆM VỤ: 01/08/2023

Vv HỌ VÀ TÊN CÁN BỘ HƯỚNG DAN: TS Nguyễn Văn Dũ

Ngày / / Ngày / / Ngày / /

CÁN BỘ HƯỚNG DẪN ˆ CÁN BỘ PHAN BIEN KHOA CNTT

(Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên)

LỜI CẢM ƠNChúng em xin gửi lời cảm ơn chân thành đến Thây, cô của khoa Công nghệ

thông tin trường Đại học Nông Lâm TP Ho Chí Minh với tam lòng tràn day biết ơn

và sự tri ân vì những kiến thức quý báu và sự tận tâm, nhiệt huyết mà thay cô đã truyềnđạt cho chúng em trong suốt những năm đại học

Đặc biệt, chúng em xin chân thành cảm ơn Thay Nguyễn Văn Dũ trong suốtquá trình làm khóa luận tốt nghiệp, chúng em đã có cơ hội được học hỏi và rèn luyệnnhững kiến thức chuyên môn cũng như kỹ năng nghiên cứu từ Thay Những bài hướngdan, lời giải đáp thắc mắc của Thay đã chap cánh cho chúng em bay cao trong conđường nghiên cứu và học tập Sự kiên nhẫn, tận tâm của Thay luôn là nguôn động lực

giúp chúng em vượt qua khó khăn, hoàn thiện dé tài một cách tốt nhất Cũng xin cam

ơn tat cả những bạn bè đã chia sẻ kiến thức và tận tình giúp đỡ chúng tôi hoàn thành

đề tài này

Tuy nhiên, kiến thức lúc nào cũng là vô tận và với khả năng và chuyên môn

còn nhiều hạn chế của minh chúng em luôn rất cô gắng hết sức và dé hoàn thành mộtcách tốt nhất Vì vậy việc xảy ra những thiểu sót của chúng em là điều khó tránh khỏitrong quả trình học hỏi và thực hiện khóa luận tốt nghiệp Chúng em hi vọng nhận

được sự thông cảm và nhận được các góp ý tận tình và quý bau của quý thay (cô)

Thông qua đó chúng em có thể rút ra được bài học kinh nghiệm, song với đó là hoàn

thiện và nâng cấp lại sản phẩm của mình tốt hơn nữa Sau tất cả, một lần nữa chúng

em xin gửi lời cảm ơn sâu sắc nhất đến với thay Nguyễn Văn Dã và tập thể các quýthay, cô Khoa Công Nghệ Thông Tìn — Trường Đại Học Nông Lâm Thành Phố Hồ ChiMinh vì tat cả những điều thay cô đã gửi gam và chỉ dạy chúng em Nhóm xin kinh

chúc các thầy cô luôn có sức khỏe thật tot và luôn thành công trong cuộc sống

Sinh viên thực hiện

Nguyễn Trần Anh

Nguyễn Minh Châu

DANH SÁCH CHỮ VIET TAT

AI Artificial Intelligence Tri tuệ nhân tao

UI User Interface Giao diện người dùng

UX User Experience Trai nghiệm người dùng

HTTP Hypertext Transfer Protocol Giao thức truyền tải siêu văn

bản

NPL Natural language processing Xử lý ngôn ngữ tự nhiên

DL4J Deep learning for Java Thư viện xử ly deeplearning

JDBC Java database connectivity API kết nối với Co sở dit liệu

CORS Cross-Origin resource sharing Chia sẻ tài nguyên có nhiều

nguồn khác nhau

DOM Document Object Model Mô hình các đối tượng tai liệu

CSDL Database Cơ sở dữ liệu

Props Properties Thuộc tinh

DANH MỤC CÁC HÌNHHình 2.1: Bảng thống kê mức độ sử dụng trên trang npmtrends.eom 6

Hình 2.2: Tạo dịch vụ trên trang chủ của EmailJS - 5-55 5<+5<++<+5<2 12

Hình 2.3: Giao diện tao dich vụ storage - . - - 5-52 S2 SH HH rret 15 Hình 2.4: Mysql và các loại cơ sở dữ liệu khác - ++++-<+++ec++eee+erezeres 18 Hinh:2.5: Spring TÔ BÌALÍGTHHH ecsscccsecsecesssneseneseeveensessevsonsemacceueseevesemssensrererpeevycesveawsers 20

Hình 2.6: Tổng qua Spring Boot -2-©2¿2222222E22E22E2EEE2E2EE2EE2E2E2xzrrrree 21

HÌNHH 2.7: Sorsanh Spr Và.SBRH-B DOO sssccssscscssscessanananasaussnsnassaseesmmnameaseasaamanas 23

Hình 2.8: Persistence Framework trong Spring Boot -c+c+cc-c+ 25

Hình 2.9: Ví du vỀ doc2vee ccccsccssssssesssessssesessesessssesessescsesecsessescsessesesnsacsesueseeseees 31

Hình 2.10: So sánh PV-DM va PV-DBOW 0:ceccecceceeceeseseeseeseeseeseeseeneeseeseeeeatens 33

Hình 2.11: Format file stop word dé loại bỏ các từ không mang ý nghĩa 35

Hình 2.12: format file dữ liệu sau khi qua xử lý bởi thư viện VnCoreNLP 37

Hình 2.13: Tao label duy nhất cho việc gắn nhãn -2- 22 222222+2z++22+zex 38

Hình 2.14: Xây dựng mô hình huấn luyện bằng thư viện deeplearning4j 38

Hình 2.15: Công thức tinh Cosine similarity - 52552 +52*+2£+s£+sc+scszererree 40

Hình 2.16: Số liệu thị phần của các search engine ở Việt Nam vào năm 2020 43Hình 3.1: Sơ đồ hoạt động quy trình thực hiện khóa luận tốt nghiệp 49

Hình 3.2: Use case của admin trong ứng dụng - -+-+++<++sc<+<++scess+ 51

Hình 3.3: Thông báo đăng ký khóa luận tốt nghiệp - ¿22522252522 52

Hình 3.4: Use case của giáo vụ trong ứng dụng - cece eens cscscserrrrree 55

Hình 3.5: Use case sinh viên trong ứng dụng 5555 < +52 £S+cssssereeerxee 56

Hình 3.6: Use case của các thành viên hội đồng -2 22+22++22++22z+c2ze 59

Hình 3.7: Tổng quan kiến trúc ứng dụng . -2+22©25c©2222xccxcreerxrrrrrrrrree 60Hình 3.8: Sơ đồ hoạt động của ứng dụng ở Írontend - -=+ <=++ec=+s+ 61Hình 3.9: Sơ đồ hoạt động của ứng dụng ở backend -+ ->+=c=~s>+ 61

Hình 3.10: Minh họa việc phân chia và định danh các API - - +-=+<<2 62

Hình 3.11: Sơ đồ lớp của ứng dụng 2-22-©22+22+++2rxzerrrrerrrrrrrrrrrrrer 64Hình 3.12:Sơ đồ hoạt động chức năng tạo tài khoản -2255¿2z+2z22z2zz>xz 66

Hình 3.13: So đồ tuần tự chức NANG tạo TAL KHOA saeesasasssseosiisssesosisiioskionsdsedusigt 67

Hình 3.14:Sơ đồ hoạt động chức năng đặt lại mật khẩu 2- 222222 68Hình 3.15: Sơ đồ tuần tự chức năng đặt lại mật khẩu 2-22 255225252 70

Hinh 3.16: Class diapram của lop DSGF ‹:: ::-c-eccciccccciiiiesbnikigiieddagkesiaslasdclAgiaee 71

Hình 3.17: Sơ đồ hoạt động chức năng đăng ký đề tài -2-©-255c - 73

Hình 3.18: Sơ đồ hoạt động quá trình lập chỉ mục và tìm kiếm khóa luận tốt nghiệp

H1 01:19), PP DA sẽ số np 74Hình 3.19: Sơ đồ tuần tự chức năng đăng ký khóa luận - -2-©2¿25552 76

Hình 3.20: Sơ đồ tuần tự chức năng thông báo - 2-22 22+22++22+222zz2zzz 78

Hình 3.21: Sơ đồ tuần tự của chức năng thêm khóa luận - 80Hình 3.22: Các thuộc tính của lớp Thesis (khóa luận tốt nghiệp) - 81Hình 3.23: Sơ đồ trang thái của khóa luận tốt nghiệp -2- 225525222552 83Hình 3.24: Sơ đồ hoạt động chức năng cập nhật hội đồng đánh giá khóa luận tốt

TUDES ere serra raciun eicsumr sey treacle cer acces cnt tien cu erence 83

Hình 3.25: Cac thuộc tính của lớp ThesisReportCalendar - - -+ 85 Hình 3.26: Cac thuộc tính cua lớp Review (Phan biện) -c<+-c+<c<<s2 88

Hình 3.27: Sơ đồ tuần tự của chức năng đánh giá phản biện - 90

Hình 3.28: Các thuộc tính của lớp DefenseRating (đánh giá bảo vệ khóa luận) 91

Hình 3.29: So đồ tuần tự của chức năng đánh giá bảo vệ -2 52 - 93

Hình 7.1: Giao diện trang quản lý tài khoản cee 5555 552< 2+2 c+xcczcrseeeres 102

Hình 7.2: Giao diện các chức năng dé tương tác với tài khoản - 102

Hình 7.3: Giao diện thêm người dùng - +52 +52 +52 £+2£+2£+s£rzerrrrrrrrrrrre 103

Hình 7.4: Giao diện chỉnh sửa thông tin người dùng - eects 104 Hình 7.5: Giao diện chức năng quản lý thông báo - ee eee cette 104 Hình 7.6: Giao diện chức năng thêm thông báo - 55 5-++5<++++<<+2 105

Hình 7.7: Giao diện dropdown list cá nhân - 55552552 £2*£+2£+sczecszreeres 106

Hình 7.8: Giao diện biểu mẫu Cập Tibia CỔNG THÍ x-cc6122666260066006-12644ã6161848 10536 Gee 106

Hình 7:9: Giao diện;Trfenu:chfa:chỨc HẤ Tae scsersiiaesieipissapoiesiete03s6008608431000080566 107

Hình 7.10: Giao diện đăng ký khóa luận tốt nghiệp mới - -2- 2-52 108Hình 7.11: Giao diện hiển thị các thông báo 2- 2 2222222zz22+22zzz+zzxzzse2 109

Giao điện đăng ký khóa luận tốt nghiệp -22©2z525+2 111

Giao diện chọn các khóa luận tốt nghiệp cần thêm hội đồng đánh giá 112

Giao diện thêm hội đồng đánh giá khóa luận tốt nghiệp - 113Giao diện chọn khóa luận tốt nghiệp đề thực hiện chức năng 113

Giao diện nhập thông tin dé đặt lich phản biện khóa luận tốt nghiệp 114

Giao diện tương tác chức năng tạo lịch bảo vỆ -<=>5 114

Giia6 GIIỆH!tạ6:.TT6GH BẢO M tosasnaoboadttdkiSuEliL0I03SGS8380008ã63836iG32333SEE4BGSESES8E30S80014” 115

Giao diện đánh giá chi tiết của hội đồng trong buôi bảo vệ 116

DANH MUC CAC BANG

So sánh sự khác biệt trong phân tích câu của PV-DM và PV-DBOW 33 Cách đánh chỉ mục ngược của thư viện Lucene - - -+5+ 44

Đặc tả chức năng đặt lại mật | ee Tn ee ne 69

Đặc tả chức nang dang ky khóa luận - eeeeeeeeeeteeeeneeeteeeeees 75 Đặc tả ChỨc Hans HÔNG AO serseeenosernnnaabndiisdidiidiinttutdkngrsiuhEtgrLSESSEAA0018 78

Đặc tả chức năng thêm khóa luận - eee ¿5+ ++++++<++£+zexeeeeeeeeers 80

Đặc tả chức năng tìm kiếm, tra cứu khóa luận + s+s+zzszzzz+z 82Đặc tả chức năng tong hợp đánh giá - 2-22 ©2++22z+2zzsczcez 85

Đặc tả chức năng đánh giá phản biện - - 5555 +5<+<<+sc+ec+ecexr+ 90

Đặc tả chức năng đánh giá bảo VỆ - - 5 22+ £ + sskEssresrrrrskrrs 93

TÓM TẮTHiện tại, việc quản lý quy trình và theo đối các bước thực hiện khóa luận tốtnghiệp của sinh viên tại khoa CNTT, trường Đại học Nông Lâm TP.HCM vẫn đượcthực hiện thủ công và dễ gặp phải các khó khăn, như thiếu thông tin, khó khăn trongviệc tra cứu, và cần thời gian nhiều hơn dé theo dõi và cập nhật thông tin liên quan.

Bằng những công nghệ mạnh mẽ như ReactJS và Spring Boot, Ứng dụng của nhóm

em sẽ cung cấp một giao diện trực quan và dễ sử dụng cho sinh viên, giảng viên giúpcho việc quản lý quy trình thực hiện khóa luận tốt nghiệp tại khoa Công nghệ thôngtin trường Dai học Nông Lâm thành phố Hồ Chí Minh diễn ra một cách hiệu quả hơn

Sinh viên có thể tham khảo, tra cứu các đề tài đã được thực hiện trước đây, có gợi

nhắc sự trùng lặp với các tên đề tài khi tiễn hành đăng ký khóa luận tốt nghiệp mớithông qua thuật toán doc2vec va công cụ tìm kiếm Lucene Giáo vụ có thé tổng hợpcác đánh giá của hội đồng về đề tài trong quá trình thực hiện và gửi thông báo dé cậpnhật thông tin cho sinh viên, giảng viên đang sử dụng ứng dụng, lưu trữ bản sao cuốicùng của khóa luận tốt nghiệp đã hoàn thành vào cơ sở dữ liệu Cán bộ hướng dẫn,

cán bộ phản biện có thé đánh giá đề tài dựa trên các tiêu chí được cung cấp dưới dang

biểu mẫu trên ứng dụng trong giai đoạn phản biện Các thành viên trong hội đồng bảo

vệ khóa luận tốt nghiệp có thê nhận xét, góp ý cho đề tài trên ứng dụng trong giai đoạn

bảo vệ khóa luận.

Currently, the management and monitoring of the thesis for undergrate students

at the faculty of information technology, Nong Lam University Ho Chi Minh city are

still carried out manually, leading to various difficulties such as lack of information, challenges in research, and the need for more time to track and update relevant

information Through powerful frontend technologies like ReactJS and Spring Boot, the implemented application will provide an intuitive and user-friendly interface for students and lecturer, facilitating the efficient management of the thesis at the faculty Students will be able to search and read previous theses In addition, the application also provides similar theses based on the title when a new thesis is registerd by using

doc2vec algorithms and the Lucene search engine Academic affairs can summarise assessments of theses and send notifications to update information for students and

lecturers The final copy of the completed thesis will be stored in the database Supervisors and reviewers can evaluate the thesis based on criteria provided through the system's assessment forms during the review phase Apart from these, members of the defence committee can give comments and feedback during the defence phase.

1.1 Hiện trạng và khó khăn thực t6 cccsssssscsssssssssssescscssseseccasesscsacssscsacseeescens 1

1 5 Lý ñu chị để csc ngang (dØkhdgtagi3kGã0(GIa880ti10ã0E4604aã8058582ã08iaagãggsxÄ 2

1.3 Mục tiêu đề tài 5-5-5 ©s£©s£Es£EeExeExerkerkerkerkerkerkerkerkerkersersereereree 2

1.4 Nội dung nghiên CỨU 2 << << 90.0 9 0g mg 3

LS Pham Vi nghiền CW sesscsensessensessacescennesessesessecnyenssvesessssesvensoveseasessexdennssnsensssseeeese 3

1.8 Eữ sĩ hoa trọc và Cg DHceesreiniiorrtinirdiiotihididiGDiTERiEGISSELS6is808050800386T/E 3

1.7 Sản phẩm đ883896345594945550955SE555S9Đ53SKRLSSSSSVESRBSSSHEHEISSEEESSSSEEEEASEEEGHEEISESEEESESEES4180058955880808953 4

CHƯƠNG 2: TONG QUAT CÔNG NGHỆC - 252 ©5<Ssscscsersersre 5

2.1 React SIS sccseseccssscsscvacecsonnszacasenssecsssenascanenancteceassenassnannsenecansessssessoensesswesnesaevecasesee’ 5

"h7 na —“<:" Ả.Ả.ẢẢ 3

2x12 DAC EU HD các 5210<06310001012564859650468685956998.08300093055404010/800031120E38001g800800000390LS6% 6

2.1.3 Ưu nhược điểm - 22-2 2+S+SE£EE2E92E2E12E212212112122121121112112111211 211 2e2 i

2.1.3 Gae Khái ntG cơ Dain sescnccvcse cnscenessensncceaepascuaay 058653 ae Siing2XGEucic8cùxgEis Eiobg3oixsspdix 9 PA? 1h51 11

5 L:0 ER€DBSE oangB SE BE EEDTRGEGEDE GHI SSIEETIGDIEH-GUỒNGHIESÙEGHhtàNBEiSNiSOiliugisgESbaosiEe 12 2.2 Ant DesÏØin - <5 << 55 990.0090002 0000090000005 009500006050009060 00 15

D7 [Íu tÌnfge đÌỂNH e2 Ựng LH, HH HH HH 0 10g20200 022000 0/000400E17323600 l6

2.4.2 Các khái niệm và đặc trưng cơ bản - 55+ ++++++++eeerrrrerrerree val

2.4.3 Ưu nhược dim cecccccccccccccccccececsescsecececsesescecscscevevsssececsvsvsessesevsvsvsesesesevees 22

2AA Framework ORM My Dats co ssssscs senssssasuncaansmnsureeseanansosaxseancuaasesaveuemmamaveess 24 2.4.5 Š)0á 0x0 0À 0 2, 2.5 Word Embedding sccsscsccecscssescseesesseesceesesseeseesseeseessenseesseeceensesseessenses 30

292 DOC2 V CỔ sssssenessseies vecems canes ve nanne cocsenesasenurnstansens tases se seeananenmamnamaneeasarmsanaszess 30

2:5.3 Search Engine’ va thư viên LUCen€ uwscvcccsscascssvesssnconesavsanstsonnieeeusewunnoseas 41

CHƯƠNG 3: PHAN TÍCH VA THIET KE -2-s°sss<eces 473.1 Tông quan về bài toa seccscccsscssscssscssesssssssecssccssecssecssccascenscsncsneceneceneceneeess 47

3.2 Phân tích và tổng hợp chức năng - 2< ssese+eezsezseezsecse 49

E79] Ta n0m0œw tt toa unseeGnoknsbttotitisii0iCEi/00001000799n0078183099090086siugi 49

5.7.8 Thành lập hội đẳng eSaSH HH I.00.12120001.012203.0 49

3.2.3 Thông báo, xét duyệt đề cương chi tiết và quan lý khóa luận tốt nghiệp 51

3.2.4 Đăng ký khóa luận tốt nghiệp -2-2¿2++22++22++2zx++zrxzzrrrer 55

3/85 Pier giá khôn ldãn tốt:npHÏÊD em asicrarsccennnncianrsecceiontoanmimarasoammper 57

3.3 Xây dựng ứng UNG ‹: ‹ : : -‹‹-<‹-5:<c-¿-<¿csezssssscevzsscsseSSE9055656555886080806840058.460856.0666 60

3.3.2 Xây dựng chức năng cho Admin - - + +52 +52 *+2*+2£+s££zerzerrrrrrrrre 65

3:3.3 Xây dựng chức năng cho sinh VIÊN scsincscaccswssasvacsnscpnessavensanensersansasensaanensenss 71 3.3.4 Xây dựng Chire HANG CMO S1AG Ý ca ccarsessenesssenn sess omemeaconveruwsressserene Te

3.3.5 Xây dung chức năng cho Giảng viên/Hội đồng -2 2525522 87

CHUONG 4: KET QUA CUA LUẬN VAN 2 << ©c<cscsscsersscse 94

CHUONG 5: KET LUẬN VA HUONG PHAT TRIEN . 98

5.1 KGt WAM cescecsescsessssccssecssccsccnsccnsccnsccnccnscenscesccenscesccesccsscsssccascensccaseeneeenseess 98

E7 Nhược Gi bah crencnacncrenxanecnsnmmansonaansm enema 99

5.4 Hướng phat triễn - 2 s°©<++s+©es£+erseExeerserxerrserserrsrrserrsrrsre 99

TÀI LIEU THAM KHẢO - 5 5<©s+©s+©es£reeteeErtrserrerserrsrrseree 100

7.1 Đăng HhẬD:-‹<::<c:¿csz<szzczcscc622556566646515555555556056g0a60134350855890506456305500555E56886554E048066 102 7.2 Quản lý tài khoản -2<©s<©©se+csetEtetrxetrxerrserrserrserrserrsrrsee 102

7x3 THONG DAO ssccsesssecersesencscuscuodsavsamsatessssavcssnseasteteaivenssveivesssmssasearerseiesvecenenstaoeines 104 7.4 Cập nhật thông tin cá nhân ee ccscssccscesseessscssesssessssssssesseessesssseees 105

7.5 Đăng ký khóa luận tốt nghiệp -2 2s2s£©se©zseczseczseczsecrsee 106

7.6 Xem thông DAO cácceseesssesssennssiEnskEkEaEESESSES.SISEBSIESSEEEESSESHE-EEEG55 825650070 108

TF Chat N'Khũa liên 10 I eesesenssinsririedteooroiniigdtgpbagtsgtblsrigaiisbsses 109

7.7.1 Cập nhật thông tin khóa luận tốt nghiệp - -2 2- ¿©2225 109

7.7.2 Thêm khóa luận tốt nghiệp -. - 2-2 ©2222222222222EE2£E2ExzExrrrrzrreer 110

7.7.3 Thêm hội đồng đánh giá khóa luận tốt nghiệp -. - 112

TR Tbe Vie relia EEitsnrueennunkrorogtotooitgtoiiSt/05/ G0000 0000 0 8nagg80 80p 113

CHƯƠNG 1: MỞ ĐẦU

1.1 Hiện trạng và khó khăn thực tế

Trong bối cảnh cuộc cách mạng công nghiệp 4.0 và yêu cầu về chuyên đôi sốđược thúc đây mạnh mẽ ở Việt Nam, có thê thấy CNTT đã được ứng dụng rộng

rãi vào mọi lĩnh vực của cuộc sống Trong đó, nhu cầu xây dựng các hệ thống linh

hoạt trong quản ly công việc cũng tăng nhanh chóng Tai Khoa CNTT, trường Dai

học Nông Lâm TP HCM, việc quản lý thực hiện khóa luận tốt nghiệp của sinhviên từ khâu đăng ký cho đến khi bảo vệ khóa luận tốt nghiệp bằng phương pháp

thủ công truyền thống gặp phải một số khó khăn như sau:

e Quản lý tài liệu phức tạp: Trong quá trình nghiên cứu và viết khóa luậntốt nghiệp, sinh viên sẽ phải thực hiện nhiều nghiên cứu và thu thập tàiliệu từ nhiều nguồn khác nhau và sau khi hoàn thành sẽ được tiến hànhtổng hợp và lưu trữ lại Việc quản lý và lưu trữ các tài liệu như: Đề

cương chi tiết, source code, tài liệu tham khảo Một cách thủ công có

thé dẫn đến việc mat mát thông tin hoặc không tìm kiếm được thông tincần thiết

e Quan lý thời gian và lịch trình: Việc thực hiện khóa luận tốt nghiệp yêu

cầu phải tuân thủ các tiễn độ và lịch trình đã được đặt ra Quản lý thời

gian và đảm bảo tuân thủ lịch trình có thê trở nên khó khăn nếu không

có công cụ hỗ trợ giúp người dùng theo dõi tiến độ công việc và nhắcnhở các mốc quan trọng

e Trùng lắp trong quá trình chọn dé tài: Nếu không có hệ thống lưu trữhợp lý, việc tiến hành tham khảo và chọn đề tài sé gặp nhiều khó khănkhi không có các tài liệu dé dang truy cập và công cu tìm kiếm hiệu qua

dé xem xét các dé tài trước đó đã được thực hiện

e Bảo mật thông tin nghiên cứu: Khóa luận tốt nghiệp thường chứa thông

Từ những phân tích trên, có thé thấy việc xây dựng 1 hệ thống dé thay thé cho

phương pháp quản lý thủ công là điều vô cùng cần thiết

1.2 Lý do chọn đề tài

Với tiền đề là chưa có hệ thông quản lý việc thực hiện khóa luận tốt nghiệp

nào trước đây tại Khoa Công nghệ Thông tin trường Đại học Nông Lâm TP.HCM,

đề tài sẽ là một giải pháp thiết thực cho những vấn đề còn tồn đọng từ khâu đăng

ký đến khi bảo vệ và lưu trữ tài liệu khóa luận tốt nghiệp

Sinh viên sẽ tiết kiệm thời gian và công sức trong tìm kiếm và tham khảo tài

liệu, từ đó có thể tập trung nhiều hơn vào nghiên cứu và thực hiện khóa luận tốt

nghiệp.

Ứng dụng sẽ giúp sinh viên, cán bộ hướng dẫn, cán bộ phản biện, hội đồng

bảo vệ theo dõi thông tin một cách hiệu quả hơn trong quá trình thực hiện khóa

luận tốt nghiệp Hỗ trợ trong việc gợi nhắc sự trùng lắp khi đăng ký đề tài khóaluận tốt nghiệp mới, phát huy tính trung thực và độc lập trong nghiên cứu Đảmbảo tính bảo mật của dữ liệu và thông tin quan trọng trong khóa luận tốt nghiệp

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

e Mục tiêu tong quát:

— Xây dựng ứng dụng quản lý quy trình thực hiện khóa luận tốt nghiệp nhất

quán và linh hoạt, có khả năng mở rộng trong tương lai, thích nghi với các

thay đối, tạo ra các giá trị thực tế như tiết kiệm thời gian, dé dàng tra cứuthông tin, đánh giá, lưu trữ dé dang hơn phương pháp truyền thống

© Mục tiêu cụ thể:

— Nghiên cứu và phân tích quy trình thực hiện khóa luận tốt nghiệp của khoaCông nghệ thông tin trường Đại học Nông Lâm thành phó Hồ Chí Minh

— _ Nghiên cứu thuật toán doc2vec dé xây dựng một chương trình đánh giá độ

tương đồng của các đề tài khi đăng ký

— Tìm hiểu và áp dụng các công nghệ ReactJS và Spring Boot để xây dựngwebsite quản lý quy trình thực hiện khóa luận tốt nghiệp

— Tìm hiệu thư viện Lucene đê xây dung search engine phục vụ việc đánh

dau và tìm kiếm khóa luận tốt nghiệp

1.4 Nội dung nghiên cứu

Nghiên cứu quy trình thực hiện khóa luận tốt nghiệp của khoa Công nghệ thôngtin trường Dai học Nông Lâm thành phó Hồ Chi Minh từ khâu đăng ký đề tài đến khibảo vệ và lưu trữ khóa luận tốt nghiệp khi bảo vệ thành công với các đối tượng người

dùng như: sinh viên, giáo vụ, cán bộ hướng dẫn, cán bộ phản biện, thành viên hội

đồng,

Nghiên cứu thuật toán doc2vec và Search engine Lucene dé kiểm tra tính tương

đồng của đề tài khóa luận tốt nghiệp

Xây dung | ứng dụng với các công nghệ mạnh mẽ như ReactJS va Spring Boot

cho phép người dùng tương tác, quản lý quá trình thực hiện khóa luận tốt nghiệp một

cách hiệu quả.

1.5 Phạm vi nghiên cứu

Đề tài xây dựng ứng dụng quản lý quy trình thực hiện khóa luận tốt nghiệp dựa

trên quy trình đang áp dung tại khoa CNTT, trường Đại học Nông Lâm TP.HCM.

1.6 Cơ sở khoa học và thực tiễn

Đề tài được xây dựng mới hoàn toàn, thực hiện theo quy trình thực tế đang ápdụng tại Khoa CNTT, trường Đại học Nông Lâm TP.HCM Đề tài sử dụng các nguyêntắc quản lý dự án dé xác định và điều phối các công việc, thiết lập tiễn độ, giao nhiệm

vụ và theo dõi tiến trình của khóa luận tốt nghiệp, các nguyên tắc của quản lý thông

tin để lưu trữ, quản lý và truy xuất thông tin liên quan đến khóa luận tốt nghiệp Cơ

sở dữ liệu có thé được sử dung dé lưu trữ các thông tin về sinh viên, cán bộ hướngdẫn, tiến độ, tài liệu và các thông tin khác

Cần tiến hành phân tích yêu cầu kỹ lưỡng, điều này bao gồm việc thu thập thôngtin từ cả sinh viên, cán bộ hướng dẫn và các bên liên quan khác dé xác định các tinhnăng cần có trong ứng dụng Áp dụng các công nghệ lập trình hiện đại như Spring

này dam bảo răng cả sinh viên và giảng viên có thê dé dàng tương tác với ứng dung một cách hiệu quả.

Ứng dụng sẽ giúp quản lý quy trình thực hiện khóa luận tốt nghiệp từ giai đoạnđăng ký đề tài, xét duyệt đề cương, đến phản biện và cuối cùng là bảo vệ, giúp kết nốicác giai đoạn trong quy trình thực hiện khóa luận tốt nghiệp một cách liền mạch

1.7 Sản phẩm

Sau khi hoan thành, ứng dụng sẽ có các chức năng cơ bản như sau:

— Sinh viên có thể đăng ký đề tài khóa luận tốt nghiệp trực tuyến thông qua ứngdụng Sinh viên sẽ được cung cấp các hướng dẫn và yêu cầu khi điền vào cácthông tin cần thiết, gợi nhắc các đề tài có khả năng trùng lắp trong quá trìnhđăng ký thông tin khóa luận tốt nghiệp Có thé theo dõi tiến độ thực hiện khóaluận tốt nghiệp qua ứng dụng, bao gồm việc nhận báo cáo tiễn độ từ giáo vụ

và lịch được sắp xếp để bảo vệ Sinh viên có thê tra cứu thông tin liên quan

đến khóa luận tốt nghiệp đã hoàn thành trước đây một cach dé dàng thông qua

ứng dụng.

— Giáo vụ có thé tiết kiệm thời gian và công sức trong việc gửi thông báo, nhắcnhớ, tạo biểu mẫu, tổng kết kết quả và lưu trữ tài liệu Giúp loại bỏ các sai sót

thường gặp trong việc thực hiện thủ công Các thông tin và dữ liệu được tự

động nhập và xử lý, giúp tránh nhằm lẫn và tăng tính chính xác trong quy trìnhthực hiện khóa luận tốt nghiệp Ứng dụng quản lý cho phép giáo vụ gửi thông

báo, nhắc nhở và cập nhật thông tin dé dang và nhanh chóng Điều này giúp

cải thiện giao tiếp giữa giáo vụ và sinh viên, giảng viên hoặc các bên liên quankhác trong quá trình thực hiện khóa luận tốt nghiệp

— Hội đồng có thể tham gia đánh giá, nhận xét đề tài ngay trên ứng dụng, sau đó

được tông hợp đề đưa ra kết quả cuối cùng đối với khóa luận tốt nghiệp

— Ngoài ra ứng dụng sẽ được thiết kế với các biện pháp bao mật nghiêm ngặt dé

bảo vệ thông tin cá nhân và dữ liệu quan trọng cua sinh viên và giảng viên.

CHƯƠNG 2: TONG QUAT CÔNG NGHỆ

2.1 ReactJS

2.1.1 Tổng quan

ReactJS là một thư viện JavaScript mã nguồn mở được sử dụng rộng rãi dé xây

dựng các giao diện người dùng động và hiệu quả trên các ứng dụng web Nó ra đời

vào năm 2013 và được phát triển bởi Facebook dé giải quyết những thách thức vềquản lý giao điện người dùng phức tạp và tăng cường hiệu suất của các ứng dụng web

Ngoài Facebook, nhiều công ty công nghệ hàng đầu như Airbnb, Netflix, Instagram

và Microsoft cũng sử dụng ReactJS trong phát triển sản phẩm của họ Sự ủng hộ từ

những công ty có uy tín này cho thấy tính đáng tin cậy và tiềm năng của ReactJS trong

việc xây dựng các ứng dụng web chất lượng cao ReactJS đã trở thành một trongnhững công nghệ phổ biến nhất trong lĩnh vực phát triển web hiện đại Với triết lý

"One-Way Data Flow" (Luồng dữ liệu một chiều) và hướng tới việc xây dựng giao

diện dé quản lý và tái sử dung, ReactJS đã thay đổi cách chúng ta tiếp cận việc xây

dựng ứng dụng web phức tạp.

ReactJS hỗ trợ xây dựng ứng dụng trên nhiều nền tảng khác nhau như web,mobile và desktop Sử dụng các công nghệ bô sung như React Native và ReactElectron, ReactJS cho phép tái sử dụng mã nguồn và kiến thức giữa các nền tảng, giúptiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng đa nền tảng

Thư viện bố sung và bộ công cụ mạnh mẽ: ReactJS được kết hợp với nhiều thưviện bố sung va bộ công cụ mạnh mẽ như Redux, React Router, Material-UI, và nhiềuthư viện khác Những công cụ này cung cấp các tính năng mở rộng và giúp giải quyếtcác vấn đề phức tạp trong việc xây dựng ứng dụng web

Ngoài ra nó còn tích hợp dé dàng với các dự án có sẵn, cho phép tích hợp một

cách linh hoạt vào các hệ thống tồn tại mà không cần phải viết lại toàn bộ mã nguồn

Điều này giúp giảm thiểu thời gian và công sức khi triển khai ReactJS trong dự án đã

ReactJS không yêu cầu học một ngôn ngữ đặc biệt để sử dụng, mà chỉ sử dụngJavaScript, điều này giúp cho các nhà phát triển đã có kinh nghiệm với JavaScript dễ

dàng tiếp cận và triển khai ứng dụng một cách nhanh chóng

Cộng đồng phát triển của ReactJS rất đông đảo và đam mê Đó là một cộng

đồng đa dạng với các nhà phát triển, chuyên gia và người mới bắt đầu đóng góp thông

qua việc chia sẻ kiến thức, tạo ra các thư viện hỗ trợ và giúp đỡ nhau giải quyết cácvân đề phát triển Cộng đồng này đóng vai trò quan trọng trong việc duy trì và phát

triển ReactJS, đồng thời giúp công nghệ này tiếp tục là một trong những lựa chonhàng đầu trong lĩnh vực phát triển ứng dụng web

@®anoulr @ react @ we 50.000.000

Oct 2022 Jan 2023 Apr 2023 Jul 20/

Hình 2.1: Bang thong kê mức độ sử dụng trên trang npmtrends.com

2.1.2 Đặc trưng

e One-Way Data Flow (Luéng dữ liệu một chiều): ReactJS sử dụng mô hìnhluồng dữ liệu một chiều, trong đó dit liệu di chuyên từ thành phan cha đến cácthành phần con thông qua các props (thuộc tính) Điều này đảm bảo tính dựđoán và tin cậy trong quá trình quản lý trạng thái ứng dụng Với luồng dit liệu

một chiều, mọi thay đồi trạng thái đều xảy ra ở cùng một hướng, giúp tránh cáclỗi xung đột và cải thiện hiệu suất của ứng dụng.

JSX (JavaScript XML): Dé viết mã giao diện người dùng bằng cú pháp giống

HTML JSX giúp mã trở nên dé đọc và dé bảo trì hơn, đồng thời giúp kiểm tra

cú pháp dễ dàng hơn Mã JSX sẽ được biên dịch thành các cuộc gọi hàm

JavaScript dé tao ra giao diện người dùng Sử dụng JSX, nhà phat triển có thể

tận dụng sức mạnh của JavaScript va viết mã giao diện một cách rõ ràng và

hiệu quả.

Virtual DOM (DOM ảo): Virtual DOM được sử dụng dé quan lý va cập nhật

giao diện người dùng một cách hiệu qua Virtual DOM là một bản sao của

DOM thực tế được lưu trữ trong bộ nhớ của ứng dụng Khi có sự thay đổi trong

dữ liệu, React so sánh Virtual DOM với DOM thực tế và chỉ cập nhật nhữngphần bị thay đôi thực sự Điều này giúp cải thiện hiệu suất và tăng cường tốc

độ phản hồi của ứng dụng

Component-Based Architecture (Kiến trúc dựa trên thành phần): Áp dụng kiến

trúc dựa trên thành phần, cho phép chia giao diện thành các thành phần độc lập

và có thê tái sử dụng Mỗi thành phần trong ReactJS có trạng thái (state) và

giao diện riêng, giúp tách biệt logic và hiển thị Điều này giúp mã trở nên dễđọc, dễ bảo trì và dé mở rộng Kiến trúc dựa trên thành phần làm cho việc xâydựng các ứng dụng phức tạp trở nên dé dàng hơn, đồng thời giúp tăng tinh tái

sử dụng mã ngu6n và giảm thiêu lặp lại

React Hooks (Khoa React): React Hooks là một tính năng được giới thiệu từ phiên bản React 16.8, giúp sử dụng trạng thái và các tính năng của React trong

các hàm chức năng (function components) Trước đây, trạng thái chỉ có thểđược quản lý bằng cách sử dụng các thành phần lớp (class components) Tuynhiên, với React Hooks, nhà phát triển có thể sử dụng trạng thái và các tínhnăng của React một cách đơn giản hơn và dé dàng sử dụng hơn Điều này giúpgiảm bớt sự phức tạp và cải thiện hiệu suất khi xây dựng các ứng dụng React

2.1.3 Ưu nhược điểm

ReactJs tạo ra cho chính nó DOM ảo — nơi mà các component thực sự

tồn tại trên đó Điều này giúp cải thiện hiệu suất rất nhiều Reactjs cũng tính

toán những thay đôi nào cần cập nhật lên DOM và chỉ thực hiện chúng Điềunày giúp ReactJs tránh những thao tác trên DOM ma phat sinh nhiều chi phí,giúp cho trang website tiết kiệm được thời gian load lại những tài nguyênkhông cần thiết

React]s giúp việc việc viết các đoạn code Js dé dang hon: Nó dùng cú

pháp đặc biệt là JSX (Javascript mở rộng) cho phép người ta trộn giữa code

HTML và Javascript Ta có thể thêm vào các đoạn HTML trong hàm render màkhông cần phải nối chuỗi Đây là đặc tính thú vị của ReactJs Nó sẽ chuyền đôicác đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi

JSX Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang

“Single page website” làm tối ưu SEO và thời gian tải trang Nếu tat cả việcxây dựng và hiển thi trang đều thực hiện ở client, thì người dùng sẽ phải chờ

cho trang được khởi tạo và hiển thị lên Điều này thực tế là chậm Reactjs là

một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụngDOM và cũng có thể render bằng các chuỗi HTML mà server trả về Dễ dàng

viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS.Hiéu nang đối với các ứng dụng có dữ liệu thay đôi liên tục, dễ dàng cho bảo

trì và sửa đổi ReactJs hỗ trợ nhiều thư viện cho lập trình viên tha hồ sáng tạolàm cho trang web sinh động và sắc sảo thu hút người dùng hơn Có thể tích

hợp ReactJs vào các framework khác.

e Nhược điểm

Với tốc độ phát triển nhanh chóng của ReactJs, các phiên bản mớithường được phát hành một cách thường xuyên Đòi hỏi các nhà phát triển vàdoanh nghiệp phải cập nhật ứng dụng của họ thường xuyên để giữ cho mãnguồn của họ tương thích với các phiên bản mới nhất của React Điều này cóthê tốn thời gian và công sức, đặc biệt đối với các dự án lớn và phức tạp Cácphiên bản mới, React có thể thay đôi API và cách hoạt động của một số tính

năng gây ra sự không tương thích ngược và làm hỏng ứng dụng nếu nhà phát

triển không cập nhật và điều chỉnh mã nguồn của họ cho phù hợp với phiên

bản mới Việc đào tạo nhân viên và cung cấp hỗ trợ cho các phiên bản mới có

thé trở nên khó khăn Các nhà phát triển và doanh nghiệp cần đảm bảo rang họcung cấp đủ tài nguyên và dao tạo nhân lực đảm bao rang nhân viên có thé sửdụng các tính năng mới và giải quyết các van đề liên quan đến các phiên bản

8#

moi.

ReactJS là một thư viện mạnh mẽ, tuy nhiên dé xây dựng một ứng dụnghoàn chỉnh, bạn thường cần phải sử dụng các thư viện bên thứ ba khác và điềunày áo thê dẫn tới xung đột và sự không tương thích, đặc biệt khi bạn sử dụngnhiều thư viện bên thứ ba trong cùng một dự án Các thư viện bên thứ ba cóthê không phát triển hoặc cập nhật liên tục, dẫn đến việc thiếu các tính năng

mới hoặc sửa lỗi quan trọng Điều này có thể làm giảm khả năng mở rộng và

phát triển của ứng dụng của bạn trong tương lai

2.1.4 Các khái niệm cơ bản

e Components (Thành phan): Trong ReactJS, thành phan là các đơn vị cơ bản

của giao diện người dùng, được xây dựng dựa trên hướng tiếp cận

component-based development Mỗi thành phan đại điện cho một phan của giao điện cóthê tái sử dụng và độc lập với các thành phần khác Điều này tạo ra sự phân

chia rõ ràng và cấu trúc mô-đun hóa trong việc xây dựng ứng dụng React

e State (Trang thái): Trạng thái đại diện cho dữ liệu có thể thay đôi trong thànhphần và tác động đến hién thị giao diện State được quản lý bởi React và có thể

được cập nhật thông qua phương thức setState trong lớp thành phần (ClassComponents) hoặc thông qua Hook useState trong hàm thành phần (Function

Components) Quá trình cập nhật state gây ra việc re-render giao diện, g1úp cập

nhật dit liệu mới nhất cho người dùng

e Hooks: Là một tinh năng quan trọng và vô cùng mạnh mẽ được giới thiệu từ phiên bản React 16.8 vào tháng 2 năm 2019 Hooks giúp bạn sử dụng các tính

mà trước đây chỉ có thé sử dung trong các class component, ngay cả trong các

functional component thông thường Với hooks, chúng ta có thé viết các

functional component mạnh mẽ hơn, dễ đọc hơn và dễ bảo trì hơn

- - Giúp quản lý trạng thai (state) trong functional component: Trước khi

có hooks, dé quản lý trạng thái trong functional component, chúng ta

phải sử dụng các stateless component (component không có trạng thái) hoặc sử dụng thư viện bên ngoài như Redux Tuy nhiên, hooks giúp bạn

sử dụng trạng thái (state) và các tính năng của React một cách dễ dàng

trong functional component.

- Loai bỏ sự phức tap cua Higher-Order Components (HOCs) va Render

Props: Dé chia sé logic giữa các component, chúng ta phải sử dung

HOCs hoặc Render Props, điều này có thé làm cho code phức tạp vàkhó hiểu Nhưng với hooks, chúng ta có thể sử dụng các hook custom

để chia sẻ logic giữa các component một cách minh bạch và dễ dàng

hơn hơn.

- Tang tính tái sử dụng code: Sử dung hooks giúp viết code tái sử dụng

dễ dàng hơn Có thể tạo các hook custom chứa logic và sử dụng lạichúng trong nhiều component khác nhau, giúp giảm lượng code trùng

lặp và tăng tính hiệu quả.

e Props (Thuộc tính): Props là các đối số được truyền vào các thành phan React

từ thành phần cha Điều này cho phép truyền dữ liệu và thông tin từ một thànhphần cha xuống các thành phần con Props giúp tạo ra sự kết nối và tái sử dụnglinh hoạt giữa các thành phần trong ứng dụng React Việc truyền thông tin từmột thành phần cha xuống các thành phần con giúp phân chia rõ ràng trách

nhiệm và tăng tính mô-đun hóa của ứng dụng.

e Event Handling (Xử lý sự kiện): Trong React, bạn có thé xử lý các sự kiện nhưbam nút, gõ phím, hover, click và nhiều sự kiện khác bằng cách sử dụng các

trình xử lý sự kiện Khi xảy ra một sự kiện, React sẽ gọi các hàm xử lý đã được

đăng ký và bạn có thể thực hiện các hành động tương ứng

e Conditional Rendering (Hién thi có điều kiện): React cho phép bạn hiển thị cácthành phần hoặc phần tử dựa trên các điều kiện xác định trong ứng dụng củabạn Bạn có thé sử dụng các cấu trúc điều kiện như if else hoặc ternary operator

dé điều khiển việc hiển thị của các thành phan

e Router (Định tuyến): Dé xây dựng các ứng dụng da trang trong React, ban cần

sử dụng định tuyến dé điều hướng giữa các trang và thành phần khác nhau.React không có bộ định tuyến mặc định, nhưng bạn có thể sử dụng các thư viện

bên thứ ba như React Router dé xử lý việc định tuyến

2.1.5 EmailJS

° Tổng quan

EmailJS được phát triển vào năm 2013 bởi Vitaly Tatarintsev và Oleksii Anisimov

Ban đầu, ý tưởng của EmailJS bắt đầu từ nhu cầu cung cấp cho các nhà phát triển

một giải pháp đơn giản và dé dàng dé tích hợp chức năng gửi email vào ứng dungcủa họ Từ đó, EmailJS đã ngày càng được phát triển và mở rộng chức năng dé hỗ

trợ nhiều ngôn ngữ lập trình và tích hợp với các dịch vụ khác nhau

EmailJS cung cấp một giao diện API đơn giản để gửi email từ phía máy chủ và

trang web Điều này cho phép các nhà phát triển tích hợp chức năng gửi email vào

ứng dụng của họ một cách nhanh chóng và tiện lợi Tác dụng chính của EmailJS

bao gồm: Gửi email từ phía máy chủ: EmailJS cho phép máy chủ gửi email thôngqua API, giúp cải thiện quá trình gửi email và hạn chế việc xử lý email trực tiếp từmáy chủ Tích hợp dé dàng: EmailJS hỗ trợ nhiều ngôn ngữ lập trình và cung cấp

tài liệu chi tiết, giúp người phát triển tích hợp dịch vụ này vào ứng dụng một cách

nhanh chóng.

Trong những năm gần đây, sự phát triển của công nghệ và ứng dụng web đã tăngcao, và các dich vụ gửi email như EmailJS trở nên ngày càng quan trong và phốbiến trong việc tích hợp chức năng gửi email vào các ứng dụng

e© Uudiém

- _ Tiết kiệm thời gian: Sử dụng EmailJS giúp tiết kiệm thời gian so với việcxây dựng và quản lý hệ thống gửi email riêng biệt.

e Nhược điểm

- _ Giới hạn miễn phí: EmailJS có các gói dịch vụ miễn phí có giới hạn cho

mỗi tài khoản, nếu có nhu cầu sử dụng nhiều lượt gửi email hoặc tích hợp

cao cấp, có thê phải trả phí

e Cách triển khai

Đăng ký tài khoản: Đăng ký tài khoản EmailJS trên trang web chính thức.

- Tao dịch vụ email: Trong tài khoản, tạo một dịch vụ email và cung cấp các

thông tin xác thực cần thiết

- _ Thêm mã API vào ứng dụng: Sử dụng mã API cung cấp bởi EmailJS để tích

hợp chức năng gửi email vào ứng dung.

- Kiém tra và triển khai: Thử nghiệm ứng dụng dé dam bảo rằng chức năng

LÌ i QUOTA REMAINING: | gi gi195 EMAILS " Welcome, Nguyen TranAnh Docs Support Sign Out

# Email Services Reset Password Template

28 Email Templates Content Auto-Reply Attachments Contacts Settings

{{subject}} @gmail.com

€ Email History

Content * From Name

— BOI Te Nguyen Tran Anh

‡E Events ima

a From Email * tah i Use Default Email Address

Lut Statistics — = @

KLTN_Application

& Team Members Hello {{to_name}},

Reply To

ff Account {{message}} {{reply_to}}

Have a good day! Bee

hội Personal Settings

Hình 2.2: Tạo dich vụ trên trang chủ của EmailJS

2.1.6 Firebase

Firebase là một nền tang phát triển ứng dung di động và web được thành lậpvào năm 2011 bởi Andrew Lee và James Tamplin tại San Francisco, Mỹ Ban đầu,Firebase bắt đầu với mục tiêu giúp các nhà phát triển xây dựng ứng dụng di động

nhanh chóng bang cách cung cấp các công cu dé dang sử dụng như cơ sở dit liệu thời

gian thực, xác thực người dùng va push notifications.

Năm 2014, Firebase đã tiến xa hơn bằng việc giới thiệu tính năng FirebaseRealtime Database, cho phép lưu trữ và đồng bộ dữ liệu thời gian thực giữa các thiết

bị Firebase Realtime Database là một phần quan trọng của việc phát triển ứng dụng

với Firebase, giúp các ứng dụng có khả năng đồng bộ dit liệu một cách nhanh chóng

Firebase được thiết kế dé dé dang sử dung cho các nhà phát triển, đặc biệt là

cho người mới bắt đầu Các API và SDK của Firebase có cấu trúc rõ ràng và tàiliệu hướng dan chi tiết Cung cấp nhiều địch vụ khác nhau như lưu trữ, xác thực,

cơ sở dữ liệu, thông báo đây, và nhiều hơn nữa Điều này giúp giảm thiêu việc phải

tích hợp nhiều dịch vụ từ các nguồn khác nhau Giúp phát triển ứng dụng nhanh

chóng bằng cách cung cấp các tính năng đã được xây dựng sẵn Thay vì phải xâydựng mọi thứ từ đầu, giúp tập trung vào phần logic cốt lõi của ứng dụng Firebasecung cấp dịch vụ lưu trữ đám mây, giúp quản lý và lưu trữ các tệp đa phương tiệnmột cách dé dàng mà không cần phải quản lý hạ tầng riêng Các dịch vụ như

Realtime Database và Cloud Firestore cho phép làm việc với dữ liệu thời gian

thực, giúp tạo ra trải nghiệm tương tác và đồng bộ trong ứng dụng Firebase

Authentication cung cấp các phương pháp xác thực người dùng đa dang như đăng

nhập băng email, mạng xã hội, và nhiêu hơn nữa.

e Nhược điêm

Sự phụ thuộc vào mang internet có thê là van đê nêu ứng dụng yêu câu hoạt

Mặc du Firebase cung cấp nhiều tính năng mạnh mẽ, nhưng đôi khi bạn có thé

gặp khó khăn trong việc tùy chỉnh chúng theo nhu cau cụ thé của ứng dụng

e Một số chức năng nồi bật của Firebase

- Firebase Realtime Database: Lưu trữ và đồng bộ dit liệu thời gian thực giữa

các thiết bị

- Firebase Authentication: Cung cấp xác thực người dùng và quản lý đăng

nhập.

- Firebase Cloud Firestore: Co sở dữ liệu dam mây, linh hoạt hon và mạnh

mẽ hon Realtime Database.

- Firebase Storage: Lưu trữ tệp da phương tiện như hình anh, video và tệp

- Firebase Cloud Messaging: Gửi thông báo đây đến các thiết bị di động

Trong đó, Firebase Storage là một dịch vụ lưu trữ đám mây, cho phép lưu trữ va quản

lý các tệp đa phương tiện như hình ảnh, video, tệp âm thanh và các tệp tĩnh khác trong

ứng dụng Firebase Storage giúp dễ dàng quản lý việc lưu trữ và truy cập các tệp trongứng dụng của mình mà không cần phải xây dựng và duy trì hệ thống lưu trữ riêng.Firebase Storage cho phép lưu trữ các tệp của bạn trên đám mây, loại bỏ nhu cầu phải

tự xây dựng và duy trì hạ tầng lưu trữ Có thể kiểm soát quyền truy cập đối với các

tệp được lưu trữ bằng cách sử dụng các quy tắc phân quyền Điều này cho phép bạn

xác định ai được phép xem, tải lên và chỉnh sửa tệp Cung cấp các URL tải về đễ dàng,giúp bạn chia sẻ các tệp với người dùng của mình Cho phép thực hiện các xử lý đốivới tệp ngay sau khi chúng được tải lên Điều này có thê hữu ích để tạo các phiên bảnthứ nguyên hay tạo các biêu đồ thumbnail, tự động tối ưu hóa việc lưu trữ và truy cậptệp cho hiệu suất tốt hơn Dễ dàng tích hợp với các dịch vụ khác của Firebase nhưFirebase Authentication dé kiểm soát quyền truy cập

e_ Cách triển khai Firebase Storage

- Tao dự án Firebase: Đầu tiên, cần tạo dự án Firebase và cấu hình dịch vu

Firebase Storage trong Firebase Console.

- Thém SDK: Nhung Firebase SDK vào mã nguồn cua ứng dụng dé sử dung

Firebase Storage.

- Tai lên tệp: Sử dung các API cung cấp bởi Firebase SDK để tải lên các tệp

vào Firebase Storage.

- _ Truy cập và quản lý tệp: Sử dụng API dé truy cập và quản lý các tệp đãđược lưu trữ, cũng như thực hiện các xử ly cần thiết

- Phan quyền truy cập: Thiết lập quyền truy cập đối với các tệp sử dụng quy

tac phân quyên của Firebase Storage nêu cân thiết.

Set up Cloud Storage

C1) Secure rules for Cloud Storage 2 Set Cloud Storage location

After you det 3 structure, you will need to write rules to secure your data

Learn moreG

@ Start in production mode

allow read, write: if false;

© Start in test mode

@ Allthird party reads and writes will be denied

Hình 2.3: Giao diện tạo dich vụ storage

2.2 Ant Design

2.2.1 Tống quan

Ant Design là một thư viện giao diện người dùng (UI) được phát triển bởi tập

đoàn Ant Group, một tập đoàn công nghệ hàng đầu tại Trung Quốc Thư viện này ra

đời vào năm 2015 với mục tiêu tạo ra một bộ công cụ thiết kế giao diện thân thiện, dễ

sử dụng và đồng nhất cho các dự án phát triển web và ứng dung

Sự phát triển của Ant Design là kết quả của sự hợp tác và đóng góp của cộng

đồng lập trình viên, thiết kế viên và người dùng trên khắp thế giới Từ khi ra mắt, Ant

Design đã trải qua nhiều phiên bản cải tiến, b6 sung tính năng mới và tối ưu hóa hiệusuất dé đáp ứng nhu cầu ngày càng đa dạng của cộng đồng phát triển ứng dụng Ngườiphát triển không chỉ tiết kiệm thời gian trong việc xây dựng giao diện người dùng, màcòn tận hưởng một cộng đồng phong phú và hỗ trợ đắc lực Các tài liệu chỉ tiết và ví

dụ minh họa giúp người dùng hiểu rõ cách sử dụng và tùy chỉnh các thành phần mộtcách dễ dàng

Ant Design nhanh chóng trở thành một trong những thư viện giao diện phổbiến hàng đầu, không chỉ tại Trung Quốc mà còn trên toàn cầu Được xây dựng trên

cơ sở nguyên tắc thiết kế Ant Design, thư viện này không chỉ mang lại giao diện tươi

sáng, tinh tế mà còn đảm bảo tích hợp mượt mà và hiệu suất cao

2.2.2 Ưu nhược điểm

e Uudiém

Thiết kế đẹp và hiện dai: Ant Design được thiết kế theo phong cáchtrong sáng, tươi mới và hiện đại Giao diện dễ nhìn, tạo cảm giác thân thiện với

người dùng cung cấp các thành phan giao diện người dùng (UI components)

có thiết kế đẹp và hiện đại Các thành phần này được tối ưu hóa cho trải nghiệmngười dung tốt nhất và mang lại một giao diện trực quan, hap dan

Cộng đồng lớn và hỗ trợ tốt: Có một cộng đồng lớn và đang phát triển

mạnh mẽ Có nhiều nguồn tài nguyên, ví dụ minh họa và hướng dẫn từ cộngđồng giúp người dùng dé dàng học hỏi và tận dụng tốt các tính năng của thư

viện này Điều này giúp giảm thời gian và công sức trong quá trình phát triển

Tích hợp tốt với React: Ant Design được thiết kế đặc biệt cho React,cho phép tích hợp tốt với các ứng dụng React hiện có Việc sử dụng thư việnnày không chỉ giúp xây dựng các giao diện đẹp mắt mà còn tận dụng các tính

năng và lợi ích của React, như Virtual DOM, quản lý trạng thái, và các thư viện bên thứ ba khác.

Tùy chỉnh linh hoạt: Cung cấp các công cụ tùy chỉnh mạnh mẽ, cho phépngười dùng điều chỉnh giao diện theo ý muốn Ban có thé tùy chỉnh các theme,

màu sắc, font chữ và các thuộc tính khác của giao diện để phù hợp với thương

hiệu hoặc yêu cầu cụ thể của dự án Không chỉ cung cấp các thành phần giao

diện cơ bản mà còn hỗ trợ các tính năng như định dạng ngày tháng, biểu đồ, vànhiều tính năng phức tạp khác

e Nhược điểm

Khả năng tùy chỉnh phức tạp: Mặc dù cung cấp các công cụ tùy chỉnhtốt, nhưng việc tùy chỉnh phức tạp hoặc triệt để có thể gặp khó khăn Các kháiniệm của nó có thê không phù hợp hoàn toàn với yêu cầu thiết kế của một số

dự án cụ thé, và việc thay đôi hoặc tùy chỉnh có thé đòi hỏi nhiều thời gian và

nỗ lực

Sự trùng lặp với CSS: thường xây dựng các thành phần giao diện với

các phong cách CSS định sẵn Điều này có thé gây ra sự trùng lặp CSS trong

ứng dụng, đặc biệt khi bạn sử dụng nhiều thành phần Việc quản lý CSS và tối

ưu hóa sẽ trở nên phức tạp hơn trong các ứng dụng lớn và phức tạp.

2.3 MySQL

2.3.1 Téng quan

MySQL là hệ quan trị cơ sở đữ liệu mã nguồn mở phổ biến hàng đầu trên thếgiới và đặc biệt được ưa chuộng trong quá trình xây dựng, phát triển ứng dụng Đây

là hệ quan tri cơ sở dữ liệu tốc độ cao, ôn định và dễ sử dụng, có khả năng thay đôi

mô hình sử dụng phù hợp với điều kiện công việc chuyên môn MySQL hoạt động

trên nhiêu hệ điêu hành, cung câp một hệ thông lớn các hàm tiện ích rât mạnh.

MySQL hỗ trợ ngôn ngữ truy vấn SQL và được sử dụng rộng rãi trong các ứngdụng web và dự án phần mềm Nó được tối ưu hóa dé cung cấp hiệu suất cao và hỗtrợ các tính năng nâng cao như triggers, stored procedures và views MySQL cung cấp

tính năng bảo mật và phân quyền để bảo vệ dữ liệu và ngăn chặn truy cập trái phép

Nó cũng hỗ trợ nhiều nền tảng và có một cộng đồng phát triển đông đảo, cung cấp

nhiêu tài liệu và hồ trợ.

Với tốc độ và tính bảo mật cao, MySQL thích hợp với các ứng dụng có truycập cơ sở dữ liệu trên internet MySQL có thé tải miễn phí từ trang chủ với nhiều

phiên bản cho các hệ điều hành khác nhau như: phiên bản Win 32 cho các hệ điều

hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS

Hình 2.4: Mysql và các loại cơ sở dữ liệu khác

[ Base de datos |

2.3.2 Ưu điểm

e Sử dụng dễ dang: MySQL là cơ sở dữ liệu tốc độ cao và ôn định, công cụ này

dễ sử dụng và hoạt động trên nhiều hệ điều hành cung cấp hệ thống lớn các

hàm tiện ích.

e Tính bảo mật cao: MySQL phù hợp với các ứng dụng có truy cập cơ sở dữ liệu

trên internet vì nó sở hữu nhiều tính năng bảo mật, thậm chí là bảo mật cấp

cao.

e Đa tính năng: MySQL có thé hỗ trợ hàng loạt các chức năng SQL từ hệ quantrị cơ sở dữ liệu quan hệ trực tiếp và cả gián tiếp

e Khả năng mở rộng và mạnh mẽ: Công cụ MySQL có khả năng xử lý khối dit

liệu lớn và có thê mở rộng khi cân thiết.

e Tương thích trên nhiều hệ điều hành: MySQL tương thích để chạy trên nhiều

hệ điều hành, như Novell NetWare, Windows, Linux, nhiều loại UNIX (như

Sun, Solaris, AIX và DEC, UNIX), OS /2, FreeBSD, MySQL cũng cung

cấp phương tiện mà các máy khách có thể chạy trên cùng một máy tính vớimáy chủ hoặc trên một máy tính khác (giao tiếp qua mạng cục bộ hoặc

Internet).

e Cho phép khôi phục: MySQL cho phép các transaction được khôi phục, toàn

vẹn và phục hồi sự có

2.3.3 Nhược điểm

e MySQL bị hạn chế dung lượng, cụ thể, khi số bản ghi của người dùng lớn dan,

sẽ gây khó khăn cho việc truy xuất dữ liệu, khiến người dùng cần áp dụng nhiềubiện pháp để tăng tốc độ chia sẻ đữ liệu như chia tải database ra nhiều server,

hoặc tạo cache MySQL.

e MySQL có thé thiếu một số tính năng nâng cao mà các hệ quan trị cơ sở dữliệu khác có Ví dụ, nó không hỗ trợ các kiểu dữ liệu phong phú như JSON,ARRAY hay hỗ trợ chuẩn SQL đầy đủ của các hàm truy vấn phức tạp

Bootable, Minimal, Ops-Ready

INTEGRATION BIG DATA

SPRING CORE

Hinh 2.5: Spring IO platform

Spring Boot là là một framework Java được sử dung rộng rai, nằm trên tầng 1OExecution (Tang thực thi) của Spring IO Framework Spring Boot là một bước tiếptheo của Spring, dé làm cho Spring dé dang hơn trong việc thiết lập va phát triển ứng

dụng Với Spring Boot các cấu hình Spring được giảm thiểu tối da Spring Boot hỗtrợ các bộ chứa nhúng (embedded containers) điều này cho phép các ứng dụng web

có thể chạy độc lập mà không cần phải triển khai lên các Web Server

Tích hợp tốt với các công nghệ phổ biến trong cộng đồng phát triển, cho phép

kết nối dễ đàng với cơ sở đữ liệu, hệ thống kiểm thử và các thư viện khác Nó cũng

hỗ trợ tích hợp với các nền tảng đám mây như Kubernetes và Docker, giúp việc triển

khai và quản lý ứng dụng trở nên thuận tiện và hiệu quả hơn.

Với Spring Boot, quản lý cấu hình và giám sát hiệu suất ứng dụng trở nên dễdang Nó cung cấp các công cụ cho việc quản lý các tệp cau hình, cho phép định cấuhình linh hoạt và chuyên đổi dé dàng giữa các môi trường khác nhau Đồng thời,Spring Boot cung cấp các công cụ giám sát và theo dõi hiệu suất ứng dụng, giúp phát

hiện và sửa lỗi một cách nhanh chong.

Hỗ trợ Dependency Injection và các tính năng mạnh mẽ khác của SpringFramework, Spring Boot cho phép tao ra các microservice độc lập và có thé mở rộng

dễ dàng Điều này giúp tách biệt mã lệnh và tạo ra các microservice, linh hoạt và dễ

dàng mở rộng.

Chúng ta có thé dùng spring Boot dé tạo ứng dụng Java Web chạy bằng command line

'java -jar' hoặc xuất khẩu ra file war dé triển khai lên Web Server như thông thường

Spring Boot cung cấp cho Chúng ta một "CLI Tool" để chạy các kịch bản Spring

(Spring scrIpts).

2.4.2 Các khái niệm và đặc trưng cơ bản

e©_ SpringApplication: Day là một Class giúp để khởi chạy những ứng dụng bắtđầu từ hàm main Đề bắt đầu sử dụng, bạn chỉ cần thiết lập các method run

e CORS: là một khái niệm quan trọng khi chúng ta muốn cho phép các ứng dụngfrontend (chạy trên các tên miền khác nhau) truy cập và tương tác với các API

backend CORS giúp xác định các quy tắc và chính sách cho phép hoặc từ chốitruy cập từ các nguồn gốc khác nhau

e Profiles: Spring Boot Profiles cung cấp phương pháp dé phân chia các cau hìnhriêng biệt cho từng môi trường Các annotation bao gồm @Configuration và

@Component sẽ được đánh dau profiles nhằm mục đích giới han môi trường

cũng như thời điểm tải lên

e Externalized Configuration: Tinh năng nay cho phép người dùng có cấu hình

từ bên ngoài Vậy nên một ứng dụng có thé dé dàng tạo dung và vận hành trên