KHÓA LUẬN tốt NGHIỆP hệ THỐNG THU THẬP và CHIA sẻ THÔNG TIN bất ĐỘNG sản kết hợp CHATBOT
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.86 MB, 99 trang )
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM
NGUYỄN LÊ HỒI ÂN
KHÓA LUẬN TỐT NGHIỆP
HỆ THỐNG THU THẬP VÀ CHIA SẺ THÔNG TIN
BẤT ĐỘNG SẢN KẾT HỢP CHATBOT
Real Estate information collection and sharing system
combined chatbot
KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM
TP. HỒ CHÍ MINH, 2021
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM
NGUYỄN LÊ HỒI ÂN – 16520011
KHÓA LUẬN TỐT NGHIỆP
HỆ THỐNG THU THẬP VÀ CHIA SẺ THÔNG TIN
BẤT ĐỘNG SẢN KẾT HỢP CHATBOT
Real Estate information collection and sharing system
combined chatbot
KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM
GIẢNG VIÊN HƯỚNG DẪN
TS. HUỲNH NGỌC TÍN
ThS. TRẦN ANH DŨNG
TP. HỒ CHÍ MINH, 2021
DANH SÁCH HỘI ĐỒNG BẢO VỆ KHÓA LUẬN
Hội đồng chấm 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.
1. ................................................. – Chủ tịch.
2. ................................................. – Thư ký.
3. ................................................. – Ủy viên.
4. ................................................. – Ủy viên.
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM
TRƯỜNG ĐẠI HỌC
Độc Lập – Tự Do – Hạnh Phúc
CÔNG NGHỆ THÔNG TIN
TP. HCM, ngày tháng năm 2021
________________________
________________________
NHẬN XÉT KHỐ LUẬN TỐT NGHIỆP
(CỦA CÁN BỘ HƯỚNG DẪN)
Tên khố luận:
HỆ THỐNG THU THẬP VÀ CHIA SẺ THÔNG TIN BẤT ĐỘNG SẢN
KẾT HỢP CHATBOT
Nhóm SV thực hiện - Cán bộ hướng dẫn:
Nguyễn Lê Hồi Ân 16520011
- TS. Huỳnh Ngọc Tín
- ThS. Trần Anh Dũng
Đánh giá Khóa luận
1. Về cuốn báo cáo:
Số trang _______ Số chương _______
Số bảng số liệu _______ Số hình vẽ _______
Số tài liệu tham khảo _______ Sản phẩm _______
Một số nhận xét về hình thức cuốn báo cáo:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
2. Về nội dung nghiên cứu:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
3. Về chương trình ứng dụng:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
4. Về thái độ làm việc của sinh viên:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
Đánh giá chung:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
Điểm từng sinh viên:
Nguyễn Lê Hoài Ân: /10
Người nhận xét
(Ký tên và ghi rõ họ tên)
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM
TRƯỜNG ĐẠI HỌC
Độc Lập – Tự Do – Hạnh Phúc
CÔNG NGHỆ THÔNG TIN
TP. HCM, ngày tháng năm 2021
________________________
________________________
NHẬN XÉT KHOÁ LUẬN TỐT NGHIỆP
(CỦA CÁN BỘ PHẢN BIỆN)
Tên khố luận:
HỆ THỐNG THU THẬP VÀ CHIA SẺ THƠNG TIN BẤT ĐỘNG SẢN
KẾT HỢP CHATBOT
Nhóm SV thực hiện - Cán bộ phản biện:
Nguyễn Lê Hồi Ân 16520011
Đánh giá Khóa luận
1. Về cuốn báo cáo:
Số trang _______ Số chương _______
Số bảng số liệu _______ Số hình vẽ _______
Số tài liệu tham khảo _______ Sản phẩm _______
Một số nhận xét về hình thức cuốn báo cáo:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
2. Về nội dung nghiên cứu:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
3. Về chương trình ứng dụng:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
4. Về thái độ làm việc của sinh viên:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
Đánh giá chung:
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
Điểm từng sinh viên:
Nguyễn Lê Hoài Ân: /10
Người nhận xét
(Ký tên và ghi rõ họ tên)
LỜI CẢM ƠN
Lời đầu tiên, chúng em xin gửi lời cảm ơn đến ban giám hiệu, quý thầy cô của trường
đại học Công Nghệ Thông Tin, đặc biệt là các thầy cơ trong khoa Cơng Nghệ Phần Mềm
đã tận tình giảng dạy, trang bị cho chúng em những kiến thức cần thiết trong những năm
học tập tại trường.
Chúng em xin gửi lời cảm ơn đến thạc sĩ Trần Anh Dũng, người đã tận tình hướng dẫn và
giúp đỡ trong suốt q trình thực hiện khố luận để chúng em có thể hồn thành tốt khố
luận này.
Em xin cảm ơn các bạn trong nhóm làm khố luận đã đóng góp ý kiến để khố luận hồn
chỉnh hơn.
Cuối cùng, chúng em xin gửi lòng biết ơn sâu sắc đến cha mẹ, gia đình đã tạo mọi điều kiện
về vật chất, tinh thần, động viên, khích lệ và hỗ trợ chúng em trong suốt thời gian qua.
Mặc dù đã cố gắng hoàn thành khoá luận với tất cả sự nổ lực, nhưng khoá luận chắc chắn
khơng tránh khỏi những thiếu sót, chúng em kính mong q thầy cơ tận tình chỉ bảo.
Chúng em xin chân thành cảm ơn!
TP. Hồ Chí Minh, tháng 1 năm 2021
Sinh viên 1
(Ký tên và ghi rõ họ tên)
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM
TRƯỜNG ĐẠI HỌC
Độc Lập – Tự Do – Hạnh Phúc
CÔNG NGHỆ THÔNG TIN
________________________
________________________
ĐỀ CƯƠNG CHI TIẾT
Tên đề tài: Xây dựng ứng dụng thu nhập và chia sẻ thông tin bất động sản kết hợp chatbot
Cán bộ hướng dẫn: TS. Huỳnh Ngọc Tín, ThS. Trần Anh Dũng
Thời gian thực hiện: Từ ngày 01/09/2020 đến ngày 31/12/2020
Sinh viên thực hiện:
1. Nguyễn Lê Hoài Ân – 16520011
Nội dung đề tài:
• Mục tiêu:
-
Xây dựng hệ thống bao gồm những chức năng cơ bản của một trang thông tin bất động
sản: xem tin bất động sản, tìm kiếm thơng tin như: giá cả, địa chỉ, thể hiện chi tiết thông
tin bất động sản, cho phép thích – bình luận bài viết.
-
Xây dựng hệ thống cho phép người dùng đăng tin chia sẻ bất động sản.
-
Xây dựng trang web thông tin bất động sản như một trang mạng xã hội thu nhỏ
-
Xây dựng hệ thống chatbot hỗ trợ người dùng khi có thắc mắc cần giải đáp, nhanh
chóng trong việc nhận câu trả lời thay vì phải nói chuyện trực tiếp với nhân viên, tự
động hố quy trình hỗ trợ người dùng. Cơng nghệ nhóm em sử dụng chatbot là
Dialogflow API, hỗ trợ trong việc tự động trả lời câu hỏi, ngoài ra còn sử dụng thêm
Webhook và facebook application để kết nối server bot lên facebook, người dùng sẽ nói
chuyện với bot thơng qua facebook messenger. Dialogflow hỗ trợ sẵn các câu thoại để
bot nhận diện, nhóm em chỉ cần tích hợp ứng dụng của nhóm vào Dialogflow, sau đó
ghi câu hỏi và câu trả lời mà khơng cần phải xây dựng gì.
-
Xây dựng hệ thống với các công nghệ mới như Nodejs, Reactjs, MongoDB. Nhóm em
chọn những cơng nghệ này vì chúng có tính bao quát rộng hơn, Nodejs hỗ trợ bất đồng
bộ giúp nhiều phương thức chạy động thời, MongoDB là một noSQL hỗ trợ dễ dàng
trong việc thêm dữ liệu, không cần khai báo biến mà sử dụng “key: value”, còn Reactjs
là một frontend mới nổi do facebook tạo ra, hỗ trợ rất nhiều thư viện, giúp dễ dàng
trong việc xây dựng ứng dụng.
• Đối tượng: Những người có nhu cầu tìm kiếm và chia sẻ thơng tin bất động sản.
• Tính mới/ khác biệt về chức năng:
-
Thêm ý tưởng:
Các trang bất động sản hiện nay đa số đều có phương thức hoạt động tương đồng ở
các hình thức chia sẻ thơng tin bất động sản, thông tin được cung cấp tràn lan, một
chiều, khơng có tính xác thực, khơng có nhận xét từ người dùng.
Vì thế nhóm em quyết định xây dựng trang web thông tin bất động sản như một
trang mạng xã hội thu nhỏ, có các chức năng cơ bản như thích – bình luận – nhắn tin
để tăng tính tương tác giữa người dùng, tăng tính xác thực cho thông tin bất động
sản.
-
Chọn lọc các chức năng:
Khảo sát qua các trang bất động sản lớn của Việt Nam hiện nay như diaoconline.vn,
batdongsan.com.vn, alonhadat.com.vn,… nhóm nhận thấy:
Khi tìm được một thơng tin bất động sản mình thích nhưng khách hàng
không thể nào lưu lại, mỗi lần muốn xem một thơng tin khách hàng phải tìm
đến đúng thơng tin đó. Hạn chế trong việc tìm kiếm thơng tin. Và trang
alonhadat.com.vn có thêm mục u thích, vì thế ứng dụng của nhóm có thêm
phần danh sách ưa thích, khi người dùng thấy thích nơi nào có thể chọn lưu
vào danh sách để xem lại sau.
Các trang bất động sản đều trình bày theo hình thức đơn giản, khiến người
dùng dễ dàng sử dụng khi lần đầu vào trang web. Cũng vì thế mà nhóm cũng
đã thiết kế giao diện gọn gàng không rối mắc.
Các trang bất động sản gần như đăng tin bất động sản rất phong phú và đa
dạng, nhưng chúng gần như không giống nhau, người dùng muốn tìm hiểu
phải vào từng trang xem. Tận dụng điều đó nhóm đã sử dụng phương pháp
thu thập thơng tin từ các trang bất động sản lớn ở Việt Nam, để người dùng
khi vào ứng dụng là đầy đủ thông tin của các trang bất động sản trên, không
cần phải mở nhiều trang khác nhau.
Ngồi ra cịn các chức năng cơ bản của các trang bất động sản như tìm kiếm,
đăng tin, sửa tin, xem thơng tin chi tiết.
• Phạm vi:
-
Phạm vi địa lý: Ứng dụng sử dụng tại Việt Nam.
-
Phạm vi chức năng:
Quản lý người sử dụng.
Quản lý bài viết.
Quản lý thông tin bất động sản
Quản lý thông tin bài viết được lấy từ trang alonhadat.com.vn
Quản lý tìm kiếm thơng tin
• Phương pháp thực hiện:
-
Làm việc cá nhân, sử dụng cheerio và request để lấy thông tin công ty từ một trang web
cụ thể, lưu xuống database và xuất lên cho người dùng thấy.
-
Xậy dựng database với mongoDB.
-
Xây dựng hệ thống Restful API với nodejs và express.
• Cơng nghệ sử dụng:
-
Nodejs.
-
MongoDB.
-
Reactjs.
-
ExpressJs.
-
Postman.
-
Visual Code.
-
Webhook.
-
Dialogflow.
Lí do sử dụng các công nghệ trên:
-
Nodejs là một backend bất đồng bộ, khiến các chức năng chạy xong xong với nhau,
điều này giúp ứng dụng chạy mượt hơn, khơng có những khoản khắc ứng dụng gần như
khơng làm gì.
-
MongoDB là một noSQL, là một dạng dữ liệu mã nguồn mở, chúng ta có thể khai báo
bất cứ thứ gì mà khơng cần phải sợ sai kiểu dữ liệu vì MongoDB đọc theo dạng (key :
value)
-
Reactjs là một frontend được nhiều phần mềm sử dụng vì tính phong phú và đa dạng,
được nhiều thư việc hỗ trợ, nên có thể tuỳ biến phần frontend trở nên đẹp hơn mà
không thô cứng.
-
ExpressJs là công nghệ sử dụng ở dưới phần backend Nodejs, giúp xây dựng các API
để gọi tới MongoDB.
-
Postman là một chương trình ngồi để kiểm tra các API một cách độc lập mà không cần
phải thao tác trên ứng dụng.
-
Visual Code là phần mềm để viết và thực thi các dịng lệnh.
-
Webhook là cơng nghệ cho phép ứng dụng cung cấp data cho một ứng dụng khác trong
thời gian thực.
-
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 hay giọng nói. 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.
• Kết quả mong đợi:
-
Hoàn thiện ứng dụng web thu thập và chia sẻ thông tin bất động sản, đáp ứng đủ các
nhu cầu cơ bản.
-
Tạo ra hệ thống cho người dùng có thể đăng thơng tin rao bán trên website.
• Định hướng phát triển: Mở rộng thêm các trang web khác, thêm các tính năng mới tiện
lợi cho người dùng.
Kế hoạch thực hiện: (thời gian thực hiện trong 17 tuần)
STT
Công việc
Thời gian thực hiện
Phân
công
Phase 1: Tìm hiểu và xây dựng ứng dụng web có
4 tuần
backend và frontend
1
Sprint 1: Tìm hiểu các định nghĩa về Nodejs +
Express + Reactjs + mongodb
- Nodejs là gì?
- Express là gì?
1.1
- Reactjs là gì?
Tuần 1 – 2 (1/9/2020 –
13/9/2020)
Ân
- Mongodb là gì?
- Cách kết hợp chúng lại với nhau
2
2.1
Sprint 2: Xây dựng ứng dụng cơ bản kết hợp
Nodejs + Express + Reactjs
- Xây dựng ứng dụng cơ bản để hiểu về luồng
Tuần 3 – 4 (14/9/2020 –
chạy của các ngôn ngữ, kết hợp 2 sever nodejs và
27/9/2020)
Ân
reactjs thành 1
Phase 2: Xây dựng ứng dụng thu nhập và chia sẻ
11 tuần
thông tin của các công ty
3
Sprint 3: Xây dựng RESTful API với database
mongodb
- Tạo database và kết nối mongodb
3.1
- Tạo API để lấy thông tin từ một đường link cụ
thể, xuất ra thông tin và trả về cho người dùng.
- Tạo API thêm, sửa, xoá các lĩnh vực.
4
Sprint 4: Xây dựng Frontend với Reactjs
Tuần 5 – 9 (28/9/2020 –
1/11/2020)
Ân
- Tạo trang web với Reactjs
4.1
Tuần 10 – 15 (2/11/2020 –
- Gọi các API từ Backend lên Frontend để sử dụng 13/12/2020)
Ân
- Thiết kế và chỉnh sửa UI/UX
Phase 3: Kiểm thử và đánh giá
5
2 tuần
Sprint 5: Kiểm thử
- Kiểm thử
5.1
Tuần 16 – 17 (14/12/2020
– 27/12/2020)
Ân
- Đánh giá
Xác nhận của CBHD
TP. HCM, ngày 29 tháng 09 năm 2020
(Ký tên và ghi rõ họ tên)
Sinh viên
(Ký tên và ghi rõ họ tên)
MỤC LỤC
TÓM TẮT KHÓA LUẬN ................................................................................... 1
Chương 1.
TỔNG QUAN ............................................................................... 2
1.1.
Đặt vấn đề............................................................................................ 2
1.2.
Phát biểu bài toán ................................................................................ 2
1.3.
Mục tiêu và phạm vi đề tài ................................................................... 4
Chương 2.
CƠ SỞ LÝ THUYẾT .................................................................... 7
2.1.
Cherrio................................................................................................. 7
2.2.
MongoDB ............................................................................................ 7
2.3.
Webhook ........................................................................................... 10
2.4.
Dialogflow ......................................................................................... 12
2.5.
REST ................................................................................................. 13
2.6.
Nodejs ............................................................................................... 18
2.7.
ExpressJS framework ........................................................................ 19
2.8.
Reactjs ............................................................................................... 21
Chương 3.
PH ontroller khi người dùng tương tác với ứng dụng. - Controller: là phần điều khiển
tổng thể những gì xảy ra trong ứng dụng. Khi View nói với Controller rằng người
dùng click vào một nút, Controller sẽ quyết định làm thế nào để tương tác với các
Model phù hợp. Dựa trên dữ liệu thay đổi trong Model, Controller có thể quyết định
cập nhật lại trạng thái của View.
4.4.2.2.
ExpressJS
Express là một framework hỗ trợ việc phát triển ứng dụng theo mơ hình MVC, mơ
hình phổ biến cho việc lập trình web hiện nay.
• Cho phép định nghĩa Middleware hỗ trợ cho việc tổ chức và tái sử dụng
code.
• Định nghĩa routes và các request method đến server một cách dễ dàng.
• Hỗ trợ REST API.
• Và cịn rất nhiều thứ mà framework này hỗ trợ, còn bây giờ hãy thử cài đặt
và xây dựng một ứng dụng đơn giản nhé.
4.4.2.3.
NodeJS server
Trong hệ thống này, server được sử dụng trên NodeJS. Vậy NodeJS là gì và lý do
sử dụng nó:
55
• Node.js là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8
Engine. Nó được xây dựng để chạy trên server.
• Node.js thích hợp để xây dựng các ứng dụng thời gian thực, ví dụ như hệ
thống chat online hoặc hệ thông thông báo...
4.4.2.4.
Cơ sở dữ liệu
Hệ thống sử dụng hệ quản trị cơ sở dữ liệu MongoDB, là một dạng NoSQL không
ràng buộc kiểu dữ liệu giúp việc lưu trữ thông tin tiện nghi hơn, và dữ liệu được lưu
trữ ở trên server Mongo chứ không phải trong máy tính người dùng.
Dữ liệu sau khi được cào sẽ lưu trên server Mongo, được ghi với <Key>:<Value>.
Ngoài ra hệ cơ sở dữ liệu mongodb cũng cung cấp các phương thức CRUD để thuận
tiện trong việc thao tác.
56
4.4.3. Thiết kế cơ sở dữ liệu
4.4.3.1.
Tổng quan cơ sở dữ liệu
Hình 4.21. Cơ sở dữ liệu
STT
Tên Collection
Ý nghĩa
1
field
Thơng tin cơ bản của tin tức bất động sản
2
fieldDetail
Thông tin chi tiết của tin tức bất động sản
57
3
Thông tin người dùng hệ thống (bao gồm cả
User
admin)
4
Lưu trữ token của người dùng mỗi khi đăng
Token
ký tài khoản
Bảng 4.3. Bảng danh sách các Collection có trong hệ thống
4.4.3.2.
Sơ đồ mô tả chi tiết từng đối tượng
4.4.3.2.1. Collection field
Chi tiết các thuộc tính của collection field
STT
Thuộc tính
Ý nghĩa
1
_id
ID tin tức
2
title
Tên của tin tức bất động
sản
3
Đường link dẫn đến
img
hình ảnh minh hoạ cho
tin tức
4
Chứa nội dung cơ bản
NoiDung
của tin tức
5
type
Thể loại của tin tức
(mua hay bán)
6
category
Mục lục cụ thể của tin
tức (nhà, biệt thự, đất
nền)
7
user
Người đăng tin
8
like
Số lượt thích của tin tức
58
9
Số lượt comment của tin
comment
tức
Bảng 4.4. Bảng mô tả Collection field
4.4.3.2.2. Collection fieldDetail
Chi tiết các thuộc tính của collection fieldDetail
STT
Thuộc tính
Ý nghĩa
1
_id
ID chi tiết tin tức
2
NoiDung
Nội dung chi tiết của tin
tức bất động sản
3
Price
Giá tiền
4
Square
Diện tích
5
DiaChi
Địa chỉ của tin tức
6
fieldId
ID của tin tức
Bảng 4.5. Bảng mô tả Collection fieldDetail
4.4.3.2.3. Collection User
Chi tiết các thuộc tính của collection User
STT
Thuộc tính
Ý nghĩa
1
_id
ID của người dùng
2
user
Tên đăng nhập của
người dùng
3
password
Mật khẩu của người
dùng
59
4
Email của người dùng
5
isVerified
Đã kích hoạt hay chưa
Bảng 4.6. Bảng mơ tả Collection User
4.4.3.2.4. Collection Token
Chi tiết các thuộc tính của collection Token
STT
Thuộc tính
Ý nghĩa
1
_id
ID của token
2
Token
Mã Token của người
dùng
Bảng 4.7. Bảng mô tả Collection Token
4.4.4. Thiết kế giao diện
4.4.4.1.
Giao diện đăng nhập
Hình 4.22. Giao diện đăng nhập
60
4.4.4.1.1. Mô tả
Giao diện chức năng đăng nhập cho phép người dùng điền thông tên đăng nhập và
mật khẩu. Hệ thống sẽ kiểm tra tính đúng đắn trong database và cho phép người
dùng truy cập vào ứng dụng nếu thông tin chính xác.
Bên cạnh đó trên giao diện cịn bố trí các nút điều hướng đến các màn hình khác
như Đăng nhập hay Đăng ký.
4.4.4.1.2. Điều hướng và tương tác người dùng
(1): Khung nhập user name và mật khẩu để đăng nhập.
(3): Sau khi người dùng nhấn “Đăng nhập”, hệ thống sẽ kiểm tra dữ liệu thông tin
người dùng ở dưới database, nếu trùng khớp user name và mật khẩu, hệ thống sẽ
kiểm tra thêm trường “isVerified” xem đã kích hoạt hay chưa, nếu rồi người dùng
sẽ được chuyển tới trang chính để sử dụng.
(2): Trong trường hợp người dùng chưa có tài khoản có thể lựa chọn “Đăng ký” để
tiến hành đăng ký một tài khoản mới. Khi người dùng nhấn vào phần này, ứng dụng
sẽ hiện lên một popup đăng ký tài khoản.
61
4.4.4.2.
Pop up đăng ký
Hình 4.23. Giao diện đăng ký
4.4.4.2.1. Mơ tả
Giao diện chức năng Đăng ký cho phép người dùng cung cấp các thông tin cần thiết
mà hệ thống yêu cầu như: User name, Email, Mật khẩu. Sau khi điền thành cơng
các thơng tin hợp lệ và có xác thực từ email, hệ thống sẽ lưu dữ liệu tài khoản vào
database và dẫn người dùng đến màn hình trang chủ để thực hiện đăng nhập.
4.4.4.2.2. Điều hướng và tương tác người dùng
(1): Khung nhập tên người dùng, email và mật khẩu mới, mật khẩu xác nhận,
tại đây hệ thống có kiểm tra check định dạng email, user name và mật khẩu.
(2): Button “Register - Đăng ký” dùng để đăng ký tài khoản. Sau khi người dùng ấn
vào button này, hệ thống sẽ gửi mail xác nhận qua bên mail người dùng đăng ký,
62
hiện thông báo lên trang đăng ký. Và hệ thống sẽ lưu thông tin người dùng xuống
database. Người dùng cần vào email đã đăng ký để xác thực, nếu không sẽ khơng
đăng nhập được.
(3): Button “Đóng” dùng để đóng popup đăng ký, khi người dùng đổi ý không
muốn đăng ký nữa thì bấm vào button này, hoặc sau khi đã đăng ký xong.
4.4.4.3.
Giao diện trang chủ
Hình 4.24. Giao diện trang chủ
4.4.4.3.1. Mơ tả
Giao diện màn hình trang chủ cho người dùng cái nhìn tổng quan về hệ thống.
Điều hướng đến nhiều tác vụ khác của hệ thống. Giao diện sử dụng nền xám chữ
đen hy vọng mang lại sự hài hịa về góc nhìn người dùng. Ngồi ra ở nhữ chỗ cần
chú ý sẽ để nền xanh dương và chữ trắng để nổi bật lên.
63
Nội dung hiển thị mặc định bao gồm danh sách các tin bất động sản gần nhất, người
dùng có thể thay đổi bằng cách chọn sắp xếp lại theo ý, ngồi ra cịn có các tính
năng đi kèm.
4.4.4.3.2. Điều hướng và tương tác người dùng
(1) :
Hình 4.25. Giao diện icon menu trang chủ
Khi ấn vào icon menu này sẽ mở thanh menu của người dùng lên. Trong thanh
menu gồm 3 phần: tên người dùng, Đăng tin, Đăng xuất.
Đăng tin điều hướng giúp người dùng Đăng tin.
Đăng xuất để điều hướng người dùng về lại trang đăng nhập.
64
