Đề tài ứng dụng chatbot vào phát triển e commerce web

Phạm Gia Bảo – 19521254 Nội dung đề tài: Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực hiện, kết quả mong đợi của đề tài Mục tiêu Nghiên cứu về các công nghệ lập trình w

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN 2

Đề tài: ỨNG DỤNG CHATBOT VÀO PHÁT TRIỂN E-COMMERCE WEB

GIẢNG VIÊN HƯỚNG DẪN

Mai Trọng Khang

Nhóm sinh thực hiện

Phạm Hớn Tuyền – 19521092 Phạm Gia Bảo – 19521254

TP HỒ CHÍ MINH, tháng 12 2022

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA HỆ THỐNG THÔNG TIN

ĐỒ ÁN 2

Đề tài: ỨNG DỤNG CHATBOT VÀO PHÁT TRIỂN E-COMMERCE WEB

GIẢNG VIÊN HƯỚNG DẪN

Mai Trọng Khang

Nhóm sinh thực hiện

Phạm Hớn Tuyền – 19521092 Phạm Gia Bảo – 19521254

TP HỒ CHÍ MINH, tháng 12 2022

LỜI CẢM ƠN

Để hoàn thành dự án cho môn Đồ án 2 này, chúng em xin gửi lời cảm ơn chân thành đến:

Thầy Mai Trọng Khang đã 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 quá trình thực hiện đồ án môn học 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à thực hiện khóa luận tốt nghiệp sau này

Trong quá 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 thầy để đồ án được hoàn thiện hơn 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 thầy

TP.HCM, ngày 24 tháng 12 năm 2022

Nhóm sinh viên

PHẠM HỚN TUYỀN PHẠM GIA BẢO

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Ứng dụng cung cấp dịch vụ mua bán đồ nội thất online.

Cán bộ hướng dẫn: Giảng viên Mai Trọng Khang

Thời gian thực hiện: Từ ngày 30/09/2022 đến ngày 10/01/2023

Sinh viên thực hiện:

1 Phạm Hớn Tuyền –19521092

2 Phạm Gia Bảo – 19521254

Nội dung đề tài: (Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực

hiện, kết quả mong đợi của đề tài)

Mục tiêu

Nghiên cứu về các công nghệ lập trình website bằng ngôn ngữ JavaScript, xây dựng Frontend bằng ReactJS, xây dựng Backend bằng ngôn ngữ JavaScript sử dụng NodeJS và Express framework, hệ quản trị cơ sở dữ liệu…., các nghiệp vụ hay bước xử lý các bài toán đặc trưng của một ứng dụng bán hàng online cụ thể trong đồ án này là cung cấp dịch vụ mua bán trực tiếp, cũng như hiểu được cách

xử lý dữ liệu để có thể giảm thiểu thời gian tải, gia tăng hiệu suất ứng dụng, giải quyết được sự đa dạng của hàng hóa

Ứng dụng đối với người tiêu dùng:

• Lọc sản phẩm theo thể loại trang trí

• Thêm sản phẩm vào giỏ hang

• Tìm hiểu các quy trình nghiệp vụ mua bán hàng hiện có

• Tìm hiểu nghiệp vụ, quy trình hoạt động của shop mua sắm đồ nội thất

• Phác họa hệ thống tổng quát (thiết kế dữ liệu, xử lý dữ liệu…)

• Tham khảo các ứng dụng tương tự: Nhà xinh, Phố xinh, Shopee, Tiki, …

• Tham khảo ý kiến của giảng viên hướng dẫn để được định hướng đúng, đạt kết quả tốt nhất

• Thiết kế giao diện, cơ sở dữ liệu đáp ứng được các yêu cầu cho ứng dụng

Kết quả mong đợi

Đối với kết quả mong đợi chung:

• Xây dựng được cách xử lý các bài toán về tải dữ liệu tăng hiệu suất

• Biết được các kỹ thuật lập trình với JavaScript, ReactJS, SCSS,

TailwindCSS, Axios, Redux, Antd, NodeJS, ExpressJS, MongoDB,

Mongoose, JsonWebToken, Bcrypt

• Hoàn thành ứng dụng với giao diện trực quan, hoạt động tốt trên các nền

tảng trình duyệt (mobile và desktop)

• Giải quyết được bài toán về đa dạng hàng hóa

Đối với ứng dụng bên mua:

• Với khách hàng là người dùng chưa đăng nhập, có thể xem sản phẩm, tìm kiếm sản phẩm và đăng ký tài khoản

• Với khách hàng là người mua và đã đăng nhập có thể thực hiện chức năng xem sản phẩm, quản lý giỏ hàng, quản lý địa chỉ giao hàng, tạo đơn hàng, xem tình trạng đơn hàng, hủy đơn hàng

Đối với ứng dụng bên bán

• Với khách hàng là các cửa hàng đã đăng nhập có thể quản lí, thực hiện CRUD sản phẩm, thực hiện cập nhật trạng thái giao hàng, hủy đơn hàng khi phát hiện bất thường, thực hiện quản lý kho…

Các tiêu chí khác

• Tính thẩm mỹ: Ứng dụng có giao diện dễ nhìn, dễ dàng thực hiện các thao

tác, không gây cảm giác khó chịu hay khó sử dụng cho người dùng

Kế hoạch thực hiện

Với thời gian thực hiện từ ngày xx/yy/2022 đến ngày xx/yy/2023, nhóm chia thành các công việc cụ thể như sau:

Giai đoạn 1: Khảo sát tìm hiểu về các ứng dụng, bài toán cần giải quyết có liên quan

1 Khảo sát các ứng dụng như Nhà xinh, Phố xinh, Shopee, Tiki,… Cả hai

2 Tìm hiểu thêm về các hoạt động khác trong lĩnh vực thương mại điện

4 Lập báo cáo khảo sát bao gồm, hình ảnh UI, luồng, các bào toán Cả hai

Giai đoạn 2: Thiết kế giải quyết các bài toán, phân rã yêu cầu, hình thành các chức năng

Giai đoạn 3: Tìm hiểu về các công nghệ liên quan và sẽ được sử dụng

Giai đoạn 4: Mô tả chi tiết các bài toán, usecase, các hoạt động của đồ án, thiết kế kiến trúc, UI/UX, cơ sở dữ liệu, class

Giai đoạn 5: Tiến hành triển khai xây dựng đồ án

Tuyền

19

Code phần Model ở Backend (xây dựng model ở backend theo bảng

thiết kế class diagram – MongoDB là CSDL NoSQL nên không có

mô hình CSDL)

Phạm Gia Bảo

20 Xây dựng các APIs kết hợp với kiểm thử Postman, sau đó kết nối với

MỤC LỤC

1.1 Giới thiệu đề tài 11

1.2 Khảo sát người dùng 11

1.3 Giải pháp 15

1.4 Các yêu cầu chức năng chính 16

1.5 Các yêu cầu phi chức năng 17

1.6 Các công nghệ sử dụng 17

1.7 Quản lý Project 18

II - CÔNG NGHỆ & KIẾN TRÚC 19 2.1 Công nghệ chính 19

2.1.1 MongoDB 19

2.1.2 JavaScript 19

2.1.3 ReactJS 20

2.1.4 NodeJS 21

2.1.5 ExpressJS 21

2.1.6 Ant Design 22

2.2 Kiến trúc của ứng dụng web 23

2.3 Dialogflow 24

2.3.1 Giới thiệu thuật ngữ chuyên dụng 24

2.3.2 Giới thiệu Dialogflow 25

2.3.3 Lý do cho việc dùng Dialogflow 25

2.3.4 Các phiên bản của Dialogflow 26

2.3.5 Các thành phần trong Dialogflow 27

2.3.6 Khả năng tích hợp 31

III - CHI TIẾT CẤU TRÚC HỆ THỐNG 32 3.1 Mô hình Usecase 32

3.2 Danh sách các Actors 32

3.3 Danh sách các Usecases 33

3.4 Đặc tả các Usecases 34

3.4.1 Đặc tả Usecase - Quản lý giỏ hàng 34

3.4.2 Đặc tả Usecase – Thêm sản phảm vào giỏ hàng 35

3.4.3 Đặc tả Usecase – Đặt hàng 35

3.4.4 Đặc tả Usecase – Quản lý sản phẩm 36

3.4.5 Đặc tả Usecase - Quản lý hóa đơn 37

3.4.6 Đặc tả Usecase – Cập nhật trạng thái hóa đơn 38

3.4.7 Đặc tả Usecase – Tìm kiếm khách hàng 38

3.4.8 Đặc tả Usecase – Hiển thị thông tin chi tiết sản phẩm 39

3.4.9 Đặc tả Usecase – Đăng nhập 40

3.4.10Đặc tả Usecase – Đăng ký 41

3.4.11Đặc tả Usecase – Thoát 41

3.4.12Đặc tả Usecase – Đổi password 42

3.4.13Đặc tả Usecase – Tìm kiếm sản phẩm 43

3.4.14Đặc tả Usecase – Xem chi tiết hóa đơn 44

3.4.15Đặc tả Usecase – Thay đổi thông tin cá nhân 44

3.4.16Đặc tả Usecase – Quản lý địa chỉ giao hàng 45

3.4.17Đặc tả Usecase – Chatbot 46

3.5 Mô hình Usecase 47

3.5.1 UC1: Quản lý giỏ hàng 47

3.5.2 UC2: Thêm sản phẩm vào giỏ hàng 48

3.5.3 UC3: Đặt hàng 49

3.5.4 UC4: Quản lý sản phẩm 50

3.5.5 UC5: Quản lý hóa đơn 51

3.5.6 UC6: Hiển thị danh sách hóa đơn 52

3.5.7 UC7: Tìm kiếm khách hàng 53

3.5.8 UC8: Hiển thị thông tin chi tiết sản phẩm 54

3.5.9 UC9: Đăng nhập 55

3.5.10UC10: Đăng kí 56

3.5.11UC11: Thoát 57

3.5.12UC12: Đổi password 58

3.5.13UC13: Tìm kiếm sản phẩm 59

3.5.14UC14: Xem chi tiết hóa đơn 60

3.5.15UC15: Thay đổi thông tin các nhân 61

3.5.16UC16: Quản lý địa chỉ giao hàng 62

3.6 Các sơ đồ Sequence Diagrams 63

3.6.1 UC1,2: Quản lý giỏ hàng 63

3.6.2 UC3: Quản lý giỏ hàng 63

3.6.3 UC4: Quản lý sản phẩm 64

3.6.4 UC5: Quản lý hóa đơn 64

3.6.5 UC6: Cập nhật trạng thái hóa đơn 65

3.6.6 UC7: Tìm kiếm khách hàng 65

3.6.7 UC8: Hiển thị thông tin chi tiết sản phẩm 66

3.6.8 UC9: Đăng nhập 66

3.6.9 UC10: Đăng kí 67

3.6.10 UC11: Thoát 67

3.6.11 UC12: Đổi mật khẩu 68

3.6.12 UC13: Tìm kiếm sản phẩm 68

3.6.13 UC14: Xem chi tiết hóa đơn 69

3.6.14 UC15: Thay đổi thông tin các nhân 70

3.6.15 UC16: Quản lý địa chỉ giao hàng 70

3.6.17 UC17: Tương tác với chatbot 71

3.7 Thiết kế database 72

3.7.1 Sơ đồ Database 72

3.7.2 Mô tả Database 73

IV - GIAO DIỆN NGƯỜI DÙNG 76 4.1 Giao diện người dùng 76

V - KẾT LUẬN 91 5.1 Giao diện người dùng 91

5.2 Khó khăn 92

5.3 Hướng phát triển 92

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

TMĐT Thương mại điện tử Hình thức mua sắm online

CSDL

(DB)

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

API Aplication Programming

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

UI/ UX User Interface/ User

Experience

Giao diện người dùng/Trải nghiệm người dùng

HTTP HyperText Transfer Protocol Giao thức truyền siêu vănbản

JSON JavaScript Object Notation Định dạng trao đổi dữ liệu

HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn bản

CSS Cascading Style Sheets Tập tin định kiểu theo tầng

JS JavaScript Ngôn ngữ lập trình theo ý niệm

nguyên mẫu CRUD Create Read Update Delete Tạo, Đọc, Cập nhật, Xóa

COD Cash on delivery Thanh toán khi nhận hàng

I - GIỚI THIỆU

1.1 Giới thiệu đề tài

Ngày nay, với sự phát triển của ngành Công nghệ thông tin, các sản phẩm và ứng dụng truyền thống đã được chuyển sang các nền tảng trực tuyến Việc đăng tin trên các nền tảng này

sẽ giúp cửa hàng tiếp cận được nhiều khách hàng hơn, đồng thời có thể quản lý việc bán hàng, lưu kho, vận chuyển và thanh toán một cách chính xác và minh bạch Khách hàng mục tiêu của nhóm chúng em là dịch vụ cửa hàng nội thất và cây cảnh Trên thị trường, có rất nhiều mô hình ứng dụng thương mại điện tử nhưng chưa có dự án nào tập trung phát triển cho những cửa hàng nội thất như thế này Đồng thời, các dự án chưa đáp ứng được về mặt hiệu suất, giao diện cũng như tính dễ sử dụng Hiểu được nhu cầu về một hệ thống giải quyết vấn đề cho các cửa hàng nội thất vừa và nhỏ, nhóm cho ra đời sản phẩm Konsept với mục tiêu nhanh - dễ sử dụng - giao diện thân thiện

Đối với các câu hỏi về mức độ quan tâm về đồ nội thất thì ta có thể thấy đa số người khảo sát đều khá quan tâm và họ cũng thường xuyên ghé các website bán hàng nội thất

Và với các tiêu chí khi mua đồ nội thất thì thường tiêu chí màu sắc và chất liệu đạt được nhiều sự quan tâm nhất của những người khảo sát

Tuy vậy các website bán đồ nội thất lại không cung cấp đầy đủ các thông tin và hàng nội thất cho khách hàng

Vì vậy để làm hoàn thiện và phong phú hơn về các chức năng cũng như giao diện cho website thì nhóm chúng em đã thực hiện thêm các cuộc khảo sát về màu sắc, phân chia loại sản phẩm,

vị trí điều hướng, độ đầy đủ thông tin và độ dễ hiểu

Qua đó chúng em nhận được kết quà là đa phần người dùng thường quan tâm đến màu sắc, phân chia rõ ràng cũng như là vị trí điều hướng đến các chức năng khác và độ dễ hiểu khi vào một website bán đồ nội thất

Cuối cùng chúng em lấy thêm các ý kiến về các chức năng cần cải thiện mà khách hàng mong muốn website cần cải thiện

Kết quả là xây dựng UI thân thiện, đa dạng về mặt hàng và giá rẻ là những tiêu chí cải thiện mà những người khảo sát mong muốn nhất

Qua kết quả của cuộc khảo sát, nhóm chúng em rút ra kết luận như sau: Đa phần người dùng quan tâm đến đồ nội thất và hay ghé qua website nội thất, và khi mua nội thất thì họ thường chọn màu sắc và chất liệu Tuy vậy các website lại không cung cấp đầy đủ thông tin về hàng cho họ, và các tiêu chí về màu sắc, sự phân chia rõ ràng các loại hàng và độ dễ hiểu cũng được nhận rất nhiều sự quan tâm cho một website bán đồ nội thất Và cuối cùng, để cải thiện một website bán hàng thì đa phần người khảo sát chọn nên xây dựng UI thân thiện hơn, đa dạng

về mặt sản phẩm và giá thành rẻ

1.3 Giải pháp

Furniturer - đơn vị tiên phong trong hệ thống thương mại điện tử nội thất Việt Nam

Ý tưởng này dựa trên hệ thống cửa hàng bán đồ nội thất Nhóm chúng em chuyển tất cả các quy trình giao dịch sang một nền tảng trực tuyến để giúp cửa hàng giải quyết các vấn đề khác nhau Khách hàng mục tiêu của nhóm chúng em là các cửa hàng quy mô vừa hoặc nhỏ không thể tiếp

cận một số hệ thống thương mại điện tử lớn hiện nay như Shopee, Lazada … do chi phí cao, rủi ro … Nhiệm vụ chính của Furniturer là mọi cửa hàng nội thất đều có thể chuyển sang đám

mây và điều chỉnh hoạt động kinh doanh của họ trực tuyến Nhóm chúng em cũng cung cấp một giao diện người dùng thực sự tuyệt đẹp còn được gọi là UX/UI thân thiện mà mọi người đều có thể sử dụng và yêu thích nó

1.4 Các yêu cầu chức năng chính

6 Thanh toán bằng Paypal

7 Kiểm tra tình trạng đơn hàng

8 Thay đổi thông tin khách hàng

9 Lưu thông tin giao hàng

Trang Dashboard Admin

1.5 Các yêu cầu phi chức năng

Tính khả dụng

o Hiệu quả sử dụng: Thực thi nhanh, ít xảy ra lỗi cho người dùng

o Tính trực quan: giao diện thân thiên, dễ điều hướngcác nút, tiêu đề và thông báo lỗi dễ hiểu

o Giao diện dễ sử dụng

Độ tin cậy

o Ứng dụng phân quyền và xác thực vai trò người dùng

o Thiết lập giới hạn các chức năng theo từng vai trò của người dùng

Hiệu năng

o Thời gian tải dưới 3 giây để truy cập vào ứng dụng

o 90% tổng thời gian phản hồi ít hơn 3-7 giây

o Visual Studio Code

II - CÔNG NGHỆ & KIẾN TRÚC

2.1 Công nghệ chính

2.1.1 MongoDB

Dựa trên thời gian, lộ trình và các thành viên trong nhóm, chúng em quyết định chọn cơ

sở dữ liệu NoSQL cung cấp cho nhóm chúng em thời gian phát triển ngắn hơn và hiệu suất cũng tốt hơn Trong các nghiên cứu gần đây, cơ sở dữ liệu NoSQL cho thấy một kết quả vượt trội so với cơ sở dữ liệu SQL truyền thống Với một vài lần thử và nghiên cứu, nhóm của nhóm

chúng em đưa ra quyết định rằng MongoDB sẽ là cơ sở dữ liệu của nhóm chúng em

MongoDB là cơ sở dữ liệu NoSQL hướng tài liệu được sử dụng để lưu trữ dữ liệu khối

lượng lớn Thay vì sử dụng các bảng và hàng như trong cơ sở dữ liệu quan hệ truyền thống, MongoDB sử dụng các bộ sưu tập và tài liệu Tài liệu bao gồm các cặp key-value là đơn vị dữ liệu cơ bản trong MongoDB Bộ sưu tập chứa các tập hợp tài liệu và chức năng tương đương với các bảng cơ sở dữ liệu quan hệ

2.1.2 JavaScript

JavaScript là 1 trong 3 ngôn ngữ chính của lập trình web, và nó được dùng phổ biến

trong suốt 20 năm qua Từ thuở sơ khai, nó còn có tên là Mocha (năm 1995), sau đó được đổi thành Mona, Livescript, và cuối cùng là JavaScript như hiện nay

Tính đến năm 2016, có đến 92% trang web hiện nay đang sử dụng JavaScript, và rất có thể bạn

đã dùng qua rất nhiều trang web có sử dụng ngôn ngữ lập trình này

2.1.3 ReactJS

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 nữa

Lý do nên sử dụng ReactJS:

• Phù hợp với đa dạng thể loại web

• Tái sử dụng các component

• Thân thiện với SEO

• Debug dễ dàng

• Là công cụ phát triển web được nhiều người ưa dùng

2.1.4 NodeJS

Node.js là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả

năng mở rộng, đặc biệt là máy chủ web Chương trình được viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tối thiểu tổng chi phí và tối đa khả

nă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

2.1.5 ExpressJS

ExpressJS là một framework được xây dựng trên nền tảng của NodeJS Nó cung cấp

các tính năng mạnh mẽ để phát triển web hoặc mobile ExpressJS hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng

Tổng hợp một số chức năng chính của Expressjs như sau:

• Thiết lập các lớp trung gian để trả về các HTTP request

• Define router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

• Cho phép trả về các trang HTML dựa vào các tham số

Lý do nên sử dụng ExpressJS:

• ExpressJS có thể giảm một nửa thời gian viết mã mà vẫn giúp nhà phát triển xây dựng các ứng dụng web hiệu quả

• ExpressJS còn cung cấp các tính năng khác nhau giúp tiết kiệm công sức rất nhiều

• ExpressJS được sử dụng tương đối dễ dàng vì có hỗ trợ JavaScript

• ExpressJS được phát triển dựa trên nền tảng Node.js Đây là một kiến trúc hướng sự kiện và có khả năng xử lý hàng nghìn yêu cầu của khách hàng cùng một lúc

• ExpressJS lại là một ứng dụng web miễn phí và mã nguồn mở

2.1.6 Ant Design

Ant Design là tập hợp các components của React được xây dựng theo chuẩn thiết kế

của Ant UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh

đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng

Ant Design đáp ứng được hầu hết các yêu cầu của project của bạn mà ban không phải

cài thêm bất cứ thư viện nào nữa Dưới đây là danh sách các components mà nó cung cấp:

• General: Button, Icon

• Layout: Grid, Layout

• Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps

• Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker, Upload

• Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table

• Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton

• Other: Anchor, BackTop, Divider, LocaleProvider

2.2 Kiến trúc của ứng dụng web

Furniturer được phát triển với MERN Stack bao gồm: MongoDB, Express, ReactJS

và NodeJS Với sức mạnh của ReactJS, một framework mã nguồn mở được Facebook giới

thiệu, chúng em có thể dễ dàng phát triển, sửa lỗi, cải thiện các tính năng trong trang web của mình Nhóm cũng áp dụng Redux để quản lý trạng thái các thành phần nhằm đảm bảo tính nhất quán về dữ liệu trong ứng dụng và tăng tốc độ truy cập Trong phần phụ trợ, MongoDB và NodeJS là lựa chọn của nhóm vì nó cung cấp hiệu suất và độ chính xác cao NodeJS sử dụng

mô hình I / O không chặn và được viết bằng Javascipt-một ngôn ngữ mà nhóm em sử dụng trong học kỳ này

2.3 Dialogflow

2.3.1 Giới thiệu thuật ngữ chuyên dụng

Artificial Intelligence (viết tắt là AI), trong khoa học máy tính, là trí thông minh nhân

tạo, là trí thông minh được thể hiện bằng máy móc, trái ngược với trí thông minh tự nhiên của con người Thông thường, thuật ngữ "trí tuệ nhân tạo" thường được sử dụng để mô tả các máy móc (hoặc máy tính) có khả năng bắt chước các chức năng "nhận thức" mà con người thường phải liên kết với tâm trí, như "học tập" và "giải quyết vấn đề"

Machine Learning (viết tắt là ML) là một lĩnh vực nhỏ của khoa học máy tính, cũng có

thể xem nó như là một nhánh của AI, là một lĩnh vực nghiên cứu cho phép máy tính có khả năng cải thiện chính bản thân chúng dựa trên dữ liệu mẫu (training data) hoặc dựa vào kinh nghiệm (những gì đã được học) ML có thể tự dự đoán hoặc đưa ra quyết định mà không cần được lập trình cụ thể

Bot là một ứng dụng thô sơ đơn giản và trực quan nhất của trí tuệ nhân tạo (AI) Bot là kết quả của một hay nhiều kịch bản đã được viết sẵn kèm với một ít máy học (ML) để có thể

tương tác với người dùng, ví dụ như trả lời câu hỏi và đưa ra các gợi ý sao cho tự nhiên như con người và chính xác nhất

Ta có thể hình dung Bot như là Siri của Apple hay Cortana của Microsoft Bot có ngày càng thông minh hay không phụ thuộc vào ít nhất 2 yếu tố cấu thành nên bộ não của nó đó là:

• Kịch bản dựng sẵn

• Khả năng học hỏi

2.3.2 Giới thiệu Dialogflow

Dialogflow, tiền thân là API.AI được phát triển bởi một công ty nổi tiếng với trợ lý ảo

Speaktoit, được mua lại bởi Google vào tháng 9 năm 2016, là nền tảng hiểu biết ngôn ngữ tự nhiên giúp cho các nhà phát triển dễ dàng thiết kế và phát triển một giao diện đối thoại vào đa dạng các loại ứng dụng có thể kể đến như là mobile app, web app, thiết bị phần cứng, bot, hệ thống tương tác phản hổi 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, có thể phân tích đa dạng các loại đầu vào (inputs) từ người dùng nhập vào như là văn bản thuần hay âm thanh/ghi âm Ngoài ra nó còn phản hồi lại với người dùng theo một vài cách, dù đó là văn bản hay bằng giọng nhân tạo (như Google Translation)

2.3.3 Lý do cho việc dùng Dialogflow

Các máy tính thông thường khi muốn thực hiện tác vụ gì đó cho người dùng thì chúng cần đầu vào (inputs), nhưng đầu vào này thường được xem là “có cấu trúc và nhận biết được”

do bởi máy tính, ví dụ như nháy chuột hay gõ phím Vậy nếu người dùng cho đầu vào là các câu thoại thì sao? Nếu câu hỏi đó có cấu trúc rõ ràng thì có lẽ không phải quá vấn đề, nhưng giả sử nếu trường hợp sau xảy ra:

• Trời hôm nay như thế nào?

• Trời hôm nay nhìn ra sao?

• Nhiệt độ ở TP Hồ Chí Minh vào ngày mai là bao nhiêu độ?

• Thời tiết sẽ như nào vào ngày 21?

Với con người chúng ta, cả 4 câu hỏi trên là giống nhau nhưng đối với máy tính thì lại là không Chúng không thể tự nhận biết được cả 4 câu tuy khác nhau cách hỏi nhưng lại cùng “hỏi về 1 thứ chung” Chúng ta có hỏi giải quyết vấn đề này bằng cách yêu cầu người dùng thống nhất 1

cách hỏi duy nhất, nhưng làm như thế có lẽ là quá kém hiệu quả và phức tạp cho người dùng Thậm chí nếu chúng ta (những nhà phát triển) muốn giải quyết vấn đề này bằng cách tự cài đặt khả năng nhận biết ngôn ngữ thì cũng quá phức tạp và mất thời gian

Và đây cũng chính là lúc Dialogflow trả lời câu hỏi của ta Dialogflow sẽ giải quyết các kỹ thuật phức tạp ấy và nhiệm vụ của chúng ta sẽ chính là tập trung vào việc tạo trải nghiệm sản phẩm tốt hơn cho người dùng

2.3.4 Các phiên bản của Dialogflow

Hiện nay Dialogflow đang có 2 phiên bản, CX và ES, trong đó CX là phiên bản vượt

trội hơn với ES và chính vì lý do đó, 2 phiên bản này cung cấp dịch vụ, tài liệu, API cũng như

là đối tượng người dùng hướng đến khác nhau hoàn toàn

• Dialogflow ES dành cho doanh nghiệp, tổ chức nhỏ với các kịch bản tư vấn đơn giản

• Dialogflow CX dành cho các doanh nghiệp, tổ chức có các kịch bản tư vấn phức tạp

Hình ảnh so sánh khả năng cung cấp dịch vụ giửa bản ES và CX của Dialogflow

2.3.5 Các thành phần trong Dialogflow

Vì tài liệu này được tập trung vào mục đích học thuật nên sẽ tập trung vào phiên bản ES

Agent

Trong Dialogflow, Agent là một thành phần chính trong Dialogflow, nó là module hiểu

biết ngôn ngữ tự nhiên (NLU), hiểu biết các nhập nhằng phức tạp trong ngôn ngữ nói thông

thường của con người ta Agent sẽ phiên dịch các văn bản hay âm thanh của người dùng thành một dữ liệu có cấu trúc để app và dịch vụ của ta hiểu và xử lý được Và chúng ta cần phải huấn luyện (train) chúng để ta có thể xử lý các tình huống giao tiếp thông thường

Intent

Khi tạo 1 Agent, bạn sẽ được tạo cùng 2 Intents mặc định đó là “Default Falback Intent”

và “Default Welcome Intent”

• Default Fallback Intent — những nội dung mà bot không hiểu

• Default Welcome Intent — những nội dung mà chúng tiếp xúc với người dùng lần đầu

Ví dụ khách hàng hỏi bot: mình muốn mua cây bút Artline, hoặc bút Artline bán ở đâu, hoặc mình ở Sài Gòn muốn mua bút Artline thì ghé nhà sách nào, hoặc nhà sách nào có bán bút dạ quang Artline vậy bạn…

Nói tóm tắt thì khách hàng chỉ muốn mua bút, vậy nội dung đề cập của khách là mua bút Với mỗi agent, ta sẽ muốn định nghĩa nhiều intents, từ đó các intents sẽ cùng kết hợp lại để agent có thể có 1 cuộc đối thoại tự nhiên với người dùng Với ví dụ trên ngoài Intent về bút, ta

có thể có các Intents khác liên quan về địa điểm, giá bán, thời gian để bot hiểu hơn “ý muốn” của người dùng hơn

Một Intent sẽ bao gồm 4 thành phần nhỏ:

• Training Phrase: Những câu mẫu mà người dùng có khả năng sẽ nói được ta thêm vào

sẵn cho máy để kích hoạt Intent đó Không cần phải liệt kê tất cả các câu vì máy sẽ tự động tìm hiểu các câu tương tự

Tại mục Training phrases, ví dụ Intent iTuVan, ta có thể định nghĩa các training phrases

mà người dùng hay nói như:

o Cho hỏi về bút chì màu

o Mình cần tư vấn về bút màu sáp cho bé

• Action: là những hành động ta định nghĩa cho mỗi Intent, ta chỉ định một action cho

mỗi intent Khi intent được kích hoạt, Dialogflow sẽ cung cấp action tương ứng cho hệ thống của ta

• Parameters: là một danh sách các tham số được dùng để trích xuất thông tin cần thiết

từ lời yêu cầu của người dùng để xử lý hoặc cũng có thể dùng để phản hồi về cho người dùng Khi 1 intent được kích hoạt lúc nói chuyện, Dialogflow sẽ bóc tách ra các từ khoá

có ý nghĩa Các từ khoá này được lưu vào trong các Parameters

• Response: là những phản hồi được định nghĩa sẵn để đáp lại người dùng, nó có thể là

một câu trả lời cho một yêu cầu của người dùng hoặc có thể là lời yêu cầu người dùng

cung cấp thêm thông tin hoặc một phản hồi kết thúc cuộc hội thoại, là những gì ta sẽ hành động khi nghe người kia nói

Entity

Là cách mà Dialog hiểu câu nói của người dùng thông qua việc xác định và trích xuất dữ liệu cần thiết từ câu nói đó Với Intent thì chatbot có thể hiểu được mục đích hay ý nghĩa trong câu nói của người dùng thì Entity sẽ là cách để trích xuất thông tin từ câu nói ấy ra Với

parameter của từng Intent đều có một loại gọi là Entity type, đây chính là cách mà văn bản/âm

thanh của người dùng nhập được trích xuất thành dữ liệu có cấu trúc như ta đã nói ở trên Một Entity bao gồm 3 phần:

• Loại Entity: định nghĩa ra loại thông tin mà ta muốn trích xuất từ câu truy vấn của người dùng

• Phần tử Entity: mỗi loại Entity sẽ có nhiều phần tử, mỗi phần tử cung cấp một tập các

từ hoặc cụm từ được coi là tương đương

• Các từ đồng nghĩa và giá trị tham chiếu với Entity: một vài phần tử Entity có nhiều từ hoặc cụm từ mà có nghĩa tương đương nhau, với những Entity này ta cần cung cấp một giá trị tham chiếu và một hoặc nhiều từ, cụm từ đồng nghĩa

Trong Dialogflow đã cung cấp một lượng lớn Entities có sẵn cho các Intents, như là thời gian, màu sắc, địa chỉ email, …Ngoài ra ta cũng có thể tự tao ra Entity riêng để phù hợp với việc phát triển

Context

Context trong Dialogflow cũng rất giống như trong ngôn ngữ thông thường của con

người Nếu ta nói “Chúng có màu cam” thì “Chúng” trong câu chỉ đển ai/sự vật/sự việc tùy theo context của câu nói đó Và Dialogflow dùng Context như là cách để xác định được ý nghĩa chính xác của câu từ trong đó

Follow-up Intent

Là cách để chatbot có thể lưu nhớ được thông tin của cuộc đối thoại, nó sẽ ghi nhớ được các câu nói trước đó để có thể đưa ra câu trả lời tiếp theo chính xác với người dùng hỏi Ta có thể xem các Follow-up Intent như là Intent con được lồng vào các Intent cha, khi đó Intent cha

sẽ đưa ra một Context và chính Context sẽ lại đưa vào Intent con, giữ cho chatbot hiểu được Context của cuộc đối thoại xuyên suốt

Dialogflow cung cấp rất nhiều Follow-up Intents định nghĩa sẵn như là “Yes”, “No”,

“Cancel”,… dành cho các câu trả lời thông dụng

Ví dụ: một Intent tên là iTuVan để xử lý yêu cầu của người dùng khi cần tư vấn về sữa,

chat bot sẽ đưa ra các câu hỏi gợi mở như “bạn cần mua loại nào: Frisolac Gold, Nan Nestle, Physiolac, Morinaga, Meiji” Khi người dùng trả lời tên một loại sữa (VD: frisolac) thì chatbot

sẽ hỏi tiếp “bạn muốn hỏi về giá hay chỗ mua sữa Frisolac Gold?” để làm được như vậy ta cần tạo thêm một Intent con từ Itent iTuVan bằng cách thêm vào Follow-up Intent, “iTuVan - Frisolac Gold”

Dialogflow Console

Dialogflow cung cấp giao diện web để cho các nhà phát triển xây đựng chatbot được gọi

là Dialogflow Console, và đây chính là công cụ chính cho việc xây dựng, khởi tạo và test các agents chatbot (Thông qua link: dialogflow.cloud.google.com)

Một số hình ảnh giao diện của Dialogflow Console

2.3.6 Khả năng tích hợp

Người dùng tương tác với các nền tảng

Dialogflow tích hợp rất nhiếu với các nền tảng có khả năng đối thoại lớn như là Google Assistant, Slack, Facebook Messenger, … Nếu ta muốn tạo một agent để sử dụng trên các

nền tảng này thì ta nên lựa chọn mục này Các tương tác với người dùng sẽ được Dialogflow

xử lý và ta chỉ cần việc tập trung vào phần xây dựng agent Và cũng chính vì mỗi nền tảng xử

lý tương tác người dùng khác nhau nên ta cũng cần phải xem xét và tìm hiểu từng các xử lý cho từng nền tảng riêng biệt

Người dùng tương tác bằng các API

Nếu chúng ta không lựa chọn sử dụng tương tác trên các nền tảng thì ta sẽ có thể tự xử lý các tương tác trực tiếp ấy thông chính code ta viết Điều này có nghĩa là ta sẽ làm việc trực tiếp với chính các API của Dialogflow cho từng câu đối thoại giữa chatbot với người dùng, từ việc nhận câu hỏi đến việc xuất ra câu trả lời

III - CHI TIẾT CẤU TRÚC HỆ THỐNG

3.1 Mô hình Usecase

3.2 Danh sách các Actors

1 Admin Người quản trị hệ thống

2 Chủ Chủ cửa hàng

3 Khách vãng lai Khách vãng lai, người dùng chưa có tài khoản

4 Khách hàng Khách hàng, là người dùng có tài khoản và đã đăng

nhập vào hệ thống

3.3 Danh sách các Usecases

UC1 Khách hàng Quản lý giỏ hàng Cập nhật, xóa

UC2 Khách hàng Thêm sản phẩm vào giỏ hàng

UC13 Tất cả Tìm sản phẩm

UC14 Khách hàng Kiểm tra hóa đơn

UC15 Khách hàng Thay đổi thông tin các nhân

UC16 Khách hàng Quản lý địa chỉ giao hàng CRUD

UC17 Khách hàng Tương tác với chatbot Người dùng tương tác với

chatbot

3.4 Đặc tả các Usecases

3.4.1 Đặc tả Usecase - Quản lý giỏ hàng

2 Hệ thống sẽ chuyển đến trang giỏ hàng

3 Khách hàng cập nhật thông tin sản phẩm trong giỏ

4 Cập nhập số lượng sản phẩm hay xóa hàng khỏi giỏ

5 Hệ thống sẽ thực thi lựa chọn

6 Hệ thống sẽ thông báo cho khách hàng là thành công

Alternative flow

3.4.2 Đặc tả Usecase – Thêm sản phảm vào giỏ hàng

2 Khách hàng nhấn vào nút “Add to cart”

3 Hệ thống sẽ thêm sản phẩm vào giỏ hàng

4 Hệ thống sẽ thông báo cho khách hàng là đã thành công

hàng

Basic flow 1 Khách hàng chọn sản phẩm mà họ muốn mua

2 Khách hàng nhấn vào nút “Checkout”

3 Khách hàng chọn phương thức thanh toán (COD, PayPal)

4 Khách hàng nhấn vào nút “Confirm order”

5 Hệ thống sẽ thêm hóa đơn vào đơn hàng

6 Hệ thống sẽ thông báo cho khách hàng là đã thành công

Basic flow 1 Actor nhấn vào tab “Product”

2 Hệ thống sẽ chuyển sang trang quản lý sản phẩm

3 Actor chọn chức năng (Thêm, Xóa, Sửa)

4 Hệ thống thực thi lựa chọn

6 Hệ thống sẽ thể hiện thông báo thành công

3.2 Actor điền đầy đủ thông tin

3.4.5 Đặc tả Usecase - Quản lý hóa đơn

2 Actor chọn loại danh sách hóa đơn

3 Hệ thống thực thi lựa chọn

4 Hệ thống hiển thị danh sách kết quả

5 Hệ thống thông báo thành công

Extend point Không có

3.4.6 Đặc tả Usecase – Cập nhật trạng thái hóa đơn

Use case’s name Cập nhật trạng thái hóa đơn

2 Hệ thống sẽ chuyển đến trang quản lý hóa đơn

3 Actor cập nhật trạng thái hóa đơn

4 Hệ thống thực thi lựa chọn

5 Hệ thống thể hiện thông báo thành công

3.4 Actor điền đầy đủ thông tin

3.4.7 Đặc tả Usecase – Tìm kiếm khách hàng