(Đồ án 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

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 SKL 0 Tp Hồ Chí Minh, tháng 07/2020 an 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 16110070 LÊ VĂN DUY 16110035 KHÓA: 2016 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng năm 2020 an 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 16110070 LÊ VĂN DUY 16110035 KHÓA: 2016 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng năm 2020 an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – 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ọ tên: Nguyễn Quang Hiền MSSV: 16110070 Lớp: 161100CLST1 Họ 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 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 Nội dung thực đề tài:  Tìm hiểu, tham khảo chức giao diện hệ thống tương tự  Tìm hiểu Docker server thực thi code  Tìm hiểu ReactJs Golang để chỉnh sửa xây dựng tính  Xây dựng trang web thân thiện, có liên kết với mạng xã hội (đăng nhập FB, chia sẻ FB, …)  Bổ sung tính cịn thiếu quản lí khóa học, tập  Tạo leaderboard chung riêng khóa học  Xây dựng thêm tính thi đấu người dùng qui định thời gian số lượt làm tập để tăng tính cạnh tranh việc học code Sản phẩm: Source code, API document, ứng dụng deloy TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ tên: Nguyễn Quang Hiền MSSV: 16110070 Họ 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 phát triển ứng dụng hỗ trợ học code Java Họ tên giáo viên hướng dẫn: ThS Nguyễn Thanh Phước NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: …………………………………………………………………………………………… Ưu điểm …………………………………………………………………………………………… ……………………………………………………………………………………………… Khuyết điểm …………………………………………………………………………………………… ……………………………………………………………………………………………… Đề nghị cho bảo vệ hay không ? …………………………………………………………………………………………… Đánh giá loại: …………………………………………………………………………………………… Điểm:……………………………Bằng chữ: Tp Hồ Chí Minh, ngày tháng năm 2020 Giảng viên hướng dẫn an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Họ tên: Nguyễn Quang Hiền MSSV: 16110070 Họ 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 phát triển ứng dụng hỗ trợ học code Java Họ tên giáo viên hướng dẫn: ThS Nguyễn Thanh Phước NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: …………………………………………………………………………………………… Ưu điểm …………………………………………………………………………………………… ……………………………………………………………………………………………… Khuyết điểm …………………………………………………………………………………………… ……………………………………………………………………………………………… Đề nghị cho bảo vệ hay không ? …………………………………………………………………………………………… Đánh giá loại: …………………………………………………………………………………………… Điểm:……………………………Bằng chữ: Tp Hồ Chí Minh, ngày tháng Giảng viên phản biện an 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 Trong suốt q trình hồn thiện đồ án nhóm nhận kiến thức vơ 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 Nhóm xin gửi lời cảm ơn đến thầy nhờ tận tâm 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 thầy cô, người giảng dạy, trang bị cho nhóm kiến thức quý báu suốt năm học vừa qua Mặc dù nhóm cố gắng hồn thiện thật tốt đồ án thời gian có hạn nên khơng thể tránh khỏi sai sót, nhóm mong nhận đƣợc cảm thơng, ý kiến đóng góp q Thầy Cơ bạn! Nhóm xin chân thành cảm ơn! Nhóm sinh viên an MỤC LỤC CHƯƠNG TỔNG QUAN 1.1 Khảo sát trạng 1.1.1 LeetCode 1.1.1.1 Giới thiệu 1.1.1.2 Tính 1.1.1.3 Kết luận 1.1.2 CodeLearn 1.1.2.1 Giới thiệu 1.1.2.2 Tính 1.1.2.3 Kết luận 1.2 Tính cấp thiết đề tài 1.3 Mục tiêu nhiệm vụ đề tài 1.3.1 Mục tiêu 1.3.2 Nhiệm vụ 1.4 Công nghệ lập trình 1.5 Phạm vi nghiên cứu CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Docker 2.1.1 Định nghĩa 2.1.2 Cấu trúc 2.2 Runner 10 an 2.2.1 Chức 10 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 Golang 13 2.3.3 Nhược điểm Golang 14 2.3.4 Tại chọn Golang 15 2.4 Echo Framework 16 2.4.1 Giới thiệu 16 2.4.2 Request 16 2.4.3 Response 16 2.4.4 Routing 16 2.5 MongoDB 17 2.5.1 Giới thiệu 17 2.5.2 Ưu điểm MongoDB 17 2.5.3 Nhược điểm 18 2.5.4 Tại chọn MongoDB 18 2.6 ReactJS 19 2.6.1 Giới thiệu 19 2.6.2 JSX 19 2.6.3 Component 20 2.6.4 Life Circle 20 2.7 JUnit 22 Trang ii an 2.7.1 Giới thiệu 22 2.7.2 Các tính JUnit 23 CHƯƠNG XÁC ĐỊNH YÊU CẦU BÀI TOÁN 24 3.1 Phân tích tốn 24 3.2 Quy trình nghiệp vụ 25 3.2.1 Quy trình làm thực hành, thi 25 3.2.2 Quy trình kiểm thử 26 3.2.3 Quy trình xét chứng 27 3.3 Mơ hình hóa chức 28 3.3.1 Danh sách Actor 28 3.3.2 Sơ đồ Usecase 28 3.3.3 Mô tả sơ đồ usecase 29 3.3.4 Đặc tả số usecase 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 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 iii an Báo cáo đồ án tốt nghiệp Quyền True Input Lưu thay đổi True Button Lưu thay đổi True Button 10 Xóa True Button 5.1.2.25 Data từ API Nhập quyền hạn người dùng Khi click vào lưu thay đổi chủ đề chuyển sang hình SCA01(1) Khi click lưu thay đổi user khơng trở hình SCA01(1) Khi click vào ẩn user danh sách user khơng xóa database SCA02 Manage Event Screen  Quản lý danh sách kiện Hình 5.48: Giao diện trang SCA02 Manage Event Screen (1) Bảng 5.41: Bảng đặc tả hình Manage Event Screen (1) No Name Required Format Tạo True Button Xuất False Button Reference Chương 5: Thiết kế giao diện Note Khi click chuyển sang trang tạo event Khi click xuất danh sách event file csv Trang 110 an Báo cáo đồ án tốt nghiệp Tên kiện Link kiện Hình kiện True Text True Text True Text Sửa True Input Xóa True Button Data từ API Data từ API Data từ API Hiển thị tên kiện Hiển thị link kiện Hiển thị hình kiện Khi click chuyển sang hình SCA02(3) Khi click khơng hiển thị kiện danh sách kiện khơng xóa kiện database  Thêm kiện Hình 5.49: Giao diện trang SCA02 Manage Event Screen (2) Bảng 5.42: Bảng đặc tả hình Manage Event Screen (2) No Name Required Format Tên kiện True Input Link kiện False Input Chương 5: Thiết kế giao diện Reference Note Nhập vào tên kiện, không để trống Nhập vào Link kiện, không để trống Trang 111 an Báo cáo đồ án tốt nghiệp Hình True kiện Nội dung True kiện Lưu True Nhập vào đường dẫn hình kiện Nhập vào nội dung kiện Khi click tạo kiện database chuyển sang hình SCA02(1) Input Input Button  Chỉnh sửa kiện Hình 5.50: Giao diện trang SCA02 Manage Event Screen (3) Bảng 5.43: Bảng đặc tả hình Manage Event Screen (3) No Name ID Sự kiện Tên kiện Link kiện Hình kiện Required Format Reference Data từ True Input API Data từ True Input API Data từ False Input API Data từ True Input API Chương 5: Thiết kế giao diện Note Hiển thị ID kiện Nhập vào tên kiện, không để trống Nhập vào Link kiện, khơng để trống Nhập vào đường dẫn hình kiện Trang 112 an Báo cáo đồ án tốt nghiệp Nội dung True kiện Input Lưu True Button Lưu True Button Xóa True Button 5.1.2.26 Data từ API Nhập vào nội dung kiện Khi click tạo kiện database chuyển sang hình SCA02(1) Khi click lưu thay đổi Khi click không hiển thị kiện danh sách kiện, khơng xóa kiện database trở trang danh sách kiện SCA03 Manage Book Screen  Quản lý danh sách sách lập trình Hình 5.51: Giao diện trang SCA03 Manage Book Screen (1) Bảng 5.44: Bảng đặc tả hình Manage Book Screen (1) No Name Required Format Reference Tạo True Button Xuất False Button Tên sách True Text Chương 5: Thiết kế giao diện Data từ API Note Khi click vào chuyển sang trang tạo sách Khi click vào xuất danh sách sách file csv Hiển thị tên sách Trang 113 an Báo cáo đồ án tốt nghiệp Hình sách True Image Sửa True Button Xóa True Button Data từ API Hiển thị hình sách Khi click chuyển sang hình SCA03(3) Khi click khơng hiển thị sách trang danh sách sách khơng xóa database  Thêm sách Hình 5.52: Giao diện trang SCA03 Manage Book Screen (2) Chương 5: Thiết kế giao diện Trang 114 an Báo cáo đồ án tốt nghiệp Bảng 5.45: Bảng đặc tả hình Manage Book Screen (2) No Name Required Format Reference Tên sách True Input Hình sách True Input Nội dung True Input Lưu True Button Note Nhập vào tên sách, không để trống Nhập vào đường dẫn hình sách, khơng để trống Nhập vào nội dung sách Khi click thêm sách vào database chuyển sang hình SCA03(1)  Chỉnh sửa thơng tin sách Hình 5.53: Giao diện trang SCA03 Manage Book Screen (3) Chương 5: Thiết kế giao diện Trang 115 an Báo cáo đồ án tốt nghiệp Bảng 5.46: Bảng đặc tả hình Manage book Screen (3) No Name ID sách Tên sách Hình sách Nội dung Lưu Lưu Xóa Required Format Reference Note Data từ True Input Hiển thị ID sách API Data từ Nhập vào tên sách, True Input API không để trống Nhập vào đường dẫn hình Data từ True Input sách, khơng API để trống Data từ Nhập vào nội dung True Input API sách Khi click lưu thay đổi True Button sách chuyển sang hình SCA03(1) Khi click lưu thay đổi True Button sách Khi click khơng hiển thị sách trang danh True Button sách sách khơng xóa database Chương 5: Thiết kế giao diện Trang 116 an Báo cáo đồ án tốt nghiệp 5.1.2.27 SCA04 Config Certificate Screen Hình 5.54: Giao diện trang SCA04 Config Certificate Screen Bảng 5.47: Bảng đặc tả hình Config Certificate Screen No Name Tên chứng Đậu tốt nghiệp Required Format True Input True Input Tải chữ ký True Button Chữ ký True Image Lưu cài đặt True Button Chương 5: Thiết kế giao diện Reference Data từ API Data từ API Data từ API Note Tên chứng Số điểm chuẩn để xét chứng Khi “click” vào hệ thống hiển thị cửa số để người dùng chọn file chữ ký Chữ ký hệ thống chứng Khi click lưu thay đổi Trang 117 an Báo cáo đồ án tốt nghiệp CHƯƠNG KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH 6.1 Hệ thống Back-end Hệ thống Back-end xây dựng ngôn ngữ Golang sử dụng Echo Framwork IDE Goland để lập trình Nhóm triển khai hệ thống đám mây Google Cloud Hình 6.1: Hệ thống deloy server Google Cloud Ngồi ra, nhóm sử dụng Echo Middleware để xác thực người dùng người dùng request 6.2 Hệ thống Front-end Ứng dụng Front-end sử dụng cơng nghệ Single Page Application giúp ứng dụng thao tác liệu nhanh mà không yêu cầu tải lại trang Người học:          Đăng ký Chọn khóa học muốn học Xem mô tả đề tài Làm thực hành Đăng nhập Đăng xuất Xem thực hành làm Làm đẹp code thực hành Định dạng code theo mẫu đề thực hành Chương 6: Kết quả, thực nghiệm, phân tích an Trang 118 Báo cáo đồ án tốt nghiệp  Quản lý tài khoản cá nhân  Xem số đậu có  Xét chứng  Xem sách, kiện gợi ý  Đánh giá chủ đề  Tham gia thi công khai  Tạo, chỉnh sửa thi riêng tư  Mời bạn vào thi riêng tư  Tìm kiếm khóa học  Tìm kiếm thực hành theo tên, trạng thái, độ khó Giáo viên:  Đăng ký trở thành giáo viên  Đăng nhập  Đăng xuất  Quản lý chủ đề, chủ đề con, thực hành  Tạo thực hành kiểm  Tạo, chỉnh sửa thi Quản trị viên:  Đăng nhập  Đăng xuất  Xét duyệt giáo viên  Xoá giáo viên khỏi hệ thống  Quản trị người dùng  Cài đặt số điểm xét chứng  Thêm chữ ký điện tử  Danh sách chứng  Quản lý nội dung trang web Quản lý thi công khai Chương 6: Kết quả, thực nghiệm, phân tích an Trang 119 Báo cáo đồ án tốt nghiệp CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.1 Kết đạt Về nhóm tìm hiểu đạt được:        Tìm hiểu xây dựng RESTFul API ngơn ngữ Golang sử dụng Echo Framework Tìm hiểu áp dụng ReactJS để xây dựng giao diện phía khách Tìm hiểu sử dụng thư viện Material-UI để xây dựng giao diện Tìm hiểu docker để sử dụng thư viện codewars-runner-cli Tìm hiểu áp dụng web-socket vào số tính hệ thống Tìm hiểu deloy front-end Firebase, back-end Google Cloud Platform, Database MongoDB Cluster Xây dựng ứng dụng hỗ trợ học lập trình với số tính sau: o Luyện tập o Học tập o Thi đấu 7.2 Ưu điểm       Giao diện đại, dễ nhìn, thân thiện với người dùng Ứng dụng đơn giản, dễ sử dụng Áp dụng công nghệ Hệ thống chạy code online, tốc độ phản hồi nhanh Khả bảo trì, mở rộng dễ dàng, nhanh chóng Có tính hệ thống học lập trình LeetCode, CodeLearn 7.3 Hạn chế   Hệ thống sử dụng MongoDB Cluster miễn phí nên khơng mang lại hiệu tối đa người dùng sử dụng Một số hình chưa hỗ trợ responsive Chương 7: Kết luận hướng phát triển an Trang 120 Báo cáo đồ án tốt nghiệp   Ứng dụng phía quản lý chưa tối ưu Vẫn có khả tồn lỗi 7.4 Hướng phát triển Sau xây dựng phát triển tính khoảng tháng nhóm lên số ý tưởng để phát triển hệ thống lớn mạnh khắc phục số hạn chế hệ thống Tuy nhiên, khơng đủ thời gian nên nhóm lưu ý tưởng lại thực có thời gian      Hỗ trợ nhiều ngôn ngữ Tăng độ khó thách thức cách: thêm test case ẩn, có yêu cầu thời gian chạy cho thách thức Xây dựng tính làm trắc nghiệm Xây dựng tính Mock Interview Xây dựng tính tặng huy hiệu cho người dùng sau lần đạt yêu cầu hệ thống như: làm 10 thách thức khó tăng huy hiệu chiến binh Chương 7: Kết luận hướng phát triển an Trang 121 Báo cáo đồ án tốt nghiệp CHƯƠNG KẾ HOẠCH VÀ PHÂN CHIA CƠNG VIỆC Nhóm sử dụng ứng dụng Trello để lên kế hoạch phân chia công việc cho người nhóm Việc sử dụng Trello giúp nhóm có hướng làm việc rõ ràng trình làm đồ án tốt nghiệp Bảng phân chia chi tiết công việc cho người thể hình bên Hình 8.1: Màn hình Trello phân chia công việc Chương 8: Kế hoạch phân chia công việc an Trang 122 Báo cáo đồ án tốt nghiệp TÀI LIỆU THAM KHẢO Tiếng Việt: [1] Giới thiệu JUnit https://gpcoder.com/5234-kiem-thu-voi-junit-trong-java [2] Tạo CRUD Rest API với Golang https://viblo.asia/p/tao-web-api-crud-don-gian-voi-golang-va-echo-frameworkDo754kYJlM6 [3] Tài liệu dự án Hocode https://github.com/duythien0912/hocode [4] Xây dựng server code online với docker codewar-runncer-cli https://github.com/duythien0912/hocode/wiki/Setup-Project [5] Source code project https://github.com/duyle0207/hoccode2020 Tiếng Anh: [1] ReactJs Documents https://reactjs.org/docs/getting-started.html [2] Golang Documents https://golang.org/doc/ [3] Echo Framework tutorial https://echo.labstack.com/guide [4] Codewar runner-cli https://github.com/Codewars/codewars-runner-cli [5] How to set up Node.js App to server https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-jsapplication-for-production-on-ubuntu-16-04 [6] Material React UI https://material-ui.com/getting-started/installation/ Trang 123 an an ... 01/07/2020 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 Nội dung thực đề tài:  Tìm hiểu, tham khảo chức giao diện hệ thống tương tự  Tìm hiểu Docker server... 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... 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Ỗ