Phát triển ứng dụng web quản lý công việc

ỦY BAN NHÂN DÂN TP.HCM TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THỦ ĐỨC KHOA CÔNG NGHỆ THÔNG TIN NGHIÊN CỨU KHOA HỌC NĂM HỌC 2020-2021 Tên đề tài: PHÁT TRIỂN ỨNG DỤNG WEB QUẢN LÝ CÔNG VIỆC Giảng viên hướng dẫn: Nguyễn Huy Hoàng Tác giả: Nguyễn Minh Triết TP Hồ Chí Minh, năm 2021 ii ỦY BAN NHÂN DÂN TP.HCM TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THỦ ĐỨC KHOA CÔNG NGHỆ THÔNG TIN NGHIÊN CỨU KHOA HỌC NĂM HỌC 2020-2021 Tên đề tài: PHÁT TRIỂN ỨNG DỤNG WEB QUẢN LÝ CÔNG VIỆC GIẢNG VIÊN HƯỚNG DẪN (Ký, Ghi rõ họ tên) TÁC GIẢ/CHỦ NHIỆM ĐỀ TÀI (Ký, Ghi rõ họ tên) Nguyễn Huy Hoàng Nguyễn Minh Triết TRƯỞNG KHOA (Ký, Ghi rõ họ tên) Lê Diên Tâm Tp Hồ Chí Minh, ngày 02 tháng 06 năm 2021 iii LỜI CÁM ƠN Lời xin chân thành cám ơn Trường Cao Đẳng Công Nghệ Thủ Đức, Khoa Công nghệ thông tin, ThS Nguyễn Huy Hoàng tạo điểu kiện, tận tâm hướng dẫn, truyền đạt kiến thức cho em thêm ý kiến, nhận xét để giúp em hoàn thành Đề tài Nghiên Cứu Khoa Học(NCKH) với tên đề tài “Phát triển ứng dụng web quản lý công việc” Em phát triển ứng dụng từ tháng 01 năm 2021 sau có ý tưởng ứng dụng đăng ký thực đề tài NCKH với Khoa Công nghệ thông tin Sau đăng ký đề tài trình bày ý tưởng ra, em thầy cô ủng hộ tin tưởng đề tài Và em bắt đầu phát triển, cài đặt testing toàn hệ thống tháng 6/2021 Do thời gian phát triển ứng dụng có tháng nên chắn hệ thống cịn có nhiều sai sót, mong q Thầy Cơ đóng góp ý kiến để hệ thống hồn thiện phát triển sâu xa Cuối cùng, lần xin gửi lời cám ơn chân thành tới Trường Cao Đẳng Công Nghệ Thủ Đức, Khoa Công Nghệ Thơng Tin Thầy Nguyễn Huy Hồng Kính chúc Thầy Cơ có sức khỏe thành cơng nghiệp! Em xin chân thành cám ơn! Sinh viên Nguyễn Minh Triết ii MỤC LỤC PHẦN PHẦN MỞ ĐẦU 1.1 ĐẶT VẤN ĐỀ 1.1.1 Tính cấp thiết đề tài 1.1.2 Mục đích đề tài 1.1.3 Phạm vi nghiên cứu 1.1.4 Định hướng phát triển đề tài 1.1.5 Nội dung nghiên cứu PHẦN CÁC CÔNG NGHỆ, KỸ THUẬT SỬ DỤNG TRONG ĐỀ TÀI 2.1 Các công nghệ kỹ thuật áp dụng 2.2 Những ưu điểm lý áp dụng công nghệ PHẦN ĐẶC TẢ YÊU CẦU PHẦN MỀM 3.1 Mô tả yêu cầu 3.1.1 Phát biểu toán 3.1.2 Mục tiêu hệ thống 3.1.3 Phạm vi hệ thống 3.1.4 Người dùng 3.2 Lấy yêu cầu phần mềm 3.2.1 Quy trình nghiệp vụ 3.2.2 Yêu cầu chức người dùng 26 3.2.3 Yêu cầu khác 26 3.3 Chức hệ thống 27 3.3.1 Sơ đồ Usecase 27 3.3.2 Mô tả Usecase 27 3.3.3 Yêu cầu chức 28 3.3.4 Yêu cầu phi chức 38 PHẦN XÂY DỰNG CHƯƠNG TRÌNH 39 4.1 Ràng buộc kỹ thuật 39 4.2 Hệ thống 39 4.2.1 Mơ hình hệ thống 39 4.2.2 Database – MongoDB 40 4.2.3 Danh sách route API xử lý Server 44 i 4.3 Phát triển hệ thống 44 4.4 Trải nghiệm hệ thống thực tế 44 4.5 Kiểm thử ứng dụng 52 4.5.1 Kiểm thử chức ứng dụng 52 4.5.2 Kiểm thử hiệu ứng dụng 52 PHẦN KẾT LUẬN – HƯỚNG PHÁT TRIỂN 53 5.1 Kết đạt 53 5.1.1 Kiến thức học 53 5.2 Hạn chế phần mềm 53 5.3 Hướng phát triển 53 5.4 Kết luận 53 ii DANH MỤC HÌNH Hình 1: Trang quản lý Users 29 Hình 2: Form chỉnh sửa user 29 Hình 3: Trang quản lý dự án 30 Hình 4: Trang chủ mục tạo dự án 31 Hình 5: Dự án sau tạo 31 Hình 6: Nhập ID để tham gia dự án 32 Hình 7: Trang dự án 33 Hình 8: Bình luận dự án 34 Hình 9: công việc nhỏ bên công việc 35 Hình 10: Đánh dấu hồn thành cơng việc 36 Hình 11: Label complete cho cơng việc hồn thành 36 Hình 12: Nắm giữ di chuyển vị trí công việc 37 Hình 13: Sơ đồ miêu tả hệ thống 39 Hình 14: Các collections Database 40 Hình 15: Màn hình đăng nhập 45 Hình 16: Giao diện trang chủ 45 Hình 17: Giao diện trang Admin 46 Hình 18: Giao diện Board dự án 46 Hình 19: Giao diện thêm công việc 47 Hình 20: Giao diện thêm Lane 48 Hình 21: Giao diện chi tiết cơng việc 49 Hình 22: Màn hình xem danh sách cơng việc dạng Table 50 Hình 23: Màn hình Chart dự án 50 Hình 24: Màn hình thông báo 51 Hình 25: Màn hình Setting owner 51 Hình 26: Màn hình lịch sử xóa dự án 51 iii DANH MỤC SƠ ĐỒ Sơ đồ 1: Quy trình tạo Project Sơ đồ 2: Quy trình tham gia Project Sơ đồ 3: Quy trình thêm người dùng khác vào Project Sơ đồ 4: Quy tạo Lane Project 10 Sơ đồ 5: Quy trình thêm cơng việc vào Lane 11 Sơ đồ 6: Quy trình thêm cơng việc nhỏ công việc 12 Sơ đồ 7: Quy trình bình luận cơng việc 13 Sơ đồ 8: Quy trình xem cơng việc theo dạng Bảng 14 Sơ đồ 9: Quy trình kiểm tra biểu đồ 15 Sơ đồ 10: Quy kiểm tra thông báo dự án 16 Sơ đồ 11: Quy trình chỉnh sửa thơng tin cơng việc 17 Sơ đồ 12: Quy trình xóa Lane Project 18 Sơ đồ 13: Quy trình xóa cơng việc 19 Sơ đồ 14: Quy trình đổi level thành viên 20 Sơ đồ 15: Quy trình đánh dấu hồn thành cơng việc 21 Sơ đồ 16: Quy trình thay đổi thơng tin người dùng 22 Sơ đồ 17: Quy trình xóa người dùng khỏi hệ thống 24 Sơ đồ 18: Quy trình xóa dự án 25 Sơ đồ 19: Usecase hệ thống 27 iv  (4) – Server SocketIo đảm nhận tác vụ Realtime, đồng liệu hiển thị với nhiều Client Database – MongoDB 4.2.2 Thiết kế, mô tả database Hình 14: Các collections Database Database gồm collection sau: 4.2.2.1 Project (Dự án) Tên field Mô tả Kiểu liệu Ghi id Được tạo tự động ObjectId name Tên hiển thị Project String required owner Chủ sở hữu Project ObjectId required members Danh sách thành viên Array of ObjectId Project lanes Danh sách cột chứa công việc Project 40 Array of ObjectId roles Các quyền Array of thành viên ObjectId Project removedMembers Danh sách member bị đuổi khỏi Project Array of ObjectId createAt Ngày Project tạo Date 4.2.2.2 Mặc định thời gian Lane (Cột chứa công việc) Tên field Mô tả Kiểu liệu Ghi id Được tạo tự động ObjectId title Tiêu đề cột String required color Màu sắc String Required header cột Có giá trị default tasks Danh sách công việc Array of ObjectId createAt Ngày Project Date tạo 4.2.2.3 Mặc định thời gian Task (Công việc giao) Tên field Mô tả Kiểu liệu id Được tạo tự động ObjectId creator Người giao công việc ObjectId assignees Lớp giáo Array of viên Object name Tên cơng việc String description Miêu tả, thích cơng việc String 41 Ghi required required deliveryDate Ngày công Date required việc mặc định lấy ngày giao dateAccept Ngày công việc nhận Date dueDate Ngày hết hạn cơng việc Date required difficult Độ khó Number Required cơng việc 1: Rất dễ 2: Dễ 3: Bình thường 4: Khó 5: Rất khó list List mini Array task bên Cơng việc complete Hồn thành Boolean required Mặc định false 4.2.2.4 Roles (Quyền, vai trò Project) Tên field Mô tả Kiểu liệu id Được tạo tự động ObjectId user Người dùng ObjectId level Cấp role Number createAt Ngày Project tạo Date 4.2.2.5 User (Người dùng) Tên field Mô tả Kiểu liệu id Được tạo tự động ObjectId oauth2Id Id Oauth2 String email email String password Mật String 42 Ghi required Mặc định thời gian Ghi required username Tên người dùng String avatar Ảnh đại diện String required người dùng pushSubscription Subscription để Object đẩy thông báo notifications Danh sách thông báo cho Object người dùng isAdmin Có phải Admin? Boolean Mặc định false createAt Ngày Project Date Mặc định thời tạo 4.2.2.6 gian Comment (Bình luận công việc) Tên field Mô tả Kiểu liệu id Được tạo tự động sender Người bình luận ObjectId content Nội dung bình Ghi ObjectId String required Date required luận time Thời gian bình Mặc định thời gian luận taskId 4.2.2.7 ID công việc bình luận History (Lịch sử xóa dự án) Tên field id ObjectId Mô tả Được tạo tự Kiểu liệu Ghi ObjectId động user Người dùng thực việc xóa ObjectId required content Nội dung việc xóa String required 43 time Thời gian bình Date required Mặc định thời luận gian projectId ID dự án ObjectId required 4.2.3 Danh sách route API xử lý Server Đây route API Frontend gửi request để lấy liệu Chức Route /project Route project, nhận xử lý request liên quan đến project /lane Route lane, nhận xử lý request liên quan đến lane /task Route task, nhận xử lý request liên quan đến task /role Route role, nhận xử lý request liên quan đến role /user Route user, nhận xử lý request liên quan đến user /subscription Route subscription, nhận xử lý request liên quan đến subscription 4.3 Phát triển hệ thống Thời gian Cơng việc 01/2021 Phân tích dựng Model cho sở liệu 02/2021 Phát triển API thêm, xóa, sửa Model 03/2021 Xây dựng giao diện Frontend cho trang quản lý công việc 04/2021 Phát triển thêm chức đẩy thơng báo, tạo biểu đồ thống kê 05/2021 Tính hợp SocketIo để xử lý realtime đồ liệu nhiều người dùng 06/2021 Kiểm thử, sửa lỗi viết báo cáo 4.4 Trải nghiệm hệ thống thực tế Một vài ảnh chụp hình hệ thống sử dụng thực tế 44 Hình 15: Màn hình đăng nhập Hình 16: Giao diện trang chủ 45 Hình 17: Giao diện trang Admin Hình 18: Giao diện Board dự án 46 Hình 19: Giao diện thêm cơng việc 47 Hình 20: Giao diện thêm Lane 48 Hình 21: Giao diện chi tiết cơng việc 49 Hình 22: Màn hình xem danh sách cơng việc dạng Table Hình 23: Màn hình Chart dự án 50 Hình 24: Màn hình thơng báo Hình 25: Màn hình Setting owner Hình 26: Màn hình lịch sử xóa dự án 51 4.5 Kiểm thử ứng dụng Việc kiểm thử hệ thống tiến hành sau: 4.5.1 Kiểm thử chức ứng dụng Việc kiểm thử thực sau hoàn thành chức kiểm lại tổng quát lần trước khi, vài tình realtime thực test 2-3 trình duyệt lúc, chức test: - Tạo Project Tham gia Project - Thêm user vào Project - Tạo Lane - Tạo Task Comment Task Tạo Task check push notification Tạo task check notification có task - Tạo task check notification ngày trước hết hạn Tạo task check notification trước hết hạn Tạo mini task Task Check hoàn thành Task xem biểu đồ hiển thị - Xóa User Thay đổi quyền admin User Xóa Project 4.5.2 Kiểm thử hiệu ứng dụng Quá trình kiểm tra hiệu hệ thống sau: - Kiểm tra tốc độ xử lý thêm, xóa, sửa project, lane, task, user bảo đảm 1s (điều kiện ổn định) - Kiểm tra xử lý realtime đồng liệu 3s 52 PHẦN KẾT LUẬN – HƯỚNG PHÁT TRIỂN 5.1 Kết đạt 5.1.1 Kiến thức học - Hiểu sâu React khả tối ưu xử lý phía giao diện người dùng - Xây dựng giao diện người dùng đơn giản, dễ sử dụng thú vị sử dụng Thiết kế sở liệu không quan hệ tối ưu việc lấy liệu - Thêm kiến thức thiết kế API - Biết cách xử lý realtime có chia socket room với SocketIo 5.2 Hạn chế phần mềm - Chưa có nhiều phương thức đăng nhập Vẫn chưa có xử lý mang tính bảo mật cao 5.3 Hướng phát triển Trong tương lai, em phát triển thêm khả bảo mật, tối ưu khả xử lý Frontend, thêm biểu đồ thống kê phức tạp hơn, 5.4 Kết luận Ứng dụng quản lý công việc em phát triển để giảng viên trường Cao Đẳng Công Nghệ Thủ Đức sử dụng để quản lý cơng việc thật gọn gàng, đơn giản thật rõ ràng, minh bạch công việc giao Ứng dụng giúp giao viên quản lý cơng việc sinh viên áp dụng vào giảng dạy Ngoài dùng ứng dụng cho thân để quản lý cơng việc tốt hơn, giúp ta ghi nhớ nắm thời gian cần hồn thành cơng việc Với thời gian gần tháng phát triển, dù bị chia phối công việc công ty việc học, em cố gắng để dựng hệ thống tốt Chắc chắn hệ thống lỗi, em mong nhận đóng góp ý kiến từ Q Thầy Cơ để em hồn thiện hệ thống Trong thời gian tới, em cố gắng phát triển ứng dụng quản lý cơng việc mạnh mẽ với nhiều tính chuyên biệt theo nhu cầu không cho giảng viên mà cho sinh viên trường Cao Đẳng Công Nghệ Thủ Đức Em xin chân thành cám ơn! 53 TÀI LIỆU THAM KHẢO [1] D Arrachequesne, Socket.IO, 16-Jul-2021 [Online] Available: https://socket.io/ [2] “Introduction to Push Notifications | Web | Google Developers,” Google [Online] Available: https://developers.google.com/web/ilt/pwa/introduction-topush-notifications [3] “Mongoose,” Mongoose https://mongoosejs.com/ ODM v5.13.3 [Online] Available: [4] “Node.js web application framework,” Express [Online] Available: https://expressjs.com/ [5] “React – A JavaScript library for building user interfaces,” – A JavaScript library for building user interfaces [Online] Available: https://reactjs.org/ [6] S Shanmugam, “Add Google Login to your React Apps in 10 mins,” DEV Community, 26-Oct-2020 [Online] Available: https://dev.to/sivaneshs/addgoogle-login-to-your-react-apps-in-10-mins-4del [7] “UI: A popular React UI framework,” Material [Online] Available: https://material-ui.com/ 54