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

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

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)

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ể hoà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à hoà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 quá trình làm đồ án Qua những lời góp ý, chỉ bảo của cô mà nhóm có thể hoà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 quá trình nhóm hoàn thành đồ án Trong quá trình học tập và hoà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 quý thầy cô và các bạn để có thể hoàn thiện hơn

Chúng em xin chân thành cảm ơn!

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

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.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 toá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

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ị

Ngoà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ố

- 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 toá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?

- 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 toá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

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

Chức năng Quản lý doanh thu Quản lý

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 toà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 toá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

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 https://jsx.github.io/)

- 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 toá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

● 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 ở ngoà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

● 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 hoà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

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 quá 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)

● 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

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 nguyên 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 quá nhiều Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng mới

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 Ngoà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 quá rõ ràng vì Agent Bot có thể tự học trong quá 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 soá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 quá 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 hoà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

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

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 quá 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ả

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 yê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

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

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

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

hoạt động của ứng dụng và cửa hàng

4.3 Danh sách Use-case

email, mật khẩu để truy cập vào hệ thống

tin chi tiết của sản phẩm

thêm sản phẩm cần mua vào giỏ hàng

sản phẩm có trong giỏ hàng

mã giảm giá được hiển thị

xác nhận các thông tin của đơn hàng

12 View Order User, Admin Sau khi mua hàng,

có thể xem các sản phẩm đã đặt mua

sản phẩm khi đã giao hàng thành công

thống kê sản phẩm theo khoảng thời gian

các mã giảm giá cho đơn hàng

thông tin đơn hàng

mà Khách hàng đã mua

câu hỏi về sản phẩm, Admin có thể phản hồi lại

4.4 Đặc tả Use-case và Sơ đồ Hoạt động

4.4.1 Login

Use-case name

Login

Tài khoản phải đăng ký trước đó

Basic flow

1 Người dùng nhấn vào nút “Login” tài khoản trên thanh Header

2 Hệ thống điều hướng người dùng đến trang Login

3 Người dùng điền đầy đủ thông tin tài khoản

4 Hệ thống thông báo đăng nhập thành công vào website và chuyển hướng người dùng đến màn hình trang chủ

Alternative flow 1 Nếu loại tài khoản là của Khách hàng, hệ thống sẽ chuyển

Login for User

Login for Admin

4.4.2 Sign up for User

Use-case name

Sign up

Pre-condition Hệ thống cần phải kết nối với Internet

2 Hệ thống điều hướng người dùng đến trang Login

3 Người dùng chọn nút nút “Create Account”

4 Người dùng điền đầy đủ các thông tin cần thiết

5 Hệ thống sẽ thông báo người dùng đăng ký thành công và thêm tài khoản vào database

4.4.3 Logout

Use-case name

Logout

Đã đăng nhập vào hệ thống

2 Hệ thống điều hướng người dùng đến trang Login

3 Người dùng chọn nút nút “Log out”

4.4.4 View Product List

Use-case name

View Product List

Đã đăng nhập vào hệ thống

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khác

2 Hệ thống điều hướng người dùng đến trang Login

3 Người dùng nhấn vào trang “Product”

4.4.5 Search Product

Use-case name

Search Product

Description User tìm kiếm sản phẩm theo tên

Đã đăng nhập vào hệ thống

2 Hệ thống điều hướng người dùng đến trang Đăng nhập

3 Người dùng điền đầy đủ thông tin tài khoản

4 Hệ thống thông báo đăng nhập thành công vào website và chuyển hướng người dùng đến màn hình thích hợp

5 Người dùng nhập tên sản phẩm và nhấn tìm kiếm

6 Hệ thống điều hướng người dùng đến trang Danh sách sản phẩm

Đã đăng nhập vào hệ thống

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khác

2 Hệ thống điều hướng người dùng đến trang Danh sách sản phẩm

3 Người dùng chọn loại sản phẩm muốn hiển thị

4 Hệ thống sẽ hiển thị sản phẩm theo loại sản phẩm

2 Hệ thống điều hướng người dùng đến trang Danh sách sản phẩm

3 Người dùng nhấn chọn thẻ sản phẩm

4 Hệ thống sẽ hiển thị thông tin chi tiết sản phẩm

4.4.8 Add to Cart

Use-case name

Add to Cart

Đã đăng nhập vào hệ thống

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khác

2 Hệ thống điều hướng người dùng đến trang Danh sách sản phẩm

3 Người dùng chọn nút thêm vào giỏ hàng

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

5 Người dùng vào phần Giỏ hàng

6 Hệ thống điều hướng người dùng đến trang Giỏ hàng

7 Người dùng chọn dấu “x” để xóa sản phẩm