TOM TAT KHÓA LUẬNĐề tài khóa luận “Web hỗ trợ dịch vụ sửa chữa nhà cửa” là một đề tài hướng đến đôi tượng người dùng có nhu câu sửa chữa các dich vụ tiện ích vé nhà cửa trên website một
Trang 1ĐẠI HỌC QUOC GIA TP HO CHÍ MINH
TRUONG DAI HOC CONG NGHE THONG TIN
KHOA HE THONG THONG TIN
NGUYEN THANH LE - 16520655 TRAN MINH KHOA - 16520606
KHOA LUAN TOT NGHIEP
Web Support Home Repair Services
KỸ SƯ NGÀNH HỆ THÓNG THÔNG TIN
Trang 2ĐẠI HỌC QUOC GIA TP HO CHÍ MINH
TRUONG DAI HOC CONG NGHE THONG TIN
KHOA HE THONG THONG TIN
NGUYEN THANH LE - 16520655 TRAN MINH KHOA - 16520606
KHOA LUAN TOT NGHIEP
WEB HO TRO DỊCH VU SUA CHỮA NHÀ CUA
Web Support Home Repair Services
KY SU NGANH HE THONG THONG TIN
GIANG VIEN HUONG DAN
THS DO DUY THANH THS DO THI MINH PHUNG
Trang 3THÔNG TIN HỘI ĐÒNG CHÁM KHÓA LUẬN TÓT 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.
Trang 4LỜI CẢM ƠN
Lời đầu tiên, nhóm tác giả xin chân thành cảm ơn nhà trường cùng các giảng viênKhoa Hệ thống Thông Tin — Dai học Công Nghệ Thông Tin đã truyền đạt những kiếnthức nén tảng, kinh nghiệm quý giá trong suốt thời gian học tập tại môi trường đại học
dé nhóm tác giả có đủ khả năng hoàn thành khóa luận này
Nhóm tác giả xin chân thành gửi lời cảm ơn sâu sắc đến Ths Đỗ Duy Thanh và Ths
Đỗ Thị Minh Phụng đã trực tiếp hướng dẫn, hỗ trợ giúp đỡ nhóm tác giả trong suốt quátrình thực hiện khóa luận Những lời động viên, góp ý chân tình của Thay cô là động lựcquý bau để nhóm vượt qua những khó khăn khi tìm hiểu và thực hiện khóa luận
Lời cuối cùng, nhóm tác giả xin bay tỏ lòng biết ơn sâu sắc đến gia đình, bạn bè,người thân đã động viên, khích lệ nhóm trong suốt quá trình thực hiện đề tài Tuy nhiên,
do bản thân nhóm tác gia còn hạn chế về mặt kiến thức chuyên môn va kinh nghiệm thực
tế nên khó tránh khỏi những thiếu sót nhất định Do đó, kính mong nhận được những ýkiến đóng góp từ phía quý Thay cô dé em hoàn thiện minh hơn Một lần nữa, xin cảm
ơn tất cả những sự giúp đỡ quý báu đề khóa luận được thực hiện thành công.
Trân trọng!
Thành phố Hồ Chí Minh, ngày 19 tháng 07 năm 2021
Sinh viên thực hiện đề tài
Trần Minh Khoa
Nguyễn Thanh Lễ
Trang 5MỤC LỤC
¡0/9500 5
DANH MỤC BANG BIEU 55: 22t th re 11
DANH MỤC SƠ ĐỎ, HINH ANH : 5252c 22 tt 14
M.90)28)/10/9/1001405100.000227 20
(96.1005 2Chương 1 TONG QUAN DE TÀI 22-52 5< EESEESEESEEEEEEEEEEE2EEEEEEEEEEkerkrred 3
1.1 Hiện trạng và đặt vấn đỀ tt T1 EEE11111115111111111111111 111111111111 sree 3
11.1 Đặt vấn đề 4⁄2 08 Gạo ằộỐổỐớ2-S<<2 set 31.1.2 Tìm hiểu ứng dụng hỗ trợ dịch vụ sửa chữa nhà cửa đã xuất hiện 4
1.1.2.1 Cac Ứng dụng - - Ăn HH ng nà 4
1.122 Nhậnx6f nh % Ế ok 6
PC? đê 7¬ 7 6 nh số ` 7
1.3 Pham vi nghiÊn CỨU - 2 - 6 5 E131 E911 1 931 1 91 2v ng nh nhưng nà 7
L.A Bố cục báo cáo c-cct n1 11111111111 1111111111111 1111111111111 1111k 8
Chương2 CƠ SỞ LÝ THUYÊẾT -2-©22+S+EE+EEEEE2EEEEEEEEEEEEEEErEerkrrerreee 10
2.1 Tìm hiểu về ReactJS 2::2222+t22Et1221112211122 re 10
2.1.1 Tổng quan về ReactJS o.cccecccccccccsscssesssessessessessessecsessesssssessessessessessessessecaes 10
2.1.2 Redux và Context API oo cceeceseseeeeseeseeeeceeeeseceeeeseseeeeaeeeeeseeeeeaeeaeeees 10
2.2 Tìm hiểu về Spring boot ccecccsscsssesssessesssesssessesssessesssessesssessesssessesssessesssesseseses 14
2.2.1 Tổng quan về Spring boot cceccecessesssessessessessessssesssesscssessessessessessesseseeaes 14
2.2.2 Spring data JPA(Java Persistence AP]Ï) so ki, 14
2.2.3 Một số công cụ trợ giúp Spring Boot cccccccscsssesssessesssessesssessesssesssesseesseess 152.3 Tìm hiểu về REST APIL -c¿222+t22EExt2EEEtEEEtrttErrttrrrrrrrrrrrrrrre 152.4 Tìm hiểu về Neighborhood-Based Collaborative Filtering - 17
Trang 62.4.2 User-user Collaborative FIÏ(€TINE, - «cv ssiksseesrsee 19
2.4.2.1 Mức độ tương đồng (Similarity functions) -cs¿©sz+s<5s4 19
2.4.2.2 Chuẩn hóa dữ liệu -222cccttEEErrrtrrrriirrrrii 21
2.4.2.3 Dự đoán kết qua (Rating prediction) -sc©cscccccxerxerxeee 26
2.4.3 Item-item Collaborative FIÏ(€TInE - - -SĂ Sen SH Hư, 27
Chuong 3 | PHAN TÍCH THIET KE HE THONG ccc:cccccccsrx 32
3.1 Phân tích yêu Cau o.sceccescecccsssssessessessssssssesssssessessessessessssessueseseessessessesseeseseeaees 32
3.1.1 Các yêu cầu chức nang o.cceccccessesssssssssessessessessessessessessssssessessessessessessessecaes 323.1.2 Yêu cầu phi chức năng - 2© +E£SE2E2EE2E12E122122171 717121 cree 33
3.2 Phân tích thiết kế hệ thống - ¿22 ©E£+EE+EE£+EE+EEEEEEEEEEEEEEEEkrrkrrrrerkee 34
3.2.1 Các chức năng của hệ thống - 2 2£ ©2++Ext2EE+EECEEEEEEerkerkesrrrree 343.2.2 Các tác nhân của hệ thống - 5£ ©5£+2£+E£+EE£EE+EEEEEEEEerkerkrrrerree 35
3.3.1 Danh sach Usecase 41
3.3.1.1 Phía người dùng - SĂ 211kg ky 4I 3.3.1.2 Phía người chủ - Ăn HH HH gàng gi, 43
3.3.1.3 Phía thợ sửa chữa - c S112 11v kg vn 44
3.3.2 Dac ta USeCASC nan e Ả 45
3.3.2.1 Usecase khách hang đăng ký 0 eee eeeeeeseeeeeeseeeeeeseeeeeeeeeeneeeaeenees 45
3.3.2.2 Usecase khách hang dang nhập - ¿+55 +++£++++eseexeereexss 46 3.3.2.3 Usecase chọn nơi sửa chữa - c SG S231 St erxe 47
3.3.2.4 Usecase thanh toán OnÏIn€ - s6 + 1k3 9v vn ng rưy 49
3.3.2.5 Usecase đăng thông báo sửa chữa - cnksnngniey 50 3.3.2.6 Usecase cập nhật thông tin cá nhân - 5 55 5+ £+evssersexss 51 3.3.2.7 Usecase đánh giá công ty/thợ sửa chữa -cc-ccsssersees 52 3.3.2.8 Usecase chủ công ty đăng ký -.- cty 53 3.3.2.9 Usecase chu công ty đăng nhập 0 eee eeeseeceseeseeeeeseceseeseeeeeeeeenes 54
3.3.2.10 Usecase thêm mới dich VỤ ¿5 2< << + +33 +22 Eeszeeeeeeesseexe 55
3.3.2.11 Usecase xem danh sách bai đăng sửa chữa - << <5 56
3.3.2.12 Usecase chọn và xếp lịch cho khách hàng - 2 25255: 57
Trang 73.3.2.13 Usecase phân công cho nhân vIiÊn - s5 55s £+£sesseeseess 58 3.3.2.14 Usecase xem danh sách nhân viÊn - +5 «<< *++v+seeseeese 59
3.3.2.15 Usecase thêm mới nhân VIÊH - 5 «+ +5 + 2£ + E+eeseEsessereeese 60
3.3.2.16 Usecase cập nhật nhân VIÊN 5 5+ +22 x + Eseseersreerrree 61
3.3.2.17 Usecase chủ công ty thống kê - 2-2 2 s+++£E+EEeEEerEerkerrerreee 62
3.3.2.18 Usecase thợ sửa chữa đăng ký - Ăn tt ng re, 63 3.3.2.19 Usecase thợ sửa chữa đăng nhập - - c cà sseeserseee 64 3.3.2.20 Usecase xem lịch phân công - 5+ xxx +Esseersreserrree 65 3.3.2.21 Usecase báo cáo CONG VIỆC - HH TH ng Hư, 65
3.3.2.22 Usecase thợ sửa chữa cập nhật thông tin cá nhân 66
3.3.2.23 Usecase thống kê công ViỆC -¿- 2©22+22+EE+EE£EEEEEeEEerErrkerrerreee 673.4 Sơ đỗ tuần tự ch nh HH HH he 69
3.4.1 Sơ đồ tuần tự khách hàng đăng ký - 5¿©<+x+xxerkrerxrrxeerxeree 693.4.2 Sơ đồ tuần tự khách hàng đăng nhập ¿- 2 ¿©s++++z++zx++zxerxs 693.4.3 Sơ đồ tuần tự chọn nơi sửa chữa - 2 + +x+E+ESEEE+E+E+ESEEEErErErrrrerersree 703.4.4 Sơ đồ tuần tự đăng thông báo sửa chữa - 2-5255 5xczxccxccrcrrecree 703.4.5 Sơ đồ tuần tự hiển thị chi tiết công ty sửa chữa - «-+cc<xcseesse 713.4.6 Sơ đồ tuần tự tìm thợ sửa chữa gần nÏhẤT 2-55 SE ‡EvEEeEerereererxee 713.4.7 Sơ đồ tuần tự thanh toán online -‹::-cs++cv+trtrxxrrerrrrrrrrrrrrrrrree 723.4.8 Sơ đồ tuần tự khách hàng cập nhật thông tin cá nhân - 72
3.4.9 Sơ đồ tuần tự đánh giá công ty/thợ sửa chữa -©sc©cscccccrxcres 73
3.4.10 So đồ tuần tự chủ công ty đăng ký - 2 s+cs+ckerxerxerkerrerrerree 733.4.11 _ Sơ đồ tuần tự chủ công ty đăng nhập - 2-5 xcxczxczxcrrecsee 74
3.4.12 Sơ đồ tuần tự thêm mới dịch vụ -.-:-ccccccsccrverrrrrrrrrrrrrrrrrrre 74 3.4.13 So đồ tuần tự xem danh sách bai đăng sửa chữa -. -5-5 75
3.4.14 So đồ tuần tự phân công cho nhân viên 2-5222 sz2z+c+z 753.4.15 So đồ tuần tự xem danh sách nhân viên - - ¿2 + s2 +zx+x+z+xezerez 763.4.16 So đồ tuần tự thêm mới nhân viên - 2+2 +E+E+EE+E+EEzE+Ezerzsrez 76
3.4.17 So đồ tuần tự cập nhật nhân viên -2- 2+ 2x+2£z+Exczrzerxrzrxrres 71 3.4.18 So đồ tuần tự chủ công ty thống kê ¿-2- +¿+c++xczrserxrzrxrree 71
Trang 83.4.19 So đồ tuần tự thợ sửa chữa đăng ký -¿-©cc2ccccxcerserxerrreree 783.4.20 So đồ tuần tự tho sửa chữa đăng nhập - +5 cSxssseerserees 78
3.4.21 So đồ tuần tự xem lịch phân công - - + ki, 79 3.4.22 So đồ tuần tự báo cáo công viỆC -:- ¿22x22 eEEcerkerkrrrrrree 79
3.4.23 So đồ tuần tự thợ sửa chữa cập nhật thông tin cá nhân - 80
3.4.24 So đồ tuần tự thống kê công Vi6C eecceccccsecsessessesssessessessessessessessesseesecaes 80
3.5 Ánh xạ dữ liệu quan hệ từ mô hình hướng đối TƯỢN cà seseiee 81
3.5.1 Mô hình quan hệỆ - 5 6 2c 11129 v.v ng ng ng nriệt 81
3.5.2 Mô tả các kiểu dữ LGU eeeseeccsseecesssecesseecessseecsnsceesnecessnscessnececnnecesnneeenness 82
3.5.2.1 Tén quan hệ CUSTOMER SG St S9 S9 re, 82 3.5.2.2 _ Tên quan hệ COMPANY - St St St re 82 3.5.2.3 Tên quan hệ EMPLOY EE - SG 12132 3E EEsrrrrersee 83
3.5.2.4 _ Tên quan hệ SERVIC - - 21+ 2t S+k SE + ssrkrrrrrrkrrrrrrree 84
3.5.2.5 _ Tên quan hệ TYPE SERVICE - -Ă + S* set 85
3.5.2.6 Tên quan hệ TYPE ƯNÏIT ¿5 + + + + sesererrerrrrrrrrrreree 85
3.5.2.7 Tên quan hệ REGISTER SERVICE - 5-55 ++s<+s>+>+exses+ 85
3.5.2.8 _ Tên quan hệ PROCEESS -L S 1S H1 HH Hy ng rey 86 3.5.2.0 Tên quan hệ ACCOUNTT - Ăn ng ey 87
3.5.2.10 Tên quan hệ ROLE - ¿5222232132 E*EEEEEEEerreerrrrrrrrrrrrrree 87
3.5.2.11 Tên quan hệ REVIEW - S nS SH HH HH HH HH re 87
3.5.2.12 Tên quan hệ POST ecceeseesceceecceceeeeeeeseeseeaeeseeseeeeeeeeeeeseeseeats 88
3.6 Thiết kế giao diện và Xử LY cceccscccssesssessssssesssessesssecsecssecsssssecssessecsuecsessusesecsseeees 89
3.6.1 Sơ đồ màn hình ccs-52xt2E tt re 89
3.6.2 Danh sách các màn hìnhh - - : c1 +13 +21 E #2 ESEESrErsrrrirererrrkrrrvre 90
3.6.2.1 Phía người dùng - -.- c5 kg HH ey 90
3.6.2.2 _ Phía người Chủ - - cv TT TH HH gu HH như 92
3.6.2.3 Phía thợ sửa chữa -. 2c 31121 ng ven 94 3.6.3 M6 ta cdc man hinh " 95
3.6.3.1 Màn hình khách hang đăng nhập 55-5525 <++£seesserseess 95
3.6.3.2 Màn hình khách hàng đăng ky - 5 55c kSxSssEseksserseeee 95
Trang 93.6.3.3 Màn hình danh sách nơi cung cấp dich vụ sửa chữa xung quanh 963.6.3.4 Màn hình thông tin chỉ tiết công ty sửa Chita ccccceeeseeseeeeseeeee 973.6.3.5 Màn hình thông tin chi tiết thợ sửa chữa - ¿z5 98
3.6.3.6 Màn hình đăng thông báo sửa chữa - - Sen ssssieeireeee 99
3.6.3.7 Màn hình đánh gia công ty/thợ sửa chữa -c sexy 100
3.6.3.8 Màn hình thanh toán online << s + +sv*seEseiksseerse 101
3.6.3.9 Màn hình thông tin cá nhân 55 55+ + £+s+seEeeeeserseessee 102 3.6.3.10 Màn hình danh sách bai đăng 5 5 525 + +kseserrrereske 103
3.6.3.11 Màn hình danh sách dịch vụ đã đăng ký +sccsc<se2 104
3.6.3.12 Màn hình chủ công ty đăng ký - Sc se tsseieeeirerreske 105 3.6.3.13 Màn hình chủ công ty đăng nhập - - c++-<++cssssereseesee 106
3.6.3.14 Màn hình danh sách nhân viÊn - -¿- -++ + +2s£+s£++£+v£seesess 106
3.6.3.15 Màn hình cập nhật nhân viên ¿<5 52+ *++£+*‡£+eeseeexeeerrs 107
3.6.3.16 Màn hình thêm mới nhân viÊn - 5555 + £+**++e+se+eexseesess 108
3.6.3.17 Màn hình danh sách bai đăng thông báo sửa chữa - 109
3.6.3.18 Màn hình phân công nhân viÊn - 5 +5 +2 ££+seE+seEsseeesse 109
3.6.3.19 Màn hình danh sách dịch Vu - <5 <5 +22< << ££+<+sseeeeceszzes 110
3.6.3.20 Màn hình thêm mới dịch VỤ -.- c5 2+ ++s+vkseseeeerseree 111
3.6.3.21 Màn hình chủ công ty thống kê - 2 2 2©2+++zx+zE+£xerxerxered 112
3.6.3.22 Màn hình thợ sửa chữa đăng ký .- - 5+ *++ksessersseesee 113 3.6.3.23 Màn hình thợ sửa chữa đăng nhập - ¿- 5 55+ £+s<+sxseessee 114
3.6.3.24 Màn hình thợ sửa chữa câp nhật thông tin cá nhân - 115
3.6.3.25 Màn hình xem lịch phân công - +55 +++s£+s++exssssereeeesee 115
3.6.3.26 Màn hình thợ sửa chữa thống kê 2- 2 2 s+x+£E+£Eerxersered 116
Chương4 AP DUNG THUAT TOAN weceessssesssesssesseessessesssessecssessessessessseesvesees 118
4.1 Dữ liệu đầu va0, đầu 1a eecsseeecssseecssseeeesssneecssneeecsssnecessnieeesssneeessneeeeen 118
4.2 Phương pháp thực Wi@1 on eee eeceseeeceeseeseceeeseeeseesececeeseeeeeeseeeeeaeseeeeeeeeeaes 118
4.2.1 Xây dựng ma trận đầu Va0 ccccscccsesssesssessesssecsesssesseessessesssessesssesssesseessees 119
4.2.2 Tính toán ma trận trung bình - - 5 + + 2+ E**E+Eeseeeeereerrerrrvre 119
4.2.3 Tính toán ma trận tương ẦỰ - Set 1x21 ng re 120
Trang 104.2.4 Dự đoán ma tran missing dữ lIỆU 5 5555 S+<**++++eexeeeresereees 120
4.2.5 Ma trận Kết quả - + ++St‡EkeEEEEEEE211211211211211211 11111111 cre 121
4.3 Thiết kế hệ thống 2-2 ©E‡EE‡EESEEEEESEEEEEE211211211211111171 111111 xe 122
4.3.1 Sơ đồ usecase tìm thợ chất lượng T 122
4.3.2 Sơ đồ activity tìm thợ chất lượng tốt 2-2 2 s+cx+zx+rxerxersered 1234.3.3 Sơ đồ sequence tìm thợ chất lượng t6t - 2-2 s+cx+cx+rxersred 124
A.A Kết quả thực nghiệm - + ©5£+Sx+SEEEEEEEEEEE2E1711221711221711 1121 cre 124
4.3.1 Kết quả thông qua ví dỤ -. - ¿2s ©£+E+EE£EEtEEEEEEtEEEerkrrrkerkerrrees 124
4.3.2 Kết quả từ CSDIL -2-©-<+SE2EEEEECEEEEEEE22121127121121 21.1 re 125Chương 5 CÀI ĐẶT VÀ KIEM THỬ -2-©-<++++++x+EEtrxezrxerreerxee 126
5.1 Cài đặt và triển khai website - - ¿St kề EEEE E111 111111111, 126
5.1.1 Cong cu SỬ dỤng Ăn HH HH HH HH 126
5.1.1.1 Phía Se€TV€Y - 2c S SH ng ven, 126
5.1.1.2 Phía Client 2-22c22EEtEEkEEEiEEkrErkrerkrerkrerkrerrvee 126
5.1.2 Triển khai website c.cccscccsscsssessesssesssssessssssesssessesssessesssessessseesessseeseessess 126
5.1.2.1 Môi trường phat triỂn - 2-2 +E£+E2£E£EE2EEEEEtEkerkerkerkeree 1265.1.2.2 Môi trường triển khai 2-2-5 5t2E2E2E£EESEEEEEeEkerkerkerkeree 127
>> nh + Ý ÝÔ ẤÑẤ<{ä., , 127Chương 6 KẾT LUẬN VÀ HƯỚNG PHÁT TRIEN -:-z©5s¿ 134
6.1 Kết quả đạt được -¿- -5+ 21 2k2 EE21211211211211211211 2111111111 cxee 1346.2 Ưu điểm của hệ thống 2- 5:22 SE22EE9EE2EEEEEEEEEEE1271211271 212212 crk 1346.3 Hạn chế của hệ thống "— 1346.4 Hướng phát triỂn 2 <+S<+SE+EE#EEEEEEEEEEE1211211211211121 111111111 cyee 134
Tài liệu tham khảo - - ¿1162221111211 1 112111111 11 93 111911 1911 1n vn 135 PHU LUC 1 137
Trang 11DANH MỤC BANG BIEU
Bảng 0.1: Danh mục từ Viét tắt ¿- 2: 5¿2S SE22EEEEESEEE211271211271211221 2111121 20Bảng 2.1: Kiểu dữ liệu REST AIPI 2- 5: ©52+S<‡EESEE£EEEEEEEEEEEEEEEEEEEEErEkrrkrrrkerkee 17
Bảng 2.2: Utility matrix ( Y } -.c- SG 2323111112513 181151 11111111111 ket 20
Bảng 2.3: Ví dụ user-user Collaborative FIÏt€TIng - - «+ s+skssesseeesereerke 21
Bang 2.4: Giá tri trung bình raf(ITE - - 5 621313931313 113 111111111 kg nrnrrệt 21
Bảng 2.5: Normalized utility matrix Yo ee eeeeseeeecesecseceseeeececeeseceeeeaeceeceaeseeeseeneeess 22
Bang 2.6: Similarity matrix S oo eecceecesceesceceseeesceceeeceaeeescessaeceaeeeaeesaeeeaeeseeseaeeeaeeeaee 24
Bảng 2.7: Dự đoán các (normalized) - - - c2 132311 E+EEEseEeereerreerserrrrree 27
Bang 2.8: Dự đoán kết qua rating Ÿ :- 2: +2E2E££EE+EEEEECEEEEEEEkerkerkerkerreee 27Bang 2.9: Utility Matrix ban đầu 2-2 25 EE2E2EE£E2EEEEEEEEEEEE2EEECEEcrkrrrree 30Bang 2.10: Utility Matrix đã được chuẩn hoá 2-22 x2++£xt£x+rxzxerxezrserxee 30
Bảng 2.11: Similarity matrix Š s13 ng nghệ 31
Bang 2.12: Dự đoán các (mormalized) ee ecceccesecseeeeeseeeseeseeeeeeaeceeeeaeceeeseeeeeaeensenes 31
Bang 3.1: Các tác nhân của hệ thống phía chủ công ty cececcessessessesseessessessessessesseeseeaees 36Bang 3.2: Các tác nhân của hệ thống phía khách hàng - 2-2-5222: 37Bảng 3.3: Các tác nhân của hệ thống phía thợ sửa chữa - sàn 39
Bảng 3.4: Danh sách usecase phía người dùng .- - s + + x*++SskEssisreerrsrerre 4I
Bang 3.5: Danh sách usecase phía người ChỦ - 5c + + *sseesirrireseeerree 43
Bảng 3.6: Danh sách usecase phía thợ sửa chữa .- 5 c1 S* sgk, 44
Bang 3.7: Mô tả kiểu dữ liệu quan hệ CUSTOMER 2- 5 ©522x2zz+£xczzzerxez 82Bảng 3.8: Mô tả kiểu dữ liệu quan hệ COMPANYY - - Ác nghệ, 82
Trang 12Bảng 3.9: Mô tả kiểu dữ liệu quan hệ EMPLOYEE À 2-5222 x+22+2cx2z++zxez 83
Mô ta kiéu dữ liệu quan hệ SERVICT - c5 S5 1+3 kEsseksreerreeree 84
Mô tả kiểu dữ liệu quan hệ TYPE_SERVICE 2- 2+ 5+2: 85
Mô tả kiểu dữ liệu quan hệ TYPE_UNIT -2 ©5+2cxzs+ecsz+2 85
Mô tả kiểu dữ liệu quan hệ REGISTER_SERVICE - 85
Mô tả kiêu dữ liệu quan hệ PROCESS 2-22- 222 ©5z+22+c2zxcrxrsree 86
Mô tả kiểu dữ liệu quan hệ ACCOUNTT - 2: 2 s¿22z+£x+2z+zxczrxcres 87
Mô tả kiểu dữ liệu quan hệ ROLE csccscscssesssessssssesssessesssecsesssesstessesseeesess 87
Mô ta kiểu dữ liệu quan hệ REVIEW ccccccesccsccsscssessessssssesessessessesseeseeseesees 87
Mô tả kiểu dữ liệu quan hệ POST o ececceccccscsssessseeseessecseeesecseseseeseeseeseeesees 88
Danh sách các màn hình phía người dùng - - -«- «<< £+e+sexseess 90
Danh sách các màn hình phía người chủ - s55 <+£+ec+exseeserses 92
Danh sách các màn hình phía thợ sửa chữa - 5< «<< e+seessee 94
Mô tả màn hình khách hàng đăng nhập - - - 5555 <+s£+e++ex+exss 95
Mô tả man hình khách hang dang ky eee eeeeseeeeeeseeereeeeeeeeseeseeeseeseeees 96
Mô tả màn hình danh sách nơi cung cấp dịch vụ sửa chữa 96
Mô tả màn hình thông tin chi tiết công ty sửa chữa . 2: 98
Mô tả màn hình thông tin chi tiết thợ sửa Chita c.ccccceesesseseeseeseeseeeees 98
Mô tả màn hình đăng thông báo sửa chữa - - 5c +s<++cssesereses 99
Mô tả man hình đánh giá công ty/thợ sửa chữa -«<<<<<++ 100
Mô ta màn hình thanh toán onÏIne «+ £+se+sxesseeserseerses 101
Mô tả màn hình thông tin cá nhân - - 5 5 +5 +2 skEsseEsseeeskres 102
Trang 13Bảng 3.31: Mô tả màn hình danh sách bai đăng - - 5 55 + +2 s+vseereeesers 103
Bảng 3.32: Mô tả màn hình danh sách địch vụ đã đăng ky -<<<<<<+ 104
Bảng 3.33: Mô tả màn hình chủ công ty đăng ký c S- S++ssiseiseekrsee 105
Bảng 3.34: Mô tả màn hình chủ công ty đăng nhập - ¿- 55+ ++cc+<c+ecss+ 106
Bảng 3.35: Mô tả màn hình danh sách nhân viÊn - 5 5 + ££+sksseessseesse 107
Bảng 3.36: Mô tả màn hình cập nhật nhân viên - - 5 55+ 5+ £+<£+vseeeseesexss 107
Bảng 3.37: Mô ta màn hình thêm mới nhân vIÊn - - 5 + «+ 2s £+v+seeseesess 108
Bang 3.38: Mô tả màn hình danh sách bài đăng thông bao sửa chữa 109
Bảng 3.39: Mô tả màn hình phân công nhân viên s5 55555 £++x£++seessx 110
Bảng 3.40: Mô tả màn hình danh sách dich vụ - 5 + +25 + £+e+sexseseesersexes 111
Bảng 3.41: Mô tả màn hình thêm dich VỤ - - <5 5- S22 ***2E++kE+seeEeeereeeesrserree 111
Bang 3.42: Mô ta màn hình chủ công ty thống kê 2 2 2 2 +£+2£E+£Ezzxzzs2 112
Bảng 3.43: Mô tả màn hình thợ sửa chữa đăng ký - 55c S< + s+ssvrseseres 113
Bảng 3.44: Mô tả màn hình thợ sửa chữa đăng nhập 5+ + ++<++ex+exs+ 114
Bảng 3.45: Mô tả màn hình thợ sửa chữa cập nhật thông tin cá nhân 115
Bảng 3.46: Mô tả màn hình xem lịch phân công 5 55+ +++<*£++£++e++ersss 116
Bang 3.47: Mô tả màn hình thợ sửa chữa thống kê 2-2 2 5 s2 £x+zxezxezed 116
Bảng 5.1: KiỂm thử - 2-5-5522 2EE21211221271217111211211211211211 111111 1111k 127
Bảng A.0.1: Danh sách AIPÌ 5 + x9 TH TH HH ng nh 137
Trang 14DANH MỤC SƠ DO, HÌNH ANH
Hình 1.1: Ứng dụng bTaskee 2-2 SE SE£SE£EE£EE2EE2EE2E12E1E71E7171 71211112111 cre 4
Hình 1.2: Ứng dụng JubViec - ¿s2 z+Ek£2EEEEE2EEEE1221211271711271211 1121 5 Hình 1.3: Ứng dụng HouseCare c.scscsessssssesssessssssesssessesssessesssessesssecsssssesssessessseesesaseesess 6
Hình 2.1: Cách thức hoạt động của ReduX” ¿+ ¿2 ¿5+ SSS+E+EeEeEexexexexexexexersse 11
Hình 2.2: Cách thức hoạt động của Context APY! o.c.cccccccccscscscscscsescscscsescsesescscscscsesees 11
Hình 2.3: Sơ đồ gửi nhận dữ liệu giữa client và Server ceceeccsseeseessesesessesseesesseeseeaees 12Hình 2.4: Sơ đồ luồng xác thực JWWTT? :-©5¿ +22 2222122122122171217121 1111 12Hình 2.5: Sơ đồ gửi yêu cau từ client đến server có authentication!0, -z 13
Hình 2.6: Cách thức hoạt động data JPA [1] - 55+ S<<£+2E++tEEsskEssesserrsreree 14
Hình 2.7: Tìm hiểu Neighborhood-Based Collaborative Filtering - 18Hình 3.1: Usecase diagram tổng quan - 2-2 s£+E£+E£+E£+EE£EEtEEeEEerkerkerkerrerreee 41
Hình 3.2: Usecase diagram khách hàng đăng ky - -. - ¿5+5 +++++e+se+seresss 45
Hình 3.3: Activity diagram khách hàng đăng ky 5 55 ++£+s+svssssressee 45
Hình 3.4: Usecase diagram khách hàng đăng nhập - - + +++-<++sx+se++ex+ss2 46
Hình 3.5: Activity diagram khách hàng đăng nhập - «+55 <++c+sc+serssss 46
Hình 3.6: Usecase diagram chọn nơi sửa ChữỮa - 5 S5 + *++vEseereereseeeerree 47
Hình 3.7: Activity Diagram chọn nơi sửa ChữỮa - - - 5< 1S + kESisikkrkreree 48
Hình 3.8: Usecase diagram thanh toán onÏ1ne - + ++s + £+xE++vEeeseeesseesersee 49
Hình 3.9: Activity diagram thanh toán OnÏIne - «- + + xxx skksskkereeree 49
Hình 3.10: Usecase diagram đăng thông báo sửa chữa - -ccssseseeeeereses 50
Hình 3.11: Activity diagram đăng thông báo sửa chữa .- 5c cscccsscsseeree 50
Trang 15Usecase diagram cập nhật thông tin cá nhân - 5555 «£+<+sxecss 51
Activity diagram cập nhật thông tin cá nhân «+ 5< <£++<++<ex++ 51
Usecase diagram đánh giá công ty/thợ sửa chữa - -ccc+ccsss2 52
Activity diagram đánh giá công ty/tho sửa chữa cc+<<<+s<s2 52
Usecase diagram chủ công ty dang ky eee eeceeseeeeeeseeeeeeeeeeeeseeeeeeaeeneeeee 53
Activity diagram chu công ty dang ky cee eeceeseeeeeseeeeeeeeeeeeaeeneeeaeeneeeee 53
Usecase diagram chủ công ty đăng nhap oo eee eeeeseeeeceseeneeeseeneeeseeneeees 54
Activity diagram chủ công ty đăng nhập -. 5551 ++vsssserssee 54
Usecase diagram thêm mới dich VỤ ¿- 5 55s +++£++s£+se++eseeseeresss 55
Activity diagram thêm mới dich VU cccceccesscssseeeseeeteesssesseeeseeseeeseeennees 55
Usecase diagram xem danh sách bài đăng sửa chữa ‹ -<- 56
Activity diagram xem danh sách bài đăng sửa chữa - - «+5 56
Usecase diagram chọn và xếp lịch cho khách hàng .2- 2-2: 57
Activity diagram chọn và xếp lịch cho khách hàng - - 57
Usecase diagram phân công cho nhân viên - «<< =+<++xx+s<2 58
Activity diagram phan công cho nhân viÊn 5-5-5 <++<<£++e++eexss 58
Usecase diagram xem danh sách nhân vIiÊn 5+5 £++s+seexss 59
Activity diagram xem danh sách nhân viÊn - 55 55+ +s£+++seexss 59
Usecase diagram thêm mới nhân VIED - 5s + + «5+ £+s++vss+seessss 60
Activity diagram thêm mới nhân VIED - 5s + +++£+s++vseesseessss 60
Usecase diagram thêm mới nhân ViEN -. - 5 + + + £++v+seeseerss 61
Activity diagram thêm mới nhân viÊn .- 5 +5 + + £+sv+seeeseerss 61
Trang 16Usecase diagram chủ công ty thông kêÊ - 5 +1 svsseesreree 62
Activity diagram chu công ty thông kê -. - +5 + + *++‡+svsserreree 62
Usecase diagram thợ sửa chữa đăng ky - -Ă Sàn tre, 63
Activity diagram thợ sửa chữa đăng ký c5 Series 63
Usecase diagram thợ sửa chữa đăng nhập - - + +5 <++c+scesereses 64
Activity diagram thợ sửa chữa đăng nhập - - «+55 <<+c+sesereses 64
Usecase diagram xem lịch phân công - - «+ +sx++vEssesseeesesseeeses 65
Activity diagram xem lịch phân công - - + +sx+svEsssseessesserssee 65
Usecase diagram báo cáo CONG VIỆC - s6 s11 vs cư, 65
Activity diagram báo cáo CONG VIỆC - -s+++c 3+ xxx vikseerrrerrrreree 66
Usecase diagram thợ sửa chữa cập nhật thông tin cá nhân - 66
Activity diagram thợ sửa chữa cập nhật thông tin cá nhân - 67
Usecase diagram thống kê công viỆC - 2-2 + s2 x+£E+zxezxzxezreee 67
Activity diagram thống kê công viỆC 2-2 2 s+x£x+£xerxerxezrecreee 68
Sequence diagram khách hàng đăng ký 5 «+ *+sesseeseesse 69
Sequence diagram khách hàng đăng nhập - - «- «+5 x++<+sexseess 69
Sequence diagram chọn nơi sửa Chïa - ¿5 5< *x + Esessersessereexes 70
Sequence diagram đăng thông báo sửa chữa 5+5 + se x+<csecsxs 70
Sequence diagram hién thi chi tiết công ty sửa chữa -5 : 71Sequence diagram tìm thợ sửa chữa gần nhất 2:2 5+ sex: 71
Sequence diagram thanh toán online - «+ s£+s£++eeEseeesseessee 72
Sequence diagram cập nhật thông tin cá nhân - 5s «++<<++s+ 72
Trang 17Sequence diagram đánh giá công ty/thợ sửa chữa - 7-5 «<< s+s<++ 73
Sequence diagram chủ công ty đăng ký - - -S+c + ksssiseierree 73
Sequence diagram chủ công ty đăng nhập - +5 5< ++<<*+<cc++eeses 74
Sequence diagram thêm mới dich VỤ - ¿- 5 +55 +2 *++x£++seseseereexes 74 Sequence diagram xem danh sách bai đăng sửa chữa - 75 Sequence diagram phân công cho nhân ViEN - 55s ++s<+s>+x++ 75
Sequence diagram xem danh sách nhân vIiÊn «+5 «++s<+sx+exss 76
Sequence diagram thêm mới nhân vIiÊn - - 5+5 + + £sv+serseess 76
Sequence diagram cập nhật nhân viÊn - 5 5622 £++££+se+seessee 77
Sequence diagram chu công ty thống kê woecceceeeescesessesseseesessesssessesseseseeeeeees 77
Sequence diagram thợ sửa chữa đăng ký - - +5 «se x+csesserseess 78
Sequence diagram thợ sửa chữa đăng nhập - - ¿ -<++<++<e<+<+ 78
Sequence diagram xem lịch phân công - ¿+ «5+ + ++sx++£+e++ex+ex++ 79
Sequence diagram báo cáo cÔng VIỆC - s5 +23 vs ssee 79
Sequence diagram thợ sửa chữa cập nhật thông tin cá nhân 80
Sequence diagram thống kê công viỆC 2-2 2 +2 ++£E+£E+£xzEezzzzzez 80
Mô hình quan hé - - - 5 3 1930119111930 19 11901 1H HH rưy 81
Sơ đồ màn hình phía khách hang cccccccccsscssessessessessessseseessessessessecsesseeseees 89
Sơ đồ màn hình phía chủ công ty va thợ sửa chữa -: + 90
Màn hình khách hàng đăng nhập - - 5 + + ++kEsssseEssessersree 95
Màn hình khách hàng đăng ký - - «5 5c + * + EsEEeereereereseerrrsee 95
Man hình danh sách nơi cung cấp dịch vụ sửa chữa xung quanh 96
Trang 18Màn hình thông tin chỉ tiết công ty sửa chữa -5- 555cc ccccccce2
Màn hình thông tin chỉ tiết thợ sửa chữa - 2-2 scscxszxereezed
Màn hình đăng thông báo sửa chữa - - c se eieriee
Màn hình đánh gia công ty/thợ sửa chữa - 5S c se kssssreereseree
Màn hình thanh toán online + + + +x*x vn nh ngư Màn hình thông tin cá nhân - - - 52+ E139 E9 vn giệg
Màn hình danh sách bai đăng - 5 23 13k ng ngư
Màn hình danh sách dịch vụ đã đăng ký - - 6s ssiseerek
Màn hình chủ công ty đăng ký - cà Sky
Màn hình chủ công ty đăng nhập - - ¿55 +2 ***E+seeeseereerreeree
Màn hình danh sách nhân viÊn - 6 25+ £+2££+E+e+seEseeeseeseeesk
Màn hình cập nhật nhân viÊn 5 5 SE E+***+EESsEE+seeerresersrke
Màn hình thêm mới nhân viÊn + 5+ + * + £**EE£sEvseeeeerseerreree
Màn hình danh sách bài đăng thông báo sửa chữa -+ «
Màn hình phân công nhân viÊn ¿+5 +++**++*++£EE+ze+eexrereeerereee
Màn hình danh sách dich VU - - - << 55 2< 113312221111 vkkeerrexe
Màn hình thêm mới dich VỤ - - << 3E +22 EE+£EEESekereeeeeeesee
Màn hình chủ công ty thống kê ¿22 2+S£+SE£EE+EE+EEeEkerkerkerrered
Màn hình thợ sửa chữa đăng ký - - Gà HH ng dư
Màn hình thợ sửa chữa đăng nhập - 5 625 + sekssiereerse
Màn hình thợ sửa chữa cập nhật thông tin cá nhân
-Màn hình xem lịch phân công - - 5s ++<* + +EEsEEseseeeseererrerek
Trang 19Hình 3.100: Màn hình thợ sửa chữa thống kê ¿2 2 2+£+SE+£x+EEerxerxerxezed 116
Trang 20DANH MỤC TU VIET TAT
Bảng 0.1: Danh mục từ viết tắtSTT Từ viết tắt Nội dung
1 API Application Programming Interface
2 CSDL Co sở đữ liệu
3 JWT Json Web Token
4 uuCF User-user Collaborative Filtering
5 iiCF Item-item Collaborative Filtering
Trang 21TOM TAT KHÓA LUẬN
Đề tài khóa luận “Web hỗ trợ dịch vụ sửa chữa nhà cửa” là một đề tài hướng đến
đôi tượng người dùng có nhu câu sửa chữa các dich vụ tiện ích vé nhà cửa trên website
một cách nhanh chóng và tiện lợi nhất
Dé tai xây dựng một website hỗ trợ dịch vu sửa chữa nhà cửa dap ứng các chức năng cơ bản như website đặt sửa trực tuyên hiện nay, ngoài ra còn bô sung hệ khuyên
nghị đê đưa ra gợi ý nhân viên, giúp người quản lý có thê tìm được nhân viên xuât sắc
một cách nhanh chóng và dễ dàng.
Sau quá trình tìm hiểu, nhóm tác giả đã lên kế hoạch đề thực hiện đề tài như sau:
Tìm hiểu quy trình hoạt động các website đang hoạt động
Y Tìm hiểu về ReactJS
w Tìm hiểu về Spring Boot
Y Tim hiểu về Neighborhood-Based Collaboảtive Filtering
Xây dựng mô hình đữ liệu.
v Xây dung API xử lý và gửi dữ liệu.
Trang 22ngày nói chung va trong đó có dịch vụ sửa chữa nha cửa.
Hiện trạng nhiều nơi cung cấp dịch vụ sửa chữa nhà cửa chưa được tiếp cận rộng rãiđến mọi người, dễ xảy ra việc không lựa chọn được nơi sửa chữa uy tín, nhanh chóng
Phía cung cấp dịch vụ, họ muốn công ty của mình được nhiều người biết và sử dụng dịch
vụ của họ cung cấp Phía người dùng, họ muốn dé dang tìm kiếm, đăng thông báo dịch
vụ sửa chữa, thậm chí họ có thê chọn công ty sửa chữa mà mình mong muôn.
Nắm bắt được thực trạng này nhóm tác giả đã định hướng bản thân phát triển website
trung gian cung câp dịch vụ sửa chữa nhà cửa.
Trang 23Chương 1 TONG QUAN ĐÈ TÀI
Chương này mô tả tổng quan về hiện trạng đặt nhân viên sửa chữa hiện nay trong lĩnh
vực kinh doanh cung cấp dịch vụ tiện ích tại việt nam Qua đó mô tả bài toán gặp phải, khảo sát nghiên cứu Cuối cùng đưa ra hướng giải quyết của đề tài.
1.1 Hiện trạng và đặt vấn đề
1.1.1 Đặt vấn đề
Dịch vụ sửa chữa nói chung và dịch vụ sửa chữa nhà cửa nói riêng là thị trường
đầy tiềm năng tại Việt Nam, đặc biệt là tại các thành phố lớn Công nghệ phát triểnnhanh tại đây cũng kéo theo nhu cầu sử dụng công nghệ đề đáp ứng tính tiện lợi, nhanhchóng của con người trong việc giải quyết các nhu cầu hàng ngày nói chung và trong
đó có dịch vụ sửa chữa nhà cửa.
Giả sử khách hàng đang gặp một vấn đề về hư hỏng thiết bị trong nhà cửa, vẫn đề
đó rất đang nghiêm trọng và cần phải sửa gấp Nhưng họ không có thời gian bình tĩnh
dé tìm kiếm và tìm hiểu nơi sửa chữa vì có quá nhiều sự lựa chọn trên thị trường hiệnnay, không biết nơi nào uy tín, nơi nào có đánh giá đúng và đặc biệt hơn là nơi sửachữa phải gần nhất đề có thê khắc phục vấn đề đang gặp phải một cách nhanh chóngnhất có thé Dé khắc phục tinh trạng trên, nhóm tác giả cung cấp cho khách hàng mộtwebsite mà họ có thé chỉ cần điền địa chỉ hiện tại cần sửa, ngay lập tức hệ thống sẽhiển thị những nơi sửa chữa xung quanh địa chỉ đó, cho nên khách hàng có thé chọnlựa nơi sửa chữa một cách nhanh chóng nhất có thé, hoặc ho cũng có thé bam tìm thợsửa chữa gần nhất, hệ thống sẽ tự động tìm kiếm và đặt giúp nơi sửa chữa Bên cạnh
đó, khách hàng có thé xem tat cả đánh giá của những nơi sửa chữa đó, do vậy kháchhàng cũng sẽ có phần tin tưởng hơn
Ngoài ra, vê phía cung câp dịch vụ và thợ sửa chữa, họ có cơ hội đê được tiêp cận
với khách hàng dễ dàng hơn Tạo cơ hội việc làm cho nhiều thợ sửa chữa Hơn nữa,
Trang 24nhóm tác giả xây dựng chức năng phân công, quản lý nhân viên, do vậy sẽ dễ dàng
quản lý.
Bên cạnh đó nhóm tác giả xây dựng thêm có chức năng gợi ý chất lượng nhân
viên Hệ thống sẽ gợi ý những nhân viên được đánh giá cao, dựa trên những đánh giá
Trang 25Ứng dụng JupViec
02:05 # sâu 063 2 „, 02:05 "â" 92 “ wal wil GĐ
< Vệ sinh điện máy @
Q ĐỊA ĐIỂM LAM VIỆC
Nhấn để chọn dia chỉ
` SỐ NHÀ/CĂN HỘ
dss lộ) a LICH LAM VIỆC
“ - Hôm nay, 19/07/2021
Giúpviệc Giúpviệc Hoa tươi =
theo giờ định kỳ tan nhà
@ GIÁ THAM KHẢO
ve Sh tò | Xem bảng giá
Tổngvệ Phunkhử Vệ sinh E GHICHÚ
sinh khuẩn sofa,nệm, ể
Trang 26a, 5 | 9 113 Lam Thi H6, Tan Chanh Hiép, Quan 12,
tu, Lj Thành phố Hồ Chí Minh, Việt Nam
Riêng Lẻ Định Kỳ Cao =) Ghi rõ yêu cầu (nếu có)
Máy Giặt Công Nghiệp Côn Trùng
“& cA đà = Tao dich vu
Trang chủ Công việc Thanhtoán Ưu đãi Tài khoản
Hình 1.3: Ứng dụng HouseCare
Giá: 6.000.000 VND
1.1.2.2 Nhận xét
Các ứng dụng trên có những đặc điểm chung như sau:
e Là những ứng dụng có nên tảng hoạt động tương tự như Grab/Gojek, ma
ở đó khách hàng có thể đăng việc và người giúp việc sẽ nhận việc.
e Giao diện dep, thân thiện với người dùng.
Trang 27e Được thiết kế dé hoạt động trên nhiều nền tảng thiết bị khác nhau như
mobile, tablet.
e Có các chức năng chính như đặt lich sửa chữa, chon dịch vụ sửa chữa.
Nhược điểm:
e_ Chưa có một số chức năng như: tìm thợ sửa chữa gần nhất hoặc chọn nơi
sửa chữa, hiện thị những nơi cung cấp dịch vụ xung quanh.
e Không chạy các chức năng trên nền tang web, do vậy người dùng phải tai
và cài đặt ứng dụng.
e Giá dịch vụ đã duoc niêm yết
e Không thé chủ động cung cấp thêm dich vụ sửa chữa
e Khách hàng bị động, phải đợi cộng tác viên nhận việc.
1.2 Mục tiêu đề tài
Đề tài với mục đích là xây dựng website hỗ trợ dịch vụ sửa chữa nhà cửa:
e Tìm hiểu cấu trúc, cách website hoạt động
e Xây dựng hệ co sở dt liệu phù hợp với các chức năng của website.
e Xây dựng các chức năng đã nêu cho website.
e Tìm hiểu và cai đặt thuật toán Collaborative Filtering
1.3 Phạm vi nghiên cứu
Kiến thức của nhóm về các kỹ thuật trong lập trình web như ReactJS, Springboot
chưa chuyên sâu, nên trong phạm vi khóa luận nay nhóm tác giả chỉ tập trung nghiên
cứu một sô nội dung sau:
Trang 28e Nghiên cứu cải đặt thuật toán Collaborative Filtering vào chức năng tìm thợ
chất lượng tốt
e _ Nghiên cứu nội dung cơ bản về ReactJS, Springboot và cách kết nối REST API
e Tìm hiểu một số website tìm va yêu cầu dịch vụ sửa chữa ở Việt Nam hiện nay
Tuy nhiên, do hạn chế về mặt thời gian và khối lượng công việc, webite sẽ giớihạn đối tượng chính sử dụng là khách hàng, chủ công ty và thợ sửa chữa
1.4 Bố cục báo cáo
Chương 1: Tổng quan đề tài
Giới thiệu tông quan nội dung đê tài khóa luận Nội dung bao gôm: hiện trạng va
đặt van đê, khảo sat một sô website, mục tiêu dé tai, phạm vi nghiên cứu và bô cục bao
cáo.
Chương 2: Cơ sở lý thuyết
Giới thiệu về hệ thống gợi ý dựa trên phương pháp lọc cộng tác dựa trên đánh giá
người và một số công nghệ và thuật toán sẽ sử dụng trong đề tài Các công nghệ baogồm: ReactJS, Spring Boots, Rest API và thuật toán Neighborhood-Based Collaborative
Filtering.
Chương 3: Phân tích và thiết kế hệ thong
Phân tích các yêu cầu đề ra, phân tích thiết kế hệ thống từ các chức năng Thiết kế
sơ đồ usecase, sơ dé activity, sơ đồ sequence, cơ sở dữ liệu, giao điện website
Chương 4: Áp dụng thuật toán
Áp dụng thuật toán vào ứng dụng
Chương 5: Cài đặt và kiém thử
Trinh bày cài đặt thuật toán, tom tắt quá trình triển khai kiểm thử
Trang 29Chương 6: Kết luận và hướng phát triển
Tổng kết khóa luận, nêu ưu, khuyết điểm và hướng phát triển
Trang 30Chuong 2 CƠ SỞ LÝ THUYET
Chương này nói về cơ sở lý thuyết của khoá luận bao gồm hệ thống gợi ý sản phẩm, và
hệ thống gợi ý sản phẩm dựa trên phương pháp lọc cộng tác dựa trên đánh giá người
dùng Cùng với hai công nghệ sử dụng chính sử dụng là ReactJS, Spring Boot Ngoài ra
các công nghệ sử dụng khác và công cụ sử dụng nhóm tác giả nghiên cứu trình bay chi
tiết ở phụ lục A
2.1 Tìm hiểu về ReactJS
2.1.1 Tống quan về ReactJS
Đề xây dựng giao diện người dùng (User Interface) chạy một cách mượt mà, tốc
độ cao, xứ lý các logic thì có nhiều thư viện JavaScript phổ biến hiện này đang hỗ trợnhư ReactJS, Angular Nhưng nhóm tác giả chọn ReactJS vì một số ly do sau đây:
e Dễ năm bắt hơn vì chỉ cần có kiến thức cơ bản về JavaScript, còn Angular phải
học thêm ngôn ngữ TypeScript!.
e Phù hợp để xây dựng ứng dụng nhỏ đến lớn
e Có thé xây dựng ứng dụng đa nền tang web và di động với React Native2
2.1.2 Redux và Context API
Trong một UI (User Interface) chứa rất nhiều thành phan, dé có thé dé dang quan
ly và tái sử dụng thi chúng ta phải phân nhỏ UI, trong ReactJS thi đó là khái nệm
component Một giao diện chứa rất nhiều component và chúng lưu trữ, truyền dữ liệubang propsẺ và state* Vì vậy điều này khiến cho việc truyền dir liệu qua lại nhiều
component sẽ khiến cho việc quản lý rất khó khăn Do đó, để giải quyết vấn đề này chúng ta có thê sử dụng Redux hoặc Context API.
| https://www.typescriptlang.org/, truy cập lần cuối 18/07/2021
?_hf(ps://reactnative.dev/, truy cập lần cuối 18/07/2021
3_hf(ps://reactjs.org/does/render-props.html,truy cập lần cuối 18/07/2021
4 https://reactjs.org/docs/faq-state.html,truy cập lần cuối 18/07/2021
Trang 31Redux là thư viện JavaScript, nó ra đời nhăm hỗ trợ React trong việc quản lý state.Redux tô chức và lưu trữ các state đó là store Một ứng dựng React chỉ ton tại một
store, và từ đó tat ca dữ liệu có thê truyén xuông các component nhiêu cap.
Without Redux With Redux
⁄
XH \
#
@ Component initiating change
Hình 2.1: Cách thức hoạt động của Redux?
Context API là khái niệm được xuất hiện ở phiên ban React 16.35, nó cung cấp
phương thức dé truyền dit liệu cho tat các các component mà không phải thông qua
nhiêu cap.
Container Component
Container Component
Child Child Child Child
Component | Component | Component ff Component Component | Component || Component | Component
Context
prop drilling context API
Hình 2.2: Cách thức hoạt động của Context API’
5 https://www.bitly.com.vn/Sy7my2, truy cập lần cuối 18/07/2021
6 https://reactjs.org/blog/2018/03/29/react-v-16-3.html, truy cập lần cuối 18/07/2021
Trang 32Về cơ bản Redux, Context API đều có thể quản lý state và truyền dữ liệu cho tất
cả cac component Tuy nhiên, muốn sử dụng Redux thì phải cài thêm thư viện và việctriển khai cũng khá phức tạp, khiến lượng code nhiều hơn Do vậy, với đề tài nhỏ và
vừa nảy, nhóm tác giả quyết định sử dụng Context API để dễ dàng triển khai, cũng
như tránh sự dư thừa.
API Consumer [| © Authenticate tý AuthO
8 https://portswigger.net/web-security/sql-injection, truy cập lần cuối 18/07/2021
9 https://gpcoder.com/5827/, truy cập lần cuối 18/07/2021
Trang 33Bearer token
JWT
JWT payload | signature
Client Mobile / Machine
Session cookie
Client browser
Client h
browser '
JS cannot read permanent cookie
the whole JWT
only its payload SameSite, Secure, 30 minute expiry
Hình 2.5: Sơ đồ gửi yêu cau từ client đến server có authentication!”
JWT là một phương thức giúp mã hóa các thông tin xác thực của người dùng tạo
ra một chuỗi token, được định dạng băng JSON Sau khi client xác thực tài khoản
thành công, client sẽ nhận được JWT token và token nay sẽ được lưu trữ ở cookie.
Tiếp sau đó, khi client gửi yêu cầu có đính kèm token đến server, sau khi giải mã tokennay server kiểm tra tính hợp lệ của token này, nêu đúng sẽ trả về kết qua cho client
Trang 342.2 Tìm hiểu về Spring boot
2.2.1 Tổng quan về Spring boot
Spring Boot là framework được xây dựng và phát triển nền tảng là Java Cung cấpcác giải pháp phần mềm giúp cho nhà phát triển và lập trình viên có môi trường chạycác ứng dụng độc lập.Ngoài ra, Spring boot còn giúp giảm thiểu các bước chuẩn bịcài đặt mà đặt trọng tâm phát triển nghiệp vụ sản phâm từ đó giảm thời gian phát triểnsản phẩm Và thêm một số lý do chúng em chon framework nay:
e Áp dụng các kiến thức đã hoc trong lập trình java
e Thực hành phát triển theo mô hình 3 lớp
e Luôn cung cấp sẵn sàng server ảo đưa vào trực tiếp một khi chạy ứng dụng.
e Không yêu cầu quá phức tạp cấu hình
2.2.2 Spring data JPA(Java Persistence API)
Spring Boot
ee
Spring Data JPA H2 Database
Spring Boot Starter FlywayDB
⁄ Migrations
Dependencies
Hình 2.6: Cách thức hoạt động data JPA ƒ7j
Như trên, dé tránh lãng phí một số lượng lớn tài nguyên trong việc thiết ngoài cáccài đặt môi trường thì việc kết và truy xuất đữ liệu cũng không kém Và để ánh xạ mộtcách tường mình hon thông qua sử dụng các annotation component để truy xuất dit
Trang 35liệu Và áp dụng mô hình JPA thuộc tang persistence hay nói một cach dé hiểu làchuyên cung cấp xử lý thêm, xóa, sửa và truy xuất.
2.2.3 Một số công cụ trợ giúp Spring Boot
Và trong phần mềm nhóm còn dự định áp dụng một số công cụ giúp cho lập trình quản
lý và xử lý dễ dàng hơn:
e Swagger : là một tool dung dé xem, chạy, test các API tương tự Postman triển
khai đặc tả OpenAPI'' Đặc biệt là nó được kèm theo trong thư viện tích hợp của
Spring boot, nó sẽ tự động phân tích xử ly metadata của code va mô tả ngắn gọnAPI được phát triển Ngoài ra Swagger còn có thể tự tạo một tập hồ sơ từ code củabạn từ đó giúp cho tương lai các lập trình viên sau này có thé nhanh chóng hiểu từ
cách lây và trả vê của một API nào đó.
e© Lombok : viết code Java ngắn hơn hoặc nói cách khác nếu dùng các annotation
thông thường sẽ dùng nhiều tài nguyên Và chỉ với một vài triển khai từ thư viện
có bỏ qua việc cài đặt annotation thiết yêu mà bat kỳ ứng dung dùng Spring Bootđều cần nhưng vẫn cho kết qua tương tự
Xác thực người dùng trong Spring Security bằng JWT nhằm bảo mật đữ liệu trung
gian khi nhận và gửi đữ liệu.
2.3 Tìm hiểu về REST API
RESTful API là một phương thức kết nối giữa front-end và back-end phô biến hoặc
có thé xem như là ngôn ngữ phô biến trên web browser tuy đây chỉ kết nối qua lai Nhungchính việc này cung cấp nhiều lợi ích trong việc phát triển ứng dụng vì sự độc lập mãnguồn có thể linh hoạt thay đối hoặc có thể đồng bộ dir liệu mã của back-end môt khichuyền từ web sang ứng dụng
Trang 36Quy tắc dé tạo ra một ứng dụng tuân thủ 4 quy tắc sau thiết kế cơ bản sau!?:
e Sử dụng các phương thức HTTP một cách rõ ràng.
Bạn muốn thực hiện các thao tác trên dit liệu cần lưu ý các phương thức truyền
nhận giữa client-api tuy không hoàn toàn ép buộc sử dụng nhưng nhằm đưa ra một
một quy ước chung như sau [2]:
o Để tạo một tài nguyên trên máy chủ, bạn cần sử dụng phương thức POST
o Để truy xuất một tài nguyên, sử dung GET
o Để thay đổi trạng thái một tài nguyên hoặc dé cập nhật nó, sử dung PUT.
o_ Để huỷ bỏ hoặc xoá một tài nguyên, sử dụng DELETE
o Phi trạng thái.
e_ Một đặc điểm của REST là phi trang thái (stateless), có nghĩa là nó không lưu
giữ thông tin của client Khi vừa gửi yêu cầu đến một webservice sau đó chuyểnhướng sang một trang khác thì điều này REST sẽ không lưu giữ thông tin hay
nói cách khác REST không quản lý phiên làm viéc(Session).
e Hiền thị cấu trúc thư mục như các URIs
o REST đưa ra một cấu trúc để người dùng có thé truy cập vào tài nguyên
của nó thông qua các URL, tài nguyên ở đây là tất cả những cái mà bạn có
thể gọi tên được (Video, ảnh, báo cáo thời tiét, ).
o Một vài nguyên tac bô sung dé lưu ý trong khi nói về cau trúc dia chỉ của
RESTful Web service là:
= Cần bảo mật các tệp mã nguồn
= Nên sử dụng là chữ thường.
12 https://searchapparchitecture.techtarget.com/definition/RESTful-API, truy cập lần cuối 18/07/2021
Trang 37= Thay thé các khoảng trông bang gach chân hoặc hoặc gạch nối tùy vào
quy chuân của mỗi nhà phát triên yêu câu.
e Viéc truyền tải giữa api-client thường sử dụng hiện nay JavaScript Object
Notation (JSON), XML hoặc cả hai [2].
o Khi Client gửi một yêu câu tới web service nó thường được truyén tai dưới
dạng XML hoặc JSON và thông thường nhận về với hình thức tương tự
o Đôi khi Client cũng có thé chỉ định kiểu dữ liệu nhận về mà nó mong muốn
(JSON, hoặc XML, ), các chỉ định này được gọi là các kiểu MINE, nó đượcgửi kèm trên phan HEADER của request Ngoài ra, thông qua việc dùngheader có thê sử dụng một số phương thức bảo vệ như Spring Security
o Dưới đây là các kiểu MINE phô biến thường sử dụng với REST service
Bang 2.1: Kiéu dit liệu REST API /27
Trang 38nhằm đánh giá từ số điểm mà khách hàng đánh giá nhân viên và độ tương quan giữa
User-based filtering Item-based filtering
Hinh 2.7: Tim hiéu Neighborhood-Based Collaborative Filtering
Phương pháp nay được chia thành 2 hướng nhỏ, là User-User Collaborative Filtering
(uuCF) và Item-Item Collaborative Filtering (iiCF):
uuCF: Ý tưởng của hướng tiếp cận này là tìm ra những nhóm user tương tự nhau.
Từ đó, dự đoán mức độ yêu thích của một user dựa trên những users khác cùng nhóm.
Hướng tiép cận này được thực hiện như sau:
e Biểu diễn mỗi user bằng một vector thuộc tính được xây dung từ những
feedback trong quá khứ của user với các item Từ đó, tính toán độ tương đồng
giữa các user.
e Để tính toán độ yêu thích cua user (u) với một item(i), ta sé lựa chọn ra k users
đã từng đánh gia i và có độ tương đồng với user là cao nhất Từ đó, dựa vào
những phản hồi của k user đó với item I đề tính toán ra kết quả
e Sau khi có kết áp dụng vào phần mềm tính toán đánh giá của user cho chất
lượng làm làm việc.
Trang 39H CF: Tương tự như User-User, nhưng có một ít khác biệt của phương pháp này sẽ
tim ra những nhóm item tương tự nhau Sau đó, dự đoán mức độ yêu thích cua user
với item dựa trên độ yêu thích của user đó với các item khác cùng loại.
Hướng tiép cận này cũng được thực hiện như sau:
e Biểu diễn vector thuộc tinh là mỗi item bằng một thay vì biểu diễn bang user
Từ đó, tính toán độ tương đồng giữa các item
e Để tính toán độ yêu thích của user U với một item I, ta sẽ lựa chon ra k items
đã từng được U đánh giá va chỉ số tương tự với I là gần nhất với k item Sau
đó, dựa vào những phản hồi đã được đánh giá của user với k item đó dé tínhtoán ra kết quả
e Sau khi có kết áp dụng vào phần mềm tính toán đánh giá của user cho chất
lượng làm làm việc
2.4.2 User-user Collaborative Filtering
2.4.2.1 Mức độ tương đồng (Similarity functions)
Công việc được xem là quan trọng nhất phải làm trước tiên trong User-userCollaborative Filtering là phải xác định được sự giống nhau (similarity )giữahai users Dữ liệu đầu vào duy nhất chúng ta có là Utility matrix ¥ hay gọi là ditliệu ban đầu, vậy nên su giống nhau này phải được xác định dựa trên các cột tương
ứng với hai users trong ma trận này Xét ví du trong Bảng 2.2 ở ví dụ dưới đây uo
đến us tượng trưng cho người dùng, ¡0 đến i4 tượng trưng cho các chất lượng vật liệu/ độ uy tín/ tốc độ hoàn thành của từng công ty.
Trang 40Bảng 2.2: Utility matrix ( ) [4]
uo UI u2 U3 u4 us U6
io 5 5 2 0 1 ? ?
Vi du trén vé Utility matrix dựa trên việc đánh gia sao của một user(ø> ) cho
một 1tem(o+4) Từ khách quan là uo sẽ tương đồng VỚI ui SO VỚI Các user còn lại
như ua2,ua,u4,u4,us,us Do đó ta sẽ dự đoán có thể uo cũng sẽ đánh giá 1a giống VỚIui.Tuy nhiên nếu dữ liệu rất nhiều sẽ rất khó đánh giá bằng cách cách khách quan
này.
Sử dụng hỏi chấm là các giá trị mà hệ thông cần phải đi tìm hay nói cách khácchính là vì user chưa đánh giá cho item hoặc nhà quản trị/quản lý chưa cung cấp
item đó cho user nên cần một cách tính để tính sao rồi từ mới khuyến nghị cho
khách hàng.Tiếp theo, để đồng nhất ta đặt là sim(ui,u;) là mức độ giống nhau(tươngtự) của hai users uj,uj sao cho i,j khác nhau và được đánh số thuộc số lượng user
trong ma trận đâu vảo.
Quan sát chủ quan qua ví dụ chung ta có thê nhận thay là các uo,ui được đánh
giá cao 1o,1i,12 còn về item còn lại i3,14 bị đánh giá thâp vê điêm tôi là 5 Điêu ngược
lại xảy ra ở các users còn lại Tuy nhiên việc đánh giá chủ quan của chúng ra xuât
từ khoảng theo mỗi người Do đó, cần một similiarity function tốt đảm bảo:
sim(uo,u¡) > sim (uo,u¡), Vi > 1 (2.1) [4]