- Thẻ Thẻ Thẻ Thẻ 2.2 Giao diện quản lý học 2.2.1 Thiết kế giao diện Hình 55 Giao diện quản lý học 2.2.2 Danh sách xử lý STT Tên đối tượng Thẻ Thẻ Thẻ
- Thẻ Thẻ Thẻ 71 Thẻ Thẻ Bảng 38 Mô tả chi tiết giao diện 2.3 Giao diện quản lý thử thách 2.3.1 Thiết kế giao diện Hình 56 Giao diện quản ls thử thách 2.3.2 Danh sách xử lý STT Tên đối tượng Thẻ Thẻ Thẻ
- Thẻ Thẻ Thẻ Thẻ Thẻ Thẻ 10 Thẻ 11 Thẻ 12 Thẻ 13 Thẻ 14 Thẻ CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 1.CÀI ĐẶT 1.1 Cài đặt server compile Repository: https://github.com/dattran01477/compilercode B1 Set up environment 73 Cài đặt java JDK 1.8 trở lên (https://www.oracle.com/technetwork/java/javase/downloads/jdk8downloads-2133151.html.) Hệ điều: unbutu Cài đặt docker ( https://docs.docker.com/engine/install/ubuntu/ ) B2 Create image docker Clone sourse code repository Vào thư mục ‘Setup’ run file script tương ứng với version unbuntu Sau tạo thành công image Ta add project vào eclipse chạy spring boot theo bước sau: Vào file -> import -> import project maven -> chọn thư mục project ấn import 74 Hình 57 Import dự án chạy eclipse (1) 75 Hình 58 Import dự án chạy eclipse (2) Run file ItcodewebApplication JavaApplication Spring boot Ứng dụng chạy port 8080 1.2 Cài đặt server nodejs Repository: https://github.com/hquanitute/LearnCode_Server Clone project repository máy local Sau gõ npm install -> node start Ứng dụng chạy port 5000 1.3 Cài đặt client reactjs Repository: https://github.com/hquanitute/LearnCode_Client.git 76 Clone project repository máy local Chạy lệnh npm install -> npm build -> npm start Ứng dụng chạy port 3000 1.4 Cài đặt admin reactjs Repository: https://github.com/hquanitute/LearnCode_Admin.git Clone project repository máy local Chạy lệnh npm install -> npm build -> npm start Ứng dụng chạy port 3001 2.KIỂM THỬ - Thực lập (test plan, test case chi tiết), sau thực kiểm thử chéo ( thành viên đảm nhiệm lập trình chức kiểm thử thành viên khác ngược lại.) Test case ID LOG_01 LOG_02 LEARN_01 LEARN_02 LEARN_03 FORUM_01 FORUM_02 FORUM_03 FORUM_04 TOPIC_01 TOPIC_02 TOPIC_03 79 - Chọn bình luận - Sau ấn vào button vote Hình 59 Danh sách test case PHẦN KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC Xây dựng hệ thống compiler code cho nhiều ngôn ngữ bao gồm thành phần: Container docker cho ngôn ngữ (java, python, javascript) Rest api cho client Xây dựng hệ thống client nodejs sử dụng hệ thống compile code để xây dựng trang web cho người dùng có thể: Học lý thuyết thực hành Có thể thảo luận đóng góp xây dựng thơng qua forum riêng KHÓ KHĂN Trong việc xây dựng hệ thống docker cho tương thích với hệ thống spring boot Xử lý đầu vào code test case để thực thi Xử lý đầu sau thực thi code thành công gửi code cho người dùng Thiết kế hệ thống cho phù hợp với khả mở rộng thêm nhiều ngôn ngữ ƯU ĐIỂM Giao diện dễ sử dụng Giao diện code rõ ràng có hiển thị màu cho loại code Thực thi cho ngơn ngữ java, python, js 80 Có forum cho người dùng thảo luận đóng góp câu hỏi hay HẠN CHẾ Một số chức chưa hoàn chỉnh Việc thực thi code chậm cần tối ưu Chưa hỗ trợ nhiều ngôn ngữ code KINH NGHIỆM ĐẠT ĐƯỢC Hiểu thêm kiến thức để xây dựng hệ thống image docker Có thêm kiến thức deploy cho hệ thống docker Có thêm Kiến thức nodejs, reactjs, spring boot Hiểu chế hoạt động trang web học code online HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI Tối ưu hóa tốc độ biên dịch code Hỗ trợ nhiều ngôn ngữ Tích hợp giải nhiều ngơn ngữ cho thử thách Xây dựng hệ thống xếp hạng người dùng Tối ưu phần biên soạn thử thách thành đơn giản DANH MỤC TÀI LIỆU THAM KHẢO https://docs.docker.com/get-started/ https://reactjs.org/docs/getting-started.html https://nodejs.org/en/docs/ https://expressjs.com/en/api.html https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/ https://docs.spring.io/spring/docs/current/spring-framework-reference/ https://docs.mongodb.com/ https://www.markdownguide.org/basic-syntax/ https://stackoverflow.com/ https://www.digitalocean.com/docs/ https://tailwindcss.com/docs/installation/ https://ant.design/docs/react/introduce 81 https://redux.js.org/ https://github.com/reduxjs/redux-thunk https://github.com/rui314/8cc https://docs.ubuntu.com/ https://stackoverflow.com/questions/48787524/multiple-languages-in- docker-container https://github.com/remoteinterview/compilebox 82 ... NĂM HỌC 2019 – 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ĐỀ TÀI: XÂY DỰNG WEBSITE HỌC LẬP TRÌNH BẰNG SPRING BOOT DOCKER, NODEJS, REACTJS. ..TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ĐỀ TÀI: XÂY DỰNG WEBSITE HỌC LẬP TRÌNH BẰNG SPRING BOOT DOCKER, NODEJS, REACTJS SINH VIÊN... Nguyễn Hồng Qn MSSV 2: 16110429 Ngành: Cơng nghệ phần mềm Tên đề tài: Xây dựng website học lập trình spring boot, docker, nodejs, reactjs Họ tên Giáo viên hướng dẫn: Nguyễn Minh Đạo Về nội dung đề
