Báo cáo đồ án 2 xây dựng ứng dụng hỗ trợ môn học

- Khảo sát thực trạng các ứng dụng học tiếng Anh giao tiếp tương tự như Duolingo, Cake, TFlat,… được nhiều người dùng sử dụng nhất, từ đó tiến hành phân tích, xác định các yêu cầu cụ thể

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

Tên đề tài

XÂY DỰNG ỨNG DỤNG HỖ TRỢ MÔN HỌC

Lí do chọn đề tài

Trong bối cảnh kinh doanh toàn cầu, tiếng Anh trở thành ngôn ngữ trung gian phổ biến và được ưa chuộng nhất, với hơn một nửa số quốc gia trên thế giới sử dụng nó làm ngôn ngữ giao tiếp chính trong doanh nghiệp Các đối tác lớn từ Mỹ, Trung Quốc, Nga, Anh, Đức đều sử dụng tiếng Anh để trao đổi, giúp các doanh nghiệp dễ dàng hợp tác quốc tế Kỹ năng giao tiếp tiếng Anh tốt mở ra cơ hội làm việc với đối tác ở mọi nơi trên thế giới, làm tăng giá trị cạnh tranh của nhân viên và cấp quản lý trong môi trường doanh nghiệp toàn cầu Chính vì vậy, việc nâng cao kỹ năng tiếng Anh công việc trở thành yêu cầu không thể thiếu trong các doanh nghiệp hiện nay.

Việc học tiếng Anh giao tiếp hiện nay gặp nhiều khó khăn đối với người đi làm do thiếu thời gian để tham gia các lớp học trực tiếp, khi sau giờ hành chính họ phải lo chăm sóc gia đình hoặc tập trung vào công việc Chính vì vậy, chúng tôi phát triển một ứng dụng giúp người dùng có thể học tiếng Anh giao tiếp mọi lúc, mọi nơi, phù hợp với lịch trình bận rộn của họ Ứng dụng còn hướng đến đối tượng trẻ em để đáp ứng nhu cầu học tiếng Anh của mọi nhóm tuổi, từ đó mở rộng khả năng tiếp cận và nâng cao kỹ năng giao tiếp tiếng Anh cho cộng đồng.

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

Để hướng đến đa dạng người dùng, chúng tôi không thể phát triển ứng dụng chỉ trên một nền tảng như Android hoặc iOS Việc xây dựng ứng dụng riêng cho từng hệ điều hành đòi hỏi nhiều thời gian và chi phí, khiến quá trình phát triển trở nên phức tạp hơn.

Chúng tôi quyết định sử dụng framework React Native để phát triển ứng dụng, giúp nó hoạt động trên cả hai nền tảng di động phổ biến nhất hiện nay là Android và iOS Việc này đảm bảo đa số người dùng thiết bị di động có thể truy cập, sử dụng một cách mượt mà, nhanh chóng và thuận tiện.

Chúng em đã chọn phát triển đề tài dựa trên nền tảng thiết bị di động để đáp ứng nhu cầu học tiếng Anh mọi lúc, mọi nơi của người dùng Điều này phù hợp vì hầu hết mọi người đều sở hữu điện thoại di động thay vì mang theo laptop, giúp việc tiếp cận và học tập trở nên thuận tiện hơn 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 trải nghiệm học tập đơn giản và nhanh chóng Trong khi đó, việc sử dụng nền tảng web có thể gây mất thời gian và không đảm bảo giao diện trực quan, thân thiện như trên ứ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

Bảng 1.13 Danh sách 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

CƠ SỞ LÍ THUYẾT

React Native

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

Hiện nay, xu hướng người dùng sử dụng các ứng dụng di động ngày càng tăng thay vì truy cập các website trên màn hình máy tính Nhận thức được điều này, nhóm đã quyết định phát triển đồ án dựa trên nền tảng ứng dụng di động để phù hợp với xu hướng thị trường Trước câu hỏi về công nghệ phù hợp để xây dựng ứng dụng, nhóm đã lựa chọn sử dụng framework React Native nhờ khả năng phát triển đa nền tảng cho Android và iOS, đồng thời giúp tiết kiệm thời gian học công nghệ mới cho các lập trình viên đã có kinh nghiệm với ReactJS.

React Native là một framework phát triển bởi Facebook nhằm giải quyết vấn đề hiệu năng của các ứng dụng Hybrid và giảm thiểu chi phí phát triển bằng cách cho phép xây dựng các ứng dụng Native từ một mã nguồn duy nhất Với React Native, lập trình viên có thể xây dựng các ứng dụng đa nền tảng (multi-platform), thay vì phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động riêng biệt Điều này giúp tiết kiệm thời gian và nguồn lực, đồng thời mang lại trải nghiệm người dùng mượt mà hơn so với các ứng dụng chỉ chạy trên nền tảng web.

HTML5 app không phải là một hybrid app, cũng không chỉ được xây dựng trên iOS hoặc Android mà còn có khả năng chạy trên cả hai hệ sinh thái Một điểm nổi bật của loại ứng dụng này là giảm chi phí recompile của native bằng cách sử dụng công nghệ Hot-Loading, giúp lập trình viên chỉnh sửa code và xem kết quả một cách nhanh chóng và trực quan Điều này loại bỏ cần phải build lại ứng dụng từ đầu mỗi lần chỉnh sửa, tiết kiệm thời gian và nâng cao hiệu quả phát triển.

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 [4]: Ư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, giúp tiết kiệm thời gian và dễ dàng phát triển trên nền tảng di động, nhóm em hướng tới việc xây dựng cơ sở dữ liệu và phát triển mã nguồn phía back-end Việc này giúp đảm bảo sự liên kết chặt chẽ giữa ứng dụng di động và hệ thống máy chủ, đồng thời nâng cao hiệu suất và khả năng mở rộng của dự án Chọn đúng công nghệ backend sẽ tối ưu hóa quy trình phát triển và mang lại trải nghiệm người dùng tốt nhất.

Việc phát triển một server và mã backend đòi hỏi nhiều thời gian, do đó nhóm chúng tôi đã chọn sử dụng Firebase, nền tảng phát triển của Google, để tối ưu hóa quy trình Firebase cung cấp hai tùy chọn chính là Firebase Realtime Database và Cloud Firestore, và trong đồ án này, nhóm tôi đã quyết định sử dụng Cloud Firestore để phù hợp với yêu cầu dự án.

Cloud Firestore là cơ sở dữ liệu mới của Firebase dành cho phát triển ứng dụng di động, kế thừa từ Realtime Database nhưng với mô hình dữ liệu trực quan và phong phú hơn Nó nhanh hơn, khả năng mở rộng vượt trội và hỗ trợ đồng bộ dữ liệu realtime cũng như ngoại tuyến cho cả thiết bị di động và web Bên cạnh đó, Cloud Firestore tích hợp dễ dàng với các dịch vụ của Firebase và Google Cloud Platform, như Cloud Functions, mang lại sự linh hoạt và mở rộng tối đa cho dự án của bạn.

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

Cloud Firestore mang lại tính linh hoạt vượt trội nhờ khả năng hỗ trợ các cấu trúc dữ liệu phân cấp và linh hoạt Bạn có thể lưu trữ dữ liệu của mình trong các document, được tổ chức thành các collection rõ ràng và dễ quản lý Đặc biệt, các document trong Firestore có thể chứa các đối tượng phức tạp, giúp tối ưu hóa khả năng mở rộng và phù hợp với nhiều loại ứng dụng khác nhau.

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ả các tài liệu trong collection phù hợp với tham số truy vấn của bạn Bạn có thể xây dựng các truy vấn phức tạp bằng cách kết hợp nhiều bộ lọc, sắp xếp dữ liệu và lọc theo các tiêu chí khác nhau Việc sử dụng truy vấn hiệu quả giúp tìm kiếm dữ liệu chính xác và tối ưu hóa quá trình xử lý thông tin trong hệ thống của bạn.

Cloud Firestore cung cấp tính năng đồng bộ hóa dữ liệu theo thời gian thực, giúp cập nhật dữ liệu liên tục trên tất cả các thiết bị kết nối Với khả năng thực hiện các truy vấn tìm nạp một lần, Firestore giúp tối ưu hóa hiệu suất và trải nghiệm người dùng Điều này làm cho Firestore trở thành lựa chọn hàng đầu cho các ứng dụng yêu cầu cập nhật dữ liệu nhanh chóng và chính xác.

Cloud Firestore hỗ trợ lưu trữ dữ liệu offline nhờ khả năng lưu trữ tại thiết bị, giúp ứng dụng có thể đọc, viết và truy vấn dữ liệu ngay cả khi không có kết nối Internet Khi thiết bị trở lại trực tuyến, Cloud Firestore tự động đồng bộ hóa mọi thay đổi cục bộ lên đám mây, đảm bảo dữ liệu luôn được cập nhật và nhất quán.

Khả năng mở rộng của Google Cloud Platform giúp thiết kế các cơ sở dữ liệu mạnh mẽ, phù hợp để xử lý các ứng dụng lớn nhất thế giới Nhờ đó, nền tảng này đảm bảo khả năng mở rộng linh hoạt, đáp ứng mọi nhu cầu về dữ liệu của doanh nghiệp, ngay cả trong những môi trường dữ liệu phức tạp và đòi hỏi cao.

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, giúp các ứng dụng iOS, Android và Web truy cập dễ dàng thông qua SDK Ngoài ra, Cloud Firestore còn hỗ trợ các nền tảng phát triển như Node.js, Java, Python và Go thông qua SDK, REST và RPC APIs, đảm bảo khả năng tích hợp linh hoạt và mở rộng cho nhiều dự án khác nhau.

Organized using Cloud Firestore's NoQuery data model, data is stored in documents that map to specific values These documents are contained within collections, allowing for efficient data organization and precise querying capabilities.

Protect your data access in Cloud Firestore by implementing Firebase Authentication for Android, iOS, and JavaScript platforms, ensuring secure user authentication Additionally, utilize Identity and Access Management (IAM) to efficiently identify and manage user permissions, safeguarding your database from unauthorized access Combining these security measures helps maintain data integrity and control over your Firestore database across different environments.

Redux Toolkit

Trong quá trình xây dựng ứng dụng sử dụng React Native, việ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 là một thách thức quan trọng đối với lập trình viên Các trạng thái này đóng vai trò quyết định nội dung và dữ liệu hiển thị trên giao diện người dùng, ảnh hưởng trực tiếp đến trải nghiệm của người dùng Việc tối ưu hóa quản lý trạng thái giúp nâng cao hiệu suất và độ phản hồi của ứng dụng React Native, đảm bảo tính năng hoạt động mượt mà và chính xác hơn.

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 [6]:

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.

TypeScript

- Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn

- Dễ dàng tổ chức code cho các ứng dụng cực lớn và phức tạp nhờ modules, namespaces và hỗ trợ OOP mạnh mẽ

- TypeScript có một bước biên dịch thành JavaScript, sẽ bắt tất cả các loại lỗi trước khi chúng chạy và làm hỏng một vài thứ

- Framework Angular 2 viết với TypeScript và nó cũng khuyến khích các lập trình viên sử dụng ngôn ngữ này trong các dự án của họ [9]

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

2.5.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à tập hợp các thành phần React (React components) giúp xây dựng ứng dụng di động dễ dàng Mỗi component trong React Native tương ứng với một view hoặc thành phần native trên thiết bị Việc viết code xử lý logic cho các component này cho phép chúng có thể tương tác và thực hiện các chức năng của ứng dụng một cách hiệu quả.

Việc sử dụng Redux Toolkit dễ dàng hơn nhiều so với Redux truyền thống, giúp nhóm quản lý trạng thái ứng dụng một cách hiệu quả hơn Redux Toolkit hoạt động như một kho lưu trữ chung cho toàn bộ ứng dụng, giúp quá trình cập nhật dữ liệu trở nên đơn giản, nhanh chóng hơn So với Redux cũ, việc thay đổi trạng thái như thêm hoặc xóa từ vựng, mẫu câu được thực hiện bằng cú pháp ngắn gọn, dễ hiểu, phù hợp với kỹ năng của nhóm em Sử dụng Redux Toolkit không những tiết kiệm thời gian phát triển mà còn giúp mã nguồn rõ ràng, dễ bảo trì và mở rộng trong tương lai.

2.5.3 Cloud Firestore Để lưu trữ dữ liệu về các chủ đề học tập, nhóm 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, nhóm em có thể lấy dữ liệu từ Cloud Firestore khá dễ dàng

Ngôn ngữ TypeScript giúp triển khai các lớp đối tượng dễ dàng hơn, hỗ trợ quản lý việc xây dựng các chức năng học tiếng Anh một cách hệ thống và nhất quán Việc sử dụng TypeScript trong dự án cho phép các thành viên nhóm tái sử dụng cấu trúc và chức năng của các lớp đối tượng hiệu quả, nâng cao sự đổi mới và hiệu quả trong quá trình phát triển.

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Sơ đồ Use-case

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

Danh sách actor

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

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

1 Người dùng (trẻ em) Trẻ em sử dụng ứng dụng để học tiếng Anh

2 Người dùng (người lớn) Người lớn sử dụng ứng dụng học tiếng Anh

Danh sách các use-case

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

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

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

2 Đăng xuất Người dùng đăng xuất khỏi hệ thống

3 Đăng kí Người dùng đăng kí tài khoản mới

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

Đặc tả Use-case

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

Bảng 3.16 Đặ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ó

3.4.2 Đặc tả use-case “Đăng xuất”

Bảng 3.17 Đặ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

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

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

3.4.3 Đặc tả use-case “Đăng ký”

Bảng 3.18 Đặ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ó Trạng thái hệ thống sau khi thực hiện use case

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ó

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

Bảng 3.19 Đặc tả use-case quản lý 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 Sửa thông tin cá nhân

Bảng 3.20 Đặc tả use-case 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

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

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ó

3.4.5 Đặc tả use-case “Kiểm tra đầu vào”

Bảng 3.21 Đặ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 là phần quan trọng giúp đánh giá khả năng của người học thông qua các câu hỏi trắc nghiệm Các câu hỏi này giúp xác định trình độ, từ đó sắp xếp các chủ đề và bài học phù hợp, tối ưu hóa quá trình học tập và nâng cao hiệu quả tiếp thu kiến thức Việc thực hiện kiểm tra đầu vào chính xác góp phần thiết kế chương trình đào tạo phù hợp, đáp ứng đúng nhu cầu của từng học viên.

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 Trạng thái hệ thống sau khi thực thiện use case

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

3.4.6 Đặc tả use-case “Xem video hội thoại”

Bảng 3.22 Đặc tả use-case xem video hội thoại

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

Bạn có thể xem video các cuộc hội thoại bằng tiếng Anh đã chuẩn bị sẵn các mẫu câu và từ vựng để hỗ trợ người học Quá trình bắt đầu khi người dùng đăng nhập vào ứng dụng, giúp truy cập dễ dàng vào các nội dung học tập phù hợp Các video này giúp nâng cao kỹ năng giao tiếp tiếng Anh qua các tình huống thực tế, đồng thời cải thiện vốn từ vựng và cách sử dụng câu trong các cuộc hội thoại hàng ngày Việc sử dụng ứng dụng tiện lợi, phù hợp cho mọi trình độ, giúp người học tiếp cận kiến thức tiếng Anh một cách hiệu quả và thuận tiện.

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

5 Người dùng xem video Dòng sự kiện khác Không có

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

Actor: Người dùng Điều kiện: Người dùng đăng nhập vào hệ thống Trạng thái hệ thống sau khi thực thiện use case

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

3.4.7 Đặc tả use-case “Học từ vựng”

Bảng 3.23 Đặc tả use-case học từ vựng

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

Người dùng đăng nhập vào ứng dụng để bắt đầu quá trình học từ vựng hiệu quả Các từ vựng được lưu trữ và hiển thị dưới dạng flashcard giúp người dùng dễ dàng ghi nhớ và ôn tập Hệ thống cung cấp các dòng sự kiện chính để theo dõi tiến trình học tập và tăng cường khả năng ghi nhớ từ vựng một cách trực quan, tiện lợi.

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

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

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

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

Bảng 3.24 Đặ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 có thể ôn tập từ vựng đã học qua các bài trắc nghiệm, giúp củng cố kiến thức hiệu quả Quá trình bắt đầu khi người dùng đăng nhập vào ứng dụng, tạo điều kiện thuận lợi để truy cập các chức năng ôn tập và kiểm tra kiến thức một cách dễ dàng.

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 đó

Khi người dùng muốn kết thúc ôn tập ngay lập tức, họ chỉ cần nhấn vào mũi tên quay lại để rút ngắn quá trình học Để thực hiện thành công, người dùng cần đăng nhập vào ứng dụng và đã học ít nhất một từ vựng Trước khi bắt đầu use case, hệ thống cần duy trì trạng thái phù hợp để đảm bảo trải nghiệm người dùng diễn ra suôn sẻ và hiệu quả.

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

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

Bảng 3.25 Đặ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 lại mẫu câu đã cho, sau đó hệ thống sẽ phân tích và cho biết chính xác các điểm phát âm đúng và sai so với mẫu câu Quá trình này giúp người học xác định và cải thiện kỹ năng phát âm tiếng Việt một cách hiệu quả Việc cung cấp phản hồi tức thì từ hệ thống giúp người dùng nâng cao khả năng nói chuẩn và tự tin hơn trong giao tiếp hàng ngày.

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ó

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

Hình 3.2 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ệ

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

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ú ý)

Association Quan hệ tài khoản – video

Association 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

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

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

Bảng 3.15 Bảng mô tả thuộc tính lớp "User"

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) Danh sách phương thức

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

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

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

Bảng 3.17 Bảng mô tả thuộc tính lớp "EntryTest"

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) Danh sách phương thức

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

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

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

Bảng 3.19 Bảng mô tả thuộc tính lớp "EntryTestDetail"

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) Danh sách phương thức

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

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

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

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

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

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

Bảng 3.22 Bảng mô tả thuộc tính lớp "Video"

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

2 videoSubtitle String Public Subtitle của video b) Danh sách phương thức

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

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

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

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

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

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

Bảng 3.25 Bảng mô tả thuộc tính lớp "Sentence"

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

2 sound Sound Public Giọng đọc cho mẫu câu đó b) Danh sách phương thức

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

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

Sơ đồ logic

Hình 3.3 Sơ đồ dữ liệu tổng quát của ứng dụng Bảng 3.27 Bảng mô tả chi tiết trong sơ đồ dữ liệu

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

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

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

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 3.29 Bảng mô tả chi tiết dữ liệu "Video"

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 3.30 Bảng mô tả chi tiết dữ liệu "Vocabulary"

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 3.31 Bảng mô tả chi tiết dữ liệu "Sentence"

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

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

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

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

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

Hình 3.4 Màn hình đăng nhập Bảng 3.33 Bảng mô tả các thao tác trong 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

Hình 3.5 Màn hình đăng ký Bảng 3.34 Bảng mô tả các thao tác trong 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

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

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

1 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

2 Sắp xếp các video theo loại

Hiển thị các video theo loại

3 Tìm video theo từ khoá

Cho phép người dùng filter video theo từ khoá

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

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

Hình 3.8 Màn hình thông tin cá nhân

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

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

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

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

3.11.6 Học từ vựng qua tranh ảnh

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

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

Hình 3.10 Màn hình ôn tập từ vựng Bảng 3.39 Bảng mô tả các thao tác trên 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 "Review"

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

Hình 3.11 Màn hình luyện phát âm Bảng 3.40 Bảng mô tả các thao tác trên 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

3.11.9 Từ vựng và ngữ pháp theo chủ đề

Hình 3.12 Màn hình từ vựng và ngữ pháp theo chủ đề

Bảng 3.41 Bảng mô tả các thao tác trên màn hình từ vựng và ngữ pháp theo chủ đề

1 Phân loại ngữ pháp theo chủ đề

Cho phép người dùng filter ngữ pháp theo level A1-B1

2 Tìm từ vựng Cho phép người dùng tìm nghĩa của từ vựng theo từ khoá

3 Hiển thị các chủ đề từ vựng

Gợi ý cho người dùng các chủ đề và các từ vựng thuộc chủ đề đó

Bảng 3.42 Bảng mô tả các thao tác trên màn hình luyện nghe tiếng Anh

Cho phép người dùng lựa chọn chủ đề luyện nghe (nghe hội thoại và nghe mô tả ảnh)

2 Quá trình và kết quả thực hiện

Người dùng có thể theo dõi tiến trình làm bài kiểm tra, biết được họ đã hoàn thành bao nhiêu câu hỏi và đang ở bước nào trong quá trình làm bài Hệ thống cung cấp kết quả ngay lập tức sau khi hoàn thành mỗi bài kiểm tra, giúp người dùng nắm bắt được kết quả một cách nhanh chóng và chính xác Việc này nâng cao trải nghiệm người dùng bằng cách tạo sự rõ ràng và minh bạch trong quá trình thi thử, đồng thời thúc đẩy quá trình đánh giá và cải thiện kỹ năng một cách hiệu quả.

3 Lưu câu hỏi và câu trả lời

Cho phép người dùng lưu câu hỏi và câu trả lời cần xem lại sau này

Hình 3.14 Màn hình luyện đọc tiếng Anh

Bảng 3.43 Bảng mô tả các thao tác trên màn hình luyện đọc tiếng Anh

1 Chủ đề luyện đọc và số lượng câu hỏi

Cho phép người dùng lựa chọn chủ đề luyện đọc và chọn số lượng câu hỏi muốn làm

2 Quá trình và kết quả thực hiện

Cho phép người dùng theo dõi quá trình làm bài một cách trực quan, hiển thị rõ ràng phần đã hoàn thành và số câu đã xử lý, giúp người dùng dễ dàng kiểm soát tiến độ thi Đồng thời, hệ thống tự động cập nhật và hiện kết quả làm bài ngay sau khi hoàn thành mỗi bài kiểm tra, đảm bảo tính minh bạch và tiện lợi trong quá trình học tập.

3 Lưu câu hỏi và câu trả lời

Cho phép người dùng lưu câu hỏi và câu trả lời cần xem lại sau này

Tiêu đề	Báo cáo Đồ Án 2 Xây Dựng Ứng Dụng Hỗ Trợ Môn Học
Tác giả	Lê Khải Hoàn, Trần Thanh Hiền
Người hướng dẫn	ThS. Trần Thị Hồng Yến
Trường học	Trường Đại Học Công Nghệ Thông Tin - Đại Học Quốc Gia TP. HCM
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	58
Dung lượng	5,47 MB