ĐỒ án hệ THỐNG TƯƠNG tác lớp học

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM -🙢🕮🙡 - ĐỒ ÁN ĐỀ TÀI: HỆ THỐNG TƯƠNG TÁC LỚP HỌC -SE DIGITAL CLASSGiảng viên hướng dẫn: ThS Lê Thanh Trọng Sinh viên thực hiện: Hồ Trần Thiện Đạt 17520330 Đào Hữu Duy Quân 17520136 Tp Hồ Chí Minh, 15 tháng 01 năm 2021 Đồ án SE Digital Class LỜI CẢM ƠN Nhóm em xin chân thành cảm ơn hướng dẫn tận tình thầy Lê Thanh Trọng - giảng viên hỗ trợ cho nhóm q trình nghiên cứu để nhóm hồn thành đề tài Trong q trình thực hiện, trình làm báo cáo, tụi em khó tránh khỏi sai sót, tụi em hi vọng thầy bỏ qua tụi em mong nhận ý kiến đóng góp thầy để tụi em học thêm nhiều kinh nghiệm để hoàn thành tốt đồ án lần sau Một lần nhóm em xin chân thành cảm ơn thầy Nhóm thực Đồ án SE Digital Class NHẬN XÉT CỦA GIÁO VIÊN Đồ án SE Digital Class MỤC LỤC Giới thiệu đề tài I Nhu cầu thực tế đề tài Vấn đề Nhu cầu thực tế Giải pháp II Giải pháp Đề xuất ứng dụng Kết phân tích thiết kế Các API a 47 auth 47 b users 48 c 48 Classes d File 49 Giao diện a 50 Login 50 b Giảng viên 51 c 57 Sinh viên d Admin 61 Công nghệ 71 NestJS 71 ReactJS 72 Docker 73 Git/Github 74 Hướng dẫn cài đặt sử dụng III 74 ● Chạy backend 74 ● Adminer 75 ● Api 75 Phân chia công việc 75 Đồ án SE Digital Class IV Mơ hình áp dụng: Scrum 75 Cơng cụ sử dụng: Trello, messenger 76 Backlog phân chia công việc 76 Kết đạt 77 Ưu điểm: 77 Nhược điểm: 77 Chức hoàn thành: 77 V Tài liệu tham khảo 77 Đồ án SE Digital Class I Giới thiệu đề tài Nhu cầu thực tế đề tài - Tạo nên hệ thống nhằm giúp giảng viên sinh viên sinh viên lớp, nhóm tương tác trực tiếp với lớp học (face-to-face) Giúp cho khơng khí lớp học trở nên đỡ nhàm chán ngồi cịn thu lại số liệu tức để giúp cho việc đánh giá sinh viên giáo viên hiểu Hiện trạng - Khảo sát trường ĐH Công nghệ Thông tin, theo phương pháp Giảng viên tương tác với sinh viên thông qua máy chiếu, bảng Sinh viên tương tác với Giảng viên hình thức giơ tay - Việc đánh giá Giảng viên thực cuối học kì - Tài liệu học tập upload website môn học Sinh viên sử dụng tài liệu thiết bị di động in giấy Mọi thắc mắc giải đáp qua Mail trực tiếp lớp Vấn đề - Sinh viên gặp khó khăn việc tương tác trực tiếp với giảng viên lớp tự ti ngại giao tiếp - Sinh viên khó tiếp cận slide giảng ngồi xa cuối lớp, lớp có gần 100 sinh viên - Giáo viên nhiều thời gian cho việc điểm danh tiền bạc cho việc in giấy nhằm tổ chức kiểm tra lớp Nhu cầu thực tế - Sinh viên có nơi phù hợp để tự tin trao đổi với giáo viên, trao đổi kín - khơng biết, tiện lợi Đồ án SE Digital Class - Sinh viên theo dõi giảng trực tiếp thiết bị laptop, hay điện thoại cá nhân - Điểm danh hàng loạt hệ thống thông qua thiết bị laptop, hay điện thoại cá nhân thay đọc miệng truyền thống Giải pháp - Điểm danh ứng dụng riêng trường (Ứng dụng dùng để xem thời khóa biểu điểm danh) - Điểm danh thẻ số địa điểm định - Giáo viên điểm danh cách gọi tên sinh viên theo danh sách laptop - Sinh viên xem giảng slide trình chiếu tải giảng từ website mơn học xem laptop, điện thoại II Giải pháp Đề xuất ứng dụng - Ứng dụng quản lý tương tác lớp học SE Digital Class bao gồm tảng web ứng dụng Thông qua sản phẩm giảng viên dễ dàng trình chiếu tài liệu cho sinh viên xem trực tiếp thiết bị cá nhân, mà sinh viên cần đăng nhập tài khoản trường Ngồi ra, tất người dùng cịn tương tác qua chatbox lúc học để đặt câu hỏi (có thể ẩn danh) - Đối tượng sử dụng: giảng viên, trợ giảng, sinh viên - Thiết bị sử dụng: laptop, smart phone (hỗ trợ tối ưu trình duyệt Chrome) Mơ tả nghiệp vụ - Giảng viên: o Quản lý tài liệu (docx, pdf, ppt, ) o Quản lý kiểm tra (trắc nghiệm, tự luận) o Quản lý việc điểm danh o Quản lý vùng thảo luận (đặt câu hỏi, gởi ý kiến, chia sẻ, nhận xét,…) o Quản lý vùng đánh giá (đánh giá, góp ý sinh viên sau buổi học.) Đồ án SE Digital Class o Xem thống kê (Điểm kiểm tra trung bình, danh sách điểm danh, số lượng tương tác, mức độ hài lòng,…) - Sinh viên: o Tải, xem tài liệu o Làm kiểm tra o Thảo luận vùng thảo luận o Điểm danh buổi học o Thực đánh giá sau buổi học - Quản trị viên: o Quản lý giảng viên, sinh viên o Quản lý lớp học Yêu cầu - Yêu cầu nghiệp vụ STT Nghiệp vụ Quản lý lớp học Quản lý giảng viên Quản lý sinh viên Quản lý kiểm tra Quản lý vùng đánh giá Quản lý điểm danh - Yêu cầu tiến hóa STT Nghiệp vụ Quản lý lớp học Quy định Có từ 1-2 giảng viên dạy lý thuyết, 1-2 giảng viên dạy thực hành Lớp học không 50 sinh viên (CLC), không 120 sinh viên (Đại trà) Có thể tạo trước tuần, nhập nhanh file theo định dạng Có thể nhập nhanh file theo định dạng Có thể nhập nhanh file theo định dạng Thang điểm 100 Ghi Mức độ hài lịng (1-5, 1: khơng hài lịng, 2: hài lịng, 3: bình thường, 4: hài lịng, 5: hài lịng), Hai trạng thái: Có mặt, khơng có mặt Thơng sinh người đánh giá nặc danh Quy định Thay đổi tham số số lượng sinh viên giảng viên Ghi Đồ án SE Digital Class Kết phân tích thiết kế a Sơ đồ usecase Đồ án SE Digital Class 10 Đồ án SE Digital Class Hình 8.16: Quản lý sinh viên Mô tả: - Giao diện quản lý sinh viên với danh sách sinh viên hệ thống 64 Đồ án SE Digital Class Hình 8.17: Tạo sinh viên Mô tả: - Giao diện thêm sinh viên thao tác “Lưu” “Trở lại” 65 Đồ án SE Digital Class Hình 8.18: Xem chỉnh sửa sinh viên Mô tả: - Giao diện chỉnh sửa sinh viên thao tác “Lưu” “Trở lại” 66 Đồ án SE Digital Class Hình 8.19: Quản lý lớp học Mô tả: - Giao diện quản lý sinh viên với danh sách sinh viên hệ thống 67 Đồ án SE Digital Class Hình 8.20: Tạo lớp học Mơ tả: - Giao diện thêm lớp học thao tác “Lưu” “Trở lại” 68 Đồ án SE Digital Class Hình 8.21: Xem chỉnh sửa lớp học Mơ tả: - Giao diện chỉnh sửa lớp học thao tác “Lưu” “Trở lại” 69 Đồ án SE Digital Class Hình 8.22: Thêm thành viên vào lớp Mơ tả: - Giao diện thêm giảng viên / sinh viên vào danh sách lớp 70 Đồ án SE Digital Class Cơng nghệ NestJS Hình 8.1: Logo NestJS Nest (NestJS) framework để xây dựng ứng dụng phía máy chủ Node.js efficient (hiệu quả), scalable (có thể mở rộng) Nó sử dụng JavaScript lũy tiến, xây dựng với hỗ trợ đầy đủ TypeScript (nhưng cho phép nhà phát triển mã hóa JavaScript túy) kết hợp yếu tố OOP (Lập trình hướng đối tượng), FP (Lập trình chức năng) FRP (Lập trình phản ứng chức năng) Nest cung cấp kiến trúc ứng dụng vượt trội cho phép nhà phát triển nhóm tạo ứng dụng kiểm tra cao, mở rộng, kết nối lỏng lẻo dễ bảo trì Kiến trúc lấy cảm hứng từ Angular Source: https://nestjs.com/ 71 Đồ án SE Digital Class ReactJS Hình 8.2: Logo ReactJS React.js thư viện Javascript lên năm gần với xu hướng Single Page Application Trong framework khác cố gắng hướng đến mơ hình MVC hồn thiện React bật với đơn giản dễ dàng phối hợp với thư viện Javascript khác Nếu AngularJS Framework cho phép nhúng code javascript code html thơng qua attribute ng-model, ng-repeat với React library cho phép nhúng code html code javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS.Tích hợp javascript HTML vào JSX làm cho component dễ hiểu Source: https://reactjs.org/ 72 Đồ án SE Digital Class Docker Hình 8.3: Logo Docker Docker tảng cho developers sysadmin để develop, deploy run application với container Nó cho phép tạo mơi trường độc lập tách biệt để khởi chạy phát triển ứng dụng môi trường gọi container Khi cần deploy lên server cần run container Docker application bạn khởi chạy Source: Empowering App Development for Developers | Docker 73 Đồ án SE Digital Class Git/Github Hình 8.3: Logo Git & Github Git hệ thống quản lý phiên phân tán (Distributed Version Control System – DVCS) đời vào năm 2005 dùng phổ biến So với hệ thống quản lý phiên tập trung tất mã nguồn lịch sử thay đổi lưu nơi máy chủ hệ thống phân tán, máy khách không "check out" phiên tập tin mà chép (mirror) toàn kho mã nguồn (repository) Như vậy, máy chủ ngừng hoạt động, bạn hồn tồn lấy kho chứa từ máy khách để chép ngược trở lại máy chủ để khơi phục lại tồn hệ thống Mỗi checkout thực đầy đủ tất liệu kho chứa từ máy chủ GitHub dịch vụ tiếng cung cấp kho lưu trữ mã nguồn Git cho dự án phần mềm Github có đầy đủ tính Git, ngồi cịn bổ sung tính social để developer tương tác với Source: - Git (git-scm.com) - GitHub Documentation Hướng dẫn cài đặt sử dụng ● Chạy backend ○ Step 1: Cài docker, docker-compose (windows cài Docker Desktop) ○ Step 2: Mở terminal thư mục backend ○ Step 3: Chạy command: 74 Đồ án SE Digital Class ■ docker-compose up ● Adminer link: http://localhost:8081/ Hệ thống: postgreSQL Máy chủ: db Tên người dùng: admin Mật khẩu: password Cơ sở liệu: class_interaction ● Api link: http://localhost:3001/documents/#/ III Phân chia công việc Mơ hình áp dụng: Scrum ○ Scrum quy trình quản lý phát triển theo phương pháp phát triển linh hoạt (Agile) tập trung đặc biệt vào việc quản lý công việc môi trường phát triển theo nhóm Về Scrum bắt nguồn từ hoạt động xảy vòng tuần hồn Scrum tin tưởng vào việc trao quyền cho nhóm phát triển làm việc theo nhóm nhỏ (từ 7-9 người) ○ Chúng em thực theo mơ hình thành viên áp dụng nhiều việc chia Sprint thơng qua Product Backlog Thơng qua chúng em thật quản lý tiến độ task ○ Trong lúc thực hiện, có thay đổi bắt buộc với việc planning tuần lần chúng em đảm bảo tiến độ nhờ giá trị cốt lõi Scrum 75 Đồ án SE Digital Class Hình 12.1: Product backlog Công cụ sử dụng: Trello, messenger ○ Trello ứng dụng, phần mềm, công cụ quản lý công việc dùng để thiết lập quản lý đầu việc vơ logic hiệu Tính bật Trello quản lý cơng việc theo nhóm Các cơng việc chung nhóm thành viên cần nhìn qua nắm tồn cơng việc ○ Các thành viên sau thống công việc buổi họp offline cập nhật task lên Trello nhằm để theo dõi tiến độ Việc giúp thành viên chủ động hỗ trợ task bị trễ nhằm tăng tinh thần teamwork Backlog phân chia công việc 76 Đồ án SE Digital Class Kết đạt IV Ưu điểm: - Sản phẩm phân tích dựa góc nhìn thực tế liệu thu thập pain point giảng viên, sinh viên gặp phải lớp học hàng ngày - Thành viên team có kinh nghiệm thực dự án bên ngồi nên cơng nghệ kiến thức áp dụng gần Nhược điểm: - Thời gian dành cho việc thu thập ý kiến user phân tích nhiều để chọn chức giá trị khiến team chưa thể hoàn phần UI/ UX cho sản phẩm Chức hoàn thành: - Quản lý người dùng - Quản lý lớp học - Tương tác lớp học Tài liệu tham khảo V typeorm/typeorm: Issue #1239 77 Đồ án SE Digital Class How to query a Many-to-Many relation with TypeORM https://docs.nestjs.com/fundamentals/circular-dependency https://docs.nestjs.com/fundamentals/injection-scopes https://github.com/typeorm/typeorm/blob/master/docs/find-options.md https://firebase.google.com/docs https://ant.design/ https://reactjs.org/docs/getting-started.html https://umijs.org/docs 78 ... vào hệ thống Phải lớp học thêm vào III.9.4 Trạng thái hệ thống bắt đầu thực Use-case Hệ thống Vùng thảo luận lớp học III.9.5 Trạng thái hệ thống sau thực Use-case Hệ thống Vùng thảo luận lớp học. .. hệ thống Phải lớp học thêm vào III.10.4 Trạng thái hệ thống bắt đầu thực Use-case Hệ thống Vùng thảo luận lớp học 19 Đồ án SE Digital Class III.10.5 Trạng thái hệ thống sau thực Use-case Hệ thống. .. vào hệ thống Phải lớp học thêm vào III.11.4 Trạng thái hệ thống bắt đầu thực Use-case Hệ thống Vùng thảo luận lớp học III.11.5 Trạng thái hệ thống sau thực Use-case Hệ thống Vùng thảo luận lớp học