Xây dựng ứng dụng hỗ trợ môn học

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN - - BÁO CÁO ĐỒ ÁN XÂY DỰNG ỨNG DỤNG HỖ TRỢ MÔN HỌC Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Nguyễn Xuân Luân Mã số sinh viên : 18521066 Sinh viên thực : Phan Đức Cường Mã số sinh viên : 18520547 Lớp : SE122.M11 Bộ mơn : Phát triển phần mềm Thành phố Hồ Chí Minh, tháng 12 năm 2021 LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người trực tiếp tận tình hướng dẫn nhóm em suốt q trình thực đồ án Khơng gợi ý định hướng chúng em thực đề tài, cịn nhiệt tình đưa nhận xét, góp ý để em hồn thành đồ án cách tốt Nếu khơng có lời hướng dẫn, dạy bảo thầy đồ án khó hồn thiện Một lần nữa, chúng em xin chân thành cảm ơn cô Đề tài nhóm thực khoảng thời gian tháng nên bước đầu vào thực tế, kiến thức kinh nghiệm thực tiễn chúng em cịn nhiều hạn chế Do vậy, chắn khơng thể tránh khỏi sai sót, nhóm mong nhận bảo, ý kiến đóng góp quý báu cô bạn học lớp để chúng em có điều kiện bổ sung, nâng cao kiến thức lĩnh vực này, giúp hồn thiện tích lũy thêm cho thân nhiều kinh nghiệm, phục vụ tốt cho công việc thực tế sau Chúng em xin chân thành cảm ơn cô! Thành phố Hồ Chí Minh, ngày 24 tháng 12 năm 2021 Nhóm sinh viên thực NGUYỄN XUÂN LUÂN – PHAN ĐỨC CƯỜNG ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Xây dựng ứng dụng hỗ trợ môn học Cán hướng dẫn: THS TRẦN THỊ HỒNG YẾN Thời gian thực hiện: Từ ngày 10/9/2021 đến ngày 25/12/2021 Sinh viên thực hiện: NGUYỄN XUÂN LUÂN - 18521066 PHAN ĐỨC CƯỜNG - 18520547 Nội dung đề tài:(Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực hiện, kết mong đợi đề tài) Mục tiêu: Ứng dụng hỗ trợ môn học thực dựa hai mục đích sau: Thứ nghiên cứu cơng nghệ lập trình như: lập trình ứng dụng di động với React Native, xây dựng hệ thống backend với NET Core Thứ hai phát triển ứng dụng có tính thực tiễn cao, có khả triển khai ứng dụng vào thực tế, hỗ trợ bạn bắt đầu học tiếng Anh làm quen với ngôn ngữ cách nhanh chóng Nhóm hy vọng dựa tảng lý thuyết thầy cô truyền thụ lại, kết hợp với tìm hiểu cơng nghệ nhóm, đồ án nhóm đạt mục đích mong đợi Phương pháp thực hiện: làm việc với nhóm 02 thành viên, phân chia công việc phù hợp với lực kinh nghiệm người, thực đồ án theo lượng công việc thời gian lập kế hoạch chi tiết Các vấn đề liên quan đến đồ án trao đổi trực tiếp thành viên Kết mong đợi: Sau xác định đề tài nghiên cứu, tìm hiểu thực tế, nhóm xây dựng ý tưởng thiết kế ứng dụng hỗ trợ môn học đạt mục tiêu sau: Đối với người dùng: - Cung cấp tính đa dạng cho người dùng rèn luyện đầy đủ bốn kỹ nghe, nói, đọc, viết tiếng Anh - Cung cấp học từ vựng theo chủ đề, số điểm ngữ pháp quan trọng, đọc tin tức, nghe podcast tiếng Anh - Tích hợp chức bổ trợ tra từ điển, kiểm tra lỗi tả ngữ pháp, chấm điểm phát âm từ vựng - Sau học từ vựng ngữ pháp, ứng dụng có tập tự luyện cho người dùng ôn tập lại kiến thức học Các tiêu chí khác: Tính thẩm mỹ - Phần mềm có giao diện đẹp, dễ sử dụng, bố cục hợp lý hút người dùng sử dụng Tính logic bảo mật - Tạo liên kết logic hình để người dùng chuyển hình cách nhanh thuận tiện - Đảm bảo tính bảo mật thơng tin nhạy cảm, tạo cảm giác an toàn cho người dùng - Có thể cập nhật, thêm xóa sửa đổi thông tin liên quan đến từ vựng tiếng Anh vấn đề khác liên quan khác đến người dùng Kế hoạch thực hiện: (Mô tả kế hoạch làm việc phân chia công việc thành viên tham gia) Với thời gian thực từ 10/9/2021 tới 25/12/2021, nhóm chia thành sprint với giai đoạn cụ thể: - Giai đoạn 1: Khảo sát trạng, hoàn thiện ứng dụng với chức dành cho người dùng + Sprint 1: Tìm hiểu phương pháp hỗ trợ học tiếng Anh, sử dụng React Native NET Core việc xây dựng ứng dụng di động, tìm hiểu ứng dụng hỗ trợ học tiếng Anh + Sprint 2: Thiết kế chức liệu cho ứng dụng + Sprint 3: Xây dựng API, xây dựng giao diện ứng dụng để thực số chức xác định sprint + Sprint 4: Xây dựng chức sprint Sprint (10/9/2021 – NGUYỄN XUÂN LUÂN PHAN ĐỨC CƯỜNG Tìm hiểu NET Core, Tìm hiểu React Native, JSON Web Token, Redis Redux Cache, Firebase 30/9/2021) Tìm hiểu phương pháp hỗ trợ học tiếng Anh Khảo sát ứng dụng Tìm hiểu phương pháp hỗ trợ học tiếng Anh Khảo sát ứng dụng có: Duolingo, 4English, có: Duolingo, 4English, ELSA ELSA Thiết kế kiến trúc hệ thống (1/10/2021 – Tìm API hỗ trợ liệu 15/10/2021) chức ứng dụng Mô tả yêu cầu chức ứng dụng, thiết kế liệu (16/10/2021 – 31/10/2021) (1/11/2021 – 20/11/2021) - Xây dựng API cho chức Xây dựng giao diện ứng dụng ứng dụng đăng học từ vựng, ngữ pháp theo nhập, đăng ký, quên mật chủ đề, cung cấp tập tự khẩu, hình từ vựng, ngữ luyện, đọc báo, nghe podcast pháp, đọc báo, nghe podcast Hoàn thành API xác thực Hoàn thành giao diện ứng người dùng (đăng ký, đăng dụng, kết nối với nhập, quên mật khẩu) backend API sprint Giai đoạn 2: Thêm chức mở rộng, kiểm thử, viết báo cáo đề tài + Sprint 5: Mở rộng thêm chức cho ứng dụng + Sprint 6: Tiến hành kiểm thử, viết báo cáo Sprint (21/11/2021 – NGUYỄN XUÂN LUÂN Xây dựng API hỗ trợ kiểm tra Xây dựng giao diện hình tả ngữ pháp, đánh giá kiểm tra tả, ngữ pháp, phát âm người dùng 4/12/2021) (5/12/2021 – 25/12/2021) PHAN ĐỨC CƯỜNG đánh giá phát âm người dùng Tiến hành kiểm thử Tiến hành kiểm thử Viết báo cáo Viết báo cáo MỤC LỤC CHƯƠNG - TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu đề tài 1.1.1 Tầm quan trọng tiếng Anh 1.1.2 Lý chọn đề tài 1.2 Khảo sát trạng 1.3 Đối tượng nghiên cứu 1.4 Phạm vi nghiên cứu 1.5 Phương pháp nghiên cứu 1.6 Nhiệm vụ đề tài CHƯƠNG - CƠ SỞ LÝ THUYẾT 2.1 Tổng quan React Native 2.1.1 Giới thiệu 2.1.2 Cách hoạt động 2.1.3 Ưu nhược điểm 2.1.4 Điểm khác biệt React Native ReactJS 2.1.5 Công cụ phát triển React Native 2.2 Tổng quan NET Core 2.2.1 Giới thiệu 2.2.2 Khả sử dụng 2.2.3 Thành phần 2.2.4 Phân biệt NET Framework, NET Core Mono 2.2.5 Trường hợp sử dụng 10 2.3 Tổng quan Redis Cache 10 2.3.1 Đặt vấn đề 10 2.3.2 Giới thiệu Redis 11 2.3.3 So sánh Redis Memcached 12 2.3.4 Lợi ích 13 2.3.5 Một số ứng dụng 14 2.3.6 Trường hợp sử dụng 15 2.4 Tổng quan JSON Web Token 16 2.4.1 Giới thiệu 16 2.4.2 Các thành phần 16 2.4.3 Trường hợp sử dụng 17 2.5 Tổng quan Firebase 17 2.5.1 Giới thiệu 17 2.5.2 Lịch sử phát triển 18 2.5.3 Những dịch vụ bật 19 2.5.4 Ưu nhược điểm 20 CHƯƠNG - PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21 3.1 Mô tả yêu cầu 21 3.1.1 Yêu cầu chức 21 3.1.2 Yêu cầu phi chức 23 3.2 Kiến trúc hệ thống 24 3.2.1 Sơ đồ kiến trúc tổng quát 24 3.2.2 Mô tả kiến trúc Front-End 25 3.2.3 Mô tả kiến trúc Back-End 25 CHƯƠNG - HIỆN THỰC HỆ THỐNG 27 4.1 Thiết kế liệu 27 4.1.1 Danh sách đối tượng hệ thống 27 4.1.2 Dữ liệu liên quan đến người dùng 28 4.1.3 Dữ liệu liên quan đến chủ đề từ vựng 29 4.1.4 Dữ liệu liên quan đến ngữ pháp 30 4.2 Thiết kế giao diện 31 4.2.1 Danh sách hình 31 4.2.2 Sơ đồ liên kết hình 33 4.2.3 Giao diện hình chức xác thực người dùng 33 4.2.4 Giao diện hình chức liên quan đến từ vựng 34 4.2.5 Giao diện hình chức liên quan đến ngữ pháp 36 4.2.6 Giao diện hình chức đọc tin tức 38 4.2.7 Giao diện hình chức nghe tiếng Anh 38 4.2.8 Giao diện hình khác 39 CHƯƠNG - KẾT LUẬN 40 5.1 Đánh giá 40 5.1.1 Thuận lợi 40 5.1.2 Khó khăn 40 5.2 Kết đạt 40 5.2.1 Ưu điểm 40 5.2.2 Nhược điểm 41 5.3 Hướng phát triển 41 TÀI LIỆU THAM KHẢO 42 DANH MỤC BẢNG Bảng 3.1 - Mô tả chức ứng dụng 23 Bảng 3.2 - Mô tả thành phần kiến trúc front-end 25 Bảng 3.3 - Mô tả thành phần kiến trúc back-end 26 Bảng 4.1 - Danh sách đối tượng hệ thống 27 Bảng 4.2 - Mô tả liệu người dùng 28 Bảng 4.3 - Mô tả liệu liên quan đến từ vựng 29 Bảng 4.4 - Mô tả liệu liên quan đến ngữ pháp 30 Bảng 4.5 - Danh sách hình chức 32 4.1.2 Dữ liệu liên quan đến người dùng Những liệu liên quan đến thông tin người dùng email, ảnh đại diện, tên người dùng, hệ thống lấy thơng tin từ Google cung cấp khơng lưu trữ liệu người dùng Hình 4.1 - Đối tượng người dùng STT Tên thuộc tính Kiểu liệu Ý nghĩa, ghi uid string id nhận biết người dùng savedwords array danh sách từ vựng người dùng lưu Bảng 4.2 - Mô tả liệu người dùng 28 4.1.3 Dữ liệu liên quan đến chủ đề từ vựng Hình 4.2 - Sơ đồ quan hệ đối tượng liên quan đến từ vựng Tên đối Tên thuộc tính Kiểu liệu Ý nghĩa, ghi title string tiêu đề chủ đề từ vựng imageUrl string link ảnh đại diện chủ đề word string từ tiếng anh audio string link nghe phát âm từ vựng phonetic string phiên âm từ vựng id int id phân biệt nhóm nghĩa partOfSpeech string Từ loại nhóm nghĩa Id int id phân biệt định nghĩa content string nội dung định nghĩa example string ví dụ ngữ cảnh áp dụng tượng Topic Vocabulary Meaning Definition Bảng 4.3 - Mô tả liệu liên quan đến từ vựng 29 4.1.4 Dữ liệu liên quan đến ngữ pháp Hình 4.3 - Sơ đồ quan hệ đối tượng liên quan đến ngữ pháp Tên đối Tên thuộc tượng tính Kiểu liệu Ý nghĩa, ghi id int id phân biệt chủ đề ngữ pháp title string tiêu đề chủ đề ngữ pháp id int id phân biệt học ngữ pháp title string tiêu đề học ngữ pháp htmlContent string chuỗi html nội dung học id int id phân biệt tập ngữ pháp type int dạng tập sentence string câu hỏi correctAnswer string câu trả lời choices array danh sách câu trả lời dùng cho dạng Grammar Lesson Exercise tập trắc nghiệm Bảng 4.4 - Mô tả liệu liên quan đến ngữ pháp 30 4.2 Thiết kế giao diện 4.2.1 Danh sách hình Chức Sign in Xác thực Ý nghĩa, ghi Tên hình Sign up người dùng Forgot password Nơi đăng nhập tài khoản người dùng Nơi đăng ký tài khoản người dùng email Cho người dùng lấy lại mật dựa email đăng ký Hiển thị danh sách chủ đề từ vựng Vocabulary main Hiển thị danh sách từ vựng mà người dùng lưu Cho người dùng tra từ điển Topic Hiển thị danh sách từ vựng chủ đề Hiển thị nội dung từ vựng nghĩa, Chức liên quan đến từ Vocabulary vựng phiên âm, ví dụ áp dụng Cho người dùng nghe phát âm, đánh giá phát âm lưu từ vựng Cho người dùng học từ vựng thẻ ghi nhớ Flash cards Hiển thị đầy đủ thông tin từ vựng Cho người dùng nghe phát âm lưu từ vựng Vocabulary practice Hiển thị dạng tập từ vựng kết tự luyện 31 Hiển thị danh sách học ngữ pháp Grammar main Chức liên quan đến ngữ pháp Cho người dùng kiểm tra tả ngữ pháp Grammar Grammar exercise Hiển thị nội dung ngữ pháp Hiển thị dạng tập ngữ pháp kết tự luyện Hiển thị danh sách tin phổ biến News main Đọc tin tức Cho phép người dùng tra cứu tin tức theo từ khoá Article Hiển thị nội dung báo Hiển thị danh sách nghe phổ biến Listen main Nghe tiếng Cho phép người dùng tra cứu nghe theo từ khoá Anh Cho người dùng nghe tiếng Anh qua trình Podcast phát Hiển thị nội dung nghe Intro Khác Splash Pronunciation assessment Giới thiệu tổng quan phần mềm Màn hình chờ lúc hệ thống xác thực, lấy liệu người dùng Hiển thị kết đánh giá phát âm người dùng Bảng 4.5 - Danh sách hình chức 32 4.2.2 Sơ đồ liên kết hình Hình 4.4 - Sơ đồ liên kết hình chức 4.2.3 Giao diện hình chức xác thực người dùng Hình 4.5 - Giao diện hình Sign in Hình 4.6 - Giao diện hình Sign up 33 Hình 4.7 - Giao diện hình Forgot password 4.2.4 Giao diện hình chức liên quan đến từ vựng Hình 4.8 - Giao diện hình Vocabulary main Hình 4.9 - Giao diện hình Topic Hình 4.11 - Giao diện hình Flash cards 34 Hình 4.10 - Giao diện hình Vocabulary Hình 4.12 - Nội dung flashcards Hình 4.13 - Giao diện dạng tập trắc nghiệm từ vựng Hình 4.14 - Kết dạng tập trắc nghiệm từ vựng Hình 4.15 - Giao diện dạng tập nghe phát âm điền từ Hình 4.16 - Kết dạng tập nghe phát âm điền từ 35 Hình 4.17 - Giao diện dạng tập điền vào chỗ trống Hình 4.18 - Kết dạng tập điền vào chỗ trống Hình 4.19 - Kết ôn luyện dạng tập 4.2.5 Giao diện hình chức liên quan đến ngữ pháp Hình 4.20 - Giao diện hình Grammar main Hình 4.21 - Kết kiểm tra tả ngữ pháp 36 Hình 4.22 - Giao diện hình Grammar Hình 4.23 - Giao diện dạng tập trắc nghiệm ngữ pháp Hình 4.24 - Kết dạng tập trắc nghiệm ngữ pháp Hình 4.25 - Giao diện dạng tập ngữ pháp điền vào chỗ trống Hình 4.26 - Kết dạng tập ngữ pháp điền vào chỗ trống 37 4.2.6 Giao diện hình chức đọc tin tức Hình 4.27 - Giao diện hình News main Hình 4.28 - Giao diện hình Article 4.2.7 Giao diện hình chức nghe tiếng Anh Hình 4.29 - Giao diện hình Listen main 38 Hình 4.30 - Giao diện hình Podcast 4.2.8 Giao diện hình khác Hình 4.31 - Giao diện hình Intro Hình 4.32 - Giao diện hình Splash 39 Hình 4.33 - Giao diện hình Pronunciation assessment CHƯƠNG - KẾT LUẬN 5.1 Đánh giá 5.1.1 Thuận lợi - Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài - Các tài liệu ngôn ngữ, công nghệ thực chia sẻ rộng rãi Internet Cộng đồng lớn giúp giải vấn đề thường gặp phải sử dụng công nghệ cách nhanh chóng - Vận dụng kiến thức, quy trình phát triển học - Dữ liệu API hỗ trợ đa dạng phong phú 5.1.2 Khó khăn - Vấn đề tìm hiểu, nghiên cứu thực công nghệ React Native, NET Core, nhiều thời gian - Vấn đề liệu không đáp ứng đầy đủ xác từ API, bị hạn chế quyền thao tác tốn chi phí để gia hạn gói hỗ trợ từ API để đáp ứng nhu cầu hệ thống 5.2 Kết đạt 5.2.1 Ưu điểm - Hoàn thành yêu cầu đặt ban đầu, đáp ứng đầy đủ tính cần thiết ứng dụng hỗ trợ học tiếng Anh cho người bắt đầu - Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng thao tác ứng dụng - Tốc độ phản hồi thao tác nhanh, tối ưu hóa trải nghiệm người dùng - Sinh viên thực nắm cách tổ chức, xây dựng hệ thống hoàn thiện tạo ứng dụng thiết bị động để phục vụ cho nhu cầu người - Sinh viên nắm công nghệ phổ biến React Native, NET Core số kỹ thuật caching, xác thực người dùng - Ứng dụng triển khai nghiệm thu thành công thiết bị thật 40 5.2.2 Nhược điểm - Một số tính đánh giá phát âm, kiểm tra tả ngữ pháp hỗ trợ từ API bên thứ ba nên độ xác chưa cao cịn bị hạn chế truy cập - Dữ liệu cịn chưa đầy đủ để đáp ứng nhu cầu người dùng - Dữ liệu tổ chức chưa tối ưu nên việc truy vấn cịn chậm - Chưa có phần hướng dẫn cho người sử dụng 5.3 Hướng phát triển - Xây dựng mở rộng thêm chức thi thử đánh giá trình độ (cung cấp thi thử IELTS, TOEFL,…), hoạch định lộ trình học dựa vào thi thử học viên, gợi ý tập, kiểm tra phù hợp trình độ, chia sẻ kết lên Facebook, - Bổ sung thêm thi tự luyện theo bốn kỹ nghe nói đọc viết - Hồn thiện chức có - Xây dựng ứng dụng đa tảng chạy web máy tính - Tối ưu hóa code để dễ cập nhật mở rộng tính - Tổ chức liệu hợp lý để tăng tốc độ truy xuất 41 TÀI LIỆU THAM KHẢO ❖ Tài liệu tiếng Việt [1] Trung Nguyen (2021), “Cách xây dựng REST API sử dụng ASP.NET Core, Entity Framework Core JWT”, [Online] Available: https://comdy.vn/asp-net-core-webapi/cach-xay-dung-rest-api-su-dung-aspnet-core-entity-framework-core-va-jwt/ [2] Han Van Hiep (2017), “Làm việc với Distributed Cache ASP.NET Core”, [Online] Available: https://viblo.asia/p/lam-viec-voi-distributed-cache-trong-aspnetcore-m68Z0O69KkG [3] Hồng Nhi (2021), “Tìm hiểu React Native”, [Online] Available: https://wiki.tino.org/react-native-la-gi/ [4] Chiasekinang (2021), “.NET CORE gì? Tổng quan, phân biệt NET core, NET FW, MONO”, [Online] Available: https://chiasekinang.com/net-core-la-gi/amp/ [5] Minh Hồng (2021), “Tìm hiểu tổng quan Redis”, [Online] Available: https://viblo.asia/p/tim-hieu-tong-quan-ve-redis-bJzKmrV6Z9N [6] Tran Vuong Minh (2016), “Tìm hiểu json web token (JWT)”, [Online] Available: https://viblo.asia/p/tim-hieu-ve-json-web-token-jwt-7rVRqp73v4bP [7] Hồng Nhi (2021), “Firebase gì? Tổng quan Firebase”, [Online] Available: https://wiki.tino.org/firebase-la-gi/ ❖ Tài liệu tiếng Anh [8] Zeb Girouard (2020), “Introduction to Using Redux in a React Native App”, [Online] Available: https://www.digitalocean.com/community/tutorials/react-reactnative-redux [9] Joseph Mawa (2021), “Using Axios with React Native to manage API requests”, [Online] Available: https://blog.logrocket.com/using-axios-react-native-manage-apirequests/ [10] Rick Anderson & Kirk Larkin (2021), “Create a web API with ASP.NET Core”, [Online] Available: https://docs.microsoft.com/vi-vn/aspnet/core/tutorials/first-webapi?view=aspnetcore-6.0&tabs=visual-studio 42 ... ứng dụng Duolingo chuyên hỗ trợ học từ vựng, ngữ pháp, 4English chuyên hỗ trợ kỹ đọc, ELSA chuyên hỗ trợ kỹ nói Với mục đích hỗ trợ người học tiếng Anh toàn diện, chúng em định xây dựng ứng dụng. .. thiện ứng dụng với chức dành cho người dùng + Sprint 1: Tìm hiểu phương pháp hỗ trợ học tiếng Anh, sử dụng React Native NET Core việc xây dựng ứng dụng di động, tìm hiểu ứng dụng hỗ trợ học tiếng... người học tiếng Anh gặp phải, đồng thời giúp đỡ cô Trần Thị Hồng Yến, nhóm chúng em định lựa chọn đề tài ? ?Xây dựng ứng dụng hỗ trợ môn học? ?? với mục đích áp dụng cơng nghệ để xây dựng ứng dụng