1. Trang chủ
  2. » Giáo Dục - Đào Tạo

Tìm hiểu flutter và xây dựng app quản lý lớp học

165 5 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Tìm Hiểu Flutter Và Xây Dựng App Quản Lý Lớp Học
Tác giả Lâm Hoàng An, Đào Hồng Vinh
Người hướng dẫn Ts Huỳnh Xuân Phụng
Trường học Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành Công Nghệ Thông Tin
Thể loại khóa luận tốt nghiệp
Năm xuất bản 2022
Thành phố Tp. Hồ Chí Minh
Định dạng
Số trang 165
Dung lượng 10,61 MB

Cấu trúc

  • CHƯƠNG 1: GIỚI THIỆU (24)
    • 1. Tính cấp thiết của đề tài (6)
    • 2. Khảo sát hiện trạng (6)
      • 2.1. Kahoot! (24)
      • 2.2. Quizizz (25)
    • 2. Mục đích đề tài (25)
    • 3. Kết quả dự kiến đạt được (26)
      • 3.1. Phía khách (26)
      • 3.2. Phía người dùng (User) (26)
      • 3.3. Phía người tạo lớp học (Host-room) (26)
      • 3.4. Phía người quản lý (Admin) (27)
    • 5. Phạm vi nghiên cứu (6)
    • 6. Phương pháp nghiên cứu (6)
  • CHƯƠNG 2: CƠ SỞ LÝ THUYẾT (28)
    • 1. NodeJS (28)
      • 1.1. Tổng quan (28)
      • 1.2. Ưu điểm (28)
      • 1.3. Nhược điểm (28)
    • 2. Flutter (28)
      • 2.1. Định nghĩa (0)
      • 2.2. Lí do chọn Flutter (29)
      • 2.3. Tính năng (30)
    • 3. MongoDB (30)
      • 3.1. Tổng quan (30)
      • 3.2. Ưu điêm (31)
      • 3.3. Nhược điểm (31)
  • CHƯƠNG 3: TỔNG QUAN (32)
    • 1. Sơ đồ tổng quan (7)
    • 2. Use-case diagram (7)
    • 3. Danh sách các chức năng (7)
    • 4. Ma trận quyền – Permission matrix (7)
    • 5. Các yêu cầu phi chức năng (7)
    • 6. Các giả thiết, ràng buộc (38)
  • CHƯƠNG 4: MÔ TẢ YÊU CẦU (40)
    • 1. Tổng quan quy trình nghiệp vụ (7)
    • 2. Phân tích yêu cầu chức năng (7)
      • 2.1. Chức năng quản lý lớp học của user (41)
        • 2.1.1. Xem thông tin lớp học (41)
        • 2.1.2. Tham gia lớp học (47)
        • 2.1.3. Báo xấu lớp học (50)
        • 2.1.4. Rời lớp học (54)
        • 2.1.5. Xem lộ trình lớp học (57)
      • 2.2. Chức năng tham gia bài kiểm tra của user (60)
        • 2.2.1. Tham gia kiểm tra (60)
        • 2.2.2. Xem thống kê chọn đáp án (64)
      • 2.3. Chức năng quản lý lớp học của host-room (66)
        • 2.3.1. Thêm bài tập (66)
        • 2.3.2. Thêm lộ trình (69)
        • 2.3.3. Thêm điểm danh (72)
        • 2.3.4. Xem lịch sử kiểm tra (0)
      • 2.4. Chức năng quản lý bộ đề của host-room (78)
        • 2.4.1. Xem bộ đề (78)
        • 2.4.2. Chỉnh sửa bộ đề (81)
        • 2.4.3. Xóa bộ đề (85)
        • 2.4.5. Xóa câu hỏi (89)
        • 2.4.6. Thêm câu hỏi (93)
        • 2.4.7. Chỉnh sửa câu hỏi (105)
      • 2.5. Chức năng quản lý tài khoản (108)
        • 2.5.1. Xem thông tin tài khoản (108)
        • 2.5.2. Sửa thông tin tài khoản (111)
        • 2.5.3. Cập nhật ảnh avatar (114)
        • 2.5.4. Xem các lớp đang tham gia (117)
      • 2.6. Chức năng đăng kí (119)
        • 2.6.1. Yêu cầu chức năng và mô tả (119)
        • 2.6.2. Usecase đăng kí (120)
        • 2.6.3. Flow (Bussiness Rule) (120)
        • 2.6.4. Lược đồ tuần tự (121)
        • 2.6.5. Activity Diagram (121)
        • 2.6.6. Giao diện (122)
      • 2.7. Chức năng đăng nhập (123)
        • 2.6.2. Usecase Đăng nhập (123)
        • 2.6.5. Activity diagram (125)
      • 2.8. Xem blog (127)
        • 2.8.1. Yêu cầu chức năng và mô tả (127)
        • 2.8.2. Usecase Xem blog (127)
        • 2.8.3. Flow (Bussiness Rule) (127)
        • 2.8.4. Giao diện (128)
      • 2.9. Viết blog (130)
        • 2.9.1. Yêu cầu chức năng và mô tả (130)
        • 2.9.2. Usecase Viết blog (130)
        • 2.9.3. Flow (Bussiness Rule) (130)
        • 2.9.4. Giao diện (131)
      • 2.10. Duyệt lớp học của Admin (132)
        • 2.10.1. Yêu cầu chức năng và mô tả (132)
        • 2.10.2. Usecase Duyệt lớp học (132)
        • 2.10.3. Flow (Bussiness Rule) (133)
        • 2.10.4. Lược đồ tuần tự (133)
        • 2.10.5. Activity diagram (134)
        • 2.10.6. Giao diện (134)
    • 3. Phân tích yêu cầu phi chức năng (7)
      • 3.2.1. Security (135)
  • CHƯƠNG 5: TESTCASE (136)
    • 1. Đăng kí (136)
      • 1.1. Đăng kí thành công (136)
      • 1.2. Nhập sai định dạng email (0)
      • 1.3. Email đã được đăng kí (138)
    • 2. Đăng nhập (139)
      • 2.1. Nhập đúng email và mật khẩu (139)
      • 2.2. Nhập sai email và mật khẩu (140)
      • 2.3. Để trống email (140)
      • 2.4. Để trống mật khẩu (141)
    • 3. Tạo lớp học (142)
      • 3.1. Nhập đúng thông tin lớp học (142)
      • 3.2. Để trống tên lớp học (143)
      • 3.3. Để trống chủ đề lớp học (145)
      • 3.5. Để trống giá lớp học (147)
    • 4. Tham gia lớp học (148)
      • 4.1. Tham gia lớp học thành công (148)
      • 4.2. Tham gia lớp học thất bại (149)
    • 5. Tham gia kiểm tra (151)
      • 5.1. Tham gia kiểm tra qua thông báo thành công (151)
      • 5.2. Tham gia kiểm tra qua thông báo thất bại (151)
      • 5.3. Tham gia kiểm tra khi nhập sai mã (152)
    • 6. Xem thông tin tài khoản (153)
    • 7. Chỉnh sửa thông tin tài khoản (154)
      • 7.1. Chỉnh sửa tên của bạn (154)
      • 7.2. Chỉnh sửa số điện thoại (155)
      • 7.3. Chỉnh sửa giới thiệu (156)
    • 8. Xem lớp học (157)
    • 9. Điểm danh (158)
    • 10. Nộp bài tập (159)
  • CHƯƠNG 6: KẾT LUẬN (0)
    • 1. Tổng kết (161)
    • 2. Kết quả đạt được (161)
    • 3. Ưu điểm và nhược điểm (162)
      • 3.1. Ưu điểm (162)
      • 3.2. Nhược điểm (162)
    • 4. Khó khăn và cách giải quyết (163)
    • 5. Hướng phát triển (163)
    • 6. Tài liệu tham khảo (164)

Nội dung

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ọ

GIỚI THIỆU

Khảo sát hiện trạng

4 Kết quả dự kiến đạt được

3 Danh sách các chức năng

4 Ma trận quyền – Permission matrix

5 Các yêu cầu phi chức năng6 Các giả thiết, ràng buộc

1 Tổng quan quy trình nghiệp vụ:

2 Phân tích yêu cầu chức năng

3 Phân tích yêu cầu phi chức năng

STT Thời gian Công việc Ghi chú

2 21/03/2022 – 10/04/2022 Làm tính năng bài viết, bình luận và thích bài viết

3 11/04/2022 – 24/04/2022 Làm tính năng điểm danh, nộp bài và tải bài nộp cho chủ lớp học

4 25/04/2022 – 15/05/2022 Làm chức năng xem lịch, xem ngày có deadline hay điểm danh

5 16/05/2022 – 29/05/2022 Thêm các loại câu hỏi: Chọn nhiều đáp án, Chọn một đáp án, Đúng/Sai và Kéo thả

6 30/05/2022 – 12/06/2022 Thêm hình ảnh và âm thanh cho câu hỏi

7 13/06/2022 – 22/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

1 Tính cấp thiết của đề tài - 22

3 Kết quả dự kiến đạt được - 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

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - 26

3 Danh sách các chức năng - 33

4 Ma trận quyền – Permission matrix: - 35

5 Các yêu cầu phi chức năng - 36

6 Các giả thiết, ràng buộc - 36

CHƯƠNG 4: MÔ TẢ YÊU CẦU: - 38

1 Tổng quan quy trình nghiệp vụ: - 38

2 Phân tích yêu cầu chức năng - 39

2.1 Chức năng quản lý lớp học của user - 39

2.1.1 Xem thông tin lớp học - 39

2.1.5 Xem lộ trình lớp học - 55

2.2 Chức năng tham gia bài kiểm tra của user - 58

2.2.2 Xem thống kê chọn đáp án - 62

2.3 Chức năng quản lý lớp học của host-room - 64

2.3.4 Xem lịch sử kiểm tra - 73

2.4 Chức năng quản lý bộ đề của host-room - 76

2.5 Chức năng quản lý tài khoản - 106

2.5.1 Xem thông tin tài khoản - 106

2.5.2 Sửa thông tin tài khoản - 109

2.5.4 Xem các lớp đang tham gia - 115

2.6.1 Yêu cầu chức năng và mô tả - 117

2.6.1 Yêu cầu chức năng và mô tả - 121

2.8.1 Yêu cầu chức năng và mô tả - 125

2.9.1 Yêu cầu chức năng và mô tả - 128

2.10 Duyệt lớp học của Admin - 130

2.10.1 Yêu cầu chức năng và mô tả - 130

3 Phân tích yêu cầu phi chức năng - 133

1.2 Nhập sai định dạng email - 135

1.3 Email đã được đăng kí - 136

2.1 Nhập đúng email và mật khẩu - 137

2.2 Nhập sai email và mật khẩu - 138

3.1 Nhập đúng thông tin lớp học - 140

3.2 Để trống tên lớp học - 141

3.3 Để trống chủ đề lớp học - 143

3.4 Để trống giới thiệu lớp học - 144

3.5 Để trống giá lớp học - 145

4.1 Tham gia lớp học thành công - 146

4.2 Tham gia lớp học thất bại - 147

5.1 Tham gia kiểm tra qua thông báo thành công - 149

5.2 Tham gia kiểm tra qua thông báo thất bại - 149

5.3 Tham gia kiểm tra khi nhập sai mã - 150

6 Xem thông tin tài khoản - 151

7 Chỉnh sửa thông tin tài khoản - 152

7.1 Chỉnh sửa tên của bạn - 152

7.2 Chỉnh sửa số điện thoại - 153

3 Ưu điểm và nhược điểm - 160

4 Khó khăn và cách giải quyết - 161

Hình 3 Sơ đồ tổng quan hệ thống (1) - 30

Hình 4 Sơ đồ tổng quan hệ thống (2) - 30

Hình 5 Sơ đồ tổng quan hệ thống (3) - 31

Hình 9 Usecase của Host-room - 33

Hình 11 Tổng quan quy trình nghiệp vụ - 38

Hình 12 Usecase Quản lý lớp học - 39

Hình 13 Màn hình Chi tiết lớp học - 41

Hình 14 Màn hình Các actions của lớp học( host-room) - 43

Hình 15 Màn hình các actions lớp học (user) - 44

Hình 16 Màn hình Chi tiết lớp học - 47

Hình 17 Màn hình Báo xấu lớp học - 51

Hình 18 Màn hình Rời lớp học - 54

Hình 19 Màn hình Lộ trình - 57

Hình 20 Sequence diagram cho usecase Tham gia kiểm tra - 59

Hình 21 Màn hình Phòng chờ kiểm tra - 61

Hình 22 Sequence diagram cho usecase Thống kê - 63

Hình 23 Màn hình Thống kê - 63

Hình 24 Usecase Quản lý lớp học - 64

Hình 25 Màn hình Tạo bài tập - 67

Hình 26 Màn hình Thêm lộ trình - 70

Hình 27 Màn hình Lịch sử kiểm tra - 75

Hình 28 Usecase Quản lý đề kiểm tra - 76

Hình 29 Màn hình Bộ đề kiểm tra - 78

Hình 30 Giao diện Tạo câu hỏi một lựa chọn - 97

Hình 31 Giao diện Tạo câu hỏi nhiều lựa chọn - 99

Hình 32 Giao diện Tạo câu hỏi đúng sai - 100

Hình 33 Tạo câu hỏi dạng kéo thả - 101

Hình 34 Giao diện thêm câu trả lời loại kéo thả đáp án - 102

Hình 35 Usecase Quản lý tài khoản - 106

Hình 36 Màn hình Thông tin cá nhân - 108

Hình 37 Màn hình Thông tin cá nhân - 111

Hình 38 Màn hình Quản lý tài khoản - 114

Hình 39 Màn hình Quản lý tài khoản - 116

Hình 40 Sequence diagram cho usecase Đăng kí - 119

Hình 41 Màn hình đăng ký - 120

Hình 42 Sequence diagram cho usecase Đăng nhập - 123

Hình 43 Màn hình Đăng nhập - 124

Hình 44 Màn hình Trang chủ - 126

Hình 45 Màn hình viết blog - 129

Hình 46 Sequence diagram cho usecase Viết blog - 131

Hình 47 Màn hình duyệt lớp học - 133

Bảng 1 Danh sách các chức năng của hệ thống - 33

Bảng 2 Yêu cầu chức năng Xem thông tin lớp học - 39

Bảng 3 Usecase Xem thông tin lớp học - 40

Bảng 4 Mô tả màn hình Chi tiết lớp học - 42

Bảng 5 Mô tả màn hình Các actions của lớp học (host-room - 43

Bảng 6 Yêu cầu chức năng Xem thông tin lớp học - 45

Bảng 7 Usecase Tham gia lớp học - 45

Bảng 8 Mô tả màn hình Chi tiết lớp học - 47

Bảng 10 Mô tả màn hình Báo xấu lớp học - 51

Bảng 11 Yêu cầu chức năng Rời lớp học - 52

Bảng 13 Mô tả màn hình Rời lớp học - 54

Bảng 14 Yêu cầu chức năng Xem lộ trình lớp học - 55

Bảng 16 Mô tả màn hình Lộ trình - 57

Bảng 17 Yêu cầu chức năng tham gia kiểm tra - 58

Bảng 18 Tham gia kiểm tra - 58

Bảng 19 Mô tả màn hình Phòng chờ kiểm tra - 61

Bảng 20 Yêu cầu chức năng thống kê chọn đáp án - 62

Bảng 21 Xem thống kê chọn đáp án - 62

Bảng 22 Mô tả màn hình Thống kê - 64

Bảng 23 Chức năng thêm bài tập - 64

Bảng 24 Usecase Thêm bài tập - 65

Bảng 25 Yêu cầu chức năng thêm lộ trình - 67

Bảng 26 Usecase Thêm lộ trình - 67

Bảng 27 Usecase Thêm điểm danh - 70

Bảng 28 Chức năng Xem lịch sử kiểm tra - 73

Bảng 29 Usecase Xem lịch sử kiêm tra - 73

Bảng 30 Mô tả màn hình Lịch sử kiểm tra - 75

Bảng 31 Yêu cầu chức năng xem đề kiểm tra - 76

Bảng 32 Usecase Xem đề kiểm tra - 76

Bảng 33 Mô tả màn hình Bộ đề kiểm tra - 79

Bảng 34 Yêu cầu chức năng Chỉnh sửa bộ đề - 79

Bảng 35 Usecase Chỉnh sửa bộ đề kiểm tra - 79

Bảng 36 Yêu cầu chức năng Xóa bộ đề - 83

Bảng 37 Usecase Xóa đề kiểm tra - 84

Bảng 38 Yêu cầu chức năng Xóa câu hỏi - 87

Bảng 39 Usecase Xóa câu hỏi - 88

Bảng 40 Yêu cầu chức năng Thêm câu hỏi - 91

Bảng 41 Usecase Tạo câu hỏi dạng một lựa chọn - 91

Bảng 42 Usecase Tạo câu hỏi dạng nhiều lựa chọn - 92

Bả ng 43 Usecase Tạo câu hỏi dạng đúng/sai - 93

Bảng 44 Usecase Tạo câu hỏi dạng kéo thả đáp án - 93

Bảng 45 Mô tả màn hình Tạo câu hỏi một lựa chọn - 98

Bảng 46 Mô tả màn hình Tạo câu hỏi nhiều lựa chọn - 99

Bảng 47 Mô tả màn hình Tạo câu hỏi đúng sai - 100

Bảng 48 Mô tả màn hình Tạo câu hỏi kéo thả - 102

Bảng 49 Yêu cầu chức năng Chỉnh sửa câu hỏi - 103

Bảng 50 Usecase Chỉnh sửa câu hỏi - 103

Bảng 51 Chức năng Xem thông tin tài khoản - 106

Bảng 52 Usecase Xem thông tin tài khoản - 106

Bảng 53 Mô tả màn hình Thông tin cá nhân - 108

Bảng 54 Chức năng Sửa thông tin tài khoản - 109

Bảng 55 Usecase Chỉnh sửa thông tin tài khoản - 109

Bảng 56 Mô tả màn hình Thông tin cá nhân - 111

Bảng 54 Chức năng Đổi ảnh đại diện - 112

Bảng 57 Usecase Đổi ảnh đại diện - 112

Bảng 58 Mô tả màn hình Quản lý tài khoản - 114

Bảng 59 Usecase Xem danh sách lớp đang tham gia - 115

Bảng 60 Mô tả màn hình Quản lý tài khoản - 117

Bảng 61 Yêu cầu chức năng đăng kí - 117

Bảng 63 Mô tả màn hình đang kí - 120

Bảng 64 Yêu cầu chức năng đăng kí - 121

Bảng 65 Yêu cầu chức năng đăng nhập - 121

Bảng 66 Mô tả màn hình Đăng nhập - 124

Bảng 67 Yêu cầu chức năng xem blog - 125

Bảng 69 Mô tả màn hình trang chủ - 127

Bảng 70 Yêu cầu chức năng viết blog - 128

Bảng 71 Usecase Viết bài blog - 128

Bảng 72 Mô tả màn hình viết blog - 129

Bảng 73 Yêu cầu chức năng Duyệt lớp học của Admin - 130

Bảng 74 Usecase Viết bài blog - 130

Bảng 75 Bảng mô tả màn hình duyệt lớp học - 133

Bảng 76 Testcase Đăng kí thành công - 134

Bảng 77 Testcase Đăng kí nhập sai định dạng mail - 135

Bảng 78 Testcase Đăng kí email đã đăng kí - 136

Bảng 79 Testcase Đăng nhập thành công - 137

Bảng 80 Testcase nhập sai email và mật khẩu - 138

Bảng 81 Testcase để trống email - 139

Bảng 82 Testcase để trống mật khẩu - 139

Bảng 83 Testcase nhập đúng thông tin lớp học - 140

Bảng 84 Để trống tên lớp học - 141

Bảng 85 Testcase để trống chủ đề lớp học - 143

Bảng 86 Testcase để trống giới thiệu lớp học - 144

Bảng 87 Testcase để trống giá lớp học - 145

Bảng 88 Testcase Tham gia lớp học thành công - 146

Bảng 89 Testcase Tham gia lớp học thất bại - 147

Bảng 90 Testcase tham gia qua thông báo thành công - 149

Bảng 91 Testcase tham gia qua thông báo thất bại - 150

Bảng 92 Testcase tham gia thất bại khi nhập sai mã - 150

Bảng 93 Testcase xem thông tin tài khoản - 151

Bảng 94 Tetscase chỉnh sửa tên tài khoản - 152

Bảng 95 Testcase chỉnh sửa số điện thoại - 153

Bảng 96 Testcase chỉnh sửa giới thiệu - 154

Bảng 97 Testcase chỉnh xem lớp học - 155 Bảng 98 Testcase Điểm danh - 156

Bảng 99 Testcase nộp bài tập - 157

Bảng 100 Khó khăn và cách giải quyết - 161

Nếu như cách đây vài năm trước, việc làm quen với phương pháp dạy và học trực tuyến còn nhiều bỡ ngỡ thì giờ đây, sau nhiều lần phải tạm dừng đến trường để phòng dịch COVID-19, hình thức học tập này đã trở nên quen thuộc và được áp dụng rộng rãi.

Dạy học trực tuyến đã trở thành xu hướng giáo dục mới trên toàn cầu, đặc biệt là trong bối cảnh đại dịch Học sinh, sinh viên, giáo viên và phụ huynh đã dần thích nghi với mô hình này Với sự phát triển của công nghệ, dạy học trực tuyến đang được tăng cường, củng cố và trở thành một phần quan trọng trong các nhiệm vụ triển khai năm học mới.

Với mục tiêu hỗ trợ việc học trực tuyến hiệu quả hơn, chúng tôi quyết định lựa chọn đề tài "Tìm hiểu Flutter và xây dựng ứng dụng quản lý lớp học" Ứng dụng này sẽ tạo ra một không gian học tập trực tuyến toàn diện, nơi người dùng có thể tham gia các lớp học, bài kiểm tra và trao đổi ý kiến, giải đáp thắc mắc với nhau, từ đó hỗ trợ và giúp đỡ nhau trong quá trình học tập.

Trong quá trình học tại trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM, sinh viên được tạo điều kiện để thực hiện khóa luận chuyên ngành, giúp họ tiếp cận với quy trình làm việc trên dự án nhỏ và tích lũy kinh nghiệm thực tế Sự hướng dẫn của giáo viên và những lời nhận xét của giáo viên phản biện là cơ hội quý giá để nhóm phát triển và hoàn thiện ý tưởng Đó là tiền đề cho sự ra đời của App trắc nghiệm Flutter, một sản phẩm được nhóm phát triển thông qua quá trình học tập và thực hành tại trường.

1 Tính cấp thiết của đề tài

Sự phát triển của công nghệ đã cách mạng hóa ngành giáo dục, giúp nâng cao hiệu quả giảng dạy và mang lại trải nghiệm mới cho cả giáo viên và học sinh Một trong những công cụ hỗ trợ giáo dục hiệu quả và miễn phí là Kahoot, cho phép người dùng tạo ra các bài kiểm tra và đánh giá học sinh một cách dễ dàng và thú vị.

Kahoot là một ứng dụng dựa trên website cho phép thiết kế các câu hỏi trắc nghiệm trực tuyến và hỗ trợ nhiều người tham gia trả lời cùng một lúc Ứng dụng này cũng cung cấp kết quả trực tuyến trong thời gian diễn ra cuộc thi, giúp tăng tính hấp dẫn cho bài thi trắc nghiệm Với tính chất là một website, Kahoot có thể được sử dụng trên nhiều thiết bị khác nhau như máy tính để bàn, laptop, tablet, smartphone, miễn là thiết bị đó có kết nối Internet.

Quizizz là ứng dụng kiểm tra kiến thức môn học và xã hội dưới hình thức trắc nghiệm đa dạng, giúp học sinh tự đánh giá trình độ của mình thông qua các câu hỏi được phân chia thành nhiều cấp độ khác nhau Ứng dụng này cũng cho phép giáo viên và phụ huynh truy cập bảng câu hỏi do người dùng khác chia sẻ, hỗ trợ việc dạy và kèm cặp con em mình một cách hiệu quả Với tính linh hoạt và tiện ích, Quizizz phù hợp cho cả việc học tại nhà và trên lớp.

Mục đích đề tài

Đề tài Tìm hiểu Flutter và xây dựng app quản lý lớp học đặt ra các mục tiêu trọng tâm mà sinh viên nghiên cứu cần thực hiện, bao gồm tìm hiểu về Flutter, xây dựng ứng dụng quản lý lớp học và áp dụng kiến thức thực tế vào dự án.

Khi thực hiện dự án, sinh viên cần nghiên cứu chuyên môn về công nghệ đã lựa chọn, hiểu tổng quan và khả năng ứng dụng của nó Đồng thời, việc tìm hiểu các thư viện, mã nguồn, module và template cũng đóng vai trò quan trọng trong quá trình xây dựng ứng dụng và nâng cao trải nghiệm người dùng Ngoài ra, nhóm sinh viên cần nắm rõ quy trình xây dựng và triển khai ứng dụng lên các nền tảng như App Store và CH Play để đảm bảo sản phẩm của mình được phát hành thành công.

Vấn đề thứ hai mà đề tài đặt ra là ứng dụng các kiến thức đã tìm hiểu được vào xây dựng một sản phẩm cụ thể, đó là App trắc nghiệm Flutter Sản phẩm này cần đáp ứng các yêu cầu cơ bản của một ứng dụng mobile, phục vụ cho người dùng có nhu cầu trao đổi và ôn tập kiến thức một cách hiệu quả.

Khoá luận tốt nghiệp 24 học tập, bên cạnh đó, sản phẩm có khả năng nâng cấp để tiếp tục phát triển nhiều tính năng hơn nữa trong tương lai.

Phương pháp nghiên cứu

3 Danh sách các chức năng

4 Ma trận quyền – Permission matrix

5 Các yêu cầu phi chức năng6 Các giả thiết, ràng buộc

1 Tổng quan quy trình nghiệp vụ:

2 Phân tích yêu cầu chức năng

3 Phân tích yêu cầu phi chức năng

STT Thời gian Công việc Ghi chú

2 21/03/2022 – 10/04/2022 Làm tính năng bài viết, bình luận và thích bài viết

3 11/04/2022 – 24/04/2022 Làm tính năng điểm danh, nộp bài và tải bài nộp cho chủ lớp học

4 25/04/2022 – 15/05/2022 Làm chức năng xem lịch, xem ngày có deadline hay điểm danh

5 16/05/2022 – 29/05/2022 Thêm các loại câu hỏi: Chọn nhiều đáp án, Chọn một đáp án, Đúng/Sai và Kéo thả

6 30/05/2022 – 12/06/2022 Thêm hình ảnh và âm thanh cho câu hỏi

7 13/06/2022 – 22/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

1 Tính cấp thiết của đề tài - 22

3 Kết quả dự kiến đạt được - 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

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - 26

3 Danh sách các chức năng - 33

4 Ma trận quyền – Permission matrix: - 35

5 Các yêu cầu phi chức năng - 36

6 Các giả thiết, ràng buộc - 36

CHƯƠNG 4: MÔ TẢ YÊU CẦU: - 38

1 Tổng quan quy trình nghiệp vụ: - 38

2 Phân tích yêu cầu chức năng - 39

2.1 Chức năng quản lý lớp học của user - 39

2.1.1 Xem thông tin lớp học - 39

2.1.5 Xem lộ trình lớp học - 55

2.2 Chức năng tham gia bài kiểm tra của user - 58

2.2.2 Xem thống kê chọn đáp án - 62

2.3 Chức năng quản lý lớp học của host-room - 64

2.3.4 Xem lịch sử kiểm tra - 73

2.4 Chức năng quản lý bộ đề của host-room - 76

2.5 Chức năng quản lý tài khoản - 106

2.5.1 Xem thông tin tài khoản - 106

2.5.2 Sửa thông tin tài khoản - 109

2.5.4 Xem các lớp đang tham gia - 115

2.6.1 Yêu cầu chức năng và mô tả - 117

2.6.1 Yêu cầu chức năng và mô tả - 121

2.8.1 Yêu cầu chức năng và mô tả - 125

2.9.1 Yêu cầu chức năng và mô tả - 128

2.10 Duyệt lớp học của Admin - 130

2.10.1 Yêu cầu chức năng và mô tả - 130

3 Phân tích yêu cầu phi chức năng - 133

1.2 Nhập sai định dạng email - 135

1.3 Email đã được đăng kí - 136

2.1 Nhập đúng email và mật khẩu - 137

2.2 Nhập sai email và mật khẩu - 138

3.1 Nhập đúng thông tin lớp học - 140

3.2 Để trống tên lớp học - 141

3.3 Để trống chủ đề lớp học - 143

3.4 Để trống giới thiệu lớp học - 144

3.5 Để trống giá lớp học - 145

4.1 Tham gia lớp học thành công - 146

4.2 Tham gia lớp học thất bại - 147

5.1 Tham gia kiểm tra qua thông báo thành công - 149

5.2 Tham gia kiểm tra qua thông báo thất bại - 149

5.3 Tham gia kiểm tra khi nhập sai mã - 150

6 Xem thông tin tài khoản - 151

7 Chỉnh sửa thông tin tài khoản - 152

7.1 Chỉnh sửa tên của bạn - 152

7.2 Chỉnh sửa số điện thoại - 153

3 Ưu điểm và nhược điểm - 160

4 Khó khăn và cách giải quyết - 161

Hình 3 Sơ đồ tổng quan hệ thống (1) - 30

Hình 4 Sơ đồ tổng quan hệ thống (2) - 30

Hình 5 Sơ đồ tổng quan hệ thống (3) - 31

Hình 9 Usecase của Host-room - 33

Hình 11 Tổng quan quy trình nghiệp vụ - 38

Hình 12 Usecase Quản lý lớp học - 39

Hình 13 Màn hình Chi tiết lớp học - 41

Hình 14 Màn hình Các actions của lớp học( host-room) - 43

Hình 15 Màn hình các actions lớp học (user) - 44

Hình 16 Màn hình Chi tiết lớp học - 47

Hình 17 Màn hình Báo xấu lớp học - 51

Hình 18 Màn hình Rời lớp học - 54

Hình 19 Màn hình Lộ trình - 57

Hình 20 Sequence diagram cho usecase Tham gia kiểm tra - 59

Hình 21 Màn hình Phòng chờ kiểm tra - 61

Hình 22 Sequence diagram cho usecase Thống kê - 63

Hình 23 Màn hình Thống kê - 63

Hình 24 Usecase Quản lý lớp học - 64

Hình 25 Màn hình Tạo bài tập - 67

Hình 26 Màn hình Thêm lộ trình - 70

Hình 27 Màn hình Lịch sử kiểm tra - 75

Hình 28 Usecase Quản lý đề kiểm tra - 76

Hình 29 Màn hình Bộ đề kiểm tra - 78

Hình 30 Giao diện Tạo câu hỏi một lựa chọn - 97

Hình 31 Giao diện Tạo câu hỏi nhiều lựa chọn - 99

Hình 32 Giao diện Tạo câu hỏi đúng sai - 100

Hình 33 Tạo câu hỏi dạng kéo thả - 101

Hình 34 Giao diện thêm câu trả lời loại kéo thả đáp án - 102

Hình 35 Usecase Quản lý tài khoản - 106

Hình 36 Màn hình Thông tin cá nhân - 108

Hình 37 Màn hình Thông tin cá nhân - 111

Hình 38 Màn hình Quản lý tài khoản - 114

Hình 39 Màn hình Quản lý tài khoản - 116

Hình 40 Sequence diagram cho usecase Đăng kí - 119

Hình 41 Màn hình đăng ký - 120

Hình 42 Sequence diagram cho usecase Đăng nhập - 123

Hình 43 Màn hình Đăng nhập - 124

Hình 44 Màn hình Trang chủ - 126

Hình 45 Màn hình viết blog - 129

Hình 46 Sequence diagram cho usecase Viết blog - 131

Hình 47 Màn hình duyệt lớp học - 133

Bảng 1 Danh sách các chức năng của hệ thống - 33

Bảng 2 Yêu cầu chức năng Xem thông tin lớp học - 39

Bảng 3 Usecase Xem thông tin lớp học - 40

Bảng 4 Mô tả màn hình Chi tiết lớp học - 42

Bảng 5 Mô tả màn hình Các actions của lớp học (host-room - 43

Bảng 6 Yêu cầu chức năng Xem thông tin lớp học - 45

Bảng 7 Usecase Tham gia lớp học - 45

Bảng 8 Mô tả màn hình Chi tiết lớp học - 47

Bảng 10 Mô tả màn hình Báo xấu lớp học - 51

Bảng 11 Yêu cầu chức năng Rời lớp học - 52

Bảng 13 Mô tả màn hình Rời lớp học - 54

Bảng 14 Yêu cầu chức năng Xem lộ trình lớp học - 55

Bảng 16 Mô tả màn hình Lộ trình - 57

Bảng 17 Yêu cầu chức năng tham gia kiểm tra - 58

Bảng 18 Tham gia kiểm tra - 58

Bảng 19 Mô tả màn hình Phòng chờ kiểm tra - 61

Bảng 20 Yêu cầu chức năng thống kê chọn đáp án - 62

Bảng 21 Xem thống kê chọn đáp án - 62

Bảng 22 Mô tả màn hình Thống kê - 64

Bảng 23 Chức năng thêm bài tập - 64

Bảng 24 Usecase Thêm bài tập - 65

Bảng 25 Yêu cầu chức năng thêm lộ trình - 67

Bảng 26 Usecase Thêm lộ trình - 67

Bảng 27 Usecase Thêm điểm danh - 70

Bảng 28 Chức năng Xem lịch sử kiểm tra - 73

Bảng 29 Usecase Xem lịch sử kiêm tra - 73

Bảng 30 Mô tả màn hình Lịch sử kiểm tra - 75

Bảng 31 Yêu cầu chức năng xem đề kiểm tra - 76

Bảng 32 Usecase Xem đề kiểm tra - 76

Bảng 33 Mô tả màn hình Bộ đề kiểm tra - 79

Bảng 34 Yêu cầu chức năng Chỉnh sửa bộ đề - 79

Bảng 35 Usecase Chỉnh sửa bộ đề kiểm tra - 79

Bảng 36 Yêu cầu chức năng Xóa bộ đề - 83

Bảng 37 Usecase Xóa đề kiểm tra - 84

Bảng 38 Yêu cầu chức năng Xóa câu hỏi - 87

Bảng 39 Usecase Xóa câu hỏi - 88

Bảng 40 Yêu cầu chức năng Thêm câu hỏi - 91

Bảng 41 Usecase Tạo câu hỏi dạng một lựa chọn - 91

Bảng 42 Usecase Tạo câu hỏi dạng nhiều lựa chọn - 92

Bả ng 43 Usecase Tạo câu hỏi dạng đúng/sai - 93

Bảng 44 Usecase Tạo câu hỏi dạng kéo thả đáp án - 93

Bảng 45 Mô tả màn hình Tạo câu hỏi một lựa chọn - 98

Bảng 46 Mô tả màn hình Tạo câu hỏi nhiều lựa chọn - 99

Bảng 47 Mô tả màn hình Tạo câu hỏi đúng sai - 100

Bảng 48 Mô tả màn hình Tạo câu hỏi kéo thả - 102

Bảng 49 Yêu cầu chức năng Chỉnh sửa câu hỏi - 103

Bảng 50 Usecase Chỉnh sửa câu hỏi - 103

Bảng 51 Chức năng Xem thông tin tài khoản - 106

Bảng 52 Usecase Xem thông tin tài khoản - 106

Bảng 53 Mô tả màn hình Thông tin cá nhân - 108

Bảng 54 Chức năng Sửa thông tin tài khoản - 109

Bảng 55 Usecase Chỉnh sửa thông tin tài khoản - 109

Bảng 56 Mô tả màn hình Thông tin cá nhân - 111

Bảng 54 Chức năng Đổi ảnh đại diện - 112

Bảng 57 Usecase Đổi ảnh đại diện - 112

Bảng 58 Mô tả màn hình Quản lý tài khoản - 114

Bảng 59 Usecase Xem danh sách lớp đang tham gia - 115

Bảng 60 Mô tả màn hình Quản lý tài khoản - 117

Bảng 61 Yêu cầu chức năng đăng kí - 117

Bảng 63 Mô tả màn hình đang kí - 120

Bảng 64 Yêu cầu chức năng đăng kí - 121

Bảng 65 Yêu cầu chức năng đăng nhập - 121

Bảng 66 Mô tả màn hình Đăng nhập - 124

Bảng 67 Yêu cầu chức năng xem blog - 125

Bảng 69 Mô tả màn hình trang chủ - 127

Bảng 70 Yêu cầu chức năng viết blog - 128

Bảng 71 Usecase Viết bài blog - 128

Bảng 72 Mô tả màn hình viết blog - 129

Bảng 73 Yêu cầu chức năng Duyệt lớp học của Admin - 130

Bảng 74 Usecase Viết bài blog - 130

Bảng 75 Bảng mô tả màn hình duyệt lớp học - 133

Bảng 76 Testcase Đăng kí thành công - 134

Bảng 77 Testcase Đăng kí nhập sai định dạng mail - 135

Bảng 78 Testcase Đăng kí email đã đăng kí - 136

Bảng 79 Testcase Đăng nhập thành công - 137

Bảng 80 Testcase nhập sai email và mật khẩu - 138

Bảng 81 Testcase để trống email - 139

Bảng 82 Testcase để trống mật khẩu - 139

Bảng 83 Testcase nhập đúng thông tin lớp học - 140

Bảng 84 Để trống tên lớp học - 141

Bảng 85 Testcase để trống chủ đề lớp học - 143

Bảng 86 Testcase để trống giới thiệu lớp học - 144

Bảng 87 Testcase để trống giá lớp học - 145

Bảng 88 Testcase Tham gia lớp học thành công - 146

Bảng 89 Testcase Tham gia lớp học thất bại - 147

Bảng 90 Testcase tham gia qua thông báo thành công - 149

Bảng 91 Testcase tham gia qua thông báo thất bại - 150

Bảng 92 Testcase tham gia thất bại khi nhập sai mã - 150

Bảng 93 Testcase xem thông tin tài khoản - 151

Bảng 94 Tetscase chỉnh sửa tên tài khoản - 152

Bảng 95 Testcase chỉnh sửa số điện thoại - 153

Bảng 96 Testcase chỉnh sửa giới thiệu - 154

Bảng 97 Testcase chỉnh xem lớp học - 155 Bảng 98 Testcase Điểm danh - 156

Bảng 99 Testcase nộp bài tập - 157

Bảng 100 Khó khăn và cách giải quyết - 161

Nếu như cách đây vài năm trước, việc làm quen với phương pháp dạy và học trực tuyến còn nhiều bỡ ngỡ thì giờ đây, sau nhiều lần phải tạm dừng đến trường để phòng dịch COVID-19, hình thức học trực tuyến đã trở nên quen thuộc và phổ biến hơn bao giờ hết.

Dạy học trực tuyến đã trở thành xu hướng giáo dục mới, được tăng cường và củng cố trên toàn thế giới Học sinh, sinh viên, giáo viên và phụ huynh đã dần thích nghi với mô hình này trong bối cảnh tình hình mới Đây sẽ là nhiệm vụ chính trong các nhiệm vụ triển khai năm học, giúp mọi người thích ứng với tình hình hiện tại và tương lai.

Với mục tiêu hỗ trợ việc học trực tuyến hiệu quả hơn, chúng tôi quyết định lựa chọn đề tài "Tìm hiểu Flutter và xây dựng ứng dụng quản lý lớp học" Ứng dụng này sẽ tạo ra một không gian học tập trực tuyến nơi người dùng có thể tham gia các lớp học, tham gia các bài kiểm tra và thảo luận các vấn đề, thắc mắc với nhau, từ đó hỗ trợ và giúp đỡ nhau trong quá trình học tập.

Trong quá trình học tại trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM, sinh viên được tạo điều kiện để thực hiện khóa luận chuyên ngành, giúp họ tiếp cận với quy trình làm việc trên dự án nhỏ Sự hướng dẫn của giáo viên và phản biện từ các chuyên gia đã giúp nhóm tích lũy kinh nghiệm quý giá Chính những kinh nghiệm này đã trở thành nền tảng cho sự ra đời của ứng dụng trắc nghiệm Flutter, một sản phẩm được nhóm chúng tôi phát triển và trình bày dưới đây.

1 Tính cấp thiết của đề tài

Sự phát triển của công nghệ đã đóng vai trò quan trọng trong việc cải thiện ngành giáo dục, giúp nâng cao hiệu quả giảng dạy và mang lại trải nghiệm mới mẻ cho cả giáo viên và học sinh Một trong những công cụ hỗ trợ hiệu quả trong việc kiểm tra và đánh giá học sinh là Kahoot, một nền tảng miễn phí hàng đầu hiện nay.

Kahoot là một ứng dụng trực tuyến cho phép thiết kế các câu hỏi trắc nghiệm và tổ chức các cuộc thi trực tuyến với nhiều người tham gia cùng lúc Ứng dụng này cung cấp tính năng công bố kết quả trực tuyến ngay trong thời gian diễn ra cuộc thi, tạo nên sự hấp dẫn và cạnh tranh cho bài thi trắc nghiệm Với tính chất là một website, Kahoot có thể được sử dụng trên nhiều thiết bị khác nhau, bao gồm máy tính để bàn, laptop, tablet và smartphone, miễn là thiết bị đó có kết nối Internet.

Quizizz là ứng dụng kiểm tra kiến thức môn học và xã hội dưới hình thức trắc nghiệm, cung cấp nhiều cấp độ khác nhau để học sinh thử sức và tự đánh giá trình độ của mình Ứng dụng này cũng cho phép giáo viên và phụ huynh truy cập bảng câu hỏi đã được chia sẻ để hỗ trợ việc dạy và kèm cặp con em mình Nhìn chung, Quizizz là công cụ học tập linh hoạt, phù hợp cho việc học tại nhà cũng như trên lớp.

2 Mục đích đề tài Đề tài Tìm hiểu Flutter và xây dựng app quản lý lớp học đặt ra các vấn đề trọng tâm về mục tiêu mà sinh viên nghiên cứu cần thực hiện được bao gồm:

Khi thực hiện dự án, sinh viên cần nghiên cứu chuyên môn về công nghệ đã chọn, hiểu tổng quan và khả năng ứng dụng của nó Đồng thời, họ cũng cần tìm hiểu thêm về các thư viện, mã nguồn, module và template hỗ trợ quá trình xây dựng ứng dụng để mang lại trải nghiệm tốt cho người dùng Ngoài ra, việc tìm hiểu quy trình xây dựng và triển khai ứng dụng lên các chợ ứng dụng như App Store và CH Play cũng là một bước quan trọng trong quá trình phát triển sản phẩm.

Ứng dụng kiến thức vào thực tiễn là một khía cạnh quan trọng trong quá trình phát triển sản phẩm Trong đề tài này, việc xây dựng App trắc nghiệm Flutter là một ví dụ điển hình về việc áp dụng kiến thức đã học vào thực tế Sản phẩm này cần đáp ứng các yêu cầu cơ bản của một ứng dụng di động, đồng thời phục vụ nhu cầu trao đổi của người dùng.

Khoá luận tốt nghiệp 24 học tập, bên cạnh đó, sản phẩm có khả năng nâng cấp để tiếp tục phát triển nhiều tính năng hơn nữa trong tương lai

3 Kết quả dự kiến đạt được

- Đăng kí vào hệ thống

- Đăng nhập vào hệ thống

- Xem danh sách các lớp học (Lớp học của tôi, Lớp học được đề xuất,…)

- Thanh toán cho lớp học

- Xem được thông tin của lớp học (Lộ trình, Thành viên,…)

- Quản lý thông tin cá nhân

- Viết các bài blog trao đổi

- Tương tác với các bài blog khác (thả tim, comment,…)

- Điểm danh, nộp bài tập

- Nhắn tin trong các lớp học

- Xem lại các bài kiểm tra

- Tạo lớp học (Sẽ trở thành host-room)

3.3 Phía người tạo lớp học (Host-room)

Người tạo lớp học (host-room) thể thực hiện tất cả tính năng của người dùng thông thường Ngoài ra còn có thể thực hiện các tính năng sau:

- Chỉnh sửa thông tin lớp học

- Tạo các bộ đề, bài kiểm tra

- Tạo bài tập, điểm danh

3.4 Phía người quản lý (Admin)

- Xem danh sách các lớp học trên hệ thống (Tên, mô tả, tình trạng,…)

- Khóa/Mở khóa lớp học

- Nghiên cứu về Node JS API (Nest JS), Flutter

- Tìm hiểu quy trình, cách thức hoạt động, vận hành và xây dựng một ứng dụng học tập qua trắc nghiệm

- Học hỏi và tìm hiểu về lý thuyết, công nghệ Flutter, NetJS, NodeJs,

MongoDB thông qua tài liệu trên mạng, các khóa học trên internet

- Tham khảo nghiệp vụ, cách thức hoạt động ở các ứng dụng tương tự như Kahoot!, Quizziz,…

CƠ SỞ LÝ THUYẾT

NodeJS

NodeJS là một mã nguồn mở đa nền tảng được viết bằng C++, xây dựng trên server-side runtime framework Được phát triển bởi Ryan Dahl vào năm 2009, NodeJS hỗ trợ chạy trên nhiều hệ điều hành khác nhau, bao gồm OS X, Microsoft Windows và Linux Với khả năng hỗ trợ cluster và runtime, NodeJS đã chiếm phần lớn thị trường làm web app trong thời gian gần đây.

- Node.js là nó nhận và xử lý nhiều kết nối chỉ với một single-thread

- Ít tốn bộ nhớ Ram

- Sử dụng non-blocking I/O tận tối đa tài nguyên của server

- Dễ dàng xây dựng ứng cùng một ngôn ngữ lập trình

- Dễ dàng xây dựng microservice đơn giản nhanh chống

- Cộng đồng phát triển mạnh mẽ

- Xử lý các luồng sự kiện mạnh mẽ

1.3 Nhược điểm Ứng dụng nặng tốn tài nguyên Nếu bạn cần xử lý các ứng dụng tốn tài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tương tự như vậy thì không nên dùng NodeJS

Flutter

Flutter is a multi-platform framework used for developing mobile, web, and desktop applications, including Android, iOS, Windows, Linux, and MacOS It is often chosen for mobile projects that require rapid feature development while maintaining performance comparable to native applications Born to address the limitations of traditional development methods, Flutter enables developers to build high-performance, cross-platform applications efficiently.

Một trong những điểm yếu của React Native và các framework cross-platform khác là chỉ phát triển nhanh trên hai nền tảng, nhưng hiệu năng không thể sánh bằng với ứng dụng native Trong khi đó, ứng dụng native lại không thể phát triển nhanh và đồng bộ trên nhiều nền tảng như cross-platform, tạo ra sự đánh đổi giữa tốc độ phát triển và hiệu suất ứng dụng.

Flutter sở hữu tính năng phát triển ứng dụng nhanh chóng nhờ tính năng hot reload, giúp người dùng thử nghiệm và kiểm tra ứng dụng một cách dễ dàng và nhanh chóng Khả năng xây dựng giao diện người dùng và sửa lỗi nhanh chóng cũng là những điểm mạnh của Flutter, thu hút nhiều người sử dụng lựa chọn Hơn nữa, việc tải lại ứng dụng lần thứ hai cũng trở nên dễ dàng, không làm mất đi trạng thái hiện tại trên emulator, simulator và device cho cả hệ điều hành iOS và Android.

Giao diện người dùng (UI) đẹp mắt và có tính biểu cảm là một trong những điểm mạnh của Flutter Thư viện widget tích hợp sẵn của Flutter được thiết kế dựa trên Material Design và Cupertino (iOS-flavor), mang lại trải nghiệm người dùng mượt mà và tự nhiên Các API của Flutter cũng hỗ trợ chuyển động theo nhiều hướng phong phú, giúp người dùng dễ dàng tương tác với ứng dụng.

Quá trình truy cập với nhiều tính năng và SDK native cho phép các ứng dụng trở nên sống động hơn nhờ vào API của nền tảng, SDK của các bên thứ ba và mã native Điều này cho phép lập trình viên tận dụng lại mã Java, Swift và ObjC hiện tại, đồng thời thực hiện mọi tính năng mà SDK native dựa trên iOS và Android cung cấp.

Flutter cho phép người dùng phát triển các ứng dụng thống nhất trên cả hệ điều hành iOS và Android, nhờ sở hữu các công cụ và thư viện đa dạng Điều này giúp người dùng dễ dàng biến ý tưởng của mình thành hiện thực trên các thiết bị di động Đặc biệt, đối với những người mới bắt đầu phát triển ứng dụng di động, Flutter là lựa chọn lý tưởng giúp xây dựng ứng dụng di động tuyệt đẹp một cách nhanh chóng và dễ dàng.

Với kinh nghiệm lâu dài trong phát triển ứng dụng iOS hoặc Android, bạn hoàn toàn có thể tận dụng Flutter để xây dựng các View của mình Điều này cho phép bạn tận dụng lại các đoạn code đã có từ Java, Kotlin, ObjC hoặc Swift, giúp tiết kiệm thời gian và tăng hiệu suất công việc.

- Flutter sử dụng một dạng ngôn ngữ lập trình Dart vô cùng đơn giản và dễ học

Flutter cho phép phát triển ứng dụng với tốc độ nhanh hơn so với Native, nhờ khả năng phát triển một lần và tái sử dụng mã nguồn, giúp tiết kiệm đáng kể thời gian và chi phí phát triển dự án Ngoài ra, việc thiết kế giao diện người dùng trên Flutter cũng trở nên dễ dàng và đẹp mắt hơn, với các hiệu ứng được đơn giản hóa để lập trình viên có thể sử dụng một cách hiệu quả.

- Nó có thể thực hiện hỗ trợ được rất nhiều widget khác nhau như là Text, Image, Seek Bar,…

- Flutter có thể chạy trên nhiều nền tảng với cùng một source code, đảm bảo được tính đồng bộ giao diện, tính năng giữa các nền tảng

- Flutter đảm bảo được hiệu năng tiệm cận với Native và vẫn đang có những phiên bản mới để cải thiện hiệu năng hơn nữa.

MongoDB

MongoDB là hệ quản trị cơ sở dữ liệu NoSQL, được viết chủ yếu bằng ngôn ngữ C++ với hiệu suất và tính sẵn sàng cao, đồng thời cho phép mở rộng các collection một cách dễ dàng Dữ liệu trong MongoDB được lưu trữ dưới dạng document, tương tự như JSON data, với mỗi field có thể chứa giá trị đơn giản như string, mảng, data Ưu điểm của MongoDB là truy vấn dữ liệu trên RAM, giúp quá trình truy vấn diễn ra nhanh chóng Ngoài ra, do là hệ quản trị cơ sở dữ liệu NoSQL, MongoDB cho phép ghi đọc các collection và document một cách linh hoạt và nhanh chóng mà không bị ràng buộc bởi các trường dữ liệu chặt chẽ như SQL.

MongoDB là một cơ sở dữ liệu mã nguồn mở hàng đầu, được hàng triệu người sử dụng nhờ khả năng cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng Là cơ sở dữ liệu NoSQL đa nền tảng, MongoDB hoạt động trên các khái niệm Collection và Document, cho phép nó đáp ứng nhu cầu lưu trữ và quản lý dữ liệu đa dạng Được viết bằng ngôn ngữ lập trình C++, MongoDB đảm bảo tính ổn định và hiệu suất cao trong việc xử lý dữ liệu lớn.

- Tính sẵn sàng cao – Dễ dàng mở rộng cao Sharding

- Linh hoạt – thêm / xóa một số trường không ảnh hưởng đến hệ thống

- Không có rằng buộc dữ liệu

- Biểu diễn dữ liệu trong JSON hoặc BSON

- Dễ dàng tích hợp với BigData Hadoop

Một trong những hạn chế của NoSQL là hầu hết các giải pháp không tuân thủ chặt chẽ các nguyên tắc ACID (Tính nguyên tử, Tính nhất quán, Tính cách ly và Tính bền vững) như các hệ thống quản trị cơ sở dữ liệu quan hệ (RDBMS) đã được thiết lập tốt hơn, điều này có thể ảnh hưởng đến tính toàn vẹn và độ tin cậy của dữ liệu.

Việc sử dụng nhiều bộ nhớ là một hạn chế của các hệ thống lưu trữ dữ liệu dạng key-value, đặc biệt khi các collection chỉ khác nhau về giá trị (value) mà không có sự khác biệt về khóa (key) Điều này dẫn đến việc khóa bị lặp lại, gây ra sự dư thừa dữ liệu và làm tăng lượng bộ nhớ cần thiết Hơn nữa, do không hỗ trợ tính năng join, dữ liệu sẽ bị trùng lặp và không được tối ưu hóa, làm giảm hiệu suất của hệ thống.

- Bị giới hạn kích thước bản ghi document: không lớn hơn 16MB

TỔNG QUAN

Các yêu cầu phi chức năng

1 Tổng quan quy trình nghiệp vụ:

2 Phân tích yêu cầu chức năng

3 Phân tích yêu cầu phi chức năng

STT Thời gian Công việc Ghi chú

2 21/03/2022 – 10/04/2022 Làm tính năng bài viết, bình luận và thích bài viết

3 11/04/2022 – 24/04/2022 Làm tính năng điểm danh, nộp bài và tải bài nộp cho chủ lớp học

4 25/04/2022 – 15/05/2022 Làm chức năng xem lịch, xem ngày có deadline hay điểm danh

5 16/05/2022 – 29/05/2022 Thêm các loại câu hỏi: Chọn nhiều đáp án, Chọn một đáp án, Đúng/Sai và Kéo thả

6 30/05/2022 – 12/06/2022 Thêm hình ảnh và âm thanh cho câu hỏi

7 13/06/2022 – 22/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

1 Tính cấp thiết của đề tài - 22

3 Kết quả dự kiến đạt được - 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

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - 26

3 Danh sách các chức năng - 33

4 Ma trận quyền – Permission matrix: - 35

5 Các yêu cầu phi chức năng - 36

6 Các giả thiết, ràng buộc - 36

CHƯƠNG 4: MÔ TẢ YÊU CẦU: - 38

1 Tổng quan quy trình nghiệp vụ: - 38

2 Phân tích yêu cầu chức năng - 39

2.1 Chức năng quản lý lớp học của user - 39

2.1.1 Xem thông tin lớp học - 39

2.1.5 Xem lộ trình lớp học - 55

2.2 Chức năng tham gia bài kiểm tra của user - 58

2.2.2 Xem thống kê chọn đáp án - 62

2.3 Chức năng quản lý lớp học của host-room - 64

2.3.4 Xem lịch sử kiểm tra - 73

2.4 Chức năng quản lý bộ đề của host-room - 76

2.5 Chức năng quản lý tài khoản - 106

2.5.1 Xem thông tin tài khoản - 106

2.5.2 Sửa thông tin tài khoản - 109

2.5.4 Xem các lớp đang tham gia - 115

2.6.1 Yêu cầu chức năng và mô tả - 117

2.6.1 Yêu cầu chức năng và mô tả - 121

2.8.1 Yêu cầu chức năng và mô tả - 125

2.9.1 Yêu cầu chức năng và mô tả - 128

2.10 Duyệt lớp học của Admin - 130

2.10.1 Yêu cầu chức năng và mô tả - 130

3 Phân tích yêu cầu phi chức năng - 133

1.2 Nhập sai định dạng email - 135

1.3 Email đã được đăng kí - 136

2.1 Nhập đúng email và mật khẩu - 137

2.2 Nhập sai email và mật khẩu - 138

3.1 Nhập đúng thông tin lớp học - 140

3.2 Để trống tên lớp học - 141

3.3 Để trống chủ đề lớp học - 143

3.4 Để trống giới thiệu lớp học - 144

3.5 Để trống giá lớp học - 145

4.1 Tham gia lớp học thành công - 146

4.2 Tham gia lớp học thất bại - 147

5.1 Tham gia kiểm tra qua thông báo thành công - 149

5.2 Tham gia kiểm tra qua thông báo thất bại - 149

5.3 Tham gia kiểm tra khi nhập sai mã - 150

6 Xem thông tin tài khoản - 151

7 Chỉnh sửa thông tin tài khoản - 152

7.1 Chỉnh sửa tên của bạn - 152

7.2 Chỉnh sửa số điện thoại - 153

3 Ưu điểm và nhược điểm - 160

4 Khó khăn và cách giải quyết - 161

Hình 3 Sơ đồ tổng quan hệ thống (1) - 30

Hình 4 Sơ đồ tổng quan hệ thống (2) - 30

Hình 5 Sơ đồ tổng quan hệ thống (3) - 31

Hình 9 Usecase của Host-room - 33

Hình 11 Tổng quan quy trình nghiệp vụ - 38

Hình 12 Usecase Quản lý lớp học - 39

Hình 13 Màn hình Chi tiết lớp học - 41

Hình 14 Màn hình Các actions của lớp học( host-room) - 43

Hình 15 Màn hình các actions lớp học (user) - 44

Hình 16 Màn hình Chi tiết lớp học - 47

Hình 17 Màn hình Báo xấu lớp học - 51

Hình 18 Màn hình Rời lớp học - 54

Hình 19 Màn hình Lộ trình - 57

Hình 20 Sequence diagram cho usecase Tham gia kiểm tra - 59

Hình 21 Màn hình Phòng chờ kiểm tra - 61

Hình 22 Sequence diagram cho usecase Thống kê - 63

Hình 23 Màn hình Thống kê - 63

Hình 24 Usecase Quản lý lớp học - 64

Hình 25 Màn hình Tạo bài tập - 67

Hình 26 Màn hình Thêm lộ trình - 70

Hình 27 Màn hình Lịch sử kiểm tra - 75

Hình 28 Usecase Quản lý đề kiểm tra - 76

Hình 29 Màn hình Bộ đề kiểm tra - 78

Hình 30 Giao diện Tạo câu hỏi một lựa chọn - 97

Hình 31 Giao diện Tạo câu hỏi nhiều lựa chọn - 99

Hình 32 Giao diện Tạo câu hỏi đúng sai - 100

Hình 33 Tạo câu hỏi dạng kéo thả - 101

Hình 34 Giao diện thêm câu trả lời loại kéo thả đáp án - 102

Hình 35 Usecase Quản lý tài khoản - 106

Hình 36 Màn hình Thông tin cá nhân - 108

Hình 37 Màn hình Thông tin cá nhân - 111

Hình 38 Màn hình Quản lý tài khoản - 114

Hình 39 Màn hình Quản lý tài khoản - 116

Hình 40 Sequence diagram cho usecase Đăng kí - 119

Hình 41 Màn hình đăng ký - 120

Hình 42 Sequence diagram cho usecase Đăng nhập - 123

Hình 43 Màn hình Đăng nhập - 124

Hình 44 Màn hình Trang chủ - 126

Hình 45 Màn hình viết blog - 129

Hình 46 Sequence diagram cho usecase Viết blog - 131

Hình 47 Màn hình duyệt lớp học - 133

Bảng 1 Danh sách các chức năng của hệ thống - 33

Bảng 2 Yêu cầu chức năng Xem thông tin lớp học - 39

Bảng 3 Usecase Xem thông tin lớp học - 40

Bảng 4 Mô tả màn hình Chi tiết lớp học - 42

Bảng 5 Mô tả màn hình Các actions của lớp học (host-room - 43

Bảng 6 Yêu cầu chức năng Xem thông tin lớp học - 45

Bảng 7 Usecase Tham gia lớp học - 45

Bảng 8 Mô tả màn hình Chi tiết lớp học - 47

Bảng 10 Mô tả màn hình Báo xấu lớp học - 51

Bảng 11 Yêu cầu chức năng Rời lớp học - 52

Bảng 13 Mô tả màn hình Rời lớp học - 54

Bảng 14 Yêu cầu chức năng Xem lộ trình lớp học - 55

Bảng 16 Mô tả màn hình Lộ trình - 57

Bảng 17 Yêu cầu chức năng tham gia kiểm tra - 58

Bảng 18 Tham gia kiểm tra - 58

Bảng 19 Mô tả màn hình Phòng chờ kiểm tra - 61

Bảng 20 Yêu cầu chức năng thống kê chọn đáp án - 62

Bảng 21 Xem thống kê chọn đáp án - 62

Bảng 22 Mô tả màn hình Thống kê - 64

Bảng 23 Chức năng thêm bài tập - 64

Bảng 24 Usecase Thêm bài tập - 65

Bảng 25 Yêu cầu chức năng thêm lộ trình - 67

Bảng 26 Usecase Thêm lộ trình - 67

Bảng 27 Usecase Thêm điểm danh - 70

Bảng 28 Chức năng Xem lịch sử kiểm tra - 73

Bảng 29 Usecase Xem lịch sử kiêm tra - 73

Bảng 30 Mô tả màn hình Lịch sử kiểm tra - 75

Bảng 31 Yêu cầu chức năng xem đề kiểm tra - 76

Bảng 32 Usecase Xem đề kiểm tra - 76

Bảng 33 Mô tả màn hình Bộ đề kiểm tra - 79

Bảng 34 Yêu cầu chức năng Chỉnh sửa bộ đề - 79

Bảng 35 Usecase Chỉnh sửa bộ đề kiểm tra - 79

Bảng 36 Yêu cầu chức năng Xóa bộ đề - 83

Bảng 37 Usecase Xóa đề kiểm tra - 84

Bảng 38 Yêu cầu chức năng Xóa câu hỏi - 87

Bảng 39 Usecase Xóa câu hỏi - 88

Bảng 40 Yêu cầu chức năng Thêm câu hỏi - 91

Bảng 41 Usecase Tạo câu hỏi dạng một lựa chọn - 91

Bảng 42 Usecase Tạo câu hỏi dạng nhiều lựa chọn - 92

Bả ng 43 Usecase Tạo câu hỏi dạng đúng/sai - 93

Bảng 44 Usecase Tạo câu hỏi dạng kéo thả đáp án - 93

Bảng 45 Mô tả màn hình Tạo câu hỏi một lựa chọn - 98

Bảng 46 Mô tả màn hình Tạo câu hỏi nhiều lựa chọn - 99

Bảng 47 Mô tả màn hình Tạo câu hỏi đúng sai - 100

Bảng 48 Mô tả màn hình Tạo câu hỏi kéo thả - 102

Bảng 49 Yêu cầu chức năng Chỉnh sửa câu hỏi - 103

Bảng 50 Usecase Chỉnh sửa câu hỏi - 103

Bảng 51 Chức năng Xem thông tin tài khoản - 106

Bảng 52 Usecase Xem thông tin tài khoản - 106

Bảng 53 Mô tả màn hình Thông tin cá nhân - 108

Bảng 54 Chức năng Sửa thông tin tài khoản - 109

Bảng 55 Usecase Chỉnh sửa thông tin tài khoản - 109

Bảng 56 Mô tả màn hình Thông tin cá nhân - 111

Bảng 54 Chức năng Đổi ảnh đại diện - 112

Bảng 57 Usecase Đổi ảnh đại diện - 112

Bảng 58 Mô tả màn hình Quản lý tài khoản - 114

Bảng 59 Usecase Xem danh sách lớp đang tham gia - 115

Bảng 60 Mô tả màn hình Quản lý tài khoản - 117

Bảng 61 Yêu cầu chức năng đăng kí - 117

Bảng 63 Mô tả màn hình đang kí - 120

Bảng 64 Yêu cầu chức năng đăng kí - 121

Bảng 65 Yêu cầu chức năng đăng nhập - 121

Bảng 66 Mô tả màn hình Đăng nhập - 124

Bảng 67 Yêu cầu chức năng xem blog - 125

Bảng 69 Mô tả màn hình trang chủ - 127

Bảng 70 Yêu cầu chức năng viết blog - 128

Bảng 71 Usecase Viết bài blog - 128

Bảng 72 Mô tả màn hình viết blog - 129

Bảng 73 Yêu cầu chức năng Duyệt lớp học của Admin - 130

Bảng 74 Usecase Viết bài blog - 130

Bảng 75 Bảng mô tả màn hình duyệt lớp học - 133

Bảng 76 Testcase Đăng kí thành công - 134

Bảng 77 Testcase Đăng kí nhập sai định dạng mail - 135

Bảng 78 Testcase Đăng kí email đã đăng kí - 136

Bảng 79 Testcase Đăng nhập thành công - 137

Bảng 80 Testcase nhập sai email và mật khẩu - 138

Bảng 81 Testcase để trống email - 139

Bảng 82 Testcase để trống mật khẩu - 139

Bảng 83 Testcase nhập đúng thông tin lớp học - 140

Bảng 84 Để trống tên lớp học - 141

Bảng 85 Testcase để trống chủ đề lớp học - 143

Bảng 86 Testcase để trống giới thiệu lớp học - 144

Bảng 87 Testcase để trống giá lớp học - 145

Bảng 88 Testcase Tham gia lớp học thành công - 146

Bảng 89 Testcase Tham gia lớp học thất bại - 147

Bảng 90 Testcase tham gia qua thông báo thành công - 149

Bảng 91 Testcase tham gia qua thông báo thất bại - 150

Bảng 92 Testcase tham gia thất bại khi nhập sai mã - 150

Bảng 93 Testcase xem thông tin tài khoản - 151

Bảng 94 Tetscase chỉnh sửa tên tài khoản - 152

Bảng 95 Testcase chỉnh sửa số điện thoại - 153

Bảng 96 Testcase chỉnh sửa giới thiệu - 154

Bảng 97 Testcase chỉnh xem lớp học - 155 Bảng 98 Testcase Điểm danh - 156

Bảng 99 Testcase nộp bài tập - 157

Bảng 100 Khó khăn và cách giải quyết - 161

Nếu như cách đây vài năm trước, việc làm quen với phương pháp dạy và học trực tuyến còn nhiều bỡ ngỡ thì giờ đây, sau nhiều lần phải tạm dừng đến trường để phòng dịch COVID-19, hình thức học trực tuyến đã trở nên quen thuộc và phổ biến hơn.

Dạy học trực tuyến đã trở thành một phần quan trọng trong hệ thống giáo dục toàn cầu, đặc biệt là trong bối cảnh đại dịch Học sinh, sinh viên, giáo viên và phụ huynh đã dần thích nghi với mô hình này và nó đang trở thành một xu hướng tất yếu trong việc triển khai năm học mới.

Với mục tiêu hỗ trợ việc học trực tuyến hiệu quả hơn, chúng tôi đã chọn đề tài "Tìm hiểu Flutter và xây dựng ứng dụng quản lý lớp học" Ứng dụng này sẽ tạo không gian cho người dùng tham gia các lớp học, tham gia bài kiểm tra và trao đổi các thắc mắc, vấn đề với nhau, từ đó giúp đỡ nhau trong quá trình học tập.

Trong quá trình học tại trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM, sinh viên được tạo điều kiện để thực hiện khóa luận chuyên ngành, giúp họ tiếp cận với quy trình làm việc trên dự án nhỏ một cách toàn diện Với sự hướng dẫn của giáo viên và những góp ý từ giáo viên phản biện, nhóm đã tích lũy được nhiều kinh nghiệm quý giá Chính từ cơ hội này mà App trắc nghiệm Flutter ra đời, là sản phẩm của sự nỗ lực và sáng tạo của nhóm.

1 Tính cấp thiết của đề tài

Công nghệ đóng vai trò quan trọng trong sự phát triển của ngành giáo dục, giúp nâng cao hiệu quả giảng dạy và mang lại trải nghiệm mới cho cả giáo viên và học sinh Một trong những công cụ miễn phí hàng đầu hỗ trợ người dùng trong việc kiểm tra và đánh giá học sinh chính là Kahoot, giúp tối ưu hóa quá trình giảng dạy và học tập.

Kahoot là một ứng dụng trực tuyến cho phép người dùng thiết kế các câu hỏi trắc nghiệm và tổ chức các cuộc thi trực tuyến với nhiều người tham gia cùng một lúc Trong quá trình diễn ra cuộc thi, kết quả sẽ được công bố trực tuyến để tăng tính hấp dẫn và cạnh tranh Ưu điểm của Kahoot là có thể sử dụng trên mọi thiết bị có kết nối Internet, bao gồm máy tính để bàn, laptop, tablet và smartphone.

Quizizz là ứng dụng kiểm tra kiến thức môn học và xã hội thông qua hình thức trắc nghiệm đa dạng, được chia thành nhiều cấp độ khác nhau để học sinh tự đánh giá trình độ của mình Ứng dụng này cũng cho phép giáo viên và phụ huynh truy cập bảng câu hỏi được chia sẻ để hỗ trợ việc dạy và kèm cặp con em mình Với tính linh hoạt và đa dạng, Quizizz phù hợp cho cả việc học tại nhà và trên lớp.

2 Mục đích đề tài Đề tài Tìm hiểu Flutter và xây dựng app quản lý lớp học đặt ra các vấn đề trọng tâm về mục tiêu mà sinh viên nghiên cứu cần thực hiện được bao gồm:

Khi bắt đầu thực hiện dự án, sinh viên cần nghiên cứu chuyên môn về công nghệ đã chọn, bao gồm cả tổng quan và khả năng ứng dụng của nó Đồng thời, việc tìm hiểu các thư viện, mã nguồn, module và template cũng đóng vai trò quan trọng trong quá trình xây dựng ứng dụng, giúp mang lại trải nghiệm tốt hơn cho người dùng Ngoài ra, nhóm sinh viên cũng cần tìm hiểu quy trình xây dựng và triển khai ứng dụng lên các nền tảng như App Store và CH Play để đảm bảo sản phẩm của mình được phát hành thành công.

Ứng dụng các kiến thức đã tìm hiểu vào xây dựng một sản phẩm cụ thể là một trong những vấn đề quan trọng mà đề tài đặt ra Ở đây, sản phẩm cụ thể được nhắc đến là App trắc nghiệm Flutter, một ứng dụng mobile đáp ứng các yêu cầu cơ bản phục vụ cho người dùng có nhu cầu trao đổi Việc hoàn thiện sản phẩm này đòi hỏi sự tích hợp hài hòa giữa kiến thức và thực tiễn, nhằm mang lại trải nghiệm tốt nhất cho người dùng.

Khoá luận tốt nghiệp 24 học tập, bên cạnh đó, sản phẩm có khả năng nâng cấp để tiếp tục phát triển nhiều tính năng hơn nữa trong tương lai

3 Kết quả dự kiến đạt được

- Đăng kí vào hệ thống

- Đăng nhập vào hệ thống

- Xem danh sách các lớp học (Lớp học của tôi, Lớp học được đề xuất,…)

- Thanh toán cho lớp học

- Xem được thông tin của lớp học (Lộ trình, Thành viên,…)

- Quản lý thông tin cá nhân

- Viết các bài blog trao đổi

- Tương tác với các bài blog khác (thả tim, comment,…)

- Điểm danh, nộp bài tập

- Nhắn tin trong các lớp học

- Xem lại các bài kiểm tra

- Tạo lớp học (Sẽ trở thành host-room)

3.3 Phía người tạo lớp học (Host-room)

Người tạo lớp học (host-room) thể thực hiện tất cả tính năng của người dùng thông thường Ngoài ra còn có thể thực hiện các tính năng sau:

- Chỉnh sửa thông tin lớp học

- Tạo các bộ đề, bài kiểm tra

- Tạo bài tập, điểm danh

3.4 Phía người quản lý (Admin)

- Xem danh sách các lớp học trên hệ thống (Tên, mô tả, tình trạng,…)

- Khóa/Mở khóa lớp học

- Nghiên cứu về Node JS API (Nest JS), Flutter

- Tìm hiểu quy trình, cách thức hoạt động, vận hành và xây dựng một ứng dụng học tập qua trắc nghiệm

- Học hỏi và tìm hiểu về lý thuyết, công nghệ Flutter, NetJS, NodeJs,

MongoDB thông qua tài liệu trên mạng, các khóa học trên internet

- Tham khảo nghiệp vụ, cách thức hoạt động ở các ứng dụng tương tự như Kahoot!, Quizziz,…

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

NodeJS là một mã nguồn mở đa nền tảng được viết bằng C++, xây dựng trên server-side runtime framework Với khả năng hỗ trợ cluster và runtime, NodeJS đã chiếm phần lớn thị trường làm web app trong thời gian gần đây Được phát triển bởi Ryan Dahl vào năm 2009, NodeJS có thể chạy trên nhiều hệ điều hành khác nhau, bao gồm OS X, Microsoft Windows và Linux.

- Node.js là nó nhận và xử lý nhiều kết nối chỉ với một single-thread

- Ít tốn bộ nhớ Ram

- Sử dụng non-blocking I/O tận tối đa tài nguyên của server

- Dễ dàng xây dựng ứng cùng một ngôn ngữ lập trình

- Dễ dàng xây dựng microservice đơn giản nhanh chống

- Cộng đồng phát triển mạnh mẽ

- Xử lý các luồng sự kiện mạnh mẽ

1.3 Nhược điểm Ứng dụng nặng tốn tài nguyên Nếu bạn cần xử lý các ứng dụng tốn tài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tương tự như vậy thì không nên dùng NodeJS

Flutter is a versatile framework for developing cross-platform applications, encompassing mobile (Android and iOS), web, and desktop (Windows, Linux, and MacOS) platforms It is often chosen for mobile projects that require rapid feature development while maintaining native-like performance Originally designed to address the limitations of traditional development methods, Flutter streamlines the process of building high-performance, visually appealing applications across multiple platforms.

Một trong những điểm yếu của React Native và các framework cross-platform khác là khả năng phát triển nhanh trên hai nền tảng, nhưng hiệu năng không thể sánh bằng với ứng dụng native Trong khi đó, ứng dụng native lại không thể phát triển nhanh và đồng bộ trên nhiều nền tảng như các giải pháp cross-platform, dẫn đến sự lựa chọn khó khăn giữa tốc độ phát triển và hiệu suất ứng dụng.

Tính năng phát triển nhanh chóng các ứng dụng là một ưu điểm nổi bật của Flutter, cho phép người dùng thử nghiệm và sử dụng các ứng dụng một cách nhanh chóng và dễ dàng hơn Khả năng xây dựng giao diện người dùng và sửa lỗi nhanh chóng cũng là những điểm mạnh của Flutter, thu hút nhiều người sử dụng lựa chọn Đặc biệt, tính năng hot reload của Flutter cho phép tải lại ứng dụng mà không làm mất trạng thái, mang lại trải nghiệm mượt mà trên cả emulator, simulator và device cho cả iOS và Android.

Các giả thiết, ràng buộc

Bảng 3.4 Các giả thiết, ràng buộc và rủi ro

STT Hạng mục Mô tả

1 Các giả thiết của dự án - Hoàn thành dự án sớm hơn mong đợi

- Sản phẩm ra mắt không xảy ra lỗi

2 Các ràng buộc của dự án - Trong thời gian bảo trì nếu có lỗi xảy ra sẽ chịu trách nhiệm toàn bộ trách nhiệm và khắc phục lỗi

- Sau khi hoàn thành dự án thì nhóm phải xóa toàn bộ dữ liệu đã được thêm trong quá trình thực hiện dự án

- Bên khách hàng không chấp nhận nếu sản phẩm chậm quá 10 ngày, sản phẩm không đảm bảo chất lượng, không đúng yêu cầu ban đầu

- Khi phát sinh thêm yêu cầu khách hàng sẽ phải chi trả thêm chi phí

3 Các rủi ro và hướng xử lý - Rủi ro về mặt kỹ thuật, con người thì khách hàng không chịu trách nhiệm

- Kinh phí có thể sẽ tăng lên trong quá trình thực hiện dự án vì lý do bị trì hoãn dự án từ phía khách hàng

- Thành viên tham gia vào dự án có thể nghỉ hoặc bận đột xuất

- Khách hàng thay đổi yêu cầu đột ngột, cần thêm thời gian để lập lại kế hoạch thực hiện và tính chi phí dự án

MÔ TẢ YÊU CẦU

Phân tích yêu cầu phi chức năng

STT Thời gian Công việc Ghi chú

2 21/03/2022 – 10/04/2022 Làm tính năng bài viết, bình luận và thích bài viết

3 11/04/2022 – 24/04/2022 Làm tính năng điểm danh, nộp bài và tải bài nộp cho chủ lớp học

4 25/04/2022 – 15/05/2022 Làm chức năng xem lịch, xem ngày có deadline hay điểm danh

5 16/05/2022 – 29/05/2022 Thêm các loại câu hỏi: Chọn nhiều đáp án, Chọn một đáp án, Đúng/Sai và Kéo thả

6 30/05/2022 – 12/06/2022 Thêm hình ảnh và âm thanh cho câu hỏi

7 13/06/2022 – 22/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Người viết đề cương Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

1 Tính cấp thiết của đề tài - 22

3 Kết quả dự kiến đạt được - 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

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - 26

3 Danh sách các chức năng - 33

4 Ma trận quyền – Permission matrix: - 35

5 Các yêu cầu phi chức năng - 36

6 Các giả thiết, ràng buộc - 36

CHƯƠNG 4: MÔ TẢ YÊU CẦU: - 38

1 Tổng quan quy trình nghiệp vụ: - 38

2 Phân tích yêu cầu chức năng - 39

2.1 Chức năng quản lý lớp học của user - 39

2.1.1 Xem thông tin lớp học - 39

2.1.5 Xem lộ trình lớp học - 55

2.2 Chức năng tham gia bài kiểm tra của user - 58

2.2.2 Xem thống kê chọn đáp án - 62

2.3 Chức năng quản lý lớp học của host-room - 64

2.3.4 Xem lịch sử kiểm tra - 73

2.4 Chức năng quản lý bộ đề của host-room - 76

2.5 Chức năng quản lý tài khoản - 106

2.5.1 Xem thông tin tài khoản - 106

2.5.2 Sửa thông tin tài khoản - 109

2.5.4 Xem các lớp đang tham gia - 115

2.6.1 Yêu cầu chức năng và mô tả - 117

2.6.1 Yêu cầu chức năng và mô tả - 121

2.8.1 Yêu cầu chức năng và mô tả - 125

2.9.1 Yêu cầu chức năng và mô tả - 128

2.10 Duyệt lớp học của Admin - 130

2.10.1 Yêu cầu chức năng và mô tả - 130

3 Phân tích yêu cầu phi chức năng - 133

1.2 Nhập sai định dạng email - 135

1.3 Email đã được đăng kí - 136

2.1 Nhập đúng email và mật khẩu - 137

2.2 Nhập sai email và mật khẩu - 138

3.1 Nhập đúng thông tin lớp học - 140

3.2 Để trống tên lớp học - 141

3.3 Để trống chủ đề lớp học - 143

3.4 Để trống giới thiệu lớp học - 144

3.5 Để trống giá lớp học - 145

4.1 Tham gia lớp học thành công - 146

4.2 Tham gia lớp học thất bại - 147

5.1 Tham gia kiểm tra qua thông báo thành công - 149

5.2 Tham gia kiểm tra qua thông báo thất bại - 149

5.3 Tham gia kiểm tra khi nhập sai mã - 150

6 Xem thông tin tài khoản - 151

7 Chỉnh sửa thông tin tài khoản - 152

7.1 Chỉnh sửa tên của bạn - 152

7.2 Chỉnh sửa số điện thoại - 153

3 Ưu điểm và nhược điểm - 160

4 Khó khăn và cách giải quyết - 161

Hình 3 Sơ đồ tổng quan hệ thống (1) - 30

Hình 4 Sơ đồ tổng quan hệ thống (2) - 30

Hình 5 Sơ đồ tổng quan hệ thống (3) - 31

Hình 9 Usecase của Host-room - 33

Hình 11 Tổng quan quy trình nghiệp vụ - 38

Hình 12 Usecase Quản lý lớp học - 39

Hình 13 Màn hình Chi tiết lớp học - 41

Hình 14 Màn hình Các actions của lớp học( host-room) - 43

Hình 15 Màn hình các actions lớp học (user) - 44

Hình 16 Màn hình Chi tiết lớp học - 47

Hình 17 Màn hình Báo xấu lớp học - 51

Hình 18 Màn hình Rời lớp học - 54

Hình 19 Màn hình Lộ trình - 57

Hình 20 Sequence diagram cho usecase Tham gia kiểm tra - 59

Hình 21 Màn hình Phòng chờ kiểm tra - 61

Hình 22 Sequence diagram cho usecase Thống kê - 63

Hình 23 Màn hình Thống kê - 63

Hình 24 Usecase Quản lý lớp học - 64

Hình 25 Màn hình Tạo bài tập - 67

Hình 26 Màn hình Thêm lộ trình - 70

Hình 27 Màn hình Lịch sử kiểm tra - 75

Hình 28 Usecase Quản lý đề kiểm tra - 76

Hình 29 Màn hình Bộ đề kiểm tra - 78

Hình 30 Giao diện Tạo câu hỏi một lựa chọn - 97

Hình 31 Giao diện Tạo câu hỏi nhiều lựa chọn - 99

Hình 32 Giao diện Tạo câu hỏi đúng sai - 100

Hình 33 Tạo câu hỏi dạng kéo thả - 101

Hình 34 Giao diện thêm câu trả lời loại kéo thả đáp án - 102

Hình 35 Usecase Quản lý tài khoản - 106

Hình 36 Màn hình Thông tin cá nhân - 108

Hình 37 Màn hình Thông tin cá nhân - 111

Hình 38 Màn hình Quản lý tài khoản - 114

Hình 39 Màn hình Quản lý tài khoản - 116

Hình 40 Sequence diagram cho usecase Đăng kí - 119

Hình 41 Màn hình đăng ký - 120

Hình 42 Sequence diagram cho usecase Đăng nhập - 123

Hình 43 Màn hình Đăng nhập - 124

Hình 44 Màn hình Trang chủ - 126

Hình 45 Màn hình viết blog - 129

Hình 46 Sequence diagram cho usecase Viết blog - 131

Hình 47 Màn hình duyệt lớp học - 133

Bảng 1 Danh sách các chức năng của hệ thống - 33

Bảng 2 Yêu cầu chức năng Xem thông tin lớp học - 39

Bảng 3 Usecase Xem thông tin lớp học - 40

Bảng 4 Mô tả màn hình Chi tiết lớp học - 42

Bảng 5 Mô tả màn hình Các actions của lớp học (host-room - 43

Bảng 6 Yêu cầu chức năng Xem thông tin lớp học - 45

Bảng 7 Usecase Tham gia lớp học - 45

Bảng 8 Mô tả màn hình Chi tiết lớp học - 47

Bảng 10 Mô tả màn hình Báo xấu lớp học - 51

Bảng 11 Yêu cầu chức năng Rời lớp học - 52

Bảng 13 Mô tả màn hình Rời lớp học - 54

Bảng 14 Yêu cầu chức năng Xem lộ trình lớp học - 55

Bảng 16 Mô tả màn hình Lộ trình - 57

Bảng 17 Yêu cầu chức năng tham gia kiểm tra - 58

Bảng 18 Tham gia kiểm tra - 58

Bảng 19 Mô tả màn hình Phòng chờ kiểm tra - 61

Bảng 20 Yêu cầu chức năng thống kê chọn đáp án - 62

Bảng 21 Xem thống kê chọn đáp án - 62

Bảng 22 Mô tả màn hình Thống kê - 64

Bảng 23 Chức năng thêm bài tập - 64

Bảng 24 Usecase Thêm bài tập - 65

Bảng 25 Yêu cầu chức năng thêm lộ trình - 67

Bảng 26 Usecase Thêm lộ trình - 67

Bảng 27 Usecase Thêm điểm danh - 70

Bảng 28 Chức năng Xem lịch sử kiểm tra - 73

Bảng 29 Usecase Xem lịch sử kiêm tra - 73

Bảng 30 Mô tả màn hình Lịch sử kiểm tra - 75

Bảng 31 Yêu cầu chức năng xem đề kiểm tra - 76

Bảng 32 Usecase Xem đề kiểm tra - 76

Bảng 33 Mô tả màn hình Bộ đề kiểm tra - 79

Bảng 34 Yêu cầu chức năng Chỉnh sửa bộ đề - 79

Bảng 35 Usecase Chỉnh sửa bộ đề kiểm tra - 79

Bảng 36 Yêu cầu chức năng Xóa bộ đề - 83

Bảng 37 Usecase Xóa đề kiểm tra - 84

Bảng 38 Yêu cầu chức năng Xóa câu hỏi - 87

Bảng 39 Usecase Xóa câu hỏi - 88

Bảng 40 Yêu cầu chức năng Thêm câu hỏi - 91

Bảng 41 Usecase Tạo câu hỏi dạng một lựa chọn - 91

Bảng 42 Usecase Tạo câu hỏi dạng nhiều lựa chọn - 92

Bả ng 43 Usecase Tạo câu hỏi dạng đúng/sai - 93

Bảng 44 Usecase Tạo câu hỏi dạng kéo thả đáp án - 93

Bảng 45 Mô tả màn hình Tạo câu hỏi một lựa chọn - 98

Bảng 46 Mô tả màn hình Tạo câu hỏi nhiều lựa chọn - 99

Bảng 47 Mô tả màn hình Tạo câu hỏi đúng sai - 100

Bảng 48 Mô tả màn hình Tạo câu hỏi kéo thả - 102

Bảng 49 Yêu cầu chức năng Chỉnh sửa câu hỏi - 103

Bảng 50 Usecase Chỉnh sửa câu hỏi - 103

Bảng 51 Chức năng Xem thông tin tài khoản - 106

Bảng 52 Usecase Xem thông tin tài khoản - 106

Bảng 53 Mô tả màn hình Thông tin cá nhân - 108

Bảng 54 Chức năng Sửa thông tin tài khoản - 109

Bảng 55 Usecase Chỉnh sửa thông tin tài khoản - 109

Bảng 56 Mô tả màn hình Thông tin cá nhân - 111

Bảng 54 Chức năng Đổi ảnh đại diện - 112

Bảng 57 Usecase Đổi ảnh đại diện - 112

Bảng 58 Mô tả màn hình Quản lý tài khoản - 114

Bảng 59 Usecase Xem danh sách lớp đang tham gia - 115

Bảng 60 Mô tả màn hình Quản lý tài khoản - 117

Bảng 61 Yêu cầu chức năng đăng kí - 117

Bảng 63 Mô tả màn hình đang kí - 120

Bảng 64 Yêu cầu chức năng đăng kí - 121

Bảng 65 Yêu cầu chức năng đăng nhập - 121

Bảng 66 Mô tả màn hình Đăng nhập - 124

Bảng 67 Yêu cầu chức năng xem blog - 125

Bảng 69 Mô tả màn hình trang chủ - 127

Bảng 70 Yêu cầu chức năng viết blog - 128

Bảng 71 Usecase Viết bài blog - 128

Bảng 72 Mô tả màn hình viết blog - 129

Bảng 73 Yêu cầu chức năng Duyệt lớp học của Admin - 130

Bảng 74 Usecase Viết bài blog - 130

Bảng 75 Bảng mô tả màn hình duyệt lớp học - 133

Bảng 76 Testcase Đăng kí thành công - 134

Bảng 77 Testcase Đăng kí nhập sai định dạng mail - 135

Bảng 78 Testcase Đăng kí email đã đăng kí - 136

Bảng 79 Testcase Đăng nhập thành công - 137

Bảng 80 Testcase nhập sai email và mật khẩu - 138

Bảng 81 Testcase để trống email - 139

Bảng 82 Testcase để trống mật khẩu - 139

Bảng 83 Testcase nhập đúng thông tin lớp học - 140

Bảng 84 Để trống tên lớp học - 141

Bảng 85 Testcase để trống chủ đề lớp học - 143

Bảng 86 Testcase để trống giới thiệu lớp học - 144

Bảng 87 Testcase để trống giá lớp học - 145

Bảng 88 Testcase Tham gia lớp học thành công - 146

Bảng 89 Testcase Tham gia lớp học thất bại - 147

Bảng 90 Testcase tham gia qua thông báo thành công - 149

Bảng 91 Testcase tham gia qua thông báo thất bại - 150

Bảng 92 Testcase tham gia thất bại khi nhập sai mã - 150

Bảng 93 Testcase xem thông tin tài khoản - 151

Bảng 94 Tetscase chỉnh sửa tên tài khoản - 152

Bảng 95 Testcase chỉnh sửa số điện thoại - 153

Bảng 96 Testcase chỉnh sửa giới thiệu - 154

Bảng 97 Testcase chỉnh xem lớp học - 155 Bảng 98 Testcase Điểm danh - 156

Bảng 99 Testcase nộp bài tập - 157

Bảng 100 Khó khăn và cách giải quyết - 161

Nếu như cách đây vài năm trước, việc làm quen với phương pháp dạy và học trực tuyến còn nhiều bỡ ngỡ thì giờ đây, sau nhiều lần phải tạm dừng đến trường để phòng dịch COVID-19, hình thức học trực tuyến đã trở nên quen thuộc và phổ biến hơn.

Dạy học trực tuyến đã trở thành xu hướng giáo dục chính trong thời kỳ dịch bệnh, với sự thích nghi nhanh chóng của học sinh, sinh viên, giáo viên và phụ huynh trên toàn cầu Đây là mô hình giáo dục được tăng cường, củng cố và dự kiến sẽ trở thành một phần quan trọng trong các nhiệm vụ triển khai năm học, giúp thích ứng với tình hình mới và đáp ứng nhu cầu giáo dục trong thời đại số.

Với mục tiêu hỗ trợ việc học trực tuyến hiệu quả hơn, chúng tôi quyết định chọn đề tài Tìm hiểu Flutter và xây dựng ứng dụng quản lý lớp học Ứng dụng này sẽ tạo không gian cho người dùng tham gia các lớp học, bài kiểm tra và trao đổi ý kiến, giải đáp thắc mắc với nhau, từ đó hỗ trợ và giúp đỡ nhau trong quá trình học tập.

Trong quá trình học tập tại trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM, sinh viên được tạo điều kiện để thực hiện khóa luận chuyên ngành, qua đó tiếp cận với quy trình làm việc trên dự án nhỏ và tích lũy kinh nghiệm quý giá Sự hướng dẫn của giáo viên và những góp ý của giáo viên phản biện đã giúp nhóm phát triển kỹ năng và kiến thức thực tế Đây cũng là tiền đề cho sự ra đời của ứng dụng trắc nghiệm Flutter, một sản phẩm của nhóm sau quá trình học tập và thực hành tại trường.

1 Tính cấp thiết của đề tài

Công nghệ đóng vai trò quan trọng trong sự phát triển của ngành giáo dục, giúp nâng cao hiệu quả giảng dạy và mang lại trải nghiệm mới cho cả giáo viên và học sinh Một trong những công cụ miễn phí hàng đầu hỗ trợ người dùng trong việc kiểm tra, đánh giá học sinh là Kahoot, giúp đổi mới phương pháp giảng dạy và đánh giá hiệu quả.

Kahoot là một ứng dụng trực tuyến cho phép thiết kế các câu hỏi trắc nghiệm và tổ chức các cuộc thi trực tuyến với nhiều người tham gia cùng một lúc Trong quá trình diễn ra cuộc thi, kết quả sẽ được công bố trực tuyến, tăng cường tính hấp dẫn và cạnh tranh Ưu điểm của Kahoot là có thể sử dụng trên mọi thiết bị có kết nối Internet, bao gồm máy tính để bàn, laptop, tablet và smartphone.

Quizizz là ứng dụng kiểm tra kiến thức môn học và xã hội dưới hình thức trắc nghiệm, cung cấp các câu hỏi được phân thành nhiều cấp độ khác nhau để học sinh tự đánh giá trình độ của mình Ứng dụng này cũng cho phép giáo viên và phụ huynh truy cập bảng câu hỏi do người khác chia sẻ để hỗ trợ việc dạy và kèm cặp con em mình Với tính năng linh hoạt, Quizizz phù hợp cho cả việc học tại nhà và trên lớp, giúp học sinh có thể học tập và kiểm tra kiến thức một cách hiệu quả.

2 Mục đích đề tài Đề tài Tìm hiểu Flutter và xây dựng app quản lý lớp học đặt ra các vấn đề trọng tâm về mục tiêu mà sinh viên nghiên cứu cần thực hiện được bao gồm:

Khi thực hiện dự án, sinh viên cần nghiên cứu chuyên môn về công nghệ được lựa chọn, bao gồm cả tổng quan và khả năng ứng dụng của nó Đồng thời, việc tìm hiểu thêm về các thư viện, mã nguồn, module và template cũng đóng vai trò quan trọng trong quá trình xây dựng ứng dụng, giúp mang lại trải nghiệm tốt cho người dùng Ngoài ra, nhóm sinh viên cũng cần tìm hiểu quy trình xây dựng và triển khai ứng dụng lên các nền tảng như App Store và CH Play để đảm bảo sản phẩm của mình được phát hành thành công.

Vấn đề thứ hai được đề tài đặt ra là ứng dụng các kiến thức đã tìm hiểu vào xây dựng một sản phẩm cụ thể, đó là App trắc nghiệm Flutter Sản phẩm này cần phải là một ứng dụng di động hoàn chỉnh, đáp ứng các yêu cầu cơ bản và phục vụ nhu cầu trao đổi của người dùng.

Khoá luận tốt nghiệp 24 học tập, bên cạnh đó, sản phẩm có khả năng nâng cấp để tiếp tục phát triển nhiều tính năng hơn nữa trong tương lai

3 Kết quả dự kiến đạt được

- Đăng kí vào hệ thống

- Đăng nhập vào hệ thống

- Xem danh sách các lớp học (Lớp học của tôi, Lớp học được đề xuất,…)

- Thanh toán cho lớp học

- Xem được thông tin của lớp học (Lộ trình, Thành viên,…)

- Quản lý thông tin cá nhân

- Viết các bài blog trao đổi

- Tương tác với các bài blog khác (thả tim, comment,…)

- Điểm danh, nộp bài tập

- Nhắn tin trong các lớp học

- Xem lại các bài kiểm tra

- Tạo lớp học (Sẽ trở thành host-room)

3.3 Phía người tạo lớp học (Host-room)

Người tạo lớp học (host-room) thể thực hiện tất cả tính năng của người dùng thông thường Ngoài ra còn có thể thực hiện các tính năng sau:

- Chỉnh sửa thông tin lớp học

- Tạo các bộ đề, bài kiểm tra

- Tạo bài tập, điểm danh

3.4 Phía người quản lý (Admin)

- Xem danh sách các lớp học trên hệ thống (Tên, mô tả, tình trạng,…)

- Khóa/Mở khóa lớp học

- Nghiên cứu về Node JS API (Nest JS), Flutter

- Tìm hiểu quy trình, cách thức hoạt động, vận hành và xây dựng một ứng dụng học tập qua trắc nghiệm

- Học hỏi và tìm hiểu về lý thuyết, công nghệ Flutter, NetJS, NodeJs,

MongoDB thông qua tài liệu trên mạng, các khóa học trên internet

- Tham khảo nghiệp vụ, cách thức hoạt động ở các ứng dụng tương tự như Kahoot!, Quizziz,…

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

NodeJS là một mã nguồn mở đa nền tảng được viết bằng C++ và xây dựng trên server-side runtime framework, cho phép hỗ trợ cluster và runtime hiệu quả Được phát triển bởi Ryan Dahl vào năm 2009, NodeJS đã trở thành một lựa chọn hàng đầu cho việc xây dựng ứng dụng web trong những năm gần đây Ngoài ra, NodeJS còn hỗ trợ chạy trên nhiều hệ điều hành khác nhau, bao gồm OS X, Microsoft Windows và Linux, giúp cho việc phát triển ứng dụng trở nên linh hoạt và dễ dàng hơn.

- Node.js là nó nhận và xử lý nhiều kết nối chỉ với một single-thread

- Ít tốn bộ nhớ Ram

- Sử dụng non-blocking I/O tận tối đa tài nguyên của server

- Dễ dàng xây dựng ứng cùng một ngôn ngữ lập trình

- Dễ dàng xây dựng microservice đơn giản nhanh chống

- Cộng đồng phát triển mạnh mẽ

- Xử lý các luồng sự kiện mạnh mẽ

1.3 Nhược điểm Ứng dụng nặng tốn tài nguyên Nếu bạn cần xử lý các ứng dụng tốn tài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tương tự như vậy thì không nên dùng NodeJS

Flutter is a multi-platform framework for developing mobile, web, and desktop applications, including Android, iOS, Windows, Linux, and MacOS It's often chosen for mobile projects that require rapid feature development while maintaining native-like performance By leveraging Flutter, developers can overcome the limitations of traditional cross-platform development and deliver high-quality applications across various platforms.

Một trong những điểm yếu của React Native và các framework cross-platform khác là chỉ phát triển nhanh trên hai nền tảng, nhưng hiệu năng không thể sánh bằng với ứng dụng native Trong khi đó, ứng dụng native không thể phát triển nhanh và đồng bộ như ứng dụng cross-platform, khiến cho việc lựa chọn nền tảng trở thành một bài toán khó khăn cho các nhà phát triển.

Tính năng phát triển nhanh chóng các ứng dụng là một trong những điểm mạnh của Flutter, cho phép người dùng thử nghiệm và sử dụng nhanh chóng và dễ dàng hơn Khả năng xây dựng giao diện người dùng và sửa lỗi nhanh chóng cũng là những yếu tố quan trọng giúp Flutter thu hút nhiều người sử dụng lựa chọn Ngoài ra, tính năng hot reload của Flutter còn cho phép tải lại ứng dụng mà không làm mất trạng thái trên emulator, simulator và device cho cả iOS và Android, mang lại trải nghiệm phát triển ứng dụng mượt mà và hiệu quả.

TESTCASE

Đăng kí

Bảng 77 Testcase Đăng kí thành công

ID Đăng kí Test Case ID DK_01

Nhập đúng thông tin Test Priority Cao

1 Mở app Màn hình đăng nhập

Màn hình đăng nhập mobile Passed

Màn hình đăng kí mobile Passed

3 Nhập đúng tất cả các trường

Họ của bạn: Bao Tên của bạn:

Phuong Email: baophuon g@gmail. com Mật khẩu:

Khi nhập lại mật khẩu, hệ thống sẽ tự động đăng ký thành công và điều hướng người dùng sang màn hình đăng nhập Điều này đảm bảo rằng quá trình đăng ký được thực hiện một cách trơn tru và liền mạch, giúp người dùng dễ dàng tiếp cận với các tính năng và dịch vụ của hệ thống.

1.2 Nhập sai định dạng email

Bảng 78 Testcase Đăng kí nhập sai định dạng mail

ID Đăng kí Test Case ID DK_02

Nhập sai định dạng email Test Priority Cao

1 Mở app Màn hình đăng nhập

Màn hình đăng nhập mobile Passed Đăng kí thất bại

Màn hình đăng kí mobile Passed

3 Nhập sai định dạng email và đúng tất cả các trường còn lại

Phuong Email: baophuongg mail.com Mật khẩu:

“Hãy nhập email của bạn”

“Hãy nhập email của bạn” mobile Passed Đăng kí thất bại

1.3 Email đã được đăng kí

Bảng 79 Testcase Đăng kí email đã đăng kí

ID Đăng kí Test Case ID DK_03

Email đã được đăng kí trước đó

Prerequisite Account active: baophuong@gmail.com

1 Mở app Màn hình đăng nhập

Màn hình đăng nhập mobile Passed

Màn hình đăng kí mobile Passed

3 Nhập email đã được đăng kí và đúng các trường còn lại

Phuong Email: baophuong@ gmail.com Mật khẩu:

“Email đã được đăng kí, hãy thử lại”

“Email đã được đăng kí, hãy thử lại” mobile Passed Đăng kí thất bại

Đăng nhập

2.1 Nhập đúng email và mật khẩu

Bảng 80 Testcase Đăng nhập thành công

ID Đăng nhập Test Case ID DN_01

Nhập đúng email và password Test Priority Cao

Prerequisite Account active: baophuong@gmail.com/1231

1 Mở app Màn hình đăng nhập

Màn hình đăng nhập localhost Passed Đăng nhập thành công

2 Nhập email và mật khẩu

Email: baophuong@ gmail.com Mật khẩu:

123123 Đăng nhập thành công và điều hướng sang trang chủ Đăng nhập thành công và điều hướng sang trang chủ localhost Passed Đăng nhập thành công

2.2 Nhập sai email và mật khẩu

Bảng 81 Testcase nhập sai email và mật khẩu

ID Đăng nhập Test Case ID DN_02

Nhập sai email và mật khẩu Test Priority High

Prerequisite Account active: baophuong@gmail.com/123

1 Mở app Màn hình đăng nhập

Màn hình đăng nhập mobile Passed Đăng nhập thất bại

2 Nhập đúng email và sai mật khẩu

Email: baophuong@ gmail.com Mật khẩu:

Email hoặc mật khẩu không chính xác

Email hoặc mật khẩu không chính xác mobile Passed Đăng nhập thất bại

3 Nhập sai email và đúng mật khẩu

Email hoặc mật khẩu không chính xác

Email hoặc mật khẩu không chính xác mobile Passed Đăng nhập thất bại

Bảng 82 Testcase để trống email

ID Đăng nhập Test Case ID DN_03

Description Để trống email Test Priority High

Prerequisite Account active: baophuong@gmail.com/12312

1 Mở app Màn hình đăng nhập

Màn hình đăng nhập mobile Passed Đăng nhập thất bại

2 Để trống email và nhập đúng mật khẩu

“Hãy nhập email của bạn ”

“Hãy nhập email của bạn ” mobile Passed Đăng nhập thất bại

Bảng 83 Testcase để trống mật khẩu

ID Đăng nhập Test Case ID DN_04

Description Để trống mật khẩu Test Priority High

Prerequisite Account active: baophuong@gmail.com/12312

1 Mở app Màn hình đăng nhập

Màn hình đăng nhập mobile Passed Đăng nhập thất bại

2 Để trống mật khẩu và nhập đúng email

“Hãy nhập mật khẩu của bạn ”

“Hãy nhập mật khẩu của bạn

” mobile Passed Đăng nhập thất bại

Tạo lớp học

3.1 Nhập đúng thông tin lớp học

Bảng 84 Testcase nhập đúng thông tin lớp học

Tạo lớp học Test Case ID CR_01

Tạo lớp học thành công Test Priority High

Prerequisite Đã đăng nhập vào hệ thống và điều hướng sang màn hình Trang chủ

1 Chọn icon thứ 2 trên thanh Điều hướng sang màn hình lớp học Điều hướng sang màn mobile Passed

Khoá luận tốt nghiệp 141 bottom navigation hình lớp học

2 Chọn icon trên cùng góc phải màn hình Điều hướng sang trang tạo lớp học mới Điều hướng sang trang tạo lớp học mới mobile Passed

3 1 Nhập đúng tên lớp học, chủ đề, giới thiệu lớp học, giá lớp học

Tên lớp: Lập trình di động Chủ đề: Giao diện

Thông báo Tạo lớp học thành công

Thông báo Tạo lớp học thành công mobile Passed

3.2 Để trống tên lớp học

Bảng 85 Để trống tên lớp học

Tạo lớp học thất bại Test Case ID CR_02

Description Để trống Tên lớp học Test Priority High

Prerequisite Đã đăng nhập vào hệ thống và điều hướng sang màn hình Trang chủ

1 Chọn icon thứ 2 trên thanh bottom navigation Điều hướng sang màn hình lớp học Điều hướng sang màn hình lớp học mobile Passed

2 Chọn icon trên cùng góc phải màn hình Điều hướng sang trang tạo lớp học mới Điều hướng sang trang tạo lớp học mới mobile Passed

3 1 Nhập đúng chủ đề, giới thiệu lớp học, giá lớp học và để trống tên lớp lớp học

“Hãy nhập tên lớp học”

“Hãy nhập tên lớp học” mobile Passed Tạo lớp học thất bại

3.3 Để trống chủ đề lớp học

Bảng 86 Testcase để trống chủ đề lớp học

Tạo lớp học thất bại Test Case ID CR_03

Tạo lớp học khi để trống Chủ đề

Prerequisite Đã đăng nhập vào hệ thống và điều hướng sang màn hình Trang chủ

1 Chọn icon thứ 2 trên thanh bottom navigation Điều hướng sang màn hình lớp học Điều hướng sang màn hình lớp học mobile Passed

2 Chọn icon trên cùng góc phải màn hình Điều hướng sang trang tạo lớp học mới Điều hướng sang trang tạo lớp học mới mobile Passed

3 1 Nhập đúng tên lớp học, giới thiệu lớp học, giá lớp học và để trống chủ đề

Tên lớp: Lập trình di động Chủ đề:

“Hãy nhập chủ đề của lớp học”

Thông báo “Hãy nhập chủ đề của lớp học” mobile Passed Tạo lớp học thất bại

3.4 Để trống giới thiệu lớp học

Bảng 87 Testcase để trống giới thiệu lớp học

Tạo lớp học thất bại Test Case ID CR_04

Tạo lớp học khi để trống Giới thiệu

Prerequisite Đã đăng nhập vào hệ thống và điều hướng sang màn hình Trang chủ

2 trên thanh bottom navigation Điều hướng sang màn hình lớp học Điều hướng sang màn hình lớp học mobile Passed

2 Chọn icon trên cùng góc phải màn hình Điều hướng sang trang tạo lớp học mới Điều hướng sang trang tạo lớp học mới mobile Passed

3 1 Nhập đúng tên lớp học, chủ đề lớp học, giá lớp học và để trống giới thiệu

Lập trình di động Chủ đề:

“Hãy nhập giới thiệu về lớp học của bạn ”

“Hãy nhập giới thiệu về lớp học của bạn ” mobile Passed Tạo lớp học thất bại

3.5 Để trống giá lớp học

Bảng 88 Testcase để trống giá lớp học

Tạo lớp học thất bại Test Case ID CR_05

Tạo lớp học khi để trống Giá lớp học

Prerequisite Đã đăng nhập vào hệ thống và điều hướng sang màn hình Trang chủ

1 Chọn icon thứ 2 trên thanh bottom navigation Điều hướng sang màn hình lớp học Điều hướng sang màn hình lớp học mobile Passed

2 Chọn icon trên cùng góc phải màn hình Điều hướng sang trang tạo lớp học mới Điều hướng sang trang tạo lớp học mới mobile Passed

3 1 Nhập đúng tên lớp học, chủ đề lớp học, chủ đề lớp học và để

Tên lớp: Lập trình di động Chủ đề: Giao diện

“Hãy thêm giá cho khóa học của bạn”

Thông báo “Hãy thêm giá cho khóa học của bạn” mobile Passed Tạo lớp học thất bại

Khoá luận tốt nghiệp 146 trống giá lớp học

Tham gia lớp học

4.1 Tham gia lớp học thành công

Bảng 89 Testcase Tham gia lớp học thành công

Tham gia lớp học Test Case ID IC_01

Tham gia lớp học thành công Test Priority High

Prerequisite Đã đăng nhập vào hệ thống và điều hướng sang màn hình Trang chủ

1 Chọn icon thứ 2 trên thanh bottom navigation Điều hướng sang màn hình lớp học Điều hướng sang màn hình lớp học mobile Passed

2 Chọn lớp học trên lớp học đề xuất Điều hướng sang trang chi tiết lớp học Điều hướng sang trang chi tiết lớp học mobile Passed

Hiển thị thông báo có muốn tham gia lớp học

Hiển thị thông báo có muốn tham gia lớp học mobile Passed

“Đồng ý” Điều hướng sang Màn hình thanh toán của MOMO Điều hướng sang Màn hình thanh toán của MOMO mobile Passed

Khi tham gia lớp học, bạn cần chọn thanh toán để hoàn tất quá trình đăng ký Sau khi thanh toán thành công, hệ thống sẽ điều hướng bạn về màn hình chi tiết lớp học và thông báo về việc tham gia lớp học thành công trên cả thiết bị di động.

4.2 Tham gia lớp học thất bại

Bảng 90 Testcase Tham gia lớp học thất bại

Tham gia lớp học Test Case ID IL_02

Tham gia lớp học thất bại Test Priority High

Prerequisite Đã đăng nhập vào hệ thống và điều hướng sang màn hình Trang chủ

1 Chọn icon thứ 2 trên thanh bottom navigation Điều hướng sang màn hình lớp học Điều hướng sang màn hình lớp học mobile Passed

2 Chọn lớp học trên lớp học đề xuất Điều hướng sang trang chi tiết lớp học Điều hướng sang trang chi tiết lớp học mobile Passed

Hiển thị thông báo có muốn tham gia lớp học

Hiển thị thông báo có muốn tham gia lớp học mobile Passed

“Đồng ý” Điều hướng sang Màn hình thanh toán của MOMO Điều hướng sang Màn hình thanh toán của MOMO mobile Passed

Thông báo thất bại vì

Thông báo thất bại vì mobile Passed

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

5.2 Tham gia kiểm tra qua thông báo thất bại không đủ số dư không đủ số dư

Tham gia kiểm tra qua thông báo

Tham gia kiểm tra qua thông báo thành công

Prerequisite Đã đăng nhập vào hệ thống

Host-room bắt đầu bài kiểm tra

Màn hình phòng chờ kiểm tra

Màn hình phòng chờ kiểm tra mobile Passed

2 Làm bài kiểm tra khi hết thời gian chờ Điều hướng đến màn hình Làm bài kiểm tra Điều hướng đến màn hình Làm bài kiểm tra mobile Passed

Bảng 92 Testcase tham gia qua thông báo thất bại

5.3 Tham gia kiểm tra khi nhập sai mã

Bảng 93 Testcase tham gia thất bại khi nhập sai mã

Tham gia kiểm tra qua thông báo

Tham gia kiểm tra qua thông báo thất bại

Prerequisite Đã đăng nhập vào hệ thống

Host-room bắt đầu bài kiểm tra

Nhấn vào thông báo khi quá hạn kiểm tra

Thông báo đã hết hạn kiểm tra Điều hướng về màn hình Trang chủ mobile Fail

Tham gia kiểm tra qua nhập mã

Tham gia kiểm tra khi nhập mã thất bại

Prerequisite Đã đăng nhập vào hệ thống

Host-room bắt đầu bài kiểm tra

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

Kiểm tra hiển thị thông tin tài khoản

Prerequisite Đã đăng nhập vào hệ thống và màn hình điều hướng sang trang chủ

1 Chọn icon tài khoản cuối cùng trên thanh Điều hướng sang màn hình tài khoản Điều hướng sang màn hình tài khoản mobile Passed

1 Chọn icon thứ 1 trên thanh bottom navigation Điều hướng sang màn hình trang chủ Điều hướng sang màn hình trang chủ mobile Passed

2 Chọn icon góc trên phải màn hình

Xuất hiện dialog nhập mã phòng kiểm tra

Xuất hiện dialog nhập mã phòng kiểm tra mobile Passed

3 Nhập sai mã phòng kiểm tra

QWE56YU Tắt dialog và trả về màn hình trang chủ

Tắt dialog và trả về màn hình trang chủ mobile Passed

Khoá luận tốt nghiệp 152 bottom navigation

2 Chọn icon thông tin cá nhân góc trên trái màn hình

Màn hình thông tin cá nhân

Màn hình thông tin cá nhân mobile Passed

3 Kiểm tra hiển thị thông tin cá nhân

Thông tin cá nhân hiển thị đúng thông tin đã đăng kí

Thông tin cá nhân hiển thị đúng thông tin đã đăng kí mobile Passed Xem thông tin thành công

Chỉnh sửa thông tin tài khoản

7.1 Chỉnh sửa tên của bạn

Bảng 95 Tetscase chỉnh sửa tên tài khoản

Chỉnh sửa thông tin tài khoản Test Case ID CS_01

Chỉnh sửa tên của bạn Test Priority Vừa

Prerequisite Đã đăng nhập vào hệ thống và màn hình điều hướng sang trang chủ

1 Chọn icon tài khoản cuối cùng trên thanh Điều hướng sang màn hình tài khoản Điều hướng sang màn mobile Passed

Khoá luận tốt nghiệp 153 bottom navigation hình tài khoản

2 Chọn icon thông tin cá nhân góc trên trái màn hình

Màn hình thông tin cá nhân

Màn hình thông tin cá nhân mobile Passed

3 Chỉnh sửa họ của bạn bằng cách xóa và nhập lại

Hiển thị thông tin vừa nhập

Hiển thị thông tin vừa nhập mobile Passed

Để chỉnh sửa thông tin thành công trên màn hình tài khoản di động, bạn hãy nhấn vào biểu tượng hoàn thành ở góc trên bên phải màn hình, sau đó điều hướng về màn hình tài khoản Sau khi thực hiện các bước này, bạn sẽ được chuyển về màn hình tài khoản di động và thông tin của bạn sẽ được cập nhật thành công.

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

Chỉnh sửa số điện thoại Test Priority Vừa

Prerequisite Đã đăng nhập vào hệ thống và màn hình điều hướng sang trang chủ

1 Chọn icon tài khoản cuối cùng trên thanh Điều hướng sang màn Điều hướng sang mobile Passed

Khoá luận tốt nghiệp 154 bottom navigation hình tài khoản màn hình tài khoản

2 Chọn icon thông tin cá nhân góc trên trái màn hình

Màn hình thông tin cá nhân

Màn hình thông tin cá nhân mobile Passed

3 Chỉnh sửa số điện thoại bằng cách xóa và nhập lại

Hiển thị thông tin vừa nhập

Hiển thị thông tin vừa nhập mobile Passed

Để chỉnh sửa thông tin thành công, bạn hãy nhấn vào biểu tượng hoàn thành ở góc trên bên phải màn hình, sau đó điều hướng về màn hình tài khoản trên thiết bị di động của mình.

Bảng 97 Testcase chỉnh sửa giới thiệu

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

Prerequisite Đã đăng nhập vào hệ thống và màn hình điều hướng sang trang chủ

1 Chọn icon tài khoản cuối cùng trên thanh Điều hướng sang màn hình tài khoản Điều hướng sang màn mobile Passed

Khoá luận tốt nghiệp 155 bottom navigation hình tài khoản

2 Chọn icon thông tin cá nhân góc trên trái màn hình

Màn hình thông tin cá nhân

Màn hình thông tin cá nhân mobile Passed

3 Chỉnh sửa giới thiệu bằng cách xóa và nhập lại

Hiển thị thông tin vừa nhập

Hiển thị thông tin vừa nhập mobile Passed

Để chỉnh sửa thông tin thành công, bạn cần nhấn vào biểu tượng hoàn thành ở góc trên bên phải màn hình, sau đó điều hướng về màn hình tài khoản trên thiết bị di động của mì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

Kiểm tra hiển thị thông tin lớp học

Prerequisite Đã đăng nhập vào hệ thống và màn hình điều hướng sang trang chủ

2 trên thanh bottom navigation Điều hướng sang màn hình lớp học Điều hướng sang màn hình lớp học mobile Passed

2 Click vào một lớp học có trên hệ thống

Màn hình chi tiết lớp học

Màn hình chi tiết lớp học mobile Passed

3 Click vào icon thông tin góc trên bên phải màn hình

Hiển thị các lựa chọn để xem các thông tin lớp học

Hiển thị các lựa chọn để xem các thông tin lớp học mobile Passed Xem thông tin thành công

Điểm danh

ID Điểm danh Test Case ID LH_01

Description Điểm danh thành công Test Priority Vừa

Prerequisite Đã đăng nhập vào hệ thống và màn hình điều hướng sang trang chủ

1 Chọn icon thời gian thứ

4 trên thanh Điều hướng sang màn hình lịch Điều hướng sang màn hình lịch mobile Passed

Khoá luận tốt nghiệp 157 bottom navigation

2 Nhấn vào ngày có thông báo điểm danh

Hiển thị thông báo điểm danh

Hiển thị thông báo điểm danh mobile Passed

3 Click vào icon bàn tay trên thông báo

Thông báo chuyển màu, điểm danh thành công

Thông báo chuyển màu, điểm danh thành công mobile Passed Điểm danh thành công

Nộp bài tập

Bảng 100 Testcase nộp bài tập

Nộp bài tập Test Case ID LH_01

Nộp bài tập thành công Test Priority Vừa

Prerequisite Đã đăng nhập vào hệ thống và màn hình điều hướng sang trang chủ

1 Chọn bài blog có thông báo nộp bài tập

Hiển thị màn hình chọn file

Hiển thị màn hình chọn file mobile Passed

2 Chọn file bài tập cần nộp

Màn hình hiển thị tên file vừa chọn

Màn hình hiển thị tên file vừa chọn mobile Passed

Sau khi nhấn nộp bài, hệ thống sẽ điều hướng về màn hình chính và tình trạng sẽ chuyển từ "Chưa nộp" sang "Tên file" trên thiết bị di động, đồng thời hiển thị trạng thái "Passed" để xác nhận việc nộp bài thành công.

Ngày đăng: 28/12/2023, 18:50

w