(Đồ á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 (4 MB, 176 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
SKL007083
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
LÊ VĂN DUY
KHÓA:
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
LÊ VĂN DUY
KHÓA:
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
1.1.Khảo sát hiện trạng .................................................
1.1.1.
1.1.2.
1.2.Tính cấp thiết của đề tài ..........................................
1.3.Mục tiêu và nhiệm vụ đề tài ...................................
1.3.1.
1.3.2.
1.4.Công nghệ lập trình ................................................
1.5.Phạm vi nghiên cứu ................................................
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT ...........................................................................
2.1.Docker ....................................................................
2.1.1.
2.1.2.
2.2.Runner ....................................................................
2.2.1.
Chức năng ................
2.2.2.
Vấn đề ......................
2.2.3.
Cách khắc phục .......
2.3.
Golang .............................................................................
2.3.1.
Giới thiệu .................
2.3.2.Ưu điểm của Golang .............................................................................
2.3.3.Nhược điểm của Golang .......................................................................
2.3.4.Tại sao chọn Golang .............................................................................
2.4.
Echo Framework .............................................................
2.4.1.
Giới thiệu .................
2.4.2.
Request .....................
2.4.3.
Response ..................
2.4.4.
Routing.....................
2.5.
MongoDB ........................................................................
2.5.1.
Giới thiệu .................
2.5.2.Ưu điểm của MongoDB........................................................................
2.5.3.
Nhược điểm .............
2.5.4.Tại sao chọn MongoDB ........................................................................
2.6.
ReactJS ............................................................................
2.6.1.
Giới thiệu .................
2.6.2.
JSX...........................
2.6.3.
Component ..............
2.6.4.
Life Circle ................
2.7.
JUnit ................................................................................
2.7.1.
Giới thiệu
2.7.2.Các tính năng của JUnit ........................................................................
CHƯƠNG 3. XÁC ĐỊNH U CẦU BÀI TỐN ...................................................
3.1.Phân tích bài tốn ......................................................
3.2.Quy trình nghiệp vụ ..................................................
3.2.1.Quy trình làm bài thực hành, bài thi ......................................................
3.2.2.Quy trình kiểm thử bài ..........................................................................
3.2.3.Quy trình xét chứng chỉ ........................................................................
3.3.Mơ hình hóa chức năng .............................................
3.3.1.Danh sách các Actor .............................................................................
3.3.2.
Sơ đồ Use
3.3.3.Mô tả sơ đồ usecase ..............................................................................
3.3.4.Đặc tả một số usecase chính .................................................................
3.3.4.1. Usecase “Sovle code” (UC05) .......................
3.3.4.2. Usecase “Create Practice” (UC18/Create) .....
3.3.4.3. Usecase “Consider Certificate” (UC25) .......
3.3.4.4. Usecase “Join a fight code” (UC12) .............
3.3.4.5. Usecase “Confirm a new course” (UC23) ....
3.3.4.6. Usecase “Manage private fight room”/Create
CHƯƠNG 4. THIẾT KẾ PHẦN MỀM ....................................................................
4.1.Thiết kế kiến trúc ......................................................
4.1.1.Front-end ..............................................................................................
4.1.2.
Back-end
4.1.2.1. Server Rest ....................................................
4.1.2.2.
4.2.Thiết kế cơ sở dữ liệu ...................................................................
4.2.1.Database Schema ..................................................................................
4.2.2.Mô tả Database Schema........................................................................
4.2.2.1.
4.2.2.2.
4.2.2.3.
4.2.2.4.
4.2.2.5.
4.2.2.6.
4.2.2.7.
4.2.2.8.
4.2.2.9.
4.2.2.10.
4.2.2.11.
4.2.2.12.
4.2.2.13.
4.2.2.14.
4.2.2.15.
4.3.Thiết kế lược đồ tuần tự ................................................................
4.3.1.Xác thực qua Token ..............................................................................
4.3.2.Làm bài thực hành khi luyện tập ...........................................................
4.3.3.Làm bài thực hành khi học tập ..............................................................
4.3.4.Làm bài thực hành khi thi đấu ..............................................................
4.3.5.Tạo bài thực hành .................................................................................
4.3.6.
Tạo cuộc
4.3.7.
Xét chứng
CHƯƠNG 5. THIẾT KẾ GIAO DIỆN .....................................................................
5.1.1.1. Screen Flow của ứng dụng quyền khách ..........................................
5.1.1.2. Screen flow cho ứng dụng quyền sinh viên ......................................
5.1.1.3. Screen flow cho ứng dụng quyền giáo viên ......................................
5.1.1.4. Screen flow cho ứng dụng quyền quản trị viên .................................
5.1.2.1. SCK01. Guest Dashboard Screen .....................................................
5.1.2.2. SCK02. Sign In Screen ....................................................................
5.1.2.3. SCK03. Sign Up Screen ...................................................................
5.1.2.4. SCK04. General Leader Board Screen .............................................
5.1.2.5. SCK05. View Certificate Screen ......................................................
5.1.2.6.
5.1.2.7.
5.1.2.8. SC003. Practice Diary Screen ..........................................................
5.1.2.9.
5.1.2.10.
5.1.2.11.
5.1.2.12. SC007. Fight Detail Screen ............................................................
5.1.2.13.
5.1.2.14. SC009. Solve Practice’s Problem Screen........................................
5.1.2.15. SC010. Solve Course’s Problem Screen .........................................
5.1.2.16.
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 ..........................................................................................
Hình 2.2: Luồng thực thi code online ........................................................................
Hình 2.3: Golang ......................................................................................................
----------------------------------------------Hình 3.1: Mơ hình các đối tượng của hệ thống ..........................................................
Hình 3.2: Quy trình cơ bản của một bài thực hành ....................................................
Hình 3.3: Quy trình làm bài thực hành ......................................................................
Hình 3.4: Quy trình xét chứng chỉ .............................................................................
Hình 3.5: Sơ đồ usecase ............................................................................................
----------------------------------------------Hình 4.1: Kiến trúc hệ thống Hocode ........................................................................
Hình 4.2: Cấu trúc thư mục Front-end ......................................................................
Hình 4.3: Cấu trúc thư mục Back-end .......................................................................
Hình 4.4: Cấu trúc comment go-swagger ..................................................................
Hình 4.5: Cấu trúc thư mục Runner Server ...............................................................
Hình 4.6: Database Schema ......................................................................................
Hình 4.7: Sequence Diagram xác thực token .............................................................
Hình 4.8: Sequence Diagram làm bài thực hành khi luyện tập ..................................
Hình 4.9: Sequence Diagram làm bài thực hành khi học tập .....................................
Trang vii
Hình 4.10: Sequence Diagram làm bài thực hành khi thi đấu ....................................
Hình 4.11: Sequence Diagram tạo bài thực hành .......................................................
Hình 4.12: Sequence Diagram tạo cuộc thi riêng tư ..................................................
Hình 4.13: Sequence Diagram tạo cuộc thi cơng khai ...............................................
Hình 4.14: Sequence Diagram xét chứng chỉ ............................................................
----------------------------------------------Hình 5.1: Screen flow cho ứng dụng quyền khách ....................................................
Hình 5.2: Screen flow cho ứng dụng quyền sinh viên ...............................................
Hình 5.3: Screen flow cho ứng dụng quyền giáo viên ...............................................
Hình 5.4: Screen flow cho ứng dụng quyền quản trị viên ..........................................
Hình 5.5: Giao diện trang SCK.01 Guest Dashboard Screen .....................................
Hình 5.6: Giao diện trang SCK02. Sign in Screen .....................................................
Hình 5.7: Giao diện trang SCK03. Sign Up Screen ...................................................
Hình 5.8: Giao diện trang SCK04. General Leader Board Screen .............................
Hình 5.9: Giao diên trang SCK05. View Certificate Screen ......................................
Hình 5.10: Giao diện trang SCK05.b View Certificate Screen .................................
Hình 5.11: Giao diện trang SC001. User Dashboard Screen (P1) ..............................
Hình 5.12: Giao diện trang SC001. User Dashboard Screen (P2) ..............................
Hình 5.13: Giao diện trang SC002. Profile Screen ....................................................
Hình 5.14: Giao diện trang SC003. Practice Diary Screen (P1) .................................
Hình 5.15: Giao diện trang SC003. Practice Diary Screen (P2) .................................
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) ...........................................
Hình 5.38: Giao diện trang Manage Problem Screen (3) ...........................................
Hình 5.39: Giao diện trang SCT03 Manage Problem Screen (4) .............................
Hình 5.40: Giao diện trang SCT03. Manage Problem (5) ........................................
Hình 5.41: Giao diện trang SCT03. Manage Problem Screen (6) ............................
Hình 5.42: Giao diện màn hình trang SCT04. Manage Fight Screen (1) ..................
Hình 5.43: Giao diện trang SCT04. Manage Fight Screen (2) .................................
Hình 5.44: Giao diện trang màn hình SCT04. Manage Fight Screen (3) ..................
Hình 5.45: Giao diện trang SCA01. Manage User Screen (1) ..................................
Hình 5.46: Giao diện trang SCA01. Manage User Screen (2) ..................................
Hình 5.47: Giao diện trang SCA01. Manage User Screen (3) ..................................
Hình 5.48: Giao diện trang SCA02. Manage Event Screen (1) ................................
Hình 5.49: Giao diện trang SCA02. Manage Event Screen (2) ................................
Hình 5.50: Giao diện trang SCA02. Manage Event Screen (3) ................................
Hình 5.51: Giao diện trang SCA03. Manage Book Screen (1).................................
Hình 5.52: Giao diện trang SCA03. Manage Book Screen (2).................................
Hình 5.53: Giao diện trang SCA03. Manage Book Screen (3).................................
Hình 5.54: Giao diện trang SCA04. Config Certificate Screen ................................
----------------------------------------------Hình 6.1: Hệ thống deloy server trên Google Cloud ................................................
Hình 8.1: Màn hình Trello phân chia cơng việc ......................................................
Trang x
Trang xi
DANH MỤC BẢNG
Bảng 3.1: Bảng mô tả sơ đồ UseCase .........................................................................
Bảng 3.2: Bảng đặc tả Usecase “Solve code” .............................................................
Bảng 3.3: Bảng đặc tả Usecase “Create Practice”.......................................................
Bảng 3.4: Bảng đặc tả Usecase “Consider Certificate” ...............................................
Bảng 3.5: Bảng đặc tả Usecase “Join a fight code” ....................................................
Bảng 3.6: Bảng đặc tả Usecase “Confirm a new course” ............................................
Bảng 3.7: Bảng đặc tả Usecase “Manage private fight room/Create” .........................
----------------------------------Bảng 4.1: Bảng mô tả sơ sở dữ liệu ............................................................................
Bảng 4.2: Đặc tả bảng User ........................................................................................
Bảng 4.3: Đặc tả bảng User_Course ...........................................................................
Bảng 4.4: Đặc tả bảng Course ....................................................................................
Bảng 4.5: Đặc tả bảng Minitask .................................................................................
Bảng 4.6: Đặc tả bảng User_Minitask_Practice..........................................................
Bảng 4.7: Đặc tả bảng User_Minitask_Favorite .........................................................
Bảng 4.8: Đặc tả bảng User_Minitask ........................................................................
Bảng 4.9: Đặc tả bảng Course_Type ..........................................................................
Bảng 4.10: Đặc tả bảng Task .....................................................................................
Bảng 4.11: Đặc tả bảng Task_Minitask ......................................................................
Bảng 4.12: Đặc tả bảng Event ....................................................................................
Bảng 4.13: Đặc tả bảng Book .....................................................................................
Bảng 4.14: Đặc tả bảng Fight .....................................................................................
Trang xii
Bảng 4.15: Đặc tả bảng Fight_User_Minitask ............................................................
Bảng 4.16: Đặc tả bảng Fight_User ............................................................................
----------------------------------Bảng 5.1: Mô tả screen flow cho quyền khách ...........................................................
Bảng 5.2: Bảng mô tả Screen flow cho ứng dụng quyền sinh viên .............................
Bảng 5.3: Bảng mô tả Screen flow cho ứng dụng quyền giáo viên .............................
Bảng 5.4: Bảng mô tả Screen flow cho ứng dụng quyền quản trị viên ........................
Bảng 5.5: Bảng đặc tả màn hình Guest Screen ...........................................................
Bảng 5.6: Bảng đặc tả màn hình Sign in Screen .........................................................
Bảng 5.7: Bảng đặc tả màn hình Sing Up Screen .......................................................
Bảng 5.8: Bảng đặc tả màn hình General Leader Board Screen ..................................
Bảng 5.9: Bảng đặc tả màn hình View Certificate Screen...........................................
Bảng 5.10: Bảng đặc tả màn hình User Dashoard Screen ...........................................
Bảng 5.11: Bảng đặc tả màn hình SC002. Profile Screen ...........................................
Bảng 5.12: Bảng đặc tả màn hình Practice Diary Screen ............................................
Bảng 5.13: Bảng đặc tả màn hình Practice Screen ......................................................
Bảng 5.14: Bảng đặc tả màn hình Course Screen .......................................................
Bảng 5.15: Bảng đặc tả màn hình Fights Screen .........................................................
Bảng 5.16: Bảng đặc tả màn hình Fight Detail Screen ................................................
Bảng 5.17: Bảng đặc tả màn hình Course Detail Screen .............................................
Bảng 5.18: Bảng đặc tả màn hình Solve Practice’s Problem Screen ...........................
Bảng 5.19: Bảng đặc tả màn hình Solve Course’s Problem Screen .............................
Bảng 5.20: Bảng đặc tả màn hình Solve Fight’s Problem Screen ...............................
Bảng 5.21: Bảng đặc tả màn hình Fight’s Leader Board Screen .................................
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
