- Danh sách khóa học Thẻ Tên khóa học Thêm khóa học Xóa khóa học Cho phép xuất sau tạo hay Thẻ không Thẻ Thứ tự xếp Thẻ Danh sách học Bảng 37 Mô tả chi tiết giao diện quản lý khóa học 70 an 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 Điều kiện gọi thực Chức Thẻ Thêm học Thẻ Xóa học Thẻ
- Danh sách học theo khóa học Thẻ Tên học Cho phép xuất sau tạo hay Thẻ không Thẻ Thứ tự xếp 71 an Chuyển sang chế độ Thẻ chỉnh sửa Danh sách thử thách Thẻ học Bảng 38 Mô tả chi tiết giao diện quản lý học 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 Điều kiện gọi thực Chức Thẻ Thẻ Thẻ
- Danh sách thử thách Thẻ Tên thử thách Thêm thử thách Xóa thử thách 72 an Thứ tự thử thách Thẻ học Thẻ Loại thử thách Thẻ Thời gian làm Thẻ 10 11 12 Id câu hỏi forum Có published sau Thẻ tạo hay khơng Có bắt buộc Thẻ học hay không Code trước chạy Thẻ test Code sau chạy Thẻ 13 Thẻ 14 Thẻ test Mô tả thử thách Chuyển sang chế độ chỉnh sửa thử thách Bảng 39 Mô tả chi tiết giao diện thử thách CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ CÀI ĐẶT 1.1 Cài đặt server compile Repository: https://github.com/dattran01477/compilercode B1 Set up environment 73 an 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 an Hình 57 Import dự án chạy eclipse (1) 75 an 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 an 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 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 Test case Test steps Expected Result Status Đăng nhập với - Truy cập Không cho phép PASS tài khoản vào hệ thống đăng nhập description LOG_01 không - Thực đăng nhập cho phép với tài khoản chưa đăng ký LOG_02 Đăng nhập với - Truy cập Cho phép đăng tài khoản vào nhập vào trang thống web - Thực đăng nhập với tài khoản đăng ký 77 an PASS LEARN_01 Thực gửi Truy cập Thông báo lỗi cú làm với vào hệ pháp code thống không hợp lệ - - PASS Vào phần làm - Thực submit làm LEARN_02 Thực - Truy cập Thông báo thành submit làm vào hệ công challenge thống - PASS Vào phần làm Thực submit làm LEARN_03 Hiển thị đầy Truy cập Hiển thị đầy đủ đủ thông tin vào hệ thông tin bài làm thống làm(nội dung mô Vào phần tả, code mẫu) - - PASS làm FORUM_01 Kiểm tra hệ - Truy cập Khi ấn vào phân thông phân vào hệ thống trang liệu trang forum load Ấn vào số - PASS trang muốn đến FORUM_02 Kiểm tra phân - Truy cập Hiển thị đầy đủ loại topic theo vào hệ thống topic theo danh mục forum 78 an danh mục PASS - Ấn vào danh mục muốn FORUM_03 Kiểm tra - Truy cập Hiển thị đầy đủ thông tin hiển vào hệ thống thông tin thị forum topic PASS topic(tên, thời gian, avatar, số lượt bình luận, số lượt view ) FORUM_04 Không cho - Hiển thị yêu cầu phép tạo vào hệ thống người dùng đăng Topic forum chưa đăng - nhập TOPIC_01 Truy cập Kiểm tra hiển nhập Click nút New Topic - thị thông tin topic PASS - Truy cập Hiển thị đầy đủ vào forum thông tin Ấn vào topic(tên, thời topic gian, avatar, số PASS lượt bình luận, số lượt view, nội dung, bình luận ) TOPIC_02 Kiểm tra - comment viết - Vào Hiển thị bình topic luận lên PASS Ấn vào “add comment” - Nhập nội dung TOPIC_03 Vote bình luận - ấn post - Vào Tăng lượt vote topic người dùng 79 an PASS - 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 an 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 an 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-dockercontainer https://github.com/remoteinterview/compilebox 82 an S an K L 0 ... NĂM HỌC 2019 – 2020 an 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... Hoàng Quân 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 đề