Áp dụng spring kết hợp ReactJS phát triển hệ thống hỗ trợ học tập toàn diệ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 LƯU BIÊU NGHỊ - 17520794 NGUYỄN VĂN ĐÔNG - 17520350 ĐỒ ÁN ÁP DỤNG SPRING KẾT HỢP REACTJS PHÁT TRIỂN HỆ THỐNG HỖ TRỢ HỌC TẬP TOÀN DIỆN BUILDING A FEATURE RICH LEARNING ASSISTANCE WEBSITE USING SPRING AND REACTJS KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN THS HUỲNH HỒ THỊ MỘNG TRINH TP HỒ CHÍ MINH, 2021 LỜI CẢM ƠN Trong suốt năm học tập trường đại học Công nghệ Thông tin, từ giảng dạy nhiệt tình hướng dẫn chu đáo từ phía thầy cơ, đặc biệt q thầy khoa Công nghệ Phần mềm, chúng em tiếp thu nhiều kiến thức bổ ích vơ cần thiết để chúng em có chuyên môn vững tương lai Thông qua đồ án này, chúng em thể học phối hợp chúng lại để cố gắng tạo nên sản phẩm có khả đưa vào hoạt động thực tế, bước đầu quy mô vừa nhỏ, hướng đến sản phẩm hoàn chỉnh với quy mô lớn Chúng em xin gửi lời cảm ơn chân thành đến quý thầy cô trường Đại học Cơng nghệ Thơng tin nói chung, q thầy khoa Cơng nghệ Phần mềm nói riêng, đặc biệt cô Huỳnh Hồ Thị Mộng Trinh chu đáo tận tình hướng dẫn chúng em, giúp chúng em có điều kiện tốt để hồn thành đồ án với chất lượng cao Bên cạnh đó, nhóm xin gửi lời cảm ơn đến bạn nhóm khác góp ý để nhóm có đề tài hồn thiện ngày Trong suốt trình thực đồ án, quy mô sản phẩm lớn so với đồ án thông thường, với thời gian vốn kiến thức nhiều hạn chế, chắn khó tránh khỏi sai sót khơng mong muốn Chúng em mong nhận sử góp ý chân thành từ phía thầy bạn Thành phố Hồ Chí Minh, tháng 01 năm 2021 Lưu Biêu Nghị Nguyễn Văn Đơng Đ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…… ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Áp dụng Spring kết hợp ReactJS phát triển hệ thống hỗ trợ học tập toàn diện Cán hướng dẫn: ThS Huỳnh Hồ Thị Mộng Trinh Thời gian thực hiện: Từ tháng 03/2021 đến tháng 06/2021 Sinh viên thực hiện: Lưu Biêu Nghị 17520794 Nguyễn Văn Đông 17520350 Nội dung đề tài: Mục tiêu: − Nghiên cứu, tìm hiểu cơng nghệ Spring, React − Tìm hiểu áp dụng best-practice phát triển ứng dụng với Spring React − Tìm hiểu áp dụng kĩ thuật nâng cao load balancing, − Nghiên cứu thực tiễn khó khăn cịn tồn đọng học tập sinh viên, từ chỉnh sửa hệ thống cho phù hợp − Cài đặt môi trường Cloud để chạy thử nghiệm thực tế hệ thống Phạm vi: Hệ thống cho phép thực việc chia sẻ kiến thức thơng qua hai hình thức chính: Đăng tải viết tài liệu Người dùng tiến hành đăng theo dõi, quản lý viết Ngồi cịn tương tác với viết like, dislike, lưu viết kho mình, comment đến viết… Tương tự, tài liệu có số chức bật như: Cho phép upload tài liệu, upvote/downvote tài liệu, xem thông số tài liệu số lượt tải số lượt xem, … Tất nội dung kiểm duyệt thông qua hệ thống kiểm duyệt Quản trị viên Ngồi ra, quản trị viên cịn quản lý tài khoản người dùng,… Hai tính nâng cao hệ thống E-learning hỏi đáp học tập (môtuýt gần giống với Stack-Overflow) Với E-learning, người học chọn mơn, chọn khố học để bắt đầu học Nội dung học tập hệ thống E-learning cung cấp quản trị viên thông qua trang quản lý E-learning Với hỏi đáp học tập, người dùng đăng câu hỏi, có câu trả lời cho câu hỏi mở, người dùng thực đăng tải câu trả lời Cả câu hỏi câu trả lời tương tác (like/dislike) Phương pháp thực hiện: Thực đề tài theo bước: − Phân tích đề tài − Khảo sát khó khăn cịn tồn đọng trình học tập bạn đề xuất giải pháp thông qua hệ thống tự động với tính phục vụ giải khó khăn − Phân tích yêu cầu thu thập − Tiến hành thiết kế giao diện cho hệ thống − Tiến hành thiết kế mock-up hệ thống − Tiến hành thiết kế API backend hệ thống − Tiến hành thiết kế sở liệu hệ thống − Tiến hành định nghĩa yêu cầu bảo mật hệ thống − Tiến hành nghiên cứu lựa chọn công nghệ sử dụng − Phát triển sản phẩm − Kiểm thử tích hợp − Nhận ý kiến phản hồi từ người dùng − Hoàn thiện sản phẩm Đối tượng: Sinh viên tồn trường ĐHCNTT nói riêng sinh viên tồn quốc nói chung có quan tâm đến việc cải thiện kết học tập hệ thống online, quan tâm đến việc chia sẻ kiến thức Những công nghệ sử dụng: − Backend: o Spring Boot o Spring Security o Hibernate − Frontend: o ReactJS Kết dự kiến: − Hiểu rõ nắm vững chế hoạt động Spring, Hibernate, Spring Security − Hiểu áp dụng best practices áp dụng hệ thống thực tế − Hệ thống có tính bám sát nhu cầu học tập sinh viên − Xây dựng phát triển hệ thống hỗ trợ học tập toàn diện với chức sau: o Đối với khách truy cập bình thường:  Hệ thống viết: • Xem viết đăng tải người dùng khác quản trị viên • Tìm kiếm viết, thực lọc theo tiêu chí khác (Thời gian, Danh mục,Tags,…)  Hệ thống tài liệu: • Xem tài liệu • Tìm kiếm tài liệu, thực lọc theo tiêu chí khác (Mơn học, Danh mục,Tags,…) • Xem bình luận thành viên đăng ký • Tải tài liệu  Hệ thống E-learning: • Xem nội dung khố học • Tìm kiếm khố học • Lọc khố học theo chủ đề • Thao tác với tập, kiểm tra khoá học o Đối với người dùng đăng ký:  Tất tính khách truy cập bình thường  Hệ thống viết: • Thực tương tác với viết (like/dislike, bình luận, save thư viện mình,…) • Thực đăng tải viết • Thực bình luận vào viết • Thực chỉnh sửa viết (đối với viết cá nhân họ đăng tải) • Thực report viết  Hệ thống tài liệu: • Thực tương tác với tài liệu (upvote/downvote, lưu tài liệu kho mình,…) • Thực đăng tải tài liệu • Thực bình luận vào tài liệu • Thực chỉnh sửa tài liệu (đối với tài liệu cá nhân họ đăng tải) • Thực report tài liệu  Hệ thống quản lý tài khoản: • Quản lý thơng tin tài khoản (tên đăng nhập, mật khẩu, email,…) • Quản lý thơng báo cá nhân (khi có người like, comment vào viết mình,…) • Xem viết lưu, tài liệu lưu  Hệ thống E-learning: • Thực lưu khoá học vào kho “Khoá học lưu” o Đối với quản trị viên:  Tất tính người dùng đăng ký  Quản lý viết duyệt viết  Quản lý tài liệu duyệt tài liệu  Quản lý danh mục viết/tài liệu  Quản lý thông báo (Announcement) Website  Quản lý người dùng (chỉnh role, ban/unban,…)  Xem nhật kí hoạt động Website  Xem thống kê Website (Lượt truy cập, Bài viết, tài liệu)  Quản lý khoá học (thêm/sửa/xoá)  Quản lý danh mục khoá học − Triển khai ứng dụng: o Back-End: Hetzner Cloud o Front-End: ReactJS Kế hoạch thực hiện: − Giai đoạn 1: (Tháng 9/2020 – 10/2020): Tìm hiểu phân tích vấn đề khó khăn cịn tồn đọng việc tự học sinh viên − Giai đoạn 2: (Tháng 10/2020 – 11/2020): Thiết kế hệ thống − Giai đoạn 3: (Tháng 11/2020 – 1/2020): Triển khai cài đặt − Giai đoạn 4: (Tháng 1/2020): Thực kiểm thử toàn diện Xác nhận CBHD TP HCM, ngày….tháng … năm… (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) ThS Huỳnh Hồ Thị Mộng Trinh Lưu Biêu Nghị Sinh viên (Ký tên ghi rõ họ tên) Nguyễn Văn Đông MỤC LỤC Chương TỔNG QUAN 1.1 Giới thiệu/Lí chọn đề tài 1.2 Mục tiêu 1.2 Phạm vi 1.3 Nội dung nghiên cứu 1.4 Phương pháp thực 1.5 Mơ tả tính 1.6 Ý nghĩa thực tiễn Chương CÔNG NGHỆ SPRING VÀ REACTJS 2.1 Tổng quan hệ sinh thái Spring Framework 2.2 Thư viện ReactJS Redux Chương HỆ THỐNG HỖ TRỢ HỌC TẬP TOÀN DIỆN 12 3.1 Xác định phân tích yêu cầu 12 3.2 Đặc tả Use-case 17 3.3 Thiết kế sở liệu 25 3.4 Thiết kế kiến trúc hệ thống 47 3.5 Thiết kế giao diện xử lý 51 3.6 Triển khai hệ thống 86 Chương KẾT LUẬN 88 4.1 Kết đạt 88 4.2 Thuận lợi khó khăn 93 4.3 Hướng phát triển 93 TÀI LIỆU THAM KHẢO 94 UploadComponent CategoryCombobox Nơi để người dùng upload Trường viết bắt buộc Chứa danh mục tài liệu, Trường người dùng lựa chọn bắt buộc danh mục cho tài liệu TagInput Là nơi để người dùng nhập tag tài liệu, tối đa nhập tag, bấm enter dùng tag để sử dụng, chọn tag quickSearchTag sử dụng tag chọn để sử dụng PostBtn Bấm vào thực validation trường cần thiết, validation thành công thực upload tài liệu SubjectCombobox Chứa mơn học, người dùng Trường lựa chọn danh mục bắt buộc cho tài liệu 3.5.2.12 Màn hình PostApproving a) Giao diện 80 Hình 3-27 Giao diện hình PostApproving b) Mơ tả hình PostApproving Bảng 3-45 Bảng Mơ tả hình PostApproving STT Thành phần giao diện Mơ tả 81 Ghi PostsListTab Khi bấm vào điều hướng tới MenuItem hình PostsManagement PostApprovingTab Khi bấm vào điều hướng tới MenuItem trang PostApprovingPage PostApprovingList Danh sách viết trình kiểm duyệt, hiển thị dạng PostApprovingItem PostApprovingItem Hiển thị thơng tin tóm tắt viết, thơng qua component quản trị viên thực duyệt, từ chối duyệt phản hổi lại cho người dùng 3.5.2.12 Màn hình DocumentApproving a) Giao diện 82 Hình 3-28 Giao diện hình DocumentApproving b) Mơ tả hình PostApproving Bảng 3-46 Bảng Mơ tả hình DocumentApproving STT Thành phần giao diện Mô tả 83 Ghi DocumentsListTab Khi bấm vào điều hướng tới MenuItem hình DocumentsManagement DocumentApprovingTab Khi bấm vào điều hướng tới MenuItem trang DocumentApproving DocumentApprovingList Danh sách viết trình kiểm duyệt, hiển thị dạng DocumentApprovingItem PostApprovingItem Hiển thị thơng tin tóm tắt viết, thơng qua component quản trị viên thực duyệt, từ chối duyệt phản hổi lại cho người dùng 3.5.2.13 Màn hình CoursesManagement a) Giao diện 84 Hình 3-29 Giao diện hình CoursesManagement b) Mơ tả hình CoursesManagement Bảng 3-47 Bảng Mơ tả hình CoursesManagement STT Thành phần giao diện AddCourseBtn Mô tả Khi bấm vào xuất Popup cho phép thêm khố học CourseManagement Chứa nội dung tóm tắt Item Course gồm có tên, ảnh CourseMenuButton Khi bấm vào xuất Menu cho phép sửa xoá Courses DeleteCourse Khi bấm vào thực xoá MenuItem Khoá học 85 Ghi EditCourseBtn Khi bấm vào thực chỉnh sửa Course 3.6 Triển khai hệ thống 3.6.1 Sơ đổ triển khai hệ thống Hình 3-30 Deployment Diagram hệ thống Bảng 3-48 Mô tả Deployment Digram hệ thống STT Ý nghĩa/Ghi Tên thành phần User device Thiết bị người dùng ReactJS Client (Browser) Trình duyệt người dùng sử dụng để truy cập hệ thống Front-end static server Server tĩnh lưu trữ file tĩnh phía Front-end 86 Tomcat Application Server dùng để handle yêu cầu đến từ phía Client Spring Framework Hệ thống Spring cung cấp môi trường chạy REST API Hibernate Hệ thống Hibernate ORM cung cấp mapping Entity bảng CSDL PostgreSQL Cơ sở liệu PostgreSQL lưu trữ liệu Website 3.6.2 Tình hình triển khai thực tế − Hiện hệ thống chạy localhost − Kế hoạch triển khai chạy thử nghiệm: o Máy chủ backend: Triển khai đến Hetzner Cloud Platform (https://www.hetzner.com/cloud) o Máy chủ frontend: Triển khai đến Netlify Máy chủ database: Triển khai đến instance khác Hetzner Cloud Platform 87 Chương KẾT LUẬN 4.1 Kết đạt − Sau thời gian tìm hiểu cơng nghệ tiến hành thực project theo thiết kế ban đầu đặt ra, sản phẩm hồn thành tính như: o Về tính bản: Trang chủ, đăng nhập, đăng xuất, trang hiển thị danh sách tài liệu, khố học, viết o Các tính liên quan tới viết: cho phép người dùng tạo cập nhật viết, tương tác với viết, kiếm viết theo từ khoá tag, quản trị viên quản lý, duyệt viết, quản lý danh mục môn học viết, người dùng quản lý bài viết o Các tính liên quan tới tài liệu: cho phép người dùng tạo cập nhật tài liệu, tương tác với tài liệu, tìm kiếm tài liệu theo từ khố tag, quản trị viên quản lý, duyệt tài liệu, quản lý danh mục mơn học tài liệu, người dùng quản lý tài liệu o Các tính liên quan tới Khoá học: cho phép quản trị viên thêm sửa, xố Khố học phần khố học, người dùng thực xem lưu khoá học nội dung khố học − Một số hình thực được: o Trang chủ: 88 Hình 4-1 Màn hình trang chủ 89 Hình 4-2 Một số hình tìm kiếm 90 Hình 4-3 Màn hình CreatePost UploadDocument Hình 4-4 Màn hình PostApproving DocumentApproving 91 Hình 4-5 Màn hình CoursesList Hình 4-6 Các hình khác liên quan tới khoá học 92 − Các kết liên quan tới triển khai ứng dụng: o Hiện ứng dụng q trình hồn thiện, số tính chạy ổn phía local, tính cịn lại hoàn thiện ứng dụng triển khai khoảng thời gian sớm o Với sản phẩm tại, mục tiêu ban đầu sản phẩm hướng tới đối tượng sinh viên năm 1, năm trường Đại học Công nghệ thông tin 4.2 Thuận lợi khó khăn 4.2.1 Thuận lợi − Bản thân thành viên nhóm có giai đoạn tìm hiểu thực đồ án trước sử dụng tới framework (Spring, Hibernate, ReactJS, …), nắm số best practices chủ chốt − Các framework áp dụng có hệ sinh thái phong phú cộng đồng hỗ trợ mạnh mẽ, có nhiều thư viện, công cụ hỗ trợ kèm hiệu − Các thành viên nhóm sinh viên có kinh nghiệm việc chia sẻ kiến thức tự học nên nắm vấn đề cịn khó khăn, tồn đọng vấn đề tự học sinh viên 4.2.2 Khó khăn − Bản thân dự án có quy mô lớn so với đồ án trước, việc thiết kế gặp nhiều khó khăn Việc tổ chức code trở nên khó khăn nhiều lần phải thay đổi kiển trúc cập nhật theo thiết kế 4.3 Hướng phát triển − Diễn đàn chuyên học thuật để sinh viên trao đổi thoải mái − Phát triển ứng dụng Mobile để việc truy cập dễ dàng thiết bị di động 93 TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt Tài liệu tiếng Anh [1] Facebook, “ReactJS Documentation” ReactJS Foundation https://reactjs.org/docs/ (truy cập ngày 22/01/2021) [2] Spring Foundation, “Building Web Services with Spring” https://spring.io/guides/tutorials/rest/ (truy cập ngày 22/01/2021) [3] RedHat,”Hibernate Documentation” Hibernate Foundation https://hibernate.org/orm/documentation/5.4/ (truy cập ngày 22/01/2021) 94 ... Spring, Hibernate, Spring Security − Hiểu áp dụng best practices áp dụng hệ thống thực tế − Hệ thống có tính bám sát nhu cầu học tập sinh viên − Xây dựng phát triển hệ thống hỗ trợ học tập toàn. .. 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…… ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Áp dụng Spring kết hợp ReactJS phát triển hệ thống hỗ trợ học tập toàn diện Cán... tài Đồ án "Áp dụng Spring kết hợp ReactJS phát triển hệ thống hỗ trợ học tập toàn diện? ?? (tên tiếng Anh: “Building a feature rich learning assistance website using Spring and ReactJS? ??) Thông qua