Đồ án HCMUTE: Tìm hiểu ReactJS và Golang trong phát triển ứng dụng học Java

Đồ án nghiên cứu hcmute tìm hiểu reactjs golang xây dựng và phát triển ứng dụng hỗ trợ học code java, áp dụng công nghệ tiên tiến, tối ưu giải pháp kỹ thuật cho bài toán kỹ thuật.

Chuyên ngành

Công Nghệ Thông Tin

Người đăng

Ẩn danh

Thể loại

Đồ án tốt nghiệp

2020

146
1
0

Phí lưu trữ

35 Point

Mục lục chi tiết

LỜI CẢM ƠN

1. CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG

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

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

1.3. Công nghệ lập trình

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

1.5. Cách khắc phục

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

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

1.8. Tại sao chọn Golang

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

1.10. Nhược điểm

1.11. Tại sao chọn MongoDB

2. CÁC TÍNH NĂNG CỦA JUNIT

2.1. XÁC ĐỊNH YÊU CẦU BÀI TOÁN

2.2. Phân tích bài toán

2.3. Quy trình nghiệp vụ

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

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

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

2.7. Mô hình hóa chức năng

2.8. Danh sách các Actor

2.9. Mô tả sơ đồ usecase

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

2.10.1. Usecase “Sovle code” (UC05)

2.10.2. Usecase “Create Practice” (UC18/Create)

2.10.3. Usecase “Consider Certificate” (UC25)

2.10.4. Usecase “Join a fight code” (UC12)

2.10.5. Usecase “Confirm a new course” (UC23)

2.10.6. Usecase “Manage private fight room”/Create (UC10)

4. THIẾT KẾ PHẦN MỀM

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

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

4.2.1. Mô tả Database Schema

4.2.2. Bảng User_Course

4.2.3. Bảng User_Minitask_Practice

4.2.4. Bảng User_Minitask_Favorite

4.2.5. Bảng User_Minitask

4.2.6. Bảng Course_Type

4.2.7. Bảng Task_Minitask

4.2.8. Bảng Fight_User_Minitask

4.2.9. Bảng Fight_User

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

4.2.11. Xác thực qua Token

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

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

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

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

4.4. Tạo cuộc thi

4.5. Xét chứng chỉ

4.6. THIẾT KẾ GIAO DIỆN

4.6.1. Screen Flow của ứng dụng quyền khách

4.6.2. Screen flow cho ứng dụng quyền sinh viên

4.6.3. Screen flow cho ứng dụng quyền giáo viên

4.6.4. Screen flow cho ứng dụng quyền quản trị viên

4.6.5. Guest Dashboard Screen

4.6.6. Sign In Screen

4.6.7. Sign Up Screen

4.6.8. General Leader Board Screen

4.6.9. View Certificate Screen

4.6.10. User Dashboard Screen

4.6.11. Practice Diary Screen

4.6.12. Fight Detail Screen

4.6.13. Course Detail Screen

4.6.14. Solve Practice’s Problem Screen

4.6.15. Solve Course’s Problem Screen

4.6.16. Solve Fight’s Problem Screen

5. Fight’s Leader Board Screen

5.1. Update Fight Screen

5.2. Create Fight Screen

5.3. Manage Course Screen

5.4. Manage Task Screen

5.5. Manage Problem Screen

5.6. Mange Fight Screen

5.7. Manage User Screen

5.8. Manage Event Screen

5.9. Manage Book Screen

5.10. Config Certificate Screen

KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

KẾ HOẠCH VÀ PHÂN CHIA CÔNG VIỆC

Tóm tắt

I. Giới thiệu ứng dụng hỗ trợ học Java với ReactJS và Golang

Đồ á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" tập trung vào việc xây dựng một ứng dụng hỗ trợ học Java trực tuyến. Ứng dụng này sử dụng ReactJS cho frontendGolang cho backend, nhằm cung cấp một môi trường học tập hiệu quả cho sinh viên. Ứng dụng học lập trình Java này giải quyết vấn đề thiếu các nguồn tài nguyên học tập chất lượng và cơ chế thúc đẩy sinh viên thực hành code thường gặp ở các trường đại học. Ứng dụng hướng đến việc tạo một nền tảng học Java online với nhiều bài tập, khóa học Java, và tài liệu học Java được tuyển chọn. Mục tiêu là tạo ra một ứng dụng học tập tương tác cao, hỗ trợ sinh viên học lập trình Java cơ bản, nâng cao kỹ năng lập trình và chuẩn bị tốt hơn cho sự nghiệp.

1.1 Phân tích yêu cầu và thiết kế kiến trúc

Ứng dụng được thiết kế để đáp ứng các yêu cầu sau: Cung cấp môi trường thực hành code trực tuyến; Cung cấp nhiều bài tập lập trình Java cơ bản và nâng cao; Tích hợp hệ thống quản lý tài khoản người dùng; Cho phép người dùng tạo, tham gia và theo dõi tiến trình của các khóa học Java. Về kiến trúc, ứng dụng sử dụng mô hình client-server. Phần frontend ReactJS tương tác trực tiếp với người dùng, xử lý giao diện người dùng và gửi yêu cầu đến backend. Phần backend Golang xử lý logic nghiệp vụ, quản lý dữ liệu, và cung cấp API Java cho frontend. Kết nối frontend và backend được thực hiện thông qua các API Golang. Ứng dụng sử dụng cơ sở dữ liệu để lưu trữ thông tin người dùng, khóa học, và bài tập. Việc sử dụng ReactJSGolang cho phép xây dựng một ứng dụng full-stack development mạnh mẽ và hiệu quả. Thiết kế cũng xem xét đến khả năng mở rộng và bảo mật của ứng dụng trong tương lai. Thiết kế ứng dụng bao gồm các màn hình quản lý khóa học, bài tập, người dùng, và bảng xếp hạng. Kiến trúc ứng dụng đảm bảo tính linh hoạt và dễ bảo trì.

1.2 Triển khai và tích hợp ReactJS và Golang

Việc triển khai ứng dụng bao gồm các bước chính: Xây dựng ứng dụng ReactJS cho giao diện người dùng; Phát triển backend Golang với các API Golang cho phép frontend tương tác; Thiết lập cơ sở dữ liệu và tích hợp với backend. Tích hợp ReactJS và Golang đòi hỏi sự phối hợp chặt chẽ giữa hai nhóm phát triển. Các thư viện ReactJSthư viện Golang được sử dụng một cách hiệu quả để đảm bảo chất lượng và hiệu suất của ứng dụng. Phát triển ứng dụng ReactJS bao gồm thiết kế giao diện thân thiện, dễ sử dụng, và hiệu quả. Phát triển backend với Golang tập trung vào việc xây dựng các API Golang ổn định, bảo mật, và hiệu quả. Quá trình test ứng dụngdebug ứng dụng được thực hiện thường xuyên để đảm bảo chất lượng sản phẩm. Việc tuân thủ best practices Java, best practices ReactJS, và best practices Golang trong quá trình phát triển là yếu tố quan trọng để tạo ra một ứng dụng chất lượng cao. Framework ReactJSframework Golang được lựa chọn phù hợp để tối ưu hóa quá trình phát triển.

1.3 Đánh giá và ứng dụng thực tiễn

Ứng dụng này có tiềm năng ứng dụng rộng rãi trong giáo dục trực tuyến. Nó cung cấp một giải pháp hiệu quả cho việc học lập trình Java online. Ứng dụng giáo dục này cho phép sinh viên học tập ở bất cứ đâu, bất cứ khi nào. Khả năng theo dõi tiến trình học tập giúp giáo viên đánh giá hiệu quả giảng dạy. Ứng dụng hỗ trợ học tập này cũng khuyến khích sự tự học và rèn luyện kỹ năng lập trình của sinh viên. Ứng dụng hỗ trợ học tập này có thể được mở rộng để hỗ trợ nhiều ngôn ngữ lập trình khác. Source code ứng dụng có thể được sử dụng làm tài liệu tham khảo cho sinh viên và nhà phát triển. Phân tích yêu cầu ứng dụng và quá trình thiết kế có thể được sử dụng làm bài học cho các dự án phát triển phần mềm tương tự. Ứng dụng này cần được tiếp tục phát triển và cải thiện để đáp ứng nhu cầu ngày càng cao của người dùng. Bảo mật ứng dụng cũng cần được chú trọng để đảm bảo an toàn thông tin người dùng.

01/02/2025

Trích đoạn nội dung tài liệu

Chương 1: Tổng quan Trang 2 do an Báo cáo đồ án tốt nghiệp 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.  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. 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 do an Báo cáo đồ án tốt nghiệp 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.

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 soá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.

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.2: CodeLearn Chương 1: Tổng quan Trang 4 do an Báo cáo đồ án tốt nghiệp 1. 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.

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 do an 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 soá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. 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.

Chương 1: Tổng quan Trang 6 do an Báo cáo đồ án tốt nghiệp 1. Mục tiêu và nhiệm vụ đề tài 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. 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.

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 do an Báo cáo đồ án tốt nghiệp Để 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. 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 mạng Docker: Tìm hiểu các hoạt động của Docker và viết Docker file cho máy ảo biên dịch code java Runner: Tìm hiểu cách thức hoạt động của một hệ thống code online và áp dụng vào đề tài Chương 1: Tổng quan Trang 8 do an Báo cáo đồ án tốt nghiệp CHƯƠNG 2. Đị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.

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.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 Chương 2: Cơ sở lý thuyết Trang 9 do an Báo cáo đồ án tốt nghiệp 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. 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:  Có thể chạy được đa ngôn ngữ.  Kết quả trả về kèm thời gian thực thi. Runner còn mở rộng các chức năng sau sau:  Viết API service để gọi Node CLI từ web client.

 Format lại đầu ra thân thiện với người dùng.  Có hiệu năng ổn định khi chạy nhiều lệnh cùng lúc. Chương 2: Cơ sở lý thuyết Trang 10 do an Báo cáo đồ án tốt nghiệp Hình 2.2: Luồng thực thi code online 2. Vấn đề Có 2 vấn đề sau:  Vấn đề 1: Thư viện Codewars-runner-cli không hỗ trợ cấu hình trên hệ điều hành Window.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ

Bài viết "Xây dựng ứng dụng hỗ trợ học Java với ReactJS và Golang" cung cấp cái nhìn sâu sắc về cách kết hợp các công nghệ hiện đại để phát triển một ứng dụng học tập hiệu quả. Tác giả trình bày chi tiết quy trình xây dựng ứng dụng, từ việc thiết kế giao diện người dùng bằng ReactJS cho đến việc xử lý backend với Golang. Những lợi ích mà bài viết mang lại cho độc giả bao gồm việc nắm vững các công nghệ lập trình phổ biến, cải thiện kỹ năng phát triển ứng dụng, và tạo ra một công cụ học tập hữu ích cho người dùng.

Nếu bạn muốn mở rộng kiến thức của mình về các chủ đề liên quan, hãy tham khảo bài viết Luận văn thạc sĩ khoa học máy tính xây dựng ứng dụng monocular full slam, nơi bạn có thể tìm hiểu về các ứng dụng trong lĩnh vực thị giác máy tính. Ngoài ra, bài viết Nghiên cứu xây dựng cloud storage và vpn trong điện toán đám mây sử dụng devstack luận văn thạc sĩ sẽ giúp bạn hiểu rõ hơn về các giải pháp lưu trữ đám mây. Cuối cùng, bài viết Luận văn tốt nghiệp khoa học máy tính hệ thống đánh giá luận văn tốt nghiệp cũng rất hữu ích cho những ai quan tâm đến việc phát triển hệ thống đánh giá trong lĩnh vực công nghệ thông tin. Những tài liệu này sẽ giúp bạn mở rộng kiến thức và ứng dụng vào thực tiễn.