Xây dựng ứng dụng hỗ trợ học tập nhóm cho học sinh, sinh viên

ĐẠ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 HỒNG KHOA – NGUYỄN TIẾN DŨNG KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG HỖ TRỢ HỌC TẬP NHÓM CHO HỌC SINH, SINH VIÊN Build an application to support group learning for students KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠ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 HỒNG KHOA – 17520087 NGUYỄN TIẾN DŨNG - 17520376 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG HỖ TRỢ HỌC TẬP NHÓM CHO HỌC SINH, SINH VIÊN Build an application to support group learning for students KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS NGUYỄN THỊ THANH TRÚC 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 ………………… 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 ĐHQG TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập – Tự Do – Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày……tháng……năm 2020 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 HỖ TRỢ HỌC TẬP NHÓM CHO HỌC SINH, SINHVIÊN Nhóm SV thực hiện: Nguyễn Hồng Khoa – 17520087 Nguyễn Tiến Dũng – 17520376 Cán hướng dẫn: ThS Nguyễn Thị Thanh Trúc Đánh giá Khóa luận: Về báo cáo: Số trang ……… Số chương ……… Số bảng số liệu ……… ……… Số tài liệu tham khảo ……… Sản phẩm Số hình vẽ ……… 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: Khóa luận đạt/khơng đạt yêu cầu khóa luận tốt nghiệp kỹ sư/cử nhân, xếp loại Giỏi/Khá/Trung bình Điểm sinh viên: Nguyễn Hồng Khoa:……… /10 Nguyễn Tiến Dũng:……… /10 Người nhận xét (Ký tên ghi rõ họ tên) NGUYỄN THỊ THANH TRÚC ĐHQG TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập – Tự Do – Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày……tháng……năm 2020 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 HỖ TRỢ HỌC TẬP NHÓM CHO HỌC SINH, SINH VIÊN Nhóm SV thực hiện: Nguyễn Hồng Khoa – 17520087 Nguyễn Tiến Dũng – 17520376 Cán hướng dẫn: ThS Nguyễn Thị Thanh Trúc Đánh giá Khóa luận: Về 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 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: Khóa luận đạt/khơng đạt u cầu khóa luận tốt nghiệp kỹ sư/cử nhân, xếp loại Giỏi/Khá/Trung bình Điểm sinh viên: Nguyễn Hồng Khoa:……… /10 Nguyễn Tiến Dũng:……… /10 Người nhận xét (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Khóa luận tốt nghiệp với đề tài “Xây dựng ứng dụng hỗ trợ học tập nhóm cho học sinh, sinh viên” kết quả, tâm huyết tích lũy kiến thức nhóm chúng em suốt năm học trường đại học Công nghệ Thông tin ĐHQG TPHCM Với đề tài này, chúng em mong muốn giá trị mà mang lại cho xã hội thay cho lời cảm ơn đến với tất người hỗ trợ, giúp đỡ ủng hộ chúng em hồn thành khóa luận Nhóm chúng em xin cảm ơn tập thể quý thầy cô Trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, đặc biệt quý thầy cô khoa Công Nghệ Phần Mềm trao cho chúng em kiến thức giá trị làm tảng để thực khóa luận Đặc biệt, nhóm chúng em xin gửi lời cảm ơn chân thành trân trọng tới cô Nguyễn Thị Thanh Trúc, giáo viên hướng dẫn trực dõi, góp ý, hỗ trợ đưa lời khuyên quý giá cho chúng em suốt trình thực khóa luận Cảm ơn giảng viên phản biện thầy cô hội đồng chấm luận văn với lời khun, góp ý q báu bổ ích Từ luận văn chúng em trở nên hoàn thiện Lời cuối, chúng em xin gửi tất biết ơn trân trọng đến với người thân, bạn bè ủng hộ động viên chúng em giai đoạn đầy khó khăn thử thách thực khóa luận TP HCM, tháng 05 năm 2021 Sinh viên Nguyễn Tiến Dũng Nguyễn Hồng Khoa STT Tên thuộc tính message_id Kiểu Ràng buộc varchar(50) Là khóa chính, not Ý nghĩa/ghi Khóa phân biệt tin nhắn null message_user_id varchar(50) Là khóa ngoại message_group_chat_id varchar(50) Là khóa Id người dùng nhắn tin Id nhóm chat chứa ngoại tin nhắn Not null Nội dung tin nhắn message_content text message_type enum Loại tin nhắn message_created_at timestamp Thời gian nhắn tin Bảng 4-10 Danh sách thuộc tính bảng Message 4.1.2.11 Bảng User_connection Mơ tả: Bảng User_connection lưu thông tin lần kết nối signalR tài khoản, dùng cho việc push notification xử lý realtime ứng dụng STT Tên thuộc tính user_connection_id Kiểu Ràng buộc varchar(50) Là khóa chính, not Ý nghĩa/ghi Id signalR connection null user_connection_user_id varchar(50) Là khóa 83 Id người dùng chính, not null user_connection_type varchar(20) Loại connection Bảng 4-11 Danh sách thuộc tính bảng UserConnection 4.1.2.12 Bảng Notification Mơ tả: Bảng Notification lưu thông tin thông báo, thơng báo đến từ hoạt động có liên quan đến người dùng STT Tên thuộc tính notification_id Kiểu varchar(50) Ràng buộc Ý nghĩa/ghi Là khóa Id để phân biệt chính, not thơng báo null notification_user_id varchar(50) Là khóa Id người dùng ngoại mà thông báo thuộc notification_content varchar(500) Nội dung thông báo notification_created_at timestamp Thời gian tạo thông báo notification_link varchar(200) Link để redirect notification_status bool Trạng thái đọc, đọc click 84 notification_group Id để push noti theo varchar(50) nhóm notification_actionuser_id varchar(50) Là khóa Người tạo trigger ngoại kiện tạo thơng báo Bảng 4-12 Danh sách thuộc tính bảng Notification 4.1.2.13 Bảng Handle_task Mô tả: Bảng Handle_task lưu thông tin việc đảm nhận cơng việc thành viên nhóm, thơng tin bảng dùng để tạo báo cáo sau STT Tên thuộc tính handle_task_id Kiểu Ràng buộc varchar(50) Là khóa chính, not null handle_task_user_id varchar(50) Là khóa ngoại Ý nghĩa/ghi Id để phân biệt handle task Id người giao task handle_task_task_id varchar(50) Là khóa ngoại Task mà handle task thuộc Handle_task_created_at timestamp Thời gian tạo handle task handle_task_id varchar(50) Là khóa chính, not null Id để phân biệt handle task Bảng 4-13 Danh sách thuộc tính bảng Handle_task 85 4.1.2.14 Bảng Task_version Mô tả: Bảng Task_version lưu thông tin phiên Cơng việc đó, giúp người dùng dễ dàng xem lịch sử chỉnh sửa, cập nhật Cơng việc STT Tên thuộc tính task_version_id Kiểu varchar(50) Ràng buộc Ý nghĩa/ghi Là khóa Id để phân biệt chính, not task version null task_version_task_id varchar(50) Là khóa Id task ngoại sửa đổi task_version_updated_at timestamp Thời gian sửa đổi task_version_task_description varchar(500) Mô tả task task_version_task_point int Điểm task task_version_task_deadline timestamp Deadline task task_version_task_status enum Trạng thái task task_version_task_ int Phần trăm hoàn thành task completed_percent task_version_start_date timestamp Ngày bắt đầu task 10 task_version_done_date timestamp Thời điểm task hồn thành 86 11 task_version_action_user_id varchar(50) Là khóa Id người dùng sửa ngoại đổi Bảng 4-14 Danh sách thuộc tính bảng Task_version 4.1.2.15 Bảng File Mô tả: Bảng File lưu thông tin tập tin tải lên ứng dụng, thông tin đường dẫn tập tin giúp người dùng khác tải tập tin máy STT Tên thuộc tính file_id Kiểu Ràng buộc varchar(50) Là khóa chính, Ý nghĩa/ghi Id để phân biệt file not null file_name varchar(300) Là khóa ngoại Tên file file_url varchar(500) Url file file_type enum Loại file file_userupload_id varchar(50) file_size double Kích thước file file_upload_time timestamp Thời gian tải tệp tin file_userowner_id varchar(50) Là khóa ngoại Là khóa ngoại Id người upload file Id người mà file thuộc file_teamowner_id varchar(50) Là khóa ngoại Id nhóm mà file thuộc 87 10 file_taskowner_id varchar(50) Là khóa ngoại Id task mà file thuộc 11 file_postowner_id varchar(50) Là khóa ngoại Id post mà file thuộc Bảng 4-15 Danh sách thuộc tính bảng File 4.2 Thiết kế kiến trúc hệ thống Hình 4-2 Minh họa kiến trúc hệ thống ứng dụng Ứng dụng xây dựng dựa mơ hình client-server, đó: - AWS S3: sử dụng để lưu trữ file tải lên ứng dụng - AWS SES: dịch vụ gửi email Amazon dùng cho việc gửi mail xác thực, sử dụng không bị đánh dấu email spam - Firebase Storage: sử dụng cho việc lưu trữ hình ảnh ứng dụng - Firebase Authentication: sử dụng cho việc login mạng xã hội 88 - MySQL: sở liệu ứng dụng, nơi lưu trữ tồn thơng tin người dùng - SignalR: giao tiếp thời gian thực client server 4.3 Triển khai hệ thống Cả Web API Web App triển khai VPS Ubuntu nhà cung cấp Linode, cài đặt NGINX SDK cần thiết Ứng dụng cài đặt SSL cung cấp miễn phí Cloudflare giúp mang lại bảo mật tốt cho ứng dụng 4.3.1 Triển khai Web API Web API sử dụng Subdomain api domain ezteam.tech Cơ sở liệu MySQL ver 8.0 cài đặt VPS Ứng dụng NET release viết thành service Ubuntu để chạy khơng kết nối tới VPS Hình 4-3 Service file giúp trì ứng dụng NET Core ln chạy Ubuntu 89 Hình 4-4 Kiểm tra trạng thái service Hình 4-5 Cấu hình NGINX cho Web API 4.3.2 Triển khai Web App Web App triển khai việc sử dụng Nodejs để render static file build dự án ReactJS Sử dụng PM2(PM2 trình quản lý tiến trình dành cho 90 ứng dụng Nodejs) để trì ứng dụng ln chạy kể khơng kết nối tới VPS Hình 4-6 Ứng dụng chạy quản lý PM2 Hình 4-7 Cấu hình NGINX cho Web App 91 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết đạt Sau tháng nghiên cứu phát triển đề tài, ứng dụng nhóm chúng em bước đầu hồn thiện triển khai chức phục vụ cho hoạt động làm việc nhóm Cùng với đó, ứng dụng release phiên thức lên internet với tiên miền ezteam.tech Sẵn sàng để phục vụ người dùng thực tế mang lại giá trị cho xã hội Về mặt kỹ thuật, nhóm chúng em đạt kết sau: - Tìm hiểu tận dụng nhiều thư viện giao diện như: Coreui Admin Template, Dhtmlx gantt react, React beautiful dnd,… giúp nâng cao khả sử dụng customize thư viện cho dự án - Nghiên cứu ý tưởng áp dụng thuật toán xếp thẻ kanban Lexorank JIRA, hiểu thêm cách tổ chức sở liệu phù hợp cho xếp danh sách có thứ tự - Tìm hiểu thư viện ReactJS vào việc xây dựng website - Áp dụng ASP.NET Core vào xây dựng server cho ứng dụng, sử dụng SignalR cho kết nối thời gian thực - Tìm hiểu sử dụng dịch vụ Amazon gồm có AWSS3 (lưu trữ), AWSSES (dịch vụ email) - Sử dụng dịch vụ Firebase vào ứng dụng Firebase Authentication (đăng nhập), Firebase Storage (lưu trữ) - Tìm hiểu cách sử dụng VPS để triển khai ứng dụng, đưa ứng dụng vào sử dụng thực tế Về mặt thực tiễn, nhóm em đạt kết gồm: 92 Nâng cao khả tìm hiểu nghiên cứu cơng nghệ, chọn lựa công - nghệ phù hợp để áp dụng vào đồ án, đặc biệt công nghệ - Hiểu áp dụng quy trình phát triển ứng dụng hoàn chỉnh - Cải thiện kĩ lên kế hoạch, phân chia điều phối công việc thành viên nhóm Xây dựng triển khai vào thực tế ứng dụng phục vụ nhu cầu thực tế - sống 5.2 Thuận lợi khó khăn 5.2.1 Thuận lợi - Có nhiều tảng ứng dụng tương tự để tham khảo cải tiến phát triển chức nghiệp vụ cho ứng dụng - Vì đối tượng đề tài học sinh sinh viên, nên q trình làm dễ dàng tiếp cận khảo sát thực tế nhu cầu người dùng đề tài - Các cơng nghệ phần lớn có cú pháp hướng dẫn để dễ dàng hiểu áp dụng - Nhóm có kiến thức tảng C#, JS, SQL nên nhóm khơng gặp phải khó khăn việc sử dụng ngôn ngữ hay cách thức làm việc framework, library 5.2.2 Khó khăn - Ứng dụng có nhiều nghiệp vụ phức tạp để thực, dẫn đến việc thực số chức thời gian dự kiến vài chức phụ chưa phát triển theo dự tính ban đầu - Lựa chọn chưa công nghệ hợp lý để áp dụng, gây việc phải dành thêm thời gian để đổi sang công nghệ phù hợp 93 - Ứng dụng q trình phát triển có phát sinh thêm nhiều trường hợp xử lý mới, buộc phải thay đổi xử lý client server số thời điểm - Những giao diện đặc biệt như: Kanban, Gantt chart,… chưa có nhiều thư viện hỗ trợ tốt giao diện, đa số phải tự phát triển giao diện lại từ đầu điều chỉnh nhiều để có giao diện mong muốn 5.3 Hạn chế Những hạn chế suốt q trình thực khóa luận: - Vì thời gian cịn hạn hẹp kinh nghiệm chưa nhiều, nhóm chưa thể tìm hiểu sâu tận dụng thực tốt công nghệ áp dụng - Một số xử lý chức mang tính cảm quan, chưa hồn tồn tối ưu - Chưa hoàn thành kịp số chức phụ đề trước - Sản phẩm release chưa lâu, chưa có số lượng người dùng đủ nhiều để đo lường, phân tích cập nhật lại cho phù hợp với nhu cầu thực tiễn 5.4 Hướng phát triển Vì nhu cầu quản lý nhóm nghiệp vụ ứng dụng đa dạng, nên nhóm chúng em nhiều ý tưởng chức để bổ sung hoàn thiện ứng dụng tương lai, số tính nhóm muốn phát triển thêm là: - Chức phân quyền kĩ nhóm, có thêm quyền nhóm phó để quản lý nhóm trưởng vắng mặt - Thêm trợ giới thiệu cách dùng ứng dụng cho người dùng lần đầu sử dụng - Bổ sung thêm ràng buộc thứ tự thực Công việc (áp dụng Gantt chart), để đáp ứng cho nhu cầu quản lý Công việc phức tạp 94 - Tách giao diện thành hai chế độ, (cho học sinh) nâng cao (cho sinh viên) để linh hoạt dễ sử dụng cho bạn nhỏ - Xây dựng thêm Web admin để quản lý, kiểm duyệt người dùng nội dung ứng dụng Trong tương lai, sau có nhiều thời gian để ứng dụng tiếp cận với người dùng, chúng em mong nhận phản hồi, góp ý để tinh chỉnh, cập nhật bổ sung hoàn thiện ứng dụng tốt để phù hợp với nhu cầu người dùng thực tế 95 TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt [1] Hoàng Thị Thơm “Thực trạng làm việc nhóm sinh viên khoa giáo dục học viện quản lý giáo dục”, 06/01/2020 Địa chỉ: https://research.edu.vn/thuc-trang-ky-nanglam-viec-nhom-cua-sinh-vien-khoa-giao-duc-hoc-vien-quan-ly-giao-duc-sv-hoang-thithom-lop-k7b_tlhgd-hoc-vien-quan-ly-giao-duc/ Tài liệu tiếng Anh [1] Admad Azfar “JIRA lexorank explained”, Available: https://www.youtube.com/ watch?v=OjQv9xMoFbg&t=516s [2] “ReactJS”, Available: https://reactjs.org/docs/getting-started.html [3] “Core UI”, Available: https://coreui.io/react/docs/4.0/getting-started/introduction/ [4] “Production Build for Create-react-app”, Avaiable: https://create-react-app.dev /docs/production-build/ [5] “EF Core”, Avaiable :https://www.entityframeworktutorial.net/efcore/entityframework-core.aspx [6] “Redux”: https://redux.js.org/introduction/getting-started [7] "Redux toolkit" Available: : https://redux-toolkit.js.org/introduction/getting-started [8] "ASP.NET Core" Available: https://docs.microsoft.com/en-us/aspnet/core/? view=aspnetcore-3.1 [9] "SignalR" Available: https://docs.microsoft.com/vi-vn/aspnet/core/tutorials/signalr? tabs=visual-studio&view=aspnetcore-3.1 96 [10] Mohammad Faisal "Upload File S3", 17/2/2021 Available: https://javascript plainenglish.io/how-to-upload-files-to-aws-s3-in-react-591e533d615e [11] "AWSSES with NET" Available: : https://docs.aws.amazon.com/ses/latest/ DeveloperGuide/send-using-smtp-net.html [12] Iamabhishekkalra "Upload firebase", 13/4/2021 Available: https://www.geeksforgeeks org/how-to-upload-files-in-firebase-storage-using-reactjs/ [13] Yusuff Faruq "Firebase Auth", 5/3/2020 Available: https://blog.logrocket com/user-authentication-firebase -react-apps/ [14] Rizwan Khan "Deploy Client", 3/8/2020 Available: : https://www.youtube.com /watch?v=My3c4IQHq_Y [15] Setu Kumar Basak "Deploy server", 25/7/2018 Available: https://setu677.medium com/how-to-host-asp-net-core-on-linux-using-nginx-85339560e929 [16] Sourabh Shirhatti "Deploy server", 30/10/2020 Available: https://docs.microsoft com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-3.1 [17] "DB Diagram" Available: dbdiagram.io [18] "Draw" Available: draw.io 97 ... chọn đề tài Đề tài ? ?Xây dựng ứng dụng hỗ trợ học tập nhóm cho học sinh, sinh viên? ?? lên ý tưởng thực với mục đích quan trọng tạo công cụ, hỗ trợ học tập cho bạn học sinh sinh viên Do công nghệ giao... tài ? ?Xây dựng ứng dụng hỗ trợ học tập nhóm cho học sinh, sinh viên? ?? tập trung vào nghiên cứu, phân tích thực trạng áp dụng công nghệ phù hợp để xây dựng nên ứng dụng web application đáp ứng đầy... CHỦ NGHĨA VIỆT TRƯỜNG ĐẠI HỌC NAM CÔNG NGHỆ THÔNG TIN Độc Lập - Tự Do - Hạnh Phúc ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Xây dựng ứng dụng hỗ trợ học tập nhóm cho học sinh, sinh viên Cán hướng dẫn: ThS