Đồ án ứng dụng hỗ trợ học từ vựng flashcard

ĐỒ ÁN SE121.N21.PMCL ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN ĐỒ ÁN MÔN HỌC Ứng dụng hỗ trợ học từ vựng Flashcard GIẢNG VIÊN GIẢNG DẠY THS.THÁI THỤY HÀN UYỂN Thành viên nhóm: Trần Trương Phú Túc – 20520345 Nguyễn Trương Thái Phụng – 20520281 TP HỒ CHÍ MINH, 2023 ĐỒ ÁN SE121.N21.PMCL LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn chân thành đến Cô Thái Thụy Hàn Uyển hướng dẫn cống hiến trình thực đồ án ứng dụng hỗ trợ học từ vựng flashcard Cô người hỗ trợ hướng dẫn chúng em cách nhiệt tình Cơ truyền đạt kiến thức rõ ràng cung cấp hướng dẫn chi tiết, giúp chúng em hoàn thành dự án thành công Sự hiểu biết chuyên môn giúp chúng em nắm vững quy trình phát triển phần mềm, từ lập kế hoạch, thiết kế, triển khai kiểm thử đánh giá Cô hướng dẫn chúng em tư logic phân tích vấn đề, giúp chúng em tìm giải pháp sáng tạo để đáp ứng yêu cầu dự án Chúng em biết ơn tận tâm dẫn dắt tận tình Cơ khơng người hướng dẫn, mà người đồng hành, lắng nghe động viên chúng em trình làm việc Cơ tạo điều kiện thuận lợi để chúng em tự tin thể ý tưởng phát triển kỹ Cuối cùng, chúng em xin chân thành cảm ơn cô Thái Thụy Hàn Uyển dẫn dắt tận tâm kiến thức quý Cô truyền đạt cho chúng em q trình thực đồ án Chúng em ln trân trọng kiến thức kinh nghiệm mà cô chia sẻ áp dụng chúng vào tương lai Trân trọng, Nhóm thực Trường Đại học Cơng nghệ Thông tin, tháng năm 2023 ĐỒ ÁN SE121.N21.PMCL MỤC LỤC CHƯƠNG I GIỚI THIỆU ĐỀ TÀI 12 Giới thiệu chung: 12 Mục tiêu đề tài: 12 2.1 Lý thuyết: 12 2.2 Mục tiêu 12 Quá trình thực 13 Tổng quan chức 13 CHƯƠNG II CƠ SỞ LÝ THUYẾT C#.net 14 1.1 Tổng quan lịch sử 14 1.2 Thành phần Net 15 1.3 Một số đặc điểm bật 17 1.4 Ưu nhược điểm Net Framework: 17 1.4.1 Ưu điểm: 17 1.4.2 Nhược điểm: 18 Ngơn ngữ lập trình JavaScript 18 2.1 Tổng quan 18 2.2 Tại Net Framework chọn JavaScript? 19 Hệ quản trị sở liệu MySQL 19 3.1 MySQL gì? 19 3.2 Mã nguồn mở 20 3.3 Hiệu suất cao khả nawg mở rộng 20 3.4 Bảo mật quản lý liệu 20 3.5 Ưu điểm MySQL 20 3.6 Nhược điểm MySQL 20 CHƯƠNG III XÂY DỰNG HỆ THỐNG 14 Xây dựng kiến trúc hệ thống: 21 21 1.1 Công nghệ sử dụng: 21 1.2 Kiến trúc hệ thống: Mơ hình Client-Server 21 1.3 Kiến trúc ứng dụng: Mơ hình MVC: 22 ĐỒ ÁN SE121.N21.PMCL 1.4 Các yêu cầu hệ thống 22 1.5 Sơ đồ Use case: 22 1.6 Danh sách Usecase 23 1.7 Đặc tả use case 24 1.7.1 Đăng ký ○ 24 24 1.7.2 Đăng nhập 24 24 1.7.3 Đăng xuất 25 1.7.4 Xóa từ vựng 25 1.7.5 Thêm từ vựng 25 1.7.6 Chỉnh sửa từ vựng 26 1.7.7 Ôn từ vựng qua flashcard 26 1.7.8 Ôn từ vựng qua trắc nghiệm 26 1.7.9 Ôn từ vựng qua nối từ 27 1.7.10 Quản lý thông tin người dùng 27 Mơ tả hình: 28 2.1 Màn hình đăng nhập: 28 2.2 Màn hình đăng ký: 29 2.3 Màn hình trang chủ: 30 2.4 Màn hình chủ đề từ vựng 31 2.5 Màn hình ơn từ vựng qua flashcard 32 2.6 Màn hình ơn từ qua nối từ 33 2.7 Màn hình ơn từ qua trắc nghiệm 34 2.8 Màn hình quản lý từ vựng 35 2.9 Màn hình thêm từ vựng 36 2.10 Màn hình quản lý người dùng 37 Sơ đồ lớp: CHƯƠNG IV KẾT LUẬN 38 39 Kết đạt được: 39 Ưu điểm: 39 ĐỒ ÁN Nhược điểm giải pháp: TÀI LIỆU THAM KHẢO SE121.N21.PMCL 39 40 ĐỒ ÁN SE121.N21.PMCL DANH MỤC HÌNH ẢNH CHƯƠNG I GIỚI THIỆU ĐỀ TÀI 12 Giới thiệu chung: 12 Mục tiêu đề tài: 12 2.1 Lý thuyết: 12 2.2 Mục tiêu 12 Quá trình thực 13 Tổng quan chức 13 CHƯƠNG II CƠ SỞ LÝ THUYẾT C#.net 14 1.1 Tổng quan lịch sử 14 1.2 Thành phần Net 15 1.3 Một số đặc điểm bật 17 1.4 Ưu nhược điểm Net Framework: 17 1.4.1 Ưu điểm: 17 1.4.2 Nhược điểm: 18 Ngơn ngữ lập trình JavaScript 18 2.1 Tổng quan 18 2.2 Tại Net Framework chọn JavaScript? 19 Hệ quản trị sở liệu MySQL 19 3.1 MySQL gì? 19 3.2 Mã nguồn mở 20 3.3 Hiệu suất cao khả nawg mở rộng 20 3.4 Bảo mật quản lý liệu 20 3.5 Ưu điểm MySQL 20 3.6 Nhược điểm MySQL 20 CHƯƠNG III XÂY DỰNG HỆ THỐNG 14 Xây dựng kiến trúc hệ thống: 21 21 1.1 Công nghệ sử dụng: 21 1.2 Kiến trúc hệ thống: Mơ hình Client-Server 21 1.3 Kiến trúc ứng dụng: Mơ hình MVC: 22 ĐỒ ÁN SE121.N21.PMCL 1.4 Các yêu cầu hệ thống 22 1.5 Sơ đồ Use case: 22 1.6 Danh sách Usecase 23 1.7 Đặc tả use case 24 1.7.1 Đăng ký ○ 24 24 1.7.2 Đăng nhập 24 24 1.7.3 Đăng xuất 25 1.7.4 Xóa từ vựng 25 1.7.5 Thêm từ vựng 25 1.7.6 Chỉnh sửa từ vựng 26 1.7.7 Ôn từ vựng qua flashcard 26 1.7.8 Ôn từ vựng qua trắc nghiệm 26 1.7.9 Ôn từ vựng qua nối từ 27 1.7.10 Quản lý thông tin người dùng 27 Mơ tả hình: 28 2.1 Màn hình đăng nhập: 28 2.2 Màn hình đăng ký: 29 2.3 Màn hình trang chủ: 30 2.4 Màn hình chủ đề từ vựng 31 2.5 Màn hình ơn từ vựng qua flashcard 32 2.6 Màn hình ơn từ qua nối từ 33 2.7 Màn hình ơn từ qua trắc nghiệm 34 2.8 Màn hình quản lý từ vựng 35 2.9 Màn hình thêm từ vựng 36 2.10 Màn hình quản lý người dùng 37 Sơ đồ lớp: CHƯƠNG IV KẾT LUẬN 38 39 Kết đạt được: 39 Ưu điểm: 39 ĐỒ ÁN Nhược điểm giải pháp: TÀI LIỆU THAM KHẢO SE121.N21.PMCL 39 40 ĐỒ ÁN SE121.N21.PMCL DANH MỤC BẢNG CHƯƠNG I GIỚI THIỆU ĐỀ TÀI 12 Giới thiệu chung: 12 Mục tiêu đề tài: 12 2.1 Lý thuyết: 12 2.2 Mục tiêu 12 Quá trình thực 13 Tổng quan chức 13 CHƯƠNG II CƠ SỞ LÝ THUYẾT C#.net 14 1.1 Tổng quan lịch sử 14 1.2 Thành phần Net 15 1.3 Một số đặc điểm bật 17 1.4 Ưu nhược điểm Net Framework: 17 1.4.1 Ưu điểm: 17 1.4.2 Nhược điểm: 18 Ngôn ngữ lập trình JavaScript 18 2.1 Tổng quan 18 2.2 Tại Net Framework chọn JavaScript? 19 Hệ quản trị sở liệu MySQL 19 3.1 MySQL gì? 19 3.2 Mã nguồn mở 20 3.3 Hiệu suất cao khả nawg mở rộng 20 3.4 Bảo mật quản lý liệu 20 3.5 Ưu điểm MySQL 20 3.6 Nhược điểm MySQL 20 CHƯƠNG III XÂY DỰNG HỆ THỐNG 14 Xây dựng kiến trúc hệ thống: 21 21 1.1 Công nghệ sử dụng: 21 1.2 Kiến trúc hệ thống: Mơ hình Client-Server 21 1.3 Kiến trúc ứng dụng: Mơ hình MVC: 22 ĐỒ ÁN SE121.N21.PMCL 1.4 Các yêu cầu hệ thống 22 1.5 Sơ đồ Use case: 22 1.6 Danh sách Usecase 23 1.7 Đặc tả use case 24 1.7.1 Đăng ký ○ 24 24 1.7.2 Đăng nhập 24 24 1.7.3 Đăng xuất 25 1.7.4 Xóa từ vựng 25 1.7.5 Thêm từ vựng 25 1.7.6 Chỉnh sửa từ vựng 26 1.7.7 Ôn từ vựng qua flashcard 26 1.7.8 Ôn từ vựng qua trắc nghiệm 26 1.7.9 Ôn từ vựng qua nối từ 27 1.7.10 Quản lý thông tin người dùng 27 Mơ tả hình: 28 2.1 Màn hình đăng nhập: 28 2.2 Màn hình đăng ký: 29 2.3 Màn hình trang chủ: 30 2.4 Màn hình chủ đề từ vựng 31 2.5 Màn hình ơn từ vựng qua flashcard 32 2.6 Màn hình ơn từ qua nối từ 33 2.7 Màn hình ơn từ qua trắc nghiệm 34 2.8 Màn hình quản lý từ vựng 35 2.9 Màn hình thêm từ vựng 36 2.10 Màn hình quản lý người dùng 37 Sơ đồ lớp: CHƯƠNG IV KẾT LUẬN 38 39 Kết đạt được: 39 Ưu điểm: 39 10 ĐỒ ÁN SE121.N21.PMCL Trước người dùng phải đăng nhập vào hệ thống FR5.1 Bảng Đặc tả chức thêm từ vựng 1.7.6 Chỉnh sửa từ vựng Quản trị viên có quyền chỉnh sửa thay đổi từ vựng phiên âm thêm vào hệ thống Mã u cầu FR6.1 Mơ tả Trước người dùng phải đăng nhập vào hệ thống Bảng 12 Đặc tả chức chỉnh sửa từ vựng 1.7.7 Ôn từ vựng qua flashcard Giúp người dùng ôn lại từ vựng cách thể từ vựng thẻ gồm hai mặt, mặt trước từ vựng, mặt sau nghĩa từ Người dùng nhìn thấy hai mặt đốn mặt cịn lại Mã u cầu FR8.1 Mơ tả Trước người dùng phải chọn chủ đề từ vựng cần ôn Bảng 13 Đặc tả chức ôn từ vựng qua flashcard 1.7.8 Ôn từ vựng qua trắc nghiệm Giúp người dùng ôn tập từ vựng cách chọn đáp án trắc nghiệm cho nghĩa từ,hoặc ngược lại 26 ĐỒ ÁN SE121.N21.PMCL Mã yêu cầu FR9.1 Mô tả Trước người dùng phải chọn chủ đề từ vựng cần ôn Bảng 14 Đặc tả chức ơn từ vựng qua trắc nghiệm 1.7.9 Ơn từ vựng qua nối từ Người dùng chọn cặp từ nghĩa tương ứng để có đáp án xác Mã u cầu FR9.1 Mơ tả Trước người dùng phải chọn chủ đề từ vựng cần ôn Bảng 15 Đặc tả chức ôn từ qua nối từ 1.7.10 Quản lý thông tin người dùng Quản trị viên xem thông tin người dùng bao gồm mật khẩu, email, tên đăng nhập Mã yêu cầu FR12.1 Mô tả Trước quản trị viên phải đăng nhập vào hệ thống Bảng 16 Đặc tả chức quản lý thông tin người dùng 27 ĐỒ ÁN SE121.N21.PMCL Mơ tả hình: 2.1 Màn hình đăng nhập: Hình Màn hình đăng nhập Màn hình Đăng nhập gồm: - Textbox tài khoản giúp người dùng nhập tên đăng nhập - Textbox mật giúp người dùng nhập mật - Chọn button mật để tiến hành đăng nhập 28 ĐỒ ÁN SE121.N21.PMCL 2.2 Màn hình đăng ký: Hình Màn hình đăng ký Màn hình Đăng ký gồm: - Các text box để điền thông tin đăng ký, bắt buột người dùng phải nhập định dạng bắt buột để tạo tài khoản - Chọn đăng ký để tạo tài khoản - Chọn đăng nhập người dùng có tài khoản - Có thể chọn trang chủ để quay lại 29 ĐỒ ÁN SE121.N21.PMCL 2.3 Màn hình trang chủ: Hình Màn hình trang chủ Màn hình Trang chủ gồm : - Header chứa thông tin người dùng, tên tài khoản, trạng thái 30 ĐỒ ÁN SE121.N21.PMCL - Logo ứng dụng “”Your Vocabulary”” - Các chủ đề có hệ thống để người dùng lựa chọn học tập - Màu sắc chủ đề thay đổi cách ngẫu nhiên sau lần tải lại trang chủ 2.4 Màn hình chủ đề từ vựng Hình 10 Màn hình chủ đề từ vựng - Màn hình thể chủ đề có sẵn hệ thống cấp dộ chủ đề - Người dùng chọn level để bắt đầu - Sau thực kiểm tra có đủ số lượng đáp án xác tiếp tục level 31 ĐỒ ÁN SE121.N21.PMCL 2.5 Màn hình ơn từ vựng qua flashcard Hình 11 Màn hình ơn từ vựng qua flashcard - Màn hình bao gồm thể từ vựng có hai mặt - Mặt trước bao gồm: từ vựng, phiên âm loại từ - Mặt sau gồm: hình ảnh từ vựng đó, câu ví dụ nghĩa tiếng việt - Người dùng ấn vào thẻ để chuyển đổi hai mặt - Phía gợi ý chủ đề khác sẵn có hệ thống mà người dùng chọn để tiếp tục học tập 32 ĐỒ ÁN SE121.N21.PMCL 2.6 Màn hình ơn từ qua nối từ Hình 12 Màn hình ơn từ qua nối từ - Màn hình bao gồm từ nghĩa tiếng anh từ tiếng việt - Người dùng cần chọn cặp từ tiếng anh tiếng việt - Khi đủ số lượng đáp án người dùng chuyển đến hình thức ơn tập 33 ĐỒ ÁN SE121.N21.PMCL 2.7 Màn hình ơn từ qua trắc nghiệm Hình 13 Màn hình ơn từ vựng qua trắc nghiệm - Người dùng chọn từ vựng tương ứng với hình ảnh cho - Nếu chọn xác ghi nhận điểm - Nếu chọn sai khơng tính điểm - Nếu người dùng làm số câu quy định chuyển tiếp tới level 34 ĐỒ ÁN SE121.N21.PMCL 2.8 Màn hình quản lý từ vựng 35 ĐỒ ÁN SE121.N21.PMCL Hình 14 Màn hình quản lý từ vựng - Người dùng chọn vào sửa để để chỉnh sửa từ vựng Chọn xóa để xóa từ vựng khỏi hệ thống Chọn thêm chủ đề để thêm chủ đề tự vựng Khi thêm chủ đề, người dùng cần thêm têm chủ đề tiếng anh tiếng việt, hình ảnh minh họa cho chủ đề Cập nhật chủ đề để chỉnh sửa từ vựng, bao gồm từ vựng, nghĩa hình ảnh Người dùng chọn vào Từ vựng để chuyển đến hình thêm từ vựng 2.9 Màn hình thêm từ vựng Hình 15 Màn hình thêm từ vựng - Thêm cấp độ từ vựng để chọn mức độ cho từ vựng - Thêm từ tiếng anh - Thêm nghĩa từ vựng - Thêm hình ảnh cho từ vựng 36 ĐỒ ÁN SE121.N21.PMCL 2.10 Màn hình quản lý người dùng Hình 16 Màn hìn quản lý thông tin người dùng - Thể danh sách thông tin người dùng bao gồm họ tên người dùng, ngày sinh, giới tính, email, điện thoại trạng thái của tài khoản 37 ĐỒ ÁN SE121.N21.PMCL Sơ đồ lớp: Hình 17 Sơ đồ lớ 38 ĐỒ ÁN SE121.N21.PMCL CHƯƠNG IV KẾT LUẬN Kết đạt được: ● Tạo sản phẩm hoàn chỉnh ● Áp dụng kiến thức quy trình phát triển phần mềm hướng đối tượng cách chuyên nghiệp ● Tìm hiểu thêm cơng nghệ kiến trúc kỹ thuật ● Hiểu nắm kiến thức ứng dụng Visual Studio Code ● Hiểu nắm cách xây dựng ứng dụng Website với Net Framework ● Nắm rõ MySQL, data base, thiết kế giao diện website ● Phân công công việc hợp lý Ưu điểm: ● Dễ dàng sử dụng ● Giao diện thân thiện ● Có nhiều chức khác phục vụ cho nhu cầu mục đích người dùng ● Hồn tồn miễn phí ● Có tính áp dụng thực tế cao Nhược điểm giải pháp: - Giao diện chưa đẹp mắt o Giải pháp: tìm hiểu nhiều layout thiết kế giao diện - Chưa mang lại trải nghiệm mượt mà o Giải pháp: Tìm cách tối ưu hệ thống - Chưa có chức đọc từ vựng o Giải pháp: mở rộng framework để đáp ứng chức - Chưa giải tính từ đồng nghĩa o Giải pháp: tìm cách tối ưu sở liệu 39 ĐỒ ÁN SE121.N21.PMCL TÀI LIỆU THAM KHẢO - Stackoverflow: https://stackoverflow.com/ - MySql Document: https://dev.mysql.com/doc/ - C# :https://www.w3schools.com/cs/index.php - UI:https://wordpress.com/hosting/?aff=15767&cid=1654213&cmp_id=1154 9382845&adg_id=111353876614&kwd=wordpress&device=c&gclid=Cj0K CQjwkqSlBhDaARIsAFJANkgPwE5WJ6_Iv57tgxb6x29upSYah4yDDJQBC3MOu1WAdA0WcUxJWQaAm39EALw_wcB 40