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

GIỚI THIỆU TỔNG QUAN ĐỀ TÀI

Lí do chọn đề tài

Trong bối cảnh kinh doanh toàn cầu hiện nay, tiếng Anh trở thành ngôn ngữ giao tiếp chính giữa các quốc gia, với hơn một nửa số quốc gia trên thế giới sử dụng Các đối tác lớn đến từ Mỹ, Trung Quốc, Nga, Anh và Đức chủ yếu giao tiếp bằng tiếng Anh Kỹ năng giao tiếp tiếng Anh trong công việc không chỉ giúp doanh nghiệp mở rộng hợp tác quốc tế mà còn là yêu cầu thiết yếu đối với nhân viên và quản lý Do đó, việc trang bị cho đội ngũ nhân sự khả năng giao tiếp tiếng Anh hiệu quả là điều quan trọng.

Việc học tiếng Anh giao tiếp hiện nay gặp nhiều khó khăn cho người đi làm do thiếu thời gian tham gia lớp học trực tiếp Sau giờ làm việc, họ thường phải chăm sóc gia đình hoặc tập trung vào các dự án công việc Để giải quyết vấn đề này, nhóm chúng tôi phát triển ứng dụng giúp người dùng học tiếng Anh giao tiếp mọi lúc, mọi nơi.

Lí do chọn công nghệ

Mọi người thường sử dụng hệ điều hành Android và iOS là phổ biến nhất hiện nay

Để phục vụ đa dạng người dùng, nhóm chúng tôi không thể chỉ phát triển ứng dụng trên nền tảng Android hoặc iOS Tuy nhiên, việc xây dựng ứng dụng riêng cho từng hệ điều hành sẽ tiêu tốn nhiều thời gian và chi phí.

Chúng em đã chọn framework React Native để phát triển ứng dụng, giúp nó hoạt động mượt mà trên cả hai nền tảng phổ biến là Android và iOS Điều này đảm bảo rằng hầu hết người dùng thiết bị di động đều có thể truy cập và sử dụng ứng dụng một cách nhanh chóng Chúng em tập trung vào nền tảng di động thay vì web hay desktop, vì người dùng có thể học tiếng Anh mọi lúc, mọi nơi mà không bị giới hạn bởi không gian hay môi trường.

Hiện nay, hầu hết mọi người đều sở hữu một chiếc điện thoại bên mình, thay vì chỉ có laptop Khi cần học tiếng Anh, người dùng chỉ cần mở điện thoại và khởi động ứng dụng, mang lại sự tiện lợi tối đa Ngược lại, nếu ứng dụng chạy trên nền tảng web, người dùng sẽ phải thực hiện nhiều thao tác hơn để truy cập, và giao diện có thể không thân thiện bằng ứng dụng di động.

Môi trường phát triển ứng dụng

- Hệ điều hành: Microsoft Windows, macOS

- Front-end: React Native, Redux toolkit

- Cơ sở dữ liệu: Cloud Firestore

- Công cụ phân tích thiết kế: Draw.io

- Công cụ xây dựng ứng dụng: Visual Studio Code

Các yêu cầu của hệ thống

1 Hệ thông phân loại trình độ của người học

2 Học từ vựng, ngữ pháp từ các mẫu câu giao tiếp hằng ngày, trong công việc

3 Luyện nghe các đoạn hội thoại

4 Luyện phát âm với mẫu câu cho trước và đưa ra so sánh

5 Hệ thống giúp người học ôn luyện từ vựng

6 Quản lý thông tin người dùng

Bảng 1.1 Danh sách các yêu cầu của hệ thống

CƠ SỞ LÍ THUYẾT

React Native

Hình 2.1 Biểu tượng React Native

Hiện nay, người dùng ngày càng ưa chuộng ứng dụng di động hơn là sử dụng máy tính để truy cập web Nhận thấy xu hướng này, nhóm chúng em quyết định phát triển một ứng dụng di động Tuy nhiên, chúng em đã phải cân nhắc về công nghệ phù hợp để xây dựng ứng dụng Cuối cùng, chúng em chọn framework React Native, một công cụ hỗ trợ phát triển ứng dụng đa nền tảng trên Android và iOS, giúp tiết kiệm thời gian học cho các lập trình viên web đã quen thuộc với ReactJS.

React Native là một framework được phát triển bởi Facebook, nhằm cải thiện hiệu suất của ứng dụng Hybrid và giảm chi phí khi phải viết mã cho nhiều ngôn ngữ native trên các nền tảng di động khác nhau Với React Native, người dùng có thể xây dựng ứng dụng Native đa nền tảng (multi-platform), không chỉ đơn thuần là một "mobile web app".

“HTML5 app” không chỉ là một “hybrid app” và có thể được xây dựng và chạy trên cả hai hệ sinh thái iOS và Android Một lợi ích đáng chú ý là giảm chi phí recompile của Native thông qua tính năng Hot-Loading, cho phép lập trình viên chỉnh sửa ứng dụng mà không cần phải xây dựng lại từ đầu Điều này giúp lập trình viên nhanh chóng thấy được các thay đổi một cách trực quan, tiết kiệm thời gian trong quá trình build và run ứng dụng.

Một số ưu và nhược điểm của React Native trong quá trình phát triển ứng dụng mà chúng ta có thể cân nhắc như sau [3]: Ưu điểm:

- Sử dụng ít native code hơn

- Thời gian phát triển ứng dụng được rút ngắn

- Tiết kiệm chi phí nhân lực cho doanh nghiệp

- Khả năng tái sử dụng code cao (75% – 80%)

- Trải nghiệm người dùng rất tốt

- Không cần nhiều kiến thức nền

- Chỉ hỗ trợ 2 nền tảng Android và iOS

- Hiệu năng sẽ thấp hơn với ứng dụng thuần native code

- Có một số thư viện cần trả phí

- Khả năng tùy biến không thực sự tốt với một vài module.

Cloud Firestore

Hình 2.2 Biểu tượng Cloud Firestore của Firebase

Sau khi chọn được Framework phù hợp, nhóm chúng em quyết định sử dụng React Native để tiết kiệm thời gian và dễ dàng phát triển ứng dụng di động Tiếp theo, chúng em cần tập trung vào việc giải quyết vấn đề cơ sở dữ liệu và phát triển mã nguồn cho phần back-end.

Việc phát triển server và code back-end tốn nhiều thời gian, vì vậy nhóm chúng em quyết định sử dụng Firebase do Google phát triển Firebase cung cấp hai tùy chọn là Realtime Database và Cloud Firestore, và trong đồ án kỳ này, nhóm chúng em chọn sử dụng Cloud Firestore.

Cloud Firestore là cơ sở dữ liệu mới của Firebase, được thiết kế cho ứng dụng di động với mô hình dữ liệu trực quan hơn và có khả năng mở rộng vượt trội so với Realtime Database Nó cung cấp tốc độ nhanh hơn, đồng bộ hóa dữ liệu trên các ứng dụng client thông qua đăng ký realtime và hỗ trợ ngoại tuyến cho thiết bị di động và web Bên cạnh đó, Cloud Firestore còn tích hợp với các sản phẩm khác của Firebase và Google Cloud Platform, bao gồm cả Cloud Functions.

Cloud Firestore cung cấp cho chúng ta một số chức năng chính như:

Cloud Firestore cung cấp tính linh hoạt vượt trội với khả năng hỗ trợ các cấu trúc dữ liệu phân cấp Người dùng có thể lưu trữ dữ liệu trong các document, được tổ chức thành các collection, cho phép chứa các đối tượng phức tạp.

Truy vấn tượng trưng cho phép bạn truy xuất các tài liệu riêng lẻ hoặc tất cả tài liệu trong một bộ sưu tập dựa trên các tham số truy vấn cụ thể Bạn có thể áp dụng nhiều bộ lọc trong truy vấn, cũng như kết hợp giữa bộ lọc và sắp xếp để tối ưu hóa kết quả tìm kiếm.

Cloud Firestore cung cấp cập nhật thời gian thực thông qua việc đồng bộ hóa dữ liệu trên tất cả các thiết bị kết nối, đồng thời hỗ trợ thực hiện các truy vấn tìm nạp một lần hiệu quả.

Cloud Firestore hỗ trợ chế độ offline bằng cách lưu trữ dữ liệu tại thiết bị, cho phép ứng dụng thực hiện các thao tác như viết, đọc, nghe và truy vấn dữ liệu ngay cả khi không có kết nối internet Khi thiết bị được kết nối trở lại, Cloud Firestore sẽ tự động đồng bộ hóa tất cả các thay đổi đã thực hiện trong chế độ offline lên hệ thống.

Khả năng mở rộng của Google Cloud Platform cho phép xử lý và quản lý cơ sở dữ liệu phức tạp từ những ứng dụng lớn nhất trên thế giới, đảm bảo hiệu suất tối ưu và linh hoạt cho doanh nghiệp.

Cách hoạt động của Cloud Firestore:

Cloud Firestore là một cơ sở dữ liệu NoSQL lưu trữ trên đám mây, cho phép các ứng dụng trên iOS, Android và Web truy cập trực tiếp thông qua SDK Ngoài ra, Cloud Firestore cũng hỗ trợ các SDK cho Node.js, Java, Python và Go, cùng với REST và RPC APIs.

Organized using the NoSQL data model of Cloud Firestore, data is stored in documents that map to specific values These documents are housed within collections, allowing for efficient data organization and query execution.

Protect access to your data in Cloud Firestore using Firebase Authentication for Android, iOS, and JavaScript, or implement Identity and Access Management (IAM) for enhanced access control.

Redux Toolkit

Trong quá trình phát triển ứng dụng với React Native, lập trình viên thường phải đối mặt với thách thức quản lý trạng thái của các thành phần như nút bấm và trường nhập liệu Những trạng thái này đóng vai trò quan trọng trong việc xác định dữ liệu hiển thị cho người dùng thông qua giao diện ứng dụng.

Hình 2.3 Cấu trúc của Redux Toolkit

Quá trình người dùng tương tác với ứng dụng và Redux toolkit cập nhật trạng thái ứng dụng [5]:

1 Người dùng tương tác với giao diện ứng dụng (chẳng hạn nhấn một nút bấm), lúc này người dùng đã gửi đi một action (hành động) chứa trạng thái mới và trong redux store

2 Redux Store như 1 nơi lưu state global mà tất cả các bộ phận ứng dụng trong phạm vi của Store đều có thể truy xuất để lấy dữ liệu hoặc cập nhật dữ liệu

3 Thông qua reducer trong redux store, các trạng thái được cập nhật mới

4 Các trạng thái mới sẽ được hiển thị lên giao diện người dùng.

Áp dụng các công nghệ vào đồ án

2.4.1 React Native Đồ án của nhóm em sẽ được xây dựng bằng React Native để nó có thể hoạt động được trên cả hai nền tảng phổ biến nhất hiện nay là Android và iOS Nhóm sẽ dùng JavaScript để viết code cho ứng dụng và thực thi chúng qua React Native CLI

React Native là một tập hợp các thành phần của React, với mỗi component tương ứng với một view hoặc component của native Nhóm chúng tôi sẽ viết mã để xử lý logic, giúp các component này tương tác và thực hiện chức năng của ứng dụng.

Việc sử dụng Redux Toolkit đơn giản hơn nhiều so với Redux truyền thống, cho phép nhóm tạo ra một kho lưu trữ chung cho toàn bộ ứng dụng Nhờ vào cú pháp ngắn gọn và dễ hiểu, việc thay đổi trạng thái của các đối tượng trong ứng dụng, như thêm hoặc xóa từ vựng và mẫu câu, trở nên dễ dàng hơn cho lập trình viên.

2.4.3 Cloud Firestore Để lưu trữ dữ liệu về các chủ đề học tập, nhóm chúng em chọn Cloud Firestore để sử dụng Việc lưu toàn bộ tài liệu trực tiếp lên ứng dụng sẽ khiến cho dung lượng của ứng dụng rất là lớn Và mỗi lần người dùng chọn một chủ đề nhỏ để học tập, ứng dụng sẽ lưu lại những nội dung cần thiết để tối ưu hóa dung lượng của ứng dụng Với các cú pháp dễ hiểu từ trang chủ của Firebase, chúng em có thể lấy dữ liệu từ Cloud Firestore khá dễ dàng

MÔ HÌNH USE-CASE

Sơ đồ Use-case

Hình 3.1 Sơ đồ Use-case tổng quát của ứng dụng

Danh sách actor

STT Tên actor Ý nghĩa/Nội dung

1 Người dùng Người trực tiếp sử dụng ứng dụng để học tiếng Anh

Bảng 3.1 Danh sách actor của ứng dụng

Danh sách các use-case

STT Tên use-case Ý nghĩa/Ghi chú

4 Quản lý thông tin cá nhân Xem/Chỉnh sửa thông tin cá nhân

5 Kiểm tra đầu vào Bài kiểm tra đầu vào cho người dùng để chuẩn bị các chủ đề học phù hợp

Xem video các cuộc hội thoại bằng tiếng Anh (có chuẩn bị các mẫu câu vả từ vựng cho người dùng trước khi xem)

7 Học từ vựng Các từ vựng được người dùng lưu vào sẽ hiển thị dưới dạng flashcard giúp cho họ dễ dàng ghi nhớ từ vựng

8 Ôn tập từ vựng Người dùng sẽ làm các câu hỏi trắc nghiệm để luyện tập lại những từ vựng đã học

9 Luyện phát âm Người dùng sẽ nói theo những mẫu câu cho sẵn và hệ thống sẽ so sánh độ phát âm chính xác

Bảng 3.2 Danh sách các use-case của ứng dụng

Đặc tả Use-case

3.4.1 Đặc tả use-case “Đăng nhập”

Tên chức năng Đăng nhập

Tóm tắt Chức năng đăng nhập vào hệ thống

Dòng sự kiện chính 1 Hệ thống hiển thị màn hình đăng nhập

2 Người dùng nhập email và mật khẩu (cả 2 trường này đều bắt buộc nhập) và nhấn “Đăng nhập”

3 Hệ thống kiểm tra thông tin đăng nhập (Dòng sự kiện khác: Thông tin đăng nhập sai)

4 Hệ thống chuyển tới màn hình chính của ứng dụng Dòng sự kiện khác 1 Thông tin đăng nhập sai:

Hệ thống hiển thị thông báo tài khoản đăng nhập không hợp lệ Các yêu cầu đặc biệt - Tài khoản đã được đăng kí trước đó

- Email người dùng đã được chứng thực

Trạng thái hệ thống trước khi thực thiện use case

Actor: người dùng Điều kiện: Người dùng vào ứng dụng khi chưa đăng nhập

Trạng thái hệ thống sau khi thực hiện use case

Người dùng đăng nhập thành công vào hệ thống, có thể sử dụng các quyền mà hệ thống cho phép Điểm mở rộng Không có

Bảng 3.3 Đặc tả use-case đăng nhập 3.4.2 Đặc tả use-case “Đăng xuất”

Tên chức năng Đăng xuất

Tóm tắt Chức năng đăng xuất ra hệ thống

Dòng sự kiện chính 1 Người dùng nhấn vào Đăng xuất

2 Hệ thống đăng xuất và trở về màn hình đăng nhập Dòng sự kiện khác Không có

Các yêu cầu đặc biệt Không có

Trạng thái hệ thống trước khi thực hiện use case

Actor: Người dùng Điều kiện: người dùng đã đăng nhập hệ thống

Người dùng đăng xuất khỏi hệ thống Điểm mở rộng Không có

Bảng 3.4 Đặc tả use-case đăng xuất 3.4.3 Đặc tả use-case “Đăng ký”

Tên chức năng Đăng ký

Tóm tắt Chức năng giúp người dùng đăng ký tài khoản để sự dụng hệ thống Dòng sự kiện chính 1 Người dùng nhấn vào nút đăng ký

2 Hệ thống hiển thị màn hình đăng kí

3 Người dùng nhập những thông tin cần thiết và chọn nút tạo tài khoản

4 Hệ thống kiểm tra thông tin đăng ký, lưu dữ liệu vào cơ sở dữ liệu, thông báo thành công và yêu cầu người dùng kiểm tra email để xác thực tài khoản

(Dòng sự kiện khác: Thông tin đăng ký không hợp lệ)

5 Hệ thống chuyển về màn hình đăng nhập

6 Người dùng xác thực tài khoản

7 Tài khoản xác thực thành công và có thể dùng để đăng nhập vào ứng dụng

Dòng sự kiện khác 1 Thông tin đăng ký không hợp lệ:

Hệ thống hiển thị thông báo lỗi ngay tại chỗ bị lỗi và yêu cầu nhập lại thông tin hợp lệ

Actor: Người dùng Điều kiện: Không có

Người dùng đăng ký thành công tài khoản trên hệ thống Điểm mở rộng Không có

Bảng 3.5 Đặc tả use-case đăng ký 3.4.4 Đặc tả use-case “Quản lý thông tin cá nhân” a Xem thông tin cá nhân

Tên chức năng Xem thông tin cá nhân

Tóm tắt Xem thông tin cá nhân của người dùng

Dòng sự kiện chính 1 Người dùng chuyển qua tab thông tin cá nhân trong ứng dụng

2 Hệ thống lấy thông tin cá nhân người dùng và hiển thị lên màn hình

Dòng sự kiện khác Không có

Actor: Người dùng Điều kiện: Không có

Trạng thái hệ thống sau khi thực thiện use case

Hệ thống không thay đổi Điểm mở rộng Không có

Bảng 3.6 Đặc tả use-case quản lý thông tin cá nhân b Sửa thông tin cá nhân

Tên chức năng Sửa thông tin cá nhân

Tóm tắt Sửa thông tin cá nhân của người dùng

Dòng sự kiện chính 1 Người dùng chuyển qua tab thông tin cá nhân trong ứng dụng

2 Hệ thống lấy thông tin cá nhân người dùng và hiển thị lên màn hình

3 Người dùng thay đổi những thông tin mong muốn và bấm

4 Hệ thống kiểm tra lưu dữ liệu và thông báo thành công

(Dòng sự kiện khác: Thông tin không hợp lệ, hệ thống không lưu thông tin cá nhân mới và báo lỗi)

Dòng sự kiện khác Thông tin cá nhân mới không hợp lệ:

Hệ thống hiển thị thông báo trường bị lỗi và yêu cầu nhập lại thông tin

Actor: Người dùng Điều kiện: Người dùng đã đăng nhập vào hệ thống

Người dùng cập nhật thông tin người dùng thành công vào hệ thống Điểm mở rộng Không có

Bảng 3.7 Đặc tả use-case sửa thông tin cá nhân 3.4.5 Đặc tả use-case “Kiểm tra đầu vào”

Tên chức năng Kiểm tra đầu vào

Kiểm tra đầu vào bao gồm các câu trắc nghiệm nhằm đánh giá khả năng của người dùng, từ đó giúp sắp xếp các chủ đề và bài học phù hợp.

Dòng sự kiện chính 1 Người dùng đăng nhập vào ứng dụng

2 Người dùng chọn vào một chủ đề bất kì, hệ thống yêu cầu người dùng làm bài kiểm tra đầu vào

3 Người dùng làm xong bài kiểm tra đầu vào và được đánh giá năng lực

4 Hệ thống mở khóa các chức năng phù hợp với người dùng Dòng sự kiện khác Không có

Các yêu cầu đặc biệt Người dùng chưa làm bài kiểm tra đầu vào

Actor: Người dùng Điều kiện: Người dùng đăng nhập vào hệ thống

Hệ thống cập nhật trình độ của người dùng Điểm mở rộng Không có

Bảng 3.8 Đặc tả use-case kiểm tra đầu vào 3.4.6 Đặc tả use-case “Xem video hội thoại”

Tên chức năng Xem video hội thoại

Tóm tắt video hội thoại tiếng Anh: Người dùng sẽ được chuẩn bị các mẫu câu và từ vựng cần thiết trước khi xem Đầu tiên, người dùng cần đăng nhập vào ứng dụng để bắt đầu trải nghiệm.

2 Hệ thống lấy danh sách các chủ đề video phù hợp với trình độ người dùng để hiển thị

3 Người dùng nhấn vào xem outline của video bao gồm các mẫu câu và từ vựng đáng chú ý

4 Người dùng lưu những mẫu câu và từ vựng muốn ôn tập

Các yêu cầu đặc biệt Người dùng đã thực hiện bài kiểm tra đầu vào

Hệ thống lưu các từ vựng và mẫu câu người dùng muốn

Bảng 3.9 Đặc tả use-case xem video hội thoại 3.4.7 Đặc tả use-case “Học từ vựng”

Tên chức năng Học từ vựng

Người dùng sẽ dễ dàng ghi nhớ từ vựng thông qua các flashcard hiển thị trong ứng dụng Để bắt đầu, người dùng cần đăng nhập vào ứng dụng.

2 Hệ thống sẽ hiển thị danh sách các từ vựng trong mỗi chủ đề

3 Người dùng nhấn vào biểu tượng "bookmark" để lưu từ vựng cần học

4 Người dùng chuyển qua tab học từ vựng trong bottom navbar

5 Người dùng nhấn nút "Learn vocabulary" để học từ vựng

6 Màn hình học từ vựng với danh sách các flashcard từ vựng mới sẽ hiện ra

7 Để xem nghĩa của từ, người dùng nhấn vào flashcard đó Ngược lại, khi người dùng đã nhớ từ mới, nhấn vào nút

Các yêu cầu đặc biệt Người dùng đã đăng nhập vào ứng dụng

Hệ thống sẽ chuyển các từ vựng đã học sang phần ôn tập từ vựng

Bảng 3.10 Đặc tả use-case học từ vựng 3.4.8 Đặc tả use-case “Ôn tập từ vựng”

Tên chức năng Ôn tập từ vựng

Người dùng sẽ thực hiện các bài trắc nghiệm để ôn tập từ vựng đã học, giúp củng cố kiến thức hiệu quả Đầu tiên, người dùng cần đăng nhập vào ứng dụng để bắt đầu quá trình ôn luyện.

2 Người dùng chuyển đến phần ôn tập từ vựng

3 Một danh sách các từ sẽ được hiển thị dưới dạng các đáp án

4 Người dùng chọn 1 trong 3 đáp án và hệ thống sẽ cho biết kết quả đúng sai ngay sau đó

5 Sau khi hoàn thành các câu hỏi ôn tập, người dùng sẽ được thông báo kết quả ngay sau đó

Dòng sự kiện khác Khi muốn kết thúc ôn tập ngay, người dùng click vào mũi tên quay lại

Các yêu cầu đặc biệt Người dùng đã đăng nhập vào ứng dụng và có ít nhất 1 từ vựng đã học

Hệ thống sẽ hiển thị màn hình thông báo kết quả người dùng làm được

Bảng 3.11 Đặc tả use-case ôn tập từ vựng

3.4.9 Đặc tả use-case “Luyện phát âm”

Tên chức năng Luyện phát âm

Người dùng sẽ được yêu cầu đọc lại một mẫu câu đã cho, và hệ thống sẽ cung cấp phản hồi về độ chính xác trong phát âm của họ so với mẫu câu đó.

Dòng sự kiện chính 1 Người dùng đăng nhập vào ứng dụng

2 Hệ thống sẽ hiển thị danh sách các mẫu câu thuộc nhiều chủ đề đa dạng khác nhau

3 Người dùng chọn bất kì mẫu câu để luyện phát âm

4 Sau đó họ bấm vào nút micro để bắt đầu nói

5 Hệ thống sẽ hiện ra kết quả thông báo so sánh giữa giọng của người đọc và mẫu câu

Các yêu cầu đặc biệt Người dùng đã đăng nhập vào ứng dụng

Hệ thống sẽ hiện ra kết quả thông báo so sánh giữa giọng của người đọc và mẫu câu Điểm mở rộng Không có

Bảng 3.12 Đặc tả use-case luyện phát âm

PHÂN TÍCH

Sơ đồ lớp (mức phân tích)

Hình 4.1 Sơ đồ lớp tổng quát của ứng dụng

Danh sách các lớp đối tượng và quan hệ

STT Tên lớp/quan hệ Loại Ý nghĩa/Ghi chú

1 User Lớp Lớp tài khoản

3 EntryTest Lớp Lớp kiểm tra đầu vào

4 EntryTestDetail Lớp Lớp chi tiết bài kiểm tra đầu vào

5 VideoOutline Lớp Lớp đề cương video (bao gồm các từ vựng và mẫu câu đáng chú ý)

Quan hệ tài khoản – video

Quan hệ tài khoản – kiểm tra đầu vào

Composition Quan hệ kiểm tra đầu vào – chi tiết kiểm tra đầu vào

Aggregation Quan hệ video – đề cương video

10 Vocabulary Lớp Lớp từ vựng để lưu các thông tin về từ vựng

11 Sentence Lớp Dùng để lưu thông tin của mẫu câu cho người dùng luyện phát âm

Bảng 4.1 Danh sách các lớp và mối quan hệ trong ứng dụng

Mô tả chi tiết từng lớp đối tượng

4.3.1 Lớp “User” a) Danh sách thuộc tính

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 fullName String Public Tên người dùng

2 email String Public Email người dùng

3 dateOfBirth String Public Ngày sinh người dùng

4 gender String Public Giới tính người dùng

5 address String Public Địa chỉ người dùng

Bảng 4.2 Bảng mô tả thuộc tính lớp "User" b) Danh sách phương thức

STT Tên phương thức Loại Ràng buộc Ý nghĩa/ghi chú

1 createUser Bool Public Tạo tài khoản người dùng

2 updateUser Bool Public Cập nhật thông tin người dùng

Bảng 4.3 Bảng mô tả phương thức lớp "User"

4.3.2 Lớp “EntryTest” a) Danh sách thuộc tính

1 numberOfQuestions Number Public Số lượng câu hỏi

2 result String Public Kết quả bài kiểm tra đầu vào

Bảng 4.4 Bảng mô tả thuộc tính lớp "EntryTest" b) Danh sách phương thức

1 calculateResult Bool Public Tính toán kết quả bài kiểm tra

Bảng 4.5 Bảng mô tả phương thức lớp "EntryTest"

4.3.3 Lớp “EntryTestDetail” a) Danh sách thuộc tính

1 question String Public Chủ đề câu hỏi

2 answers Array Public Các câu trả lời

3 rightAswer String Public Câu trà lời đúng

Bảng 4.6 Bảng mô tả thuộc tính lớp "EntryTestDetail" b) Danh sách phương thức

1 answerQuestion Bool Public Trả lời câu hỏi

2 CheckResult Bool Public Kiểm tra xem câu hỏi có đúng hay không

Bảng 4.7 Bảng mô tả phương thức lớp "EntryTestDetail"

4.3.4 Lớp “VideoOutline” a) Danh sách thuộc tính

1 videoDescription String Public Mô tả video

2 videoSubject String Public Chủ đề video

3 Vocabularies Array Public Các từ vựng có trong video

4 Sentences Array Public Các mẫu câu có trong video

Bảng 4.8 Bảng mô tả thuộc tính lớp "VideoOutline"

4.3.5 Lớp “Video” a) Danh sách thuộc tính

1 videoURL String Public Đường dẫn để lấy video

2 videoSubtitle String Public Subtitle của video

Bảng 4.9 Bảng mô tả thuộc tính lớp "Video" b) Danh sách phương thức

1 getVideo Bool Public Lấy video về để chiếu cho người dùng

Bảng 4.10 Bảng mô tả phương thức lớp "Video"

4.3.6 Lớp “Vocabulary” a) Danh sách thuộc tính

1 word String Public Từ vựng

2 pronounce String Public Phát âm

3 meaningViet String Public Nghĩa tiếng Việt

4 meaningEng String Public Nghĩa tiếng Anh

5 example String Public Ví dụ minh họa về từ đó

6 wordType String Public Loại từ

7 anotherWordOne String Public Từ gây nhiễu để sử dụng trong câu hỏi

8 anotherWordTwo String Public Từ gây nhiễu để sử dụng trong câu hỏi

Bảng 4.11 Bảng mô tả thuộc tính lớp "Vocabulary"

4.3.7 Lớp “Sentence” a) Danh sách thuộc tính

1 content String Public Nội dung mẫu câu

2 sound Sound Public Giọng đọc cho mẫu câu đó

Bảng 4.12 Bảng mô tả thuộc tính lớp "Sentence" b) Danh sách phương thức

1 getVoice Void Public Lấy giọng đọc chuẩn của mẫu câu để người dùng luyện theo

Bảng 4.13 Bảng mô tả phương thức lớp "Sentence"

THIẾT KẾ DỮ LIỆU

Sơ đồ logic

Hình 5.1 Sơ đồ dữ liệu tổng quát của ứng dụng

STT Tên bảng dữ liệu Diễn giải

1 Users Thông tin tài khoản người dùng

2 Video Thông tin các video hội thoại

3 Vocabulary Thông tin chi tiết về từ vựng

4 Sentence Thông tin chi tiết về mẫu câu

Bảng 5.1 Bảng mô tả chi tiết trong sơ đồ dữ liệu

Mô tả chi tiết các kiểu dữ kiệu trong sơ đồ logic

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú

1 uid string Khóa chính, không null

2 username string Không null Tên người dùng

3 email string Không null Email đăng nhập

4 password string Không null Mật khẩu

5 gender string Giới tính người dùng

6 birthDay string Ngày sinh người dùng

7 address string Địa chỉ người dùng

Bảng 5.2 Bảng mô tả chi tiết dữ liệu "User"

1 videoId string Khóa chính, Not null Id của video

2 subject string Not null Chủ đề của video

3 description string Not null Mô tả của video

4 subtitle string Not null Phụ đề của video

5 vocabularies array Not null Từ vựng đáng chú ý

6 Sentences array Not null Mẫu câu đáng chú ý

Bảng 5.3 Bảng mô tả chi tiết dữ liệu "Video"

1 word string Not null, khóa chính Từ vựng

2 type string Not null, khóa chính Loại từ

3 pronounce string Not null Phát âm từ

4 meaningViet string Not null Nghĩa tiếng Việt

5 meaningEng string Not null Nghĩa tiếng Anh

6 example string Not null Ví dụ minh họa

7 anotherWordOne string Not null Từ gây nhiễu

8 anotherWordTwo string Not null Từ gây nhiễu

Bảng 5.4 Bảng mô tả chi tiết dữ liệu "Vocabulary"

1 content string Khóa chính, Not null, Nội dung câu

2 sound Sound Not null Âm thanh của câu

Bảng 5.5 Bảng mô tả chi tiết dữ liệu "Sentence"

THIẾT KẾ GIAO DIỆN ỨNG DỤNG

Danh sách các màn hình

STT Tên màn hình Ý nghĩa / Ghi chú

1 Đăng nhập Cho phép người dùng đăng nhập vào hệ thống

2 Đăng ký Cho phép người dùng đăng ký tài khoản để tương tác với hệ thống

3 Trang chủ Hiển thị màn hình chính của hệ thống để người dùng sử dụng

4 Video Hiển thị thông tin video hội thoại

5 Học từ vựng Hiển thị danh sách các flashcard giúp cho người dùng học từ vựng mới

6 Ôn tập từ vựng Ôn tập các từ vựng đã học theo dạng câu hỏi trắc nghiệm

7 Luyện phát âm Người dùng luyện phát âm theo mẫu câu cho sẵn và kết quả so sánh cho người dùng

Bảng 6.1 Bảng mô tả các màn hình của ứng dụng

Mô tả chi tiết mỗi màn hình

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 chú

1 Kiểm tra email đăng nhập

Kiểm tra email đăng nhập

Người dùng bấm vào nút “Sign in”

Kiểm tra chuỗi rỗng và email có khả dụng hay không

Kiểm tra chuỗi rỗng và mật khẩu có khả dụng hay không

4 Tạo tài khoản Chuyển sang màn hình tạo tại khoản

Khi người dùng click vào nút

Bảng 6.2 Bảng mô tả các thao tác trong màn hình đăng nhập 6.2.2 Đăng ký

Hình 6.2 Màn hình đăng ký

Khi người dùng bấm vào “Sign up”

Kiểm tra format email và chuỗi rỗng, nếu không thỏa sẽ báo lỗi

Kiểm tra độ mạnh mật khẩu và chuỗi rỗng, nếu không thỏa sẽ báo lỗi

3 Kiểm tra xác nhận mật khẩu

Kiểm tra xác nhận mật khẩu

Kiểm tra xác nhận mật khẩu phải trùng với mật khẩu đăng ký

4 Đăng ký Đăng ký tài khoản cho người dùng

Xử lý gửi email verification cho người dùng và lưu thông tin tài khoản vào database

Bảng 6.3 Bảng mô tả các thao tác trong màn hình đăng ký

Hình 6.3 Màn hình trang chủ

1 Hiển thị các từ mới lưu

Hiển thị các từ mới lưu

Người dùng lưu từ mới

2 Hiển thị các chủ video gợi ý cho từng ngày

Hiển thị các chủ video gợi ý cho từng ngày

Người dùng đăng nhập vào ứng dụng

Bảng 6.4 Bảng mô tả các thao tác trong màn hình trang chủ

Hình 6.4 Màn hình học qua video

1 Hiển thị video cho người dùng

Hiển thị video cho người dùng

Người dùng đã làm bài kiểm tra đầu vào và đủ trình độ vào xem video

2 Hiển thị mô tả video cho người dùng

Hiển thị mô tả video cho người dùng

3 Hiển thị các từ vựng đáng chú ý cho người dùng

Hiển thị các từ vựng đáng chú ý cho người dùng

4 Hiển thị các mẫu câu đáng chú ý cho người dùng

Hiển thị các mẫu câu đáng chú ý cho người dùng

Bảng 6.5 Bảng mô tả các thao tác trong màn 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

1 Cập nhật Cập nhật thông tin tài khoản

Khi người dùng nhấn vào nút “Save Profile”

Khi đó thông tin mới mà người dùng nhập vào sẽ được cập nhật trên database

2 Đăng xuất Đăng xuất khỏi ứng dụng

Khi người dùng nhấn vào nút “Sign out”

3 Hiển thị Hiển thị thông tin tài khoản

Người dùng chuyển sang tab “Profile”

Bảng 6.6 Bảng mô tả các thao tên trên màn hình thông tin cá nhân

Hình 6.6 Màn hình học từ vựng

Xem các nội dung khác của từ vựng

Khi người dùng nhấn vào thẻ từ vựng đó (hoặc thẻ flashcard)

Khi đó thông tin khác của từ vựng như nghĩa tiếng Anh, tiếng Việt, ví dụ minh họa sẽ xuất hiện

2 Học từ vựng qua flashcard

Học từ mới qua flashcard như thẻ thật

Khi người dùng nhấn vào nút "Learn Vocabulary"

Màn hình gồm các flashcard từ vựng sẽ xuất hiện

Chuyển từ vựng mới sang đã học

Người dùng nhấn vào nút "Remember this word"

Khi đó, từ vựng sẽ được chuyển sang mục đã học

Xóa từ vựng ra khỏi danh sách từ chưa học

Người dùng nhấn vào biểu tượng lá cờ

Từ vựng sẽ được xóa khỏi danh sách

Bảng 6.7 Bảng mô tả các thao tác trên màn hình học từ vựng

Hình 6.7 Màn hình ôn tập từ vựng

Xem các nội dung khác của từ vựng

Khi người dùng nhấn vào thẻ từ vựng đó

Khi đó thông tin khác của từ vựng như nghĩa tiếng Anh, tiếng Việt, ví dụ minh họa sẽ xuất hiện

Luyện tập lại những từ đã học

Người dùng nhấn vào nút

Màn hình gồm các câu hỏi ôn tập từ vựng gồm có 3 đáp án xuất hiện

Xóa từ vựng ra khỏi danh sách từ chưa học

Người dùng nhấn vào biểu tượng lá cờ

Từ vựng sẽ được xóa khỏi danh sách

Bảng 6.8 Bảng mô tả các thao tác trên màn 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

Lưu lại giọng đọc của người dùng

Khi người dùng nhấn vào biểu tượng micro

Sau khi nhấn, người dùng sẽ nói mẫu câu và hệ thống sẽ ghi lại

2 So sánh và đưa ra kết quả

So sánh giọng đọc của người dùng với mẫu câu

Sau khi người dùng đã nói xong và nhấn lại biểu tượng micro

Hệ thống sẽ phân tích giọng nói của người dùng và mẫu câu, sau đó đưa ra kết quả trên màn hình

Bảng 6.9 Bảng mô tả các thao tác trên màn hình luyện phát âm

Tiêu đề	Xây Dựng Ứng Dụng Hỗ Trợ Môn Học
Tác giả	Trần Thanh Hiền, Lê Khải Hoàn
Người hướng dẫn	ThS. Trần Thị Hồng Yến
Trường học	Đại Học Quốc Gia Tp. Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	báo cáo đồ án
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	54
Dung lượng	4,48 MB