Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng ứng dụng web quản lý chi tiêu, khai thác dữ liệu sử dụng mô hình ngôn ngữ lớn

Với đề tài, nhóm hy vọng vừa góp phần thúc đẩy việc phát triển công nghệ thông tin vừa tạo ra một trang web giúp các bạn sinh viên, công nhân viên và người lao động có thể quản lý được c

MỤC TIÊU CỦA ĐỀ TÀI

Trong quá trình hoàn thiện đề tài, nhóm thực hiện đã đặt ra những mục tiêu sau:

- Xây dựng một trang lên kế hoạch và quản lý chi tiêu với các chức năng cơ bản cho người dùng

- Xây dựng được giao diện thân thiện với người sử dụng, dễ sử dụng và thao tác

- Quản lý được các ghi chú cũng như là các hoạt động trong todolist do người dùng tạo ra

- Tích hợp chatbot ai để hỗ trợ người dùng trong quá trình lên kế hoạch chi tiêu

- Truy vấn dữ liệu bằng ngôn ngữ tự nhiên

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Đề tài hướng đến khả năng chi tiêu, quản lý chi tiêu, hoạt động, công việc, học tập của các bạn sinh viên, đặc biệt là các bạn sinh viên năm nhật với vào trường và bắt đầu cuộc số xa nhà Mục đích giúp tạo ra một hệ thống có thể giúp cho việc quản lý chi tiêu, hoạt động, học tập, công việc trở nên ngày càng thuận lợi

Ngoài ra, đề tài còn hướng đến việc khai thác dữ liệu bằng ứng dụng mô hình ngôn ngữ lớn (LLMs) Việc tích hợp chatbot sẽ hỗ trợ người dung quản lý chi tiêu hiệu quả hơn và giúp người quản trị khai thác dữ liệu, tra cứu thông tin trong hệ thống một cách nhanh chóng, hiệu quả và tiết kiệm thời gian

MÔ HÌNH HÓA YÊU CẦU

CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ SỬ DỤNG

REACTJS

Truy vấn dữ liệu sử dụng LLMs

3 CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 3.1 Giao diện trang admin

4 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 4.1 Cài đặt ứng dụng, thư viện cần thiết 4.2 Cài đặt phía backend

4.4 Cài đặt phía ứng dụng mobile

STT Thời gian thực hiện Công việc Ghi chú

Tìm hiểu về Flutter Tìm hiểu về các công cụ tạo chatbot

Tiến hành tổ chức cấu trúc project flutter

Xây dựng giao diện cho ứng dụng

Chỉnh sửa giao diện trên web Thử nghiệm chatbot với OpenAi và model Chatgpt, LLMs, Fine-turning, Lanchain,

Tạo bộ dữ liệu thử nghiệm chatbot

Chuyển đổi từ MongoDB sang PostgreSQL

Tích hợp các api vào ứng dụng

Tạo chức năng chatbot trên web và ứng dụng

Thử nghiệm chatbot với chatgpt 4.0

Tích hợp api chatbot vào hệ thống

Tạo bộ dữ liệu và kiểm thử chatbot

Cải tiến chatbot sử dụng PandasAI

Tạo bảng riêng cho chatbot trong database

Hoàn thiện các chức năng trên ứng dụng

Tạo bộ dữ liệu cho chatbot bằng file excel

Cải thiện chatbot sử dụng dữ liệu từ file excel

Tạo bộ dữ liệu cho chatbot bằng file csv

Import dữ liệu vào postgreSQL Cải thiện chatbot, chuyển từ đọc từ file excel sang đọc trực tiếp từ database

Cải tiến chatbot sinh ảnh biểu đồ

8 27/05/2024 – 31/06/2024 Kiểm thử chương trình và tiến hành sửa lỗi

Kiểm thử và sửa lỗi Hoàn thành báo cáo

Tp Hồ Chí Minh, ngày tháng năm 2024

Giảng viên hướng dẫn Người viết đề cương

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

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 2

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN 3

LỜI CẢM ƠN 4 ĐỀ CƯƠNG KHOÁ LUẬN TỐT NGHIỆP 5

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1

4 MỤC TIÊU CỦA ĐỀ TÀI 2

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 2

CHƯƠNG 1: MÔ HÌNH HÓA YÊU CẦU 3

1.1.2 Yêu cầu phi chức năng 3

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ SỬ DỤNG 34

2.1.3 Ưu và nhược điểm của Reactjs 35

2.4.1 Giới thiệu về ứng dụng 39

2.4.3 Ưu và nhược điểm của Flutter 39

2.6 Truy vấn dữ liệu sử dụng LLMs 43

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 51

3.1 GIAO DIỆN DÀNH CHO ADMIN 51

3.2 GIAO DIỆN DANH CHO TRANG WEB 51

3.4.4 Các công nghệ sử dụng 58

3.4.5 Luồng hoạt động của chatbot trong hệ thống 59

3.4.6 Luồng xử lý câu hỏi 60

CHƯƠNG 4: CÀI ĐẶT CHƯƠNG TRÌNH VÀ KIỂM THỬ 63

4.1 Cài đặt ứng dụng, thư viện cần thiết 63

4.6.2 Các trường hợp kiểm thử 71

Hình 1.2: Lược đồ Conceptual model 5

Hình 1.3: Sequence Diagram đăng nhập 7

Hình 1.4: Collaboration diagram đăng nhập 7

Hình 1.5: Sequence diagram đăng ký tài khoản 9

Hình 1.7: Lược đồ sequence kích hoạt tài khoản 11

Hình 1.8: Lược dồ collaboration kích hoạt tài khoản 11

Hình 1.9: Sequence diagram cập nhật tài khoản 13

Hình 1.10: Collaboration diagram cập nhật tài khoản 13

Hình 1.11: Sequence diagram tạo kế hoạch 15

Hình 1.12: Collaboration diagram tạo kế hoạch 16

Hình 1.13: Sequence diagram chỉnh sửa kế hoạch 17

Hình 1.14: Sequence diagram xóa kế hoạch 18

Hình 1.15: Collaboration diagram cập nhật kế hoạch 18

Hình 1.16: Sequence diagram tạo ghi chú 20

Hình 1.17: Collaboration diagram tạo ghi chú 20

Hình 1.18: Sequence diagram cập nhật ghi chú 22

Hình 1.19: Sequence diagram xóa ghi chú 23

Hình 1.20 Sequence diagram cập nhật ghi chú 23

Hình 1.21: Sequence diagram tạo tài khoản 25

Hình 1.22: Collaboration diagram tạo tài khoản 25

Hình 1.23: Sequence diagram chỉnh sửa tài khoản 27

Hình 1.24: Sequence diagram tìm kiếm tài khoản 28

Hình 1.25: Collaboration diagram quản lý tài khoản 28

Hình 1.26 Lược đồ sequence chatbot ai 30

Hình 1.28: Lược đồ sequence gửi thông báo 32

Hình 1.30: Lược đồ class diagram 33

Hình 2.1: Kiến trúc của LLMs 43

Hình 2.3: Hoạt động của Langchain 47

Hình 2.4: Hoạt động của PandasAI 49

Hình 3.1 Tạo script insert dữ liệu 55

Hình 3.2: ChatGPT sinh dữ liệu theo câu prompt 56

Hình 3.3: ChatGPT sinh dữ liệu với các trường được thay đổi 57

Hình 3.4: Luồng hoạt động của chatbot 59

Hình 3.5: Truy vấn dữ liệu 60

Hình 3.6: Tạo câu prompt từ PandasAI 61

Hình 3.8: Sinh code trả về kết quả 62

Hình 3.9: Kiểm tra code và kết quả 62

Hình 4.1: Cấu trúc folder của backend 64

Hình 4.2: Kiểm tra NET trong máy 64

Hình 4.3: Gõ lệnh dotnet run để chạy chương trình 65

Hình 4.4: Truy cập vào trang Swagger để kiểm tra 65

Hình 4.5: Cấu trúc folder của FrontEnd 66

Hình 4.7: Các package cần thiết 67

Hình 4.8: Cấu trúc folder của mobile 68

Hình 4.9: Cấu trúc folder chatbot 69

Hình PL1.1: Giao diện đăng nhập của admin 95

Hình PL1.2: Giao diện trang quản lý tài khoản 95

Hình PL1.3: Giao diện trang tạo tài khoản 96

Hình PL1.4: Giao diện trang cập nhật tài khoản cho admin 96

Hình PL2.1: Giao diện trang đăng nhập 97

Hình PL2.2: Giao diện trang đăng nhập trên mobile 97

Hình PL2.3: Giao diện trang đăng ký 98

Hình PL2.4: Giao diện đăng ký trên mobile 98

Hình PL2.5: Giao diện trang chủ 99

Hình PL2.6: Giao diện trang chủ trên mobile 99

Hình PL2.7: Giao diện trang todo 100

Hình PL2.8: Giao diện trang todo trên ứng dụng 100

Hình PL2.9: Giao diện trang quên mật khẩu 101

Hình PL2.10: Giao diện trang quên mật khẩu trên mobile 101

Hình PL2.11: Giao diện trang đổi mật khẩu 102

Hình PL2.12: Giao diện trang đổi mật khẩu trên mobile 102

Hình PL2.13: Giao diện trang quản lý chi tiêu 103

Hình PL2.14: Giao diện trang quản lý chi tiêu trên mobile 103

Hình PL2.15: Giao diện trang cập nhật tài khoản 104

Hình PL2.16: Giao diện trang cập nhật tài khoản trên mobile 104

Hình PL2.17: Giao diện trang tạo kế hoạch theo tuần 105

Hình PL2.18: Giao diện trang tạo kế hoạch theo tuần trên ứng dụng 105

Hình PL2.19: Giao diện trang tạo kế hoạch theo ngày 106

Hình PL2.20: Giao diện trang tạo kế hoạch theo ngày trên mobile 106

Hình PL2.21: Giao diện chatbot 107

Hình PL2.22: Giao diện chatbot trên mobile 107

Hình PL2.23: Giao diện tràn pomodoro 108

Hình PL2.24: Giao diện pomodoro trên mobile 108

Bảng 1.1: Use case đăng nhập 6

Bảng 1.2: Đặc tả Use Case đăng ký 8

Bảng 1.3 Đặc tả use case kích hoạt tài khoản 10

Bảng 1.4: Đặc tả Use Case cập nhật tài khoản 12

Bảng 1.5: Đặc tả Use Case tạo kế hoạch 15

Bảng 1.6: Đặc tả Use Case cập nhật kế hoạch 17

Bảng 1.7: Đặc tả Use Case tạo ghi chú 19

Bảng 1.8: Đặc tả Use Case cập nhật ghi chú 21

Bảng 1.9: Đặc tả Use case tạo tài khoản mới 24

Bảng 1.10: Đặc tả Use case quản lý tài khoản 27

Bảng 1.11 Đặc tả usecase chatbot ai 29

Bảng 1.12: Đặc tả use case thông báo 31

Bảng 4.1: Các công cụ, phần mềm cần cài đặt 63

Bảng 4.2: Kiểm thử chức năng đăng nhập với trường hợp không nhập email 71

Bảng 4.3: Kiểm thử với trường hợp email không có trong hệ thống 72

Bảng 4.4: Kiểm thử với trường hợp đăng nhập với password không đúng 73

Bảng 4.5: Kiểm thử chức năng đăng nhập với trường hợp dữ liệu đứng 73

Bảng 4.6: Kiểm thử chức năng đăng ký với trường hợp email đã tồn tại 74

Bảng 4.7: Kiểm thử chức năng đăng ký với trường hợp dữ liệu đúng 75

Bảng 4.10: Kiểm thử chức năng tạo kế hoạch với dữ liệu đúng 78

Bảng 4.11: Kiểm thử chức năng cập nhật kế hoạch với trường hợp số tiền thực tế lớn hơn số tiền dự kiến 79

Bảng 4.12: Kiểm thử chức năng tạo ghi chú với trường hợp không chọn màu 80

Bảng 4.13: Kiểm thử chức năng tạo ghi chú với trường hợp thời gian bắt đầu lớn hơn thời gian kết thúc 81

Bảng 4.14: Kiểm thử chức năng tạo ghi chú với trường hợp dữ liệu đúng 82

Bảng 4.15: Kiểm thử chức năng cập nhật ghi chú 83

Bảng 4.16: Kiểm thử chức năng tạo cột trong todolist với trường hợp không nhật title cột 84

Bảng 4.17: Kiểm thử chức năng thêm cột todolist với trường hợp ngày bắt đầu lớn hơn ngày kết thúc 85

Bảng 4.18: Kiểm thử chức năng tạo cột todolist với trường hợp dữ liệu đúng 86

Bảng 4.19: Kiểm thử chức năng cập nhật cột trong todolist 87

Bảng 4.20: Kiểm thử chức năng tạo thẻ trong todolist với trường hợp không nhập title 88

Bảng 4 22: Kiểm thử chức năng tạo thẻ trong todolist với trường hợp không nhập title 89

Bảng 4.23: Kiểm thử chức năng chatbot trường hợp câu hỏi tạo biểu đồ 90 Bảng 4.24: Kiểm thử chức năng chatbot với câu hỏi liên quan đến quản lý chi tiêu 90

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại ngày nay, việc tích hợp công nghệ thông tin vào đời sống hàng ngày trở thành một mục tiêu cấp thiết, đồng thời mang lại nhiều lợi ích cho xã hội Không chỉ giúp thúc đẩy sự phát triển, mà còn giải quyết những khó khăn về mặt khoảng cách, nhân lực và hiệu suất làm việc Tuy nhiên, vẫn còn nhiều khó khăn, bất cập trong việc đưa công nghệ thông tin vào từng mảng của đời sống cũng như trong kết nối giữa người cung và người cầu Nắm bắt được điều đó, nhóm chọn nghiên cứu đề tài “Xây dựng ứng dụng website quản lý chi tiêu cho sinh viên, khai thác dữ liệu sử dụng mô hình ngôn ngữ lớn” Với đề tài, nhóm hy vọng vừa góp phần thúc đẩy việc phát triển công nghệ thông tin vừa tạo ra một trang web giúp các bạn sinh viên, công nhân viên và người lao động có thể quản lý được các mức phí chi tiêu của mình trong cuộc sống, đặc biệt là đối với các bạn năm nhất Đây sẽ là nơi, mà các bạn sinh viên có thể quản lý được khoản tiền của mình theo kế hoạch ngày, tháng, năm, giúp các bạn sinh viên có thể nắm rõ được mức chi tiêu hàng ngày, hàng tháng, hàng năm và rút ra được kinh nghiệm chi tiêu sao cho hợp lý và tiết kiệm nhất

2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu quản lý chi tiêu hàng ngày, hàng tháng, hàng năm trong suốt quá trình học tập, làm việc các bạn sinh viên, công nhân viên mà không bị giới hạn về thời gian cũng như địa điểm, chỉ cần thiết bị thông minh có thể truy cập được Internet là có thể sử dụng được. Đồng thời, đề tài cũng nghiên cứu các công nghệ để hoàn thiện sản phẩm một cách hoàn chỉnh nhất, bao gồm:

 Net để xây dụng phần server cho website

 Thư viện ReactJS để thiết kế và xây dựng giao diện cho người dùng

 Cơ sở dữ liệu PostgreSQL để lưu trữ dữ liệu cho hệ thống

 JSON Web Token (JWT) để làm lớp bảo mật cho hệ thống Để gọi đến các API có yêu cầu xác thực, ứng dụng phải cung cấp JWT trong header của request JWT được áp dụng vào hệ thống để xác thực người dùng và phân quyền chức năng người dùng

 LLM, xử lý ngôn ngữ tự nhiên khai thác dữ liệu Được áp dụng để khai thác dữ liệu, tạo chatbot hỗ trợ người dùng quản lý chi tiêu hiệu quả và giúp người quản trị dễ dàng tìm kiếm thông tin trong hệ thống một cách thuận tiện và nhanh chóng hơn

Trong đề tài khóa luận tốt nghiệp này, chủ yếu tập trung vào xử lý nghiệp vụ của một trang web chuyên quản lý chi tiêu như: lập kế hoạch chi tiêu theo ngày, tháng, năm, cập nhật kế hoạch, cập nhật tiền thực tế sử dụng so với tiền ước tính khi lập kế hoạch và tổng tiền của từng kế hoạch, xóa kế hoạch cũng như các tính năng bổ trợ cho việc học như tạo ghi chú, tạo và chỉnh sửa các hoạt động cần thực hiện trong todolist của người dùng Tạo chatbot hỗ trợ người dùng quản lý chi tiêu hiệu quả.

Phần quản trị sẽ tập trung vào các nghiệp vụ như quản lý người dùng Ngoài ra, sử dụng LLM (Large Language Model), xử lý ngôn ngữ tự nhiên để khai thác dữ liệu và tra cứu thông tin trong hệ thống một cách nhanh chóng và tiện lợi hơn

4 MỤC TIÊU CỦA ĐỀ TÀI

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Đề tài hướng đến khả năng chi tiêu, quản lý chi tiêu, hoạt động, công việc, học tập của các bạn sinh viên, đặc biệt là các bạn sinh viên năm nhật với vào trường và bắt đầu cuộc số xa nhà Mục đích giúp tạo ra một hệ thống có thể giúp cho việc quản lý chi tiêu, hoạt động, học tập, công việc trở nên ngày càng thuận lợi

CHƯƠNG 1: MÔ HÌNH HÓA YÊU CẦU

- Quản lý tài khoản User trên hệ thống: thêm, sửa, xóa

- Tài khoản: đăng ký, đăng nhập, chỉnh sửa thông tin, thay đổi mật khẩu, đăng xuất

- Kế hoạch: thêm, sửa, xóa, thống kê kế hoạch

- Ghi chú: thêm, sửa, xóa ghi chú

- Danh mục: thêm, chỉnh sửa danh mục

- Todolist: Thêm, sửa, xóa cột và thẻ trong todolist

- Đếm thời gian pomodoro, quản lý các nhiệm vụ trong khoảng thời gian được cài đặt

1.1.2 Yêu cầu phi chức năng

Các yêu cầu phi chức năng trên hệ thống bao gồm:

- Giao diện thân thiện, dễ sử dụng

- Tốc độ xử lý các thao tác nhanh chóng, chính xác

- Hệ thống có độ bảo mật cao

- Dễ dàng bảo trì, nâng cấp phát triển

1.2 MÔ HÌNH HÓA YÊU CẦU

Hình 1.2: Lược đồ Conceptual model

Description Cho phép Actor đăng nhập để thực hiện các chức năng nhất định

Actor Khách hàng, Người quản trị

Pre-Conditions Actor có tài khoản trên hệ thống

Post-Conditions Actor đăng nhập thành công vào hệ thống với các chức năng tuỳ theo vai trò

Main Flow 1 Actor bấm vào nút “Login”

2 Hệ thống hiển thị Form đăng nhập gồm email và mật khẩu

5 Trang kiểm tra thông tin nhập vào

6 Hệ thống xác thực thông tin so với dữ liệu của cơ sở dữ liệu

7 Hệ thống lưu lại accesstoken, thông báo đăng nhập thành công và chuyển sang trang chủ

Alternate Flow(s) 2.1 Actor truy cập vào đường link trang quản trị, hệ thống chuyển sang trang quản trị và hiển thị Form đăng nhập gồm email và mật khẩu, Actor thực hiện tiếp bước 3

Exception Flow 5.1 Actor bỏ trống ô nhập tên tài khoản hoặc mật khẩu, hệ thống thông báo yêu cầu actor phải nhập đầy đủ các thông tin, Actor quay lại bước 3 hoặc huỷ bỏ thao tác

6.1 Actor nhập sai thông tin tài khoản, hệ thống thông báo tài khoản/mật khẩu không chính xác, Actor quay lại bước 3 hoặc huỷ bỏ thao tác

Bảng 1.1: Use case đăng nhập

Hình 1.4: Collaboration diagram đăng nhập Hình 1.3: Sequence Diagram đăng nhập

Description Cho phép actor tạo tài khoản để sử dụng trên hệ thống

Post-Conditions Actor tạo thành công tài khoản mới trên hệ thống

1 Actor bấm vào nút “Register”

2 Hệ thống hiển thị Form để nhập thông tin gồm tên tài khoản, mật khẩu, tên người dùng, ngày sinh, địa chỉ, số điện thoại, email, mã số sinh viên

3 Actor nhập các thông tin

5 Hệ thống kiểm tra thông tin nhập vào

6 Hệ thống thêm tài khoản vào cơ sở dữ liệu và gửi mail OTP

7 Hệ thống chuyển đến trang OTP và thông báo đăng ký thành công

5.1 Thông tin về tên tài khoản, mật khẩu, tên người dùng, ngày sinh, địa chỉ, số điện thoại, email, mã số sinh viên không hợp lệ hoặc bị bỏ trống, hệ thống thông báo lỗi, Actor quay lại bước 3 hoặc huỷ bỏ thao tác

7.1 Đăng ký không thành công, hệ thống thông báo lỗi

Bảng 1.2: Đặc tả Use Case đăng ký

Hình 1.6: Collaboration đăng ký Hình 1.5: Sequence diagram đăng ký tài khoản

Use Case Kích hoạt tài khoản

Chức năng này cho phép Actor kích hoạt tài khoản vừa đăng ký thành công

Pre-Conditions Actor đăng ký thành công và nhận được mail chứa OTP

Post-Conditions Hệ thống thực hiện kích hoạt tài khoản của Actor để có thể tiến hành đăng nhập vào hệ thống

Main Flow 1 Sau khi đăng ký thành công hệ thống chuyển sang trang

OTP hoặc Actor truy cập vào trang OTP

2 Hệ thống hiển thị form nhập OTP gồm 6 số

3 Actor nhập mã OTP nhận được vào form

4 Actor nhấn nút “Verify Account”

5 Hệ thống kiểm tra thông tin Actor nhập

6 Hệ thống cập nhật trạng thái tài khoản vào Cơ sở dữ liệu

7 Hệ thống hiển chuyển sang trang Đăng nhập và hiển thị thông báo kích hoạt thành công

Exception Flow 5.1 Nếu OTP không hợp lệ hoặc bị bỏ trống thì sẽ thông báo lỗi

Actor quay lại bước 3 hoặc huỷ bỏ thao tác 7.1 Kích hoạt thất bạn, thông báo lỗi

Bảng 1.3 Đặc tả use case kích hoạt tài khoản

Hình 1.7: Lược đồ sequence kích hoạt tài khoản

Hình 1.8: Lược dồ collaboration kích hoạt tài khoản

Use Case Cập nhật tài khoản

Chức năng này cho phép Actor cập nhật thông tin cho tài khoản

Pre-Conditions Actor có tài khoản và đã đăng nhập

Post-Conditions Hệ thống thực hiện cập nhật thông tin cho tài khoản của Actor vào

Main Flow 1 Actor truy cập trang “Account”

2 Hệ thống lấy thông tin tài khoản của Actor từ Cơ sở dữ liệu

3 Hệ thống hiển thị Form cập nhật thông tin với các thông tin đã lưu gồm tên tài khoản, họ tên, ngày sinh, email, số điện thoại, địa chỉ, mã số sinh viên

4 Actor nhập thông tin cần cập nhật

7 Hệ thống cập nhật thông tin tài khoản vào Cơ sở dữ liệu

8 Hệ thống hiển thị lại giao diện trang thông tin tài khoản

Exception Flow 6.1 Actor nhập thông tin họ tên, ngày sinh, tên tài khoản, email, số điện thoại, địa chỉ, mã số sinh viên không hợp lệ hoặc để trống, hệ thống thông báo lỗi, Actor thực hiện lại bước 5 hoặc huỷ bỏ thao tác

Bảng 1.4: Đặc tả Use Case cập nhật tài khoản

Hình 1.10: Collaboration diagram cập nhật tài khoản Hình 1.9: Sequence diagram cập nhật tài khoản

Use Case Tạo kế hoạch

Short Description Chức năng này cho phép Actor tạo kế hoạch chi tiêu theo ngày, tháng, năm

Post-Conditions Hệ thống sẽ tạo kế hoạch dựa trên những thông tin người dùng cung cấp và hiển thị lên trên calendar

Main Flow 1 Actor chọn nút “Create”

2 Hệ thống hiển thị form để nhập thông tin như tổng số tiền, đơn vị tiền, chọn lập kế hoạch theo ngày hoặc tháng hoặc năm, nhập thời gian, chi tiết kế hoạch, mức độ ưu tiên, chọn danh mục

5 Hệ thống kiểm tra thông tin

6 Hệ thống thêm kế hoạch vào cơ sở dữ liệu

7 Hệ thống hiển thị kế hoạch theo ngày, tháng, năm

THIẾT KẾ HỆ THỐNG

GIAO DIỆN DÀNH CHO ADMIN

Xem phụ lục 3.1: Giao diện dành cho admin

CHATBOT

CÀI ĐẶT CHƯƠNG TRÌNH VÀ KIỂM THỬ

Cài đặt ứng dụng, thư viện cần thiết

Cài đặt phía FrontEnd

Cài đặt phía Mobile

- Bước 1: Clone source code tại github: SSPS.APP

- Bước 2: Mở source code app trong Visual Studio Code IDE

- Bước 3: Gõ lệnh flutter pub get để cài đặt các package cần thiết

- Bước 4: Sau khi chạy xong lệnh flutter pub get, tiến hành mở file pubspec.yaml và kiểm tra trong phần “dependencies” xem đã đủ các package với các phiên bản cần thiết hay chưa

- Bước 5: Gõ lệnh flutter pub add cần cài nếu thiếu một trong số các package trên

- Bước 6: Nhấn tổ hợp phím Ctr + Shitf + P và chọn Flutter: Select Device và chọn máy ảo cần chạy

- Bước 7: Gõ lệnh flutter run để khởi chạy chương trình

H ì n h 4 7 : C ấ u t r ú c f o l d e r m o b i lHình 4.8: Cấu trúc folder của mobile

Cài đặt Chatbot

Hình 33: Các package cần thiết

Hình 32: Cấu trúc folder chatbot Hình 4.10: Các package cần thiết

Hình 4.9: Cấu trúc folder chatbot

- Bước 1: Tải source code tại github: SSPS.Chatbot

- Bước 2: Mở source code app trong Visual Studio Code IDE

- Bước 3: Gõ lệnh py –m pip install để cài đặt các package cần thiết

- Bước 4: Sau khi cài đặt các package cần thiết thì gõ lệnh py app.py để chạy chương trình

- Bước 5: Nếu trong quá trình chạy mà chưa cài đủ các package thì hệ thống sẽ thống báo và bắt đầu thực hiện từ bước 3

4.6.1.1 Các loại kiểm thử áp dụng

- Integration Test: Kết hợp các module của ứng đựng và kiểm thử như một ứng dụng hoàn chỉnh

- Unit Test: Kiểm thử riêng lẻ từng module để xác định tính đúng đắn của module đó

Hình 4.11: Các package cần thiết

71 Đảm bảo các chức năng của ứng dụng hoạt động một cách đúng đắn, chính xác trong điều kiện thực tế

Các tiêu chí kiểm thử bao gồm:

- Tiêu chí đình chỉ: nếu có ít nhất 40% số test case bị lỗi, tạm dừng việc kiểm thử đến khi tất cả các lỗi hiện tại được khắc phục

- Tiêu chí kết thúc: chỉ định các tiêu chí biểu thị việc hoàn thành thành công giai đoạn kiểm thử

● Tỷ lệ chạy test case bắt buộc phải là 100% trừ khi có lý do rõ ràng

● Tỷ lệ vượt qua các test case là 80%, việc đạt tỉ lệ này là bắt buộc

4.6.2 Các trường hợp kiểm thử

Mô tả Kiểm thử chức năng đăng nhập với trường hợp không điền email

Các bước thực hiện 1 Nhập password

Dữ liệu kiểm thử Email = “”

Kết quả mong đợi Hiển thị thống báo : “Need to fill in all information!”

Kết quả thực tế Như kết quả mong đợi

Kết luận Pass Ảnh minh chứng

Bảng 4.2: Kiểm thử chức năng đăng nhập với trường hợp không nhập email

Mô tả Kiểm thử chức năng đăng nhập với trường hợp email không có trong hệ thống

Dữ liệu kiểm thử Email = “test123@gmail.com”

Kết quả mong đợi Hiển thị thông báo : “Account does not exist ”

Bảng 4.3: Kiểm thử với trường hợp email không có trong hệ thống

Mô tả Kiểm thử chức năng đăng nhập với trường hợp password không đúng

Dữ liệu kiểm thử Email = “bthai555@gmail.com”

Kết quả mong đợi Hiển thị thống báo : “Incorrect password ”

Bảng 4.4: Kiểm thử với trường hợp đăng nhập với password không đúng

Mô tả Kiểm thử chức năng đăng nhập với trường hợp dữ liệu đúng

Dữ liệu kiểm thử Email = “bthai555@gmail.com”

Kết quả mong đợi Hiển thị thông báo: “Login success” và chuyển sang trang chủ

Bảng 4.5: Kiểm thử chức năng đăng nhập với trường hợp dữ liệu đứng

Mô tả Kiểm thử chức năng đăng ký với trường hợp email đã có trong hệ thống

Các bước thực hiện 1 Nhập đầy đủ thông tin

Email = bthai555@gmail.com School = “SPKT”

Province = “Tp Hồ Chí Minh”

Kết quả mong đợi Hiển thị thống báo : “Email already exists ”

Bảng 4.6: Kiểm thử chức năng đăng ký với trường hợp email đã tồn tại

Mô tả Kiểm thử chức năng đăng ký với trường hợp dữ liệu đúng

Các bước thực hiện 1 Nhập đầy đủ thông tin

Email = bthai888@gmail.com School = “SPKT”

Province = “Tp Hồ Chí Minh”

Kết quả mong đợi Hiển thị thông báo : “Register success ” và chuyển sang trang OTP

Bảng 4.7: Kiểm thử chức năng đăng ký với trường hợp dữ liệu đúng

Mô tả Kiểm thử chức năng tạo kế hoạch với trường hợp không điền plan detail

2 Nhập đầy đủ thông tin ( không nhập phần plan detail)

Kết quả mong đợi Hiển thị thông báo : “Need to fill in all information!”

Mô tả Kiểm thử chức năng tạo kế hoạch với trường hợp số tiền dự kiến trong plan detail lớn hơn số tổng tiền

2 Nhập đầy đủ thông tin

Kết quả mong đợi Hiển thị thông báo : “The total amount has exceeded the limit, do you want to update the total amount?”

Mô tả Kiểm thử chức năng tạo kế hoạch với trường hợp dữ liệu đúng

Kết quả mong đợi Hiển thị thông báo : “ Create success”

Bảng 4.10: Kiểm thử chức năng tạo kế hoạch với dữ liệu đúng

Mô tả Kiểm thử chức năng cập kế hoạch với trường hợp số tiền thực tế lớn hơn số tiền dữ kiến

1 Nhấn chọn kế hoạch trong ngày cần update

Kết quả mong đợi Hiển thị thông báo : “Warning: Actual money is higher than expected money” và cảnh báo đỏ

Bảng 4.11: Kiểm thử chức năng cập nhật kế hoạch với trường hợp số tiền thực tế lớn hơn số tiền dự kiến

Mô tả Kiểm thử chức năng tạo ghi chú với trường hợp không chọn màu

1 Nhấn chọn ngày cần ghi chú

Kết quả mong đợi Hiển thị thông báo: “Need to fill in title and color!”

Bảng 4.12: Kiểm thử chức năng tạo ghi chú với trường hợp không chọn màu

Mô tả Kiểm thử chức năng tạo ghi chú với trường hợp thời gian bắt đầu lớn hơn thời gian kết thúc

Kết quả mong đợi Hiển thị thông báo : “Start time is less than end time”

Bảng 4.13: Kiểm thử chức năng tạo ghi chú với trường hợp thời gian bắt đầu lớn hơn thời gian kết thúc

Mô tả Kiểm thử chức năng tạo ghi chú với trường hợp dữ liệu đúng

Kết quả mong đợi Hiển thị thông báo: “Create success!!”

Bảng 4.14: Kiểm thử chức năng tạo ghi chú với trường hợp dữ liệu đúng

Mô tả Kiểm thử chức năng cập nhật ghi chú

Kết quả mong đợi Hiển thị thông báo: “Update success!!”

Bảng 4.15: Kiểm thử chức năng cập nhật ghi chú

Mô tả Kiểm thử chức năng tạo cột trong todolist với trường hợp không nhật title cột

2 Nhập đầy đủ thông tin (không nhập title)

Kết quả mong đợi Hiển thị thông báo : “Need to enter title and color”

Bảng 4.16: Kiểm thử chức năng tạo cột trong todolist với trường hợp không nhật title cột

Mô tả Kiểm thử chức năng tạo cột trong todolist với trường hợp ngày bắt đầu lớn hơn ngày kết thúc

Kết quả mong đợi Hiển thị thông báo: “The start date must be before the end date ”

Bảng 4.17: Kiểm thử chức năng thêm cột todolist với trường hợp ngày bắt đầu lớn hơn ngày kết thúc

Mô tả Kiểm thử chức năng tạo cột trong todolist với trường hợp dữ liệu đúng

Kết quả mong đợi Hiển thị thông báo : “Create success”

Bảng 4.18: Kiểm thử chức năng tạo cột todolist với trường hợp dữ liệu đúng

Mô tả Kiểm thử chức năng cập nhật cột trong todolist

1 Nhấn chọn nút edit column

Kết quả mong đợi Hiển thị thông báo: “Update success!!”

Bảng 4.19: Kiểm thử chức năng cập nhật cột trong todolist

Mô tả Kiểm thử chức năng tạo thẻ trong todolist với trường hợp không nhập title

1 Nhấn chọn nút “+” trên column muốn tạo thẻ

Dữ liệu kiểm thử Title = “”

Kết quả mong đợi Hiển thị thông báo : “Need to enter title”

Bảng 4.20: Kiểm thử chức năng tạo thẻ trong todolist với trường hợp không nhập title

Mô tả Kiểm thử chức năng tạo thẻ trong todolist với trường hợp dữ liệu đúng

1 Nhấn chọn nút “+” trên column muốn tạo thẻ

Dữ liệu kiểm thử Title = “Test”

Kết quả mong đợi Hiển thị thông báo: “Create success!!”

Bảng 4.21: Kiểm thử chức năng tạo thẻ trong todolist với trường hợp không nhập title

Mô tả Kiểm thử chức năng cập nhật thẻ

1 Nhấn chọn nút edit trên thẻ muốn cập nhật

Dữ liệu kiểm thử Title = “Test”

Kết quả mong đợi Hiển thị thông báo : “Update success”

Mô tả Kiểm thử chức năng chatbot với câu hỏi không liên quan đến quản lý chi tiêu

1 Nhấn chọn avatar chat bot

Dữ liệu kiểm thử Message = “How are you?”

Kết quả mong đợi Hiển thị câu trả lời : “Sorry, I cannot answer your question yet”

Bảng 4 22: Kiểm thử chức năng tạo thẻ trong todolist với trường hợp không nhập title

Mô tả Kiểm thử chức năng chatbot với câu hỏi tạo biểu đồ

Dữ liệu kiểm thử Message = “Give me a chart about avg money plan by user”

Kết quả mong đợi Hiển thị câu trả lời : “Ảnh biểu đồ”

Bảng 4.23: Kiểm thử chức năng chatbot trường hợp câu hỏi tạo biểu đồ

Bảng 4.24: Kiểm thử chức năng chatbot với câu hỏi liên quan đến quản lý chi tiêu

Mô tả Kiểm thử chức năng chatbot với câu hỏi liên quan đến quản lý chi tiêu

Dữ liệu kiểm thử Message = “What is my average expenditure?”

Kết quả mong đợi Hiển thị câu trả lời : “Câu trả lời về chi tiêu trung bình”

Sau thời gian nghiên cứu xây dựng và phát triển đề tài, nhóm thực hiện đã đạt được những thành quả sau:

Về lý thuyết và kỹ năng:

- Hiểu rõ và ứng dụng được các kiến thức đã được học, đồng thời tìm hiểu thêm cũng như áp dụng các công nghệ hiện đại phổ biến được sử dụng rộng rãi hiện nay như là ReactJS, Net cũng như là các framework hỗ trợ xây dựng UI nổi bật hiện nay như React Bootstrap, MUI

- Tìm hiểu được cách thức và quy trình tạo một chatbot thông qua

PandasAi, LLMs, RAG, Langchain, OpenAI

- Xây dựng được kỹ năng làm việc nhóm và làm việc cá nhân, quản lý thời gian, phân chia công việc phù hợp trong suốt thời gian thực hiện dự án

- Xây dựng được khả năng tự học, tự tìm kiếm thông tin trên mạng và giải quyết vấn đề

- Xây dựng thành công, đáp ứng tốt các yêu cầu đặt ra về một hệ thống quản lí chi tiêu, công việc cho nhân viên như:

● Các chức năng liên quan đến tài khoản người dùng: đăng ký, đăng nhập, khôi phục mật khẩu, thay đổi thông tin tài khoản, thay đổi mật khẩu

● Các chức năng quản lý chi tiêu: Thêm, sửa, xóa kế hoạch theo ngày, tháng, năm với số tiền ước tính, tiền thực tế và nội dung chi tiết, mức độ ưu tiên, …

● Các chức năng quản lý ghi chú: Thêm, sửa, xóa ghi chú

● Các chức năng quản lý todolist: thêm, sửa, xóa cột todolist, thêm, sửa, xóa thẻ trong cột

● Các chức năng liên quan đến admin: quản lí tài khoản người dùng, thêm tài khoản mới, chỉnh sửa thông tin tài khoản

● Có thêm trang chứa các câu hỏi phổ biến về quản lý chi tiêu

● Có các cảnh báo khi thực hiện sai các tác vụ, cảnh báo khi số tiền vượt mức ban đầu, …

● Chatbot ai hỗ trợ người dùng trong việc quản lý chi tiêu

● Truy vấn, khai thác dữ liệu sử dụng ngôn ngữ tự nhiên

● Bộ đếm thời gian pomodoro

- Xây dựng được ứng dụng với UI thân thiện và dễ sử dụng đáp ứng được trải nghiệm của người dùng

- Hỗ trợ cho các bạn sinh có thể quản lý chi tiêu theo ngày, tháng, năm

- Hỗ trợ việc cập nhật tiền thực tế đã sử dụng để có thể quản lý được chi tiêu theo kế hoạch đã đặt ra

- Hỗ trợ ghi chú các công việc cần phải thực hiện trong ngày

- Hỗ trợ quản lý todolist giúp có thể quản lí, ghi nhớ công việc, nhiệm vụ và thực hiện theo trình tự mà không quên hay bỏ sót

- Chatbot ai hỗ trợ người dùng trong việc quản lý chi tiêu và hỗ trợ admin trong quá trình truy vấn dữ liệu trong hệ thống

- Có sử dụng JWT là một công nghệ phổ biến hiện nay dùng để xác thực và phân quyền chức năng cho người dùng Bên cạnh đó hệ thống sử dụng cơ chế access token và refresh token để đảm bảo tính an toàn dữ liệu cho người dùng, mang lại trải nghiệm tốt cho người dùng

- Chưa tích hợp đăng nhập bằng Google, github, facebook,

- Giao diện một số trang còn chưa đẹp mắt

Từ những nhược điểm đã nêu trên và tiếp tục kế thừa, phát huy những ưu điểm đạt đực, một số hướng phát triển tiếp theo của ứng dụng như sau:

- Trong tương lai sẽ tích hợp đăng nhập bằng Google, facebook, github, …

- Xây dựng trang giúp các bạn sinh viên có thể chia sẻ được quá trình, cách thức quản lý chi tiêu của mình cho các bạn khác đặc biệt là các bạn sinh viên năm nhất

- Xây dựng, tích hợp nhiều công cụ hỗ trợ sinh viên trong quá trình học tập

- Xây dựng chức năng hỗ trợ làm việc nhóm cho các bạn sinh viên

- Cải tiến, nâng cấp chatbot để có thể hỗ trợ nhiều hơn trong quá trình quản lý chi tiêu, công việc, khai thác dữ liệu.

ƯU ĐIỂM

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng 05 năm 2024

(Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Độc lập – Tự do – Hạnh Phúc

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Phan Thái Bảo MSSV 1: 20110071

Họ và tên Sinh viên 2: Trương Thuận Hòa MSSV 2: 20110485

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng ứng dụng web quản lí chi tiêu, khai thác dữ liệu sử dụng mô hình ngôn ngữ lớn

Họ và tên Giáo viên phản biện: ThS Huỳnh Xuân Phụng

1 Về nội dung đề tài & khối lượng thực hiện:

4 Đề nghị cho bảo vệ hay không ?

Tp Hồ Chí Minh, ngày tháng 05 năm 2024

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

Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành và sâu sắc nhất đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí

Minh đã tạo điều kiện cho nhóm được học tập, phát triển nền tảng kiến thức sâu sắc và thực hiện đề tài này

Bên cạnh đó nhóm thực hiện xin gửi đến thầy Nguyễn Đăng Quang lời cảm ơn sâu sắc nhất Trải qua một quá trình dài học tập và thực hiện đề tài trong thời gian qua Thầy đã tận tâm chỉ bảo nhiệt tình nhóm thực hiện trong suốt quá trình từ lúc bắt đầu cũng như kết thúc đề tài này

Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm với những kinh nghiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường và thực tập ở các công ty Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy Nguyễn Đăng

Quang đã tặng cho nhóm một khối lượng kiến thức và kinh nghiệm khổng lồ về chuyên ngành và công việc trong tương lai Đặc biệt điều này đã giúp và thôi thúc nhóm hoàn thành được đề tài Đây sẽ là hành trang vô cùng lớn của cho nhóm trước khi bước ra một cuộc sống mới

Tuy nhiên lượng kiến thức là vô tận và với khả năng hạn hẹp nhóm thực hiện đã rất cố gắng để hoàn thành một cách tốt nhất Chính vì vậy việc xảy ra những thiếu sót là điều khó có thể tránh khỏi Nhóm thực hiện hi vọng nhận được sự góp ý tận tình của quý thầy (cô) qua đó nhóm có thể rút ra được bài học kinh nghiệm và hoàn thiện và cải thiện nâng cấp lại sản phẩm của mình một cách tốt nhất có thể

Nhóm thực hiện xin chân thành cảm ơn!

Phan Thái Bảo – 20110071 Trương Thuận Hòa - 20110485 ĐỀ CƯƠNG KHOÁ LUẬN TỐT NGHIỆP

Họ và tên Sinh viên 1: Phan Thái Bảo MSSV: 20110071

Họ và tên Sinh viên 2: Trương Thuận Hoà MSSV: 20110485

Thời gian làm luận văn: 04/03/2024 – 15/06/2024

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Xây dựng ứng dụng web quản lý chi tiêu, khai thác dữ liệu sữ dụng mô hình ngôn ngữ lớn

Giảng viên hướng dẫn: ThS Nguyễn Đăng Quang

Nhiệm vụ của khoá luận:

Tìm hiểu công nghệ: Reactjs, Flutter, Net, Redux ToolKit, Json Web Token (JWT), Restful API, PostgreSQL, Firebase, Design Pattern, Large language model (LLMs), PandasAI, OpenAI và Model ChatGPT, Langchain, Rag

- Sử dụng RestFull API, Net để viết APIs cho các module trong hệ thống

- Sử dụng PostfreSQL để lưu trữ dữ liệu trong hệ thống

- Sử dụng FireBase để lưu trữ hình ảnh, gửi thông báo trong hệ thống

- Sử dụng Json Web Token để xác thực và uỷ quyền cho hệ thống APIs hoạt động tốt và hiệu quả

- Sử dụng Reactjs, Flutter để thiết kế và xử lý giao diện cho người dùng thao tác trên hệ thống cho web và ứng dụng di động

- Thực nghiệm, kiểm thử hiệu suất và độ chính xác của Large language model (LLMs), PandasAI, OpenAI và Model ChatGPT, Lanchain, Rag

- Sử dụng LLMs, PandasAI, OpenAI và Model ChatGPT để tạo chatbot giúp người dùng quản lý chi tiêu hiệu quả Đề cương viết khoá luận

1.1 Tính cấp thiết của đề tài

1.4 Mục tiêu của đề tài

1.5 Ý nghĩa khoa học và thực tiễn

1 CHƯƠNG 1: MÔ HÌNH HOÁ YÊU CẦU 1.1 Xác định yêu cầu

1.2 Mô hình hoá yêu cầu

2 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

2.6 Truy vấn dữ liệu sử dụng LLMs