đồ án 2 ứng dụng xây dựng nền tảng học tập dựa trên trò chơi trực tuyến nhiều người chơi

HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỖ THÀNH ĐẠT - 20521163 KIỀU BÁ DƯƠNG - 20520990 ĐỒ ÁN 2 ỨNG DỤNG XÂY DỰNG NỀN TẢNG HỌC TẬP DỰA TRÊN TRÒ CHƠI TRỰC T

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỖ THÀNH ĐẠT - 20521163 KIỀU BÁ DƯƠNG - 20520990

ĐỒ ÁN 2

ỨNG DỤNG XÂY DỰNG NỀN TẢNG HỌC TẬP DỰA TRÊN TRÒ CHƠI TRỰC TUYẾN NHIỀU NGƯỜI CHƠI

Application for building a learning platform based on multiplayer

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỖ THÀNH ĐẠT - 20521163 KIỀU BÁ DƯƠNG - 20520990

ĐỒ ÁN 2

ỨNG DỤNG XÂY DỰNG NỀN TẢNG HỌC TẬP DỰA TRÊN TRÒ CHƠI TRỰC TUYẾN NHIỀU NGƯỜI CHƠI

Application for building a learning platform based on multiplayer

LỜI CẢM ƠN

Nhóm chúng em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đến thầyTrần Anh Dũng đã hướng dẫn, tạo điều kiện cho nhóm chúng em hoàn thành đồ ánmôn Đồ án 2

Trong vòng 16 tuần, qua các buổi học, nhờ sự chỉ dẫn nhiệt tình của thầy,chúng em đã tiếp thu được những kiến thức quan trọng, bổ ích cùng những góp ýchân thành để có thể làm được một đồ án hoàn chỉnh Trong khoảng thời gian thựchiện đồ án, chúng em đã học hỏi thêm được nhiều kiến thức, kinh nghiệm, biết đượcquy trình để tạo ra một sản phẩm phần mềm

Bên cạnh đó, chúng em xin cảm ơn các bạn bè trong lớp đã động viên, thảoluận và góp ý cho nhóm đồng thời đã khơi thêm nguồn động lực cho nhóm trongsuốt quá trình đầy khó khăn

Mặc dù đã cố gắng hoàn thành báo cáo với tất cả nỗ lực song báo cáo của nhómchúng em chắc chắn không tránh khỏi những thiếu sót, chúng em rất mong nhậnđược sự thông cảm và góp ý chân thành từ thầy

Chúng em xin chân thành cảm ơn Xin chúc những điều tốt đẹp nhất sẽ luônđồng hành cùng mọi người

Thành phố Hồ Chí Minh, 31 tháng 12 năm 2023

Sinh viên

ĐỖ THÀNH ĐẠT

KIỀU BÁ DƯƠNG

MỤC LỤC

LỜI CẢM ƠN 1

MỤC LỤC 2

DANH MỤC HÌNH 6

DANH MỤC BẢNG 7

DANH MỤC TỪ VIẾT TẮT 9

TÓM TẮT ĐỒ ÁN 10

ĐỀ CƯƠNG CHI TIẾT 12

NỘI DUNG ĐỒ ÁN 19

CHƯƠNG 1: MỞ ĐẦU 19

1.1 Lý do chọn đề tài 19

1.2 Mục đích nghiên cứu 20

1.3 Đối tượng nghiên cứu 21

1.3.1 Các công nghệ nghiên cứu: 21

1.3.2 Đối tượng sử dụng đề tài hướng đến: 21

1.4 Phạm vi nghiên cứu 21

1.4.1 Phạm vi môi trường: 21

1.4.2 Phạm vi chức năng: 21

1.5 Mục tiêu đề tài 22

CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 24

2.1 Golang 24

2.2 Angular Framework 25

2.3 Material UI 26

2.4 Postgresql 27

2.5 Redis 28

2.6 Kafka 30

CHƯƠNG 3: PHÂN TÍCH, THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG 32

3.1 Xác định và mô hình hóa yêu cầu phần mềm 32

3.1.1 Phân loại các yêu cầu phần mềm 32

3.1.2 Sơ đồ luồng dữ liệu cho từng loại yêu cầu nghiệp vụ 33

3.2 Use Case Diagram 37

3.2.1 Sơ đồ Use case 37

3.2.2 Danh sách Actors 37

3.2.3 Danh sách các Use case 38

3.2.4 Đặc tả Use case 38

Đặc tả Use case Xác thực người dùng 38

Đặc tả Use case Tạo trò chơi 38

Đặc tả Use case Tổ chức trò chơi 38

Đặc tả Use case Quản lý bộ câu hỏi 39

Đặc tả Use case xem thống kê 39

3.3 Class Diagram 40

3.4 Kiến trúc hệ thống tổng quan: 41

3.5 Thiết kế cơ sở dữ liệu 42

3.5.1 Sơ đồ các bảng 42

3.5.2 Danh sách các bảng dữ liệu 42

3.5.3 Mô tả chi tiết các bảng dữ liệu 43

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 48

4.1 Danh sách các màn hình 48

4.2 Mô tả chi tiết các màn hình 50

4.2.1 Màn hình Login 50

4.2.2 Màn hình Home 51

4.2.3 Màn hình Store 52

4.2.4 Màn hình Template Detail 53

4.2.5 Màn hình Reports 54

4.2.6 Màn hình Report detail - summary 56

4.2.7 Màn hình Report detail-players 57

4.2.8 Màn hình Report detail-questions 58

4.2.9 Màn hình Report question-detail 59

4.2.10 Màn hình Edit Template detail 60

4.2.11 Màn hình thêm câu hỏi 62

4.2.12 Màn hình Save Quiz 62

4.2.13 Màn hình chờ (Host) 64

4.2.14 Màn hình nhập mã của user 65

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 65

5.1 Kiểm thử phía ứng dụng 65

5.1.1 Môi trường kiểm thử 65

5.1.2 Kết quả kiểm thử 65

CHƯƠNG 6: TỔNG KẾT 67

6.1 Kết quả đạt được 67

6.2 Hạn chế 67

6.3 Hướng phát triển 67

TÀI LIỆU THAM KHẢO 68

DANH MỤC HÌNH

Hình 2.1: Golang 26

Hình 2.2: Angular framework 27

Hình 2.3: Material UI 28

Hình 2.4: Postgresql 29

Hình 2.5: Redis 30

Hình 2.6: Apache Kafka 32

Hình 3.1: Sơ đồ kiến trúc hệ thống tổng quan 34

Hình 3.2: Sơ đồ liên kết các màn hình 35

Hình 4.1: Sơ đồ liên kết các màn hình 41

Hình 4.2: Màn hình Login 44

Hình 4.3: Màn hình Home 45

Hình 4.4: Màn hình Store 47

Hình 4.5: Màn hình Template detail 48

Hình 4.6: Màn hình Report 49

Hình 4.7: Màn hình Report detail-summary 51

Hình 4.8: Màn hình Report detail-players 52

Hình 4.9: Màn hình Report detail-questions 53

Hình 4.10: Màn hình Report question-detail 55

Hình 4.11: Màn hình Quiz 56

Hình 4.12: Màn hình thêm câu hỏi 57

Hình 4.13: Màn hình Save Quiz 58

Hình 4.14: Màn hình Settings 59

DANH MỤC BẢNG

Bảng 3.1: Danh sách các bảng 33

Bảng 3.2: Mô tả bảng users 33

Bảng 3.3: Mô tả bảng templates 34

Bảng 3.4: Mô tả bảng questions 34

Bảng 3.5: Mô tả bảng games 35

Bảng 3.6: Mô tả bảng players 36

Bảng 3.7: Mô tả bảng game_questions 37

Bảng 3.8: Mô tả bảng answers 37

Bảng 4.1: Danh sách các màn hình 41

Bảng 4.2: Mô tả đối tượng trên màn hình Login 42

Bảng 4.3: Biến cố và xử lý trên màn hình Login 42

Bảng 4.4: Mô tả đối tượng trên màn hình Home 43

Bảng 4.5: Biến cố và xử lý trên màn hình Home 43

Bảng 4.6: Mô tả đối tượng trên màn hình Store 45

Bảng 4.7: Biến cố và xử lý trên màn hình Store 45

Bảng 4.8: Mô tả đối tượng trên màn hình Template detail 46

Bảng 4.9: Biến cố và xử lý trên màn hình Template detail 46

Bảng 4.10: Mô tả đối tượng trên màn hình Report 47

Bảng 4.11: Biến cố và xử lý trên màn hình Report 47

Bảng 4.12: Mô tả đối tượng trên màn hình Report detail-summary 49

Bảng 4.13: Mô tả đối tượng trên màn hình Report detail-players 49

Bảng 4.14: Biến cố và xử lý trên màn hình Report detail-players 50

Bảng 4.15: Mô tả đối tượng trên màn hình Report detail-questions 51

Bảng 4.16: Biến cố và xử lý trên màn hình Report detail-questions 51

Bảng 4.17: Mô tả đối tượng trên màn hình Quiz 54

Bảng 4.18: Mô tả đối tượng trên màn hình Review 54

Bảng 4.19: Mô tả đối tượng trên màn hình History 55

Bảng 4.20: Mô tả đối tượng trên màn hình Settings 56 Bảng 4.21: Biến cố và xử lý trên màn hình Settings 56 Bảng 5.1: Kết quả kiểm thử 57

Đề tài được bắt đầu từ việc tìm hiểu thực trạng, đưa ra các vấn đề còn tồn đọng hoặc

có thể cải thiện Xác định mục tiêu, phạm vi của đề tài cũng như các chức năng cần

có của hệ thống Ngoài việc xử lý các nghiệp vụ cho hệ thống, nhóm cũng đã tìmhiểu, so sánh và lựa chọn được các công nghệ mới và phù hợp giúp nâng cao trảinghiệm người dùng, tối ưu chi phí phát triển và triển khai

Nhờ việc phân tích các yêu cầu rõ ràng, thời gian phát triển ngắn và các yêu cầu,tính năng ít thay đổi, trong quá trình phát triển đề tài đã sử dụng mô hình Aigle choviệc xây dựng hệ thống Kết quả thu được trong giai đoạn thiết kế như kiến trúc hệthống, cơ sở dữ liệu, giao diện được thể hiện bằng sơ đồ người dùng, sơ đồ tuần tự

và bản thiết kế sử dụng công cụ Figma, Draw.io, StartUML Trong giai đoạn thựchiện, client và server được phát triển song song sử dụng React Library, FrameworkAngular cho client và Golang, Gin, Gorm , Postgresql, Kafka, Redis cho server,công cụ phát triển Visual Studio Code, Android Studio cùng công cụ quản lý côngviệc Notion Công việc kiểm thử unit test được thực hiện xuyên suốt quá trình pháttriển và được kiểm thử tích hợp ở cuối giai đoạn Trong giai đoạn vận hành, server

đã được triển khai lên máy chủ AWS, hoàn toàn có thể truy cập dữ liệu thông quaapi từ bất cứ thiết bị nào gửi yêu cầu có chứa trường xác thực dữ liệu hợp lệ

Phần cuối cùng của khoá luận là trình bày kết quả đã thực hiện lên cuốn báo cáo,đưa ra kết luận và hướng phát triển cho hệ thống trong tương lai

Nội dung khoá luận được trình bày trong 7 chương:

- Chương 01: Mở đầu

Trình bày sơ bộ về thực trạng, nhu cầu thực tế Xác định mục tiêu và phạm vi đề tài

- Chương 02: Kiến thức nền tảng

Giới thiệu, trình bày các kiến thức kỹ thuật, công nghệ mà nhóm sử dụng.

- Chương 03: Xây dựng hệ thống

Trình bày kiến trúc hệ thống và danh sách các hình, bảng thiết kế hệ thống, mô hìnhhoá và cơ sở dữ liệu

- Chương 4: Thiết kế giao diện người dùng

Trình bày chi tiết nội dung thiết kế giao diện ứng dụng

- Chương 5: Cài đặt và kiểm thử

Tổng quát kết quả kiểm thử của ứng dụng về cả hai phía client và server

- Chương 6: Tổng kết

Những kết quả đạt được sau khi kết thúc đồ án Những hạn chế, khó khăn trong quá trình phát triển đồ án và nêu ra hướng phát triển trong tương lai

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Xây dựng nền tảng học tập dựa trên trò chơi trực tuyến nhiều người chơi

2 Mục tiêu:

- Phát triển một nền tảng học tập trực tuyến đa người chơi dựa trên trò chơi

- Nghiên cứu và áp dụng các tính năng để tạo ra một môi trường học tập hấpdẫn và hiệu quả

- Tìm hiểu cách tích hợp trò chơi vào quá trình học tập trực tuyến để cải thiện trải nghiệm học tập

3 Phạm vi:

User (Người dùng):

- Chức năng nhập mã pin: Người dùng nhập mã pin để tham gia vào mộtphiên chơi cụ thể hoặc vào một phòng chơi đã tạo

- Chức năng waiting room (Phòng chờ): Sau khi nhập mã pin, người dùng sẽtham gia vào phòng chờ, nơi họ đợi cho đến khi tất cả người chơi khác đãsẵn sàng hoặc người tạo trò chơi bắt đầu.

- Chức năng playing game: Màn hình chính của trò chơi, nơi người dùngtham gia vào câu hỏi và thử thách trả lời đúng trong thời gian giới hạn

- Chức năng vinh danh: Sau khi kết thúc trò chơi, người dùng có thể xemđiểm số của họ và vị trí của họ trong danh sách xếp hạng

- Leaderboard (Bảng xếp hạng): Hiển thị danh sách các người chơi và điểm

số của họ trong phiên chơi hiện tại hoặc phiên chơi gần đây

- Chức năng feedback: Một phần của trò chơi mà người dùng có thể gửiphản hồi hoặc đánh giá về trò chơi sau khi chơi xong

Admin (Người tạo trò chơi):

- Khi host phòng chơi:

- Chức năng tham gia waiting room (Phòng chờ): Nơi người tạo trò chơi cóthể kiểm soát việc tham gia của người chơi và bắt đầu trò chơi

- Chức năng playing game: Nơi người tạo trò chơi điều hành việc chơi tròchơi và hiển thị câu hỏi và phản hồi

- Chức năng vinh danh: Hiển thị kết quả cuối cùng của phiên chơi

- Leaderboard (Bảng xếp hạng): Giúp người tạo trò chơi theo dõi điểm sốcủa người chơi trong thời gian thực hoặc sau khi trò chơi kết thúc

- Chức năng xem feedback: Cho phép người tạo trò chơi xem phản hồi từngười chơi sau khi trò chơi kết thúc

- Khi ở trang quản lý (Trang quản lý):

- Chức năng quản lý quizzes: Nơi người tạo trò chơi có thể tạo/chỉnh sửa bộcâu hỏi hoặc bài kiểm tra mới

Chức năng report: Hiển thị thông tin về các bài kiểm tra đã tạo, người chơi thamgia, câu hỏi và nhiều thông tin khác liên quan đến quản lý trò chơi

4 Phạm vi chức năng:

Tất cả mọi người có nhu cầu sử dụng.

5 Phương pháp thực hiện:

Phương pháp làm việc:

- Làm việc nhóm 2 thành viên thông qua cả 2 phương thức online và offlinedưới sự hướng dẫn của giảng viên hướng dẫn

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

- Phân tích nhu cầu sử dụng của đối tượng người dùng

- Nghiên cứu tài liệu các công nghệ liên quan

Phương pháp công nghệ:

- Tìm hiểu tích hợp khuyến nghị trên ứng dụng mobile

- Xây dựng giao diện mobile để người dùng có thể tương tác với ứng dụng

- Tìm hiểu về hệ thống khuyến nghị

- Quản lý source code thông qua Github

- Sử dụng Google doc, Office 365 Word… để quản lý tiến trình và tài liệu

- System Architecture: Microserivce

7 Kết quả mong đợi:

- Nắm bắt và áp dụng được công nghệ mới để xây dựng hoàn thiện sản phẩm của đề tài

- Sử dụng websocket, transaction, để thực hiện một số chức năng cần realtime

- Xây dựng một hệ thống có thể đáp ứng được số lượng người dùng lớn.

- Ứng dụng hoạt động ổn định, có thể xử lý thông tin nhanh chóng…

8 Hướng phát triển của đề tài:

- Thêm các tính năng mới với trò chơi, thể loại game, thể loại câu hỏi

9 Kế hoạch làm việc:

Thời gian thực hiện từ ngày 23/9/2023 đến ngày 31/12/2023

Sprint 1 23/9/2023 – 5/10/2023  Thiết kế sơ đồ Usecase cho

realtime

 Thiết kế xây dựng màn hình nhập mã pin phòng chơi

 Thiết kế xây dựng màn hình Waiting room

 Thiết kế xây dựng màn hình home page (User)

 Thiết kế xây dựng chức năng đăng nhập, đăng ký xác thực người dùng (Admin page)

 Thiết kế xây dựng trang Home sau login Sprint 3 20/10/2023 – 10/11/2023  Thiết kế xây dựng chức năng playing game

cho cả Host và User

 Tích hợp websocket xây dựng realtime cho chức năng playing game

 Thiết kế xây dựng chức năng quản lý các Quizzes

 Thiết kế xây dựng UI các chức năng thêm, xoá, sửa các quizz

Sprint 4 11/11/2023 – 24/11/2023  Thiết kế xây dựng chức năng

vinh danh top 3 (kết quả) và danh sách các player được xếp hạng

 Thiết kế xây dựng chức năng

Leaderboard trong quá trình chơi

 Thiết kế xây dựng chức năng

Feedback sau khi chơi

 Thiết kế xây dựng chức năng

Report (giúp xem lại các game

đã tạo trong quá khứ leaderboard, )

Sprint 5 25/11/2023 – 8/12/2023

 Review lại hệ thống.

 Lên kế hoạch cho buổi báo cáo.

 Deloy Client bằng Vercel

 Testing toàn bộ feature mới và sửa chữa nếu có.

 Testing toàn bộ feature cũ và sửa lỗi nếu có.

Sprint 6 9/12/2023 – 31/12/2023  Viết tài liệu báo cáo.

 Vẽ sơ đồ cho báo cáo.

 Viết tài liệu báo cáo.

 Chuẩn bị slide thuyết trình.

 Tiến hành báo cáo

10 Phân công công việc:

Công việc chung Tìm hiểu công nghệ

Phân tích yêu cầu Xây dựng model Kiểm thử ứng dụng Triển khai ứng dụng Chuẩn bị tài liệu, viết báo cáo

Công việc cá nhân

Lập trình Front-end.

Phân tích yêu cầu

Tp.Hồ Chí Minh, ngày 31 tháng 12 năm 2023

NỘI DUNG ĐỒ ÁN

CHƯƠNG 1: MỞ ĐẦU

3.1 Lý do chọn đề tài

Quá trình học tập trực tuyến không chỉ là một trải nghiệm kiến thức mà còn

là một hành trình tìm kiếm sự hứng thú và sự thách thức Điều này đặt ra câu hỏi vềcách làm cho quá trình này trở nên thú vị và hiệu quả hơn, đặc biệt là khi kết hợpvới yếu tố giải trí như trò chơi trực tuyến

Hứng thú cá nhân trong việc kết hợp trò chơi và học tập trực tuyến không chỉ

là một nguyên nhân cá nhân mà còn là một xu hướng ngày càng được đánh giá caotrong giáo dục hiện đại Việc sử dụng trò chơi như một công cụ học tập có thể tạo ramột môi trường học tập tương tác, kích thích tư duy sáng tạo và khám phá kiếnthức

Sự tăng cường trong việc sử dụng trò chơi trong giáo dục không chỉ là mộtphương tiện giáo dục thay thế mà còn là một xu hướng đang phát triển mạnh mẽ.Điều này đặt ra nhu cầu nghiên cứu và phát triển nền tảng đa người chơi, nơi mà sựtương tác giữa các học viên không chỉ là một phần quan trọng mà còn được coi làchìa khóa để thúc đẩy hiệu suất học tập

Với mục tiêu này, việc tạo ra một nền tảng học tập trực tuyến dựa trên tròchơi, đặc biệt là nền tảng đa người chơi, trở thành một điểm nhấn quan trọng trongnghiên cứu giáo dục và công nghệ Sự kết hợp giữa giáo dục và giải trí không chỉmang lại niềm vui và sự hứng thú cho người học mà còn mở ra một hướng mớitrong việc tối ưu hóa quá trình học tập và tạo ra cộng đồng học tập tích cực và đầysáng tạo

3.2 Mục đích nghiên cứu

Mục tiêu chính của đề tài là phát triển một nền tảng học tập trực tuyến đa người chơi dựa trên trò chơi, nhằm tạo ra một môi trường học tập độc đáo và thuận lợi choviệc tương tác giữa người học Để đạt được mục tiêu này, nghiên cứu sẽ được tập trung vào các khía cạnh sau:

- Tính Năng Tạo Nên Môi Trường Học Tập Hấp Dẫn:

o Nghiên cứu và phát triển các tính năng đặc sắc nhằm tạo ra một môitrường học tập đa người chơi hấp dẫn

o Khảo sát ý kiến của người học để hiểu rõ mong muốn và nhu cầu của

họ trong quá trình học tập trực tuyến

o Xây dựng tính năng tương tác nhóm và cạnh tranh để khuyến khích sựtích cực và sáng tạo

- Hợp Trò Chơi để Cải Thiện Trải Nghiệm Học Tập:

o Nghiên cứu cách tích hợp trò chơi một cách có ý nghĩa vào quá trìnhhọc tập trực tuyến

o Phát triển trò chơi có sự liên quan chặt chẽ với nội dung học tập đểtăng cường sự hiểu biết và ứng dụng kiến thức

o Tìm hiểu về các phương pháp thiết kế trò chơi giáo dục để tối ưu hóaviệc giảng dạy và hấp dẫn người học

- Cải Thiện Trải Nghiệm Học Tập Trực Tuyến:

o Tìm hiểu về các yếu tố ảnh hưởng đến trải nghiệm người dùng trongmôi trường học tập trực tuyến

o Phát triển các tính năng tương tác, giao diện người dùng thân thiện và

dễ sử dụng để tối ưu hóa trải nghiệm người học

o Nghiên cứu về tính ổn định và đáng tin cậy của nền tảng để đảm bảo

sự liên tục và hiệu quả của quá trình học tập

3.3 Đối tượng nghiên cứu

3.3.2 Các công nghệ nghiên cứu:

- Đối với thiết kế hệ thống:

▫ Repository patten

▫ Kết nối và trao đổi giữa client và server thông qua RESTfull API

▫ Microservice

- Đối với Database: Postgresql

- Đối với Web Application:

3.3.3 Đối tượng sử dụng đề tài hướng đến:

Tất cả mọi người có nhu cầu

3.4 Phạm vi nghiên cứu

3.4.2 Phạm vi môi trường:

Ứng dụng di động chạy trên nền tảng web

3.4.3 Phạm vi chức năng:

- Đối với user

o Chức năng nhập mã pin: Người dùng nhập mã pin để tham gia vàomột phiên chơi cụ thể hoặc vào một phòng chơi đã tạo

o Chức năng waiting room (Phòng chờ): Sau khi nhập mã pin, ngườidùng sẽ tham gia vào phòng chờ, nơi họ đợi cho đến khi tất cả ngườichơi khác đã sẵn sàng hoặc người tạo trò chơi bắt đầu

o Chức năng playing game: Màn hình chính của trò chơi, nơi ngườidùng tham gia vào câu hỏi và thử thách trả lời đúng trong thời giangiới hạn.

o Chức năng vinh danh: Sau khi kết thúc trò chơi, người dùng có thểxem điểm số của họ và vị trí của họ trong danh sách xếp hạng

o Leaderboard (Bảng xếp hạng): Hiển thị danh sách các người chơi vàđiểm số của họ trong phiên chơi hiện tại hoặc phiên chơi gần đây

o Chức năng feedback: Một phần của trò chơi mà người dùng có thể gửiphản hồi hoặc đánh giá về trò chơi sau khi chơi xong

- Đối với admin

 Khi host phòng chơi:

o Chức năng tham gia waiting room (Phòng chờ): Nơi người tạo trò chơi có thểkiểm soát việc tham gia của người chơi và bắt đầu trò chơi

o Chức năng playing game: Nơi người tạo trò chơi điều hành việc chơi trò chơi

và hiển thị câu hỏi và phản hồi

o Chức năng vinh danh: Hiển thị kết quả cuối cùng của phiên chơi

o Leaderboard (Bảng xếp hạng): Giúp người tạo trò chơi theo dõi điểm số củangười chơi trong thời gian thực hoặc sau khi trò chơi kết thúc

o Chức năng xem feedback: Cho phép người tạo trò chơi xem phản hồi từngười chơi sau khi trò chơi kết thúc

 Khi ở trang quản lý (Trang quản lý):

o Chức năng quản lý quizzes: Nơi người tạo trò chơi có thể tạo/chỉnh sửa bộcâu hỏi hoặc bài kiểm tra mới

o Chức năng report: Hiển thị thông tin về các bài kiểm tra đã tạo, ngườichơi tham gia, câu hỏi và nhiều thông tin khác liên quan đến quản lýtrò chơi

3.5 Mục tiêu đề tài

 Phát triển một nền tảng học tập trực tuyến đa người chơi dựa trên trò chơi

 Nghiên cứu và áp dụng các tính năng để tạo ra một môi trường học tập hấp dẫn và hiệu quả.

 Tìm hiểu cách tích hợp trò chơi vào quá trình học tập trực tuyến để cải thiệntrải nghiệm học tập

Một số đặc điểm chính của Golang bao gồm:

o Hiệu suất cao: Go được tối ưu hóa để đạt được hiệu suất cao, đặc biệt

là trong các ứng dụng đòi hỏi xử lý đa nhiệm và đồng thời nhiều kếtnối

o Tự động quản lý bộ nhớ: Go có bộ thu gom rác tự động, giúp giảm áplực cho lập trình viên khi quản lý bộ nhớ

o Cú pháp đơn giản: Go được thiết kế với cú pháp sạch sẽ và dễ đọc,giúp tăng cường sự hiểu và duy trì mã nguồn

o Xử lý đồng thời (concurrency): Go cung cấp các công cụ mạnh mẽ để

xử lý đồng thời, giúp dễ dàng xây dựng các hệ thống chạy đồng thờihiệu quả

o Hệ sinh thái mạnh mẽ: Go đi kèm với một hệ sinh thái phong phú, baogồm các thư viện và công cụ hỗ trợ việc phát triển ứng dụng

Go thường được sử dụng trong nhiều lĩnh vực như phát triển web, dịch vụ backend, công cụ hệ thống, và các ứng dụng có yêu cầu về hiệu suất và đồng thời nhiều kết nối.

4.2 Angular Framework

Hình 2.2: Angular framework

Angular là một framework phát triển ứng dụng web động được phát triển và duy trì bởi Google Angular giúp lập trình viên xây dựng ứng dụng web động, đa trang và

đa mô-đun một cách dễ dàng và hiệu quả Nó cung cấp một cơ sở hạ tầng mạnh mẽ

và nhiều tính năng để phát triển ứng dụng phức tạp

Dưới đây là một số đặc điểm quan trọng của Angular:

o Mô hình MVVM (Model-View-ViewModel): Angular sử dụng mô hình

MVVM để phân chia rõ ràng giữa dữ liệu (Model), giao diện người dùng(View) và logic điều khiển (ViewModel)

o Two-Way Data Binding: Angular cung cấp tính năng two-way data binding,

giúp đồng bộ hóa tự động giữa dữ liệu và giao diện người dùng mà khôngcần phải viết nhiều mã nguồn

o Dependency Injection: Angular có hệ thống Dependency Injection mạnh

mẽ, giúp quản lý và chia sẻ các đối tượng và dịch vụ trong ứng dụng

o Thư viện hỗ trợ: Angular đi kèm với nhiều thư viện và công cụ hỗ trợ như

Angular CLI (Command Line Interface) để tạo và quản lý dự án, RxJS để xử

lý bất đồng bộ, và nhiều thư viện khác

o Module và Routing: Angular sử dụng khái niệm module để tạo ra các phần

độc lập của ứng dụng và hệ thống routing để quản lý điều hướng giữa cáctrang

o Testing: Angular hỗ trợ việc kiểm thử tự động với các công cụ như Jasmine

và Karma, giúp đảm bảo chất lượng của mã nguồn

Angular được sử dụng rộng rãi trong cộng đồng phát triển web để xây dựng các ứngdụng động, đặc biệt là các ứng dụng doanh nghiệp và các dự án lớn

4.3 Material UI

Hình 2.3: Material UI

Material-UI là một thư viện giao diện người dùng (UI) cho React, được xây dựng dựa trên nguyên tắc thiết kế của Google là Material Design Material Design là một hướng dẫn thiết kế của Google tập trung vào việc tạo ra giao diện người dùng đẹp mắt, có cấu trúc rõ ràng, và dễ sử dụng trên nhiều nền tảng và thiết bị khác nhau.Material-UI giúp lập trình viên React xây dựng giao diện người dùng theo phong cách Material Design một cách dễ dàng, nhanh chóng và linh hoạt Thư viện này cung cấp một loạt các thành phần (components) UI, chẳng hạn như nút, thanh điều hướng, hộp thoại, ô đầu vào và nhiều thành phần khác, đã được thiết kế theo kiểu Material Design

Dưới đây là một số đặc điểm của Material-UI:

o Thành phần Thiết kế: Material-UI cung cấp một bộ sưu tập các thành phầngiao diện người dùng, giúp xây dựng giao diện đồng nhất và đẹp mắt

o Tích hợp tốt với React: Material-UI được xây dựng đặc biệt cho React, điềunày có nghĩa là nó hoạt động tốt trong môi trường React và tận dụng lợi íchcủa React để tạo ra ứng dụng hiệu quả.

o Customization: Material-UI cho phép lập trình viên tùy chỉnh giao diện bằngcách cung cấp các prop và API để điều chỉnh các thành phần theo nhu cầu cụthể của dự án

o Thư viện Icon: Material-UI đi kèm với một bộ biểu tượng (icons) tích hợp,giúp bạn dễ dàng thêm các biểu tượng vào ứng dụng của mình

o Hỗ trợ CSS-in-JS: Material-UI hỗ trợ việc sử dụng CSS-in-JS, giúp quản lýCSS dễ dàng và linh hoạt hơn

Material-UI đã trở thành một trong những thư viện phổ biến nhất khi xây dựng giao diện người dùng cho ứng dụng React, và nó được sử dụng rộng rãi trong cộng đồng phát triển web

4.4 Postgresql

Hình 2.4: Postgresql

PostgreSQL (viết tắt từ "Postgres" - "Structured Query Language") là một hệ quản trị cơ sở dữ liệu (DBMS) mã nguồn mở, mạnh mẽ và có khả năng mở rộng Nó

được thiết kế để hỗ trợ nhiều loại ứng dụng, từ các ứng dụng nhỏ đến các hệ thống thông tin doanh nghiệp lớn và phức tạp.

Dưới đây là một số đặc điểm quan trọng của PostgreSQL:

 Mã nguồn mở: PostgreSQL là một dự án mã nguồn mở, điều này có nghĩa là

mã nguồn của nó có sẵn cho cộng đồng phát triển để xem xét, cải thiện và sửdụng mà không cần phải trả bất kỳ chi phí nào

 Khả năng mở rộng: PostgreSQL hỗ trợ nhiều phương pháp mở rộng, baogồm phân vùng dữ liệu, nhóm dữ liệu và chế độ sao chép, giúp nó phù hợpvới các ứng dụng cần xử lý lượng dữ liệu lớn và tăng cường khả năng chịutải

 Tiêu chuẩn SQL: PostgreSQL tuân theo chuẩn SQL ANSI, điều này giúpđảm bảo tính tương thích và chuyển đổi dễ dàng giữa các hệ quản trị cơ sở

dữ liệu khác

 Hỗ trợ đa loại dữ liệu: Ngoài các kiểu dữ liệu cơ bản như số nguyên vàchuỗi, PostgreSQL còn hỗ trợ các kiểu dữ liệu phức tạp như mảng, JSON,hình học và nhiều kiểu dữ liệu tùy chỉnh

 Tính bền vững và an toàn: PostgreSQL có các tính năng như giao dịch,nguyên tắc ACID (Atomicity, Consistency, Isolation, Durability), và các cơchế bảo mật mạnh mẽ để đảm bảo tính an toàn và bền vững của dữ liệu

 Hệ thống mở rộng bằng tiện ích mở rộng: PostgreSQL cho phép người dùng

mở rộng chức năng của nó thông qua việc cài đặt tiện ích mở rộng, cung cấplinh hoạt cho các yêu cầu cụ thể của dự án

PostgreSQL là một lựa chọn phổ biến trong cộng đồng phát triển và được sử dụng rộng rãi cho các ứng dụng web, doanh nghiệp, và các dự án cơ sở dữ liệu lớn

4.5 Redis

Hình 2.5: Redis

Redis là một hệ thống cơ sở dữ liệu cấp độ server được lưu trữ trong bộ nhớ(in-memory database), được phát triển để hỗ trợ việc lưu trữ và truy xuất dữ liệunhanh chóng Tên "Redis" là viết tắt của "Remote Dictionary Server" (Server từ xadành cho từ điển), nhưng hiện tại nó thường được hiểu là "REmote DIctionaryServer" Redis không chỉ là một cơ sở dữ liệu, mà còn là một hệ thống lưu trữcache, message broker, và nhiều ứng dụng khác

Dưới đây là một số đặc điểm quan trọng của Redis:

o Cơ sở dữ liệu in-memory: Redis lưu trữ toàn bộ dữ liệu trong bộ nhớ,điều này giúp nó có thể cung cấp các thao tác đọc và ghi rất nhanh

o Dữ liệu có cấu trúc: Redis hỗ trợ nhiều kiểu dữ liệu khác nhau nhưchuỗi (strings), bản đồ (hashes), danh sách (lists), tập hợp (sets), vàtập hợp được sắp xếp (sorted sets)

o Hỗ trợ các thao tác atomic: Redis cung cấp các thao tác atomic trên dữliệu, điều này đồng nghĩa với việc một thao tác đơn lẻ sẽ được thựchiện hoặc không được thực hiện, không có trạng thái trung gian nào

o Replication: Redis hỗ trợ chế độ sao chép dữ liệu, giúp đảm bảo sẵnsàng và độ tin cậy cao

o Partitioning: Redis có khả năng phân mảnh dữ liệu để xử lý lượngtruy cập lớn và tăng khả năng mở rộng

o Pub/Sub (Publish/Subscribe): Redis cung cấp mô hình

"Publish/Subscribe" cho phép các thành phần khác nhau trong hệthống giao tiếp với nhau thông qua các kênh

o Lua scripting: Redis hỗ trợ việc sử dụng các đoạn mã Lua để thựchiện các thao tác phức tạp trong một lệnh duy nhất

Redis thường được sử dụng trong các ứng dụng yêu cầu hiệu suất cao, độ trễthấp, và khả năng mở rộng tốt như các hệ thống cache, hàng đợi thông điệp, và lưutrữ thông tin phi tuyến tính

Dưới đây là một số đặc điểm chính của Apache Kafka:

o Publish-Subscribe Model: Kafka triển khai mô hình "publish-subscribe",nơi các ứng dụng có thể sản xuất (publish) và tiêu thụ (subscribe) cácthông điệp trên các chủ đề (topics) cụ thể

o Phân tán và Mở rộng: Kafka được thiết kế để chạy trên nhiều nút và cókhả năng mở rộng linh hoạt, giúp xử lý lưu lượng dữ liệu lớn và đồng thờinhiều kết nối.

o Lưu trữ Dữ liệu: Dữ liệu trong Kafka được lưu trữ theo thời gian và có thểduyệt lại, điều này giúp các ứng dụng có thể đọc dữ liệu từ quá khứ

o Bảo đảm Tin cậy: Kafka đảm bảo tính bền vững của dữ liệu bằng cáchrepli các thông điệp trên nhiều nút Người ta có thể cấu hình mức độ đồngnhất (consistency) và tính khả dụng (availability) dựa trên yêu cầu cụ thểcủa hệ thống

o Thực hiện Streams: Kafka Streams là một thư viện tích hợp trong Kafkacho phép xử lý sự kiện trong thời gian thực và xây dựng các ứng dụng xử

lý dòng sự kiện

o Kết hợp với Hệ thống Phân tích: Kafka thường được kết hợp với các hệthống phân tích như Apache Flink, Apache Storm, hoặc Spark Streaming

để xử lý và phân tích dữ liệu streaming

Kafka đã trở thành một phần quan trọng trong các kiến trúc hệ thống phứctạp, nơi nó giúp xử lý và truyền tải lưu lượng lớn của các sự kiện và thông điệp giữacác thành phần khác nhau của hệ thống

CHƯƠNG 5: PHÂN TÍCH, THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG

5.1 Xác định và mô hình hóa yêu cầu phần mềm

5.1.2 Phân loại các yêu cầu phần mềm

a Yêu cầu nghiệp vụ

 Lưu trữ: Lập nhóm câu hỏi, lập câu hỏi , lập trò chơi, lập câu trả lời

 Tra cứu: Tra cứu nhóm câu hỏi, tra cứu câu hỏi, tra cứu trò chơi, tra cứuleaderboard, tra cứu xếp hạng hiện tại, tra cứu người chơi

 Kết xuất: Xuất thống kê trò chơi, Xuất kết qủa trò chơi

b Yêu cầu chất lượng

 Tính tiến hóa: Thay đổi quy định, phân quyền cho người dùng

câu hỏi

Cung cấp thông tin nhóm câu hỏi

Kiểm tra quy định và ghi nhận

Xuất thông tin liên quan

Cho phép huỷ, cập nhật thông tin

đã cung cấp

2 Lập câu hỏi Cung cấp thông

tin câu hỏi

Kiểm tra quy định và ghi nhận

Xuất thông tin liên quan

Cho phép huỷ, cập nhật thông tin

đã cung cấp

3 Lập trò chơi Cung cấp thông

tin nhóm câu hỏi, thể loại game

Kiểm tra quy định và ghi nhận

Xuất thông tin liên quan

Cho phép huỷ, cập nhật thông tin

Kiểm tra quy định và ghi nhận

Xuất thông tin liên quan

5 Tra cứu

nhóm câu

hỏi

Cung cấp thông tin tra cứu

Tìm và xuất thông tin liên quan

Cho phép xem chi tiết nhóm câu hỏi

6 Tra cứu câu

Tìm và xuất thông tin liên quan

Cho phép xem chi tiết trò chơi

8 Tra cứu

bảng xếp

hạng

Cung cấp thông tin tra cứu

Tìm và xuất thông tin liên quan

trò chơi

Cung cấp thông tin tra cứu

Tìm, xử lý và xuất thông tin liên quan

Bảng 4.1 Bảng trách nhiệm cho từng loại yêu cầu

5.1.3 Sơ đồ luồng dữ liệu cho từng loại yêu cầu nghiệp vụ

5.1.3.1 Sơ đồ luồng dữ liệu cho yêu cầu lập trò chơi

▪ Biểu mẫu 1

Tên nhóm: Thể loại chơi:

▪ Sơ đồ DFD 1

o Bước 2 Kết nối cơ sở dữ liệu.

o Bước 3 Kiểm tra các điều kiện ràng buộc

o Bước 4 Nếu không thỏa một trong các điều kiện trên thì ->7

o Bước 5 Lưu D4 vào bộ nhớ phụ (cơ sở dữ liệu).

o Bước 6 Trả kết qủa về cho người dùng

o Bước 7 Đóng kết nối cơ sở dữ liệu.

o Bước 2 Kết nối cơ sở dữ liệu.

o Bước 3 Kiểm tra các điều kiện ràng buộc

o Bước 4 Nếu không thỏa một trong các điều kiện trên thì ->7

o Bước 5 Lưu D4 vào bộ nhớ phụ (cơ sở dữ liệu).

o Bước 6 Trả kết qủa về cho người dùng

o Bước 7 Đóng kết nối cơ sở dữ liệu.

Hình 4.9 Sơ đồ DFD - Lập câu hỏi

o Bước 2 Kết nối cơ sở dữ liệu.

o Bước 3 Đọc D3 từ bộ nhớ phụ (cơ sở dữ liệu).

o Bước 4 Tính tổng tiền trong ngày.

o Bước 5 Kiểm tra tổng tiền + tiền giao dịch <= 20.000.000 không.