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

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 SKL007083 Tp Hồ Chí Minh, tháng 07/2020 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 LÊ VĂN DUY KHÓA: NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng năm 2020 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 LÊ VĂN DUY KHĨA: NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng năm 2020 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 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 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 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 hoà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 MỤC LỤC CHƯƠNG 1.1.Khảo sát trạng 1.1.1 1.1.2 1.2.Tính cấp thiết đề tài 1.3.Mục tiêu nhiệm vụ đề tài 1.3.1 1.3.2 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 2.1.2 2.2.Runner 2.2.1 Chức 2.2.2 Vấn đề 2.2.3 Cách khắc phục 2.3 Golang 2.3.1 Giới thiệu 2.3.2.Ưu điểm Golang 2.3.3.Nhược điểm Golang 2.3.4.Tại chọn Golang 2.4 Echo Framework 2.4.1 Giới thiệu 2.4.2 Request 2.4.3 Response 2.4.4 Routing 2.5 MongoDB 2.5.1 Giới thiệu 2.5.2.Ưu điểm MongoDB 2.5.3 Nhược điểm 2.5.4.Tại chọn MongoDB 2.6 ReactJS 2.6.1 Giới thiệu 2.6.2 JSX 2.6.3 Component 2.6.4 Life Circle 2.7 JUnit 2.7.1 Giới thiệu 2.7.2.Các tính JUnit CHƯƠNG XÁC ĐỊNH YÊU CẦU BÀI TOÁN 3.1.Phân tích tốn 3.2.Quy trình nghiệp vụ 3.2.1.Quy trình làm thực hành, thi 3.2.2.Quy trình kiểm thử 3.2.3.Quy trình xét chứng 3.3.Mơ hình hóa chức 3.3.1.Danh sách Actor 3.3.2 Sơ đồ Use 3.3.3.Mô tả sơ đồ usecase 3.3.4.Đặc tả số usecase 3.3.4.1 Usecase “Sovle code” (UC05) 3.3.4.2 Usecase “Create Practice” (UC18/Create) 3.3.4.3 Usecase “Consider Certificate” (UC25) 3.3.4.4 Usecase “Join a fight code” (UC12) 3.3.4.5 Usecase “Confirm a new course” (UC23) 3.3.4.6 Usecase “Manage private fight room”/Create CHƯƠNG THIẾT KẾ PHẦN MỀM 4.1.Thiết kế kiến trúc 4.1.1.Front-end 4.1.2 Back-end 4.1.2.1 Server Rest Chương 5: Thiết kế giao diện Báo cáo đồ án tốt nghiệp Nội dung 5.1.2.26 kiện Lưu Lưu Xóa 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 Tạo Xuất Tên sách Chương 5: Thiết kế giao diện Trang 113 Báo cáo đồ án tốt nghiệp Hình sách Sửa Xóa  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 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 Tên sách Hình sách Nội dung Lưu  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 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 Chương 5: Thiết kế giao diện Trang 116 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 Tải chữ ký Chữ ký Lưu cài đặt Chương 5: Thiết kế giao diện Trang 117 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 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 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 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 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 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 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 ... 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Ỗ