Tải bản đầy đủ (.pdf) (22 trang)

Tìm hiểu reactjs golang – xây dựng vàphát triển ứng dụng hỗ trợ học code java

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.27 MB, 22 trang )

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THƠNG TIN

TÌM HIỂU REACTJS & GOLANG – XÂY DỰNG VÀ
PHÁT TRIỂN ỨNG DỤNG HỖ TRỢ HỌC CODE JAVA

GVHD: NGUYỄN THANH PHƯỚC
SVTH: NGUYỄN QUANG HIỀN
MSSV: 16110070
SVTH: LÊ VĂN DUY
MSSV: 16110035

SKL 0 0 7 0 8 3

Tp. Hồ Chí Minh, tháng 07/2020


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
NGÀNH CƠNG NGHỆ THƠNG TIN



ĐỒ ÁN TỐT NGHIỆP
ĐỀ TÀI:

TÌM HIỂU REACTJS & GOLANG – XÂY DỰNG VÀ


PHÁT TRIỂN ỨNG DỤNG HỖ TRỢ HỌC CODE JAVA

GVHD: THS. NGUYỄN THANH PHƯỚC
SVTH:
NGUYỄN QUANG HIỀN

16110070

LÊ VĂN DUY

16110035

KHĨA:

2016

NGÀNH: CƠNG NGHỆ THƠNG TIN

Tp. Hồ Chí Minh, tháng 7 năm 2020


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
NGÀNH CƠNG NGHỆ THƠNG TIN



ĐỒ ÁN TỐT NGHIỆP
ĐỀ TÀI:


TÌM HIỂU REACTJS & GOLANG – XÂY DỰNG VÀ
PHÁT TRIỂN ỨNG DỤNG HỖ TRỢ HỌC CODE JAVA

GVHD: THS. NGUYỄN THANH PHƯỚC
SVTH:
NGUYỄN QUANG HIỀN

16110070

LÊ VĂN DUY

16110035

KHĨA:

2016

NGÀNH: CƠNG NGHỆ THƠNG TIN

Tp. Hồ Chí Minh, tháng 7 năm 2020


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
----***---Tp. Hồ Chí Minh, ngày 01 tháng 07 năm 2020

NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP
Họ và tên: Nguyễn Quang Hiền

MSSV: 16110070


Lớp: 161100CLST1

Họ và tên: Lê Văn Duy

MSSV: 16110035

Lớp: 161100CLST4

Ngành: Công nghệ thông tin
Giảng viên hướng dẫn: ThS. Nguyễn Thanh Phước
Ngày nhận đề tài: 20/02/2020

Ngày nộp đề tài: 01/07/2020

1. Tên đề tài: TÌM HIỂU REACTJS & GOLANG – XÂY DỰNG VÀ PHÁT
TRIỂN ỨNG DỤNG HỖ TRỢ HỌC CODE JAVA
2. Nội dung thực hiện đề tài:
 Tìm hiểu, tham khảo các chức năng và giao diện của các hệ thống tương tự
 Tìm hiểu về Docker trên server thực thi code
 Tìm hiểu ReactJs và Golang để chỉnh sửa và xây dựng các tính năng mới
 Xây dựng trang web thân thiện, có liên kết với các mạng xã hội (đăng nhập
bằng FB, chia sẻ trên FB, …)
 Bổ sung các tính năng cịn thiếu trong quản lí khóa học, bài tập
 Tạo leaderboard chung và riêng trên mỗi khóa học
 Xây dựng thêm các tính năng thi đấu giữa người dùng và các qui định thời
gian và số lượt làm bài tập để tăng tính cạnh tranh trong việc học code
3. Sản phẩm: Source code, API document, ứng dụng deloy
TRƯỞNG NGÀNH


GIẢNG VIÊN HƯỚNG DẪN


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
----***---PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
Họ và tên: Nguyễn Quang Hiền

MSSV: 16110070

Họ và tên: Lê Văn Duy

MSSV: 16110035

Ngành: Công nghệ thông tin
Tên đề tài: Tìm hiểu xây dựng và phát triển ứng dụng hỗ trợ học code Java
Họ và tên giáo viên hướng dẫn: ThS. Nguyễn Thanh Phước
NHẬN XÉT
1. Về nội dung đề tài và khối lượng thực hiện:
……………………………………………………………………………………………
2. Ưu điểm
……………………………………………………………………………………………
………………………………………………………………………………………………
3. Khuyết điểm
……………………………………………………………………………………………
………………………………………………………………………………………………
4. Đề nghị cho bảo vệ hay không ?
……………………………………………………………………………………………
5. Đánh giá loại:
……………………………………………………………………………………………

6. Điểm:……………………………Bằng chữ:
Tp. Hồ Chí Minh, ngày

tháng

năm 2020

Giảng viên hướng dẫn


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
----***---PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN
Họ và tên: Nguyễn Quang Hiền

MSSV: 16110070

Họ và tên: Lê Văn Duy

MSSV: 16110035

Ngành: Công nghệ thông tin
Tên đề tài: Tìm hiểu xây dựng và phát triển ứng dụng hỗ trợ học code Java
Họ và tên giáo viên hướng dẫn: ThS. Nguyễn Thanh Phước
NHẬN XÉT
1. Về nội dung đề tài và khối lượng thực hiện:
……………………………………………………………………………………………
2. Ưu điểm
……………………………………………………………………………………………
………………………………………………………………………………………………

3. Khuyết điểm
……………………………………………………………………………………………
………………………………………………………………………………………………
4. Đề nghị cho bảo vệ hay không ?
……………………………………………………………………………………………
5. Đánh giá loại:
……………………………………………………………………………………………
6. Điểm:……………………………Bằng chữ:
Tp. Hồ Chí Minh, ngày

tháng

Giảng viên phản biện

năm 2020


LỜI CẢM ƠN
Nhóm xin chân thành cảm ơn Khoa Đào Tạo Chất Lượng Cao, Ngành Công Nghệ Thông
Tin, Trường Đại Học Sư Phạm Kỹ Thuật TP. Hồ Chí Minh đã tạo điều kiện tốt cho nhóm
hồn thành đồ án này.
Trong suốt q trình hồn thiện đồ án nhóm nhận được những kiến thức vơ cùng bổ ích
từ thầy Nguyễn Thanh Phước. Thầy đã nhiệt tình hướng dẫn cho nhóm hồn thành đồ án
tốt nghiệp này. Nhóm xin được gửi lời cảm ơn đến thầy nhờ sự tận tâm và những gì thầy
đã truyền đạt cho chúng em.
Nhóm xin gửi lời cảm ơn sâu sắc tới tất cả các thầy cô, những người đã giảng dạy, trang
bị cho nhóm những kiến thức quý báu trong suốt những năm học vừa qua.
Mặc dù nhóm đã cố gắng hồn thiện thật tốt đồ án nhưng do thời gian có hạn nên khơng
thể tránh khỏi những sai sót, nhóm rất mong nhận đƣợc sự cảm thơng, ý kiến đóng góp của
các q Thầy Cơ và các bạn!

Nhóm xin chân thành cảm ơn!
Nhóm sinh viên


MỤC LỤC
CHƯƠNG 1. TỔNG QUAN ...................................................................................... 1
1.1.

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

1.1.1.

LeetCode ................................................................................................ 2

1.1.1.1. Giới thiệu ........................................................................................... 2
1.1.1.2. Tính năng ........................................................................................... 2
1.1.1.3. Kết luận ............................................................................................. 3
1.1.2.

CodeLearn .............................................................................................. 4

1.1.2.1. Giới thiệu ........................................................................................... 4
1.1.2.2. Tính năng ........................................................................................... 5
1.1.2.3. Kết luận ............................................................................................. 5
1.2.

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

1.3.


Mục tiêu và nhiệm vụ đề tài .......................................................................... 7

1.3.1.

Mục tiêu ................................................................................................. 7

1.3.2.

Nhiệm vụ ................................................................................................ 7

1.4.

Cơng nghệ lập trình ....................................................................................... 7

1.5.

Phạm vi nghiên cứu ....................................................................................... 8

CHƯƠNG 2. CƠ SỞ LÝ THUYẾT ........................................................................... 9
2.1.

Docker .......................................................................................................... 9

2.1.1.

Định nghĩa .............................................................................................. 9

2.1.2.

Cấu trúc .................................................................................................. 9


2.2.

Runner ........................................................................................................ 10


2.2.1.

Chức năng ............................................................................................ 10

2.2.2.

Vấn đề .................................................................................................. 11

2.2.3.

Cách khắc phục .................................................................................... 12

2.3.

Golang ........................................................................................................ 12

2.3.1.

Giới thiệu ............................................................................................. 12

2.3.2.

Ưu điểm của Golang ............................................................................. 13


2.3.3.

Nhược điểm của Golang ....................................................................... 14

2.3.4.

Tại sao chọn Golang ............................................................................. 15

2.4.

Echo Framework ......................................................................................... 16

2.4.1.

Giới thiệu ............................................................................................. 16

2.4.2.

Request................................................................................................. 16

2.4.3.

Response .............................................................................................. 16

2.4.4.

Routing................................................................................................. 16

2.5.


MongoDB ................................................................................................... 17

2.5.1.

Giới thiệu ............................................................................................. 17

2.5.2.

Ưu điểm của MongoDB........................................................................ 17

2.5.3.

Nhược điểm .......................................................................................... 18

2.5.4.

Tại sao chọn MongoDB ........................................................................ 18

2.6.

ReactJS ....................................................................................................... 19

2.6.1.

Giới thiệu ............................................................................................. 19

2.6.2.

JSX ....................................................................................................... 19


2.6.3.

Component ........................................................................................... 20

2.6.4.

Life Circle ............................................................................................ 20

2.7.

JUnit ........................................................................................................... 22
Trang ii


2.7.1.

Giới thiệu ............................................................................................. 22

2.7.2.

Các tính năng của JUnit ........................................................................ 23

CHƯƠNG 3. XÁC ĐỊNH U CẦU BÀI TỐN ................................................... 24
3.1.

Phân tích bài tốn ........................................................................................ 24

3.2.

Quy trình nghiệp vụ .................................................................................... 25


3.2.1.

Quy trình làm bài thực hành, bài thi...................................................... 25

3.2.2.

Quy trình kiểm thử bài .......................................................................... 26

3.2.3.

Quy trình xét chứng chỉ ........................................................................ 27

3.3.

Mơ hình hóa chức năng ............................................................................... 28

3.3.1.

Danh sách các Actor ............................................................................. 28

3.3.2.

Sơ đồ Usecase ...................................................................................... 28

3.3.3.

Mô tả sơ đồ usecase .............................................................................. 29

3.3.4.


Đặc tả một số usecase chính ................................................................. 30

3.3.4.1. Usecase “Sovle code” (UC05) .......................................................... 30
3.3.4.2. Usecase “Create Practice” (UC18/Create) ........................................ 30
3.3.4.3. Usecase “Consider Certificate” (UC25) ........................................... 31
3.3.4.4. Usecase “Join a fight code” (UC12) ................................................. 32
3.3.4.5. Usecase “Confirm a new course” (UC23) ........................................ 33
3.3.4.6. Usecase “Manage private fight room”/Create (UC10) ...................... 34
CHƯƠNG 4. THIẾT KẾ PHẦN MỀM .................................................................... 36
4.1.

Thiết kế kiến trúc ........................................................................................ 36

4.1.1.

Front-end .............................................................................................. 37

4.1.2.

Back-end .............................................................................................. 39

4.1.2.1. Server Rest ....................................................................................... 39
Trang iii


4.1.2.2. Runner Server .................................................................................. 41
4.2.

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


4.2.1.

Database Schema .................................................................................. 42

4.2.2.

Mô tả Database Schema........................................................................ 43

4.2.2.1. Bảng User ........................................................................................ 43
4.2.2.2. Bảng User_Course ........................................................................... 43
4.2.2.3. Bảng Course .................................................................................... 43
4.2.2.4. Bảng Minitask .................................................................................. 44
4.2.2.5. Bảng User_Minitask_Practice .......................................................... 44
4.2.2.6. Bảng User_Minitask_Favorite .......................................................... 44
4.2.2.7. Bảng User_Minitask ........................................................................ 45
4.2.2.8. Bảng Course_Type........................................................................... 45
4.2.2.9. Bảng Task ........................................................................................ 45
4.2.2.10. Bảng Task_Minitask ...................................................................... 45
4.2.2.11. Bảng Event .................................................................................... 46
4.2.2.12. Bảng Book ..................................................................................... 46
4.2.2.13. Bảng Fight ..................................................................................... 46
4.2.2.14. Bảng Fight_User_Minitask ............................................................ 46
4.2.2.15. Bảng Fight_User ............................................................................ 47
4.3.

Thiết kế lược đồ tuần tự .............................................................................. 48

4.3.1.


Xác thực qua Token .............................................................................. 48

4.3.2.

Làm bài thực hành khi luyện tập ........................................................... 48

4.3.3.

Làm bài thực hành khi học tập .............................................................. 49

4.3.4.

Làm bài thực hành khi thi đấu .............................................................. 49
Trang iv


4.3.5.

Tạo bài thực hành ................................................................................. 50

4.3.6.

Tạo cuộc thi .......................................................................................... 50

4.3.7.

Xét chứng chỉ ....................................................................................... 51

CHƯƠNG 5. THIẾT KẾ GIAO DIỆN ..................................................................... 52
5.1.1.1. Screen Flow của ứng dụng quyền khách .......................................... 52

5.1.1.2. Screen flow cho ứng dụng quyền sinh viên ...................................... 53
5.1.1.3. Screen flow cho ứng dụng quyền giáo viên ...................................... 55
5.1.1.4. Screen flow cho ứng dụng quyền quản trị viên ................................. 57
5.1.2.1. SCK01. Guest Dashboard Screen ..................................................... 59
5.1.2.2. SCK02. Sign In Screen .................................................................... 60
5.1.2.3. SCK03. Sign Up Screen ................................................................... 61
5.1.2.4. SCK04. General Leader Board Screen ............................................. 63
5.1.2.5. SCK05. View Certificate Screen ...................................................... 64
5.1.2.6. SC001. User Dashboard Screen........................................................ 65
5.1.2.7. SC002. Profile Screen ...................................................................... 67
5.1.2.8. SC003. Practice Diary Screen .......................................................... 68
5.1.2.9. SC004. Practice Screen .................................................................... 70
5.1.2.10. SC005. Courses Screen .................................................................. 72
5.1.2.11. SC006. Fights Screen ..................................................................... 73
5.1.2.12. SC007. Fight Detail Screen ............................................................ 74
5.1.2.13. SC008. Course Detail Screen ......................................................... 76
5.1.2.14. SC009. Solve Practice’s Problem Screen........................................ 78
5.1.2.15. SC010. Solve Course’s Problem Screen ......................................... 79
5.1.2.16. SC011. Solve Fight’s Problem Screen ............................................ 81
Trang v


5.1.2.17. SC012. Fight’s Leader Board Screen.............................................. 82
5.1.2.18. SC013. Update Fight Screen .......................................................... 84
5.1.2.19. SC014. Create Fight Screen ........................................................... 86
5.1.2.20. SCT01. Manage Course Screen ...................................................... 88
5.1.2.21. SCT02. Manage Task Screen ......................................................... 92
5.1.2.22. SCT03. Manage Problem Screen .................................................... 97
5.1.2.23. SCT04. Mange Fight Screen ........................................................ 103
5.1.2.24. SCA01. Manage User Screen ....................................................... 106

5.1.2.25. SCA02. Manage Event Screen ..................................................... 110
5.1.2.26. SCA03. Manage Book Screen ...................................................... 113
5.1.2.27. SCA04. Config Certificate Screen ................................................ 117
CHƯƠNG 6. KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH ..................................... 118
6.1.

Hệ thống Back-end.................................................................................... 118

6.2.

Hệ thống Front-end ................................................................................... 118

CHƯƠNG 7. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ......................................... 120
7.1.

Kết quả đạt được ....................................................................................... 120

7.2.

Ưu điểm .................................................................................................... 120

7.3.

Hạn chế ..................................................................................................... 120

7.4.

Hướng phát triển ....................................................................................... 121

CHƯƠNG 8. KẾ HOẠCH VÀ PHÂN CHIA CÔNG VIỆC ................................... 122


Trang vi


DANH MỤC HÌNH
Hình 2.1: Cấu trúc Docker .......................................................................................... 9
Hình 2.2: Luồng thực thi code online ........................................................................ 11
Hình 2.3: Golang ...................................................................................................... 12
----------------------------------------------Hình 3.1: Mơ hình các đối tượng của hệ thống.......................................................... 24
Hình 3.2: Quy trình cơ bản của một bài thực hành .................................................... 25
Hình 3.3: Quy trình làm bài thực hành ...................................................................... 26
Hình 3.4: Quy trình xét chứng chỉ ............................................................................. 27
Hình 3.5: Sơ đồ usecase ............................................................................................ 28
----------------------------------------------Hình 4.1: Kiến trúc hệ thống Hocode ........................................................................ 36
Hình 4.2: Cấu trúc thư mục Front-end ...................................................................... 37
Hình 4.3: Cấu trúc thư mục Back-end ....................................................................... 39
Hình 4.4: Cấu trúc comment go-swagger .................................................................. 40
Hình 4.5: Cấu trúc thư mục Runner Server ............................................................... 41
Hình 4.6: Database Schema ...................................................................................... 42
Hình 4.7: Sequence Diagram xác thực token ............................................................. 48
Hình 4.8: Sequence Diagram làm bài thực hành khi luyện tập .................................. 48
Hình 4.9: Sequence Diagram làm bài thực hành khi học tập ..................................... 49

Trang vii


Hình 4.10: Sequence Diagram làm bài thực hành khi thi đấu .................................... 49
Hình 4.11: Sequence Diagram tạo bài thực hành ....................................................... 50
Hình 4.12: Sequence Diagram tạo cuộc thi riêng tư .................................................. 50
Hình 4.13: Sequence Diagram tạo cuộc thi cơng khai ............................................... 51

Hình 4.14: Sequence Diagram xét chứng chỉ ............................................................ 51
----------------------------------------------Hình 5.1: Screen flow cho ứng dụng quyền khách .................................................... 52
Hình 5.2: Screen flow cho ứng dụng quyền sinh viên ............................................... 53
Hình 5.3: Screen flow cho ứng dụng quyền giáo viên ............................................... 55
Hình 5.4: Screen flow cho ứng dụng quyền quản trị viên .......................................... 57
Hình 5.5: Giao diện trang SCK.01 Guest Dashboard Screen ..................................... 59
Hình 5.6: Giao diện trang SCK02. Sign in Screen ..................................................... 60
Hình 5.7: Giao diện trang SCK03. Sign Up Screen ................................................... 61
Hình 5.8: Giao diện trang SCK04. General Leader Board Screen ............................. 63
Hình 5.9: Giao diên trang SCK05. View Certificate Screen ...................................... 64
Hình 5.10: Giao diện trang SCK05.b View Certificate Screen ................................. 65
Hình 5.11: Giao diện trang SC001. User Dashboard Screen (P1) .............................. 65
Hình 5.12: Giao diện trang SC001. User Dashboard Screen (P2) .............................. 66
Hình 5.13: Giao diện trang SC002. Profile Screen .................................................... 67
Hình 5.14: Giao diện trang SC003. Practice Diary Screen (P1) ................................. 69
Hình 5.15: Giao diện trang SC003. Practice Diary Screen (P2) ................................. 69

Trang viii


Hình 5.16: Giao diện trang SC004. Practice Screen .................................................. 70
Hình 5.17: Giao diện trang SC005. Course Screen .................................................... 72
Hình 5.18: Giao diện trang SC006. Fights Screen ..................................................... 73
Hình 5.19: Giao diện trang SC007. Fight Detail Screen ............................................ 74
Hình 5.20: Giao diện trang SC008. Course Detail Screen ......................................... 76
Hình 5.21: Giao diện trang Solve Practice’s Problem Screen .................................... 78
Hình 5.22: Giao diện trang SC010. Solve Course’s Problem Screen ......................... 79
Hình 5.23: Giao diện trang Solve Fight’s Problem Screen ........................................ 81
Hình 5.24: Giao diện trang SC012 Fight’s Leader Board Screen ............................... 82
Hình 5.25: Giao diện trang SC013 Update Fight Screen (1) ...................................... 84

Hình 5.26: Giao diện trang SC013 Update Fight Screen (2) ...................................... 84
Hình 5.27: Giao diện trang SC014 Create Fight Screen (1) ....................................... 86
Hình 5.28: Giao diện trang SC014 Create Fight Screen (2) ....................................... 87
Hình 5.29: Giao diện trang SCT01. Manage Course Screen (1) ................................ 89
Hình 5.30: Giao diện trang SCT01. Manage Course Screen (2) ................................ 90
Hình 5.31: Giao diện trang SCT01. Manage Course Screen (3) ................................ 91
Hình 5.32: Giao diện trang SCT02. Manage Task Screen (1) .................................... 93
Hình 5.33: Giao diện trang SCT02. Manage Task Screen (2) .................................... 94
Hình 5.34: Giao diện trang SCT02 Manage Task Screen (3) ..................................... 95
Hình 5.35: Giao diện trang SCT02 Manage Task Screen (4) ..................................... 95
Hình 5.36: Giao diện trang SCT03 Manage Problem Screen (1) ............................... 97

Trang ix


Hình 5.37: Giao diện trang Manage Problem Screen (2) ........................................... 98
Hình 5.38: Giao diện trang Manage Problem Screen (3) ........................................... 99
Hình 5.39: Giao diện trang SCT03 Manage Problem Screen (4) ............................. 100
Hình 5.40: Giao diện trang SCT03. Manage Problem (5) ........................................ 101
Hình 5.41: Giao diện trang SCT03. Manage Problem Screen (6) ............................ 101
Hình 5.42: Giao diện màn hình trang SCT04. Manage Fight Screen (1) .................. 103
Hình 5.43: Giao diện trang SCT04. Manage Fight Screen (2) ................................. 104
Hình 5.44: Giao diện trang màn hình SCT04. Manage Fight Screen (3) .................. 105
Hình 5.45: Giao diện trang SCA01. Manage User Screen (1) .................................. 107
Hình 5.46: Giao diện trang SCA01. Manage User Screen (2) .................................. 108
Hình 5.47: Giao diện trang SCA01. Manage User Screen (3) .................................. 109
Hình 5.48: Giao diện trang SCA02. Manage Event Screen (1) ................................ 110
Hình 5.49: Giao diện trang SCA02. Manage Event Screen (2) ................................ 111
Hình 5.50: Giao diện trang SCA02. Manage Event Screen (3) ................................ 112
Hình 5.51: Giao diện trang SCA03. Manage Book Screen (1)................................. 113

Hình 5.52: Giao diện trang SCA03. Manage Book Screen (2)................................. 114
Hình 5.53: Giao diện trang SCA03. Manage Book Screen (3)................................. 115
Hình 5.54: Giao diện trang SCA04. Config Certificate Screen ................................ 117
----------------------------------------------Hình 6.1: Hệ thống deloy server trên Google Cloud................................................ 118
Hình 8.1: Màn hình Trello phân chia công việc ...................................................... 122

Trang x


Trang xi


DANH MỤC BẢNG
Bảng 3.1: Bảng mô tả sơ đồ UseCase ......................................................................... 29
Bảng 3.2: Bảng đặc tả Usecase “Solve code” ............................................................. 30
Bảng 3.3: Bảng đặc tả Usecase “Create Practice”....................................................... 31
Bảng 3.4: Bảng đặc tả Usecase “Consider Certificate” ............................................... 32
Bảng 3.5: Bảng đặc tả Usecase “Join a fight code” .................................................... 33
Bảng 3.6: Bảng đặc tả Usecase “Confirm a new course” ............................................ 33
Bảng 3.7: Bảng đặc tả Usecase “Manage private fight room/Create” ......................... 34
----------------------------------Bảng 4.1: Bảng mô tả sơ sở dữ liệu ............................................................................ 42
Bảng 4.2: Đặc tả bảng User ........................................................................................ 43
Bảng 4.3: Đặc tả bảng User_Course ........................................................................... 43
Bảng 4.4: Đặc tả bảng Course .................................................................................... 43
Bảng 4.5: Đặc tả bảng Minitask ................................................................................. 44
Bảng 4.6: Đặc tả bảng User_Minitask_Practice.......................................................... 44
Bảng 4.7: Đặc tả bảng User_Minitask_Favorite ......................................................... 44
Bảng 4.8: Đặc tả bảng User_Minitask ........................................................................ 45
Bảng 4.9: Đặc tả bảng Course_Type .......................................................................... 45
Bảng 4.10: Đặc tả bảng Task ..................................................................................... 45

Bảng 4.11: Đặc tả bảng Task_Minitask ...................................................................... 45
Bảng 4.12: Đặc tả bảng Event .................................................................................... 46
Bảng 4.13: Đặc tả bảng Book..................................................................................... 46
Bảng 4.14: Đặc tả bảng Fight ..................................................................................... 46

Trang xii


Bảng 4.15: Đặc tả bảng Fight_User_Minitask ............................................................ 46
Bảng 4.16: Đặc tả bảng Fight_User ............................................................................ 47
----------------------------------Bảng 5.1: Mô tả screen flow cho quyền khách ........................................................... 53
Bảng 5.2: Bảng mô tả Screen flow cho ứng dụng quyền sinh viên ............................. 54
Bảng 5.3: Bảng mô tả Screen flow cho ứng dụng quyền giáo viên ............................. 56
Bảng 5.4: Bảng mô tả Screen flow cho ứng dụng quyền quản trị viên ........................ 57
Bảng 5.5: Bảng đặc tả màn hình Guest Screen ........................................................... 59
Bảng 5.6: Bảng đặc tả màn hình Sign in Screen ......................................................... 60
Bảng 5.7: Bảng đặc tả màn hình Sing Up Screen ....................................................... 62
Bảng 5.8: Bảng đặc tả màn hình General Leader Board Screen .................................. 63
Bảng 5.9: Bảng đặc tả màn hình View Certificate Screen........................................... 64
Bảng 5.10: Bảng đặc tả màn hình User Dashoard Screen ........................................... 66
Bảng 5.11: Bảng đặc tả màn hình SC002. Profile Screen ........................................... 68
Bảng 5.12: Bảng đặc tả màn hình Practice Diary Screen ............................................ 69
Bảng 5.13: Bảng đặc tả màn hình Practice Screen ...................................................... 71
Bảng 5.14: Bảng đặc tả màn hình Course Screen ....................................................... 72
Bảng 5.15: Bảng đặc tả màn hình Fights Screen......................................................... 74
Bảng 5.16: Bảng đặc tả màn hình Fight Detail Screen ................................................ 75
Bảng 5.17: Bảng đặc tả màn hình Course Detail Screen ............................................. 77
Bảng 5.18: Bảng đặc tả màn hình Solve Practice’s Problem Screen ........................... 78
Bảng 5.19: Bảng đặc tả màn hình Solve Course’s Problem Screen ............................. 80
Bảng 5.20: Bảng đặc tả màn hình Solve Fight’s Problem Screen ............................... 81

Bảng 5.21: Bảng đặc tả màn hình Fight’s Leader Board Screen ................................. 83
Trang xiii


Bảng 5.22: Bảng đặc tả trang Update Fight Screen..................................................... 85
Bảng 5.23: Bảng đặc tả màn hình Create Fight Screen ............................................... 87
Bảng 5.24: Bảng đặc tả màn hình Manage Course Screen (1) .................................... 89
Bảng 5.25: Bảng đặc tả màn hình Manage Course Screen (2) .................................... 90
Bảng 5.26: Bảng đặc tả màn hình Manage Course Screen (3) .................................... 92
Bảng 5.27: Bảng đặc tả màn hình SCT02. Manage Task Screen (1) ........................... 93
Bảng 5.28: Bảng đặc tả màn hình trang Manage Task Screen (2) ............................... 94
Bảng 5.29: Bảng đặc tả màn hình Manage Task Screen (3+4) .................................... 95
Bảng 5.30: Bảng đặc tả màn hình Manage Problem Screen (1) .................................. 97
Bảng 5.31: Bảng đặc tả màn hình Manage Problem Screen (2) .................................. 99
Bảng 5.32: Bảng đặc tả màn hình giao diện trang Manage Problem Screen (3) ........ 100
Bảng 5.33: Bảng đặc tả màn hình Manage Problem Screen (4) ................................ 100
Bảng 5.34: Bảng đặc tả màn hình Manage Problem Screen (5+6) ............................ 102
Bảng 5.35: Bảng đặc tả màn hình Manage Fight Screen (1) ..................................... 103
Bảng 5.36: Bảng đặc tả màn hình Manage Fight Screen (2) ..................................... 104
Bảng 5.37: Bảng đặc tả màn hình Manage Fight Screen (3) ..................................... 105
Bảng 5.38: Bảng đặc tả màn hình Manage User Screen (1) ...................................... 107
Bảng 5.39: Bảng đặc tả màn hình Manage User Screen (2) ...................................... 108
Bảng 5.40: Bảng đặc tả màn hình trang Manage User Screen (3) ............................. 109
Bảng 5.41: Bảng đặc tả màn hình Manage Event Screen (1) .................................... 110
Bảng 5.42: Bảng đặc tả màn hình Manage Event Screen (2) .................................... 111
Bảng 5.43: Bảng đặc tả màn hình Manage Event Screen (3) .................................... 112
Bảng 5.44: Bảng đặc tả màn hình Manage Book Screen (1) ..................................... 113
Bảng 5.45: Bảng đặc tả màn hình Manage Book Screen (2) ..................................... 115
Trang xiv





×