xây dựng WEBSITE quản lý cuộc thi ONLINE

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN WEBSITE QUẢN LÍ CUỘC THI ONLINE Giảng viên hướng dẫn: ThS Trần Anh Dũng Lớp: SE122.M11.PMCL Sinh viên thực hiện: Phạm Hoàng Phượng Trinh 18521537 Nguyễn Phạm Minh Nhật 18521196 Tp Hồ Chí Minh, ngày 29 tháng 12 năm 2021 LỜI CẢM ƠN Đầu tiên, nhóm tác giả gửi lời cảm ơn chân thành đến tập thể quý thầy cô trường Đại học Công nghệ thông tin – Đại học Quốc gia Tp Hồ Chí Minh giúp cho nhóm tác giả có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm tác giả xin gửi lời cảm ơn lòng biết ơn sâu sắc tới thầy Trần Anh Dũng trực tiếp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến q báu giúp nhóm tác giả hồn thành tốt báo cáo mơn học Trong thời gian đề tài, nhóm tác giả 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 nghiên cứu kiến thức Từ đó, nhóm tác giả vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, nhóm tác giả khơng tránh khỏi thiếu sót Chính vậy, nhóm tác giả mong nhận góp ý từ phía thầy nhằm hồn thiện kiến thức mà nhóm tác giả học tập hành trang để nhóm tác giả thực tiếp đề tài khác tương lai NHẬN XÉT CỦA GIẢNG VIÊN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ……………………………………………………………………… Mục lục Chương GIỚI THIỆU CHUNG 1.1 Lý chọn đề tài Ngày nay, công nghệ ngày phát triển thể tầm quan trọng đời sống thường nhật người Mọi lĩnh vực sống trở nên thuận lợi ứng dụng công nghệ thông tin, giáo dục mảng thừa hưởng tiến Với phương pháp học tập truyền thống, học sinh sinh viên người làm phải tới trường lớp tức cần có thời gian biểu cố định, cụ thể cho việc học tập Điều gây phiền tối, bất tiện định Thơng qua mạng internet, việc học tập trở nên đơn giản nhiều Chúng ta học lúc, nơi theo nhu cầu thân Trước việc học online nhàm chán người dạy khơng thể tương tác cách trực tiếp với học viên, người học dễ rơi vào tình cảnh chán nản, thiếu động lực thi đua hay giao tiếp nhiều với bạn bè Để giải vấn đề đó, nhiều cơng cụ hỗ trợ đời, cách phổ biến tạo câu hỏi ngắn hình thức đánh giá nhanh giúp người dạy tương tác, đo lường kiến thức học viên tạo cạnh tranh cho học viên Kết luận: Chính lý trên, nhóm em định xây dựng website giúp quản lý thi online hỗ trợ việc tạo, chia sẻ câu hỏi giúp tổ chức tham gia thi cách dễ dàng, nhanh chóng 1.2 Đối tượng nghiên cứu – Các công nghệ: + GraphQL + Socket.io + Docker + JavaScript + Node.js + React.js + MongoDB – Đối tượng phạm vi đề tài hướng đến: + Học sinh, sinh viên + Giáo viên, tổ chức giáo dục 1.3 Phạm vi nghiên cứu – Ứng dụng website xây dựng theo MERN Stack: MongoDB, Express.js, React.js, Node.js – Ứng dụng sử dụng Socket.io để bảo đảm thời gian thực tế thi, ngồi ứng dụng cịn sử dụng GraphQL để tăng linh hoạt truy vấn phía client 1.4 Phương pháp nghiên cứu Nhóm sử dụng phương pháp nghiên cứu: – Phương pháp đọc tài liệu – Phương pháp phân tích ứng dụng tương tự có 1.5 Bố cục Báo cáo gồm có chương: Chương giới thiệu đề tài, đề cập đến đối tượng phạm vi phương pháp nghiên cứu Cuối chương phần bố cục báo cáo Chương trình bày tảng, cơng nghệ sử dụng trình xây dựng phát triển ứng dụng Chương trình bày chi tiết quy trình xây dựng hệ thống, từ xác định phân tích u cầu tốn xây dựng CSDL, cuối xây dựng giao diện cho úng dụng Chương kết luận, rút ưu nhược điểm ứng dụng đề hướng phát triển tương lai Chương KIẾN THỨC NỀN TẢNG 2.1 Giới thiệu Docker 2.1.1 Định nghĩa Docker tảng mở dành cho lập trình viên, quản trị hệ thống dùng để xây dựng, vận chuyển chạy ứng dụng cách dễ dàng tảng ảo hóa Docker đưa giải pháp cho vấn đề ảo hóa, thay tạo máy ảo chạy độc lập kiểu hypervisors (tạo phần cứng ảo cài đặt hệ điều hành lên đó), ứng dụng đóng gói lại thành Container riêng lẻ Các Container chạy chung nhân hệ điều hành qua LXC (Linux Containers), chia sẻ chung tài nguyên máy mẹ, đó, hoạt động nhẹ nhanh máy ảo dạng hypervisors 2.1.2 Ưu điểm – Tiện lợi: giúp giảm tải phức tạp cài đặt loại công nghệ đồng phiên cơng nghệ – Dễ dàng sử dụng: dễ dàng cho lập trình viên, quản trị hệ thống, sử dụng Docker sử lợi container để xây dựng kiểm tra ứng dụng cách nhanh chóng – Khả di động: môi trường phát triển dựng lên docker chuyển từ người sang người khác mà khơng làm thay đổi cấu hình 2.2 Giới thiệu Node.js 2.2.1 Khái niệm NodeJS tảng xây dựng V8 JavaScript Engine – trình thơng dịch thực thi mã JavaScript, giúp xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng 2.2.2 Ưu điểm – Đặc điểm bật Node.js nhận xử lý nhiều kết nối với singlethread Điều giúp hệ thống tốn RAM chạy nhanh tạo thread cho truy vấn – JSON API Với chế event-driven, non-blocking I/O(Input/Output) mơ hình kết hợp với JavaScript lựa chọn tuyệt vời cho dịch vụ webs làm JSON – Ứng dụng trang( Single page Application) Nếu định viết ứng dụng thể trang Node.js phù hợp để làm Với khả xử lý nhiều request đồng thời thời gian phản hồi nhanh Các ứng dụng định viết không muốn tải lại trang, gồm nhiều request từ người dùng cần hoạt động nhanh để thể chuyên nghiệp NodeJS lựa chọn – Shelling tools unix Node.js tận dụng tối đa Unix để hoạt động Tức Node.js xử lý hàng nghìn Process trả luồng khiến cho hiệu xuất hoạt động đạt mức tối đa tuyệt vời – Streamming Data (Luồng liệu) Các web thông thường gửi HTTP request nhận phản hồi lại (Luồng liệu) Giả xử cần xử lý luồng giữ liệu cực lớn, Node.js xây dựng Proxy phân vùng luồng liệu để đảm bảo tối đa hoạt động cho luồng liệu khác – Ứng dụng web thời gian thực với đời ứng dụng di động & HTML nên Node.js hiệu xây dựng ứng dụng thời gian thực (real-time applications) ứng dụng chat, dịch vụ mạng xã hội Facebook, Twitter,… Kết luận: Với tính ưu việt mình, Node.js vẫn, platform phổ biến ngày nay, lập trình viên ưa chuộng, sử dụng rộng rãi toàn giới 2.3 Giới thiệu Express.js 2.3.1 Khái niệm Express.js framework nhỏ linh hoạt xây dựng tảng Node.js Nó cung cấp tính mạnh mẽ để phát triển web mobile 2.3.2 Ưu điểm – Express.js hỗ trợ JavaScript Mà JavaScript lại ngôn ngữ sử dụng rộng rãi, dễ học hỗ trợ nơi Do đó, biết JavaScript việc lập trình Express.js thực dễ dàng – Express.js giảm nửa thời gian viết mã mà giúp xây dựng ứng dụng web hiệu Nó khơng giảm thời gian mà giảm nỗ lực cần thiết để xây dựng ứng dụng web với trợ giúp tính khác – Express.js ứng dụng web miễn phí mã nguồn mở cung cấp nhiều tính tuyệt vời 2.4 Giới thiệu React.js 2.4.1 Khái niệm React thư viện JavaScript nhằm đơn giản hóa việc phát triển giao diện người dùng Được phát triển Facebook release giới vào nằm 2013 sử dụng để viết Facebook, Instagram ủng hộ sử dụng nhiều công ty khác giới Mục tiêu React đơn giản để phát triển Tất trạng thái tập trung thời điểm, cách chia giao diện người dùng thành tập hợp thành phần (components) React sử dụng để xây dựng single-page web applications 2.4.2 Ưu điểm – React.js tạo cho DOM ảo – nơi mà component thực tồn Điều giúp cải thiện hiệu suất nhiều React.js tính tốn thay đổi cần cập nhật len DOM thực chúng Điều giúp React.js tránh thao tác cần DOM mà nhiều chi phí – React.js giúp việc viết đoạn code JavaScrip dễ dàng dung cú pháp đặc biệt JSX (JavaScript mở rộng) cho phép trộn code HTML JavaScript Chúng ta thêm vào đoạn HTML vào hàm render mà không cần phải nối chuỗi Đây đặc tính thú vị React.js Nó chuyển đổi đoạn HTML thành hàm khởi tạo đối tượng HTML biến đổi JSX – React.js dễ để viết test case giao diện virtual DOM cài đặt hoàn toàn JavaScript 2.5 Giới thiệu MongoDB 2.5.1 Khái niệm MongoDB dạng phần mềm sở liệu sử dụng mã nguồn mở NoSQL Nó hỗ trợ nhiều tảng khác thiết kế với mục đích hướng đến đối tượng MongoDB hoạt động dựa vào khái niệm Collection Document Đồng thời, có hiệu suất cao với tính khả dụng tốt dễ dàng mở rộng Các Collection MongoDB có cấu trúc linh hoạt Điều cho phép liệu không cần thiết phải tuân theo dạng cấu trúc Vì thế, MongoDB lưu trữ liệu có cấu trúc đa dạng phức tạp Dữ liệu MongoDB lưu định dạng kiểu JSON 2.5.2 Ưu điểm – MongoDB sử dụng lưu trữ dạng Document JSON nên collection có kích cỡ document khác – Tuy cấu trúc liệu linh hoạt đối tượng xác định rõ ràng – Dễ dàng mở rộng – Phù hợp với ứng dụng realtime 2.6 Giới thiệu chuỗi JSON 2.6.1 Khái niệm JSON chữ viết tắt Javascript Object Notation, dạng liệu tuân theo quy luật định mà hầu hết ngôn ngữ lập trình đọc được, sử dụng lưu vào file, record CSDL dễ dàng JSON có định dạng đơn giản, dễ dàng sử dụng truy vấn XML nhiều nên tính ứng dụng phổ biến JSON định dạng trao đổi liệu văn dung lượng nhẹ Cú pháp JSON đơn giản thông tin liệu có phần key value, điều tương ứng CSDL tên field giá trị record 2.6.2 Cấu trúc Chuỗi JSON bao lại dấu ngoặc nhọn {} Các key, value JSON bắt buộc phải đặt dấu nháy kép (") Nếu có nhiều liệu (nhiều cặp key => value) ta dùng dấu phẩy (,) để ngăn cách Các key JSON nên đặt chữ không dấu số, dấu _ khoảng trắng, ký tự khơng nên đặt số 10 3.2.3.2.7 Bảng QuestionSetReport STT 10 11 12 13 Tên thuộc tính id content image video audio type answers time score typeAnswers explanation doubleScore haveScore Kiểu string string string string string int Array double double Array string bool bool Ràng buộc Primary key Not null Not null Not null Not null Not null Not null Ý nghĩa/ghi Mã câu hỏi Tên câu hỏi Hình câu hỏi Video câu hỏi Âm câu hỏi Loại câu hỏi Câu trả lời Not null Not null Not null Not null Not null Not null Thời gian cho câu hỏi Điểm câu hỏi Đáp án câu hỏi loại điền Lời giải thích Câu hỏi với điểm nhân đơi Loại câu hỏi có điểm Kiểu string double Ràng buộc Primary key Not null Ý nghĩa/ghi Mã câu hỏi Điểm câu hỏi người chơi trả lời Đáp án người chơi trả lời Thời gian người chơi trả lời cho câu hỏi Kiểm tra người chơi có trả lời 3.2.3.2.8 Bảng AnswerDetail STT Tên thuộc tính questionId Score answer answerTime string double Not null Not null isEmpty bool Not null 44 45 3.3 Thiết kế giao diện 3.3.1 Giao diện đăng ký 3.3.2 Giao diện đăng nhập 46 3.3.3 Giao diện trang chủ 3.3.4 Giao diện sưu tập câu hỏi 47 3.3.5 Giao diện xem chi tiết câu hỏi 3.3.6 Giao diện nhập code phòng thi 48 3.3.7 Giao diện thi (phía người tổ chức) 49 50 3.3.8 Giao diện thi (phía người tham gia) 51 52 3.3.9 Giao diện xem báo cáo kết thi 53 54 55 Chương KẾT LUẬN 4.1 Kết đạt – Hoàn thành yêu cầu đặt ban đầu, có đầy đủ tính cần thiết ứng dụng tổ chức, quản lý thi online – Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng theo tác ứng dụng – Tốc độ phản hồi thao tác nhanh, tối ưu hóa suất người dùng 4.2 Hạn chế – Website cịn hạn chế số tính năng: + Chưa có chế độ thi khác + Chưa có responsive + Chưa có phần âm + Chưa hỗ trợ người tổ chức khóa phịng thi + Người chơi chưa thể kết nối lại gặp vấn đề mạng yếu + Các phần thống kê thi chưa đầy đủ chi tiết 4.3 Thuận lợi khó khăn 4.3.1 Thuận lợi – Nhóm dễ dàng thống ý kiến, chức liên quan đến ứng dụng cách nhanh chóng – Thành viên nhóm có kiến thức xây dựng bố cục, phân bổ màu sắc nên giúp thuận lợi việc phát triển giao diện 4.3.2 Khó khăn – Thành viên nhóm có số vấn đề sức khỏe dẫn đến việc hoàn thành số chức không thời hạn làm cho tiến độ bị trì trệ, kéo dài 56 – Vì tình hình dịch bệnh căng thẳng nên nhóm khơng thể làm việc trực tiếp mà phải thông qua tảng trực tuyến nên vấn đề mạng không đủ mạnh gây khó khăn việc bàn luận đề xuất ý kiến 4.4 Hướng phát triển – Xây dựng chứa cịn thiếu, hồn thiện chức có – Thêm phần âm để tạo thêm cảm giác sinh động, lôi – Tối ưu hóa CSDL hợp lý – Cho phép người dùng tạo lớp học giao tập nhà – Phân tích số liệu dựa kết người tham gia từ đưa đánh giá trình độ người tham gia 57 TÀI LIỆU THAM KHẢO Trong trình xây dựng phát triển ứng dụng website, nhóm tham khảo nguồn tài liệu sau: Tài liệu Docker: https://www.docker.com/ Tài liệu React.js: https://reactjs.org/ Tài liệu Node.js: https://nodejs.org/en/docs/ Tài liệu Express.js: https://expressjs.com/ Tài liệu Recoil.js: https://recoiljs.org/ Tài liệu React Router Dom: https://reactrouter.com/web/guides/quick-start Tài liệu Axios: https://github.com/axios/axios Tài liệu Formik: https://formik.org/docs/overview Tài liệu Yup: https://github.com/jquense/yup Tài liệu Recharts: https://recharts.org/en-US/ Tài liệu Nodemailer: https://nodemailer.com/about/ Tài liệu Cloudinary: https://cloudinary.com/ Tài liệu JSON Web Tokens: https://jwt.io/ 58 ... học viên Kết luận: Chính lý trên, nhóm em định xây dựng website giúp quản lý thi online hỗ trợ việc tạo, chia sẻ câu hỏi giúp tổ chức tham gia thi cách dễ dàng, nhanh chóng 1.2 Đối tượng nghiên... dựng phát triển ứng dụng Chương trình bày chi tiết quy trình xây dựng hệ thống, từ xác định phân tích u cầu tốn xây dựng CSDL, cuối xây dựng giao diện cho úng dụng Chương kết luận, rút ưu nhược... khơng làm thay đổi cấu hình 2.2 Giới thi? ??u Node.js 2.2.1 Khái niệm NodeJS tảng xây dựng V8 JavaScript Engine – trình thơng dịch thực thi mã JavaScript, giúp xây dựng ứng dụng web cách đơn giản dễ