KHÓA LUẬN tốt NGHIỆP xây DỰNG ỨNG DỤNG CHATBOT hỗ TRỢ môn học OOP

HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM Nguyễn Du Lịch - 17520096 Nguyễn Duy Minh - 17520754 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG CHATBOT HỖ TRỢ MÔN HỌC

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

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

KHOA CÔNG NGHỆ PHẦN MỀM

Nguyễn Du Lịch - 17520096 Nguyễn Duy Minh - 17520754

KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG CHATBOT

HỖ TRỢ MÔN HỌC OOP BUIDING CHATBOT APPLICATION

TO SUPPORT LEARNING OOP

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

TP HỒ CHÍ MINH, 2021

THÔNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ……… ngày ……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin

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 tháng năm 2021

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận:

Xây dựng ứng dụng Chatbot hỗ trợ học môn OOP

Nhóm sinh viên thực hiện: Cán bộ hướng dẫn: NGUYỄN DU

LỊCH 17520096 ThS Trần Anh Dũng NGUYỄN DUY MINH

17520754

Đánh giá Khóa luận:

1 Về cuốn báo cáo:

Số trang Số chương Số bảng số liệu Số hình vẽ Số tài liệu

tham khảo Sản phẩm Một số nhận xét về hình thức cuốn

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 tháng năm 2021

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ PHẢN BIỆN)

Tên khóa luận:

Xây dựng ứng dụng Chatbot hỗ trợ học môn OOP

Nhóm sinh viên thực hiện: Cán bộ phản biện: NGUYỄN DU

LỊCH 17520096 ThS Trần Anh Dũng NGUYỄN DUY MINH

17520754

Đánh giá Khóa luận:

1 Về cuốn báo cáo:

Số trang Số chương Số bảng số liệu Số hình vẽ Số tài liệu

tham khảo Sản phẩm Một số nhận xét về hình thức cuốn

kỹ năng thực tế để có thể hoàn thành Khóa luận tốt nghiệp của mình

Để hoàn thành khóa luận này, chúng em xin gửi lời cảm ơn chân thành đến:

Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM vì đã tạo điềukiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các loại sách, tài liệuthuận lợi cho việc tìm kiếm, nghiên cứu thông tin

Chúng em xin gửi lời cảm ơn chân thành đến thầy Trần Anh Dũng đã tận tình giúp đỡ,định hướng cách tư duy và cách làm việc khoa học Đó là những góp ý hết sức quý báukhông chỉ trong quá trình thực hiện luận văn này mà còn là hành trang tiếp bước chochúng em trong quá trình học tập và lập nghiệp sau này

Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất cả thầy cô trong khoa, bạn

bè, tập thể lớp KTPM2017 là những người luôn sẵn sàng sẻ chia và giúp đỡ trong họctập và cuộc sống Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau

Trong quá trình làm khóa luận này chúng em không tránh khỏi được những sai sót,chúng em kính mong nhận được sự chỉ dẫn và góp ý của quý thầy cô để khóa luận được

hoàn thiện hơn

Chúng em xin chân thành cảm ơn Xin chúc những điều tốt đẹp nhất sẽ luôn đồng hành cùng mọi người

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

Sinh viên

NGUYỄN DU LỊCH NGUYỄN DUY MINH

ĐẠ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… tháng … năm 2021

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Xây dựng ứng dụng Chatbot hỗ trợ học môn OOP TÊN ĐỀ TÀI (TIẾNG ANH): Building Chatbot application to support learning

OOP

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

Thời gian thực hiện: Từ ngày 10/03/2021 đến ngày 30/06/2021

Sinh viên thực hiện:

Nguyễn Du Lịch – 17520096 Nguyễn Duy Minh – 17520754

Nội dung đề tài

1 Lý do chọn đề tài:

OOP là tên viết tắt của Object-oriented programming – Lập tình hướng đối tượng.Đây là một mẫu hình lập trình hết sức quan trọng đối với mọi cá nhân có như cầuhọc lập trình

Tuy nhiên với những ai chưa từng hoặc ít tiếp xúc với lập trình trước đây, OOP vàmột môn khó học với nhiều kiến thức mới cùng khái niệm khó khiến việc học mônOOP trở nên dễ nản

Cùng với đó việc internet hiện nay đã và đang mang lại một sự thay đổi to lớn cho

cả nền kinh tế, khoa học, kỹ thuật trên thế giới Đặc biệt là tình hình hiện nay nhu

1

cầu chia sẻ thông tin với tốc độ nhanh chóng, tiện lợi là nhu cầu gần như tất yếucủa mỗi người Đáp ứng nhu cầu đó, các ứng dụng giao tiếp, mạng xã hội xuất hiệnngày càng nhiều, kéo theo thời lượng sử dụng các ứng dụng này đốt thời gian ngàycàng cao vì nhiều mục đích khác nhau như học tập, giải trí, giao tiếp, …

Chính vì đó chúng em quyết định chọn đề tài này để giúp người dùng mạng xã hội

có một công cụ để học tập, tìm hiểu, giải quyết nhanh các vấn đề trong trong việchọc

Tình trạng hiện nay:

− Chatbot hỗ trợ học OOP hiện nay chủ yếu chỉ trả lời được câu hỏi đơn giản, chưa trả lời được các câu hỏi phức tạp, câu hỏi nhiều vế, thành phần − 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ế − Các khóa học OOP mang tính chất tuyến tính quá nhiều, không phù hợp với những bạn không có nhu cầuhọc sâu hay tìm hiểu, tra cứu thông tin − 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

⇒ Vì những lý dó đó nhóm quyết định xây dụng một chatbot giúp hỗ trợ việc học một cách dễ dàng cũng như tra cứu thông tin, giải đề mẫu cũng như cung cấp ví dụ minh họa Qua đó đáp ứng nhu cầu học phi tuyến tính cũng như tuyến tính, luyện tập cũng như tra cứu, tăng trình độ học vấn cho môn học OOP

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

1 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 bài tập luyện tập

+ Giải câu hỏi / chấm điểm tự động ngay trên chatbot

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

2

2 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ư:

+ Cho phép đăng và tham gia giải các bài tập, đề mẫu

+ Xem lộ trình học

+ Đọc bài viết theo chủ đề và lộ trình được vạch sẵn

+ Quản lí thông tin cá nhân

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 trả lời các câu hỏi về OOP (khái niệm, định nghĩa, ký hiệu…) +Tìm kiếm và cung cấp các thông tin bài học chi tiết và ví dụ tại trang web chính

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

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

+ Cung cấp lộ trình học OOP

+ Cung cấp các bài học OOP theo chủ đề

+ Cung cấp các chức năng quản lí bài viết, câu hỏi, bài thi, …

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

− Học sinh, sinh viên bắt đầu học OOP hoặc đã học nhưng chưa nắm rõ − Creator muốn đóng góp kiến thức, kinh nghiệm, học vấn, … của bản thân để giúp đỡ ngườimới

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 và offline dưới

sự hướng dẫn của giảng viên hướng dẫn

3

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 và chương trình cho phép tạo dựng các sơ đồ lớp và bài học dưới dạng tương tác trực tiếp − Tìm hiểu bài toán xử lí ngôn ngữ tự nhiên

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 Kế hoạch làm việc:

Thời gian thực hiện từ ngày 10/3/2021 đến ngày 30/6/2021

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:

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

- Khảo sát các ứng dụng liên quan

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

- Xây dựng CSDL và RESTful API

- Wireframe giao diện

- Tìm hiểu xử lý ngôn ngữ tự nhiên

- Xây dựng NodeJS Server

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

- Xây dựng Messenger Chatbot với các chức năng cơ bản

- Áp dụng cơ bản xử lý ngôn ngữ tự nhiên ở mức nhận bi

ết

- Triển khai lần 1

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 lộ trình học, cho phép người dùng xây dựng và đónggóp các ví dụ, …

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

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

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

Sprint Thời gian Công việc

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

- Cho phép người dùng đóng góp và chỉnh sửa ví dụ

- Quản trị viên: kiểm duyệt nội dung đóng góp - Tự động đánh giá bài làm người dùng

Sprint 6 1/6/2021

– 21/6/2021

- 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 Du Lịch

Công việc

cá nhân

- Xây dựng Messenger Chatbot

Nguyễn Duy Minh - Backend: RESTful API

6

- Xử lý ngôn ngữ tự nhiên - Frontend: giao diện người

dùng, quản trị viên

Xác nhận của CBHD (Ký tên và ghi rõ họ tên)

thực hiện 4 KIẾN THỨC NỀN TẢNG 5 Tổng quan về

mô hình MVC 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 Tổng quan về Nodejs 7 Giới thiệu 7 Tạo sao chọn Nodejs để phát triển server 8 Áp dụng vào đề tài 9 Hệ quản trị cơ sở dữ liệu

MongoDB 10 Giới thiệu 10 Ưu điểm của

MongoDB 10

VueJS 11

Giới thiệu 11 Vòng đời của VueJS (Vuejs Lifecycle) 12 Ưu nhược điểm của VueJS 15

8 NestJS 15

Giới thiệu 16

Ưu điểm 16

VNTK 17

Giới thiệu 17

Ưu điểm 17

TÌM HIỂU VÀ LỰA CHỌN CÔNG NGHỆ ỨNG DỤNG CHATBOT18 Tìm hiểu về chatbot 18 Chatbot là gì? 18 Tính ứng dụng 18 Xu hướng phát triển 19 Tìm hiểu về

Facebook Messenger 21 Tổng quan 21 Đánh giá 22 Giới thiệu về

Chatbot Facebook 22 Cách hoạt động 23 Một số khái niệm

cơ bản 23 Áp dụng công nghệ vào

chatbot 24 Facebook Api 24 Facebook Graph

Api 24 Đánh dấu từ loại 26 Tách câu đa nghĩa 26 Phân loại từ nhanh 27 XÂY DỰNG

HỆ THỐNG 28

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

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

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

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

Sơ đồ use case .30

Sơ đồ module .51

Sơ đồ dữ liệu 51

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

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

Danh sách giao diện trang web .65

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

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

Sơ đồ kịch bản chatbot 101

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

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

Ưu điểm 103

Nhược điểm 103

Hướng phát triển 105 TÀI LIỆU THAM KHẢO 106

10 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 Kiến trúc của NodeJS .7

Hình 2.2.3-1 NestJS .9

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

Hình 2.4.1-1 VueJS 11

Hình 2.4.1-2 Cấu trúc 1 file.vue 12

Hình 2.4.2-1 Vòng đời của 1 component trong VueJS 14

Hình 0-1 Kiến trúc module hóa của NestJS 16

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

Hình 3.1.3-1 - Thống kê lượng người dùng của các ứng dụng nhắn tin 20

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

Hình 3.2.3-1 Chatbot Facebook Messenger 22

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

Hình 3.3.2-1 - Graph API 25

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

Hình 4.1.2-1 Kiến trúc hệ thống Chatbot 29

Hình 4.2.1-1 Sơ đồ Usecase dành cho người dùng 31

Hình 4.2.1-2 Sơ đồ Usecase dành cho người viết bài 32

Hình 4.2.1-3 Sơ đồ Usecase dành cho quản lí 33

Hình 4.2.1-4 Sơ đồ Usecase dành cho admin 34

Hình 4.3.3-1 .67

Hình 4.3.3-2 Giao diện Đăng nhập 68

Hình 4.3.3-3 Giao diện Xem bài viết 69

Hình 4.3.3-4 Giao diện Làm bài test 70

Hình 4.3.3-5 Giao diện Kiểm tra kết quả 72

Hình 4.3.3-6 Giao diện Trang cá nhân 74

11 Hình 4.3.3-7 Giao diện Thông tin bài test 75

Hình 4.3.3-8 Giao diện Kết quả bài test 76

Hình 4.3.3-9 Giao diện Quản lí bài viết 78

Hình 4.3.3-10 Giao diện Tạo bài viết 79

Hình 4.3.3-11 Giao diện Chi tiết bài viết 81

Hình 4.3.3-12 Giao diện Bài viết chờ duyệt 82

Hình 4.3.3-13 Giao diện Q&A 84

Hình 4.3.3-14 Giao diện Tạo câu hỏi 85

Hình 4.3.3-15 Giao diện Quản lí bài test 86

Hình 4.3.3-16 Giao diện Tạo bài test 87

Hình 4.3.3-17 Giao diện Cập nhật thông tin quyền 89

Hình 4.3.3-18 Giao diện Duyệt bài viết 90

Hình 4.3.3-19 Giao diện Quản lí người viết bài 91

Hình 4.3.3-20 Giao diện Tạo người viết 92

Hình 4.3.3-21 Giao diện Danh sách quản lí 93

Hình 4.3.3-22 Giao diện Tạo quản lí 94

Hình 4.3.4-1 Giao diện bắt đầu 95

Hình 4.3.4-2 Giao diện thông tin chatbot 96

Hình 4.3.4-3 Giao diện chào mừng 97

Hình 4.3.4-4 Ví dụ về màn hình QnA 98

Hình 4.3.4-5 Giao diện tìm kiếm bài viết 99

Hình 4.3.4-6 Tìm kiếm bài thi 100

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

Hình 4.3.5-2 Tìm kiếm bài thi 101

12

DANH MỤC BẢNG

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

Bảng 4.2.1-2 Usecase Đăng nhập .36

Bảng 4.2.1-3 Usecase Tìm kiếm chung 37

Bảng 4.2.1-4 Usecase Xem bài viết 37

Bảng 4.2.1-5 Usecase Làm bài test 38

Bảng 4.2.1-6 Usecase Lưu kết quả bài thi 39

Bảng 4.2.1-7 Usecase Cập nhật thông tin cá nhân 40

Bảng 4.2.1-8 Usecase Tạo bài viết 40

Bảng 4.2.1-9 Usecase Cập nhật bài viết 41

Bảng 4.2.1-10 Usecase Xóa bài viết 42

Bảng 4.2.1-11 Usecase Hủy duyệt bài viết 43

Bảng 4.2.1-12 Usecase Tạo câu hỏi mới 44

Bảng 4.2.1-13 Usecase Cập nhật câu hỏi 44

Bảng 4.2.1-14 Usecase Tạo bài test 45

Bảng 4.2.1-15 Usecase Cập nhật bài test 45

Bảng 4.2.1-16 Usecase Xóa bài test 46

Bảng 4.2.1-17 Usecase Khôi phục bài test 47

Bảng 4.2.1-18 Usecase Quản lí thông tin cá nhân người viết 47

Bảng 4.2.1-19 Duyệt bài viết .48

Bảng 4.2.1-20 Xóa bài viết .49

Bảng 4.2.1-21 Xem thông tin bài duyệt 49

Bảng 4.2.1-22 Quản lí người viết bài 50

Bảng 8.2.3-1 Sơ đồ CSDL của module Test 52

Bảng 4.2.3-2 Bảng TestQuiz 53

Bảng 4.2.3-3 Bảng TestSentence .53

Bảng 4.2.3-4 Bảng TestTopic .54

Bảng 4.2.3-5 Bảng TestResult .54

Bảng 4.2.3-6 Sơ đồ CSDL của module Post 55

13 Bảng 4.2.3-7 Bảng Post 56

Bảng 4.2.3-8 Bảng PostMetadata 56

Bảng 4.2.3-9 Bảng Topic .57

Bảng 4.2.3-10 Bảng PostVerification .58

Bảng 4.2.3-11 Sơ đồ CSDL của module Q&A 58

Bảng 4.2.3-12 Bảng Question .59

Bảng 8.2.3-13 Sơ đồ CSDL của module Menu 59

Bảng 4.2.3-14 Bảng Menu .60

Bảng 4.2.3-15 Sơ đồ CSDL của module RoleManagement 61

Bảng 4.2.3-16 Bảng User 62

Bảng 4.2.3-17 Bảng Creator 63

Bảng 4.2.3-18 Bảng Manager .63

Bảng 4.3.1-1 Sơ đồ màn hình giao diện của ứng dụng 64

Bảng 4.3.2-1 Danh sách màn hình của ứng dụng 67

Bảng 4.3.3-1 Mô tả giao diện Trang chủ 68

Bảng 4.3.3-2 Mô tả giao diện Đăng nhập 69

Bảng 4.3.3-3 Mô tả giao diện Xem bài viết 70

Bảng 4.3.3-4 Mô tả giao diện Làm bài test 72

Bảng 4.3.3-5 Mô tả giao diện Kiểm tra kết quả 73

Bảng 4.3.3-6 Mô tả giao diện Trang cá nhân 75

Bảng 4.3.3-7 Mô tả giao diện Thông tin bài test 76

Bảng 4.3.3-8 Mô tả giao diện Kết quả bài test 77

Bảng 4.3.3-9 Mô tả giao diện Quản lí bài viết 79

Bảng 4.3.3-10 Mô tả giao diện Tạo bài viết 80

Bảng 4.3.3-11 Mô tả giao diện Chi tiết bài viết 82

Bảng 4.3.3-12 Mô tả giao diện Bài viết chờ duỵet 83

Bảng 4.3.3-13 Mô tả giao diện Q&A 85

Bảng 4.3.3-14 Mô tả giao diện Tạo câu hỏi 86

Bảng 4.3.3-15 Mô tả giao diện Quản lí bài test 87

14 Bảng 4.3.3-16 Mô tả giao diện Tạo bài test 88

Bảng 4.3.3-17 Mô tả giao diện Cập nhật thông tin quyền 89

Bảng 4.3.3-18 Mô tả giao diện Duyệt bài viết 90

Bảng 4.3.3-19 Mô tả giao diện Quản lí người viết bài 91

Bảng 4.3.3-20 Mô tả giao diện Tạo người viết 92

Bảng 4.3.3-21 Mô tả giao diện Danh sách quản lí 93

Bảng 4.3.3-22 Mô tả giao diện Tạo quản lí 94

Bảng 4.3.4-1 Danh sách giao diện Chatbot 95Bảng 4.3.4-2 Mô tả giao diện Chatbot tìm kiếm bài viết 99Bảng 4.3.4-3 Mô tả giao diện Chatbot tìm kiếm bài thi 100

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ệnlập trình được đóng gói Cung cấp cáctí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áttriể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

VNTK Vietnamese NLP Toolkit Bộ công cụ xử lý NLP cho ngôn ngữ Việt

Nam

POS Part of Speech Từ loại

RBSBD Rule based Sentence

Khóa luận “Xây dựng ứng dụng Chatbot hỗ trợ học môn OOP” 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

1

GIỚI THIỆU CHUNG

Lý do chọn đề tài

OOP là tên viết tắt của Object-oriented programming – lập trình hướng đối tượng Đây

là một mẫu hình lập trình hết sức quan trọng đối với mọi cá nhân có nhu cầu họcprogramming

Tuy nhiên với những ai chưa từng hoặc ít tiếp xúc với lập trình trước đây, OOP và mộtmôn khó học với nhiều kiến thức mới cùng khái niệm khó khiến việc học môn OOP trởnên dễ nản

Cùng với đó việc internet hiện nay đã và đang mang lại một sự thay đổi to lớn cho cảnền kinh tế, khoa học, kỹ thuật trên thế giới Đặc biệt là tình hình hiện nay nhu cầu chia

sẻ thông tin với tốc độ nhanh chóng, tiện lợi là nhu cầu gần như tất yếu của mỗi người.Đáp ứng nhu cầu đó, các ứng dụng giao tiếp, mạng xã hội xuất hiện ngày càng nhiều,kéo theo thời lượng sử dụng các ứng dụng này đốt thời gian ngày càng cao vì nhiềumục đích khác nhau như học tập, giải trí, giao tiếp, …

Chính vì đó chúng em quyết định chọn đề tài này để giúp người dùng mạng xã hội có một công cụ để học tập, tìm hiểu, giải quyết nhanh các vấn đề trong trong việc học

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

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

− Chatbot hỗ trợ học OOP hiện nay chủ yếu chỉ trả lời được câu hỏi đơn giản, chưa trảlời được các câu hỏi phức tạp, câu hỏi nhiều vế, thành phần

− 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ế

Từ đó nhóm quyết định thực hiện chatbot với đầy đủ chức năng cơ bản như tra cứu thông tin, ví dụ cũng như thêm vào một số chức năng mới phục vụ việc học và ôn tập

2

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 Chỉ

hiển thị button ở một số trường hợp đặc biệt với điều kiện lúc này dùng button nhanh hơn chat

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

− Kế thừa toàn bộ các chức năng chatbot cũ đã có

− Thêm xử lý câu hỏi nhiều vấn đề

− Thêm chức năng duyệt bài viết, làm bài tập ôn luyện

Đố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:

− Các công nghệ:

+ Front-end: VueJS

+ Back-end: Nodejs

+ Database: MongoDB

+ Chatbot Facebook Messenger

+ Phân tích ngôn ngữ tự nhiên

+ VNTK

+ IDE: Visual Studio Code

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

+ Học sinh, sinh viên bắt đầu học OOP hoặc đã học nhưng chưa nắm rõ +

Creator muốn đóng góp kiến thức, kinh nghiệm, học vấn, … của bản thân để giúp

+ Cung cấp thông tin bài học chi tiết + ví dụ mẫu tại trang web chính +

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

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

+ Cung cấp lộ trình học OOP

+ Cung cấp các bài học OOP ở nhiều mức độ khác nhau

− Cho phép người dùng làm các bài test để kiểm tra khả năng hiểu của người dùng

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 và offline 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 thực nghiệm

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

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

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

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

− Xây dựng website hỗ trợ tương tác giữa người dùng và hệ thống

desktop, nhưng sau này ý tưởng về mô hình MVC được ứng dụng cho các nền tảngkhác như Web

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

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

6

− 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ạytrên 1 server độc lập và có thể tương tác với phía server của backend

− 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êmvà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

Tổng quan về Nodejs

Giới thiệu

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

NodeJS là một môi trường thực thi mã nguồn mở của Javascript Hiện nay - NodeJS rấtphổ biến và được sử dụng trong rất nhiều project có quy mô lớn và nhỏ khác nhau

7

Đặc trưng của NodeJS

Mỗi ứng dụng NodeJS chạy trên một process đơn và không tạo thêm luồng mới chomỗi request Đây cũng là điểm khác biệt của NodeJS so với các môi trường thực thi

khác như DotNetCore, … Thay vào đó, NodeJS sử dụng cơ chế bất đồng bộ I/O

(non-blocking I/O) để quản lí các request thay vì block chúng nhằm giảm thiểu việc

tốn tài nguyên xử lí Nhờ vào cơ chế này, NodeJS có thể xử lý hàng ngàn kết nối đồngthời với 1 server duy nhất mà không cần nhà phát triển phải bỏ công sức và thời gian đểquản lí các luồng

Tạo sao chọn Nodejs để phát triển server

− Nodejs giúp các ứng dụng có tốc độ xử lý nhanh

− Nodejs có cơ chế non-blocking I/O làm ứng dụng nhẹ nhưng hiệu quả − NodeJS

có thể hoạt động đa nền tảng do đó rất tiện lợi cho việc phát triển ứng dụng nói chung

− NodeJS sử dụng Javascript, ngôn ngữ lập trình được hàng triệu nhà phát triển sửdụng Có nhiều thư viện và framework mã nguồn mở hỗ trợ mạnh mẽ cho việc

phát triển

8

Áp dụng vào đề tài

Hình 2.2.3-1 NestJS

Đối với đề tài đã chọn, nhóm đã sử dụng NestJS, một framework được xây dựng dựa

trên ExpressJS NestJS là một framework vô cùng mạnh mẽ để xây dựng ứng dụngNodeJS và có cung cấp các thư viện hữu ích, qua đó tăng hiệu suất cho quá trình pháttriển ứng dụng Cụ thể về NestJS sẽ được trình bày tại phần NestJS

9

Hệ quản trị cơ sở dữ liệu MongoDB

Giới thiệu

Hình 2.3.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ácdocument 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

10

− 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

VueJS

Giới thiệu

Hình 2.4.1-1 VueJS

VueJS là một frontend framework linh động hỗ trợ xây dựng giao diện người dùng.Khác với các framework khác, VueJS được thiết kế với khả năng phát triển liên tục.Thư viện chính của VueJS chỉ tập trung vào tầng view, do đó VueJS rất dễ học và cókhả năng tích hợp cao với các thư viện khác

VueJS được tạo ra bởi Evan You vào tháng 2/2014 Tới thời điểm hiện tại, VueJS đã

qua 3 phiên bản Phiên bản mới nhất (Vue3) được ra mắt vào 18/9/2020 với khả năng tối ưu hóa và scale cao so với Vue2

VueJS giới thiệu khác niệm Single File Component Mỗi file (có đuôi là vue) sẽ bao

hàm toàn bộ đặc điểm của component bao gồm kết cấu giao diện, logic và style

11

Hình 2.4.1-2 Cấu trúc 1 file.vue

Vòng đời của VueJS (Vuejs Lifecycle)

Mỗi component của Vue sẽ có 1 vòng đời bao gồm các giai đoạn khác nhau (khởi tạo,render, cập nhật, hủy, …) Tại mỗi giai đoạn của vòng đời sẽ có các hook mà nhà pháttriển có thể can thiệp để tối ưu hóa component

12

13

Hình 2.4.2-1 Vòng đời của 1 component trong VueJS

14

Ưu nhược điểm của VueJS

Ưu điểm

− Kích thước nhỏ: VueJS có kích thước rất nhỏ so với các framework khác Qua đó giảm thiểu kích cỡ

download của client và tăng hiệu suất của ứng dụng − Virtual DOM Renderding: VueJS cung cấp 1 cây DOM

(Document Object Model) ảo hỗ trợ cập nhật và render các phần tử HTML một cách hiệu quả hơn − Two-way

data binding: VueJS hỗ trợ binding dữ liệu 2 chiều (tương tự như Angular), qua đó giúp quản lý và theo dõi sự

thay đổi của dữ liệu và khả năng cập nhật tự động của component

− Single File Component

Hình 0-1 Kiến trúc module hóa của NestJS

Ưu điểm

− NestJS cung cấp khả năng module hóa cao Giúp ứng dụng dễ bảo trì và kiểm thử

− Có thể dễ dàng tich hợp các thư viện bên thứ 3 vào trong NestJS − Hỗ trợ cả kiến trúc monolithic và microservices

Ưu điểm

− Hỗ trợ đầy đủ tiếng Việt

− Đã build sẵn nhiều tính năng hữu ích

− Tốc độ thực thi cao

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ề kinhdoanh, các website hầu hết cũng đã có những chatbot đơn giản hỗ trợ trả lời cho kháchhà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