Khóa luận xây dựng website quản lý công việ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” Bùi Như Phước - Nguyễn Tấn Thành KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE QUẢN LÝ CÔNG VIỆC BUILDING A TASK MANAGEMENT WEBSITE “KỸ SƯ NGÀNH CÔNG NGHỆ PHẦN MỀM” TP HỒ CHÍ MINH, 2023 “ĐẠ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” BÙI NHƯ PHƯỚC - NGUYỄN TẤN THÀNH “KHÓA LUẬN TỐT NGHIỆP” XÂY DỰNG WEBSITE QUẢN LÝ CÔNG VIỆC BUILDING A TASK MANAGEMENT WEBSITE KỸ SƯ NGÀNH CÔNG NGHỆ PHẦN MỀM “GIẢNG VIÊN HƯỚNG DẪN” ThS Trần Thị Hồng Yến TP HỒ CHÍ MINH, 2023 “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.” Chủ tịch Thư ký Ủy viên Ủy viên ĐẠ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 “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 WEBSITE QUẢN LÝ CÔNG VIỆC BUILDING A TASK MANAGEMENT WEBSITE Nhóm SV thực hiện: Cán hướng dẫn: Bùi Như Phước 19522052 Nguyễn Tấn Thành 19522239 ThS Trần Thị Hồng Yến Đánh giá Khóa luận “ Về báo cáo: Số trang: 86 Số chương: Số bảng số liệu: 30 Số hình vẽ: 32 Số tài liệu tham khảo: Sản phẩm: Một số nhận xét hình thức báo cáo: Về nội dung nghiên cứu: Về chương trình ứng dụng: Về thái độ làm việc sinh viên: Đánh giá chung: .” Điểm sinh viên: Bùi Như Phước: ………/10 Nguyễn Tấn Thành: ………/10 Người nhận xét (Ký ghi rõ họ tên) ĐẠ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 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 WEBSITE QUẢN LÝ CÔNG VIỆC BUILDING A TASK MANAGEMENT WEBSITE “Nhóm SV thực hiện: Bùi Như Phước Nguyễn Tấn Thành Cán phản biện: 19522052 19522239 Đánh giá Khóa luận Về báo cáo: Số trang: 86 Số chương: Số bảng số liệu: 30 Số hình vẽ: 32 Số tài liệu tham khảo: Sản phẩm: Một số nhận xét hình thức báo cáo: Về nội dung nghiên cứu: Về chương trình ứng dụng: Về thái độ làm việc sinh viên: Đánh giá chung: Điểm sinh viên:” Bùi Như Phước: ………/10 Nguyễn Tấn Thành: ………/10 Người nhận xét (Ký ghi rõ họ tên) “LỜI CẢM ƠN” Đầu tiên, chúng em xin phép gửi lời cảm ơn đến cô Trần Thị Hồng Yến quý thầy cô Trường Đại học Công nghệ Thông tin – Đại học Quốc gia TP Hồ Chí Minh tận tâm dẫn dắt, giảng dạy giúp đỡ chúng em trình học tập rèn luyện để đạt kiến thức kĩ cần có cho khóa luận tốt nghiệp bắt đầu nghiệp lập trình viên tương lai Website quản lý cơng việc sản phẩm đúc kết kiến thức tích lũy đồng thời kết hợp với nhiều kiến thức mà nhóm chúng em cố gắng xây dựng thời gian qua Tuy nhiên, nhóm nhận thấy đề tài cịn nhiều nhược điểm khó khăn kinh nghiệm kiến thức hạn chế Vì vậy, chúng em mong nhận đóng góp, ý kiến từ quý thầy cô để giúp cho sản phẩm tâm huyết khóa luận tốt nghiệp chúng em củng cố hoàn thiện Chúng em xin chân thành cảm ơn quý thầy cô Thành phố Hồ Chí Minh, tháng 07 năm 2023 Nhóm sinh viên thực Bùi Như Phước Nguyễn Tấn Thành “MỤC LỤC TÓM TẮT KHÓA LUẬN Chương TỔNG QUAN ĐỀ TÀI 1.1 Lí chọn đề tài 1.2 Mục đích dự án 1.3 Khảo sát trạng 1.3.1 Khảo sát trang sản phẩm tương tự 1.3.2 Đánh giá trạng hướng giải 1.4 Đối tượng sử dụng 1.5 Công nghệ sử dụng Chương CƠ SỞ LÝ THUYẾT 2.1 Các công nghệ sử dụng 2.1.1 ReactJS 2.1.2 Giới thiệu NestJS 2.1.3 Ant Design 10 2.1.4 OpenAI Library 11 2.2 Tổng quan hệ sở liệu 13 2.2.1 Hệ quản trị sở liệu MySQL 13 2.2.2 Google Firebase Database 14 Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 15 3.1 Phân tích yêu cầu hệ thống 15 3.1.1 Danh sách yêu cầu chức 15 3.1.2 Danh sách yêu cầu phi chức 15 3.2 Xác định yêu cầu 16 3.2.1 Danh sách biểu mẫu 16 3.2.2 Danh sách biểu mẫu quy định biểu mẫu 17 3.3 Đặc tả use-case 24 3.3.1 Danh sách Actor 24 3.3.2 Danh sách Use-case 25 3.3.3 Đặc tả yêu cầu 28 3.4 Sơ đồ hoạt động 41 3.4.1 Đăng ký 41 3.4.2 Quản lý công việc (task) 42 3.4.3 Quản lý dự án 43 3.4.4 Quản lý group chat 44 CHƯƠNG XÂY DỰNG ỨNG DỤNG 45 4.1 Thiết kế liệu 45 4.1.1 Sơ đồ thiết kế 45 4.1.2 Danh sách bảng liệu sơ đồ 45 4.1.3 Mô tả bảng liệu 46 4.2 Thiết kế giao diện xử lý 50 4.2.1 Sơ đồ liên kết hình 50 4.2.2 Danh sách hình 50 4.2.3 Chi tiết hình 54 4.3 Thiết kế kiến trúc 63 4.3.1 Kiến trúc hệ thống 63 4.2.3 Chi tiết hình 4.2.3.1 Màn hình đăng nhập Hình 4.3 Màn hình đăng nhập - Màn hình đăng nhập giúp người dùng nhập thơng tin Username Password để đăng nhập vào ứng dụng - Người dùng nhấn vào “Forgot your password” trường hợp quên mật - Người dùng đăng ký tài khoản nhấn “Create an account” - Trang đăng nhập chuyển đến trang chủ người dùng đăng nhập thành cơng 54 4.2.3.2 Màn hình đăng ký Hình 4.4 Màn hình đăng ký - Màn hình đăng ký có chức tạo tài khoản cho người dùng nhập đủ thông tin bao gồm Username, Password, Re-Password - Màn hình báo lỗi người dùng nhập Password khơng định dạng (Ít kí tự, phải có kí tự số chữ viết hoa) Re-Password không giống với Password - Sau tạo tài khoản thành cơng, hình đăng ký chuyển đến hình đăng nhập 4.2.3.3 Màn hình Dashboard Hình 4.5 Màn hình Dashboard 55 - Màn hình Dashboard có chức hiển thị biểu đồ thống kê thông tin quan trọng người dùng số lượng task chưa thực hiện, số lượng thành viên, tiến độ dự án 4.2.3.4 Màn hình Calendar Hình 4.6 Màn hình Calendar - Màn hình Calendar có chức hiển thị thời gian thực dự án người dùng tham gia nhằm giúp người dùng có nhìn tổng quan mốc thời gian quan trọng từ xếp cơng việc hiệu 56 4.2.3.5 Màn hình TaskList Hình 4.7 Màn hình TaskList - Màn hình TaskList (Board) hình trang chủ hiển thị sau người dùng đăng nhập - Hiển thị thông tin, danh sách trạng thái task dự án thực Mặc định dự án danh sách dự án người dùng - Trong hình này, người dùng quản lý task tìm kiếm, tạo mới, cập nhật, xóa thay đổi thơng tin trạng thái dự án - Bên cạnh button, hình có hỗ trợ thao tác kéo thả giúp người dùng nhanh chóng thay đổi trạng thái task dự án 57 4.2.3.6 Màn hình thêm task Hình 4.8 Màn hình Thêm Task - Màn hình Thêm Task có giao diện đơn giản gồm tất thông tin cần thiết task, yêu cầu người dùng phải nhập đủ định dạng để thêm task vào project 58 4.2.3.7 Màn hình Update Task Hình 4.9 Màn hình Update Task - Tương tự hình Thêm Task, hình Update Task gồm thơng tin cần thiết Task cho phép người dùng thay đổi thơng số phù hợp 4.2.3.8 Màn hình Projects Hình 4.10 Màn hình Projects 59 - Hiển thị thơng tin, danh sách Project người dùng thực - Trong hình này, người dùng quản lý Project tìm kiếm, tạo mới, cập nhật, xóa thay đổi thơng tin 4.2.3.9 Màn hình Thêm Project Hình 4.11 Màn hình Thêm Project - Màn hình Thêm Task có giao diện đơn giản gồm tất thông tin cần thiết Project, yêu cầu người dùng phải nhập đủ định dạng để thêm task vào project 60 4.2.3.10 Màn hình Cập nhật Project Hình 4.12 Màn hình Cập nhật Project - Tương tự hình Thêm Project, hình Cập nhật Project gồm thơng tin cần thiết Project cho phép người dùng thay đổi thông số phù hợp 4.2.3.11 Màn hình TasmaBot – AI Chatbot Hình 4.13 Màn hình TasmaBot - Màn hình TasmaBot hoạt động ứng dụng nhắn tin đơn giản Chỉ cần người nhận gửi tin nhắn TasmaBot trả lời - Phía góc bên phải nút Infor có chức giới thiệu TasmaBot hướng dẫn sử dụng 61 4.2.3.12 Màn hình Chat Room Hình 4.14 Màn hình Chat Room - Màn hình Chat Room thị danh sách phòng chat người dùng tạo danh sách phòng chat mà người dùng tham gia - Bên phải cửa sổ chat nơi lưu trữ tin nhắn người dùng q trình chat - Người dùng xem danh sách thành viên nhóm chat cách ấn vào nút Member góc phải Nếu người dùng chủ phịng chat, họ thêm, xóa, sửa danh sách thành viên Trường hợp người dùng thành viên nhóm, họ rời khỏi nhóm chat nhấn vào nút Leave 62 4.3 Thiết kế kiến trúc 4.3.1 Kiến trúc hệ thống Hệ thống phát triển theo mơ hình MVC: Hình 4.15 Sơ đồ kiến trúc hệ thống 4.3.2 Các thành phần hệ thống Thành Diễn giải phần Model Chứa resources - lưu trữ toàn liệu ứng dụng Bộ phận cầu nối thành phần bên View Controller View Chứa view (giao diện) - Đây phần giao diện (theme) dành cho người sử dụng Nơi mà người dùng lấy thơng tin liệu MVC thơng qua thao tác truy vấn tìm kiếm sử dụng thông qua website Controller layer Bộ phận có nhiệm vụ xử lý yêu cầu người dùng đưa đến thơng qua view Từ đó, Controller đưa liệu phù hợp với người dùng Bên cạnh đó, Controller cịn có chức kết nối với model 63 Bussiness layer Đây tầng có nhiệm vụ xử lý logic request sau controller tiếp nhận, từ gọi đến tầng Repository để lấy liệu phù hợp Repository Đây tầng có nhiệm vụ thao tác trực tiếp với database cung cấp, lưu trữ, chỉnh sửa database theo yêu cầu lớp Bussiness 64 TỔNG KẾT 5.1 Kết đạt “Đề tài khóa luận “Xây dựng website quản lý cơng việc” thực kết sau: • Áp dụng cách phân tích thiết kế dự án phần mềm, quy trình phát triển phần mềm vấn đề liên quan đến quản lý triển khai dự án phần mềm, cách thiết lập, quản lý triển khai dự án học • Tìm hiểu, nâng cao kiến thức công nghệ xây dựng website ReactJS, NestJS, ChartJS, EmailJs, Ant Design, Bootstraps, MySQL Firebase • Sản phẩm triển khai trực tuyến địa https://tasmad42e2.web.app Source code lưu tại: github.com/TanThanh- CityBoi/tasma-be.git • Xây dựng website quản lý cơng việc đáp ứng tiêu chí sau: - Đầy đủ tính cần thiết website quản lý cơng việc dành cho người dùng theo nhóm cá nhân - Website xếp, bố cục cách hợp lý, tạo điều kiện cho người dùng dễ định hướng website - Giúp người dùng nắm rõ thông tin ứng dụng, quản lý công việc, quản lý dự án với trợ giúp AI chatbot.” 5.2 Ưu điểm “Trải nghiệm người dùng website dễ dàng thông qua việc thiết kế giao diện đồ họa đẹp với cửa sổ, hộp thoại thao tác kéo thả Website tích hợp với nhiều tính quản lý công việc từ trang web khác, mang đến mơi trường tồn diện cho việc quản lý cơng việc Đặc biệt, tích hợp thành viên, chatbot, quản lý công việc quản lý dự án giúp tăng cường tương tác hiệu trình làm việc Website xây dựng để hoạt động cách ổn định máy tính tảng, bao gồm trình duyệt khác Điều đảm bảo người dùng truy cập sử dụng website cách linh hoạt, không phụ thuộc vào thiết bị hay hệ điều hành mà họ sử dụng 65 Website tích hợp cơng nghệ chatbot AI tiên tiến với thư viện OpenAI, mang đến khả tư vấn giải đáp thắc mắc cho người dùng cách xác tận tâm Nhờ tích hợp này, người dùng tương tác với chatbot để nhận thơng tin hữu ích, gợi ý hỗ trợ trình sử dụng website Sự kết hợp công nghệ chatbot OpenAI Library nâng cao khả tương tác cung cấp trải nghiệm người dùng tốt có thể.” 5.3 Nhược điểm “Đối với mơ hình quản lý dự án, chúng em chưa cung cấp đủ mơ hình mẫu cho người dùng lựa chọn Điều hạn chế khả linh hoạt tùy chỉnh người dùng việc quản lý dự án Chúng em nghiên cứu phát triển thêm mơ hình quản lý dự án để đáp ứng nhu cầu đa dạng người dùng Hiệu suất hệ thống chậm chạp Để cải thiện điều này, chúng em nhận thấy cần thiết phải cấu trúc lại dự án tối ưu mã nguồn câu truy vấn Điều giúp tăng tốc độ phản hồi, đặc biệt tốc độ trả lời Chatbot việc tạo sơ đồ thống kê hiệu Ngồi ra, có số cải thiện giao diện, nhiên số hình chưa thiết kế đẹp mắt, gọn gàng trực quan Đồng thời, ứng dụng chưa cung cấp đủ tính tùy biến cho người dùng Chúng em tìm cách cung cấp nhiều tùy chọn tùy chỉnh hơn, cho phép người dùng điều chỉnh tùy chỉnh theo nhu cầu cá nhân họ Cuối cùng, chúng em nhận thấy thống kê hạn chế số lượng sơ đồ tùy chọn cho người dùng Chúng em nỗ lực mở rộng cải thiện sơ đồ thống kê có sẵn, đồng thời cung cấp nhiều tùy chọn thống kê để người dùng nắm bắt thông tin cách linh hoạt chi tiết hơn.” 66 5.4 Hướng phát triển “Nghiên cứu đáp ứng yêu cầu đề Tuy nhiên, với thêm thời gian nỗ lực, Chúng em đề xuất số cải tiến phát triển chức sau để nâng cao hồn thiện đề tài: • Tạo mơi trường chạy ứng dụng tảng di động, nhằm tăng tính tiện lợi khả tiếp cận người dùng Điều cho phép người dùng truy cập tương tác với ứng dụng thông qua thiết bị di động điện thoại thông minh máy tính bảng • Nâng cao khả tương tác Chatbot ứng dụng, nhằm mang lại trải nghiệm người dùng tốt Chúng em đề xuất tăng cường tích hợp Chatbot chức ứng dụng, cho phép người dùng tương tác cách linh hoạt thuận tiện • Tiếp tục cải thiện giao diện để đạt trải nghiệm người dùng tốt Chúng em tập trung vào việc tối ưu hóa giao diện, làm cho trực quan, gọn gàng hấp dẫn Đồng thời, Chúng em bổ sung hướng dẫn hỗ trợ cho người dùng sử dụng website lần đầu, giúp họ dễ dàng thích nghi sử dụng ứng dụng cách hiệu • Phát triển thêm tính thống kê hoàn chỉnh mở rộng khả thống kê liệu Chúng em đề xuất mở rộng phạm vi thống kê, cung cấp nhiều sơ đồ tùy chọn thống kê để người dùng phân tích liệu tìm hiểu thơng tin chi tiết tiến độ cơng việc, hiệu suất xu hướng • Hỗ trợ đa ngôn ngữ đa chủ đề giao diện, để đáp ứng nhu cầu người dùng đến từ nhiều quốc gia văn hóa khác Chúng em cung cấp khả lựa chọn ngôn ngữ chủ đề giao diện, giúp người dùng tùy chỉnh theo sở thích cá nhân dễ dàng sử dụng ứng dụng theo cách phù hợp với họ • Hỗ trợ đánh giá lực thành viên dựa thơng số thành viên đó, giúp người quản lý có nhìn tổng qt đắn với nhân Với cải tiến phát triển này, chúng em tin đề tài mang lại trải nghiệm tốt cho người dùng đáp ứng nhiều nhu cầu khác việc quản lý công việc.” 67 TÀI LIỆU THAM KHẢO [1] ThS Trần Anh Dũng (2021), Công nghệ phần mềm chuyên sâu, Khoa Công Nghệ Phần Mềm - Đại học Công Nghệ Thông Tin - Đại Học Quốc Gia TP.HCM [2] ThS Nguyễn Thị Thanh Trúc (2022), Kiểm chứng phần mềm, Khoa Công Nghệ Phần Mềm - Đại học Công Nghệ Thông Tin - Đại Học Quốc Gia TP.HCM [3] Joel Murach, Ray Harris (2016), Lập trình MySQL, Nhà xuất Murach - Trường Đại Học FPT [4] Open AI Offical Website (2022), Open AI Documentation, 27/06/2023, từ < https://platform.openai.com/docs/introduction> [5] Oracle Offical Website (2020), MySQL Documentation, 27/05/2023, từ < https://dev.mysql.com/doc/> [6] NestJS Offical Website (2022), NestJS Introduction, 23/4/2023, từ < https://docs.nestjs.com/> [7] Wikipedia (2019), What is Reactjs?, 10/07/2023, từ [8] Ant Design Offical Website (2021), Ant Design of React, 22/06/2023, từ [9] FPT Cloud (2022), Firebase gì? Ưu nhược điểm & Các dịch vụ Firebase, 15/06/2023, từ 68