PHÒNG TRỌ TÍCH HỢP CHATBOT
1.22.2. Tương túc 1PI với React
- Hàm apiGetResponseChatbot được sử dụng dé gửi yêu cầu POST đến endpoint
"/messape/" của API sử đụng thư viện Axios. Điều này giúp tương tác với API từ ứng dụng React của bạn và nhận phản hồi từ server.
apiGetResponseChatbot =
Hình 4. 4 Twong tac API voi React 1.22.3. Xw lp twong tac voi cơ sở dữ liệu
- Ham nay duoc su dung dé xw ly cac tin nhan yéu cau tir client. Nó trả về một JSON đối tượng chứa thông điệp và phản hồi đữ liệu.
- _ Xử lý các loại yêu cầu khác nhau từ khách hàng và tạo ra các phản hồi tương ứng.
-_ Mỗi trường hợp trong switch tương ứng với một loại nội dung cụ thể từ client.
SVTH: Ngô Quang Đại 69 GVHD: TS.Nguyễn Năng Hùng Vân
Phạm Đặc Chương
er(async (res, { content, data }) => { let response = | |
h (content) { esponse =
ẹ { t text:
{ text: ằ code:
jonse = [{ text: ${data. userText}
break D
response {
text:
options:
ĐH 1d:
Hình 4. 5 Xứ lÿ tương tác dữ liệu
- Điêm cuôi này là một tuyên xử lý hàm được gọi khi có yêu câu đên điểm cuôi /message/.
- Yêu cầu loại được xác định dựa trên trường typetrong đữ liệu đã nhận và sau đó chuyên lệnh gọi đến hàm handleMessape hoặc trả về một thông báo mặc định nếu yêu cầu loại không được hỗ trợ.
const endpoint = asyncHandler((req, res) => { const { type, content, data } = req.body const defautText =
¡là as yt) ) return handleMessage(res, { content, data }) return res.json(
Success: false, mes: defautText,
)
Hình 4. 6 Tuyễn xử lý hàm
SVTH: Ngô Quang Đại 70 GVHD: TS.Nguyễn Năng Hùng Vân
Phạm Đặc Chương
1.23. Giao dién Chatbot
Chatbot CSKH ằ<
Phòng trọ sinh viên xin
@ chào!
Chào mừng bạn đến thăm website của chúng tôi ~
@ S> SS
Trudc khi bat dau xin phép cho web hỏi tên của bạn là v
Chat somethings... :
Hình 4. 7 Giao dién Chathot
- Khi người dùng ấn logo chatbot trên giao diện trang chủ thì website sẽ tự động mở ra hộp thoại chatbot như hình trên.
- Người dùng bắt đầu chat trong hộp thoại chat bot 1.24. Giao diện người dùng
1.24.1, Giao diện trang chủ Người Dùng Truy Cập Trang Chủ:
Khi người dùng truy cập website, họ sẽ được chảo đón bằng giao diện trang chủ thân thiện và đễ sử dụng.
Giao diện trang chủ sẽ hiển thị các thông tin chính về phòng trọ, với hình ảnh và các thông tin tong quan.
Xem Chi Tiết Phòng Trọ Mà Không Cần Đăng Nhập:
Người dùng có thể đễ đàng xem chỉ tiết về từng phòng trọ mà không yêu cầu đăng nhập.
SVTH: Ngô Quang Đại 7I GVHD: TS.Nguyễn Năng Hùng Vân
Phạm Đặc Chương
Théng tin chi tiét bao g6m hinh ảnh, giá cả, diện tích, tiện ich di kèm, vị trí trên bản đồ, và mô tả chi tiết về phòng.
Tìm Kiếm và Lọc Phòng Trọ:
Giao điện trang chủ cung cấp công cụ tìm kiếm nhanh chóng và lọc thông tin dựa trên các tiêu chí như giá cả, diện tích, tiện ích, và vị trí.
Người dùng có thê nhập các thông số cụ thể hoặc sử dụng bộ lọc đề thu hẹp kết quả.
Giao Diện Thân Thiện:
Đảm bảo rằng giao diện trang chủ được tôi ưu hóa cho trải nghiệm trên điện thoại di động, giúp người dùng để dàng truy cập thông tin mọi nơi.
v cứ QanđiếmclaNGHẫNC X | sh focaihost/ 127.001 /pho K - WW Phũcgtroennh vờn x (p #leWe xo Tube x | Q Facebook x i+ ứ
ô Œ @ keahes+sS1 etx w O2 q3:
P| phongtrosinhvien 3] Đăng kỷ — â+ Đăng nhập Trang chủ Cho thuê phỏngtrọ Nhảchothuê Cho thuế căn hộ - Tìm người ở ghép
[ 5 } = Ỉ : l =
Kênh thông tin Phòng Trọ số 1 Việt Nam
ing
Tổng 1 kết quả Danh mục cho thuê
Sápxếp: Mặc định
> Ni
THUÊ TRỌ 2 > Cho thuê cin hy
3 TT 3.000.000 đông/tháng 90m + Man hành ôrin 50000 Phithina Mo An Chika Alan HAah San
Hinh 4. 8 Giao dién trang chủ 1.24.2, Giao diện đăng ký
Form Đăng Ký Tài Khoản:
Giao diện đăng ký sẽ hiển thị một form đơn giản với các trường thông tin cần thiết cho việc tạo tài khoản mới.
Các trường thông tin thường bao gồm tên đây đủ, số điện thoại, mật khẩu, và xác nhận mật khẩu.
kết hợp giữa chữ cái, số và ký tự đặc biệt.
Xác Nhận Tài Khoản:
SVTH: Ngô Quang Đại 72 GVHD: TS.Nguyễn Năng Hùng Vân
Phạm Đặc Chương
Thêm một bước xác nhận tài khoản thông qua mã otp số điện thoại để đảm bao tính bảo mật và chính xác của thông tin đăng ký.
Thông Báo Lỗi :
Hiển thị thông báo lỗi rõ ràng nếu người dùng nhập thông tin không hợp lệ hoặc nếu có lỗi xảy ra trong quá trình đăng ký.
Cung cấp liên kết hoặc nút dé người dùng liên hệ với hỗ trợ nếu cần giúp đỡ.
Nút Đăng Ký:
Một nút "Đăng Ký" rõ ràng để người dùng có thé hoan thành quá trình đăng ký.
Liên Kết Đăng Nhập:
Cung cấp liên kết hoặc nút để người dùng chuyền đến trang đăng nhập nếu họ đã có tài khoản.
Thông Báo Đăng Ký Thành Công:
Hiển thị thông báo đăng ký thành công và cung cấp hướng dẫn về cách bắt đầu sử dụng tài khoản mới.
phongtrosinhvien
Tạo tài khoản
Số điện thoại
Mật khẩu
Tên của bạn
Disk Đã có tai khodn? 2) toi dang nh3p
Hình 4. 9 Giao diện đăng ly 1.24.3. Giao diện đăng nhập
Form Đăng Nhập:
Hiển thị form đăng nhập với các trường thông tin bao gồm số điện thoại và mật
khâu.
Nút Đăng Nhập:
SVTH: Ngô Quang Đại 73 GVHD: TS.Nguyễn Năng Hùng Vân
Phạm Đặc Chương
Một nút "Đăng Nhập" rõ ràng để người dùng bắt đầu quá trình đăng nhập. Thông Báo Lỗi:
Hiền thị thông báo lỗi nếu có thông tin đăng nhập không chính xác hoặc nếu có lỗi xảy ra trone quá trình đăng nhập.
Tạo Tài Khoản Mới:
Liên kết hoặc nút để chuyên hướng người dùng đến trang đăng ký nếu họ chưa có tài khoản.
Liên Kết Đăng Nhập Nhanh (Fast Login):
Cung cấp liên kết hoặc nút để người dùng đăng nhập nhanh chóng nếu họ đã sử dụng tính năng nhớ đăng nhập.
Giao Diện Thân Thiện:
Đảm bảo rằng giao diện đăng nhập được tối ưu hóa cho trải nghiệm trên máy tính để người dùng dễ dảng truy cập.
Thông Báo Đăng Nhập Thành Công:
Hiển thị thông báo đăng nhập thành công và chuyển hướng người dùng đến trang chủ.
phongtrosinhvien
Đăng nhập
Số điện thoại
Mật khẩu
Hình 4. 10 Giao diện đăng nhập 1.24.4. Giao diện đăng tin
Xác Minh Tài Khoản:
Trước khi đăng tin, sẽ hiện yêu cầu xác minh tải khoản để đảm bảo tính chính xác va chat lượng của thông tin dang tin.
SVTH: Ngô Quang Đại 74 GVHD: TS.Nguyễn Năng Hùng Vân
Phạm Đặc Chương
Form Dang Tin:
Hién thi form đăng tin với các trường thông tin cần thiết như tiêu đề, mô tả, gia, diện tích, địa chỉ, tiện ích đi kèm, và hình ảnh phòng.
Bộ Lọc và Chọn Hình Ảnh:
Cung cấp bộ lọc và chức năng tải lên hình ảnh để có thể tạo bài đăng phong cách và thu hút hơn.
Thông Báo và Hướng Dẫn:
Hiển thị thông báo và hướng dẫn rõ ràng về cách điền thông tin đúng cách đề tối ưu
hóa hiển thị và khả năng tìm kiếm.
Xác Nhận va Dang Tin:
xác nhận thông tin trước khi đăng tin chính thức.
Quản Lý Bài Đăng:
Cung cấp khả năng quản lý các bài đăng đã đăng, cho phép sửa, xóa, hoặc tạm dừng hiển thị theo nhu cầu của người dùng.
Bang Gia va Cac Tuy Chon Nang Cao:
Nếu có, hiển thị các tùy chọn nâng cao như bảng giá để nâng cấp bài đăng, tăng vị trí hiển thị, hoặc những đặc quyền khác.
Tích Hợp Bản Đồ và Vị Tri:
Cho phép người dùng thêm địa chỉ thông qua bản đồ để đảm bảo thông tin vị trí chính xác.
Kiểm Tra Lỗi và Thông Báo Thành Công:
Kiếm tra lỗi khi người dùng điền thông tin và hiển thị thông báo thành công sau khi dang tin.
SVTH: Ngô Quang Đại 75 GVHD: TS.Nguyén Nang Hung Vân
Pham Dac Chuong
Tao mdi tin dang mn 8 phongtrosinhwien
My workspace :
1. Địa chỉ cho thuê k`ả
+ \ \
Tỉnh/Thành phố Quận/Huyện Phường/Xã _ \
OO 5
vylost297 ar Đường/Phố/Số nhà ( ; Q
/ [8] Thêng tin cá nhân
Địa chỉ chính xác ;
&B Tin dang › i
© Danh
2. Thông tin mô tả Lưu ÿ khi đáng tin
ô Nội đi
Loại chuyên mục Š
Hình 4. II Giao diện đăng tim