Ứng dụng chia sẻ khoá học trực tuyế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 -🙚🙘🕮🙚🙘 - BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN Đề tài: Ứng dụng chia sẻ khoá học trực tuyến Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Nhóm thực hiện: 19521927 Bùi Thiện Nhân 19520205 Nguyễn Yến Nhi Lớp SE122.N11.PMCL TP HCM, 24 tháng 12 năm 2022 ĐẠ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ÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN Đề tài: Ứng dụng chia sẻ khoá học trực tuyến Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Nhóm thực hiện: 19521927 Bùi Thiện Nhân 19520205 Nguyễn Yến Nhi Lớp SE122.N11.PMCL TP HCM, 24 tháng 12 năm 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ CỘNG HÒA XÃ HỘI CHỦ NGHĨA MINH VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng ứng dụng chia sẻ khóa học trực tuyến Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 5/9/2022 đến ngày 31/12/2022 Sinh viên thực hiện: Bùi Thiện Nhân - 19521927 Nguyễn Yến Nhi - 19520205 Nội dung đề tài: ▪ Giới thiệu ▪ Nhu cầu thực tế Nhằm phục vụ nhu cầu ngày cao người, hoạt động học tập giáo dục ngày phát triển mạnh mẽ Trong thực tế, nhiều trường hợp cá nhân bận bịu với hoạt động thường nhật cơng việc sống, hay giới hạn vị trí địa lý, hồn cảnh cá nhân mà gặp khó khăn cập nhật kiến thức Cách giáo dục truyền thống mang lại nhiều hiệu dễ dàng, nhiên bối cảnh đại, cần hệ thống, ứng dụng đại cho phép thực việc học tập cách dễ dàng Từ việc đăng tải giảng, kiểm tra hay tìm kiếm tài liệu học tập, tương tác,… tích hợp ứng dụng đơn giản, dễ dàng không giúp tiết kiệm thời gian người học mà tăng độ hiệu cho việc tiếp thu kiến thức Phần mềm tương lai đáp ứng nhu cầu nhiều người dùng học tập trường học xu hướng đại hố, cơng nghệ hố, ứng dụng máy móc ngày phổ biến Vì vậy, để giúp cho việc học tập trở nên dễ dàng hơn, không bị giới hạn tuổi tác, thời gian hay địa điểm, chúng em định xây dựng tảng học tập trực tuyến ▪ Mục tiêu Chương Xây dựng ứng dụng cung cấp khóa học theo yêu cầu nhiều chủ đề khác Chương Chương Chương Chương Chương Bài giảng chia sẻ dạng video, kiểm tra Hợp tác với bên thứ để nhận khoá học cung cấp Tương tác trực tuyến giảng Hỗ trợ đa ngôn ngữ Hỗ trợ chứng cho người học ▪ Phạm vi Đề tài tập trung xây dựng ứng dụng giải toán e-learning bao gồm hai phân quyền người dùng: Teacher – User ❖ Phạm vi môi trường: ❖ Triển khai sản phẩm môi trường mobile ❖ Phạm vi chức năng: o Quản lý giảng (video), khoá học o Thực tốn với khóa học tính phí o Tương tác người dùng o Học khoá học làm kiểm tra ▪ Đối tượng Phần mềm hướng tới cá nhân muốn tìm hiểu kiến thức khơng có nhiều thời gian, khơng thể đến trường lớp trực tiếp để học hay gặp khó khăn việc tổng hợp thông tin từ nhiều nguồn internet Bên cạnh đó, ứng dụng nơi công ty, trường học, cá nhân muốn chia sẻ giảng trực tuyến cho cộng đồng hay quảng bá cho thương hiệu ▪ Phương pháp thực o Tìm hiểu cơng nghệ cần thiết o Phân tích giải pháp ứng dụng tương tự thị trường o Phân tích thiết kế tính năng, hệ thống, sở liệu cho ứng dụng o Thiết kế giao diện o Triển khai dự án o Kiểm thử o Phát hành ▪ Công nghệ sử dụng - Front-end: Dart, Flutter • Architecture: Clean Architecture • Design Methodology: Atomic Design Methodology • State Management: MobX • Web Socket, Web RTC • Thiết kế: Figma - Back-end: NestJS • Architecture: Clean Architecture • Database: Firebase (for video, image), MongoDB • Web Socket, Web RTC • Deployment: Docker ▪ Kết mong đợi - Nắm bắt áp dụng cơng nghệ để xây dựng hồn thiện sản phẩm đề tài - Hiểu rõ nghiệp vụ ứng dụng E-learning - Xây dựng ứng dụng với phân tích thiết kế - Hồn thành mức sử dụng với chức nâng cao Kế hoạch thực hiện: Tuần Tuần (5/9 – 11/9) Tuần Cơng việc Tìm hiểu đề tài Xác định, phân loại tính Xây dựng base project Tìm hiểu khả thực tính năng, cơng nghệ nâng cao cho project Phân tích, thiết kế hệ thống (12/9 – 18/9) Tuần (19/9 – 2/10) Tuần Xây dựng tính xác thực tài khoản, thay đổi ngôn ngữ ứng dụng Xây dựng tính thay đổi thơng tin người dùng (19/9 – 25/9) Tuần Xây dựng tính khóa học (26/9 – 9/10) Tuần Xây dựng tính khóa học (10/10 – 16/10) Tuần Xây dựng tính giảng (17/10 – 23/10) Tuần (24/10 – 30/10) Tuần Xây dựng tính giảng Deploy app, release version 1.0 Xây dựng tính tương tác với khóa học (31/10 – 6/11) Tuần 10 Các tính App about (term policy, help & support, ) (7/11 – 13/11) Tuần 11 Xây dựng tính tốn khóa học (14/11 – 20/11) Tuần 12 Xây dựng tính kiểm tra (21/11 – 27/11) Tuần 13 Xây dựng tính kiểm tra (28/11 – 4/12) Tuần 14 (5/12 – 11/12) Xây dựng tính thơng báo (push notification) Xây dựng tính xem nhật ký hoạt động người dùng Deploy app, release version 2.0 Tuần 15 Test lại API, intergrate BE FE (12/12 – 18/12) Tìm hiểu stream (WebRTC) xây dựng tính stream Tuần 16 Tìm hiểu stream (WebRTC) xây dựng tính stream (19/12 – 25/12) Tuần 17 (26/12 – 31/12) Kiểm thử, sửa lỗi hoàn thiện ứng dụng Deploy app, release version 3.0 Xác nhận CBHD TP HCM, ngày 10 tháng năm 2022 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Bùi Thiện Nhân Nguyễn Yến Nhi MỤC LỤC DANH MỤC HÌNH ẢNH Error! Bookmark not defined DANH MỤC BẢNG GIỚI THIỆU ĐỀ TÀI 12 1 Tên đề tài 12 Lí chọn đề tài 12 Mô tả sản phẩm 12 Chức 12 Công nghệ sử dụng 13 Thơng tin nhóm 14 CƠ SỞ LÝ THUYẾT 15 Flutter 15 Web Socket 15 Web RTC 16 Firebase Storage 18 NestJs 19 MongoDB 19 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 21 Clean Architechture 21 Sơ đồ Use-case 23 Danh sách use-case 25 Đặc tả use-case 27 Use-case “Đăng nhập” 27 Use-case “Đăng ký” 28 Use-case “Đăng xuất” 29 Use-case “Xác thực email” 30 Use-case “Quên mật khẩu” 30 Use-case “Xem danh sách khóa học” 31 Use-case “Xem chi tiết khóa học” 32 Use-case “Tham gia khóa học” 33 Use-case “Bình luận khóa học” 34 10 Use-case “Đánh giá khóa học” 35 11 Use-case “Nâng cấp tài khoản” 36 12 Use-case “Làm kiểm tra” 37 13 Use-case “Tham gia Livestream” 38 14 Use-case “Tương tác với người dùng khác” 39 15 Use-case “Đánh giá giảng viên” 40 16 Use-case Tương tác với hệ thống 41 17 Use-case Cập nhật hồ sơ 42 18 Use-case “Bắt đầu livestream” 43 19 Use-case “Thêm khóa học” 44 20 Use-case “Chỉnh sửa khóa học” 46 21 Use-case “Xóa khóa học” 48 22 Use-case “Tạo kiểm tra” 49 23 Use-case “Cập nhật kiểm tra” 50 24 Use-case “Xóa kiểm tra” 51 THIẾT KẾ DỮ LIỆU 53 Sơ đồ logic 53 Mô tả chi tiết bảng liệu 54 Bảng “User” 54 Bảng “Course” 55 Bảng “Section” 55 Bảng “Lesson” 57 Bảng “Exam” 57 Bảng “Question” 57 Bảng “Result” 58 Bảng “Comment” 58 Bảng “Rate” 58 10 Bảng “History” 59 11 Bảng “RecentCourse” 59 THIẾT KẾ GIAO DIỆN 59 Danh sách hình 59 Chi tiết hình 62 Màn hình “SignIn” 62 Màn hình “SignUp” 64 Num Name Privacy policu Type text Description Trigger Thông tin pháp lý app 108 16 Màn hình “HelpCenter” 109 Hình 6.18: Màn hình HelpCenter Num Name Type Description Trigger 110 Tab FAQ Tab Contact Us List câu hỏi List thường gặp List contact Tab FAQ Tab Chuyển đổi Contact us tab List câu hỏi thường gặp List List contact 111 17 Màn hình “UploadedCourses” Hình 6.19: Màn hình UploadedCourses 112 Num Name Danh sách Khóa học Type Listview Description Trigger Hiển thị danh sách khóa học tải lên giảng viên Nút chọn FloatingActionButon Nút chọn để sang Ứng dụng “Tạo trang tạo khóa điều hướng khóa học” học người dùng sang trang tạo khóa học 113 18 Màn hình “CreateCourse” 114 115 116 Hình 6.20: Màn hình CreateCourse Num Name Type Description Trigger 117 Chọn ảnh ImagePicker Chọn ảnh Mở sưu khóa học từ sưu tập ứng tập dụng để người dùng chọn ảnh, lắng nghe kết trả Chọn phân loại Dropdown Chọn phân loại cho Khi người khóa học dùng nhấn chọn, sổ xuống danh sáhc phân loại cho người dùng chọn Tựa đề khóa học TextFormField Nhập vào tựa đề khóa học Mơ tả khóa học TextFormField Nhập vào mơ tả khóa học Sang trang Button Sang trang Nhấn chọn chuyển pageview sang trang Tựa đề section TextFormField Nhập vào tựa đề section Chỉnh sửa section Button Bắt đầu chỉnh sửa thẻ Nhấn chọn để vừa tạo chuyển trạng 118 thái thẻ từ xem sang chỉnh sửa Xóa section Button Xóa section Nhấn chọn để chọn xóa section chọn Thêm Button Thêm Tạo section vào danh sách section với section thông tin mặc định vào danh sách section 10 Thẻ học Card Thẻ chứa học 11 Tựa đề học TextFormField Nhập vào tựa đề học 12 Chọn video ImagePicker Chọn video khóa Mở sưu học từ sưu tập tập ứng dụng để người dùng chọn video, lắng nghe kết trả 13 Chọn section cho học Dropdown Chọn section cho Khi người học dùng nhấn chọn, sổ xuống danh sách 119 section tạo cho người dùng chọn 14 Tạo học Button Thêm Tạo học vào danh sách học với thông tin mặc định vào danh sách học 15 Sang trang Về lại trang trước Button Nhấn chọn chuyển pageview lại trang trước 16 Hoàn tất Button Hồn tất thêm Nhấn chọn để khóa học hồn tất tạo khóa học KẾT LUẬN Ưu điểm - Đồ án kiến trúc dựa Clean Architecture nên dễ dàng bảo trì phát triển Thích hợp với nhiều loại phương pháp phát triển phần mềm - Giao diện tối giản, màu sắc tương phản cho người dùng dễ dàng sử dụng, tham khảo với case study ứng dụng có đề tài tương tự 120 - Triển khai, tích hợp nhiều công nghệ khác để tăng khả ứng dụng, đồng thời đáp ứng nhiều yêu cầu khác người dùng - Đáp ứng chức ứng dụng e-learning (người dạy chia sẻ khố học, người học học khoá học) - Triển khai nhiều đoạn code logic để giảm thiểu tối đa khả crash ứng dụng không mong muốn - Sử dụng Flutter để phát triển nên dễ dàng release ứng dụng nhiều dạng platform khác Hạn chế - Hiện website có trải nghiệm tốt thiết bị PC - Các tính nâng cao ứng dụng tích hợp vào ứng dụng, cần phát triển thêm để hồn thiện hồn tồn chưa kiểm thử môi trường đặc biệt khác Hướng phát triển Trong tương lai, nhóm em mong muốn phát triển tiếp sản phẩm đồ án này: - Cải thiện UI/UX tổng thể - Thêm tài khoản Quản trị viên để xử lý tính quản lý ứng dụng thao tác người dùng khác - Mở rộng thêm tính cho người dùng giảng viên quản lý doanh thu, quản lý tương tác khóa học thân - Thêm chức filter, pagination khoá học, cải thiện performance, thêm tính chat với giảng viên 121 TÀI LIỆU THAM KHẢO [1] Clean Architecture – Giới thiệu, cách cấu trúc triển khai dự án - Flutter TDD Clean Architecture Course – Explanation & Project Structure - Reso Coder [2] WebRTC – Tài liệu tham khảo WebRTC - Getting started with WebRTC [3] SocketIO – Tài liệu thức - Introduction | Socket.IO [4] Firebase – Tài liệu thức - Firebase Documentation [5] NestJs – Tìm hiểu NestJs - Tìm hiểu NestJS [6] MongoDB – Tìm hiểu MongoDB - MongoDB gì? | TopDev [8] Th.S Trần Thị Hồng Yến (2022) - Mẫu báo cáo môn học – Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin 122 ...ĐẠ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 -