Đồ án xây dựng hệ thống hỗ trợ tổ chức các cuộc thi lập trình

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA HỆ KỸ THUẬT PHẦN MỀM BÁO CÁO ĐỒ ÁN THỰC HÀNH MÔN HỌC ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG HỆ THỐNG HỖ TRỢ TỔ CHỨC CÁC CUỘC THI LẬP TRÌNH Giảng viên hướng dẫn: Nguyễn Tấn Toàn Sinh viên thực hiện: Trương Xuân Vương MSSV: 20520353 Bùi Đoàn Khánh Ân MSSV: 20520369 TP HỒ CHÍ MINH, NĂM 2023 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2023 Người nhận xét (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Để hồn thành đề tài có kiến thức ngày hơm nay, nhóm chúng em xin gửi lời cảm ơn đến thầy Tồn tận tình hỗ trợ, truyền đạt kiến thức kinh nghiệm quý báu cho chúng em suốt trình học tập nghiên cứu Trong thời gian thực đề tài, nhóm vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi tiếp thu kiến thức Chúng em cố gắng vận dụng thu thập để hồn thành đồ án tốt Tuy nhiên, q trình thực hiện, khơng tránh khỏi thiếu sót, chúng em mong nhận thơng cảm góp ý chân thành từ thầy Cuối cùng, chúng em xin gửi lời chúc thân đến thầy PHỤ LỤC LỜI CẢM ƠN PHỤ LỤC MỞ ĐẦU I GIỚI THIỆU TỔNG QUAN TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài 1.2 Công cụ sử dụng II CÔNG NGHỆ REACTJS Giới thiệu chung Các khái niệm quan trọng Các ưu điểm ReactJS SUPABASE 2.1 Giới thiệu chung 2.2 Kiến trúc 2.3 Tính 10 2.3.1 Database 10 2.3.2 Serverless Api 11 2.3.3 Auth 12 2.3.4 Realtime 12 2.3.5 Storage: 12 2.3.6 Client Library Reference 13 JAVASCRIPT 13 POSTGRESQL 14 4.1 Định nghĩa 14 4.2 Tính 15 III WEBSITE HỖ TRỢ TỔ CHỨC CUỘC THI LẬP TRÌNH 16 GIỚI THIỆU ĐỀ TÀI 16 Đặt vấn đề 16 Mục tiêu chức 17 Định hướng giải vấn đề 18 Yêu cầu toán 18 Tổng quan 18 Các hoạt động hệ thống 19 Yêu cầu phi chức 19 PHÂN TÍCH KIẾN TRÚC HỆ THỐNG 20 Kiến trúc hệ thống 20 Khái niệm 20 Nguyên tắc hoạt động 21 Ưu điểm 22 Đặc tả use case 23 Sơ đồ Use case 23 Đặc tả Use-Case sơ đồ hoạt động 26 Thiết kế sở liệu 81 I II Sơ đồ sở liệu 81 Mô tả chi tiết bảng liệu 81 THIẾT KẾ GIAO DIỆN 84 Quản trị viên 84 Ban tổ chức 91 Thí sinh 96 IV NHẬN XÉT VÀ KẾT LUẬN 104 Nhận xét 104 Kết luận 104 Hướng phát triển 104 V BẢNG PHÂN CÔNG CÔNG VIỆC: 105 VI PHỤ LỤC 105 MỞ ĐẦU Trong giới kỹ thuật ngày phát triển, thi lập trình đóng vai trị quan trọng việc khám phá, khuyến khích đánh giá tài lập trình cộng đồng Tuy nhiên, tổ chức thi lập trình đáp ứng nhu cầu đảm bảo hiệu thách thức Đó lý việc xây dựng hệ thống hỗ trợ tổ chức thi lập trình đáng tin cậy tiện ích vơ quan trọng Hệ thống hỗ trợ nhằm mục tiêu cung cấp tảng toàn diện cho việc tổ chức quản lý thi lập trình Với việc tập trung vào yếu tố quan trọng quản lý thông tin thi, đăng ký tham gia, nộp dự thi đánh giá, hệ thống tạo môi trường thuận lợi công cho thí sinh tổ chức thi Với hệ thống hỗ trợ tổ chức thi lập trình, hy vọng đem lại tảng đáng tin cậy tiện ích cho việc tổ chức thi lập trình Sự kết hợp tính linh hoạt, tiện lợi hiệu hệ thống giúp cho việc tổ chức thi trở nên dễ dàng hơn, từ quản lý thông tin, đăng ký, nộp bài, q trình đánh giá cơng bố kết Chúng ta tin hệ thống hỗ trợ tổ chức thi lập trình mang lại nhiều lợi ích cho tổ chức thi thí sinh Sẽ có quy trình tổ chức thi mượt mà hơn, giúp tiết kiệm thời gian công sức ban tổ chức Thí sinh trải nghiệm giao diện đơn giản thuận tiện để tham gia gửi dự thi Đồng thời, việc đánh giá công bố kết thực cách công minh bạch Với hệ thống hỗ trợ tổ chức thi lập trình, tạo môi trường đáng tin cậy chuyên nghiệp, góp phần thúc đẩy phát triển khám phá tài lập trình cộng đồng I GIỚI THIỆU TỔNG QUAN Tổng quan đề tài 1.1 Giới thiệu đề tài Việc tổ chức thi lập trình hoạt động phổ biến cộng đồng lập trình viên nay, đặc biệt trường đại học công ty công nghệ Tuy nhiên, việc tổ chức thi đặt số thách thức vấn đề cho bên chịu trách nhiệm tổ chức thi cần giải Vì vậy, nhóm chúng em định thực hệ thống hỗ trợ tổ chức thi lập trình để giúp cho việc tổ chức thi lập trình tổ chức thuận lợi dễ dàng Nhóm chúng em bắt đầu thực bước phân tích xác định quy trình nghiệp vụ thi lập trình, tìm hiểu xem diễn Và sau q trình tìm hiểu, nhóm chúng em nắm bắt điều bắt tay vào việc xây dựng hệ thống hỗ trợ bên tổ chức thi lập trình cho thi sinh tham gia thi lập trình với đội Hệ thống hỗ trợ cho ban tổ chức thi cách tối ưu nhất, đơn giản dễ sử dụng Hệ thống cung cấp tính quản lý thi, đội tham gia thi giúp bên tổ chức dễ dàng theo dõi tiến độ việc tổ chức thi Hệ thống chấm điểm nộp đội thi dựa vào liệu cung cấp sẵn có trình biên dịch để tự động tính tốn số điểm làm thi thí sinh Thí sinh vào xem thi có hệ thống đăng ký tham gia, quản lý thông tin cá nhân mình, làm thi, nộp sau xem bảng xếp hạng Đối với quản trị viên, người có quyền cao hệ thống, có quyền thực chức mà thí sinh ban tổ chức Ngồi ra, quản trị viên cịn quản lý tài khoản có hệ thống, tạo tài khoản cho ban tổ chức xố tài khoản tài khoản vi phạm quy định hoạt động hệ thống 1.2 Công cụ sử dụng Trong trình xây dựng phần mềm, nhóm sử dụng phần mềm sau: ● WebStorm: IDE hỗ trợ xây dựng ứng dụng phía frontend ● Visual Studio Code: hỗ trợ xây dựng giao diện người dùng ● Postman: hỗ trợ nhóm test api để lấy liệu từ phía server ● PostgreSQL: hỗ trợ nhóm lưu trữ sở liệu ● Figma: hỗ trợ nhóm thiết kế giao diện ● Supabase: Baas, giúp thể vai trị phía server hệ thống Hình 3.2.2: Giao diện trang chủ Hình 3.2.3: Giao diện tạo thi Hình 3.2.4: Giao diện quản lý thi 92 Hình 3.2.5: Giao diện cập nhật thơng tin thi Hình 3.2.6: Giao diện cập nhật thơng tin đề thi 93 Hình 3.2.7: Giao diện quản lý đội thi Hình 3.2.7: Giao diện phê duyệt đội thi 94 95 Thí sinh Hình 3.3.1: Giao diện đăng nhập 96 Hình 3.3.2: Giao diện đăng ký tài khoản Hình 3.3.3: Giao diện quên mật 97 Hình 3.3.4: Giao diện trang chủ chưa đăng nhập Hình 3.3.5: Giao diện trang chủ đăng nhập 98 Hình 3.3.6: Giao diện danh sách tập Hình 3.3.7: Giao diện thi đăng ký tham gia 99 Hình 3.3.8: Giao diện đăng ký tham gia thi 100 Hình 3.3.9: Giao diện bắt đầu làm thi Hình 3.3.10: Giao diện danh sách tập thi 101 Hình 3.3.11: Giao diện đề thi Hình 3.3.12: Giao diện nộp 102 Hình 3.3.13: Giao diện nộp Hình 3.3.14: Giao diện thơng tin tài khoản 103 IV Nhận xét kết luận Nhận xét • Hoàn thiện tất nhiệm vụ giao • Giao diện làm chỉnh chu, dễ dàng thao tác cho người dùng • Có phân quyền kết hợp với việc mã hóa mật giúp ứng dụng có tính bảo mật cao • Có thống kê tổng số dự án dạng đồ thị giúp dễ dàng thống kê • Cơng việc nhóm hồn thành • Chương trình đóng gói cài đặt hồn Kết luận • Ưu điểm Hoàn thành đồ án tiến độ Đáp ứng đầy đủ yêu cầu toàn Phát triển thêm số chức • Nhược điểm Tốc độ xử lý hạn chế nên áp dụng cho quy mơ vừa nhỏ Chưa có chức chat để tương tác thành viên với Hướng phát triển • Cải thiện giao diện trực quan, bắt mắt • Tối ưu hóa tối độ xử lý 104 • Bổ sung thêm tính chat, gọi điện, chatbot • Tích hợp AI để có thêm phần khuyến nghị có ích cho người dùng V Bảng phân công công việc: Họ tên MSSV Đánh giá Phân công - Code BE cho hệ thống Thái độ hợp tác tốt, hoàn Bùi Đoàn Khánh Ân vẽ sơ đồ ERD thành tốt công việc 20520369 - Viết báo cáo chương 2, giao chương chương 4, chương - Thiết kế giao diện cho hệ Thái độ hợp tác tốt, hoàn Trương Xuân Vương thành công việc giao thống 20520353 - Viết báo cáo chương - Code FE cho hệ thống VI Phụ lục Tài liệu tham khảo: Reactjs: https://legacy.reactjs.org/docs/getting-started.html Supabase: https://supabase.com/docs 105 Stackoverflow: https://stackoverflow.com/ 106