Nghiên cứu phát triển website quản lý và đặt phòng tích hợp chatbot

ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 1: TỔNG QUAN VỀWEBSITE CHƯƠNG 1: TỔNG QUAN VỀ TRANG WEB QUẢN LÝ VÀ ĐẶT PHÒNG TÍCH HỢP CHATBOT Trong chương này trình bày về môt số nôi dung như: giới thiêu hê thố

Trang 1

ĐÈ TÀI

Nghiên cứu phát triển website quản lý và đặt

phòng tích hợp chatbot

Người hướng din: ThS Nguyễn Thị Thanh Tâm

Sinh viên thực hiện: Ngô Văn Tình

Lớp: D19PTDPT

Hệ: Đại học chính quy

HÀ NỘI -2023

Trang 2

BO THONG TIN VÀ TRUYEN THONG

HOC VIEN CONG NGHỆ BƯU CHÍNH VIÊN THONG

Người hướng dẫn: ThS Nguyễn Thị Thanh Tam

Sinh viên thực hiện: Ngô Văn Tình Lớp: D19PTDPT

Hệ: Đại học chính quy

HÀ NỘI -2023

Trang 4

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA ĐA PHƯƠNG TIỆN Độc lập - Tự do - Hạnh phúc

ĐÈ TÀI ĐÒ ÁN TÓT NGHIỆP ĐẠI HỌC

Họ và tên sinh viên: Ngô Văn Tình

Lớp: DI9PTDPT Khoá: 2019-2024

Ngành đào tạo: Công Nghệ Đa Phương Tiện Hệ đào tạo: Đại học chính quy

1 Tên đề án/khoá luận tốt nghiệp: Nghiên cứu phát trién website quản lý và đặt

phòng tích hợp chatbot

2 Lý do chọn đề tài:

Hiện nay với nhu cau trong lĩnh vực du lịch không ngừng gia tăng, và việc tìmkiếm, đặt phòng trở nên quan trọng hơn bao giờ hết vì vậy việc phát triển mộtwebsite quản ly va đặt phòng giúp đơn giản hóa quy trình đặt phòng cho ngườidùng Họ có thể dễ dàng tìm kiếm thông tin và đặt phòng mọi lúc, mọi nơi Với việctích hợp chatbot trong website cung cấp hỗ trợ tức thì cho người dùng, giúp họ tìmkiếm thông tin, đặt phòng, và giải đáp các thắc mắc mà không cần phải liên hệ trựctiếp với nhân viên hỗ trợ Quản trị viên có thể quản lý các phòng, đánh giá củakhách hàng cũng như thống kê và báo cáo để đưa ra một chiến lược phân tích về

dịch vụ một cách dé dàng và đưa ra chiến lược phát triển nhanh chóng nhất

Hơn nữa, website có thé mở ra cơ hội cho người dùng chia sẻ đánh giá và trải

nghiệm của họ, thậm chí tham gia vào cộng đồng du lịch trực tuyến Điều này tương tự như việc tạo ra một công trao đổi trực tuyến, kết nói những người có

chung sở thích và mong muốn, tạo ra một không gian tương tác và chia sẻ thông tingiữa những thành viên trong cộng đồng du lịch

Vi vậy qua quá trình nghiên cứu va tìm hiểu, em đã lựa chọn dé tài “Nghiên cứuphát triển website quản lý và đặt phòng tích hợp chatbot” sẽ cung cap một hệ thốngđặt phòng trực tuyến mạnh mẽ, có khả năng tương tác thông minh, giúp doanhnghiệp không chỉ nắm bắt được nhu cầu thực tế của khách hàng đem lại một trải

nghiệm du lịch độc đáo và không gian thoải mái.

3 Nội dung chính của đồ án:

Trang 5

Đô án được chia làm các chương như sau:

Chương 1: Tổng quan về đề tài Chương này miêu tả bài toán và các chức năng của

hệ thống

Chương 2: Phân tích và thiết kế hệ thống và xây dựng cơ sở đữ liệu Nội dung chủyếu tập trung vào phân tích hệ thống, phương pháp xây dựng hệ thống, biểu đồusecase, biéu đồ lớp và biểu đồ tuần tự cho từng chức năng của hệ thống va mô ta

cơ sở đữ liệu của hệ thống

Chương 3: Xây dựng ứng dụng web quản lý và đặt phòng Chương này sẽ giớithiệu về công nghệ và xây dựng các tính năng của hệ thống Cuối cùng là phần tiêu

kết của việc xây dựng và kết quả đã đạt được trong đồ án

Ngày giao dé tài: ⁄ /20

Ngày nộp quyển: sex ⁄ 20

GIẢNG VIÊN HUONG DAN SINH VIÊN THỰC HIỆN

(Ký, ghi rõ họ tên) (Ký, ghỉ rõ họ tên)

TRƯỞNG KHOA

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

NHẬN XÉT, ĐÁNH GIÁ, CHO ĐIỂM

(Của Người hướng dẫn)

Trang 6

Điểm: (bằng chữ: )

Đồng ý/Không đồng ý cho sinh viên bảo vệ trước hội đồng cham đồ án tốt nghiệp?

HàNội ngày tháng nam 2023CÁN BỘ GIẢNG VIÊN HƯỚNG DAN

NHẬN XÉT, ĐÁNH GIÁ CHO ĐIỂM

Trang 7

(Của Giáo viên phản biện)

Điểm: (bằng chữ: )

Đồng ý/Không đồng ý cho sinh viên bảo vệ trước hội đồng châm đồ án tốt nghiệp?

Ha Nội ngày tháng nam 2023CAN BỘ GIANG VIÊN PHAN BIEN

Trang 8

Đặc biêt, trong suốt quá trình hoàn thành đồ án tốt nghiép,

ngoài những cố gắng bản thân, em sẽ không thể hoàn thành tốtcông viêc của mình nếu không có sự chỉ bảo hướng dẫn tận tình

ThS.Nguyén Thi Thanh Tâm Cô đã chia sẻ cho em những kiến thức

chuyên môn, cách trình bày vấn đề và cách thức làm viêc trong suốt

quá trình em thực hiên đề tài Em xin gửi lời cảm ơn sâu sắc nhất

đến cô.

Vì thời gian có hạn, trình đô hiểu biết của bản thân còn nhiều hạn chế Cho nên trong đồ án không thể tránh khỏi những thiếu sót khi tìm hiểu, đánh giá, trình bày về đề tài, em rất mong nhận được

sự đóng góp ý kiến của tất cả các thầy cô giáo cũng như bạn bè để

đồ án của em được đầy đủ và hoàn thiên hơn.

Em xin chân thành cảm ơn!

Hà Nội, Tháng 12 năm 2023

Sinh viên

NGÔ VĂN TÌNH

Trang 9

2 Nội dung của đề tài -.- cac mm ng nà 1

CHƯƠNG 1: TỔNG QUAN VỀ TRANG WEB QUẢN LÝ VÀ ĐẶT

PHÒNG TÍCH HỢP CHATBOT cu nen mm 2

1.1 Tổng quan về đề tài - -.-. Ăn nen 2

1.1.1 Nhu cầu thực tế xã hội - - - -. ccsss 2

1.1.2 Tìm hiểu hệ thống - - -. Ăn nen 2

1.2.1.2 Framework: EXPF©SS - e Ăn nen 6 1.2.1.3 Firebase cm n mm mm mm 8

1.2.1.4 Cơ sở dữ liệu: Cloud Firestore - -‹ - 8

Trang 10

ĐỒ ÁN TỐT NGHIỆP MỤC

LỤC

1.2.2.3 Design System (Material-UI) .- 10

1.2.3 Dialogflow trong việc xây dựng chatbot 12

1.3 Tổng quan về phông chữ và màu sắc đã sử dụng trong dự án on n ni HH HH HH HH HN BI B BI BH 13 1.4 Kết Chương «cm mm nà nu gà 14 CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ HỆ THỐNG VÀ XÂY DỰNG CƠ SỞ DU LIỆU -. - -S Ăn n nhu 15 2.1 Xác định các tác nhân (ACtOF) - eceennnnnss 15 2.2 Xây dung bảng thuật ngữ - - -.-.-ccenes 15 2.3 Xác định và mô tả các usecase sử dụng 16

2.3.1 Danh sách các usecase sử dụng chung cho user 16

2.3.2 Danh sách các usecase sử dụng cho customer 17

2.3.3 Danh sách các usecase sử dụng cho admin 18

2.4 Xây dựng biểu đồ usecase -.-.-. -«-nsss 19 2.4.1 Biểu đồ usecase tổng Qquan -.‹.‹«-s«scx 19 2.4.2 Biều đồ use case chỉ tiết của đặt phòng - 20

2.4.3 Biểu đồ usecase chỉ tiết chức năng quản lý phòng 20 2.4.4 Biểu đồ usecase chỉ tiết chức năng đánh giá phòng BOER EERE ECCT TEETER 21

2.4.5 Usecase chi tiết chức nang thống kê phòng 21

2.5 Kịch bản cho các biểu đồ của usecase 22

2.5.1 Các kịch bản dùng chung cho user - - - 22

2.5.2 Các kịch bản của admin - - - «nen c« 25 2.5.3 Các kịch bản ứng với ứng dụng của customer 31

2.6 Thiết kế các mô hình thông tin tuần tự hệ thống (SEQUENCE Diagram)) «cm mm mm mm 35 2.6.1 Biểu đồ tuần tự của các usecase trên website dùng chung Cho uSeF - con nn nnnn n n n nnnnn n n n n nn n mm 35 2.6.2 Biểu đồ tuần tự của các usecase dành cho Admin 38 2.6.3 Biểu đồ tuần tự usecase cho Customer 45

2.7 Xây dựng biểu đồ lớp thực thể - ‹ ‹ 50

2.8 Thiết kế cơ sở dữ liệu - «« 555 xe 51 2.8.1 Xác định các đối tượng thực thể -.-.- - 51

STVH: NGO VAN TINH - B19DCPT203 iii| Page

Trang 11

3.1.1 Các công nghệ cần thiết để cài đặt hệ thống 55

3.1.2 Khởi tạo firebase và cơ sở dữ liệu - - - 55

3.1.3 Cấu hình Facebook, Google, Email Authentication

VỚI firebase© uc HH n nu n HH HH BH 553.1.4 Cài đặt và triển khai xác thực số điện thoại 57

3.1.5 Cấu hình PayPal developer -.‹ -‹-«‹=«« 57

3.1.6 Cài đặt và cấu hình DialogFlow xây dựng chatbot 59

3.1.7 Triển khai hệ thống -.-.-.-.-.‹ nen 603.2 Giao diện trên ứng dụng - - - - . «se nc« 61

3.2.1 Các giao diện chung - - - -. -ncsncn 61

3.2.2 Các trang giao diện dành cho khách hàng 64

3.2.3 Các giao diện trên ứng dụng dành cho quản trị viên

"“ÔÔỒÔồỐỎ 68

3.3.1 Cài đặt nodemailer để gửi mail thông báo cho khách

In ố.ố.ốốốốốe 713.3.2 Sử dụng Promise All để xử lý các yêu cầu đồng thời

DANH MỤC TÀI LIEU THAM KHẢO -. <<: 76

STVH: NGO VAN TINH - B19DCPT203 iv|Page

Trang 12

ĐỒ ÁN TỐT NGHIỆP MỤC

LỤC

STVH: NGO VAN TINH - B19DCPT203 v|Page

Trang 13

ĐỒ ÁN TỐT NGHIỆP KÍ HIỆU VÀ CỤM TỪ VIẾT

TẮT

KÝ HIỆU VÀ CỤM TỪ VIẾT TẮT

STT Ký hiệu Tiếng anh Tiếng việt

A Usecase Usecase Ca su dung

B Scenario Scenario kich ban

C CSDL Database Co so dir liệu

D Actor Actor Tac nhan

E website website Trang mang xã hội

[ES BCMA Serpt | Uài dgmaasoip

G SEO Optimivaton Tối ưu công cụ tìm kiếm

H MUI Material UI Là một thư viện design system

Trang 14

Bảng 2 9 Sencario của usecase “Đăng XuẤt” ¿5c tt 1111121121121 x0 22

Bảng 2 10 Sencario của usecase “Xem danh sách phòng ” -. - 5+ ++csss*+++ss+2 23 Bảng 2 11 Sencario của usecase “Xem danh sách đánh giá phòng ” - 24 Bảng 2 12 Sencario của usecase “Quản lý danh sách người dùng” - - 24 Bảng 2 13 Sencario của usecase “Tao mới một khách hàng” - -‹+++++<s++2 24 Bang 2 14 Sencario của usecase “Cập nhật thông tin của khách hàng” - 25 Bảng 2 15 Sencario của usecase “Xóa người dÙng”” - - - cv v xxx xe 26

Bảng 2 16 Sencario của usecase “Quản lý danh sách phòng” - 55s ssss++++s+ 26

Bảng 2 17 Sencario của usecase “Tao mới phòng”” - + + + ‡ + xsvssvesseseesses 27

Bảng 2 18 Sencario của usecase “Cập nhật thông tin phòng” «+ ++ss++++<5 27

Bảng 2 19 Sencario của usecase “Xóa phÒòng”” ác c 1c v12 1111111811111 81111 re 28Bảng 2 20 Sencario của usecase “Xem danh sách phòng đã đặt của hệ thống” 29Bảng 2 21 Sencario của usecase “Đặt phòng”” - . - c 2c 113211 1111511111 1851111511 xe, 30

Bảng 2 22 Sencario của usecase “Quản ly phòng đã đặt” cà c c2 30

Bảng 2 23 Sencario của usecase “Hủy đặt phòng” - ác S112 Sexy 31

Bảng 2 24 Sencario của usecase “Đánh giá phòng ” -.- «6 Sc xe rey 32

Bảng 2 25 Sencario của usecase ““ChatDOtV” - c1 1111211121111 1110111811111 18111 ray 32 Bang 2 26 Sencario của usecase "Tro thành chủ phòng” - - «5 + s + ssxerses 32Bang 3 1 Các bước triển khai hệ thống ¿+ 2 EệSE+EEEEEEEEEEE2EEEEEEEEEErkrkrkred 60

DANH MỤC HÌNH VẼ

Hình 1 I Font chữ được sử dụng trong hệ thống -:- scctcc 2EE2112112112121 2E re 13

Hình 1 2 Mau sắc chủ dao sử dung trong dự ắn - -. c s12 se serree 13

Hình 2 1 Biểu đồ usecase tong quan cece cece c1 c2 222222222 2222EEEEEErsse

18

STVH: NGÔ VĂN TINH - B19DCPT203 vii| Page

Trang 15

ĐỒ ÁN TỐT NGHIỆP DANH MỤC

CÁC HÌNH

Hình 2 2 Usecase cho tiết chức năng đặt phòng - ¿5c S2EeEE£EEeEE2EE2EzErxez 19Hình 2 3 Use case chi tiết chức năng quản lý phòng 2- 2 sz52£++E++E++Eecxz2 19

Hình 2 4 Usecase chỉ tiết chức năng đánh giá phòng 2-2 2 2+c++x+£ezszxczs 20

Hình 2 5 Usecase chỉ tiết chức năng thống kê 2-52 Sẻ +SeSEeEE£EEEEEEEEEEEzEEzEeei 20

Hình 2 6 Biểu đồ tuần tự usecase “Dang nhập” - ¿5+ +s+xezEeEEEvEzEcrrkrrereeg 34

Hình 2 7 Biểu đồ tuần tự usecase “Dang ký” :- c2 t1 1111 1x re 34

Hình 2 8 Biéu đồ tuần tự usecase “Đăng nhập với mạng xã hội” - ‹ - 35Hình 2 9 Biểu đồ tuần tự usecase "Xem danh sách phòng" ¿2s s+s+cszszs+ 35Hình 2 10 Biểu đồ tuần tự usecase “Xem danh sách đánh giá phòng” - 36Hình 2 11 Biéu đồ tuần tự usease "Xem thông tin chỉ tiết phòng" - -5-5¿ 37Hình 2 12 Biéu đồ tuần tự usecase “Sửa thông tin người đùng” - - - s52 37Hình 2 13 Biểu đồ tuần tự usecase “Xóa người đùng” -s2cc2ccczxcrxrsrrsxee 38Hình 2 14 Biểu đồ tuần tự usecase “Thêm người đùng” - ¿+ + s+s+xzxeczzcxz 39Hình 2 15 Biéu đồ tuần tự usecase “Quản lý danh sách phòng” -. -: 40

Hình 2 16 Biểu đồ tuần tự usecase “Thêm phòng” - c2 2+x+EeEE+EeEvEEzEerxrxers 40

Hình 2 17 Biéu đồ tuần tự usecase "Sửa thông tin phòng" ¿2 z+s+zs+xerxzed 41

Hình 2 18 Biểu đồ tuần tự usecase "Xóa phOng" cccceessesesesesseseeesseseseseeeeeeseeees 42

Hình 2 19 Biểu đồ tuần tự usecase "Xem danh sách đặt phòng" s52 43Hình 2 20 Biéu đồ lớp phân tuần tự usecase “Quản lý phòng đặt” -5- 44

Hình 2 21 Biểu đồ tuân tự usecase “Thanh toán phòng và đặt phòng” 45

Hình 2 22 Biểu đồ lớp phân tuần tự usecase “Đánh giá phòng” .-‹«sc++<sss2 46

Hình 2 23 Biểu đồ lớp phân tuần tự usecase “Hủy đặt phòng” 47

Hình 2 24 Biêu đồ tuân tự usecase "Xác thực sô điện thoại” -. -. 48

Hình 2 25 Biéu đồ tuần tự "yêu cầu trở thành chủ phòng" - 2-2 s2 eee49

Hình 2 26 Biéu đồ lớp phân tích -2¿- 2 + ©S2E22EE2EE£EEE2EEEEEEEEEEEEEEEErrkerkzrrree 50Hình 2 27 Database diagram hệ thống 2-2 ¿+22 +E+EE£EE£EEEEEEEEEEEEEEEEEEEErErrkrree 52

Hình 3 1 Khởi tạo và cấu hình firebase - vs} ssssrivei

54

STVH: NGO VAN TINH - B19DCPT203 viii | Page

Trang 16

ĐỒ ÁN TỐT NGHIỆP DANH MỤC

CÁC HÌNH

Hình 3 2 Cấu hình facebook, google, email login - 2-2 2+ e+x+x+zx+Ee£zzEezeez 55Hình 3 3 Tạo hàm xác thực và đăng ky tài khoản với facebook, google, email 55Hình 3 4 Cấu hình xác thực số điện thoại -:cctct 3255111 512125115351 515555115511 1x xe 56

Hình 3 5 Cấu hình paypal develOpeT - 2-2 252522 SE2EE2E2E£EE£EEEEEEEEEEEEEEEEErErrkrres 56

Hình 3 7 Giao diện trang đăng nhập - - 2 22 3211121113111 1311111511111 1x re, 58

Hình 3 9 Giao diện trang chủ - - c2 3321112113351 11911 1911111111111 1111111 ng key 59

Hình 3 10 Giao diện danh sách phòng - 5 2c 1332111325111 111 185511111111 81x 59

Hình 3 11 Giao diện tìm kiếm và lọc phòng -¿- 2 2 2+S2+E+E£EE+EvEzErEerxzeerees 60Hình 3 12 Giao điện xem thông tin chỉ tiết phòng -2- ¿5 2 2+E2E+EeEe£e£zEzxzed 60Hình 3 13 Giao diện chọn ngày đến và ngày đi -¿©22- 5 Stv2+2Ec2xeEzxrrxerrzree 61Hình 3 14 Giao diện quan lý thông tin tài khoản c5 2 +2 ‡*+ssvvsssseerses 61

Hình 3 16 Giao diện xác thực số điện thoại ¿- - cSsk+EtSE2EEEEEEEEEE E151 E1 xE+ 62

Hình 3 17 Giao điện xác thực số điện thoại ¿+ +2 St 2E+E+E+EEESEEE+EEEEEEEEsErkrkrrrra 63

Hình 3 18 Giao diện xem danh sách đặt phòng 5 523322 *++++svseesseerres 63

Hình 3 19 Giao diện đánh giá phòng - - - c2 1121112611111 1 1118111118111 182111 xe 64

Hình 3 20 Giao diện email thông báo đặt phòng thành công -. 55-2-5552 64

Hình 3 21 Giao diện chafbot 2c 2221162222231 111 1155311111 15531 1111111 1 re rrrr 65

Hình 3 22 Giao diện trang dashboard admin -. - 5 2 2+ *+*E+sEeverreeresrrrees 65 Hình 3 23 Giao diện quản lý người dùng - c1 2c 3121112111151 181111 115515, 66 Hình 3 24 Giao diện modal thêm uSeT - 555 2233322232321 sseeee 66 Hình 3 25 Giao diện modal xóa người dÙng - . - - + Sc + 13+ 1v ksrirrerserree 67 Hình 3 26 Giao diện trang quản lý phòng 5 + k1 9 vn nh như 67 Hình 3 27 Giao modal thêm phòng - - c2 2332211321115 1 25111511151 1E11 11111 re 68 Hình 3 28 Cài dat nodemailer gửi mail cho khách hang eee eee eeeeeeeeeeeeeees 68

Hình 3 29 Sử dung promise all dé thực hiện nhiều tác vụ -:-:-c+c+cscszzsrsrsres 69Hình 3 30 Sử dụng pub/sub để thực hiện tác vụ lớn -¿ se se EzE+E+EsErerrrsrses 70Hình 3 31 Sử dung lazy load khi thực hiện lay ảnh 2- ¿55 s2522x+>+2zz>xe2 71

STVH: NGO VAN TINH - B19DCPT203 ix|Page

Trang 17

ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 1: TỔNG QUAN VỀ

WEBSITE

MO DAU

1 Ly do chon dé tai

Hiện nay với nhu cầu trong lĩnh vực du lịch không ngừng gia tăng và việc tim

kiếm, đặt phòng cho các chuyến du lịch trở nên quan trọng hơn bao giờ hết vì vậy em

đã lựa chọn đề tài “Nghiên cứu phát triển website quản lý và đặt phòng

tích hợp chatbot” với mục đích quản lý và đặt phòng giúp đơn giản hóa quy trình

đặt phòng cho người dùng giúp họ tiết kiệm được thời gian, công sức Họ có thê dễdàng tìm kiếm thông tin và đặt phòng mọi lúc, mọi nơi Với việc tích hợp chatbot trong

website cung cấp hỗ trợ tức thì cho người dùng, giúp họ tìm kiếm thông tin, đặt phòng

và giải đáp các thắc mac mà không cần phải liên hệ trực tiếp với nhân viên hỗ trợ

Quản trị viên có thể quản lý các phòng, đánh giá của khách hàng cũng như thống kê và

báo cáo để đưa ra một chiến lược phân tích về dịch vụ một cách dễ dàng và đưa ra

chiến lược phát triển nhanh chóng nhất

2 Nội dung của đề tài

Nội dung trình bày bài báo cáo gồm 3 chương:

- Chương 1: Tổng quan về đề tài Nội dung bao gồm giới thiệu về website miêu

tả bài toán và các chức năng của hệ thông cũng như các công nghệ đã sử dụng

- Chương 2: Phân tích và thiết kế hệ thống và xây dựng cơ sở dir liệu Nội dung

chủ yếu tập trung vào phân tích hệ thống, phương pháp xây dựng hệ thống, biéu

đồ usecase, biéu đồ lớp và biểu đồ tuần tự cho từng chức năng của hệ thong va

mô tả cơ sở dữ liệu của hệ thống.

- _ Chương 3: Cài đặt và xây dựng hệ thống Nội dung tập chung hướng dẫn cài đặt

các công nghệ đã sử dụng trong dự án, mô tả giao diện và các cách tối ưu hiệu

năng trong hệ thống

SVTH: NGO VAN TINH - B19DCPT203 10|Page

Trang 18

WEBSITE

CHƯƠNG 1: TỔNG QUAN VỀ TRANG WEB QUẢN LÝ VÀ

ĐẶT PHÒNG TÍCH HỢP CHATBOT

Trong chương này trình bày về môt số nôi dung như: giới thiêu

hê thống, tìm hiểu hê thống, xây dựng nghiêp vụ của hé thống, xác định mục tiêu của dự án, tổng quan về các chức năng của dự án đưa

ra cái nhìn tổng quan nhất về website đặt phòng.

1.1 Tổng quan về đề tài

1.1.1 Nhu cầu thực tế xã hội

Hiện nay với nhu cầu trong lĩnh vực du lịch không ngừng gia tăng đặc biệt sau

đại dịch Covid-19, việc đặt phòng trở thành một phần quan trọng trong kế hoạch du

lịch của mọi người

Nắm bắt được các cơ hội trên vì vậy việc xây dựng một hệ thong giúp việc dat

phòng trở nên dễ dàng hơn cũng như đánh giá được trải nghiệm của các khách hàng đã

sử dụng dịch vụ dé đưa ra quyết định cho điểm đến nghỉ ngơi, hệ thống hứa hẹn đem

đến trải nghiệm vô cùng tiện lợi, thoải mái và độ tin cậy

1.1.2 Tìm hiểu hệ thống

Qua việc tìm hiểu về nhu cầu hiện nay của mọi người, trang web đặt phòng ra đờihướng tới tat cả người dùng sử dụng thiết bị có thé kết nối internet, và có nhu cầu đặtphòng cho các chuyến đi du lịch và nghỉ dưỡng Dé có thé đưa tới khách hang trảinghiệm tuyệt vời và nhanh chóng nhất hệ thống sẽ có các chức năng cho website như

sau:

Cac thông tin sé được cung cấp trong hệ thống:

- Thong tin về người dùng, phòng, điểm đến, dịch vụ sẽ có tại mỗi phòng

- Cac thông tin về các phòng đã đặt va thông tin hủy đặt phòng và trạng thái

đặt phòng sẽ hién thị khi người dùng đăng nhập hệ thống

Nghiệp vụ hệ thống:

e Server:

- Strdung cơ sở đữ liệu firestore dé lưu trữ quan lý dữ liệu

- Sw dụng firebase, firestore dé phân quyền và thực hiện tai ảnh

- Str dụng Dialogflow của Google kết hợp ứng dụng Kommunicate để

phân tích dit liệu xây dựng chatbot.

- Admin va user tương tác thông qua server dé thực hiện các chức năng

của mình.

® Admin:

- Can đăng nhập tài khoản dé thực hiện chức năng quản trị

Trang 19

- C6 thể xem và tìm kiếm phòng cũng như trò chuyện với chatbot mà

không cần phải đăng nhập

- Dang nhập, đăng ký tài khoản với các mạng xã hội: facebook, google khi

muốn đặt phòng hay viết đánh giá

1.1.3 Mục tiêu dự án

Tối ưu hóa trải nghiêm người dùng:

- Phát triển giao diên người dùng thân thiên, dễ sử dụng, tối

ưu hóa cho mọi đối tượng người dùng.

- Cung cấp thông tin chi tiết và hình ảnh chất lượng để người

dùng có cái nhìn toàn diên về các lựa chọn phòng và địa

điểm.

Quản lý hiêu quả:

- Xây dựng hê thống quản lý phòng và đặt phòng hiêu quả,

giúp doanh nghiêp duy trì sự tổ chức và kiểm soát dễ dàng.

- Tích hợp tính năng đánh giá và phản hồi để nâng cao chất

lượng dịch vụ.

Tích hợp hê thống thanh toán an toàn:

- Phát triển cổng thanh toán an toàn và thuận lợi để người

dùng có thể thanh toán mà không gặp rắc rối

- H6 trợ nhiều phương thức thanh toán để đáp ứng nhu cầu đa

dạng của người dùng.

Phân loại và lọc hiêu quả:

- _ Tích hợp tính năng phân loại và lọc thông tin phòng dựa trên

các tiêu chí như giá cả, đánh giá, và tiên nghi.

- Giúp người dùng dễ dàng tìm kiếm và so sánh giữa các lựa

chọn phòng môt cách thuận tiên.

Tích hợp chatbot thông minh:

- Hê thống chatbot sẽ không chỉ là môt công cụ hỗ trợ, ma

còn là môt đối tác tương tác thông minh.

Tối ưu hóa cho SEO:

- Tối ưu hóa website dé cải thiên vị trí trên các công cu tìm

kiếm, đảm bảo rằng người dùng có thể dễ dàng tìm thấy

trang web khi tìm kiếm.

Trang 20

WEBSITE

- SU dụng chiến lược nôi dung và từ khóa để tối ưu hóa sự

hiên diên trực tuyến.

1.1.4 Chức năng của dự án

1.1.4.1 Quản lý thông tin người dùng (user)

e Phân quyền va bảo mật:

- Xây dựng hê thống phân quyền để đảm bảo chỉ có những

người được ủy quyền mới có thể truy cập.

- Cung cấp các biên pháp bảo mật như mã hóa thông tin dé

đảm bảo an toàn và bảo mật dữ liêu người dùng.

e Luu trữ và quản lý thông tin cá nhân:

- Hê thống sẽ cung cấp khả năng lưu trữ thông tin cá nhân

của người dùng, bao gồm tên, địa chỉ, thông tin liên lạc, và

các thông tin khác liên quan.

- Admin có thể thực hiên các tác vụ thêm mới, sửa đổi, và xóa

thông tin người dùng từ cơ sở dữ liêu.

e Tổng quan người dùng:

- Admin sẽ có khả năng xem tổng quan về số lượng người

dùng trong hê thống thông qua bảng thống kê.

- Bảng thống kê sẽ cung cấp thông tin về các thông số như

người dùng đã đăng ký, người dùng đang sử dụng dịch vụ,

và thông tin khác có ích cho quản lý hê thống.

1.1.4.2 Quản lý thông tin phòng (Room):

e Thêm, sửa, xóa phòng:

- Hê thống sẽ cho phép admin thêm mới, sửa đổi thông tin, va

xóa phòng từ cơ sở dữ liêu

- Cung cấp giao dién dễ sử dụng để quan lý danh sách phòng

hiên có

¢ Tổng quan về loại phòng và tiên nghỉ:

- Tao khả năng phân loại phòng theo loại và hiển thị các tiên

nghỉ đi kèm với mỗi loại phòng.

- H6 trợ quản lý tổng quan về số lượng và tinh trạng của các

loại phòng dễ dàng theo dõi và điều chỉnh

se Giá cả và khuyến mãi:

- Cho phép admin cập nhật giá cả của từng loại phòng và

thêm các chương trình khuyến mãi, giảm giá.

- _ Tích hợp thông tin giá và khuyến mãi vào quan lý tổng quan

để người dùng dễ dàng lựa chọn

1.1.4.3 Chức năng đánh giá và phản hồi (Review):

¢ Tao cơ hôi đánh giá

Trang 21

WEBSITE

- Cho phép người dùng đánh giá và đánh giá về trải nghiêm

của họ sau khi sử dụng dịch vụ hoặc ở trong các loại phòng.

- Hé thống sẽ cung cấp giao dién đơn giản và dễ sử dụng dé

người dùng có thể dễ dàng chia sẻ ý kiến của mình

Hiển thị đánh giá và xếp hạng:

- Hién thị tổng số đánh giá và điểm xếp hạng tổng quan của

dịch vụ và từng loại phòng.

- Tich hợp hình ảnh và các chỉ tiết cụ thể từ đánh giá dé tạo ra

sự minh bạch và đáng tin cậy.

Hỗ trợ quản lý phản hồi:

- Admin có khả năng quản lý và xử lý các đánh giá từ người

dùng.

- Cung cấp tùy chọn xem chi tiết đánh giá, phản hồi từ admin

để giải quyết mọi vấn đề môt cách nhanh chóng

Kích thích đánh giá:

- Tao các chương trình khuyến khích người dùng để họ đăng

đánh giá.

- Cung cấp ưu đãi hoặc giảm giá cho những người dùng chia

sẻ trải nghiêm của mình.

1.1.4.4 Chức năng đặt phòng:

Hê thống đặt phòng linh hoạt:

- _ Cung cấp giao diên đặt phòng đơn giản và linh hoạt để người

dùng có thể chọn loại phòng, ngày nhận phòng và trả phòng, số lượng khách, và các yêu cầu đặc biêt.

Lựa chọn phương thức thanh toán:

- Hỗ trợ nhiều phương thức thanh toán như thẻ tín dụng,

chuyển khoản ngân hàng, ví điên tử, và các phương thức thanh toán trực tuyến khác.

- Bao mật thông tin thanh toán để đảm bảo an toàn cho người

Hiển thị đánh giá trong quá trình đặt:

- _ Khi người dùng chọn loại phòng, hê thống sẽ hiển thị tổng số

đánh giá và điểm xếp hạng để họ có thể đánh giá chất lượng

trước khi đặt phòng.

- Tao sự tin cậy và minh bach trong quá trình đặt phòng.

Trang 22

WEBSITE

e Hỗ trợ thay đổi đặt phòng:

- Cho phép người dùng yêu cầu thay đổi thông tin đặt phòng,

như thay đổi ngày nhận phòng, số lượng khách, hoặc yêu cầu thêm dịch vụ.

- Admin sẽ xử lý và xác nhận những thay đổi nay.

1.1.4.5 Chức năng chatbot

e Đối tượng hỏi đáp tự đông:

- Su dụng hê thống chatbot để tự đông trả lời các câu hỏi phổ

biến mà người dùng thường đặt.

- Hê thống sẽ linh hoạt hỗ trợ câu hỏi từ người dùng và tạo

trải nghiêm tự đông.

e Tương tác thông minh từ Chatbot:

- Chatbot có khả năng tương tác thông minh với người dùng

để giải đáp những câu hỏi phức tạp và cung cấp hướng dẫn

chỉ tiết.

- Với những câu hỏi chưa được tranning hê thống sẽ gửi câu

hỏi đến admin để trả lời.

phá trong lĩnh vực phát triển phía máy chủ bằng cách cho phép các nhà phát triển sử

dụng cùng một ngôn ngữ (JavaScript) cả ở phía máy chủ và phía máy khách (trình duyệt), giúp tạo ra các ứng dụng web hiệu quả và hiện đại

Tính năng nổi bật:

- Bat đồng bô (Asynchronous) và Non-blocking: Node.js được

xây dựng với mô hình bất đồng bô và non-blocking I/O, cho phép xử lý nhiều yêu cầu cùng môt lúc mà không cần đợi kết

quả hoàn thành.

- Hiêu suất cao: Dựa trên Google's V8 JavaScript Engine,

Node.js cung cấp hiêu suất vượt trôi và tốc đô xử lý nhanh

chóng, làm cho việc xây dựng ứng dụng nhanh hơn và hiêu quả hơn.

- Dễ dàng xây dựng ứng dụng thời gian thực: Nhờ tính năng

bất đồng bô và non-blocking, Node.js thích hợp cho viêc xây

Trang 23

WEBSITE

dựng các ứng dụng thời gian thực như ứng dụng chat, trò

chơi trực tuyến, và hê thống thông báo.

Quản lý giao diên người dùng (UI) trên máy chủ: Node.js cho

phép bạn xây dựng giao diên người dùng trên phía máy chủ,

giúp giảm thiểu thời gian đáp ứng và tăng hiêu suất.

Công đồng và Ecosystem đa dạng: Node.js có môt công

đồng phát triển mạnh mẽ, điều này dẫn đến sự phát triểncủa nhiều thư viên, framework, và công cụ hữu ích hỗ trợ

cho viêc phát triển ứng dụng.

1.2.1.2 Framework: Express

Khái niêm: Express là mét framework web Node.js mạnh mẽ

được thiết kế để xây dựng ứng dung web va API môt cach dễ

dàng.Môt số tính năng cơ bản của express:

Middleware:

- Express sử dụng middleware để thực hiên các chức năng

xử lý trước khi đến các hàm xử lý chính của ứng dụng.

- Middleware có thể được sử dụng để xác thực, xử lý lỗi,

hoặc bất kỳ tác vụ nào cần thực hiên trước khi xử lý yêu

cầu.

Routing:

- Express cung cấp môt cách đơn giản để xác định các

đường dẫn và xử lý các yêu cầu HTTP tương ứng với

chúng.

- Ta có thể định nghĩa tuyến đường (routes) để xử lý yêu

cầu GET, POST, PUT, DELETE, và nhiều phương thức HTTP

khác.

Request và Response:

- Các hàm xử lý của Express nhận môt đối tượng yêu cầu

(request) và môt đối tượng phản hồi (response).

- Taco thể để doc dữ liêu từ yêu cầu, gửi dữ liêu đến khách

hàng, đặt các tiêu đề và nhiều hơn nữa.

Template Engines:

- Express không đặt ràng buôc về loại template engine ban

sử dụng, nhưng nó thường được kết hợp với các engine như EJS, Pug, hoặc Handlebars để tạo giao diên người

dùng.

Static Files:

- Express cung cấp middleware để phục vụ các tệp tĩnh

(như CSS, JavaScript, hình ảnh) từ thư mục cụ thể trên

máy chủ.

Trang 24

WEBSITE

e Error Handling:

- Express có các cơ chế dé xử ly lỗi trong ứng dung, bao

gồm middleware đặc biêt để xử lý lỗi

Lý do sử dụng trong dự án:

- Tinh Linh Hoạt:

e Express không ép buôc mô hình phát triển cụ thể, giúp

bạn tự do lựa chọn các thư viên và công nghé phù hợp với

dự án của mình.

- Middleware:

se Middleware giúp ban tổ chức mã nguồn và xử ly các công

viêc như xác thực, xử lý lỗi, quản lý phiên, nén và ghi logmôt cách dễ dàng

- Routing:

e Express cung cấp cơ chế định tuyến mạnh mẽ gi

chức mã nguồn của bạn theo cách có tổ chức và d

trì.

- _ Công Đồng Phát Triển Mạnh Mé:

e Express có môt công đồng phát triển rông lớn và nhiều tài

liêu hữu ích Điều này có nghĩa là bạn có nhiều nguồn lực

để tìm kiếm giải pháp cho vấn đề cụ thể của mình.

- Performance:

e Express được tối ưu hóa cho hiêu suất, giúp ứng dụng của

bạn xử lý hàng trăm hoặc thậm chí hàng nghìn yêu cầu

mỗi giây mà vẫn duy trì đô ổn định.

- Phu Hợp với Microservices:

e Express là lựa chọn phổ biến cho các ứng dụng

Microservices, nơi bạn có thể xây dựng và quản lý nhiều

dịch vụ nhỏ đôc lập.

- H6 Trợ Các Thư Viên Bổ Sung:

e Express có thư viên middleware va plugin đa dạng, giúp

bạn mở rông chức năng của ứng dụng môt cách dễ dàng

1.2.1.3 Firebase

Khái niêm: Firebase là môt nền tảng phát triển ứng dụng được

cung cấp bởi Google, bao gồm mot loạt các dịch vụ được thiết kế để

giúp bạn xây dựng, triển khai và quản lý ứng dụng web và di đông Các dịch vụ trong Firebase bao gồm:

Trang 25

WEBSITE

- Realtime Database: Môt cơ sở dữ liêu thời gian thực cho phép

đồng bô dữ liêu giữa nhiều thiết bị và ứng dụng môt cách

nhanh chóng.

- Authentication: Dịch vụ xác thực người dùng, giúp ban quan lý

đăng nhập và đăng ký thông qua nhiều phương thức khác

nhau.

- Cloud Firestore: Môt cơ sở dữ liêu tài liêu linh hoạt và mở rông,

được cung cấp bởi Firebase, cho phép bạn lưu trữ và truy vấn

dữ liêu môt cách hiêu quả.

- Cloud Storage: Dịch vụ lưu trữ đám mây cho phép bạn lưu trữ

và quản lý các tệp tin như hình ảnh, video và tài liêu.

- Cloud Functions: Cho phép bạn viết mã chạy trên máy chủ khi

có sự kiên xảy ra trong ứng dụng của bạn, giúp tạo ra các tác

vụ tự đông.

- Hosting: Dich vụ lưu trữ các têp tĩnh và cung cấp hosting cho

ứng dụng web của bạn.

1.2.1.4 Cơ sở dữ liệu: Cloud Firestore

Khái niêm: Cloud Firestore là dịch vụ cơ sở dữ liêu tài liêu linh

hoạt, được cung cấp bởi Firebase Nó được thiết kế để lưu trữ và đồng bô dữ liêu giữa nhiều thiết bị và ứng dụng môt cách nhanh

chóng và hiêu quả.

Điểm nổi bật:

- - Thời Gian Thực (Real-Time):

e Firestore hỗ trợ đồng bô thời gian thực, giúp các thiết bi

kết nối nhận các cập nhật dữ liêu ngay lập tức khi có sự

thay đổi Điều này làm cho viêc xây dựng các ứng dụng

đa người chơi và ứng dụng cần cập nhật nhanh trở nên dễ

dàng.

- Tich Hợp Dễ Dang:

e Firestore tích hop chặt chẽ với các dịch vụ khác của

Firebase và nền tảng phát triển ứng dụng, giúp giảm đô

phức tạp của viêc tích hợp các phần khác nhau của hê thống.

- - Cơ Sở Dữ Liêu NoSQL Tài Liêu (Document-Oriented):

e Firestore sử dụng mô hình cơ sở dữ liêu NoSQL, dựa trên

tài liêu, giúp linh hoạt trong viéc lưu trữ và truy xuất dữ

liêu.

- Đa Nền Tang:

Trang 26

WEBSITE

e Firestore hỗ trợ nhiều nền tảng như Android, iOS, và web,

giúp phát triển ứng dụng cho nhiều loại thiết bị môt cách

thuận tiên.

Quyền Truy Cập và Bảo Mật:

se Firestore cung cấp cơ chế quyền truy cập và bảo mật

mạnh mẽ, giúp kiểm soát quyền truy cập dữ liêu dựa trên

các quy tắc được định nghĩa

Hỗ Trợ Offline:

e Firestore hỗ trợ làm viéc offline, giúp ứng dụng tiếp tục

hoạt đông và đồng bô dữ liêu khi không có kết nối

internet.

1.2.2 Front end

1.2.2.1 Reactjs

Khái niêm: ReactJS là môt thư viên JavaScript phát triển bởi

Facebook, giúp xây dựng giao diên người dùng đáp ứng và tương tác cho ứng dụng web Với cách quản lý giao diên thông minh và hiêu

qua, ReactJS giúp tạo ra trải nghiêm người dùng mượt mà và dé

dàng quản lý các thành phần của ứng dụng.

Tính năng nổi bật:

Thư viên giao diên người dùng (UI Library): React.js là môt

thư viên dùng để xây dựng giao diên người dùng, không phải

mot framework hoàn chỉnh.

Virtual DOM (DOM ảo): React sử dụng môt biểu diễn ảo của

cay DOM gọi là Virtual DOM để tối ưu hóa hiêu suất Thay vìcập nhật trực tiếp DOM mỗi khi có thay đổi, React so sánh

DOM ảo với DOM thực tế và chỉ cập nhật những phần cần thiết, giúp tăng hiêu suất ứng dụng.

Components (Thành phần): React chia giao diên người dùng

thành các thành phần đôc lập, cho phép ta có thể tái sử

dụng mã và quản lý ứng dụng dễ dàng hơn Các thành phần

có thể nhúng vào nhau để xây dựng giao diên phức tạp.

JSX (JavaScript XML): React cho phép viết mã HTML bên

trong mã JavaScript thông qua JSX JSX là môt cú pháp mở rông của JavaScript, giúp bạn xây dựng giao diên người dùng

môt cách rõ ràng và dễ đọc hơn

State Management (Quan lý trạng thai): React hỗ trợ quản lý

trạng thái của ứng dụng thông qua thuôc tinh state Bằng cách sử dụng state, ta có thể cập nhật và hiển thị dữ liêu

Trang 27

WEBSITE

trong giao diên người dùng dựa trên sự thay đổi của trạng

thái.

- Hỗ trợ cho React Router: React Router là mét thư viên riêng

biêt cho viêc quản lý định tuyến (routing) trong ứng dụng

React Nó giúp ta xây dựng ứng dụng đa trang môt cách dễ

dàng.

- Hé sinh thái phong phú: React có môt hé sinh thái mạnh mẽ

với nhiều thư viên và công cụ hỗ trợ như Redux, Mobx (cho

quản lý trạng thái), React Router (định tuyến), React Native

(phát triển ứng dụng di đông), và nhiều thư viên khác.

- Công đồng lớn và hỗ trợ tốt: React có môt công đồng lớn va

đadạng, cung cấp nhiều tài liêu, ví dụ và hỗ trợ từ công

đồng.

- Lý do sử dụng ngôn ngữ:

- Thư viên phát triển mạnh mẽ: React.js là môt thư viên

JavaScript phát triển bởi Facebook với sự chú trọng vào hiêu

suất và tính mở rông Nó đã được sử dụng rông rãi trong

nhiều dự án lớn và đã được thử nghiêm và tối ưu hóa mot

cách kỹ lưỡng.

- Virtual DOM (DOM ảo): React sử dung Virtual DOM dé cải

thiên hiêu suất Thay vì cập nhật trực tiếp DOM mỗi khi có

thay đổi, React so sánh DOM ảo với DOM thực tế và chỉ cập

nhật những phần cần thiết, giúp tăng tốc đô làm viêc và

giảm tải cho trình duyêt.

- Thanh phần (Component)-Based Development: React

khuyến nghị viéc phân chia giao diên thành các thành phần

đôc lập Điều này giúp tái sử dụng mã, dễ dàng bảo trì, và

quản lý giao diên người dùng môt cách hiêu quả.

- JSX (JavaScript XML): React cho phép viết mã HTML trong

JavaScript thông qua JSX, giúp làm cho mã nguồn dễ đọc hơn

và cung cấp môt cách tiếp cận trực quan cho viêc xây dựng

giao diên người dùng.

- Quan lý trạng thái dễ dang: React cung cấp cơ chế quan lý

trạng thái thông qua thuôc tính state, giúp bạn dễ dàng cập nhật và hiển thị dữ liêu dựa trên sự thay đổi của trạng thái.

- _ Hê sinh thái mạnh mẽ: React có môt hé sinh thái phong phú

với nhiều thư viên và công cụ hỗ trợ như Redux, React

Router, Material-UI, và nhiều thứ khác.

- Hỗ trợ công đồng lớn: React có môt công đồng lớn và đa

dạng, cung cấp nhiều tài liêu, ví dụ và hỗ trợ từ công đồng

Trang 28

WEBSITE

- Hỗ trợ cho ứng dụng di đông: Bằng cách sử dụng React

Native, bạn có thể chia sẻ mã nguồn giữa ứng dụng web và

ứng dụng di đông, giúp tiết kiêm thời gian và công sức trong

viêc phát triển đa nền tảng.

1.1.2.2 Redux

Khái niêm: Redux là một thư viên quản lý trạng thái dựa trên

kiến trúc Flux trong ứng dụng web Nó giúp quản lý trạng thái ứng

dụng môt cách dễ dàng, dễ kiểm tra và dễ bảo trì bằng cách tạo ra

mot kho trang thái (store) duy nhất cho toàn bô ứng dung.

Redux hoạt đông dựa trên các nguyên tắc cơ bản sau:

- Store: Redux sử dụng mot kho trạng thái duy nhất (store) để

lưu trữ toàn bô trạng thái của ứng dụng.

- Action: Môt action là môt đối tượng JavaScript mô tả môt

hành đông mà ứng dụng có thể thực hiên Nó phải có môt thuôc tính ‘type’ để định danh loại hành đông đó.

- Reducer: Reducer là môt hàm xử lý (handler) nhận vào trang

thái hiên tại và môt action, và trả về môt trạng thái mới dựa

trên hành đông đó.

- Dispatch: Dispatch là môt phương thức của store để gửi môt

action đến reducer và cập nhật trạng thái của ứng dụng.

1.2.2.3 Design System (Material-UI)

Khái niêm: Material-UI là môt thư viên giao diên người dung (Ul)

cho React, được xây dựng trên cơ sở thiết kế "Material Design" của

Google Dưới đây là môt số khái niêm quan trong trong Material-UI:

¢ Components (Các thành phần):

- Material-Ul cung cấp môt loạt các thành phần giao diên

đã được thiết kế sẵn, như Button, AppBar, TextField,

Drawer, và nhiều thành phần khác Những thành phần này giúp tạo ra giao diên người dùng có chất lượng cao và

tuân theo nguyên tắc thiết kế Material

se Grid System (Hê thống lưới):

- Hê thống lưới của Material-UI giúp xây dựng bố cục linh

hoạt và đáp ứng Nó giúp bạn sắp xếp và định vị cácthành phần trên trang web của mình môt cách dễ dang

e Theme (Chủ dé):

- Material-Ul hỗ trợ chủ dé (theme) để bạn có thể tùy chỉnh

giao diên của ứng dụng theo ý muốn Bạn có thể định

nghĩa các mau sắc, kiểu chữ, và các thuôc tính khác của

chủ đề.

Trang 29

WEBSITE

e Styles (Kiểu dáng):

- Để tùy chỉnh giao diên, Material-UI hỗ trợ môt hê thống

kiểu dáng mạnh mẽ Bạn có thể sử dụng CSS-in-JS thông

qua thư viên @mui/system hoặc sử dụng CSS thông

thường.

e Icons (Biểu tượng):

- Material-UI tích hợp sẵn các biểu tượng Material Design,

giúp bạn sử dụng chúng môt cách thuận tiên và nhất

quán.

e Responsive Design (Thiết kế đáp ứng):

- Material-UI hỗ trợ thiết kế đáp ứng, giúp ứng dụng của

bạn hiển thị môt cách đẹp mắt trên nhiều thiết bị và kích

thước màn hình khác nhau.

- Material-Ul là môt lựa chọn phổ biến trong công đồng

React để xây dựng giao diên người dùng mà theo đuổi

phong cách thiết kế Material Design.

Lý do sử dụng:

e _ Thiết kế theo nguyên tac Material Design:

- Material-UI được xây dựng dựa trên nguyên tắc thiết kế

Material Design của Google, giúp ứng dụng của bạn có

giao diên người dùng hiên đại, dễ sử dụng và thân thiên

với người dùng.

e Cac thành phần đa dang và sẵn có:

- Material-Ul cung cấp môt bô sưu tập lớn các thành phần

giao diên đã được thiết kế sẵn, giúp giảm thời gian và

công sức khi phát triển Bạn có thể sử dụng các thành

phần như Buttons, Typography, AppBar, và nhiều thành phần khác mà không cần phải xây dựng từ đầu.

e Hê thống lưới và đô linh hoạt:

- Material-UI có hê thống lưới mạnh mẽ giúp bạn dễ dàng

tạo bố cục đẹp mắt và đáp ứng trên nhiều thiết bị

se Tich hợp dễ dàng:

- Với công đồng lớn và sự phổ biến, Material-UI tích hợp dễ

dàng vào dự án React Hơn nữa, có nhiều tài liêu và

nguồn thông tin hữu ích giúp bạn nhanh chóng làm quen

và sử dụng thư viên.

se Chủ đề và tùy chỉnh:

- Material-Ul hỗ trợ chủ dé, cho phép bạn tùy chỉnh giao

diên ứng dụng theo ý muốn Bạn có thể định nghĩa màu

Trang 30

WEBSITE

sắc, kiểu chữ, và các thuộc tính khác của chủ đề để phan

ánh đúng với thương hiêu của bạn.

e Phat triển và duy trì dé dàng:

- Sử dung Material-UI giúp giảm bớt công viéc phức tạp

trong viéc xây dựng giao diên người dùng và duy trì ma

nguồn Bạn có thể tận dụng các tính năng có sẵn, giảm

thời gian phát triển và đảm bảo tính nhất quán trong giao

diên.

1.2.3 Dialogflow trong việc xây dựng chatbot

Khái niêm: Dialogflow (tiền thân là API.AI) là môt dịch vụ do

Google cung cấp nhằm giúp các lập trình viên dễ dàng hơn khi lập

trình các sản phẩm có giao tiếp giữa người dùng với sản phẩm thông

qua các đoạn hôi thoại bằng văn bản (text) hoặc giọng nói (voice)

Dialogflow sử dụng trí tuê nhân tạo (AI) giúp phân tích ngôn ngữ

tự nhiên để hiểu được những gì người dùng đưa vào Hiên tại có 2

phiên bản đó là 1 phiên bản miễn phí và tính phí Phù hợp với mụctiêu chức năng dự án và dự đoán và trả lời câu hỏi thì bản miễn phí

đã đáp ứng được chức năng hê thống.

Dialogflow cung cấp môt loạt các chức năng và tính năng mạnh

mẽ để xây dựng và triển khai ứng dung trò chuyên Dưới đây là môt

số chức năng chính của Dialogflow:

Hiểu ý định (Intent Recognition):

- Dialogflow sử dụng trí tuê nhân tạo để nhận diên ý định của

người dùng từ câu hỏi hoặc đoạn văn bản.

- (C6 khả năng định nghĩa và xử lý hàng loạt các Intent để đáp

ứng mọi tình huống.

Xử lý Ngôn Ngữ Tự Nhiên (Natural Language Processing - NLP):

- Dialogflow sử dung NLP để hiểu và xử lý ngôn ngữ tự nhiên,

giúp nó đồng thời hiểu ý định, entity, và ngữ cảnh của người

dùng.

Quản lý Ngữ Cảnh (Context Management):

- Sử dụng Context để theo dõi thông tin giữa các lượt trò

chuyên, giúp cải thiên hiểu biết của agent về ngữ cảnh và

cung cấp câu trả lời phù hợp.

Tích Hợp Webhook (Fulfillment):

- Dialogflow cho phép tích hợp với webhook để xử lý logic kinh

doanh, tương tác với cơ sở dữ liêu, và thực hiên các hành

đông khác theo yêu cầu người dùng.

Trang 31

WEBSITE

Hỗ Trợ Da Ngôn Ngữ:

- Cung cấp hỗ trợ cho nhiều ngôn ngữ, giúp ứng dụng có thé

tương tác với người dùng trên khắp thế giới

Phân Loại Entity (Entity Recognition):

- Cho phép định nghĩa và sử dụng các entity để trích xuất

thông tin quan trọng từ câu hỏi của người dùng.

Phân Tích Thực Thể (Sentiment Analysis):

- Cung cấp kha năng phân tích cảm xúc của người dùng từ

ngôn ngữ họ sử dụng, giúp phản hồi và tương tác môt cách

linh hoạt hơn.

Mô Hình Dữ Liêu Cảm Xúc (Emotion Detection):

- Dialogflow có thể nhận diên các biểu hiên của cảm xúc trong

câu hỏi, giúp làm cho trải nghiêm tương tác trở nên phong

phú hơn.

Phân Loại Từ Loại (Part-of-Speech Tagging):

- Hỗ trợ phân loại từ loại trong câu hỏi của người dùng, cung

cấp thông tin chi tiết về cấu trúc ngôn ngữ.

Phân Tích Tổng Hợp Tiếng Nói (Speech Synthesis):

- Dialogflow có khả năng xử lý và tổng hợp tiếng nói, giúp nó

tương tác không chỉ qua văn bản mà còn qua giọng nói.

Tất cả những chức năng này giúp Dialogflow trở thành môt

công cụ mạnh mẽ cho việc xây dựng các ứng dụng trò chuyên thông

minh và linh hoạt, phục vụ nhiều mục đích từ hỗ trợ khách hàng đến

tự đông hóa các quy trình kinh doanh.

1.3 Tổng quan về phông chữ và màu sắc đã sử dụng trong dự

án

Với mục tiêu xây dựng giao diên thân thiên, dễ sử dụng, nhất

quán, project sử dụng hé thống thiết kế (design systems) của

Material-UI Phông chữ Inter không chân đem lại cảm giác hiên đại, đơn

giản, rõ ràng

Màu sắc chủ đạo blue biểu thị sự tin cậy, ổn định, an toàn

Tông màu chủ đạo của dự án là màu xanh dương thể hiên sự

tin cậy và chắc chắn

Trang 32

Font-normal Font-semibold SEMIBOLD CAPITALIZED

12px ).75rem 6px 1 rem Font-normal Font-semibold SEMIBOLD CAPITALIZED

cũng như nhu cầu sử dụng website để đặt phòng và tìm hiểu phòng

Tìm hiểu các chức năng và mục tiêu của hê thống và đưa ra các đối tượng sử dụng, các thông tin cụ thể sẽ đưa ra trong hê thống cũng

như các công nghê áp dụng trong dự án Các chương tiếp theo sẽ đi

Trang 33

Trang 34

ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ HỆ

các tác nhân, miêu ta usecase diagram, các kịch ban (scenario), biểu đồ tuần tự, phân

tích cơ sở dir liệu.

2.1 Xác định các tác nhân (Actor)

Bảng 2 1 Các tác nhân của hệ thống

STT| Tên tác nhân Mô tả Hệ thống tương tác

Người quản trị hệ thống truy cập

vào ứng dụng dé cung cấp các Ứng dụng trên

1 Quan tri hé thong thong tin lién quan đến nội dung | website, được lưu trữ

(Admin) ứng dụng như: thêm, sửa, xóa | dữ liệu trên firestore,

Là người có quyền hạn cao nhất | storagequyết định vận hàng hệ thống

2 Khách hàng Khách hàng truy cập website để | Ứng dụng trên

(Customer) đặt phòng, viết đánh giá website

ho phép t ap vao t ,

3 dé xem, tim kiém, cho thué

(Host) ` website

phòng

2.2 Xây dựng bảng thuật ngữ

Mục tiêu: Nhằm giải thích các thuật ngữ được sử dụng trong quá trình xây dựng

hệ thống dé mọi người sáng tỏ trong quá trình phát triển phần mềm Xác định tiền dữliệu cho hệ thống

Bảng 2 2 Bảng thuật ngữ

bà Tiếng Anh Tiếng Việt Giải thích nội dung

Quản lý thông tin như người dùng,

1 Admin Quản tri viên | phòng va phòng cũng như phòng đã

đặt

STVH: NGÔ VAN TINH - B19DCPT203 27|Page

Trang 35

không cần đăng nhập như xem thông

tin phòng, xem danh sách phòng và

các đánh giá và chỉ khi muốn đặt

phòng, xem thông tin cá nhân mới

cần đăng nhập

Room Phòng Chứa các thông tin cơ bản của phòng

như: name, miêu tả, sức chứa

khách hàng về dịch vụ phòng

Chatbot Bot trò chuyện

Thông tin về cuộc hội thoại giữakhách hàng và bot trả lời các câu hỏiliên quan đến hệ thống

Gồm các thông tin liên quan đến việcđặt phòng như: giá, số đêm, số lượngngười, phương thức thanh toán

2.3 Xác định và mô tả các usecase sử dụng

2.3.1 Danh sách các usecase sử dụng chung cho user

Bảng 2 3 Danh sách các usecase sử dụng chung cho user

STT Tên usecase Mô tả

1 | Dang ký (Register) Nguoi dùng dang nhập vào hệ thông không bao gôm

admin.

2_ | Đăng nhập (Login) Người dùng đăng nhập vào hệ thống

Quản lý thông tin tài ;

3 | khoản (Account Người dùng co thê chỉnh sửa thông tin cá nhân.

Information)

Trang 36

ĐỒ ÁN TỐT NGHIỆP

THỐNG

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ

4 | Xem danh sách phòng | phòng.

Người dùng xem thông tin tổng quan

Xem chỉ tiết thông tin Người dùng xem được thông tin cụ thểphòng như: giá, dịch vụ, tiên ích, các quy

giá một phòng phòng

> phong dinh cua phong

Tim kiém va loc Tìm kiếm va lọc phòng với các thông tin người dùng

6 ` Ạ

phòng (Search Room) | nhập.

7 Xem danh sách đánh | Người dùng có thé xem thông tin về các danh gia 1

8 | Đăng xuất (Logout) Người dùng có thé đăng xuất khỏi ứng dụng

2.3.2 Danh sách các usecase sử dụng cho customer

Bảng 2 4 Danh sách các usecase sử dụng chung cho khách hàng

1 | Đặt phòng (Booking)

Cho phép khách hàng đặt phòng và thanh toán với paypal.

Khách hàng có thể chat với để giải đáp

5_ | Chatbot thac mac.

Trang 37

ĐỒ ÁN TỐT NGHIỆP

THỐNG

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ

Trở thành chủ phòng Khách hàng đăng ký phòng và yêu cầu trở

thành chủ phòng

2.3.3 Danh sách các usecase sử dụng cho admin

Bảng 2 5 Danh sách các usecase sử dụng chung cho admin

STT Tên usecase Mô tả

Admin có thể thêm mới phòng, chỉnh sửa

1 | Quan lý phòng thông tin phòng và xóa phòng

Admin có thể xem thông tin về khách hàng

¬ ea trong hê thống, xóa khách hàng và chỉnh

2 | Quan lý người dùng | cera thông tin user

3 | Xem thé ng kê Admin có thê xem tong quan thông tin vê user, room,

booking trong hé thong

4 Quản lý thông tin Admin có thé xem thông tin về các phòng đã đặt trong

đặt phòng hệ thông

5 | Xuất báo cáo Admin có thê xuât báo cáo vê các phòng có trong hệ

thống hoặc thông tin các phòng đã đặt

Trang 38

ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ

THỐNG

2.4 Xây dựng biểu đồ usecase

2.4.1 Biểu đồ usecase tong quan

Dựa trên viêc xác định các yêu cầu chức năng hê thống, liêt kê

từng usecase cho mỗi actor, dưới đây sẽ trình bày usecase tổng

quan hê thống:

Powered By Visual Paradigm Cammunily Edition @&

Hình 2 I Biểu đồ usecase tong quan

Trang 39

THỐNG

2.4.2 Biểu đồ use case chỉ tiết của đặt phòng

Hình 2 2 Usecase cho tiết chức năng đặt phòng2.4.3 Biểu đồ usecase chỉ tiết chức năng quản lý phòng

Trang 40

THỐNG

Quản lý phòng

<<Extond>>

<< Exiend>> i Đời Extond> ='

Hình 2 3 Use case chi tiết chức năng quản lý phòng

2.4.4 Biểu đồ usecase chỉ tiết chức năng đánh giá phòng

Đánh gid phòng

Hình 2 4 Usecase chi tiết chức năng đánh giá phòng

2.4.5 Usecase chỉ tiết chức năng thống kê phòng

Tiêu đề	Nghiên cứu phát triển website quản lý và đặt phòng tích hợp chatbot
Tác giả	Ngô Văn Tình
Người hướng dẫn	ThS. Nguyễn Thị Thanh Tâm
Trường học	Học viện Công nghệ Bưu chính Viễn thông
Chuyên ngành	Công Nghệ Đa Phương Tiện
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	100
Dung lượng	20,54 MB