Tạo không gian cho người dùng có thể tham gia các lớp học, bài kiểm tra và trao đổi các thắc mắc, vấn đề với nhau, giúp đỡ nhau trong học tập.. Trong suốt quá trình học tại trường Đại Họ
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHĨA LUẬN TỐT NGHIỆP NGÀNH CƠNG NGHỆ THƠNG TIN TÌM HIỂU FLUTTER VÀ XÂY DỰNG APP QUẢN LÝ LỚP HỌC GVHD: TS HUỲNH XUÂN PHỤNG SVTH: LÂM HOÀNG AN ĐÀO HỒNG VINH SKL009839 Tp Hồ Chí Minh, tháng 6/2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHĨA LUẬN TỐT NGHIỆP TÌM HIỂU FLUTTER VÀ XÂY DỰNG APP QUẢN LÝ LỚP HỌC Giảng viên hướng dẫn: Ts Huỳnh Xuân Phụng Nhóm sinh viên thực hiện: Lâm Hoàng An – 18110073 Đào Hồng Vinh – 18110239 Tp Hồ Chí Minh, tháng 06 năm 2022 CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc Tp Hồ Chí Minh, ngày… tháng…năm 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Lâm Hoàng An MSSV: 18110073 Họ tên sinh viên: Đào Hồng Vinh MSSV: 18110239 Ngành: Công nghệ thơng tin Tên đề tài: Tìm hiểu Flutter xây dựng app quản lý lớp học Giáo viên hướng dẫn: Ts Huỳnh Xuân Phụng NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: (Bằng Chữ: ) Tp Hồ Chí Minh, ngày… tháng… năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc Tp Hồ Chí Minh, ngày… tháng…năm 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Lâm Hoàng An MSSV: 18110073 Họ tên sinh viên: Đào Hồng Vinh MSSV: 18110239 Ngành: Cơng nghệ thơng tin Tên đề tài: Tìm hiểu Flutter xây dựng app quản lý lớp học Giáo viên phản biện: …………………………………………………………… NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: (Bằng Chữ: ) Tp Hồ Chí Minh, ngày… tháng… năm 2022 Giáo viên phản biện (Ký & ghi rõ họ tên) Lời cảm ơn Để hồn thành báo cáo mơn học này, lời đầu tiên, nhóm chúng tơi xin bày tỏ lịng biết ơn chân thành sâu sắc đến giảng viên hướng dẫn: Thầy Huỳnh Xuân Phụng tận hình hướng dẫn chúng tơi suốt q trình nghiên cứu thực đề tài Chúng xin gửi lời cảm ơn đến quý thầy cô khoa Đào Tạo Chất Lượng Cao, quý thầy cô khoa Công Nghệ Thông Tin trang bị cho kiến thức kinh nghiệm quý giá trình học tập nhiệt tình giúp đỡ chúng tơi thực đề tài Chúng xin chân thành cảm ơn phòng thư viện cung cấp tài liệu tạo điều kiện thuận lợi để chúng tơi hồn thành tiểu luận Mặc dù có nhiều cố gắng, thời gian có hạn, trình độ, kỹ thân nhiều hạn chế nên chắn khơng tránh khỏi hạn chế, thiếu sót Rất mong đóng góp, bảo, bổ sung thêm thầy cô bạn Chúng xin chân thành cảm ơn ! CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên sinh viên: Lâm Hoàng An MSSV: 18110073 Họ tên sinh viên: Đào Hồng Vinh MSSV: 18110239 Ngành: Công nghệ thơng tin Tên đề tài: Tìm hiểu Flutter xây dựng app quản lý lớp học GV hướng dẫn: TS HUỲNH XUÂN PHỤNG Nhiệm vụ tiểu luận: Nghiên cứu MongoDB, NestJS, Flutter, NodeJS, ReactJS Nghiên cứu SocketIO Sử dụng thư viện Mongoose để tạo Model cho liệu MongoDB Sử dụng NestJS viết API socket Dùng ReactJs để làm front-end theo kiểu Single page application Kết hợp thành phần lại để xây dựng app kiểm tra trắc nghiệm Hướng dẫn cài đặt kiểm thử phần mềm Đề cương viết luận văn : MỤC LỤC A GIỚI THIỆU: Tính cấp thiết đề tài Khảo sát trạng Mục đích đề tài Kết dự kiến đạt Phạm vi nghiên cứu Phương pháp nghiên cứu B CƠ SỞ LÝ THUYẾT 2.1 Tổng quan NodeJS 2.2 Tổng quan Flutter 2.3 Tổng quan MogoDB C TỔNG QUAN Sơ đồ tổng quan Use-case diagram Danh sách chức Ma trận quyền – Permission matrix Các yêu cầu phi chức năng6 Các giả thiết, ràng buộc D MÔ TẢ YÊU CẦU Tổng quan quy trình nghiệp vụ: Phân tích u cầu chức Phân tích yêu cầu phi chức E KIỂM THỬ F PHÂN CÔNG G KẾT LUẬN KẾ HOẠCH THỰC HIỆN STT Thời gian Công việc 07/03/2022 – 20/03/2022 Làm tính chat 21/03/2022 – 10/04/2022 Làm tính viết, bình luận thích viết Ghi 11/04/2022 – 24/04/2022 Làm tính điểm danh, nộp tải nộp cho chủ lớp học 25/04/2022 – 15/05/2022 Làm chức xem lịch, xem ngày có deadline hay điểm danh 16/05/2022 – 29/05/2022 Thêm loại câu hỏi: Chọn nhiều đáp án, Chọn đáp án, Đúng/Sai Kéo thả 30/05/2022 – 12/06/2022 Thêm hình ảnh âm cho câu hỏi 13/06/2022 – 22/06/2022 Viết báo cáo hoàn chỉnh đồ án Ngày 16 tháng 06 năm 2022 Người viết đề cương Ý kiến giáo viên hướng dẫn (ký ghi rõ họ tên) MỤC LỤC MỤC LỤC - DANH MỤC HÌNH ẢNH 13 DANH MỤC BẢNG BIỂU 16 LỜI MỞ ĐẦU 21 CHƯƠNG 1: GIỚI THIỆU - 22 Tính cấp thiết đề tài 22 Khảo sát trạng 22 2.1 Kahoot! 22 2.2 Quizizz - 23 Mục đích đề tài 23 Kết dự kiến đạt - 24 3.1 Phía khách - 24 3.2 Phía người dùng (User) 24 3.3 Phía người tạo lớp học (Host-room) - 24 3.4 Phía người quản lý (Admin) 25 Phạm vi nghiên cứu 25 Phương pháp nghiên cứu 25 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 26 NodeJS - 26 1.1 Tổng quan - 26 1.2 Ưu điểm 26 1.3 Nhược điểm - 26 Flutter - 26 2.1 Định nghĩa - 26 2.2 Lí chọn Flutter - 27 2.3 Tính 28 MongoDB 28 3.1 Tổng quan - 28 3.2 Ưu điêm 29 3.3 Nhược điểm - 29 CHƯƠNG 3: TỔNG QUAN - 30 Sơ đồ tổng quan - 30 Use-case diagram - 31 Danh sách chức - 33 Ma trận quyền – Permission matrix: 35 Các yêu cầu phi chức - 36 Các giả thiết, ràng buộc 36 CHƯƠNG 4: MÔ TẢ YÊU CẦU: 38 Tổng quan quy trình nghiệp vụ: - 38 Phân tích yêu cầu chức - 39 2.1 Chức quản lý lớp học user - 39 2.1.1 Xem thông tin lớp học - 39 2.1.2 Tham gia lớp học - 45 2.1.3 Báo xấu lớp học 48 2.1.4 Rời lớp học 52 2.1.5 Xem lộ trình lớp học - 55 2.2 Chức tham gia kiểm tra user 58 2.2.1 Tham gia kiểm tra 58 2.2.2 Xem thống kê chọn đáp án 62 2.3 Chức quản lý lớp học host-room 64 Chương 5: TestCase không đủ không số dư đủ số dư Tham gia kiểm tra 5.1 Tham gia kiểm tra qua thông báo thành công Bảng 91 Testcase tham gia qua thông báo thành công Test Scenario Tham gia kiểm tra qua thông ID báo Test Case Tham gia kiểm tra qua thông Description báo thành công Prerequisite Đã đăng nhập vào hệ thống Test Case ID JO_01 Test Priority High Post-Requisite NA Host-room bắt đầu kiểm tra Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Result Comment nment Nhấn vào Màn hình Màn thơng báo phịng chờ hình kiểm tra phòng s mobile Passed mobile Passed chờ kiểm tra Làm Điều hướng Điều kiểm tra đến hướng hết thời hình Làm đến gian chờ kiểm tra hình Làm kiểm tra 5.2 Tham gia kiểm tra qua thơng báo thất bại Khố luận tốt nghiệp 149 Chương 5: TestCase Bảng 92 Testcase tham gia qua thông báo thất bại Test Scenario Tham gia kiểm tra qua thông ID báo Test Case Tham gia kiểm tra qua thông Description báo thất bại Prerequisite Đã đăng nhập vào hệ thống Test Case ID JO_02 Test Priority High Post-Requisite NA Host-room bắt đầu kiểm tra Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Resul Comment nment t s mobile Fail Nhấn vào Thông báo Điều thông báo hết hạn hướng hạn kiểm tra hình kiểm tra Trang chủ 5.3 Tham gia kiểm tra nhập sai mã Bảng 93 Testcase tham gia thất bại nhập sai mã Test Scenario Tham gia kiểm tra qua nhập ID mã Test Case Tham gia kiểm tra nhập Description mã thất bại Prerequisite Đã đăng nhập vào hệ thống Test Case ID JO_03 Test Priority High Post-Requisite NA Host-room bắt đầu kiểm tra Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Result Comme nment Khoá luận tốt nghiệp nts 150 Chương 5: TestCase Chọn icon Điều hướng Điều thứ sang hướng hình trang sang bottom chủ hình trang Passed mobile Passed mobile Passed chủ navigation mobile Chọn icon Xuất Xuất góc dialog nhập dialog phải mã phịng nhập mã hình kiểm tra phịng kiểm tra Nhập sai Tắt dialog Tắt dialog mã phòng trả trả kiểm tra hình hình trang chủ trang chủ QWE56YU Xem thông tin tài khoản Bảng 94 Testcase xem thông tin tài khoản Test Scenario ID Xem thông tin tài khoản Test Case ID TT_01 Test Case Kiểm tra hiển thị thông tin Test Priority Vừa Description tài khoản Prerequisite Đã đăng nhập vào hệ Post-Requisite NA thống hình điều hướng sang trang chủ Test Execution Steps: No Action Inputs Expected Actual Test Output Output Environm Result Comment ent s Chọn icon Điều hướng Điều tài khoản sang hình hướng cuối tài khoản sang mobile Test Test Passed hình tài khoản Khố luận tốt nghiệp 151 Chương 5: TestCase bottom navigation Chọn icon Màn hình Màn hình thơng tin cá thơng tin cá thơng tin nhân góc nhân cá nhân Kiểm tra Thơng tin cá Thơng tin hiển thị nhân hiển thị cá nhân thông tin thông tin cá thông tin hiển thị thành nhân đăng kí cơng mobile Passed mobile Passed trái hình Xem thơng tin đăng kí Chỉnh sửa thông tin tài khoản 7.1 Chỉnh sửa tên bạn Bảng 95 Tetscase chỉnh sửa tên tài khoản Test Scenario Chỉnh sửa thông tin tài khoản Test Case ID CS_01 Chỉnh sửa tên bạn Test Priority Vừa Đã đăng nhập vào hệ thống Post-Requisite NA ID Test Case Description Prerequisite hình điều hướng sang trang chủ Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Result Comment nment Chọn icon Điều hướng Điều tài khoản sang hướng cuối hình tài sang khoản Khố luận tốt nghiệp mobile s Passed 152 Chương 5: TestCase bottom hình tài navigation khoản Chọn icon Màn hình Màn hình thơng tin cá thơng tin cá thơng tin nhân góc nhân cá nhân mobile Passed mobile Passed mobile Passed trái hình Chỉnh sửa Họ bạn: Hiển thị Hiển thị họ bạn Trần thông tin thông tin vừa nhập vừa nhập Nhấn icon Điều hướng Điều hồn thành hướng thơng tin góc hình tài hình thành phải khoản tài khoản cơng cách xóa nhập lại Chỉnh sửa hình 7.2 Chỉnh sửa số điện thoại Bảng 96 Testcase chỉnh sửa số điện thoại Test Scenario ID Chỉnh sửa thông tin tài khoản Test Case ID CS_02 Test Case Chỉnh sửa số điện thoại Test Priority Vừa Đã đăng nhập vào hệ thống Post-Requisite NA Description Prerequisite hình điều hướng sang trang chủ Test Execution Steps: N Action o Inputs Expected Actual Test Output Output Environ Result Comment ment s Chọn icon tài Điều hướng Điều khoản cuối sang hướng Khoá luận tốt nghiệp mobile Test Test Passed sang 153 Chương 5: TestCase bottom hình tài hình navigation khoản tài khoản Chọn icon Màn hình Màn thơng tin cá thơng tin cá hình nhân góc nhân thơng tin trái hình mobile Passed mobile Passed mobile Passed cá nhân Chỉnh sửa số Số điện thoại Hiển thị Hiển thị điện thoại : thông tin thông tin cách xóa 0123456789 vừa nhập vừa nhập Nhấn icon Điều hướng Điều hồn thành góc hướng thơng tin phải hình tài hình thành hình khoản tài khoản cơng nhập lại Chỉnh sửa 7.3 Chỉnh sửa giới thiệu Bảng 97 Testcase chỉnh sửa giới thiệu Test Scenario Chỉnh sửa thông tin tài khoản Test Case ID CS_03 Chỉnh sửa giới thiệu Test Priority Vừa Đã đăng nhập vào hệ thống Post-Requisite NA ID Test Case Description Prerequisite hình điều hướng sang trang chủ Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Result Comment nment Chọn icon Điều hướng Điều tài khoản sang hướng cuối hình tài sang khoản Khoá luận tốt nghiệp mobile s Passed 154 Chương 5: TestCase bottom hình tài navigation khoản Chọn icon Màn hình Màn hình thơng tin cá thơng tin cá thơng tin nhân góc nhân cá nhân mobile Passed mobile Passed mobile Passed trái hình Chỉnh sửa Số điện thoại Hiển thị Hiển thị giới thiệu : thông tin thông tin cách Rất chuyên vừa nhập vừa nhập xóa nhập nghiệp Nhấn icon Điều hướng Điều hồn thành hướng thơng tin góc hình tài hình thành phải khoản tài khoản cơng lại Chỉnh sửa hình Xem lớp học Bảng 98 Testcase chỉnh xem lớp học Test Scenario ID Xem lớp học Test Case ID LH_01 Test Case Kiểm tra hiển thị thông tin Test Priority Vừa Description lớp học Prerequisite Đã đăng nhập vào hệ thống Post-Requisite NA hình điều hướng sang trang chủ Test Execution Steps: No Action Khoá luận tốt nghiệp Inputs Expected Actual Test Test Test Output Output Environ Result Comment ment s 155 Chương 5: TestCase Chọn icon thứ Điều hướng Điều sang hình hướng sang bottom lớp học hình Click vào Màn hình chi Màn hình lớp tiết lớp học chi tiết lớp học có mobile Passed mobile Passed học hệ thống Passed lớp học navigation mobile Click vào icon Hiển thị lựa Hiển thị thơng tin góc chọn để xem lựa thông tin bên phải thông tin chọn để thành hình lớp học xem công Xem thông tin lớp học Điểm danh Bảng 99 Testcase Điểm danh Test Scenario Điểm danh Test Case ID LH_01 Điểm danh thành công Test Priority Vừa ID Test Case Description Prerequisite Đã đăng nhập vào hệ thống Post-Requisite NA hình điều hướng sang trang chủ Test Execution Steps: No Action Inputs Expected Actual Test Output Output Environ Result Comment ment s Chọn icon Điều hướng Điều thời gian thứ sang hình hướng sang lịch hình mobile Test Test Passed lịch Khoá luận tốt nghiệp 156 Chương 5: TestCase bottom navigation Nhấn vào Hiển thị thông Hiển thị ngày có báo điểm danh thơng báo thơng báo mobile Passed mobile Passed điểm danh điểm danh Click vào Điểm Thông báo Thông báo icon bàn tay chuyển màu, chuyển danh điểm danh màu, điểm thành thành công danh thành công thông báo công 10 Nộp tập Bảng 100 Testcase nộp tập Test Scenario Nộp tập Test Case ID LH_01 Nộp tập thành công Test Priority Vừa Đã đăng nhập vào hệ thống Post-Requisite NA ID Test Case Description Prerequisite hình điều hướng sang trang chủ Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Result Comment nment Chọn Hiển thị Hiển thị blog có hình chọn file hình chọn thơng báo mobile s Passed file nộp tập Khoá luận tốt nghiệp 157 Chương 5: TestCase file Màn hình hiển Màn hình tập cần thị tên file vừa hiển thị tên nộp chọn file vừa chọn Điều hướng Điều hướng hình hình Tình Tình trạng từ chưa trạng từ chưa nộp chuyển nộp chuyển thành tên file thành tên file Chọn Nhấn Nộp Khoá luận tốt nghiệp mobile Passed mobile Passed 158 Chương 6: Kết luận CHƯƠNG 6: KẾT LUẬN Tổng kết Sau khoảng thời gian thực đề tài, chương trình hồn thành đạt số kết quản sau: - Nắm cách thức hoạt động ứng dụng tạo trắc nghiệm - Không tham gia mà tạo trắc nghiệm để thành viên thuộc lớp tham gia - Tìm hiểu sử dụng công nghệ sử dụng: Node JS Typescript Flutter - Giao diện chương trình thân thiện dễ sử dụng Kết đạt - Học hỏi công nghệ mới: Flutter, Nodejs biết cách ứng dụng vào đồ án tốt nghiệp - Kỹ làm việc nhóm tốt, kỹ giao tiếp team, phân cơng công việc làm dự án ngắn ngày Kỹ tìm kiếm tài liệu, kỹ tìm kiếm phải giải pháp mạng cho khúc mắc trình xây dựng đồ án - Hiểu quy trình cách hoạt động kiểm thử phần mềm, biết cách tạo kế hoạch kiểm thử, thiết kế thực thi testcase - Giải vấn đề đặt phần khảo sát trạng Giao diện đơn giản, dễ sử dụng từ lần đầu - Ứng dụng cung cấp nhiều tính hỗ trợ việc quản lý, học tập điểm danh, nộp tập Cũng tạo thêm không gian trao đổi cho user cách viết blog hay nhắn tin thơng qua lớp học tham gia - Có thể đăng kí làm host-room để mở lớp học, tạo kiểm tra cho thành viên tham gia lớp học kiểm tra có tính điểm - Admin duyệt lớp học user đăng kí, khóa lớp học hoạt động nhận khiếu nại user khác Khoá luận tốt nghiệp 159 Chương 6: Kết luận Ưu điểm nhược điểm 3.1 Ưu điểm - Ứng dụng thiết kế với giao diện dễ nhìn, thân thiện với người dùng Thao tác toán đơn giản Đáp ứng chức ứng dụng trắc nghiệm - Bằng việc thêm tính điểm danh, nộp tập giúp việc quản lý lớp học host-room hiệu thuận tiện - Với việc hiển thị lộ rình lớp học trước tham gia lớp giúp cho user xem lớp học có phù hợp với nhu cầu khơng định có nên tham gia hay khơng - Ứng dụng hỗ trợ việc chuyển đổi chế độ sáng/tối phù hợp với nhu cầu người dùng - Để tránh việc user bỏ lỡ kiểm tra, host-room bắt đầu kiểm tra xuất thông báo đến user User cần nhấn vào thơng báo điều hướng đến phịng chờ kiểm tra 3.2 Nhược điểm - Về giao diện, nhiều thiếu sót việc thiết kế nên nhiều hình thiết kế chưa thật tốt - Về chức năng, nghiệp vụ kinh nghiệm nên cịn nhiều thiếu xót, ứng dụng cịn mang tính demo chưa thử nghiệm quy mơ lớn (>30) Cịn thiếu tính đánh giá lớp học để người dùng có nhìn bao qt trước định tham gia lớp học Khoá luận tốt nghiệp 160 Chương 6: Kết luận Khó khăn cách giải Bảng 101 Khó khăn cách giải Khó khăn STT Cách khắc phục Gặp khó khăn việc thống Biết lắng nghe ý kiến thành ý kiến thành viên nhóm viên nhóm, nhóm tìm giải pháp tốt cho đề tài Gặp khó khăn làm việc Thống làm việc khơng thống nhất, khó hỗ trợ việc Fetch API Flutter Nodejs tảng Đầu tư nhiều thời gian tìm hiểu nên việc nghiên cứu học cịn gặp nhiều khó khăn Hướng phát triển - Để ứng dụng hoạt động hiệu cần thêm số tính + Đánh giá lớp học theo thang điểm + Khiếu nại, báo cáo lớp học Khoá luận tốt nghiệp 161 Chương 6: Kết luận Tài liệu tham khảo STT TÊN TÀI LIỆU MƠ TẢ https://docs.nestjs.com/ Tài liệu tìm hiểu NestJS https://flutter.dev/ Tài liệu tìm hiểu Flutter https://ncov.vnanet.vn/tin-tuc/day- Dạy, học trực tuyến – “cứu cánh”của giáo dục đại dịch hoc-truc-tuyen-cuu-canh-cua-giaoduc-trong-dai-dich-covid19/65a5f09d-55cc-4a6e-aa9e0eb987c5341a - Figma: https://www.figma.com/file/05VEXdhd9a4Jx7bIQjIOpS/Unt Tài liệu thiết kế itled?node-id=0%3A1 - Wireframe: https://balsamiq.cloud/spgh9yr/pnpfy55/r2AD9 Khoá luận tốt nghiệp 162 S K L 0