(Đồ án tốt nghiệp) 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 (6.38 MB, 142 trang )
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
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
Bảng 5.46: Bảng đặc tả màn hình Manage book Screen (3) ...................................... 116
Bảng 5.47: Bảng đặc tả màn hình Config Certificate Screen .................................... 117
Trang xv
Báo cáo đồ án tốt nghiệp
CHƯƠNG 1. TỔNG QUAN
1.1. Khảo sát hiện trạng
Cơng nghệ thơng tin đóng vai trị quan trọng, hầu nhưu không thể tách rời trong cuộc
sống xã hội hiện nay.
Tại Việt Nam, kết hợp với sự phát triển của Internet, công nghệ thông tin ngày càng được
áp dụng mạnh, thúc đẩy công cuộc đổi mới, phát triển nhanh hiện đại hóa những ngành
kinh tế, tăng cường sự cạnh tranh của các doanh nghiệp, hỗ trợ quá trình hội nhập quốc
tế và nâng cao chất lượng sống của mọi người, tạo ra nhiều ứng dụng trong các lĩnh vực
giải trí, thương mại, quản lý, y tế, giáo dục,....
Cơng nghệ thông tin những năm gần đây trở thành một ngành quan trọng của đất nước,
nhu cầu nhân lực rất lớn, công nghệ thông tin dần trở thành một ngành được chú trọng
trong hệ thống đào tạo của các trường đại học. Trong đó học lập trình là một việc thiết
yếu và cần thiết của sinh viên học công nghệ thơng tin. Một thứ quyết định khơng ít tới
năng lực của lập trình viên là khả năng lập trình. Việc lập trình tốt là nịng cốt để sinh
viên có thể tiến xa hơn. Ngồi việc lập trình, sinh viên có thể chuyển sang làm các công
việc khác như Technical Writer, Project Manager, Thiết kế (UI/UX), ...
Dạy và học lập trình ở các trường đại học ngày càng được cải thiện, bổ sung và phát
triển. Tuy nhiên thực tế lại vẫn còn tồn đọng những hạn chế dẫn đến chất lượng sinh viên
ra trường còn thấp. Nhu cầu nhân lực lớn nhưng nhiều sinh viên ra trường vẫn thất
nghiệp, không đáp ứng được nhu cầu của nhà tuyển dụng, nguyên do một phần là vì khả
năng lập trình yếu, tạo ra một khoảng trống lớn giữa sinh viên và lập trình viên.
Việc dạy và học lập trình vẫn cịn hạn chế bởi vì các ngun nhân sau:
Số mơn học lập trình ở trường cịn rất ít, vì vậy bài thực hành, bài thi là cơ hội
để sinh viên có thể rèn luyện kĩ năng, tư duy, tuy nhiên khi đã học xong mơn thi
có cơ chế để bắt buộc các sinh viên phải tiếp tục rèn luyện lập trình
Khơng có những nguồn tài nguyên được chọn lọc để sinh viên có thể tìm hiểu
và tự học
Chương 1: Tổng quan
Trang 1
Báo cáo đồ án tốt nghiệp
Vấn đề phải giải quyết bao gồm:
Tạo môi trường cho sinh viên thực hành code và cung cấp nhiều bài toán được
chọn lọc cho sinh viên tham gia và luyện tập
Ràng buộc sinh viên phải thực hành code
Sau đây nhóm sẽ khảo sát một số hệ thống tương tự.
1.1.1. LeetCode
1.1.1.1. Giới thiệu
Leetcode là một Online Judge phổ biến trên thế giới, LeetCode cung cấp cho người
dùng một kho thách thức, giúp các lập trình viên thỏa sức luyện tập nâng cao kỹ năng,
chuẩn bị cho các buổi phỏng vấn về kỹ thuật.
Hình 1.1: LeetCode
1.1.1.2. Tính năng
LeetCode hỗ trợ người dùng một số tính năng chính sau:
Luyện tập:
o Thách thức được phân loại theo nhiều chủ đề như: mảng, chuỗi, danh sách
liên kết, hàng đợi…
o Hỗ trợ cơng cụ tìm kiếm và lọc thách thức theo tên, độ khó, tình trạng
chủ đề giúp cho người dùng có thể tìm kiếm thách thức phù hợp với vùng
kiến thức mong muốn.
Chương 1: Tổng quan
Trang 2
Báo cáo đồ án tốt nghiệp
Tuyển tập những thách thức được người dùng u thích, những thách thức
từ các cơng ty nổi tiếng như Google, Facebook, Amazon.
o Thách thức có hiển thị tình trạng giúp người dùng biết được thách thức
chưa làm, đang làm và đã hoàn thành.
o Hệ thống có biểu đồ thống kê tình trạng luyện tập của người dùng.
Làm bài:
o Hỗ trợ làm bài với nhiều ngôn ngữ.
o Hệ thống lưu trữ lịch sử nộp bài của người dùng với nhiều thơng tin như
tình trạng, thời gian, bộ nhớ, ngày nộp bài.
o Một số câu hỏi có hỗ trợ gợi ý và đáp án.
o Mô tả thách thức rõ ràng, dễ hiểu.
o Hỗ trợ debug, phím tắt, retrieve code, reset code.
o Code editor có hỗ trợ thay đổi theme, font.
o Có khu vực cho phép người chơi trao đổi về thách thức.
o Số lượng test case cực nhiều.
Học tập:
o Các khóa học liên quan đến nhiều chủ đề khác nhau.
o Khóa học được chia ra nhiều phần rõ ràng, chi tiết.
o Chia sẻ kinh nghiệm cho xử lý thách thức cho người dùng.
Thi đấu:
o Số lượng cuộc thi phong phú.
o Có bảng xếp hạng.
o Bảng xếp hạng thể hiện thơng tin rõ ràng thời gian, tình trạng làm bài của
từng thách thức.
Phỏng vấn:
o Các bộ thách thức phong phú của nhiều công ty lớn trên thế giới.
o
1.1.1.3. Kết luận
LeetCode được sử dụng phổ biến bởi nhiều công ty lớn trong thế giới. Hệ thống đem
lại một trải nghiệm thú vị cho người dùng. Tuy nhiên, vẫn còn vài điểm mà nhóm cảm
thấy chưa tốt khi trải nghiệm.
Ưu điểm:
Chương 1: Tổng quan
Trang 3
Báo cáo đồ án tốt nghiệp
Kho thách thức đa dạng phong phú.
Các khóa học trình bày rõ ràng, dễ hiểu, các câu hỏi có tính thực hành
cao.
o Chức năng làm bài hỗ trợ người dùng nhiều tính năng.
o Số lượng cuộc thi phong phú.
o Các bộ câu hỏi phỏng vấn có tính thực tiễn cao sát với nhu cầu của các
công ty lớn.
o Số lượng test case cực lớn.
o Biểu đồ thống kê lịch sử luyện lập, hiển thị tình trạng làm bài với từng
thách thức.
o Code Editor cho phép thay đổi theme, font. Hỗ trợ chức năng
Autocomplete.
Nhược điểm:
o Chưa kiểm sốt được tình trạng chia sẽ mã nguồn giữa các người dùng.
o Một số mà hình có giao diện khá đơn điệu.
o
o
1.1.2. CodeLearn
1.1.2.1. Giới thiệu
CodeLearn là hệ thống, nền tảng tương tác trực tuyến giúp lập trình viên có thể học
tập, rèn luyện kỹ năng lập trình. Hệ thống được phát triển bở FPT vì vậy các thách thức
khá, quen thuộc, gần gũi với lập trình viên Việt Nam.
Hình 1.2: CodeLearn
Chương 1: Tổng quan
Trang 4
Báo cáo đồ án tốt nghiệp
1.1.2.2. Tính năng
CodeLearn hỗ trợ người dùng một số tính năng chính sau:
Luyện tập:
o Thách thức được phân loại theo nhiều chủ đề như: mảng, chuỗi, truy cấn
cơ sở dữ liệu.
o Hỗ trợ công cụ tìm kiếm và lọc thách thức theo tên, độ khó, tình trạng
giúp cho người dùng có thể tìm kiếm thách thức phù hợp với vùng kiến
thức mong muốn.
o Có bảng xếp hạng cho từng thách thức.
o Thách thức có hiển thị tình trạng giúp người dùng biết được thách thức
chưa làm, đang làm và đã hoàn thành.
Làm bài:
o Hỗ trợ làm bài với nhiều ngôn ngữ.
o Hệ thống lưu trữ lịch sử nộp bài của người dùng với nhiều thông tin như
tình trạng, thời gian, ngày nộp bài.
o Mơ tả thách thức rõ ràng, dễ hiểu.
o Có khu vực cho phép người chơi trao đổi về thách thức.
Học tập:
o Các khóa học liên quan đến nhiều chủ đề khác nhau.
o Khóa học được chia ra nhiều phần rõ ràng, chi tiết.
o Chia sẻ kinh nghiệm cho xử lý thách thức cho người dùng.
o Các bộ câu hỏi trắc nghiệm đa dạng.
Thi đấu:
o Bảng xếp hạng real-time.
o Bảng xếp hạng thể hiện thơng tin rõ ràng thời gian, tình trạng làm bài, số
lần nộp bài của từng thách thức.
1.1.2.3. Kết luận
CodeLearn là một trong số ít các hệ thống hỗ trợ các lập trình viên luyện tập và nâng
cao khả năng lập trình được phát triển bởi cơng ty từ Việt Nam mà vẫn khơng thua kém
gì các hệ thống đã có chỗ đứng trong thị trường.
Chương 1: Tổng quan
Trang 5
Báo cáo đồ án tốt nghiệp
Ưu điểm:
o Kho thách thức đa dạng phong phú.
o Các khóa học trình bày rõ ràng, dễ hiểu, các câu hỏi có tính thực hành
cao.
o Chức năng làm bài hỗ trợ người dùng nhiều tính năng.
o Biểu đồ thống kê lịch sử luyện lập, hiển thị tình trạng làm bài với từng
thách thức.
Nhược điểm:
o Chưa kiểm sốt được tình trạng chia sẽ mã nguồn giữa các người dùng.
o Code Editor chưa hỗ trợ nhiều tính năng.
1.2. Tính cấp thiết của đề tài
Hiện nay, trong bối cảnh cả thế giới bị ảnh hưởng nặng nề bởi đại dịch COVID-19,
nước ta nói chung và ngành giáo dục nói riêng cũng bị ảnh hưởng khơng kém. Các trường
đại học buộc phải tạm hoãn thời gian học tập trung ở trường một thời gian dài. Điều đó
có thể làm cho sinh viên lười biếng, không chịu học tập và rèn luyện code. Vì thế cần
phải xây dựng một hệ thống luyện tập trực tuyến, nơi mà sinh viên và giáo viên có thể
tương tác với nhau trên đó để có thể học tập, kiểm tra thơng qua các bài tập trên hệ thống
mà không cần phải kiểm tra trên lớp như mọi khi.
Thứ hai, ngày nay hầu hết các sinh viên chỉ ưu tiên học tập và chạy theo các công
nghệ mới, không ưu tiên đến việc rèn luyện tính tư duy thơng qua giải các bài tập giải
thuật. Điều này có thể ảnh hưởng đến sự thăng tiến của sinh viên sau khi ra trường và
làm việc.
Vì thế, nhóm đã quyết định làm một ứng dụng đề giải quyết các vấn đề trên. Hệ thống
sẽ được vận hành thơng qua ba đồi tượng chính: sinh viên, giáo viên và người quản trị.
Ba đối tượng này có những quyền hạn ràng buộc nhau để giúp cho ứng dụng có chất
lượng cao nhất giúp chất lượng sinh viên học công nghệ thơng tin ngày càng được hồn
thiện thêm nữa, cung cấp một nguồn nhân lực có trình độ cao cho xã hội.
Chương 1: Tổng quan
Trang 6
Báo cáo đồ án tốt nghiệp
1.3. Mục tiêu và nhiệm vụ đề tài
1.3.1. Mục tiêu
Thông qua việc phát triển ứng dụng, nhóm có cơ hội tìm hiểu về
ReactJs, Golang và Docker
Chỉnh sửa và hoàn thiện giao diện trang web cho phù hợp, đẹp mắt
Hoàn thiện các chức năng quản lí khóa học, bài tập, trang thơng tin cá
nhân
Xây dựng thêm các tính năng mới: Trang thi đấu, trang luyện tập, ứng
dụng có tính liên kết với mạng xã hội, bảng xếp hạng điểm của người
dùng trong từng khóa học
1.3.2. Nhiệm vụ
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
Nghiên cứu và deloy ứng dụng lên nền tảng Google cloud
1.4. Cơng nghệ lập trình
Sử dụng Golang và Nodejs để viết server backend và ReactJS phía Frontend
Sử dụng Docker để đóng gói các ứng dụng trong image và deloy chúng thơng qua
Docker container
Chương 1: Tổng quan
Trang 7
