Xây dựng ứng dụng luyện thi đại học (khóa luận tốt nghiệp)

ĐẠ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 LÊ XUÂN TÙNG NGUYỄN THANH TUẤN KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG LUYỆN THI ĐẠI HỌC Building an application practicing exam preparation for university KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM LÊ XUÂN TÙNG – 18521616 NGUYỄN THANH TUẤN - 18521604 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG LUYỆN THI ĐẠI HỌC Building an application practicing exam preparation for university KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS HUỲNH HỒ THỊ MỘNG TRINH TP HỒ CHÍ MINH, 2022 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin – Chủ tịch – Thư ký – Uỷ viên – Uỷ viên LỜI CẢM ƠN Khóa luận tốt nghiệp với đề tài “XÂY DỰNG ỨNG DỤNG LUYỆN THI ĐẠI HỌC” minh chứng cho q trình cố gắng khơng ngừng nghỉ việc tìm tịi, học hỏi suốt năm học tập trường Đại học Công nghệ Thông tin nhóm chúng em Các thầy trường Đại học Cơng nghệ Thơng Tin nói chung thầy Khoa Cơng nghệ Phần mềm nói riêng tận tình truyền đạt nhiều kiến thức bổ ích vô cần thiết tới chúng em để chúng em có tảng chun mơn vững tương lai Thơng qua khố luận này, chúng em thể học kết hợp lại để cố gắng tạo nên sản phẩm có tính ứng dụng thực tế cao, bước đầu quy mô vừa nhỏ, hướng đến sản phẩm hồn chỉnh với quy mơ lớn Chúng em xin gửi lời cảm ơn chân thành đến quý thầy trường Đại học Cơng nghệ Thơng tin nói chung, q thầy khoa Cơng nghệ Phần mềm nói riêng, đặc biệt cô Huỳnh Hồ Thị Mộng Trinh chu đáo tận tình hướng dẫn chúng em, giúp chúng em có điều kiện tốt để hồn thành khoá luận với chất lượng cao Cảm ơn giảng viên phản biện thầy cô hội đồng chấm khố luận với lời khun, góp ý q báu bổ ích Từ khố luận tốt nghiệp chúng em trở nên hoàn thiện Bên cạnh đó, nhóm chúng em xin gửi lời cảm ơn tới gia đình, bạn bè ln bên cạnh, động viên đóng góp ý kiến trình chúng em hồn thành khóa luận Trong suốt q trình thực khóa luận, quy mơ sản phẩm lớn so với đồ án thông thường khác, với thời gian vốn kiến thức cịn nhiều hạn chế, chắn nhóm khó tránh khỏi sai sót khơng mong muốn Chúng em mong nhận góp ý chân thành từ phía thầy bạn Thành phố Hồ Chí Minh, tháng 06 năm 2022 Lê Xuân Tùng Nguyễn Thanh Tuấn MỤC LỤC TÓM TẮT KHÓA LUẬN Chương TỔNG QUAN 1.1 Giới thiệu đề tài 1.2 Mục tiêu 1.3 Phạm vi 1.4 Phương pháp thực 1.5 Ý nghĩa thực tiễn 1.6 Kết dự kiến Chương CƠ SỞ LÝ THUYẾT 10 2.1 Thu thập liệu ma trận đề thi 10 2.2 Thiết kế thuật tốn để giải tốn gợi ý lộ trình luyện thi 15 2.3 Thiết kế thuật toán để giải toán nhận diện thẻ giáo viên 16 Chương TỔNG QUAN CÔNG NGHỆ 18 3.1 ReactJS 18 3.2 NodeJS 19 3.3 MongoDB 20 3.4 Express 20 3.5 TesseractJS 21 Chương XÂY DỰNG HỆ THỐNG LUYỆN THI ĐẠI HỌC 22 4.1 Phân tích yêu cầu hệ thống 22 4.1.1 Phân tích yêu cầu chức 22 4.1.2 Yêu cầu tính 22 4.1.3 Phân tích yêu cầu phi chức 22 4.1.4 Sơ đồ use case 23 4.1.5 Một số use case hệ thống 26 4.2 Thiết kế hệ thống 32 4.2.1 Sơ đồ thao tác thi thử 32 4.2.2 Sơ đồ thao tác làm khảo sát - nhận gợi ý lộ trình luyện thi 35 4.2.3 Sơ đồ thao tác làm tập 36 4.2.4 Sơ đồ thao tác tham khảo tài liệu luyện thi 37 4.3 Thiết kế sở liệu 40 4.3.1 Sơ đồ sở liệu 40 4.3.2 Mô tả bảng liệu 42 4.4 Thiết kế kiến trúc hệ thống 50 4.4.1 Kiến trúc tổng thể 50 4.4.2 Kiến trúc ứng dụng web 52 4.4.3 Sơ đồ thành phần 53 4.4.4 Sơ đồ triển khai 54 4.5 Thiết kế giao diện 55 4.5.1 Danh sách hình 55 4.5.2 Một số hình ứng dụng 61 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 83 5.1 Kết đạt 83 5.2 Thuận lợi khó khăn 84 5.2.1 Thuận lợi 84 5.2.2 Khó khăn 84 5.3 Hướng phát triển 85 TÀI LIỆU THAM KHẢO 86 DANH MỤC HÌNH Hình 1-1 Tỷ lệ sử dụng website luyện thi đại học Hình 1-2 Số lượng người dùng website luyện thi đại học Hình 1-3 Tỷ lệ đánh giá việc luyện thi online Hình 1-4 Tỷ lệ mong muốn sử dụng website luyện thi đại học Hình 2-1 Sơ đồ thuật toán nhận diện thẻ giáo viên 16 Hình 2-2 Giải thuật diện hình ảnh TerractJs 16 Hình 4-1 Sơ đồ Use case tổng quan 23 Hình 4-2 Sơ đồ use-case thi thử 26 Hình 4-3 Sơ đồ use-case làm khảo sát – nhận lộ trình luyện thi 28 Hình 4-4 Sơ đồ use-case làm tập 29 Hình 4-5 Sơ đồ use-case tham khảo tài liệu luyện thi 30 Hình 4-6 Sơ đồ thao tác thi thử 32 Hình 4-7 Sơ đồ thao tác xem lại thảo luận đề thi 33 Hình 4-8 Sơ đồ thao tác xem bảng xếp hạng 34 Hình 4-9 Sơ đồ thao tác khảo sát - nhận gợi ý lộ trình luyện thi 35 Hình 4-10 Sơ đồ thao tác làm tập 36 Hình 4-11 Sơ đồ thao tác xem đề thi tham khảo 37 Hình 4-12 Sơ đồ thao tác xem tài liệu tham khảo 38 Hình 4-13 Sơ đồ thao tác xem chia sẻ 39 Hình 4-14 Sơ đồ sở liệu 40 Hình 4-15 Mơ hình MERN stack 51 Hình 4-16 Kiến trúc ứng dụng web 52 Hình 4-17 Sơ đồ thành phần hệ thống 53 Hình 4-18 Sơ đồ triển khai ứng dụng 54 Hình 4-19 Danh sách liên kết hình phía người dùng 55 Hình 4-20 Danh sách liên kết hình phía quản trị 58 Hình 4-21 Màn hình đăng ký thi thử 61 Hình 4-22 Màn hình Thi thử 62 Hình 4-23 Màn hình xem lại kết thi làm 64 Hình 4-24 Màn hình bình luận 65 Hình 4-25 Màn hình chọn lựa môn học user thi 66 Hình 4-26 Màn hình điều hướng user làm đánh giá lực 67 Hình 4-27 Màn hình lựa chọn mục tiêu điểm số user mong muốn 68 Hình 4-28 Màn hình lộ trình luyện thi 69 Hình 4-29 Màn hình danh sách mơn học 70 Hình 4-30 Màn hình danh sách chương 71 Hình 4-31 Màn hình làm tập 72 Hình 4-32 Màn hình tham khảo tài liệu luyện thi 73 Hình 4-33 Màn hình danh sách đề thi thử tham khảo 74 Hình 4-34 Màn hình xem tài liệu tham khảo 75 Hình 4-35 Màn hình tra cứu 76 Hình 4-36 Màn hình trang cá nhân 77 Hình 4-37 Màn hình đổi mật 78 Hình 4-38 Màn hình sửa thơng tin cá nhân 79 Hình 4-39 Màn hình danh sách chia sẻ 80 Hình 4-40 Màn hình chia sẻ 81 Hình 4-41 Màn hình quản lý người dùng 82 DANH MỤC BẢNG Bảng 1-1 Tiêu chí đánh giá số website luyện thi đại học tiếng Bảng 2-1 Ma trận đề thi mơn Tốn năm 2021 11 Bảng 2-2 Ma trận đề thi môn Vật lý năm 2021 11 Bảng 2-3 Ma trận đề thi môn Địa lý năm 2021 12 Bảng 2-4 Ma trận đề thi mơn Tốn năm 2020 13 Bảng 2-5 Ma trận đề thi môn Vật lý năm 2020 13 Bảng 2-6 Ma trận đề thi môn Địa lý năm 2020 14 Bảng 4-1 Danh sách actor 24 Bảng 4-2 Danh sách use-case 24 Bảng 4-3 Đặc tả use-case thi thử 27 Bảng 4-4 Đặc tả use-case làm khảo sát – nhận lộ trình luyện thi 28 Bảng 4-5 Đặc tả use-case làm tập 29 Bảng 4-6 Đặc tả use-case tham khảo tài liệu luyện thi 30 Bảng 4-7 Danh sách bảng liệu 41 Bảng 4-8 Bảng đơn vị/trường 42 Bảng 4-9 Bảng chương học 42 Bảng 4-10 Bảng danh sách tập hoàn thành 43 Bảng 4-11 Bảng danh sách đề thi hoàn thành 43 Bảng 4-12 Bảng danh sách tập 43 Bảng 4-13 Bảng danh sách tài liệu tham khảo 44 Bảng 4-14 Bảng danh sách đề thi tham khảo 45 Bảng 4-15 Bảng phân quyền 45 Bảng 4-16 Bảng danh sách chia sẻ 46 Bảng 4-17 Bảng danh sách môn học 46 Bảng 4-18 Bảng danh sách đề thi 47 Hình 4-31 Màn hình làm tập Bảng 4-38 Mơ tả hình làm tập STT Tên thành phần [Mơn học] > [Tên Loại Label chương] Cách sử dụng Hiển thị môn học tên chương user làm tập Bài tập làm: Label Hiển thị thứ tự tập làm Khả làm Label Hiển thị dự đoán tỷ lệ phần trăm user làm tập loại từ hệ thống (Tỷ lệ dựa lịch sử làm tập loại người dùng) Nội dung Label Hiển thị nội dung câu hỏi Phương án Radio button Hiển thị đáp án để user lựa chọn 72 Xem đáp án Click để hoàn thành tập Button nhận đáp án chi tiết Xóa lựa chọn Button Click để bỏ lựa chọn Đáp án chi tiết Label Hiển thị đáp án chi tiết câu hỏi 4.5.2.4 Màn hình tham khảo tài liệu luyện thi Bộ hình tham khảo tài liệu luyện thi bao gồm hình sau: Hình 4-32 Màn hình tham khảo tài liệu luyện thi Bảng 4-39 Mơ tả hình tham khảo tài liệu luyện thi STT Tên thành phần Loại Cách sử dụng Danh sách loại tài List Hiển thị danh sách loại tài liệu luyện thi liệu luyện thi cho user lựa chọn Người dùng click vào loại tài liệu mà muốn để tới hình danh sách tài liệu tương ứng với loại 73 Hình 4-33 Màn hình danh sách đề thi thử tham khảo Bảng 4-40 Mô tả danh sách đề thi thử tham khảo STT Tên thành phần Loại Cách sử dụng Danh sách đề thi thử List Hiển thị danh sách đề thi tham khảo thử tham khảo cho user lựa chọn User click vào loại tài liệu mà muốn để tới hình chi tiết đề thi thử tương ứng Tìm kiếm Textbox Nhập input vào để tìm kiếm tài liệu muốn dựa theo keyword Môn học Combobox Bộ lọc tài liệu theo môn học Tỉnh, thành Combobox Bộ lọc tài liệu theo tỉnh, thành 74 Hình 4-34 Màn hình xem tài liệu tham khảo 75 Bảng 4-41 Mơ tả hình xem tài liệu tham khảo STT Tên thành phần Loại Đề thi thử Cách sử dụng Hiển thị nội dung đề thi thử chọn Prev, Next Button Click để chuyển trang đề thi Tải xuống Button Click để tải đề thi thử 4.5.2.5 Màn hình Tra cứu Hình 4-35 Màn hình tra cứu 76 Bảng 4-42 Mơ tả hình tra cứu STT Tên thành phần Button điểm Loại chuẩn, Button Cách sử dụng Chuyển đổi mục tuyển sinh, trường Đại tra cứu muốn thực hiện: học tra cứu điểm chuẩn tra cứu ngành học, tra cứu trường đại học Kết tra cứu Hiển thị kết mong muốn 4.5.2.6 Màn hình Xem trang cá nhân Hình 4-36 Màn hình trang cá nhân Bảng 4-43 Mơ tả hình trang cá nhân STT Tên thành phần Thông tin cá nhân Loại Text Cách sử dụng Hiển thị thông tin tài khoản đăng nhập Danh sách Tab Tabs Hiển thị tabs chuyển đổi click 77 để chuyển đổi hình làm việc liên quan đến tài khoản 4.5.2.7 Màn hình Đổi mật Hình 4-37 Màn hình đổi mật Bảng 4-44 Mơ tả hình đổi mật STT Tên thành phần Thay đổi mật Loại Form Cách sử dụng Hiển thị thông tin mà người dùng cần nhập Mật cũ Textbox Nhập vào mật tài khoản Mật Textbox Nhập vào mật mà muốn đổi thành Xác nhận mật Textbox Nhập lại mật giống với mật phía lần để xác nhận Lưu thay đổi Button Click để xác nhận thay đổi 78 4.5.2.8 Màn hình Đổi thơng tin cá nhân Hình 4-38 Màn hình sửa thơng tin cá nhân Bảng 4-45 Mơ tả hình sửa thơng tin cá nhân STT Tên thành phần Loại Cách sử dụng Cập nhật thông tin cá Form Hiển thị thông tin nhân mà người dùng muốn thay đổi Họ tên Textbox Nhập vào họ tên muốn đổi thành (nếu muốn) Trường Textbox Nhập vào tên trường muốn đổi thành (nếu muốn) Avatar Button Click để đổi ảnh đại diện (nếu muốn) Cập nhật Button Click để xác nhận hoàn thành cập nhật 79 4.5.2.9 Màn hình Danh sách Bài chia sẻ Hình 4-39 Màn hình danh sách chia sẻ Bảng 4-46 Mơ tả hình danh sách chia sẻ STT Tên thành phần Loại Bài chia sẻ Cách sử dụng Hiển thị danh sách chia sẻ có Tìm kiếm Textbox Hỗ trợ tìm kiếm nhanh, nhập vào tên chia sẻ muốn tìm kiếm 80 4.5.2.10 Màn hình Bài chia sẻ Hình 4-40 Màn hình chia sẻ Bảng 4-47 Mơ tả hình chia sẻ STT Tên thành phần Nội dung share Loại Text Cách sử dụng Hiển thị nội dung chia sẻ 81 4.5.2.11 Màn hình quản lý người dùng Hình 4-41 Màn hình quản lý người dùng Bảng 4-48 Mơ tả hình quản lý người dùng STT Tên thành phần Tổng số tài liệu chia sẻ Loại Text Cách sử dụng Hiển thị tổng số tài liệu chia sẻ (đề thi thử, tài liệu tham khảo, chia sẻ) Tổng số tài khoản Text Hiển thị số tài khoản hệ thống Tổng số đề thi thử Text Tổng số đề thi thử có sẵn hệ thống Danh sách tài khoản Table Danh sách tài khoản người dùng 82 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết đạt Thơng qua việc nghiên cứu tìm hiểu công nghệ, đặc biệt công nghệ mới, em phát triển ứng dụng hoàn chỉnh Do giới hạn kinh phí đăng ký domain hosting, ứng dụng dừng lại giai đoạn chạy thử, chưa phổ biến tới người dùng Tuy nhiên kết chạy thử cho thấy hệ thống hoạt động tốt, mở rộng, phát triển thêm tương lai Về mặt kỹ thuật, nhóm em đạt kết sau: - Tìm hiểu, áp dụng framework NodeJS - Tìm hiểu ReactJs, cơng nghệ lập trình giao diện web Ngồi ra, cịn áp dụng thư viện UI phổ biến Tailwind Css để tạo giao diện web đơn giản, dễ nhìn - Học nhiều kiến thức, có thêm kinh nghiệm việc sử dụng Express triển khai ứng dụng Web - Tìm hiểu dịch vụ lưu trữ liệu MongoDB Cloud - Xây dựng Ứng dụng Web “Ứng dụng luyện thi đại học” với chức là: o Luyện tập với tập có phân cấp độ, theo chương với đánh giá khả hồn thành dạng tập lần làm sau o Thi thử trực tuyến với hệ thống tự động chấm trắc nghiệm o Xem lại trao đổi sau đề thi o Tra cứu thông tin tuyển sinh đại học o Tham khảo tài liệu, đề thi nước, chia sẻ hữu ích việc ơn thi đại học o Ngồi cịn tính khác khảo sát đưa gợi ý lộ trình luyện thi, tính quản trị hệ thống admin quyền truy cập giáo viên 83 - Ứng dụng triển khai Website với đường dẫn là: https://dodaihoc.me/ Về mặt thực tiễn, nhóm em đạt được: - Rèn luyện kĩ nhận dạng tốn, nghiên cứu khảo sát thực tế, phân tích chức thực tài liệu mô tả - Nâng cao khả tìm hiểu nghiên cứu công nghệ, đặc biệt công nghệ - Phát triển kỹ mềm cá nhân lên kế hoạch, trình bày văn bản, dự trù thời gian, kỹ làm việc nhóm khả tranh luận, thuyết phục hỗ trợ lẫn - Hiểu sản phẩm thực có tác động đến thực tế UIT qua góp ý thầy cơ, bạn bè khoa 5.2 Thuận lợi khó khăn 5.2.1 Thuận lợi - Có nhiều tài liệu tham khảo mặt công nghệ - Cả hai có kinh nghiệm việc phát triển ứng dụng web - Được giảng viên hướng dẫn quan tâm, cho lời khuyên để cải thiện trang web ngày tốt - Nhận giúp đỡ nhiệt tình bạn học sinh THPT thực khảo sát trạng 5.2.2 Khó khăn - Dự án thực giai đoạn mà thành viên làm, nên đòi hỏi khả xếp công việc, họp online trao đổi ý tưởng để hiểu thời gian ngắn quan trọng - Cả định hướng phát triển theo hướng Front-end Developer nên q trình hồn thành đề tài việc phát triển APIs phía Back-end gặp nhiều khó khăn 84 5.3 Hướng phát triển - Tạo group/diễn đàn để trao đổi thông tin, hỏi đáp, … - Phát triển ứng dụng tảng di động - Tự động giải câu hỏi tập từ học sinh gửi lên hệ thống trả kết lời giải tập - Tự động tạo đề thi phù hợp với khả mong muốn luyện tập học sinh dựa kết khảo sát ban đầu trình ơn luyện học sinh 85 TÀI LIỆU THAM KHẢO Tài liệu Tiếng Việt [1] Viblo, “Nền tảng chia sẻ kiến thức Công nghệ” [Trực tuyến] https://viblo.asia/ [Truy cập 22/04/2022] Tài liệu Tiếng Anh [1] ReactJS, “A JavaScript library for building user interfaces” [Trực tuyến] https://reactjs.org/ [Truy cập 22/04/2022] [2] Stackoverflow, “Find the best answer to your technical question, help others answer theirs” [Trực tuyến] https://stackoverflow.com/ [Truy cập 22/04/2022] [3] Medium, “Discover stories, thinking, and expertise from writers on any topic.” [Trực tuyến] https://medium.com/ [Truy cập 17/05/2022] [4] Tesseract, “The OCR engine in Javascript” [Trực tuyến] https://tesseractocr.github.io/ [Truy cập 22/04/2022] [5] MongoDB, “The NoSQL database” [Trực tuyến] https://www.mongodb.com/ [Truy cập 26/03/2022] [6] ExpressJS, “Fast, unopinionated, minimalist web framework for Node.js” [Trực tuyến] https://expressjs.com/ [Truy cập 26/03/2022] [7] NodeJS, “a JavaScript runtime built on Chrome's V8 JavaScript engine” [Trực tuyến] https://nodejs.org/en/ [Truy cập 26/03/2022] [8] Tailwind, “Rapidly build modern websites without ever leaving your HTML” Open CSS library [Trực tuyến] https://tailwindcss.com/ [Truy cập 22/04/2021] 86 ... LỜI CẢM ƠN Khóa luận tốt nghiệp với đề tài “XÂY DỰNG ỨNG DỤNG LUYỆN THI ĐẠI HỌC” minh chứng cho q trình cố gắng khơng ngừng nghỉ việc tìm tịi, học hỏi suốt năm học tập trường Đại học Công nghệ...ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM LÊ XUÂN TÙNG – 18521616 NGUYỄN THANH TUẤN - 18521604 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG LUYỆN THI. .. lệ sử dụng website luyện thi đại học Hình 1-2 Số lượng người dùng website luyện thi đại học Hình 1-3 Tỷ lệ đánh giá việc luyện thi online Hình 1-4 Tỷ lệ mong muốn sử dụng website