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

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

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

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 Đạihọc Công nghệ Thông tin – ĐHQG TP.HCM, chúng em đã được trang bị những kiếnthứ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ăngkhi 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 quantâ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 ơntấ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ànthà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ệnhơn

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

MỤC LỤCNHẬN XÉT ĐỒ ÁN 1

(Của cán bộ giảng viên)

1.5 Phương pháp nghiên cứu

1.6 Khảo sát nhu cầu người dùng bằng form

1.7 Khảo sát, đánh giá các website cạnh tranh

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

2.1.2 Ưu điểm

2.1.3 Nhược điểm

2.2 Giới thiệu về MongoDB

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

3.3 Mô tả chi tiết hệ thống

CHƯƠNG 4 THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG

4.1 Tổng quan sơ đồ Use-case

4.4.18 Manage Category Product

4.4.19 Manage Coupon Code

4.5.12 Manage Category Product

4.5.13 Mange Coupon Code

4.5.14 Manage Order

4.6 Thiết kế cơ sở dữ liệu

4.6.1 Sơ đồ logic

4.6.2 Danh sách các quan hệ

4.6.2.1 Bảng users: Thông tin tài khoản

4.6.2.2 Bảng products: Sản phẩm

4.6.2.3 Bảng type Products: Loại sản phẩm

4.6.2.4 Bảng questions: Câu hỏi

4.6.2.5 Bảng coupons: Mã giảm giá

4.6.2.6 Bảng comments: Nhận xét và đánh giá

4.6.2.7 Bảng invoices: Đơn hàng

4.7 Thiết kế giao diện người dùng

4.7.1 Giao diện cho User

4.7.2 Giao diện cho Admin

4.7.3.8 Màn hình Thông tin tài khoản

4.7.3.9 Màn hình Thông tin Liên hệ

4.7.3.16 Màn hình Quản lý Mã giảm giá

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

5.1 Thành quả đạt được

5.2 Ưu và nhược điểm

5.3 Hướng phát triển đồ án

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ộttrong 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ậnnhữ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ànhmộ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 doanhnghiệ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ểncá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ềulợ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ầuriê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ý xongkhô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ệuquả 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ànggiú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ảohiể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 haykhô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, Feedbacksau 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ý thông tin khách hàng Quản lý

Chức năng Thêm sản phẩm vào giỏ hàng Khách hàngChức năng Nhận hỗ trợ tư vấn thông qua chatbot Khách hàng

Chức năng Feedback sau khi mua sản phẩm Khách hàng

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 ítthay đổ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ệuthay đổ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

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 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 đờilấ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

http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/

● 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 hoàn toà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 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, khiinsert, 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ácbả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ệncreate, read, update, delete dữ liệu (CRUD)

● 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 webmộ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 RyanDahl 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 webthờ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ùngvớ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.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

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âydự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ăngcho 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 ứngdụng di động, trang web hoặc ứng dụng tin nhắn khác, giúp cung cấp trải nghiệmtươ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ủaKommunicate bao gồm:

1 Tích hợp chatbot: Kommunicate cho phép bạn xây dựng và tích hợp chatbotvà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ấpthô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ệnmạ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à ứngdụng khác nhau như iOS, Android, web, Facebook Messenger, Slack, v.v Điều nàygiú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ảngkhác nhau

4 Hỗ trợ nhiều ngôn ngữ: Kommunicate hỗ trợ đa ngôn ngữ, cho phép bạntươ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 ưuhó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ệnngườ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ớithươ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ệnchatbot thông qua việc định nghĩa các intent và entity, sau đó tích hợp chatbot vàoKommunicate để 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ỐNG3.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

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

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

theo tên sản phẩm

xếp theo giá và các loại sản phẩm

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

Description Sử dụng email, mật khẩu để đăng nhập vào hệ thống

Trigger User nhấn vào nút “Login”

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

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

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khá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

Description User nhập các thông tin cơ bản để đăng ký tài khoản

Trigger User nhấn vào nút “Create Account”

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

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

Basic flow Người dùng bấm biểu tượng tài khoản trên Header

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

Alternative flow Không

Exception flow Thêm phần xác minh email và số điện thoại đăng ký

4.4.3 Logout

Use-case name Logout

Description User đăng xuất khỏi tài khoản hiện tại

Trigger User nhấn vào nút “Log out”

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

Đã đă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.

Basic flow Người dùng bấm biểu tượng tài khoản trên Header

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”

Alternative flow Không

Exception flow Không

4.4.4 View Product List

Use-case name View Product List

Description User xem danh sách sản phẩm

Trigger User nhấn vào trang “Product”

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

Đã đă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.

Basic flow 1 Người dùng bấm biểu tượng tài khoản trên Header

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”

Alternative flow Không

Exception flow Không

4.4.5 Search Product

Use-case name Search Product

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

Trigger User nhấn vào icon “search”

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

Đã đă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.

Basic flow 1 Người dùng bấm biểu tượng tài khoản trên Header

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

Alternative flow Không

Exception flow Không

4.4.6 Filter Product

Use-case name Filter Product

Description User có thể xem các sản phẩm của cửa hàng theo từng loại

sản phẩm

Trigger User nhấn chọn loại sản phẩm cần loc

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

Đã đă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.

Basic flow 1 Người dùng chọn phần Danh mụ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

Alternative flow Không

Exception flow Không

4.4.7 Detail Product

Use-case name Detail Product

Description User có thể xem thông tin cho tiết của sản phẩm

Trigger User nhấn chọn thẻ sản phẩm

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

Đã đă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.

Basic flow 1 Người dùng chọn phần Danh mụ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 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

Alternative flow Không

Exception flow Không