Đồ án xây dựng website bán giày tích hợp chatbot

BỘ GIÁO DỤC VÀ ĐÀO TẠO
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
XÂY DỰNG WEBSITE BÁN GIÀY
TÍCH HỢP CHATBOT

Giảng viên hướng dẫn : ThS. Nguyễn Thị Thanh Trúc
Sinh viên thực hiện 1 : Lê Quang Huy - 20521396
Sinh viên thực hiện 2 : Nguyễn Tấn Huệ - 20521359
Lớp : SE121.N21.PMCL

Thành phố Hồ Chí Minh, tháng 7 năm 2023


NHẬN XÉT ĐỒ ÁN 1
(Của cán bộ giảng viê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ị những kiến thức và
những kỹ năng cơ bản để có thể hồn thành các đồ án mơn học. Đồ án 1 là môn học mang
lại cho sinh viên cái nhìn mới trong việc áp dụng những kiến thức đã có để giải quyết các
vấn đề thực tế. Mơn học cũng như là một thử thách và cơ hội để sinh viên có thể rèn luyện
và hồn thiện bản thân qua những kinh nghiệm, kỹ năng khi làm đồ án.
Chúng em xin gửi lời cảm ơn đến cô Nguyễn Thị Thanh Trúc đã tận tình quan tâm,
giúp đỡ và hướng dẫn nhóm trong suốt q trình làm đồ án. Qua những lời góp ý, chỉ bảo

của cơ mà nhóm có thể hồn thành đồ án tốt hơn.Nhóm cũng xin cảm ơn tất cả các thầy cô,
anh chị, bạn bè đã giúp đỡ, hỗ trợ trong suốt q trình nhóm hồn thành đồ án. Trong q
trình học tập và hồn thiện đồ án cịn gặp nhiều sai sót, chúng em mong nhận được sự góp
ý của q thầy cơ và các bạn để có thể hồn thiện hơn.
Chúng em xin chân thành cảm ơn!

2


MỤC LỤC
NHẬN XÉT ĐỒ ÁN 1 .................................................................................................................. 1
(Của cán bộ giảng viên) ............................................................................................................ 1
LỜI CẢM ƠN .............................................................................................................................. 2

CHƯƠNG 1: TỔNG QUAN .........................................................................................................6
1.1 Lý do chọn đề tài..................................................................................................................6
1.2 Mục tiêu ...............................................................................................................................6
1.3 Phạm vi ................................................................................................................................7
1.4 Người dùng ..........................................................................................................................7
1.5 Phương pháp nghiên cứu .....................................................................................................7
1.6 Khảo sát nhu cầu người dùng bằng form .............................................................................7
1.7 Khảo sát, đánh giá các website cạnh tranh ..........................................................................9
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ...........................................................12
2.1 Giới thiệu về ReactJS .........................................................................................................12
2.1.1 Khái niệm ..................................................................................................................12
2.1.2 Ưu điểm ....................................................................................................................13
2.1.3 Nhược điểm...............................................................................................................14
2.2 Giới thiệu về MongoDB ....................................................................................................14
2.2.1 Các đặc điểm cơ bản của MongoDB ........................................................................14
2.2.2 Ưu điểm ....................................................................................................................15

2.2.3 Nhược điểm...............................................................................................................16
2.3 Giới thiệu về NodeJS .........................................................................................................16
2.3.1 Khái niệm ..................................................................................................................16
2.3.2 Ưu điểm ....................................................................................................................17
2.2.3 Nhược điểm...............................................................................................................17
2.4 Chatbot - DialogFlow ........................................................................................................18
2.4.1 Khái niệm ..................................................................................................................18
2.4.2 Quy trình hoạt động ..................................................................................................18
2.4.2.1 Về Agent Bot ...................................................................................................18
2.4.2.2 Về Intent..........................................................................................................19
2.4.2.3 Về Entity ..........................................................................................................20
2.4.2.4 Cách Bot xử lý input để đưa ra output ............................................................20
2.5 Kommunicate .....................................................................................................................20
CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG...................................................................................22
3.1 Kiến trúc hệ thống ..............................................................................................................22
3.2 Mơ hình kiến trúc hệ thống ................................................................................................22
3.3 Mô tả chi tiết hệ thống .......................................................................................................22
CHƯƠNG 4. THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG ......................................................24
4.1 Tổng quan sơ đồ Use-case .................................................................................................24
4.2 Danh sách các Actor ..........................................................................................................24

3


4.3 Danh sách Use-case ...........................................................................................................25
4.4 Đặc tả Use-case và Sơ đồ Hoạt động .................................................................................27
4.4.1. Login ........................................................................................................................27
4.4.2. Sign up for User .......................................................................................................29
4.4.3. Logout ......................................................................................................................31
4.4.4. View Product List ....................................................................................................32

4.4.5. Search Product ........................................................................................................33
4.4.6. Filter Product ...........................................................................................................35
4.4.7. Detail Product ..........................................................................................................37
4.4.8. Add to Cart ...............................................................................................................38
4.4.9. View Cart .................................................................................................................40
4.4.10. View Coupon Code ................................................................................................41
4.4.11. Purchase .................................................................................................................43
4.4.12. View Order.............................................................................................................45
4.4.13. Review Product ......................................................................................................47
4.4.14. View statistic ..........................................................................................................48
4.4.15. Manage profile Admin ...........................................................................................50
4.4.16. Manage customer ...................................................................................................52
4.4.17. Manage product .....................................................................................................54
4.4.18 Manage Category Product.......................................................................................56
4.4.19 Manage Coupon Code.............................................................................................58
4.4.20 Manage Order .........................................................................................................60
4.4.21 Reply to Review ......................................................................................................61
4.5 Sơ đồ tuần tự ......................................................................................................................63
4.5.1. Login ........................................................................................................................63
4.5.2. Sign up .....................................................................................................................64
4.5.3. View Product List ....................................................................................................64
4.5.4 Search Product ..........................................................................................................65
4.5.5. Filter Product ...........................................................................................................65
4.5.6. Detail Product ..........................................................................................................66
4.5.7. Add to Cart ...............................................................................................................66
4.5.8. Purchase ...................................................................................................................67
4.5.9. Review Product ........................................................................................................68
4.5.10 Manage customer ....................................................................................................69
4.5.11 Manage product ......................................................................................................70
4.5.12 Manage Category Product.......................................................................................71

4.5.13 Mange Coupon Code ..............................................................................................72
4.5.14 Manage Order .........................................................................................................73
4.6 Thiết kế cơ sở dữ liệu.........................................................................................................75
4.6.1 Sơ đồ logic ................................................................................................................75

4


4.6.2. Danh sách các quan hệ .............................................................................................75
4.6.2.1. Bảng users: Thông tin tài khoản .....................................................................75
4.6.2.2. Bảng products: Sản phẩm ...............................................................................76
4.6.2.3. Bảng type Products: Loại sản phẩm................................................................76
4.6.2.4. Bảng questions: Câu hỏi .................................................................................76
4.6.2.5. Bảng coupons: Mã giảm giá ...........................................................................77
4.6.2.6. Bảng comments: Nhận xét và đánh giá...........................................................77
4.6.2.7. Bảng invoices: Đơn hàng ................................................................................77
4.7 Thiết kế giao diện người dùng ...........................................................................................78
4.7.1 Giao diện cho User....................................................................................................78
4.7.2 Giao diện cho Admin ................................................................................................79
4.7.3 Danh sách các màn hình ...........................................................................................79
4.7.3.1 Màn hình Đăng nhập ........................................................................................79
4.7.3.2 Màn hình Đăng ký ...........................................................................................80
4.7.3.3 Màn hình Trang chủ .........................................................................................81
4.7.3.4 Màn hình Sản phẩm .........................................................................................82
4.7.3.5 Màn hình chi tiết sản phẩm ..............................................................................83
4.7.3.6 Màn hình Giỏ hàng ..........................................................................................83
4.7.3.7 Màn hình Thanh tốn .......................................................................................84
4.7.3.8 Màn hình Thơng tin tài khoản ..........................................................................85
4.7.3.9 Màn hình Thơng tin Liên hệ ............................................................................85
4.7.3.10 Màn hình Chatbot ..........................................................................................86

4.7.3.11 Màn hình Quản lý thống kê cho Admin.........................................................87
4.7.3.12 Màn hình Quản lý Loại sản phẩm ..................................................................87
4.7.3.13 Màn hình Quản lý Sản phẩm .........................................................................88
4.7.3.14 Màn hình Quản lý Khách hàng ......................................................................88
4.7.3.15 Màn hình Quản lý Đơn đặt hàng ....................................................................89
4.7.3.16 Màn hình Quản lý Mã giảm giá .....................................................................89
CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ..........................................................91
5.1. Thành quả đạt được...........................................................................................................91
5.2. Ưu và nhược điểm.............................................................................................................91
5.3 Hướng phát triển đồ án ......................................................................................................91

5


CHƯƠNG 1: TỔNG QUAN
1.1 Lý do chọn đề tài
Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong
những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như
các cơng ty, cửa hàng, nó đóng vai trị hết sức quan trọng có thể tạo ra những bước đột
phá mạnh mẽ.
Trong đó thương mại điện tử cũng đã trở nên phổ biến với các doanh nghiệp và hầu
hết người dân tại các nước phát triển và đang phát triển. Khơng thể phủ nhận những lợi
ích to lớn mà nó mang lại, từ đó giúp cho thương mại điện tử trở thành một phần không
thể tách rời trong chiến lược phát triển kinh doanh của các doanh nghiệp.
Nắm bắt được tiềm năng phát triển của thương mại điện tử từ sau khi COVID-9
bùng nổ, các doanh nghiệp đã nắm bắt tình hình và tập trung đẩy mạnh phát triển các hình
thức quảng cáo, mua bán dựa trên thương mại điện tử để mang lại nhiều lợi ích cũng như
tiếp cận. Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức,
công ty thậm chí các cá nhân, ngày nay, khơng lấy gì làm xa lạ. Khách hàng ngày càng có
nhiều nhu cầu mua sắm và buôn bán những đồ dùng đã qua sử dụng của mình tuy nhiên

để tìm kiếm một địa điểm và giả thành hợp lý xong không phải là chuyện dễ dàng dẫn đến
mất quá nhiều công sức và thời gian mà hiệu quả lại khơng cao
Vì vậy ứng dụng công nghệ vào lĩnh vực này ngày càng phổ biến. Với một vài
thao tác đơn giản, nhanh chóng, một người hoặc doanh nghiệp bất kì có thể dễ dàng quản
lý mọi cơng việc mua bán hàng hóa của mình trên mọi thiết bị.
Ngồi ra Chatbot được xây dựng nhằm hỗ trợ tư vấn bán hàng, chăm sóc khách hàng
giúp giảm chi phí, tăng hiệu quả bán hàng. Theo báo cáo của Business Insider 2021 [2],
tại Mỹ hàng năm có thể tiết kiệm 20 tỷ USD chi phí tiền lương cho ngành bán bảo hiểm,
22 tỷ cho dịch vụ tài chính, bán hàng và 31 tỷ cho dịch vụ khách hàng.
Dựa vào kiến thức đã được học, sự cần thiết của vấn đề em đã “Xây dựng Website
bán giày tích hợp Chatbot”. Tuy việc xây dựng website cịn nhiều khó khăn và thiếu sót
nhưng đã giúp chúng em có thêm nhiều kiến thức và sự học hỏi, tạo bước phát triển cho
sau này.
1.2 Mục tiêu
● Nghiên cứu tổng quan về các nghiệp vụ cửa hàng và bán hàng.
● Nghiên cứu trên cơ sở lý thuyết việc phát triển hệ thống thông tin quản lý và
thương mại điện tử Website mua bán giày.
● Xây dựng hệ thống thương mại điện tử và quản lý Website mua bán giày giúp cho
việc quản lý và buôn bán trở nên đơn giản hơn.
● Chatbot thuận tiện cho việc tư vấn bán hàng và tăng doanh số

6


1.3 Phạm vi
Quy trình quản lý bán hàng, doanh thu và sản phẩm, đổi trả trong Website mua bán
giày và quy trình bán hàng thơng qua website.
Các vấn đề cần giải quyết trong q trình quản lý và bn bán trên Website mua bán
giày, ví dụ như:
Khách hàng

- Xem thơng tin sản phẩm, tiến hành đặt hàng, thanh toán
- Theo dõi tiến trình đơn hàng đã đặt
- Xem lịch sử đơn hàng đã đặt
- Đánh giá sản phẩm đã mua
- Tích hợp chatbot tư vấn
Quản lý
- Nghiệp vụ bán hàng và thanh toán
- Theo dõi, quản lý lịch sử mua hàng và bán hàng, lịch sử theo dõi của người dùng
- Thêm, xóa, sửa và tra cứu tìm kiếm thơng tin của sản phẩm. Từ đó tiến hành xây
dựng cơ sở dữ liệu và khai thác dữ liệu phục vụ công tác quản lý và buôn bán trên
website.
- Quản lý sản phẩm theo từng danh mục
- Quản lý tài khoản, thơng tin khách hàng
- Quản lý giỏ hàng, thanh tốn
- Quản lý, tra cứu thông tin đơn hàng
1.4 Người dùng
- Người bán có nhu cầu bán sản phẩm.
- Khách hàng có nhu cầu mua sản phẩm: tiết kiệm được nhiều rủi ro, chi phí và thời
gian tìm kiếm đồng thời tạo độ tin cậy và chính xác cao
1.5 Phương pháp nghiên cứu
- Phương pháp hệ thống, phương pháp tư duy.
- Phương pháp phân tích, tổng hợp.
- Phương pháp tin học hóa bằng cơng cụ lập trình để giải quyết vấn đề.
1.6 Khảo sát nhu cầu người dùng bằng form
Phương pháp: Dựa trên bảng phân thống kê kết quả khảo sát quy mơ nhỏ và nhận
được khoảng 70 responses
Lợi ích mà người đặt hàng mong muốn từ website:
-

79% người tham gia thấy giúp họ tiết kiệm thời gian

65% người thấy tiện lợi hơn khi đi làm
64% người cảm thấy hứng thú khi mua hàng online

Khi được hỏi rằng liệu người dùng có thích đặt các sản phẩm trên website hay khơng?

7


-

90% người tham gia thích
10% người tham gia khơng thích vì lý do sợ lộ thơng tin cá nhân

Phân tích kết quả khảo sát :
+ Các tính năng cần thiết cho người quản lý: Quản lý sản phẩm, Quản lý thơng
tin khách hàng, Quản lý đơn hàng, Phân tích báo cáo, Quản lý doanh thu
+ Các tính năng cần thiết khách hàng: Tìm kiếm sản phẩm,Xem thơng tin sản
phẩm,Thêm sản phẩm vào giỏ hàng,Nhận hỗ trợ tư vấn thông qua chatbot,
Đặt hàng, Thanh tốn online, Xem tiến trình đơn hàng, Feedback sau khi
mua sản phẩm, Quản lý tài khoản cá nhân

+ Nhóm đối tượng khách hàng hướng đến chủ yếu : Khách hàng độ tuổi từ
dưới 18 đến 40 tuổi

8


1.7 Khảo sát, đánh giá các website cạnh tranh
Dựa vào form khảo sát ta có thể thấy lượt truy cập và sử dụng của 3 website hàng đầu là:
Adidas, Nike, Converse

Phân tích và đánh giá nghiệp vụ của 3 website này
Nghiệp vụ
Nike

Website
Adidas

Converse

9


Thêm sản phẩm vào mục
u thích
Thanh tốn online
Feedback sau khi mua sản
phẩm
Quản lý tài khoản cá nhân

X

X

X

X

X

X

X

X

X

X

X

X

Theo dõi tiến trình đơn
hàng
Hỗ trợ đổi trả cho khách
hàng
Tích điểm cho khách hàng

X
X

Chatbot hỗ trợ tư vấn

Nghiệp vụ

Website
Drake Chatbot

Maison Website Chatbot

X

X

Tư vấn chọn size tự động
Liên hệ nhân viên hỗ trợ tư vấn
Tư vấn phối đồ tự động

Loại yêu câu

Tên yêu cầu

Role

Chức năng

Quản lý sản phẩm

Quản lý

Chức năng

Quản lý thông tin khách hàng

Quản lý

Chức năng

Quản lý đơn hàng

Quản lý

Chức năng

Phân tích báo cáo

Quản lý

10


Chức năng

Quản lý doanh thu

Quản lý

Chức năng

Tìm kiếm sản phẩm

Khách hàng

Chức năng

Xem thông tin sản phẩm

Khách hàng

Chức năng

Thêm sản phẩm vào giỏ hàng

Khách hàng

Chức năng

Nhận hỗ trợ tư vấn thông qua chatbot

Khách hàng

Chức năng

Đặt hàng

Khách hàng

Chức năng

Thanh toán online

Khách hàng

Chức năng

Xem tiến trình đơn hàng

Khách hàng

Chức năng

Feedback sau khi mua sản phẩm

Khách hàng

Chức năng

Quản lý tài khoản cá nhân

Khách hàng

11


CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ

2.1 Giới thiệu về ReactJS
2.1.1 Khái niệm

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013,
bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các
thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc
render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client. Một trong
những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà
cịn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các
giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM.
Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản:
- Virtual DOM:

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có
trạng thái và khi nó thay đổi sẽ tái cấu trúc lại tồn bộ, đồng nghĩa với việc DOM tree
cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử
dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này. Virtual DOM là một object
Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu
thay đổi nó sẽ tính tốn sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá
việc re-render DOM tree thật. React sử dụng cơ chế one-way data binding – luồng dữ liệu
1 chiều. Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản
giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi.
- Giới thiệu về JSX:
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc
điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã
Javascript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương
đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là
kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì
thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngồi ra, nó cũng cung cấp
tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên

12


Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascript có thể sử dụng (tham
khảo tại />- Giới thiệu về Components:
React được xây dựng xung quanh các component, chứ không dùng template như
các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành
phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các
trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành
phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React
sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React
đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react

component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác,
nhưng render là method chủ đạo.
- Props và State:
Props: giúp các component tương tác với nhau, component nhận input gọi là
props, và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến. State:
thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để
cập nhật UI.
- React Redux Redux là một predictable state management tool cho các ứng dụng
Javascript. Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các
môi trường khác nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy
cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux
thường dùng kết hợp với React.
2.1.2 Ưu điểm

● Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các
component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều.
Reactjs cũng tính tốn những thay đổi nào cần cập nhật lên DOM và chỉ thực hiện
chúng. Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi
phí.
● Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc biệt là
JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có
thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi.
Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các
hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.
● Nó có nhiều cơng cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng
dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng
hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual
DOM như thể bạn đang xem cây DOM thông thường.

13

● Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu
SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực
hiện ở client, thì người dùng sẽ phải chờ cho trang được khởi tạo và hiển thị lên.
Reactjs là một thư viện component, nó có thể vừa render ở ngồi trình duyệt sử
dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về. Bạn có
thể tham khảo cách render side serving tại đây.
/>● Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì
virtual DOM được cài đặt hồn tồn bằng JS.
● Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo
trì và sửa lỗi.
2.1.3 Nhược điểm

● Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải là
một MVC framework như những framework khác. Đây chỉ là thư viện của
Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model và
Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2-way
binding hay là Ajax
● Tích hợp vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại.
● React khá nặng nếu so với các framework khác React có kích thước tương tương
với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là
một framework hồn chỉnh
● Khó tiếp cận cho người mới học Web

2.2 Giới thiệu về MongoDB

2.2.1 Các đặc điểm cơ bản của MongoDB

Mỗi cơ sở dữ liệu bao gồm nhiều collection, mỗi collection lại chứa nhiều

Document. Mỗi Document có thể khác nhau về số lượng các trường dữ liệu. Kích thước
và nội dung của mỗi Document đều có thể khác nhau.
Cấu trúc của Document phù hợp với việc các nhà phát triển xây dựng các class và
object bằng các ngơn ngữ lập trình tương ứng. Các nhà phát triển sẽ thường phát biểu

14


rằng cấu trúc của họ khơng có các hàng và các cột nhưng vẫn có một cấu trúc dữ liệu rõ
ràng với các cặp key-value.
Nếu như các bạn đã biết trước về NoSQL , các hàng (hay có thể là documents
được gọi trong MongoDB) không cần phải định nghĩa schema. Thay vào đó, các trường
có thể được tạo linh hoạt.
Mơ hình dữ liệu có sẵn trong MongoDB cho phép bạn biểu diễn quan hệ phân cấp,
lưu trữ các mảng, và các cấu trúc phức tạp dễ dàng hơn.
2.2.2 Ưu điểm

Ưu điểm Open Source:
● MongoDB là phần mềm mã nguồn mở miễn phí, có cộng đồng phát triển
rất lớn Hiệu năng cao:
● Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn
so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS).
● Thử nghiệm cho thấy tốc độ insert, tốc độ insert của MongoDB có thể
nhanh tới gấp 100 lần so với MySQL (So sánh hiệu suất của MongoDB với
MySQL) Tại sao MongoDB có hiệu năng cao như thế? có các lý do sau:
● MongoDB lưu dữ liệu dạng JSON, khi bạn insert nhiều đối tượng thì nó sẽ
là insert một mảng JSON gần như với trường hợp insert 1 đối tượng.
● Dữ liệu trong MongoDB khơng có sự ràng buộc lẫn nhau như trong
RDBMS, khi insert, xóa hay update nó khơng cần phải mất thời gian kiểm tra xem
có thỏa mãn các bảng liên quan như trong RDBMS.

● Dữ liệu trong MongoDB được đánh chỉ mục (đánh index) nên khi truy vấn
nó sẽ tìm rất nhanh.
● Khi thực hiện insert, find… MongoDB sẽ khóa các thao tác khác lại, ví dụ
khi nó thực hiện find(), trong q trình find mà có thêm thao tác insert, update thì
nó sẽ dừng hết lại để chờ find() xong đã.
Dữ liệu linh hoạt:
● MongoDB là document database, dữ liệu lưu dưới dạng JSON, khơng bị bó
buộc về số lượng field, kiểu dữ liệu… bạn có thể insert thoải mái dữ liệu mà mình
muốn.
Là Rich Query Language:
● MongoDB là một rich query language tức là nó có sẵn các method để thực
hiện create, read, update, delete dữ liệu (CRUD)
Tính sẵn có:
● MongoDB hỗ trợ replica set nhằm đảm bảo việc sao lưu và khôi phục dữ
liệu.
Khả năng mở rộng Horizontal Scalability:

15


● Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu
giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào
cluster:

2.2.3 Nhược điểm

● MongoDB khơng có các tính chất ràng buộc như trong RDBMS –> dễ bị
làm sai dữ liệu.
● Không hỗ trợ join giống như RDBMS nên khi viết function join trong code
ta phải làm bằng tay khiến cho tốc độ truy vấn bị giảm.

● Sử dụng nhiều bộ nhớ: do dữ liệu lưu dưới dạng key-value, các collection
chỉ khác về value do đó key sẽ bị lặp lại. Không hỗ trợ join nên sẽ bị dư thừa dữ
liệu (trong RDBMS thì ta chỉ cần lưu 1 bản ghi rồi các bản ghi khác tham chiếu tới
còn trong MongoDB thì khơng).
● Bị giới hạn kích thước bản ghi: mỗi document khơng được có kích thước >
16Mb và khơng mức độ các document con trong 1 document không được > 100
2.3 Giới thiệu về NodeJS
2.3.1 Khái niệm

16


Node.js là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên
Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng web
một cách nhanh chóng và dễ dàng mở rộng. Node.js bao gồm có V8 JavaScript engine
của Google, libUV, và vài thư viện khác. Node.js được xây dựng và phát triển bởi Ryan
Dahl từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ. Mục tiêu ban
đầu của Dahl là làm cho trang web có khả năng push như trong một số ứng dụng web như
Gmail. Sau khi thử với vài ngơn ngữ Dahl chọn Javascript vì API nhập/xuất khơng đầy
đủ. Điều này cho phép ơng có thể định nghĩa một quy ước nhập/xuất điểu khiển theo sự
kiện, non-blocking.
Node.js có kiến trúc hướng sự kiện có khả năng nhập/xuất khơng đồng bộ. Thiết
kế này nhằm mục đích tối ưu hóa thơng lượng và khả năng mở rộng trong các ứng dụng
web với nhiều hoạt động đầu vào / đầu ra, cũng như cho các ứng dụng web thời gian
thực. Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần
đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể.
2.3.2 Ưu điểm

● Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking). Bạn có
thể dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất.

● Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website.
● Nhận và xử lý nhiều kết nối chỉ với một single-thread. Nhờ đó, hệ thống xử
lý sẽ sử dụng ít lượng RAM nhất và giúp quá trình xử Nodejs lý nhanh hơn rất
nhiều.
● Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất.
● Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất.
● Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng
chat, mạng xã hội …
2.2.3 Nhược điểm

● Nodejs gây hao tốn tài nguyên và thời gian. Nodejs được viết bằng C++ và
JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch. Nếu bạn cần xử
lý những ứng dụng tốn tài ngun CPU thì khơng nên sử dụng Nodejs.
● Nodejs so với các ngôn ngữ khác như PHP, Ruby và Python sẽ khơng có sự
chênh lệch q nhiều. Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng mới.

17


2.4 Chatbot - DialogFlow
2.4.1 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 và sử dụng cơng nghệ NLP (Natural Language
Processing - Xử lý ngôn ngữ tự nhiên) để hiểu và tương tác tự nhiên với người dùng.
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.
2.4.2 Quy trình hoạt động

2.4.2.1 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 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.

18


- 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.
2.4.2.2 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 Training 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 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

19

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.
2.4.2.3 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.
2.4.2.4 Cách Bot xử lý input để đưa ra output

Đầ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.
2.5 Kommunicate
Kommunicate là một nền tảng dịch vụ chat và hỗ trợ khách hàng được xây dựng
trên cơ sở của cơng nghệ trí tuệ nhân tạo. Nó cung cấp các cơng cụ và tính năng cho phép
doanh nghiệp tạo và quản lý các trò chuyện trực tuyến, chatbot và hệ thống hỗ trợ khách
hàng một cách dễ dàng và hiệu quả.
Với Kommunicate, bạn có thể tích hợp các chức năng chat trực tiếp vào ứng dụng
di động, trang web hoặc ứng dụng tin nhắn khác, giúp cung cấp trải nghiệm tương tác trực
tiếp và tiện lợi cho khách hàng của bạn. Các tính năng chính của Kommunicate bao gồm:

20

1. Tích hợp chatbot: Kommunicate cho phép bạn xây dựng và tích hợp chatbot
vào hệ thống của mình. Chatbot có thể tự động trả lời các câu hỏi phổ biến, cung
cấp thông tin và hướng dẫn, giúp giảm thiểu thời gian và công sức của nhân viên hỗ
trợ.
2. Quản lý trị chuyện: Kommunicate cung cấp các cơng cụ quản lý trò chuyện
mạnh mẽ để giúp bạn theo dõi và quản lý các cuộc trị chuyện của khách hàng. Bạn
có thể xem lịch sử trò chuyện, phân loại và đánh giá trị chuyện, gửi tin nhắn mẫu
và nhiều hơn nữa.
3. Tích hợp nền tảng: Kommunicate cho phép tích hợp với nhiều nền tảng và
ứng dụng khác nhau như iOS, Android, web, Facebook Messenger, Slack, v.v. Điều
này giúp bạn mở rộng phạm vi tương tác với khách hàng trên nhiều kênh và nền
tảng khác nhau.
4. Hỗ trợ nhiều ngôn ngữ: Kommunicate hỗ trợ đa ngôn ngữ, cho phép bạn
tương tác với khách hàng trên toàn cầu và cung cấp dịch vụ hỗ trợ trong ngôn ngữ
mà họ hiểu.
5. Hệ thống nhận diện và phân loại ngữ cảnh: Kommunicate sử dụng công nghệ
xử lý ngôn ngữ tự nhiên (NLP) để nhận diện và phân loại ngữ cảnh của cuộc trò
chuyện. Điều này giúp cung cấp phản hồi chính xác và phù hợp dựa trên nhu cầu và
yêu cầu của khách hàng.
6. Tích hợp cơng cụ bên thứ ba: Kommunicate cho phép bạn tích hợp các công
cụ và dịch vụ bên thứ ba như CRM, Helpdesk, và nhiều hơn nữa. Điều này giúp tối
ưu hóa q trình làm việc và tăng cường khả năng quản lý thông tin của doanh
nghiệp.
7. Giao diện tùy chỉnh: Kommunicate cung cấp khả năng tùy chỉnh giao diện
người dùng, cho phép bạn thiết kế trải nghiệm chat theo ý muốn và tương thích với
thương hiệu của bạn.
8. Thống kê và báo cáo: Kommunicate cung cấp các báo cáo và thống kê chi
tiết về hoạt động chatbot và trò chuyện của khách hàng. Bạn có thể theo dõi hiệu

suất, đánh giá và cải thiện trải nghiệm khách hàng dựa trên các dữ liệu này
Liên kết giữa Dialogflow và Kommunicate cho phép bạn tận dụng các tính năng mạnh mẽ
của cả hai nền tảng. Bạn có thể sử dụng Dialogflow để xây dựng và huấn luyện chatbot
thông qua việc định nghĩa các intent và entity, sau đó tích hợp chatbot vào Kommunicate
để cung cấp trải nghiệm chat trực tuyến và hỗ trợ khách hàng.
Kết hợp giữa Dialogflow và Kommunicate giúp bạn tạo ra một hệ thống chatbot và hỗ trợ
khách hàng mạnh mẽ và toàn diện, cho phép tương tác tự nhiên với người dùng và cung
cấp trợ giúp và hỗ trợ khách hàng một cách hiệu quả.

21


CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG
3.1 Kiến trúc hệ thống
-

Trang web được xây dựng trên nền MERN STACK.
Sử dụng API để kết nối với MongoDB.

3.2 Mơ hình kiến trúc hệ thống
Kiến trúc hệ thống theo mơ hình Client – Server.
+ Tầng Client (là một máy tính (Host)): Tầng có khả năng nhận thông tin hoặc
sử dụng một dịch vụ cụ thể từ các nhà cung cấp dịch vụ (Server).
+ Tầng Server: Tầng cung cấp các thông tin (dữ liệu) hoặc quyền truy cập vào
các dịch vụ cụ thể.
+ Tầng Web (sẽ kết nối với tầng Server & Client): Thành phần giao diện của
chương trình tương tác với người sử dụng
3.3 Mơ tả chi tiết hệ thống
Mơ hình client-server là một mơ hình nổi tiếng trong mạng máy tính, được áp
dụng rất rộng rãi và là mơ hình của mọi trang web hiện có. Ý tưởng của mơ hình này là

máy con (đóng vai trị là máy khách) gửi một u cầu (request) để máy chủ (đóng vai trị
người cung ứng dịch vụ), máy chủ sẽ xử lý và trả kết quả về cho máy khách.
Trong mơ hình này, chương trình ứng dụng được chia thành 2 thành phần: Server và
Client. Client hay cịn gọi là máy khách, nó bao gồm máy tính và các thiết bị điện tử nói
chung. Server hay còn gọi là máy chủ, là nơi cài đặt các chương trình dịch vụ và lưu trữ
tài nguyên.

22


Việc yêu cầu của máy khách, đáp ứng, xử lý, và phản hồi của máy chủ tạo thành
một dịch vụ. Dịch vụ này hoạt động trên nền web nên nó được gọi là dịch vụ web
(hay web service).
Ngoài ra, việc giao tiếp giữa Client với Server phải dựa trên các giao thức chuẩn.
Các giao thức chuẩn được sử dụng phổ biến nhất hiện nay là : giao thức TCP/IP,
giao thức SNA của IBM, OSI, ISDN, X.25 hay giao thức LAN-to-LAN NetBIOS.
● Client
Khi nói đến Client (khách hàng), thì nó có nghĩa là một người hay một tổ chức sử
dụng một dịch vụ cụ thể nào đó. Trong thế giới kỹ thuật số cũng tương tự như vậy.
Client là một máy tính (Host), tức là có khả năng nhận thơng tin hoặc sử dụng một
dịch vụ cụ thể từ các nhà cung cấp dịch vụ (Server).
● Sever
Tương tự như vậy, khi nói đến Server thì nó có nghĩa là một máy chủ hay một
phương tiện phục vụ các dịch vụ nào đó. Trong lĩnh vực cơng nghệ thì Server là
một máy tính từ xa. Nó cung cấp các thơng tin (dữ liệu) hoặc quyền truy cập vào
các dịch vụ cụ thể. Vì vậy, về cơ bản thì trong mơ hình Client và Server, Client là
đối tượng yêu cầu một thứ gì đó. Server thì phục vụ nó, miễn là nó có mặt trong
cơ sở dữ liệu.
3.4 Mơ hình thiết kế hệ thống Backend

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ý 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 Models và trưng bày nó trên View

23


cho người dùng

CHƯƠNG 4. THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG
4.1 Tổng quan sơ đồ Use-case

4.2 Danh sách các Actor
STT

Actor

Mô tả/Ghi chú

1

User

Bắt buộc phải có tài khoản để đăng nhập vào ứng

dụng để sử dụng chức năng

2

Admin

Người dùng sở hữu tài khoản nội bộ, quản lý toàn

24