Đồ án ứng dụng chatbot hỗ trợ tư vấn lựa chọn bất động sản

Để đáp ứng những nhu cầu đó, nhóm em quyết định chọn đề tài này, phát triển một ứng dụng cung cấp nhanh chóng thông tin về phía trung tâm và tích hợp chatbot hỗ trợ tự động tư vấn bất độ

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

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

BUIDING CHATBOT APPLICATION

TO SUPPORT CONSULTING REAL ESTATE SELECTION

GIẢNG VIÊN HƯỚNG DẪN Thạc sĩ: Trần Anh Dũng

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

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày 15 tháng 6 năm 2022

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Xây dựng ứng dụng Chatbot hỗ trợ tư vấn lựa chọn bất động sản

TÊN ĐỀ TÀI (TIẾNG ANH): Building Chatbot application to support consulting

estate selection

Cán bộ hướng dẫn: ThS Trần Anh Dũng

Thời gian thực hiện: Từ ngày 7/3/2022 đến ngày 18/06/2022

Sinh viên thực hiện:

Nguyễn Quang Gia Bảo – 19521251

Tình trạng hiện nay:

+ Một số chatbot trả lời bằng cách spam tin nhắn gây lost focus người dùng

+ Một số chatbot khác lại lựa chọn trả lời toàn bộ nội dung về một chủ đề, trong khi thực tế người dùng không cần nhiều thông tin đến thế

+ Chưa có hoặc rất ít công cụ hỗ trợ mô tả trực quan sinh động + Khó khăn hoặc mất thời gian trong việc tìm kiếm thông cần thiết + Mất tập trung vì các lý do khác

Chính vì vậy việc tìm kiếm mua bán, thuê bất động sản, là một việc hết sức cần thiết để người bán/cho thuê / mua được thuận lợi Để đáp ứng những nhu cầu đó, nhóm

em quyết định chọn đề tài này, phát triển một ứng dụng cung cấp nhanh chóng thông tin

về phía trung tâm và tích hợp chatbot hỗ trợ tự động tư vấn bất động sản

2 Mục tiêu: bao gồm 2 mục tiêu chính:

• Xây dựng chatbot:

+ FAQ giải đáp nhanh các thắc mắc chung, giảm tối đa thời gian tiêu tốn cần thiết cho việc tìm kiếm không cần thiết

+ Cung cấp thông tin bất động sản theo khu vực

+ Tư vấn phong thủy đơn giản

+ Tìm hiểu về các tin tức mới liên quan đến bất động sản

+ Áp dụng xử lý ngôn ngữ tự nhiên để giao tiếp

• Xây dựng trang web hỗ trợ chatbot: dành cho những tương tác bị giới hạn bởi API chatbot Ví dụ như:

+ Tìm kiếm thông tin khu đất mong muốn theo các tiêu chí của bản thân

+ Đăng nhập, tạo tài khoản để lưu bài viết ưu thích

+ Đăng bài viết liên quan đến bất động sản

+ Xem các bài đăng bất động sản

+ Xem các khu bất động sản mới được hệ thống gợi ý

+ Xem phong thuỷ khu đất theo năm sinh,…

+ Có phần admin để hỗ trợ quản lí tài khoản người dung, tạo tin tức, quản lí danh mục các bài viết, …

3 Phạm vi:

Phạm vi môi trường: Web

Phạm vi chức năng:

• Đối với chatbot:

+ Có khả năng cung cấp dữ liệu về bất động sản dựa trên một số yêu cầu của người dùng

+ Cung cấp những tin tức mới nhất cho người dùng

+ Cung có cho người dùng một số tiện ích liên quan đến các vấn đề phong thủy, tâm linh

+ Chatbot hiểu được tương đối ngôn ngữ tự nhiên

• Đối với ứng dụng Web:

+ Hiển thị các khu đất theo dạng danh sách, gom nhóm các bất động sản cho người dùng tiện theo dõi, tìm kiếm

+ Cung cấp chức năng tìm tiếm, phân loại theo yêu cầu người dùng

+ Giúp người dùng đăng nhập, quản lí thông tin cá nhân, các bài viết yêu thích, cung cấp tính năng đăng bài để người dùng trao đổi thông tin

+ Giúp cho người quản lí quản lí các bài đăng, quản lí số lượng người đăng nhập sử dụng trang web

+ Phát triển thêm web quản trị viên và một số tính năng liên quan

+ Gợi ý các bài viết dựa thời gian đăng bài, dựa trên khu vực, gợi ý các tin tức mới

do quản trị viên cung cấp

+ Tư vấn phong thuỷ dựa trên thông tin người dùng cung cấp

4 Đối tượng sử dụng:

+ Mua bán bất động sản không chuyên

+ Dành cho học sinh, sinh viên, người lào động có dự định thuê nhà

5 Phương pháp thực hiện:

Phương pháp làm việc:

+ Làm việc nhóm 2 thành viên thông qua cả 2 phương thức online dưới sự hướng dẫn của giảng viên hướng dẫn

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

+ Phân tích nhu cầu sử dụng của đối tượng người dùng

+ Nghiên cứu tài liệu các công nghệ liên quan

Phương pháp công nghệ:

+ Tìm hiểu cách thức xây dựng Dialogflow Chatbot

+ Xây dựng RESTful API để thao tác với dữ liệu

+ Xây dựng giao diện Web để tương tác với người dùng

+ Tìm hiểu bài toán xử lí ngôn ngữ tự nhiên

6 Nền tảng công nghệ:

+ Frontend: Reactjs

+ Backend: NodeJS

+ Database: MongoDB

+ Dialogflow CX

+ Facebook Messenger

+ IDE: Visual Studio Code

7 Kết quả mong đợi:

+ Chatbot có khả năng phản hồi nhanh và chính xác ở mức cao

+ Trang web có khả năng scale và hoạt động tốt khi số lượng người dùng tăng

8 Hướng phát triển của đề tài:

- Tối ưu hóa khả năng SEO

- Thêm tính năng năng giám sát nội dung kết hợp giữa người và AI

- Thêm dashboard thống kê, phân tích nhiều dữ liệu hơn cho người dùng

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

Thời gian thực hiện từ ngày 7/3/2022 đến ngày 15/06/2022

Nhóm chia thành 2 giai đoạn cụ thể:

Giai đoạn 1: Hoàn thiện các chức năng cơ bản Giai đoạn này gồm 2 sprint:

Thời gian: 7/3/2022 – 15/06/2022

Sprint 1: Tìm hiểu công nghệ

Sprint 2: Phân tích yêu cầu và chức năng, điều chỉnh hoàn thiện CSDL, RESTful API, wireframe giao diện

Sprint 3: Xây dựng và phát triển ứng dụng để thực hiện các chức năng

Sprint Thời gian Công việc

Sprint 1 7/3/2022– 18/3

/2022

- Lựa chọn đề tài

- Tìm hiểu công nghệ

- Khảo sát các ứng dụng liên quan & nhu cầu người sử dụng

- Phân tích yêu cầu và chức năng (conceptual)

- Viết tài liệu đặc tả (conceptual) Sprint 2 19/3/2022– 9/4

/2022

- Xây dựng module, chỉnh sửa CSDL

- Chỉnh sửa DialogFlow Chatbot

- Xây dựng Backend Server

- Tìm và fix lỗi

Sprint 3 9/4/2022 – 30/

4/2022

- Chỉnh sửa và hoàn thiện thêm các tính năng của chatbot

- Wireframe giao diện

- Xây dựng giao diện Web

- Triển khai lần 1

- Tìm và fix lỗi

Giai đoạn 2: Hoàn thiện các chức năng trong giai đoạn 1, đồng thời xây dựng các chức

nâng cao như xây dựng tìm kiếm, phân loại khu đất trên web

Giai đoạn này gồm 3 sprint:

Sprint 4: Hoàn thiện các chức năng ở giai đoạn 1, kết nối với dialogflow

Sprint 5: Xây dựng các chức năng mở rộng

Sprint 6: Triển khai và viết báo cáo

Sprint Thời gian Công việc

Sprint 4 1/5/2022–

15/5/2022

- Hoàn thiện các chức năng đã có ở giai đoạn 1

- Tạo webhook và kết nối với dialogflow

- Kết nối chatbot với facebook messengerSprint 5 16/5/2022-

29/05/2022

- Hoàn thiện phần trang web cho người dung có tài khoản và người quản lí

- Thêm tính năng tin tức

- Hoàn thiện xử lý ngôn ngữ tự nhiênSprint 6 30/5/2022

– 18/6/2022

- Kiểm tra lỗi

- Triển khai sản phẩm

- Viết báo cáo

9 Phân công công việc

Công việc

Công việc

chung

- Phân tích yêu cầu, chức năng

- Xây dựng CSDL, RESTful API

- Wireframe giao diện

- Tìm hiểu Xử lí Ngôn Ngữ Tự Nhiên Nguyễn Quang Gia Bảo Hồ Trung Nhân Công việc cá

nhân

- Xây dựng Dialogflow Chatbot - Backend: CSDL, RESTful API

- Frontend: giao diện người dùng

- Xử lý ngôn ngữ tự nhiên

Xác nhận của CBHD

(Ký tên và ghi rõ họ tên)

TP.HCM,ngày 15 tháng 6 năm 2022

MỤC LỤC

TÓM TẮT ĐỒ ÁN 1

GIỚI THIỆU CHUNG 2

Lý do chọn đề tài 2

Tính năng mới/ khác biệt 2

Đối tượng nghiên cứu 2

Phạm vi nghiên cứu 3

Phương pháp thực hiện 4

KIẾN THỨC NỀN TẢNG 5

Tổng quan về kiến trúc mô hình 5

Khái niệm 5

Cấu trúc mô hình MVC 5

Mô hình MVC trong ứng dụng Web 6

MERN Stack 7

Giới thiệu 7

Tổng quan về Nodejs [1] 8

Giới thiệu 8

Những ứng dụng nên viết bằng Nodejs 8

Lý do sử dụng 9

ExpressJS 9

Giới thiệu 10

Lợi ích 10

Hệ quản trị cơ sở dữ liệu MongoDB [2, 3, 4] 11

Giới thiệu 11

Ưu điểm của MongoDB 12

ReactJS 13

Giới thiệu 13

Ưu điểm 13

React Hook 13

TÌM HIỂU VÀ LỰA CHỌN CÔNG NGHỆ ỨNG DỤNG CHATBOT 15

Tìm hiểu về chatbot 15

Chatbot là gì? 15

Tính ứng dụng 15

Tìm hiểu về Facebook Messenger Chatbot 16

Tổng quan 16

Đánh giá 17

Giới thiệu về Chatbot Messenger 17

Cách hoạt động 18

DialogFlow CX 18

Một số khái niệm cơ bản 18

Áp dụng công nghệ vào chatbot 19

Facebook Api 19

Facebook Graph Api 19

XÂY DỰNG HỆ THỐNG 21

Xây dựng kiến trúc hệ thống 21

Kiến trúc hệ thống Website 21

Kiến trúc hệ thống ChatBot 21

Phân tích thiết kế hệ thống 23

Sơ đồ use case 23

Sơ đồ dữ liệu 42

Thiết kế giao diện trang web 43

Sơ đồ thiết kế giao diện trang web 43

Mô tả chi tiết giao diện trang web 44

Thiết kế giao diện chat bot 57

Sơ đồ kịch bản Chatbot 58

Kết quả đạt được 60

KẾT LUẬN, HƯỚNG PHÁT TRIỂN 61

Ưu điểm 61

Nhược điểm 61

Kết quả đạt được 61

Về mặt nghiên cứu: 61

Về mặt sản phẩm: 61

Hướng phát triển 62

TÀI LIỆU THAM KHẢO 63

DANH MỤC HÌNH ẢNH

Hình 2.1.1-1 Mô hình MVC 5

Hình 2.1.3-1 Mô hình MVC trong lập trình Web 6

Hình 2.2.1-1 Thành phần của MERN Stack 7

Hình 2.3.1-1 Kiến trúc của NodeJS 8

Hình 2.3.3-1 ExpressJS 9

Hình 2.5.1-1 So sánh mức độ phổ biến của MongoDB 11

Hình 2.7.1-1 ReactJS 13

Hình 2.7.3-1 React Hook Flow Diagram 14

Hình 3.1.1-1 Cách thức hoạt động của chatbot 15

Hình 3.2.1-1 Lượng người sử dụng Facebook Messenger theo thời gian 16

Hình 3.2.3-1 Chatbot Facebook Messenger 17

Hình 3.2.4-1 Cách hoạt động của Chatbot liên kết với Messenger 18

Hình 3.3.2.1-1 - Graph API 19

Hình 3.3.2.2-2 – Facebopk API 20

Hình 4.1.1-1 Kiến trúc hệ thống của website 21

Hình 4.2.1-1 Sơ Đồ Use Case 23

Hình 4.2.1-2 Sơ đồ module 41

Hình 4.2.3-1 Sơ đồ dữ liệu 42

Hình 4.3.1-1 Sơ đồ màn hình giao diện 43

Hình 4.3.2-1 Trang chủ web 44

Hình 4.3.2-2 Popup Đăng nhập 44

Hình 4.3.2-3 Popup Đăng ký 45

Hình 4.3.2-4 Giao diện Quên mật khẩu 45

Hình 4.3.2-5 Giao diện bóng bóng chat (Trang chủ sau khi bật bong bóng chat) 46

Hình 4.3.2-6 Trang hiển thị danh sách các post 47

Hình 4.3.2-7 Trang hiển thị danh sách các post 48

Hình 4.3.2-8 Trang tìm kiếm phong thủy hướng nhà 49

Hình 4.3.2-9 Trang tìm kiếm phong thủy cải tạo nhà 49

Hình 4.3.2-10 Trang danh sách tin tức 50

Hình 4.3.2-11 Trang chi tiết tin tức 50

Hình 4.3.2-12 Trang thông tin giới thiệu 51

Hình 4.3.2-13 Trang quản lí bài đăng yêu thích trên header 52

Hình 4.3.2-14 Trang quản lí bài đăng yêu thích 52

Hình 4.3.2-15 Trang cập nhật thông tin 53

Hình 4.3.2-16 Trang đổi mật khẩu 53

Hình 4.3.2-17 Trang quản lí bài đăng của admin 54

Hình 4.3.2-18 Trang quản lí tài khoản 54

Hình 4.3.2-19 Trang quản lí tin tức 55

Hình 4.3.2-20 Trang thêm tin tức 55

Hình 4.3.2-21 Trang quản lí thông tin giới thiệu 56

Hình 4.3.3-1 Giao diện chatbot 57

Hình 4.3.4-1 Kịch bản cơ bản của Chatbot 58

Hình 4.3.4-2 Tìm kiếm bất động sản 58

Hình 4.3.4-3 Tư vấn phong thuỷ 59

Hình 4.3.4-4 Gợi ý tin tức mới nhất 59

DANH MỤC BẢNG

Bảng 4.2.1-1 Danh sách actors 24

Bảng 4.2.1-2 Use case Đăng nhập 25

Bảng 4.2.1-3 Use case Đăng ký 27

Bảng 4.2.1-4 Use case Quên mật khẩu 28

Bảng 4.2.1-5 Use case Xem bài viết bất động sản 28

Bảng 4.2.1-6 Use case Tìm kiếm bài đăng bất động sản 29

Bảng 4.2.1-7 Use case Gợi ý bất động sản theo yêu cầu 30

Bảng 4.2.1-8 Use case Tìm kiếm phong thủy, hướng nhà 30

Bảng 4.2.1-9 Use case Gợi ý tin tức mới nhất 31

Bảng 4.2.1-10 Use case Xem tin tức 31

Bảng 4.2.1-11 Use case Đăng bài bất động sản 32

Bảng 4.2.1-12 Use case Thêm vào yêu thích 33

Bảng 4.2.1-13 Use case Quản lí tin đăng yêu thích 34

Bảng 4.2.1-14 Use case Quản lí danh sách bài đăng 34

Bảng 4.2.1-15 Use case Xóa bài đăng 35

Bảng 4.2.1-16 Use case Cập nhật thông tin cá nhân 36

Bảng 4.2.1-17 Use case Đổi mật khẩu 36

Bảng 4.2.1-18 Use case Xem danh sách tài khoản 37

Bảng 4.2.1-19 Use case Xóa tài khoản 37

Bảng 4.2.1-20 Use case Thay đổi phân quyền 38

Bảng 4.2.1-21 Use case Xem thông tin giới thiệu 39

Bảng 4.2.1-22 Use case Đăng tin tức 39

Bảng 4.2.1-23 Use case Xóa tin tức 40

Bảng 4.2.1-24 Use case Xem thông tin giới thiệu 40 Bảng 4.2.1-25 Use case Cập nhật thông tin giới thiệu 41

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

Từ viết tắt Từ đầy đủ Giải thích

API Application Programming

Interface

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

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

Framework Các đoạn code đã được viết sẵn, cấu thành

nên một bộ khung và các thư viện lập trình được đóng gói Cung cấp các tính năng có sẵn như mô hình, API và các yếu tố khác để tối giản cho việc phát triển các ứng dụng web

HTTP HyperText Transfer

Protocol

Giao thức truyền siêu văn bản

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

SEO Search engine optimization một quy trình nâng cao thứ hạng của website

trên các công cụ tìm kiếm giúp người dùng

có thể tìm thấy trang web dễ dàng hơn trên bảng kết quả tìm kiếm

UI User interface Nghĩa là giao diện người dùng Hiểu một

cách đơn giản nhất thì UI bao gồm tất cả những gì người dùng có thể nhìn thấy như: màu sắc web, bố cục sắp xếp như thế nào, web/app sử dụng fonts chữ gì, hình ảnh trên web có hấp dẫn hay không,

Bot Internet bot Chương trình máy tính được tạo ra cho mục

đích kĩ thuật như mô phỏng hoạt động người dùng Bots thường được sử dụng để chạy tự động các task nhất định, nghĩa là không cần chỉ thị của người dùng mà hoàn toàn tự động

TÓM TẮT ĐỒ ÁN

Đồ án “Xây dựng ứng dụng Chatbot hỗ trợ tư vấn bất động sản” gồm 06 chương:

Chương 1: Giới thiệu về đề tài, đưa ra các điểm nổi bật so với các ứng dụng trước Tiếp

đến là đề xuất các giải pháp để giải quyết các vấn đề đã đặt ra Ngoài ra, chương 1 cũng đề cập đến đối tượng nghiên cứu, phạm vi đề tài, phương pháp nghiên cứu

Chương 2: Trình bày các kiến thức nền tảng liên quan đến ứng dụng

Chương 3: Trình bày chi tiết kiến thức, áp dụng thuật toán và công nghệ liên quan đến

Chatbot Facebook

Chương 4: Trình bày chi tiết quy trình xây dựng hệ thống, từ xác định và phân tích yêu

cầu bài toán cho đến xây dựng CSDL, cuối cùng là xây dựng giao diện cho ứng dụng

Chương 5: Kết luận, rút ra được các ưu nhược điểm của ứng dụng và hướng phát triển

trong tương lai

GIỚI THIỆU CHUNG

Lý do chọn đề tài

Bất Động Sản chưa bao giờ ngành hết “hot” trên thị trường Thế Giới nói chung và Việt Nam nói riêng Bất Động Sản luôn là điểm đến thu hút rất nhiều nhà đầu tư với mong muốn làm giàu Ngành đầu tư Bất Động Sản là nơi sản sinh ra nhiều tỷ phú nhất, đây là ngành giúp bạn nhanh chóng kiếm được số tiền khổng lồ nếu bạn có chiến lược tốt Vì thế ngành Bất động Sản luôn là ngành thu hút được nhiều nhân tài tham gia Với người bán, Bất động sản hiện đang được nhiều người săn đón, đây là một công cụ kiếm tiền một hiệu quả, bị động mà bạn không cần phải bỏ nhiều công sức

Tính năng mới/ khác biệt

Sau khi tham khảo một số chatbot hỗ trợ bất động sản hiện nay nhóm nhận thấy các vấn đề sau:

− Một số chatbot trả lời bằng cách spam tin nhắn gây lost focus người dùng

− Một số chatbot khác lại lựa chọn trả lời toàn bộ nội dung về một chủ đề, trong khi thực tế người dùng không cần nhiều thông tin đến thế

− Chưa có hoặc rất ít công cụ hỗ trợ mô tả trực quan sinh động

− Khó khăn hoặc mất thời gian trong việc tìm kiếm thông cần thiết

− Mất tập trung vì các lý do khác

Chính vì vậy việc tìm kiếm mua bán, thuê bất động sản, là một việc hết sức cần thiết để người bán/cho thuê / mua được thuận lợi Để đáp ứng những nhu cầu đó, nhóm em quyết định chọn đề tài này, phát triển một ứng dụng cung cấp nhanh chóng thông tin về phía trung tâm và tích hợp chatbot hỗ trợ tự động tư vấn bất động sản

Về phần giao diện: Nhóm quyết định sử dụng tương tác chat từ người dùng là chủ yếu, lấy hiểu ý nghĩa câu nói làm gốc thay vi làm hệ thống button menu chọn phức tạp

Về phần chức năng:

− Xây dựng tính năng chatbot

− Thêm tính nag8 gới ý tin tức mới

− Thêm chức năng gợi ý phong thuỷ

Đối tượng nghiên cứu

Khoá luận này hướng đến nghiên cứu các đối tượng sau:

+ IDE: Visual Studio Code

− Đối tượng trong phạm vị đề tài hướng đến:

+ Mua bán bất động sản không chuyên

+ Dành cho học sinh, sinh viên, người lào động có dự định thuê nhà

Phạm vi nghiên cứu

Phạm vi môi trường: Web

Phạm vi chức năng:

• Đối với chatbot:

+ Có khả năng cung cấp dữ liệu về bất động sản dựa trên một số yêu cầu của người dùng

+ Cung cấp những tin tức mới nhất cho người dùng

+ Cung có cho người dùng một số tiện ích liên quan đến các vấn đề phong thủy, tâm linh

+ Chatbot hiểu được tương đối ngôn ngữ tự nhiên

• Đối với ứng dụng Web:

+ Hiển thị các khu đất theo dạng danh sách, gom nhóm các bất động sản cho người dùng tiện theo dõi, tìm kiếm

+ Cung cấp chức năng tìm tiếm, phân loại theo yêu cầu người dùng

+ Giúp người dùng đăng nhập, quản lí thông tin cá nhân, các bài viết yêu thích, cung cấp tính năng đăng bài để người dùng trao đổi thông tin + Giúp cho người quản lí quản lí các bài đăng, quản lí số lượng người đăng nhập sử dụng trang web

+ Phát triển thêm web quản trị viên và một số tính năng liên quan

+ Gợi ý các bài viết dựa thời gian đăng bài, dựa trên khu vực, gợi ý các tin tức mới do quản trị viên cung cấp

+ Tư vấn phong thuỷ dựa trên thông tin người dùng cung cấp

Phương pháp thực hiện

Phương pháp làm việc:

− Làm việc nhóm 2 thành viên thông qua cả 2 phương thức online dưới sự hướng dẫn của giảng viên hướng dẫn

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

− Phân tích nhu cầu sử dụng của đối tượng người dùng

− Nghiên cứu tài liệu các công nghệ liên quan

Phương pháp công nghệ:

− Tìm hiểu cách thức xây dựng Messenger Chatbot

− Xây dựng RESTful API để thao tác với dữ liệu

− Xây dựng giao diện Web để tương tác với người dùng

− Tìm hiểu bài toán xử lí ngôn ngữ tự nhiên

Tầng logic dữ liệu – Model

Tầng Model là trung gian giữa ứng dụng và hệ quản trị cơ sở dữ liệu để cung cấp

và quản lí mô hình và các thao tác lên dữ liệu Thông thường, tầng Model sẽ kết nối với một hoặc nhiều cơ sở dữ liệu để thực hiện các thao tác lên dữ liệu

Tầng giao diện – View

Thể hiện giao diện người dùng, là thành phần giao tiếp giữa người dùng (user) và ứng dụng (application)

Mô hình MVC trong ứng dụng Web

Với sự phát triển của các công nghệ xây dựng web ở cả Frontend và Backend, các nhà phát triển có thể xây dựng và phát triển ứng dụng web một cách độc lập nhưng vẫn đảm bảo được tính kiến trúc của ứng dụng

− Tầng giao diện người dùng (View) sẽ được phát triển độc lập ở phía client sử dụng

các công nghệ Frontend như VueJS, ReactJS, … Nói cách khác, client sẽ được chạy trên 1 server độc lập và có thể tương tác với phía server của backend

Hình 2.1.3-1 Mô hình MVC trong lập trình Web

− Tầng xử lí (Controller) và logic dữ liệu (Model) sẽ được phát triển độc lập ở phía

server sử dụng các công nghệ Backend như ExpressJS, DotNetCore, Flank, …

− Sau khi hoàn thành việc phát triển, client sẽ cung cấp 1 bản build hoàn chỉnh để thêm vào phía Server Người dùng sẽ yêu cầu thành phần giao diện thông qua request gửi đến Server

MERN Stack

Giới thiệu

Hình 2.2.1-1 Thành phần của MERN Stack MERN Stack bao gồm MongoDB, Express, React và Node.js Kết hợp các công nghệ này, người ta có thể xây dựng một ứng dụng web đầy đủ với các hoạt động CRUD Mọi người chắc hẳn đã nghe nói về MERN Stack, về cơ bản là một JavaScript Stack để triển khai phát triển web full-stack và chứa 4 công nghệ, đó là: MongoDB, Express, React và Node.js

Tổng quan về Nodejs [1]

Giới thiệu

Hình 2.3.1-1 Kiến trúc của NodeJS

NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine

Nó được xây dựng để chạy trên server

Javascript là một ngôn ngữ hướng sự kiện, do đó bất cứ điều gì xảy ra trên server đều tạo ra một sự kiện non-blocking, do vậy nên 1 website sử dụng NodeJS có thể đáp ứng được việc truy cập cùng lúc một lượng user cực kì lớn

Vậy NodeJS thích hợp để làm gì Với các đặc trưng của mình thì NodeJS thích hợp

để xây dựng các ứng dụng thời gian thực, ví dụ như hệ thống chat online hoặc hệ thông thông báo…

Và cũng như nhiều ngôn ngữ chạy phía server khác, NodeJS cũng bắt đầu có một cộng đồng phát triển rất lớn, nhiều framework sử dụng core NodeJS ra đời, một trong số các framework phổ biến nhất hiện nay là Express Chúng ta sẽ cùng tìm hiểu về framework này phía dưới đây

Những ứng dụng nên viết bằng Nodejs

Rõ ràng, không phải cứ hot và mới là Nodejs làm gì cũng tốt, ví dụ như một ứng dụng cần tính ổn định cao, logic phức tạp thì các ngôn ngữ PHP hay Ruby… vẫn là sự lựa chọn tốt hơn Còn dưới đây là những ứng dụng có thể và nên viết bằng Nodejs:

• Websocket server: Các máy chủ web socket như là Online Chat, Game Server…

• Fast File Upload Client: là các chương trình upload file tốc độ cao

• Ad Server: Các máy chủ quảng cáo

• Cloud Services: Các dịch vụ đám mây

• RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API

• Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực

• Micro Services: Ý tưởng của micro services là chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau Nodejs có thể làm tốt điều này

Lý do sử dụng

• Các ứng dụng Nodejs được viết bằng javascript, ngôn ngữ này là một ngôn ngữ khá thông dụng Theo tác giả của ngôn ngữ Javascript, Brendan Eich: “Javascript có những đặc tính mà làm cho nó rất khác biệt so với các ngôn ngữ lập trình động còn lại, cụ thể là nó không có khái niệm về đa luồng, tất cả là đơn luồng và hướng sự kiện.“

• Nodejs chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện

Event-driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả

• Có thể chạy ứng dụng Nodejs ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng Nodejs rất lớn và hoàn toàn miễn phí Các bạn có thể thấy cộng đồng Nodejs lớn như thế nào tại đây, các package đều hoàn toàn free:

• Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị

ExpressJS

Hình 2.3.3-1 ExpressJS

• Express hỗ trợ việc phát triển ứng dụng theo mô hình MVC, mô hình phổ biến cho việc lập trình web hiện nay

• Cho phép định nghĩa Middleware hỗ trợ cho việc tổ chức và tái sử dụng code

• Định nghĩa routes và các request method đến server một cách dễ dàng

• Hỗ trợ REST API

• Và còn rất nhiều thứ mà framework này hỗ trợ, còn bây giờ hãy thử cài đặt và xây dựng một ứng dụng đơn giản nhé

Hệ quản trị cơ sở dữ liệu MongoDB [2, 3, 4]

Giới thiệu

Hình 2.5.1-1 So sánh mức độ phổ biến của MongoDB

Hệ quản trị cơ sở dữ liệu MongoDB là một mã nguồn mở NoSQL Thay vì sử dụng các bảng và hàng như trong các cơ sở dữ liệu truyển thống, MongoDB sử dụng

collection và document

Đặc điểm của MongoDB:

− Khác với SQL, MongoDB không cần định nghĩa sẵn các schema, các

trường có thể được thêm vào trực tiếp

− Document:

+ Mỗi document sẽ có dạng là các cặp key-value (tương tự như JSON) Các document có thể có các key-value, kích thước, và nội dung khác nhau (Không cố định như SQL)

+ Mỗi trường có thể lưu trữ nhiều loại kiểu dữ liệu từ đơn giản (như number, string) đến phức tạp (Object, Array, …)

− Collection: Mỗi collection sẽ chứa nhiều Document và các phương thức hỗ

trợ thao tác lên dữ liệu

Ưu điểm của MongoDB

− MongoDB lưu trữ dữ liệu dễ dàng, linh hoạt và dễ dàng mở rộng vì dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau

− MongoDB có tốc độ truy vấn nhanh hơn so với các cơ sở dữ liệu quan hệ

− MongoDB có khả năng mở rộng tốt thông qua các cluster

ReactJS

Giới thiệu

Hình 2.6.1-1 ReactJS React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI)

Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới

để render trang web

Components của công cụ này được phát triển bởi Facebook Nó được ra mắt như một công cụ JavaScript mã nguồn mở vào năm 2013 Hiện tại, nó đã đi trước các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán chạy nhất thời bấy giờ

Ưu điểm

• Dễ sử dụng

• Hỗ trợ Reusable Component

• Viết component dễ dàng hơn với jsx( bên trong bao gồm html,js,css)

• Thân thiện với seo

• useSelector

• useDispatch

Hình 2.6.3-1 React Hook Flow Diagram

TÌM HIỂU VÀ LỰA CHỌN CÔNG NGHỆ ỨNG DỤNG CHATBOT

Tìm hiểu về chatbot

Chatbot là gì?

Chatbot là một phần mềm có thể giả lập một cuộc hội thoại hoặc trò chuyện với người dùng bằng ngôn ngữ tự nhiên hoặc các nội dung được lập trình sẵn thông qua ứng dụng, website, ứng dụng mobile hoặc thông qua điện thoại Chúng hợp lý hóa các tương tác giữa con người và dịch vụ, nâng cao trải nghiệm của khách hàng Đồng thời, chúng cung cấp cho các công ty hoặc cửa hàng cơ hội mới để cải thiện quy trình tham gia của khách hàng và hiệu quả hoạt động bằng cách giảm chi phí dịch vụ khách hàng

Cách thức một chatbot hoạt động:

Hình 3.1.1-1 Cách thức hoạt động của chatbot Như đã được minh họa trên hình, một chatbot sẽ trả về các phản hồi dựa trên dữ liệu đầu vào của người dùng

Tính ứng dụng

Ứng dụng của chatbot hiện nay khá là phổ biến Hầu hết trong các lĩnh vực về kinh doanh, các website hầu hết cũng đã có những chatbot đơn giản hỗ trợ trả lời cho khách hàng những câu hỏi đơn giản Các ứng dụng nhắn tin phổ biến hiện nay như Messenger, Discord, Telegram, … cũng đều cho phép tích hợp chatbot Có thể nói việc đưa chatbot vào ứng dụng nhắn tin cũng là một phần giúp củng cố và nâng cao vị thế của ứng dụng để cạnh tranh với các đối thủ khác

Chatbot rất đa dạng về mục đính sử dụng tùy thuộc vào lĩnh vực như:

− Lĩnh vực báo chí

− Lĩnh vực tài chính

Về số lượng người dùng, theo thống kê ta có bảng đánh giá:

Hình 3.2.1-1 Lượng người sử dụng Facebook Messenger theo thời gian

Sơ đồ cho thấy số lượng người dùng tăng rất nhanh theo thời gian Có thể chatbot còn góp một phần quan trọng trong lĩnh vực truyền thông Vì rất có thể chat bot, trí thông minh nhân tạo trong tương lai, thông qua Messenger có thể cho bạn biết về các thông tin nóng trên mạng xã hội, được nhiều người tìm và chia sẻ tại thời điểm bạn đưa ra câu hỏi

Đánh giá

Sau khi đánh giá các nền tảng có thể phát triển Chatbot, chúng tôi lựa chọn Messenger làm nền tảng chủ yếu vì các lý do sau:

− Lượng người dùng khổng lồ

− Khả năng tùy biến cao

− Giao diện hóa văn bản

− Cho phép can thiệp trực tiếp vào quá trình chatbot vận hành

Giới thiệu về Chatbot Messenger

Hình 3.2.3-1 Chatbot Facebook Messenger

Về mặt kỹ thuật, có thể hiểu đơn giản chatbot là một chương trình được lập trình

sẵn tương tác tự động với người dùng bằng ngôn ngữ tự nhiên dưới giao diện tin nhắn

Chatbot Facebook là một phần mở rộng cho chức năng nhắn tin trên trang

Facebook của bạn

Mỗi một chatbot messenger bắt buộc phải liên kết với một trang Facebook đang tồn tại Vì vậy, nếu bất cứ ai đang chat với trang của bạn thì chatbot sẽ đều biết, sau đó đánh giá cuộc trò chuyện của bạn để đưa ra câu trả lời thích hợp

Ở phạm vi Messenger, chatbot là công cụ kết nối vào fanpage của bạn thông qua

thiết lập webhook, chatbot lúc này có thể xem như một (hoặc nhiều) nhân viên, trợ lý ảo

của bạn

Cách hoạt động

Hình 3.2.4-1 Cách hoạt động của Chatbot liên kết với Messenger

Hoạt động của Bot như sau:

1 Khi có người gửi tin nhắn đến fanpage

2 Thông tin tin nhắn sẽ được truyền đến toàn bộ các webhook đã được đăng ký trước

đó Ví dụ như webhook của chatbot

3 Chatbot server gửi xác nhận đã nhận sự kiện Sau đó xử lý tin nhắn và gửi trả lại nếu cần thiết thông qua api của messenger

4 Người dùng nhận lại phản hồi

Facebook sẽ gửi một phương thức POST đến máy chủ Facebook API

Facebook Graph Api

Giới thiệu

Graph ở đây chính là đồ thị Graph sinh ra để miêu tả quan hệ giữa các thực thể

Hình 3.3.2.1-1 - Graph API Facebook coi các mối quan giữa các thực thể như là một "Đồ thị xã hội"

Bạn có thể truy cập vào: https://developers.facebook.com/

Để có thể phát triển ứng dụng bot của mình Đây là một số chức năng có thể áp dụng vào ứng dụng để phát triển

Hình 3.3.2.2-2 – Facebopk API

Web (client): thể hiện giao diện nơi người dùng tương tác với hệ thống Client giao tiếp

với Server thông qua Request/Response để yêu cầu xử lý thông tin và nhận kết quả hiển thị

lên cho người dùng Web (client) được hiện thực hóa sử dụng ReactJS

Server (Nodejs): Nhận và xử lý request từ Client Có thể tương tác với Database để tương

tác dữ liệu và trả kết quả về cho Client thông qua Response Server được hiện thực hóa sử

dụng Nodejs

Database (MongoDB): lưu trữ toàn bộ dữ liệu của hệ thống

Kiến trúc hệ thống ChatBot

Hệ thống bao gồm các thành phần và tương giác giữa chúng như sau:

− Messenger: Người dùng chat trực tiếp với Fanpage qua Facebook Messenger

− Hệ thống xử lý: Xử lý hành vi chat/tương tác của người dùng, để đưa ra các mẫu câu/hành động phù hợp

− Hệ thống xử lý kịch bản: Xử lý hành vi chat/tương tác của người dùng để chọn và

− Đối với các hành động đã được phân tích cần lấy dữ liệu từ database thì hệ thống xử

lý sẽ phân tích dữ liệu từ database và sẽ thông báo có những dữ liệu phù hợp cho người dùng

− Đối với các hành động đã được phân tích cần xử lý phân tích ngôn ngữ tự nhiên thì

hệ thống xử lý thông qua Dialogflow CX Sau đó, dựa vào kết quả Dialogflow CX trả về sẽ chọn kịch bản phù hợp để đưa đến hệ thống xử lý kịch bản và trả về những thông tin cần thiết cho người dùng