Tải bản đầy đủ (.pdf) (70 trang)

Xây dựng website bán hàng gia dụng hỗ trợ 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.8 MB, 70 trang )

Báo cáo đồ án 1

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
ĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN
HÀNG GIA DỤNG HỖ TRỢ CHATBOT
Giảng viên:

Trần Anh Dũng

Sinh viên thực hiện: Hồng Nhật Tiến

Thành phố Hồ Chí Minh, năm 2022

19522335


Báo cáo đồ án 1

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
ĐỀ TÀI:


XÂY DỰNG WEBSITE BÁN
HÀNG GIA DỤNG HỖ TRỢ CHATBOT
Giảng viên:

Trần Anh Dũng

Sinh viên thực hiện: Hồng Nhật Tiến

Thành phố Hồ Chí Minh, năm 2022

19522335


Báo cáo đồ án 1

Mục lục
Mục lục ............................................................................................................................. 1
DANH MỤC TỪ VIẾT TẮT ........................................................................................... 5
LỜI CẢM ƠN ................................................................................................................... 6
ĐỀ CƯƠNG CHI TIẾT .................................................................................................... 7
1.Lý do chọn đề tài: .................................................................................................... 8
2.Mục tiêu: .................................................................................................................. 8
3.Phạm vi: ................................................................................................................... 8
4. Đối tượng sử dụng: ................................................................................................. 9
5. Phương pháp thực hiện: .......................................................................................... 9
6.Nền tảng công nghệ: ................................................................................................ 9
7.Kết quả mong đợi:.................................................................................................... 9
8.Hướng phát triển của đề tài: ................................................................................... 10
9.Kế hoạch làm việc:................................................................................................. 11
NỘI DUNG ..................................................................................................................... 12

CHƯƠNG 1: GIỚI THIỆU CHUNG.................................................................... 12
1.1. Tổng quan đề tài............................................................................................. 12
1.2. Lý do chọn đề tài............................................................................................ 12
1.3. Đối tượng sử dụng ......................................................................................... 13
1.4. Phạm vi nghiên cứu ....................................................................................... 13
1.4.1. Phạm vi môi trường: Website .............................................................. 13
1.4.2. Phạm vi chức năng: ............................................................................. 13
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT ...................................................................... 14
2.1. React.js ........................................................................................................... 14
2.2. Node.js ........................................................................................................... 15
2.3. Tailwind.css ................................................................................................... 16
2.4. MongoDB....................................................................................................... 17
2.5. GitHub ............................................................................................................ 18
CHƯƠNG 3: CHATBOT:DIALOGFLOW ......................................................... 19
3.1. Cơng nghệ tìm hiểu : DialogFlow ..................................................................... 19
3.2. Quy trình hoạt động ........................................................................................... 19
a. Về Agent Bot ............................................................................................. 19
b. Về Intent .................................................................................................... 20
c. Về Entity ................................................................................................... 21
d. Về cách bot xử lý input để đưa ra output .................................................. 22
CHƯƠNG 4: THIẾT KẾ HỆ THỐNG................................................................. 23
4.1. Kiến trúc hệ thống: Mơ hình MVC.................................................................... 23
4.2. Chi tiết các thành phần trong hệ thống .............................................................. 24
CHƯƠNG 5: ĐẶC TẢ USE CASE ....................................................................... 25
1

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot



Báo cáo đồ án 1

5.1. Sơ đồ Use Case .................................................................................................. 25
5.2. Danh sách tác nhân ............................................................................................ 26
5.3. Danh sách Use Case ........................................................................................... 26
5.4. Mô tả chi tiết Use Case ...................................................................................... 28
CHƯƠNG 6: THIẾT KẾ CƠ SỞ DỮ LIỆU ........................................................ 44
6.2. Danh sách các quan hệ .................................................................................. 45
6.2.1. Bảng users: Thông tin tài khoản ......................................................... 45
6.2.2. Bảng products: Sản phẩm ................................................................... 46
6.2.3. Bảng typeProducts: Loại sản phẩm .................................................... 46
6.2.4. Bảng questions: Câu hỏi ..................................................................... 46
6.2.5. Bảng news: Tin tức ............................................................................. 47
6.2.6. Bảng counpons: Mã giảm giá ............................................................. 47
6.2.7. Bảng comments: Nhận xét và đánh giá .............................................. 47
6.2.8. Bảng invoices: Đơn hàng .................................................................... 48
CHƯƠNG 7: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG ..................................... 49
7.1. Screen flow .................................................................................................. 49
7.1.1. Người dùng Khách hàng: .................................................................... 49
7.1.2. Admin:................................................................................................. 49
7.2. Danh sách màn hình...................................................................................... 50
7.3. Mơ tả chi tiết ................................................................................................. 51
7.3.1. Header ................................................................................................. 51
a. Mô tả chung: ........................................................................................ 51
b. Các đối tượng trên màn hình:.............................................................. 51
7.3.2. Trang giới thiệu cửa hàng ................................................................... 52
a. Mô tả chung: ........................................................................................ 52
b. Các đối tượng trên màn hình: .............................................................. 52
7.3.3. Trang Đăng nhập ................................................................................. 53
a. Mô tả chung: ........................................................................................ 53

b. Các đối tượng trên màn hình: .............................................................. 53
7.3.4. Trang đăng ký ..................................................................................... 54
a. Mô tả chung: ........................................................................................ 54
b. Các đối tượng trên màn hình: .............................................................. 54
7.3.5. Giới thiệu sản phẩm ............................................................................ 55
a. Mô tả chung: ........................................................................................ 55
b. Các đối tượng trên màn hình:.............................................................. 55
7.3.6. Trang mua với giá sốc ......................................................................... 55
a. Mơ tả chung: ........................................................................................ 55
b. Đối tượng trên màn hình: .................................................................... 55
7.3.7. Trang Sản phẩm mua nhiều ................................................................ 56
a. Mô tả chung: ........................................................................................ 56
b. Đối tượng trên màn hình: .................................................................... 56
2

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

7.3.8. Trang Chương trình khuyến mãi ......................................................... 57
a. Mô tả chung; ........................................................................................ 57
b. Đối tượng trên màn hình: .................................................................... 57
7.3.9. Trang Sản phẩm theo loại ................................................................... 58
a. Mô tả chung: ........................................................................................ 58
b. Đối tượng trên màn hình: .................................................................... 58
7.3.10. Trang Giỏ hàng ................................................................................. 59
a. Mơ tả chung: ........................................................................................ 59
b. Đối tượng trên màn hình: .................................................................... 59

7.3.11. Trang Chi tiết sản phẩm .................................................................... 60
a. Mô tả chung: ........................................................................................ 60
b. Đối tượng trên màn hình: .................................................................... 60
7.3.12. Trang Đặt câu hỏi/Đánh giá .............................................................. 61
a. Mô tả chung: ........................................................................................ 62
b. Đối tượng trên màn hình: .................................................................... 62
7.3.13. Tranhg chính(Admin) ....................................................................... 63
a. Mô tả chung: ........................................................................................ 63
b. Đối tượng trên màn hình: .................................................................... 63
7.3.14. Trang Quản lý sản phẩm ................................................................... 64
a. Mô tả chung: ........................................................................................ 64
b. Đối tượng trên màn hình: .................................................................... 64
CHƯƠNG 8: CÀI ĐẶT VÀ KIỂM THỬ ............................................................. 65
8.1. Môi trường cài đặt và kiểm thử .......................................................................... 65
8.2. Kết quả kiểm thử................................................................................................. 65
CHƯƠNG 9: KẾT LUẬN ...................................................................................... 66
9.1. Tổng kết ............................................................................................................. 66
9.2. Khó khăn .............................................................................................................. 66
9.3. Kết quả thu được .................................................................................................. 66
9.4. Hạn chế của đồ án ................................................................................................ 67
9.5. Hướng phát triển đồ án ........................................................................................ 67
TÀI LIỆU THAM KHẢO ............................................................................................ 68

3

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1


DANH SÁCH HÌNH ẢNH
Hình 2.1.1: ReactJS ........................................................................................................ 14
Hình 2.2.1: Node.js ......................................................................................................... 15
Hình 2.3.1: Tailwind.css ................................................................................................. 16
Hình 2.4.1: Hệ quản trị cơ sở dữ liệu MongoDB ........................................................... 17
Hình 2.5.1: Hệ thống quản lý mã nguồn GitHub ........................................................... 18
Hình 3.1-1: ChatBot DialogFlow ................................................................................... 19
Hình 3.3-1: Luồng xử lý hoạt động của Dialogflow Chatbot ........................................ 22
Hình 4.1.1: Sơ đồ mơ hình MVC .................................................................................... 23
Hình 4.1.1: Sơ đồ Use Case ............................................................................................ 25
Hình 6.1.1: Sơ đồ logic của cơ sở dữ liệu ...................................................................... 44
Hình 7.1.1.1: Screen flow Khách hàng ........................................................................... 49
Hình 7.1.2.1: Screen flow Admin .................................................................................... 49
Hình 7.3.1.1: Header trước đăng nhập .......................................................................... 51
Hình 7.3.1.2: Header sau đăng nhập ............................................................................. 51
Hình 7.3.2.1: Trang Giới thiệu cửa hàng ....................................................................... 52
Hình 7.3.3.1: Trang Đăng nhập ..................................................................................... 53
Hình 7.3.4.1: Trang Đăng ký .......................................................................................... 54
Hình 7.3.5.1: Trang Giới thiệu sản phẩm ...................................................................... 55
Hình 7.3.6.1: Trang Mua với giá sốc ............................................................................. 55
Hình 7.3.7.1: Trang Sản phẩm mua nhiều ..................................................................... 56
Hình 7.3.8.1: Trang Chương trình khuyến mãi .............................................................. 57
Hình 7.3.9.1: Trang Sản phẩm theo loại ........................................................................ 58
Hình 6.3.10.1: Trang Your cart ...................................................................................... 59
Hình 7.3.11.1: Trang Chi tiết sản phẩm ......................................................................... 60
Hình 7.3.12.1: Trang Hiển thị đánh giá/câu hỏi ............................................................ 61
Hình 7.3.12.2: Trang Hiển thị đánh giá ......................................................................... 61
Hình 7.3.12.3: Trang Hiển thị câu hỏi ........................................................................... 62
Hình 7.3.13.1: Trang Admin Panel ................................................................................ 63

Hình 7.3.14.1: Trang Quản lý sản phẩm ........................................................................ 64

4

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

DANH MỤC TỪ VIẾT TẮT
#

Từ viết tắt

Từ đầy đủ

Ý nghĩa

1

CSDL

Cơ sở dữ liệu

Cơ sở dữ liệu cho ứng dụng

2

API


Application Programming
Interface

Giao diện lập trình ứng dụng

3

MVC

Model-View-Controller

Mơ hình lập trình

5

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

LỜI CẢM ƠN
Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại học
Công nghệ Thông tin – ĐHQG TP.HCM chúng em đã được trang bị các kiến thức cơ
bản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 1 của mình.
Để hồn thành Đồ án này, chúng em xin gửi lời cảm ơn chân thành đến:
Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM vì đã
tạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các loại sách, tài
liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin.

Chúng em xin gửi lời cảm ơn chân thành đến thầy Trần Anh Dũng đã tận tình
giúp đỡ, định hướng cách tư duy và cách làm việc khoa học. Đó là những góp ý hết sức
quý báu khơng chỉ trong q trình thực hiện luận văn này mà còn là hành trang tiếp
bước cho chúng em trong quá trình học tập và lập nghiệp sau này.
Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất cả thầy cơ trong
khoa, bạn bè, tập thể lớp KTPM2019 là những người luôn sẵn sàng sẻ chia và giúp đỡ
trong học tập và cuộc sống. Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau.
Trong q trình làm Đồ án này chúng em khơng tránh khỏi được những sai sót,
chúng em kính mong nhận được sự chỉ dẫn và góp ý của q thầy cơ để hồn thiện và
phát triển đồ án hơn trong mơn học Đồ án 2 cũng như trong Khóa luận tốt nghiệp trong
tương lai.
Chúng em xin chân thành cảm ơn. Xin chúc những điều tốt đẹp nhất sẽ luôn đồng
hành cùng mọi người.
Thành phố Hồ Chí Minh, 18 tháng 6 năm 2022
Sinh viên

HOÀNG NHẬT TIẾN

6

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ
T MINH
TRƯỜNG ĐẠI HỌC
P

CƠNG NGHỆ THƠNG
. TIN

CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc Lập - Tự Do - Hạnh Phúc
HCM, ngày 28 tháng 5 năm 2022

ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI: Xây đựng Website bán hàng có hỗ trợ chatbot
Cán bộ hướng dẫn: ThS. Trần Anh Dũng
Thời gian thực hiện: Từ ngày 23/03/2022 đến ngày 18/6/2022
Sinh viên thực hiện:
Hoàng Nhật Tiến - 19522335
Nội dung đề tài
1. Lý do chọn đề tài:
Ngày nay, con người đang cố gắng ngày càng nâng cao hiệu suất làm việc, vừa nhanh
lại vừa chính xác, đó là yêu cầu mà con người đang hướng tới. Thật vậy, để giải quyết vấn đề
mua sắm của con người, người ta đã và đang giảm dần lượng mua trực tiếp thông qua các gian
hàng trong chợ và thay vào đó là mua sắm trực tuyến thơng qua các sàn thương mại điện tử
hoặc qua các website bán hàng. Tuy vậy, hiện nay có rất ít website đáp ứng được các nhu cầu
mua bán, trao đổi với khách hàng thơng qua việc nhắn tin trực tiếp, bởi vì việc giải đáp những
thắc mắc của khách hàng đòi hỏi website cần có đủ số lượng nhân lực để trao đổi thông tin với
khách hàng ngay lúc khách hàng yêu cầu. Hiểu được thực trạng đó, nhóm em đã đưa ra một
hướng giải quyết vấn đề ấy mà không cần phải tốn quá nhiều nhân lực cho các cửa hàng, đó là
“Xây dựng website bán hàng gia dụng tích hợp chatbot”, nhằm xây dựng hệ thống quản lý
khách hàng vừa nhanh lại vừa tiện lợi cho khách hàng cũng như các chủ cửa hàng trong việc
quản lý cũng như tiết kiệm được một lượng chi phí nhân lực. Website là nơi mà khách hàng có
thể truy cập để xem sản phẩm, xem chi tiết sản phẩm, lựa chọn món hàng u thích, thanh
tốn hóa đơn cũng như để lại nhận xét dành cho sản phẩm. Với mỗi mặt hàng trên website,
người quản lý hay nhân viên bán hàng sẽ phải nhập vào hình ảnh, thơng tin sản phẩm, giá cả

cụ thể, khuyến mãi (nếu có) để khách hàng có thể thoải mái lựa chọn. Nếu khách hàng có thắc
mắc về sản phẩm có thể liên hệ với cửa hàng bằng cách nhắn tin trực tiếp với cửa hàng, lúc
này chatbot sẽ thực hiện nhiệm vụ của mình đó là tư vấn cho khách hàng, đưa ra các sản phẩm
tương tự, giới thiệu thêm các sản phẩm cùng hãng hoặc cùng giá tiền
7

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

2. Mục tiêu:
Bao gồm 3 mục tiêu chính:
Xây dựng chatbot:
+ FAQ giải đáp nhanh các thắc mắc chung, giảm tối đa thời gian tiêu tốn cần thiết cho
việc tư vấn của nhân viên.
+ Cung cấp thông tin về sản phẩm, phương thức thanh toán,...
+ Tư vấn lựa chọn sản phẩm phù hợp nhất cho người tiêu dùng.
+ Hỗ trợ cách thức đăng ký thanh toán.
Xây dựng ứng dụng hỗ trợ chatbot :
+ Cho phép phía trung tâm quản lý bài viết, hỏi đáp một cách nhanh chóng, dễ dàng.
+ Giới thiệu thơng tin về cửa hàng, sản phẩm dưới dạng văn bản, hình ảnh.
+ Cung cấp danh sách thông tin từ mới đến cũ.
+ Cung cấp danh sách các câu hỏi thường gặp và giải đáp từ cửa hàng.
Xây dựng chức năng bán hàng
+ Cung cấp hình thơng tin, hình ảnh,… của sản phẩm để người dùng chọn thêm vào giỏ
hàng để thanh toán.
3.Phạm vi:
Phạm vi mơi trường: Website

Phạm vi chức năng:
− Đối với Chatbot:
+ Có khả năng trả lời các câu hỏi về sản phẩm một cách chi tiết.
+ Phân tích được nhu cầu và đưa ra tư vấn hợp lý đối với người tiêu dùng
+ Cung cấp liên hệ trực tiếp đến chủ cửa hàng khi vấn đề đặt ra ngoài phạm vi
của bản thân nó và cập nhập được cách xử lý đối với các trường hợp này.
+ Quản lý và chỉnh sửa thông tin cá nhân.

8

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

− Đối với Admin:
+ Cung cấp thông tin mới nhất về sản phẩm, về cửa hàng ..
+ Cung cấp chức năng thêm đồ vào giỏ hàng và thanh tốn.
+ Cung cấp các chức năng quản lí sản phẩm bao gồm đăng tải, thay đổi và xóa
bỏ…
4. Đối tượng sử dụng:
− Tất cả mọi người có nhu cầu mua sắm đồ đa dụng.
− Chủ các cửa hàng đồ dùng gia dụng.
5. Phương pháp thực hiện:
Phương pháp làm việc:
− Làm việc nhóm 2 thành viên thơng qua cả 2 phương thức online lẫn
offline dưới sự hướng dẫn của giảng viên hướng dẫn.
Phương pháp nghiên cứu:
− Phân tích nhu cầu sử dụng của đối tượng người dùng.

− Nghiên cứu tài liệu các cơng nghệ liên
quan.
Phương pháp cơng nghệ:
− Tìm hiểu xây dựng chatbox trên website dựa vào plugin có sẵn của wordpress
− Xây dựng giao diện website để tương tác với người dùng
− Quản lý source code thông qua Github.
− Sử dụng Trello, Google doc, Drive… để quản lý tiến trình và tài liệu.
6.Nền tảng cơng nghệ:
− Front-end: ReactJS, TaiwindCSS
− Back-end: NodeJS
− Database: MongoDB
7.Kết quả mong đợi:


Chatbot có khả năng phản hồi nhanh và chính xác ở mức tương đối



Website hoạt động ổn định, có thể xử lý thơng tin nhanh chóng.



Giao diện dễ dùng, hợp với mọi lứa tuổi.



Có hướng phát triển đến những cơng nghệ khác.
9

Xây dựng Website bán hàng gia dụng

hỗ trợ chatbot


Báo cáo đồ án 1

8.Hướng phát triển của đề tài:
− Tăng khả năng phản hồi cho chatbot.
− Tăng tính bảo mật cho Website và cho dữ liệu người dùng.
− Về phía người dùng, cần có một nơi để chia sẻ các thông tin, hướng dẫn, mẹo vặt
với nhau để xây dựng 1 cộng đồng nhỏ. Ví dụ như xây dựng thêm phần blog mẹo
vặt hoặc có thể tạo một group cộng đồng để kiếm thêm nhiều khách hàng tiềm
năng
− Về phía chăm sóc khách hàng, cần có một nơi để lưu trữ khách hàng với mục đích:
+ Đối với những khách đã trải nghiệm ứng dụng nhưng chưa có đặt mua, thì nên
liên hệ trực tiếp hỏi lý do, trở ngại ngại khi chưa sử dụng dịch vụ.
+ Đối với những khách hàng đã sử dụng dịch vụ cửa hàng, liên hệ để hỏi về trải
nghiệm chất lượng ứng dụng phần mềm và chất lượng sản phẩm, ngồi ra cịn có
thể giới thiệu các sản phẩm mới của cửa hàng nhằm mục đích gia tăng doanh thu
cho cửa hàng (Phương pháp Remarketing).
− Về phía phát triển (mở rộng) thêm cho Website, nên thiết kế thêm một ứng dụng
giải trí đi kèm (Trị chơi nhỏ: Ni heo đất nhận vocher) điều này mang lại những
mục đích:
+ Tạo cho người dùng cảm giác thích thú khi sử dụng Website, khơng cịn độ
nhàm chán như các Website mua sắm khác.
+ Kích thích nhu cầu mua hàng của khách.
+ Việc mở rộng ứng dụng sẽ làm cho nó trở nên phổ biến hơn với người dùng.
Đây chính là một cách giúp cửa hàng tiếp cận đến khách hàng một cách tiện lợi và
ít chi phí nhất.

10


Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

9.Kế hoạch làm việc:

Thời gian

Công việc thực hiện

Từ 23/03/2022 đến
01/04/2022

Tìm hiểu về đề tài, phân tích yêu cầu, xác định rõ hướng đi

Từ 02/04/2022 đến
14/04/2022

Tìm hiểu về công nghệ và cách sử dụng ngôn ngữ lập trình Frontend: HTML, CSS, ReactJS, NodeJS

Từ 14/04/2022 đến
01/05/2022

Phát họa được giao diện và sơ đồ Use case

Từ 02/05/2022 đến
18/5/2022


Xây dựng xong giao diện front-end

Từ 19/05/2022 đến
03/06/2022

Xây dựng tính năng back-end

Từ 4/6 đến 18/6

Hồn thành báo cáo và kiểm thử

Tp.Hồ Chí Minh, ngày 18 tháng 6 năm 2022

HOÀNG NHẬT TIẾN

11

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

NỘI DUNG
CHƯƠNG 1: GIỚI THIỆU CHUNG
1.1. Tổng quan đề tài
- Tên ứng dụng: Houseware Website
-


Chủ đề chính: Website bán hàng gia dụng hỗ trợ chatbot

-

Nền tảng phát triển: Website

-

Mơ hình phát triển: MVC

1.2. Lý do chọn đề tài
Ngày nay, con người đang cố gắng ngày càng nâng cao hiệu suất làm việc, vừa
nhanh lại vừa chính xác, đó là yêu cầu mà con người đang hướng tới. Thật vậy, để giải
quyết vấn đề mua sắm của con người, người ta đã và đang giảm dần lượng mua trực tiếp
thông qua các gian hàng trong chợ và thay vào đó là mua sắm trực tuyến thơng qua các
sàn thương mại điện tử hoặc qua các website bán hàng. Tuy vậy, hiện nay có rất ít website
đáp ứng được các nhu cầu mua bán, trao đổi với khách hàng thơng qua việc nhắn tin trực
tiếp, bởi vì việc giải đáp những thắc mắc của khách hàng đòi hỏi website cần có đủ số
lượng nhân lực để trao đổi thông tin với khách hàng ngay lúc khách hàng yêu cầu. Hiểu
được thực trạng đó, nhóm em đã đưa ra một hướng giải quyết vấn đề ấy mà không cần
phải tốn quá nhiều nhân lực cho các cửa hàng, đó là “Xây dựng website bán hàng gia dụng
tích hợp chatbot”, nhằm xây dựng hệ thống quản lý khách hàng vừa nhanh lại vừa tiện lợi
cho khách hàng cũng như các chủ cửa hàng trong việc quản lý cũng như tiết kiệm được
một lượng chi phí nhân lực. Website là nơi mà khách hàng có thể truy cập để xem sản
phẩm, xem chi tiết sản phẩm, lựa chọn món hàng yêu thích, thanh tốn hóa đơn cũng như
để lại nhận xét dành cho sản phẩm. Với mỗi mặt hàng trên website, người quản lý hay
nhân viên bán hàng sẽ phải nhập vào hình ảnh, thơng tin sản phẩm, giá cả cụ thể, khuyến
mãi (nếu có) để khách hàng có thể thoải mái lựa chọn. Nếu khách hàng có thắc mắc về sản
phẩm có thể liên hệ với cửa hàng bằng cách nhắn tin trực tiếp với cửa hàng, lúc này
chatbot sẽ thực hiện nhiệm vụ của mình đó là tư vấn cho khách hàng, đưa ra các sản phẩm

tương tự, giới thiệu thêm các sản phẩm cùng hãng hoặc cùng giá tiền.

12

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

1.3. Đối tượng sử dụng
− Tất cả mọi người có nhu cầu mua sắm đồ đa dụng.
− Chủ các cửa hàng đồ dùng gia dụng.
1.4. Phạm vi nghiên cứu
1.4.1. Phạm vi môi trường:
Website
1.4.2. Phạm vi chức năng:
Xây dựng Chatbot:
+ Có khả năng trả lời các câu hỏi về sản phẩm một cách chi tiết.
+ Phân tích được nhu cầu và đưa ra tư vấn hợp lý đối với người tiêu dùng.
+ Cung cấp liên hệ trực tiếp đến chủ cửa hàng khi vấn đề đặt ra ngồi phạm vi của
bản thân nó và cập nhập được cách xử lý đối với các trường hợp này.
+ Chatbot hiểu được tương đối ngôn ngữ tự nhiên.
Xây dựng Website:
+ Cung cấp thông tin mới nhất về sản phẩm, về cửa hàng.
+ Cung cấp chức năng thêm đồ vào giỏ hàng và thanh toán.
+ Cung cấp các chức năng quản lí sản phẩm bao gồm đăng tải, thay đổi và xóa bỏ.

13


Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1. React.js

Hình 2.1.1: ReactJS
React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với
xu hướng Single Page Application. Trong khi những framework khác cố gắng hướng
đến một mơ hình MVC hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phối
hợp với những thư viện Javascript khác. Nếu như AngularJS là một Framework cho
phép nhúng code javasscript trong code html thông qua các attribute như ng-model,
ng-repeat...thì với react là một library cho phép nhúng code html trong code javascript
nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS. Tích hợp giữa
javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.

14

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

2.2. Node.js

Hình 2.2.1: Node.js

NodeJS là một nền tảng được xây dựng trên V8 JavaScript Engine – trình thơng
dịch thực thi mã JavaScript, giúp xây dựng các ứng dụng web một cách đơn giản và dễ
dàng mở rộng.
NodeJS được phát triển bởi Ryan Dahl vào năm 2009 và có thể chạy trên nhiều
hệ điều hành khác nhau: OS X, Microsoft Windows, Linux…

15

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

2.3. Tailwind.css

Hình 2.3.1: Tailwind.css
Tailwind là một tập hợp các lớp tiện ích (class) cấp thấp. Chúng có thể được sử
dụng như những viên gạch lego để xây dựng bất kỳ loại thành phần nào. Framework
bao gồm các thuộc tính CSS quan trọng nhất (nhưng có thể dễ dàng mở rộng bằng
nhiều cách khác nhau). Với Tailwind, tùy biến trở nên dễ dàng hơn bao giờ hết.
Framework này có tài liệu vơ cùng chi tiết, bao gồm tất cả cách sử dụng chi tiết của
class và chỉ dẫn nhiều cách tùy chỉnh khác nhau. Tất cả các trình duyệt hiện đại và
IE11 +, đều được hỗ trợ.

16

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot



Báo cáo đồ án 1

2.4. MongoDB

Hình 2.4.1: Hệ quản trị cơ sở dữ liệu MongoDB
Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud. Kèm theo đó
là hệ thống máy chủ cực kỳ mạnh mẽ của Google. Chức năng chính là giúp người dùng lập
trình ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu.
Với firebase, ta có thể tạo ra những ứng dụng real-time như app chat, cùng nhiều tính
năng như xác thực người dùng, Cloud Messaging,... Có thể dùng firebase giống như phần
backend của app.
Các dịch vụ của firebase hồn tồn miễn phí, tuy nhiên cần phải trả thêm tiền nếu muốn
nâng cấp lên. Cần cân nhắc điều này nếu muốn xây dựng một ứng dụng lớn sử dụng phần
backend là firebase, vì cái giá khi muốn nâng cấp còn khá đắt đỏ so với việc xây
dựng backend truyền thống.

17

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

2.5. GitHub

Hình 2.5.1: Hệ thống quản lý mã nguồn GitHub
GitHub là một hệ thống quản lý dự án và phiên bản code, hoạt động giống như
một mạng xã hội cho lập trình viên. Các lập trình viên có thể clone lại mã nguồn từ một

repository và Github chính là một dịch vụ máy chủ repository cơng cộng, mỗi người có
thể tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để có thể làm việc.
Github có đầy đủ những tính năng của Git, ngồi ra nó cịn bổ sung những tính năng về
social để các developer tương tác với nhau.
Github cung cấp các tính năng social networking như feeds, followers, và
network graph để các developer học hỏi kinh nghiệm của nhau thông qua lịch sử
commit.

18

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

CHƯƠNG 3: CHATBOT:DIALOGFLOW
3.1. Cơng nghệ tìm hiểu : DialogFlow

Hình 3.1-1: ChatBot DialogFlow
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.
Dialogflow hiện có sẵn các kịch bản và Dialogflow cũng được dạy khá tốt với lượng
dữ liệu khá đồ sộ. Chỉ tiết là đa phần Dialogflow làm việc tốt hơn với Tiếng Anh và một số
tiếng của các nước đơng dân khác trong đó có tiếng Việt. Ngồi ra Dialogflow cịn cho phép
bạn liên kết Chatbot của bạn với Messenger hay Skype hay Slack… một cách rất đơn giản.
3.2. Quy trình hoạt động

a. Về Agent Bot
Dialogflow Agent là một Chatbot ảo xử lý các cuộc trị chuyện, đối thoại với người
dùng. Agent là một mơ-đun hiểu được ngơn ngữ tự nhiên, từ đó đọc được những sắc cảm,
ngữ cảnh trong cuộc đối thoại. Dialogflow Agent Bot có thể hiểu được văn bản, hoặc giọng
nói và phản hồi lại hình thức tương tự đến với người dùng. Người lập trình viên có thể tạo
và thiết kế một Agent để xử lý các đoạn hội thoại trong ứng dụng một cách dễ dàng
Dialogflow Agent tương tự như một người hỗ trợ cuộc gọi trong các trung tâm,
được đào tạo để xử lý các tình huống hội thoại dự kiến. Và đặc biệt, việc đào tạo này
không cần q rõ ràng vì Agent Bot có thể tự học trong q trình xử lý thơng tin Một
19

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

Agent bao gồm:
-

Agent Setting: cài đặt tùy chỉnh Bot. Người lập trình có thể tùy chọn gói ngơn ngữ,

cài đặt chương trình Học máy, kiểm sốt hành vi của Bot thông qua cài đặt tùy chỉnh này.
-

Intents: Phân loại thoại người dùng có thể sử dụng trong q trình trị chuyện.

-

Entities: Xác định và rút trích dữ liệu cụ thể từ thoại người dùng sử dụng -


Knowledge: Phân tích tài liệu và tìm câu trả lời tự động.
-

Integrations: Tích hợp cho các ứng dụng hoặc dịch vụ tương tác khác (ví dụ:

Google Assistant)
-

Fulfillment: Thực hiện kết nối với dịch vụ tích hợp khác.

b. Về Intent
Intent (Intention) được sử dụng để phân loại thoại người dùng nhập vào trong một
cuộc nói chuyện. Mỗi Bot sẽ có thể được định nghĩa nhiều Intent, cũng như có thể kết hợp
và phân cấp các Intent để tạo thành một cuộc trị chuyện hồn chỉnh. Khi người dùng nhập
vào một lời thoại, ChatBot DialogFlow sẽ thực hiện đối sánh lời thoại đó, tìm ra Intent phù
hợp nhất rồi gửi phản hồi trở lại. Việc thực hiện đối sánh lời thoại này còn được gọi là phân
loại Intent (Intent classification).
Một Intent cơ bản bao gồm những phần như sau:
-

Training phrases: Cụm từ đào tạo trong Intent. Đây là những cụm từ mà người dùng

có thể nói khi trị chuyện cùng Chatbot. Khi lời thoại nhập vào tương đối giống với một
cụm từ nào trong Trainning phrases, Dialogflow ChatBot sẽ truy cập vào Intent đấy, thực
hiện nội dung Action và phản hồi phần Responses của Intent. Nhờ vào khả năng học hỏi
bằng trí tuệ nhân tạo, Dialogflow có thể tự mở rộng cụm từ học được tương tự cụm từ bạn
đã nhập vào Training phrases, từ đó tăng khả năng phân loại Intent và giúp giảm thiểu
thời gian cho người lập trình.
-


Action: Hành động của một Intent, có thể điều chỉnh tùy ý. Khi một Intent được đối

sánh trùng khớp với thoại người dùng nhập vào, Chatbot sẽ cung cấp phần Action cho
hoạt động của Intent để kích hoạt một số hành động nhất định do người tạo quy định.
-

Parameters: Tham số trong Intent. Khi một Intent được đối sánh trùng khớp,

Dialogflow sử dụng Parameters để cung cấp các giá trị được trích xuất từ lời thoại người
20

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

dùng. Mỗi tham số có một kiểu, được gọi theo kiểu của Entity mà đã thể hiện đúng bản
chất của tham số. Không giống như lời thoại đầu vào thô của người dùng cuối, các tham
số là dữ liệu có cấu trúc có thể dễ dàng được sử dụng để thực hiện một số logic hoặc tạo
phản hồi.
-

Responses: Thoại phản hồi của Intent, có thể là kiểu văn bản, kiểu giọng nói hoặc

hình ảnh... Dialogflow Chatbot có thể cung cấp đa dạng thoại phản hổi, như là trả lời câu
hỏi, đặt câu hỏi, hoặc chấm dứt cuộc trị chuyện.
Một Intent phức tạp cịn có thể có thêm những phần sau:
-


Contexts: Ngữ cảnh của Intent. Tương tự trong thực tế, khi giao tiếp, chúng ta cần

phải có ngữ cảnh để hiểu người đó đang đề cập đến điều gì. Như vậy, để Dialogflow
Chatbot hiểu được thoại của người dùng nhập vào, thì cần xác định được những ngữ cảnh
khớp chính xác. Contexts trong Intent sẽ bao gồm Lifespan, tương ứng với số thoại tiếp
theo mà Chatbot nhận được, là sẽ ngầm hiểu được đó vẫn nằm trong ngữ cảnh của Intent.
Một cách đơn giản, Lifespan là vòng đời của ngữ cảnh, khi tồn tại Lifespan, Chatbot sẽ
ngàm hiểu thoại người dùng vẫn thuộc về Intent đó.
-

Events: Sự kiện trong Intent. Intent có thể được hoạt động khi một sự kiện cụ thể

xảy ra, thay vì phải nhận thoại của người dùng cuối nhập vào.

c. Về Entity
Mỗi Parameter của Intent có một kiểu Entity, cho biết chính xác kiểu dữ liệu của cụm
từ được trích xuất từ thoại người dùng nhập vào.
Dialogflow Chatbot cung cấp nhiều Entity mà có thể cùng đối sánh trùng hợp với dữ
liệu lời thoại. Entity có thể được tạo tùy chỉnh, với mỗi mục đích riêng.

21

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

d. Về cách bot xử lý input để đưa ra output


Hình 3.3-1: Luồng xử lý hoạt động của Dialogflow Chatbot
Đầu tiên, người dùng nhập vào lời thoại, và gửi đến Dialogflow Chatbot thông qua
Google Cloud.
Sau khi nhận được lời thoại, Agent Bot đối sách với các cụm từ Training phrases
Intent đã được tạo, lấy ra Intent trùng khớp.
Tiếp theo, Bot truy cập vào Intent đó và thực hiện những phần bên trong (Contexts,
Action and parameters, Response..)
Cuối cùng, Bot trả về lời thoại trong Response và thể hiện phản hồi đến với người dùng.

22

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


Báo cáo đồ án 1

CHƯƠNG 4: THIẾT KẾ HỆ THỐNG
4.1. Kiến trúc hệ thống: Mơ hình MVC
Model: Lưu trữ tất cả dữ liệu của ứng dụng. Bộ phận này là cầu nối giữa cơ sở
dữ liệu quản lý cả nhân và trình bày giao diện người dùng. Cho phép người dùng có thể
nhập và xuất đến các cơ sở dữ liệu lần lượt theo quyền của họ khi cần thiết và dữ liệu
sẽ được lưu dữ trên database.
View: giao diện người dùng, nơi người dùng có thể lấy được thơng tin dữ liệu
của MVC thông qua các công thức truy vấn và ghi lại hoạt động của người dùng để
tương tác với Controller
Controller: xử lý yêu cầu từ người dùng thơng qua View. Từ đó, Controller gửi
dữ liệu hợp lý đến người dùng bằng các kết nối đến Model và trưng bày nó trên View
cho người dùng


Hình 4.1.1: Sơ đồ mơ hình MVC

23

Xây dựng Website bán hàng gia dụng
hỗ trợ chatbot


×