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

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

Trang 1

THÀNH PHỐ HỒ CHÍ MINH

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

GVHD: NGUYỄN THANH PHƯỚC SVTH: NGUYỄN QUANG HIỀN MSSV: 16110070

SVTH: LÊ VĂN DUY MSSV: 16110035

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

SKL 0 0 7 0 8 3

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

Trang 2



ĐỒ ÁN TỐT NGHIỆP

ĐỀ TÀI:

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

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

NGUYỄN QUANG HIỀN 16110070

GVHD: THS NGUYỄN THANH PHƯỚC

SVTH:

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

Trang 3

NGÀNH CÔNG NGHỆ THÔNG TIN

NGUYỄN QUANG HIỀN 16110070

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

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

Trang 4

***

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

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:

bằng FB, chia sẻ trên FB, …)

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

Trang 5

***

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

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

Tp Hồ Chí Minh, ngày tháng năm 2020

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

Trang 6

***

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

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

Tp Hồ Chí Minh, ngày tháng năm 2020

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

Trang 7

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 hoàn thành đồ án này

Trong suốt quá trình hoà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 hoà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 hoà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 quý Thầy Cô và các bạn!

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

Nhóm sinh viên

Trang 8

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

Trang 9

Trang ii

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.2 Request 16

2.4.3 Response 16

2.4.4 Routing 16

2.5 MongoDB 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.2 JSX 19

2.6.3 Component 20

2.6.4 Life Circle 20

2.7 JUnit 22

Trang 10

Trang iii

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

CHƯƠNG 3 XÁC ĐỊNH YÊU CẦU BÀI TOÁN 24

3.1 Phân tích bài toá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 11

Trang iv

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 12

Trang v

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 13

Trang vi

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 14

Trang vii

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 15

Trang viii

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 16

Trang ix

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.32: Giao diện trang SCT02 Manage Task Screen (1) 93

Hình 5.36: Giao diện trang SCT03 Manage Problem Screen (1) 97

Trang 17

Trang x

Hình 5.38: Giao diện trang Manage Problem Screen (3) 99

Hình 5.40: Giao diện trang SCT03 Manage Problem (5) 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.48: Giao diện trang SCA02 Manage Event Screen (1) 110

Hình 5.51: Giao diện trang SCA03 Manage Book Screen (1) 113

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 18

Trang xi

Trang 19

Trang xii

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 20

Trang xiii

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 21

Trang xiv

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.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.32: Bảng đặc tả màn hình giao diện trang Manage Problem Screen (3) 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.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.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 22

Trang xv

Bảng 5.47: Bảng đặc tả màn hình Config Certificate Screen 117

Trang 23

Chương 1: Tổng quan Trang 1

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 Ngoà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 nguyên nhân sau:

để 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

và tự học

Trang 24

Vấn đề phải giải quyết bao gồm:

chọn lọc cho sinh viên tham gia và luyện tập

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:

Trang 25

o Tuyển tập những thách thức được người dùng yê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

 Ưu điểm:

Trang 26

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 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

Autocomplete

 Nhược điểm:

o Một số mà hình có giao diện khá đơn điệu

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

Trang 27

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

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

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

Trang 28

 Ư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:

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 hoà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

Trang 29

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

1.3.1 Mục tiêu

ReactJs, Golang và Docker

nhân

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ự

nhập bằng FB, chia sẻ trên FB, …)

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

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

Trang 30

Để triển khai hệ thống thông qua mạng Internet, nhóm sử dụng các dịch vụ cảu Google Cloud

1.5 Phạm vi nghiên cứu

Tìm hiểu và áp dụng các cộng nghệ sử dụng trong đề tài

ReactJS: xây dựng Single Page Application áp dụng reactJs và các thư viện liên quan Golang: Tìm hiểu về ngôn ngữ Golang, áp dụng server Rest API cho đề tài

Google Cloud: Tìm hiểu các dịch vụ của Google Cloud để triển khai hệ thống lên

Trang 31

Chương 2: Cơ sở lý thuyết Trang 9

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

2.1 Docker

2.1.1 Định nghĩa

Docker là dự án mã nguồn mở cung cấp công cụ giúp lập trình viên triển khai và chạy các ứng dụng nhanh và dễ dàng thông qua các container Mỗi container sẽ chứa các dependency cần thiết để chạy một ứng dụng

2.1.2 Cấu trúc

Docker sử dụng công nghệ máy ảo tuy nhiên khác với máy ảo thường khi mỗi máy ảo

sẽ chiếm rất nhiều tài nguyên của host thì Docker sử dụng công nghệ container để tạo môi trường tách biệt với host nhưng vẫn chia sẻ những tài nguyên chung chứ không chiếm hoàn toàn như máy ảo

Hình 2.1: Cấu trúc Docker

Docker có thể chạy hàng chục container cùng một lúc mà vẫn đảm bảo được hiệu năng cao cho ứng dụng Ngoài ra Docker còn giúp lập trình viên triển khai ứng dụng

Trang 32

nhanh chóng và ít rủi ro hơn khi dễ dàng thiết lập môi trường làm việc qua một lần cài đặt

2.2 Runner

2.2.1 Chức năng

Runner là chức năng được nhóm phát triển dựa trên thư viện Codewars-runner-cli giúp biên dịch code JAVA và kiểm tra code đúng bao nhiêu case trong bài kiểm thử Codewars-runner-cli là một dự án mã nguồn mở trước đây được Codewars và Qualified.io sử dụng để thực thi mã cho nhiều ngôn ngữ và thư viện kiểm thử khác nhau

Dự án là ứng dụng Node CLI app

Codewars-runner-cli có các chức năng sau:

Runner còn mở rộng các chức năng sau sau:

Trang 33

Hình 2.2: Luồng thực thi code online

2.2.2 Vấn đề

Có 2 vấn đề sau:

hành Window

trước xong mới chạy tiếp gây tình trạng không tận dụng được hết tài nguyên máy

Trang 34

2.2.3 Cách khắc phục

Giải pháp khắc phục:

ứng với code được gửi lên Sau đó run code thông qua container đó và nhận kết quả trả về cho người dùng

2.3 Golang

2.3.1 Giới thiệu

Golang hay Go là một ngôn ngữ lập trình mã nguồn mở được thiết kế dựa trên tư duy lập trình hệ thống, phát triển bởi một nhóm chuyên gia tại Google Cụ thể ngôn ngữ Golang được hình thành bởi Robert Griesemer, Rob Pike và Ken Thompson Golang hỗ trợ lập trình viên sử dụng bộ nhớ một cách hiệu quả, bộ thu gom rác và lập trình đa luồng

Hình 2.3: Golang

Trang 35

Go được kỳ vọng sẽ khai thác nền tảng đa lõi Thay vì chỉ có hệ điều hành được phép cấp tài nguyên và xử lý, thì các phần mềm cũng có thể tương tác trực tiếp với nền tảng

đa lõi giúp cho việc xử lý nhanh hơn

2.3.2 Ưu điểm của Golang

chương trình khi chạy sẽ được chuyển sang dạng nhị phân để đảm bảo rằng vi

sẽ chuyển tiếp sang dạng nhị phân để vi xử lý có thể hiểu được

Go là ngôn ngữ biên dịch nên mã nguồn sẽ được chuyển sang dạng nhị phân để thực thi chứ không cần thông qua trình biên dịch Vì vậy, Go sẽ giúp ta tăng hiệu xuất làm việc đáng kể

Hình 2.1: So sánh ngôn ngữ biên dịch và ngôn ngữ thông dịch

Trang 36

hệ điều hành biên dịch Sau khi biên dịch, chỉ cần copy đến hệ điều hành đích

và chạy

kỳ của môi trường đơn luồng Do đó, việc xử lý đa luồng trên các ngôn ngữ này gặp một số khó khăn Tuy nhiên, Go được ra mắt vào năm 2009 khi mà các vi xử lý đa nhân đã phổ biến, phần cứng máy tính có thể mở rộng core

khiến cho Go trờ thành ngôn ngữ dẽ dàng mở rộng hơn

dàng tiếp cận, bảo trì và mở rộng Đặc biệt, Go đã loại bỏ một số tính chất hướng đối tượng như:

o Go sử dụng struct thay vì class

o Go không hỗ trợ kế thừa

o Go không có hàm khởi tạo

o Go không có chú thích (annotation)

o Go không có exception, không có cú pháp try/catch

2.3.3 Nhược điểm của Golang

 Quá đơn giản: việc tinh gọn một số tính chất hướng đối tượng và cú pháp

khiến mã nguồn trở nên lỏng lẻo

 Kích thước của chương trình: mã nguồn được biên dịch tĩnh theo mặc định

Nó làm đơn giản hóa quá trình xây dựng và triển khai, nhưng dẫn đến việc chỉ một đoạn code đơn giản nặng khoảng 1,5MB trên Windows 64-bit Có những giải pháp cho việc này là nén file hoặc xoá bỏ thông tin về debug của

Go

Trang 37

2.3.4 Tại sao chọn Golang

Trang 38

Trang 39

MongoDB là một cơ sở dữ liệu hướng tài liệu, dữ liệu được lưu dưới dạng bảng thay

vì bảng như cơ sở dữ liệu quan hệ Do đó, việc truy vấn trở nên nhanh hơn rất nhiều

MongoDB sử dụng Collection thay vì Table và Document thay cho Row Các collection được cấu trúc rất linh hoạt, dữ liệu không cần tuân theo cấu trúc nhất định

2.5.2 Ưu điểm của MongoDB

dữ liệu được lưu dưới dạng hướng tài liệu JSON nên ta có thể chèn bất cứ thông tin mình mong muốn

giúp tiết kiệm tối đa thời gian thao tác dữ liệu vì MongoDB không cần phải kiểm tra các ràng buộc dữ liệu khi ta thao thác

sở dữ liệu quan hệ

Trang 40

chứa dữ liệu giao tiếp với nhau, vì vậy khi muốn mở rộng ta chỉ cần thêm mới node vào cluster

2.5.3 Nhược điểm

MongoDB, vì vậy khi thao tác dữ liệu người dùng phải hết sức cẩn thận

lặp lại key Việc không có ràng buộc dữ liệu cũng dẫn đến việc thừa dữ liệu

2.5.4 Tại sao chọn MongoDB

Do website thao tác dữ liệu nhiều và có một số chức năng sử dụng đòi hỏi phải lấy dữ liệu real-time nên nhóm muốn tìm một hệ quản trị cơ sở dữ liệu có thể đáp ứng được hai tiêu chí trên mà vẫn đem lại hiệu năng tốt

MongoDB có thể đảm bảo khả năng truy xuất ở tốc độ tốt với một số lượng lớn dữ liệu Hơn nữa MongoDB cũng phù hợp với những hệ thống real-time Do đó, nhóm quyết định chọn MongoDB

Định dạng
Số trang	146
Dung lượng	7,06 MB