Xây dựng ứng dụng hỗ trợ môn học (báo cáo cuối kì đồ án 1)

ĐẠ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 - 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 hiện: Trần Thanh Hiền - 19520080 Lê Khải Hoàn - 19520087 Tp Hồ Chí Minh, tháng năm 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 - 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 hiện: Trần Thanh Hiền - 19520080 Lê Khải Hoàn - 19520087 Tp Hồ Chí Minh, tháng năm 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG HỖ TRỢ MÔN HỌC Tên đề tài tiếng Anh: BUILDING A SUBJECT SUPPORT APPLICATION Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 21/02/2022 đến 10/06/2022 Sinh viên thực hiện: Lê Khải Hoàn – 19520087 Trần Thanh Hiền - 19520080 Nội dung đề tài: Giới thiệu: Cơng việc kinh doanh khơng gói gọn quy mơ nước, mà cịn có hợp tác với nhiều quốc gia khác giới Trong tiếng Anh dường ngơn ngữ trung gian phổ biến ưa chuộng với 1/2 quốc gia giới sử dụng ngơn ngữ giao tiếp giới doanh nghiệp Các đối tác lớn chủ yếu đến từ quốc gia lớn Mỹ, Trung Quốc, Nga, Anh, Đức hầu hết sử dụng tiếng Anh ngôn ngữ giao tiếp Vì vậy, có kỹ Tiếng anh giao tiếp cơng việc tốt, làm việc với đối tác đâu giới Do đó, doanh nghiệp yêu cầu từ nhân viên đến cấp quản lý phải có kỹ giao tiếp tiếng Anh cơng việc điều dễ hiểu Ngoài ra, việc học anh văn giao tiếp khó khăn người làm Họ khơng có thời gian để tham gia vào lớp học trực tiếp sau hành chánh, họ phải chăm lo cho gia đình tập trung vào dự án cơng việc Vì lẽ đó, nhóm em phát triển ứng dụng giúp cho người dùng học tiếng Anh giao tiếp lúc nơi Thêm vào đó, nhóm em sử dụng framework React Native nhằm giúp cho ứng dụng chạy tảng phổ biến Android iOS, giúp cho đa số người dùng thiết bị di động sử dụng cách mượt mà nhanh chóng Mục tiêu: - Hiểu rõ cấu trúc framework React Native Facebook phát triển cách áp dụng vào đồ án - Xây dựng ứng dụng hỗ trợ học tiếng Anh giao tiếp với chức như: học từ vựng, ngữ pháp, mẫu câu giao tiếp ngày, công việc, luyện nghe đoạn hội thoại, luyện phát âm với mẫu câu cho trước, trò chơi giúp ôn luyện từ vựng, quản lý thông tin người dùng Phạm vi: • Phạm vi mơi trường: o Ứng dụng hoạt động thiết bị Android IOS • Phạm vi chức năng: o Học từ vựng theo chủ đề o Học chủ điểm ngữ pháp o Luyện phát âm theo mẫu câu có sẵn o Ôn tập từ vựng o Xem video hội thoại nhân vật o Quản lý thông tin người dùng Đối tượng: - Người dùng có nhu cầu mua học tiếng Anh giao tiếp Phương pháp thực hiện: - Tìm hiểu React Native, Redux, Firebase, NodeJS - Khảo sát thực trạng ứng dụng học tiếng Anh giao tiếp tương tự Duolingo, Cake, TFlat,… nhiều người dùng sử dụng nhất, từ tiến hành phân tích, xác định yêu cầu cụ thể cho đề tài tìm ưu, nhược điểm để khắc phục cho đề tài nhóm - Phân tích thiết kế hệ thống ứng dụng - Tìm hiểu quy trình thiết kế UX/UI tiến hành thiết kế giao diện cho ứng dụng - Xây dựng ứng dụng cho người dùng sử dụng Android iOS - Tiến hành triển khai kiểm thử ứng dụng Công nghệ: - Mobile: React Native - State management: Redux - Back-end: NodeJS, Firebase - Database: Firebase Realtime Database - Source Control: GitHub Kết mong đợi - Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức ứng dụng học tiếng Anh giao tiếp - Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý triển khai dự án phần mềm để xây dựng ứng dụng sản phẩm đề tài - Xây dựng ứng dụng học tiếng Anh giao tiếp cho người dùng đáp ứng yêu cầu giao diện chức đề - Có thể mở rộng thêm chức cho ứng dụng sản phẩm đề tài để phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực Thời gian Nội dung 21/02/2022 – 06/03/2022 - Tất cả: Tìm hiểu đề tài, đánh giá thị trường, xác định chức hệ thống 07/03/2022 – 21/03/2022 - Tất cả: Tìm hiểu, nghiên cứu cơng nghệ React Native 22/03/2022 – 04/04/2022 - Phân tích thiết kế hệ thống ứng dụng + Lê Khải Hồn: Chức quản lý thơng tin người dùng, luyện phát âm theo mẫu câu có sẵn, ơn tập từ vựng + Trần Thanh Hiền: Chức học từ vựng theo chủ đề, học chủ điểm ngữ pháp, xem video hội thoại nhân vật 05/04/2022 – 25/04/2022 Tìm hiểu quy trình thiết kế UX/UI thiết kế giao diện cho ứng dụng 26/04/2022 – 23/05/2022 Cài đặt phần back-end, xử lý hệ thống 24/05/2022 – 10/06/2022 Kiểm thử hệ thống hoàn thiện báo cáo TP HCM, ngày 08 tháng 03 năm 2022 Xác nhận CBHD Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Lê Khải Hoàn Trần Thanh Hiền LỜI MỞ ĐẦU Tiếng Anh ngôn ngữ phổ biến giới nhiều thập kỷ qua Có lẽ khó để tìm quốc gia mà khơng sử dụng tiếng Anh ngôn ngữ dùng công việc Tiếng Anh ngơn ngữ nói nhiều giới, ước tính có 380 triệu người xứ, 300 triệu người sử dụng tiếng Anh ngôn ngữ thứ hai Học tiếng Anh giúp mở rộng hiểu biết bạn Khơng hiểu văn hóa khác thơng qua việc học tiếng Anh mà bạn kết nối khoảng cách văn hóa khác Nó làm tăng hiểu biết văn hóa bạn Nếu bạn học tiếng Anh văn hóa nó, bạn thấy văn hóa từ góc nhìn khác Hiện có nhiều tin tuyển dụng yêu cầu kĩ giao tiếp tiếng Anh tốt, kèm với u cầu mức lương cao Cho nên ta thấy tầm quan trọng việc học tiếng Anh ảnh hưởng lớn đến chất lượng công việc Ước mơ bạn trẻ lĩnh vực cơng nghệ thơng tin nói riêng ngành khác nói chung làm việc công ty quốc tế lớn Google, Facebook, Cocacola, Amazon, vừa có mức lương hấp dẫn, vừa có mơi trường làm việc chuyên nghiệp Nhưng mà làm việc công ty này, bạn phải dùng tiếng Anh để giao tiếp công việc Vậy bạn khơng giỏi giao tiếp tiếng Anh chắn bạn bị loại từ vòng gửi xe Chính thế, bạn cần phải trau dồi tiếng Anh từ bây giờ, sớm tốt Có vấn đề chung mà bạn trẻ gặp phải bạn đợi đến lúc tốt nghiệp lo học tiếng Anh, đa số cần để lấy tốt nghiệp, bạn làm bắt đầu nhận tầm quan trọng bắt đầu học Nhưng bạn bị vướng bận thời gian, công việc việc học tiếng Anh trở nên khó khăn Đó lí nhóm chúng em chọn đề tài "Xây dựng ứng dụng hỗ trợ môn học", cụ thể ứng dụng hỗ trợ học tiếng Anh giao tiếp dành cho người có thời gian, người làm LỜI CẢM ƠN Chúng em xin chân thành gửi lời cảm ơn đến cô Trần Thị Hồng Yến - giảng viên hướng dẫn Đồ án nhóm thuộc khoa Cơng nghệ Phần mềm hướng dẫn bước nghiên cứu, thực đề tài Tuy nhiên trình nghiên cứu đề tài này, nhóm chúng em cịn số nhược điểm, hạn chế tìm hiểu, thực Rất mong nhận nhận xét, góp ý từ thầy cô giảng viên trường để đề tài nhóm chúng em hồn thiện Chúng em xin chân thành cảm ơn! MỤC LỤC Chương 1: GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 1.1 Tên đề tài : XÂY DỰNG ỨNG DỤNG HỖ TRỢ MƠN HỌC 1.2 Lí chọn đề tài 1.3 Lí chọn công nghệ 1.4 Môi trường phát triển ứng dụng 1.5 Các yêu cầu hệ thống Chương 2: CƠ SỞ LÍ THUYẾT 2.1 React Native 2.2 Cloud Firestore 2.3 Redux Toolkit 2.4 Áp dụng công nghệ vào đồ án 2.4.1 React Native 2.4.2 Redux Toolkit 2.4.3 Cloud Firestore Chương 3: MƠ HÌNH USE-CASE 3.1 Sơ đồ Use-case 3.2 Danh sách actor 3.3 Danh sách use-case 3.4 Đặc tả Use-case 3.4.1 Đặc tả use-case “Đăng nhập” 3.4.2 Đặc tả use-case “Đăng xuất” 10 3.4.3 Đặc tả use-case “Đăng ký” 11 3.4.4 Đặc tả use-case “Quản lý thông tin cá nhân” 12 3.4.5 Đặc tả use-case “Kiểm tra đầu vào” 13 3.4.6 Đặc tả use-case “Xem video hội thoại” 14 3.4.7 Đặc tả use-case “Học từ vựng” 15 3.4.8 Đặc tả use-case “Ôn tập từ vựng” 16 3.4.9 Đặc tả use-case “Luyện phát âm” 17 Chương 4: PHÂN TÍCH 18 4.1 Sơ đồ lớp (mức phân tích) 18 4.2 Danh sách lớp đối tượng quan hệ 18 4.3 Mô tả chi tiết lớp đối tượng 19 4.3.1 Lớp “User” 19 4.3.2 Lớp “EntryTest” 20 4.3.3 Lớp “EntryTestDetail” 20 4.3.4 Lớp “VideoOutline” 21 4.3.5 Lớp “Video” 21 4.3.6 Lớp “Vocabulary” 21 4.3.7 Lớp “Sentence” 22 Chương 5: THIẾT KẾ DỮ LIỆU 23 5.1 Sơ đồ logic 23 5.2 Mô tả chi tiết kiểu kiệu sơ đồ logic 24 5.2.1 Bảng “Users” 24 5.2.2 Bảng “Video” 24 5.2.3 Bảng “Vocabulary” 25 5.2.4 Bảng “Sentence” 25 Chương 6: THIẾT KẾ GIAO DIỆN ỨNG DỤNG 26 6.1 Danh sách hình 26 6.2 Mô tả chi tiết hình 27 6.2.1 Đăng nhập 27 6.2.2 Đăng ký 28 6.2.3 Trang chủ 30 6.2.4 Video 31 6.2.5 Thông tin cá nhân 32 Chương 6: THIẾT KẾ GIAO DIỆN ỨNG DỤNG 6.1 Danh sách hình STT Tên hình Ý nghĩa / Ghi Đăng nhập Cho phép người dùng đăng nhập vào hệ thống Đăng ký Cho phép người dùng đăng ký tài khoản để tương tác với hệ thống Trang chủ Hiển thị hình hệ thống để người dùng sử dụng Video Hiển thị thông tin video hội thoại Học từ vựng Hiển thị danh sách flashcard giúp cho người dùng học từ vựng Ôn tập từ vựng Ôn tập từ vựng học theo dạng câu hỏi trắc nghiệm Luyện phát âm Người dùng luyện phát âm theo mẫu câu cho sẵn kết so sánh cho người dùng Bảng 6.1 Bảng mô tả hình ứng dụng 26 6.2 Mơ tả chi tiết hình 6.2.1 Đăng nhập Hình 6.1 Màn hình đăng nhập STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi Kiểm tra Kiểm tra Người dùng bấm vào Kiểm tra chuỗi rỗng email đăng email đăng nút “Sign in” email có khả dụng nhập nhập Kiểm tra mật Kiểm tra mật Người dùng bấm vào Kiểm tra chuỗi rỗng khẩu nút “Sign in” mật có khả hay khơng dụng hay không 27 Xác nhận Xác nhận Người dùng bấm vào đăng nhập đăng nhập nút “Sign in” Tạo tài khoản Chuyển sang Khi người dùng click hình tạo vào nút khoản Bảng 6.2 Bảng mơ tả thao tác hình đăng nhập 6.2.2 Đăng ký Hình 6.2 Màn hình đăng ký 28 STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi Kiểm tra Kiểm tra Khi người dùng Kiểm tra format email chuỗi email email bấm vào “Sign rỗng, không thỏa báo lỗi up” Kiểm tra Kiểm tra Khi người dùng Kiểm tra độ mạnh mật mật mật bấm vào “Sign chuỗi rỗng, không thỏa up” báo lỗi Kiểm tra Kiểm tra Khi người dùng Kiểm tra xác nhận mật xác nhận xác nhận bấm vào “Sign phải trùng với mật đăng mật mật up” ký Đăng ký Đăng ký tài Khi người dùng Xử lý gửi email verification khoản cho cho người dùng lưu thông bấm vào “Sign người dùng up” tin tài khoản vào database Bảng 6.3 Bảng mô tả thao tác hình đăng ký 29 6.2.3 Trang chủ Hình 6.3 Màn hình trang chủ STT Tên xử lí Điều kiện gọi Ghi Hiển thị từ Hiển thị từ Người dùng lưu từ mới lưu Ý nghĩa lưu Hiển thị Hiển thị chủ Người dùng đăng nhập chủ video gợi ý video gợi ý cho vào ứng dụng cho ngày ngày Bảng 6.4 Bảng mô tả thao tác hình trang chủ 30 6.2.4 Video Hình 6.4 Màn hình học qua video STT Tên xử lí Ý nghĩa Điều kiện gọi Hiển thị video Hiển thị video cho Người dùng làm cho người dùng người dùng kiểm tra đầu vào đủ trình độ vào xem video Hiển thị mơ tả Hiển thị mô tả Người dùng làm video người dùng cho video cho người kiểm tra đầu vào đủ dùng trình độ vào xem video 31 Ghi Hiển thị từ Hiển thị từ vựng Người dùng làm vựng đáng đáng ý cho kiểm tra đầu vào đủ ý cho người người dùng trình độ vào xem video dùng Hiển thị Hiển thị mẫu Người dùng làm mẫu câu đáng câu đáng ý cho kiểm tra đầu vào đủ ý cho người người dùng trình độ vào xem video dùng Bảng 6.5 Bảng mơ tả thao tác hình học qua video 6.2.5 Thơng tin cá nhân Hình 6.5 Màn hình thơng tin cá nhân 32 STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi Cập nhật Cập nhật thơng Khi người dùng Khi thơng tin tin tài khoản nhấn vào nút “Save mà người dùng nhập Profile” vào cập nhật database Đăng Đăng xuất khỏi Khi người dùng xuất ứng dụng nhấn vào nút “Sign out” Hiển thị Hiển thị thông Người dùng chuyển tin tài khoản sang tab “Profile” Bảng 6.6 Bảng mô tả thao tên hình thơng tin cá nhân 6.2.6 Học từ vựng Hình 6.6 Màn hình học từ vựng 33 STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi Xem nội Xem nội Khi người dùng Khi thơng tin khác dung dung khác từ nhấn vào thẻ từ vựng từ vựng nghĩa tiếng vựng (hoặc thẻ Anh, tiếng Việt, ví dụ flashcard) minh họa xuất Học từ Học từ qua Khi người dùng Màn hình gồm vựng qua flashcard nhấn vào nút "Learn flashcard từ vựng xuất flashcard thẻ thật Vocabulary" Học thuộc Chuyển từ vựng Người dùng nhấn Khi đó, từ vựng từ vựng vào nút "Remember chuyển sang mục học sang học this word" Bỏ lưu từ Xóa từ vựng Người dùng nhấn Từ vựng xóa khỏi vựng khỏi danh sách vào biểu tượng cờ danh sách từ chưa học Bảng 6.7 Bảng mơ tả thao tác hình học từ vựng 34 6.2.7 Ơn tập từ vựng Hình 6.7 Màn hình ơn tập từ vựng STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi Xem nội Xem nội Khi người Khi thơng tin khác từ dung dung khác dùng nhấn vào vựng nghĩa tiếng Anh, tiếng từ vựng thẻ từ vựng Việt, ví dụ minh họa xuất Ôn tập từ Luyện tập lại Người dùng Màn hình gồm câu hỏi ơn tập vựng từ nhấn vào nút từ vựng gồm có đáp án xuất học "Review" 35 Bỏ lưu từ Xóa từ vựng Người dùng Từ vựng xóa khỏi danh vựng khỏi danh nhấn vào biểu sách sách từ chưa tượng cờ học Bảng 6.8 Bảng mơ tả thao tác hình ơn tập từ vựng 6.2.8 Luyện phát âm Hình 6.8 Màn hình luyện phát âm 36 STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi Lưu lại giọng Khi người dùng Sau nhấn, người dùng nhấn vào biểu nói mẫu câu hệ thống dùng tượng micro ghi lại So sánh So sánh giọng Sau người dùng Hệ thống phân tích giọng đưa đọc người nói xong kết dùng với mẫu nhấn lại biểu tượng câu, sau đưa kết câu micro Lưu lại giọng đọc đọc người nói người dùng mẫu hình Bảng 6.9 Bảng mơ tả thao tác hình luyện phát âm 37 Chương 7: KẾT LUẬN 7.1 Môi trường phát triển môi trường triển khai 7.1.1 Môi trường phát triển ứng dụng ● ● ● ● Hệ điều hành: Microsoft Windows, macOS Hệ quản trị CSDL: Cloud Firestore Firebase Công cụ xây dựng ứng dụng: Visual Studio Code Các thư viện sử dụng: Redux, React Native, Expo 7.1.2 Môi trường triển khai ứng dụng ● Hệ điều hành: Android, iOS ● Cài đặt Android Studio để chạy máy ảo Android, XCode để chạy máy ảo iOS 7.2 Ưu điểm • Xây dựng ứng dụng hỗ trợ học tiếng Anh giao tiếp với chức như: học từ vựng, ngữ pháp, mẫu câu giao tiếp ngày, công việc, luyện nghe đoạn hội thoại, luyện phát âm với mẫu câu cho trước, giúp ôn luyện từ vựng, quản lý thơng tin người dùng • Ứng dụng hoạt động tảng di động phổ biến • Giao diện dễ sử dụng cho người bắt đầu sử dụng 7.3 Nhược điểm • Chưa hướng đến nhiều đối tượng sử dụng trẻ em, học sinh • Ứng dụng tập trung vào kĩ nghe nói giao tiếp 7.4 Hướng phát triển Ứng dụng hỗ trợ học tiếng anh giao tiếp cho người làm dự kiến mở rộng đối tượng người dùng Không hướng đến người làm, mà ứng dụng hướng đến trẻ em hay học sinh lứa tuổi có nhu cầu học tiếng Anh Hiện tại, ứng dụng hỗ trợ kĩ nghe nói cho người dùng ứng dụng thực hành giao tiếp Trong tương lai, nhóm em hỗ trợ cho người dùng kĩ cịn lại nói viết giúp cho người dùng phát triển toàn kĩ tiếng Anh 38 7.5 Bảng phân công công việc Thành viên STT Tên công việc Trần Thanh Lê Khải Hiền Hồn Xác định u cầu tốn x x Xác định danh sách actor, use-case, vẽ sơ đồ x x x x x Xác định danh sách đối tượng có phần mềm & vẽ sơ đồ lớp Phân tích liệu để vẽ sơ đồ liệu x Tạo project, set up môi trường làm việc x Xác định danh sách hình, quyền truy cập hình Xử lý UI logic tính năng: user authentication, xem video, kiểm tra đầu vào x x Xử lý UI logic tính năng: luyện x speaking (speech to text), lưu học từ vựng Kiểm tra sửa lỗi x 39 x x TÀI LIỆU THAM KHẢO [1] ThS Huỳnh Tuấn Anh (2022), Bài giảng Lập trình thiết bị di động, Khoa Cơng nghệ Phần mềm – Trường Đại học Công nghệ Thông tin [2] Giới thiệu React Native: https://nordiccoder.com/blog/tong-quan-ve-react-native/ [3] Ưu nhược điểm React Native: https://itviec.com/blog/react-native-la-gi/ [4] Giới thiệu Cloud Firestore: https://viblo.asia/p/firebase-realtime-database-cloudfirestore-la-gi-nen-chon-frd-hay-cf-cho-app-cua-ban-63vKj2xdK2R [5] Cách sử dụng Redux Toolkit: https://techmaster.vn/posts/36409/huong-dan-su-dungreact-router-va-redux-toolkit [6] The Complete React Native Course 2021: from Zero to Hero Programming with Mash: https://www.youtube.com/watch?v=ANdSdIlgsEw [7] Hướng dẫn Cloud Firestore Firebase – Google: https://www.youtube.com/watch?v=BjtxPj6jRM8 [8] ThS Nguyễn Thị Thanh Trúc (2020), Bài giảng Nhập môn Công nghệ phần mềm, Khoa Công nghệ Phần mềm - Trường Đại học Công nghệ Thông tin 40 ...ĐẠ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 - 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:... khai dự án phần mềm để xây dựng ứng dụng sản phẩm đề tài - Xây dựng ứng dụng học tiếng Anh giao tiếp cho người dùng đáp ứng yêu cầu giao diện chức đề - Có thể mở rộng thêm chức cho ứng dụng sản... việc học tiếng Anh trở nên khó khăn Đó lí nhóm chúng em chọn đề tài "Xây dựng ứng dụng hỗ trợ môn học" , cụ thể ứng dụng hỗ trợ học tiếng Anh giao tiếp dành cho người có thời gian, người làm LỜI