đồ án 1 xây dựng ứng dụng giải trí luyện ngôn ngữ

10 TÓM TẮT ĐỒ ÁN Trong đồ án "Xây dựng ứng dụng giải trí luyện ngôn ngữ", em tập trung vào phát triển một ứng dụng di động với tên gọi là “AtoZ - Ứng dụng giải trí luyện ngôn ngữ”, với m

TỔNG QUAN VỀ CÔNG NGHỆ SỬ DỤNG

Dart

Hình 2.1: Ngôn ngữ lập trình Dart

Khái niệm: Dart, là một ngôn ngữ lập trình đa mục đích mã nguồn mở, đã được đặt nền móng bởi Google Đây là một khía cạnh của ngôn ngữ lập trình hướng đối tượng, đặc trưng bởi cú pháp kiểu C Tinh thần lập trình hướng đối tượng thể hiện qua việc hỗ trợ giao diện và lớp, mở ra khả năng sáng tạo không giới hạn khi đặt lên bàn cân với những ngôn ngữ khác Sự đa dạng của Dart thể hiện thông qua khả năng phát triển ứng dụng web, di động, máy chủ và máy tính để bàn Ưu điểm nổi bật:

• Là ngôn ngữ mở rộng, linh hoạt, tạo điều kiện tích cực cho việc biên dịch trở nên nhanh chóng hơn

• Có tính ổn định tốt, được sử dụng để xây dựng các ứng dụng về thời gian thực với hiệu suất cao

• Hỗ trợ cả biên dịch Vừa đúng lúc (JIT) và biên dịch Trước thời hạn (AOT)

• Có thể thích ứng nhanh chóng với các quy trình công việc có sự thay đổi

Flutter

Khái niệm: Flutter là một framework phát triển ứng dụng di động open-source được phát triển bởi Google Nó cho phép lập trình viên xây dựng ứng dụng di động chất lượng cao từ một mã nguồn duy nhất và triển khai chúng trên nhiều nền tảng khác nhau như Android, iOS, web và desktop Đặc điểm nổi bật:

• Ngôn ngữ lập trình Dart: Flutter sử dụng Dart, một ngôn ngữ lập trình được phát triển bởi Google, cho cả lớp logic ứng dụng và giao diện người dùng

• Widget-based UI: Flutter sử dụng mô hình lập trình dựa trên widget, là các thành phần xây dựng giao diện người dùng Các widget có thể được kết hợp để tạo thành giao diện người dùng phức tạp

• Đa nền tảng: Với Flutter, bạn có thể xây dựng một ứng dụng và triển khai nó trên nhiều nền tảng khác nhau mà không cần viết lại mã nguồn nhiều lần Điều này giúp giảm chi phí phát triển và duy trì ứng dụng

• Expressive and Flexible UI: Có rất nhiều các thành phần để xây dựng giao diện của Flutter vô cùng đẹp mắt theo phong cách Material Design và Cupertino, hỗ trợ nhiều các APIs chuyển động, smooth scrolling

• Fast Development: Tíng năng Hot Reload hoạt động trong milliseconds để hiện thị giao diện tới bạn Sử dụng tập hợp các widget có thể customizable để xây dựng giao diện trong vài phút Ngoài ra Hot Reload còn giúp bạn thêm các tính năng, fix bug tiết kiệm thời gian hơn mà không cần phải thông qua máy ảo, máy android hoặc iOS.

Node JS

Hình 2.3: Môi trường NodeJS

Khái niệm: Node.js là một môi trường chạy mã nguồn mở dựa trên JavaScript, được xây dựng trên V8, động cơ JavaScript của Google Chrome Nó cho phép phát triển các ứng dụng mạng nhanh chóng và mở rộng quy mô dễ dàng Node.js được phát triển bởi Ryan Dahl vào năm 2009 và đã trở thành một công cụ phổ biến trong việc phát triển phần mềm, đặc biệt là về phía server-side trong các ứng dụng web Ưu điểm nổi bật:

• Node.js sử dụng mô hình I/O không chặn (non-blocking I/O), giúp xử lý nhiều kết nối cùng lúc một cách hiệu quả Điều này làm cho Node.js rất phù hợp cho việc xây dựng các ứng dụng mạng có hiệu suất cao, như chơi game trực tuyến, chat, hoặc các ứng dụng cần xử lý một lượng lớn dữ liệu thời gian thực

• Node.js mở rộng khả năng của JavaScript từ client-side đến server-side, giúp các nhà phát triển có thể sử dụng một ngôn ngữ duy nhất cho cả frontend và backend, đơn giản hóa quá trình phát triển

• Với cộng đồng lập trình viên lớn và sôi động, Node.js có một hệ sinh thái thư viện mạnh mẽ, được quản lý thông qua npm (Node Package Manager), giúp dễ dàng tìm và sử dụng hàng ngàn module và công cụ.

Mongo DB

Hình 2.4: Cơ sở dữ liệu MongoDB

Khái niệm: MongoDB là một hệ thống quản lý cơ sở dữ liệu NoSQL mã nguồn mở, sử dụng mô hình dữ liệu dạng tài liệu (document-oriented) Được ra mắt vào năm

2009, MongoDB được thiết kế để cung cấp một cách lưu trữ dữ liệu linh hoạt, mở rộng quy mô dễ dàng, và dễ dàng tích hợp với ứng dụng hiện đại Nó lưu trữ dữ liệu dưới dạng tài liệu BSON (một định dạng giống JSON), giúp nó trở thành một lựa chọn phổ biến cho các ứng dụng web và mobile Ưu điểm nổi bật:

• MongoDB không yêu cầu một cấu trúc dữ liệu cố định, cho phép lưu trữ tài liệu có cấu trúc đa dạng Điều này giúp dễ dàng thích nghi với thay đổi yêu cầu và dữ liệu

• MongoDB cung cấp hiệu suất truy vấn cao, đặc biệt là với các hoạt động đọc và ghi dữ liệu Các chỉ mục được hỗ trợ tốt giúp tăng cường hiệu suất truy vấn

• Hỗ trợ mở rộng quy mô theo chiều ngang thông qua sharding, cho phép quản lý hiệu quả lượng lớn dữ liệu và giao dịch.

Firebase

Khái niệm: Firebase là một nền tảng của Google cung cấp nhiều dịch vụ và công cụ để phát triển và quản lý ứng dụng di động và web Firebase được thiết kế để giảm bớt gánh nặng cho các nhà phát triển bằng cách cung cấp các tính năng quản lý cơ sở dữ liệu, xác thực người dùng, lưu trữ tệp, và nhiều tính năng khác Ưu điểm nổi bật:

• Cơ sở Dữ liệu Firestore và Realtime: Firebase cung cấp cơ sở dữ liệu Firestore, một cơ sở dữ liệu NoSQL dựa trên tài liệu, và Realtime Database, một cơ sở dữ liệu JSON thời gian thực Cả hai đều giúp lưu trữ và đồng bộ dữ liệu giữa các ứng dụng di động và web

• Xác thực người dùng : Firebase cung cấp dịch vụ xác thực người dùng, giúp quản lý đăng ký, đăng nhập và xác thực người dùng thông qua nhiều phương tiện đăng nhập như email, Google, Facebook, Twitter, và nhiều hơn nữa

• Lưu Trữ Tệp: Dịch vụ lưu trữ của Firebase cho phép bạn lưu trữ và quản lý tệp như hình ảnh, video, và tệp tin khác trên đám mây

• Cloud Functions: Firebase Cloud Functions cho phép bạn triển khai mã nguồn và chạy các chức năng (functions) trên đám mây một cách tự động khi có sự kiện kích hoạt, chẳng hạn như khi có sự thay đổi trong cơ sở dữ liệu

• Hosting và CDN: Firebase Hosting cung cấp một nền tảng để triển khai và chạy ứng dụng web của bạn trên các máy chủ toàn cầu với hỗ trợ CDN, giúp tối ưu hóa hiệu suất của ứng dụng.

Postman

Hình 2.6: Công cụ kiểm thử Postman

Khái niệm: Postman hiện là một trong những công cụ phổ biến nhất được sử dụng trong kiểm thử API Nó bắt đầu vào năm 2012 như một dự án phụ của Abhinav Asthana để đơn giản hóa quy trình làm việc API trong kiểm thử và phát triển API là viết tắt của giao diện lập trình ứng dụng cho phép các ứng dụng phần mềm giao tiếp với nhau thông qua các lệnh gọi API Ưu điểm nổi bật:

• Khả năng truy cập: Để sử dụng Postman, người ta chỉ cần đăng nhập vào tài khoản của chính họ để dễ dàng truy cập các tệp mọi lúc, mọi nơi miễn là ứng dụng Postman được cài đặt trên máy tính

• Sử dụng Collection: Postman cho phép người dùng tạo collection cho các lệnh gọi API của họ Mỗi collection có thể tạo các thư mục con và nhiều yêu cầu Điều này giúp tổ chức lại các bộ kiểm thử của bạn

• Cộng tác: Collection và môi trường có thể được nhập hoặc xuất để dễ dàng chia sẻ tệp Một liên kết trực tiếp cũng có thể được sử dụng để chia sẻ collection

• Tích hợp nhiều phương thức HTTP: Postman hỗ trợ nhiều phương thức HTTP như GET, POST, PUT, DELETE, và nhiều phương thức khác, giúp người dùng kiểm thử và thực hiện các yêu cầu API đa dạng

• Quản lý biến môi trường: Người dùng có thể định nghĩa và quản lý các biến môi trường, giúp tái sử dụng giá trị và giảm thiểu lỗi khi thực hiện các yêu cầu API khác nhau

• Kiểm thử tự động: Postman cung cấp khả năng kiểm thử tự động cho các API, giúp tiết kiệm thời gian và tăng tính ổn định của ứng dụng

• Dễ dàng mở rộng: Postman có thể mở rộng thông qua các add-on và tích hợp với nhiều dịch vụ khác nhau, giúp nó trở thành một công cụ linh hoạt cho quản lý API

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

Sơ đồ use case

3.1.1 Sơ đồ use case đăng nhập

Hình 3.1: Sơ đồ use case đăng nhập

3.1.2 Sơ đồ use case màn hình “journey”

Hình 3.2: Sơ đồ use case màn hình Journey

3.1.3 Sơ đồ use case màn hình “practice”

Hình 3.3: Sơ đồ use case màn hình Practice

3.1.4 Sơ đồ use case màn hình “leaderboard” và “profile”

Hình 3.4: Sơ đồ use case màn hình Leaderboard và Profile

Bảng 3.1: Bảng dach sách các actor

Người dùng Những người có nhu cầu sử dụng ứng dụng (đã đăng ký hoặc chưa đăng ký tài khoản) có quyền truy cập vào tài nguyên dùng chung và những tài khoản đã đăng ký có thể sử dụng tài nguyên tốt hơn

Người quản lý (admin) Là người nắm quyền toàn bộ hoạt động trên ứng dụng và quản lý các tài nguyên

Bảng 3.2: Bảng mô tả use case

Vai trò ID Tên Use case Mô tả Use case

User UC01 Sign up Use case Người dùng có thể điền email và password để đăng ký mới một tài khoản

UC02 Sign in Use case Người dùng có thể điền email và password để đăng nhập một tài khoản đã được đăng ký trước

UC03 Set up Use case Người dùng chọn ngôn ngữ và mức độ khó mà mình muốn học, sau đó một bài test ngắn sẽ được thực hiện để kiểm tra trình độ của người dùng

Người dùng chọn màn (stage) của mình và tiến hành trả lời các câu hỏi đề qua màn Sau khi trả lời xong, câu hỏi sẽ lưu lại và người dùng sẽ được đi tới những câu hỏi tiếp theo

Người dùng có thể từ Practice Screen và navigate tới những Screen: Reading, Writing, Listening, Speaking

Người dùng có thể xem thứ hạng hiện tại của mình và thứ hạng của những người chơi khác Người dùng có thể bấm vào một người chơi bất kỳ để xem thông tin cá nhân (có thể xem

25 được) của người dùng đó

UC07 Profile Screen Người dùng có thể xem và chỉnh sửa hồ sơ của mình, xem biểu đồ thống kê về thời gian học tập vừa qua của mình và đăng xuất

Người dùng admin có thể xem các câu hỏi đã được lưu trong cơ sở dữ liệu, sửa chữa hoặc xóa nó

Ngưởi dùng admin có thể tạo mới câu hỏi cho bộ câu hỏi trong Reading và Writing thêm đa dạng

Bảng 3.3: Bảng đặc tả use case đăng ký

Use case’s name Sign up Use case

Pre-condition Người dùng phải Navigate tới trang Sign up

Basic flow 1 Người dùng truy cập vào ứng dụng giải trí luyện ngôn ngữ AtoZ

2 Người dùng được redirect tới trang Sign In

3 Người dùng bấm vào mục “Does not have an account? Create a new account now”

4 Người dùng sẽ được redirect tới trang Sign Up

5 Người dùng điền hết tất cả thông tin

6 Bấm vào nút “Sign Up”

Alternative flow Người dùng bấm vào nút “Sign in with Google” để đăng ký và đăng nhập bằng tài khoản google của mình

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo

Bảng 3.4: Bảng đặc tả use case đăng nhập

Use case’s name Sign in Use case

Pre-condition Người dùng mở ứng dụng AtoZ

Basic flow 1 Người dùng truy cập vào ứng dụng giải trí luyện ngôn ngữ AtoZ

2 Người dùng được redirect tới trang Sign In

3 Người dùng điền hết tất cả thông tin

4 Bấm vào nút “Sign In”

5 Nếu email và password mà người dùng nhập khớp với một tài khoản đã tồn tại, người dùng sẽ được di chuyển tới bàn hình home của ứng dụng, nếu không sẽ báo lỗi

“The email or password you’ve just entered is incorrect”

Bảng 3.5: Bảng đặc tả use case màn hình set up

Use case’s name Set up Use case

Pre-condition Người dùng phải được xác thực tài khoản từ trước

Basic flow 1 Người dùng sau khi tạo tài khoản sẽ được redirect tới trang set up

2 Người dùng chọn ngôn ngữ và độ khó mức học của mình (Nếu người dùng chọn độ khó “I’m not sure which level I am Give me a test” thì sẽ được navigate tới một trang test để thực hiện)

3 Người dùng bấm vào nút “Finalize” để kết thúc quá trình set up của mình

Bảng 3.6: Bảng đặc tả use case màn hình Journey

Use case’s name Journey Mode Use case

Basic flow 1 Người dùng navigate tới trang Journey Screen

2 Người dùng select vòng (stage) mà mình muốn chơi

3 Người dùng bấm vào vòng đó sẽ được đưa tới level tương ứng và tiến hành chơi

4 Sau khi đã chơi xong hệ thống sẽ chấm điểm dựa trên số câu trả lời đúng của người dùng và đưa người dùng đến màn chơi tiếp theo

Bảng 3.7: Bảng đặc tả use case màn hình pratice

Use case’s name Practice mode Use case

Basic flow 1 Người dùng navigate tới trang Practice Screen

2 Người dùng chọn kỹ năng mà mình muốn rèn luyện

3 Người dùng bấm vào nút “Start” để tiến hành trả lời các bộ câu hỏi dành riêng cho các kỹ nẵng đó Alternative flow Không

Bảng 3.8: Bảng đặc tả use case màn hình Leaderboard

Use case’s name Leaderboard screen Use case

Basic flow 1 Người dùng navigate tới trang Leaderboard screen

2 Người dùng có thể xem thứ hạng hiện tại của mình và của những người chơi khác

3 Người dùng có thể bấm vào một người chơi bất kỳ để xem thông tin chi tiết về người chơi đó

Bảng 3.9: Bảng đặc tả use case màn hình User Profile

Use case’s name Profile Use case

Basic flow 1 Người dùng navigate tới trang Profile Screen

2 Người dùng có thể xem thông tin cá nhân của mình, biểu đồ thống kê quá trình học tập của mình

3 Người dùng có thể bấm vào icon button hình “cây bút” để navigate tới trang Edit user profile

4 Người dùng có thể xem lại và sửa chữa thông tin cá nhân của mình ở màn hình này, sau khi sửa chữa thì bấm “Confirm” để hoàn tất

Bảng 3.10: Bảng đặc tả use case màn hình admin

Use case’s name Admin Use case

Pre-condition Người dùng phải được xác thực là “admin”

Basic flow 1 Người dùng truy cập đến tên miền của backend website của app

2 Người dùng có thể xem danh sách các bộ câu hỏi đã được lưu, hoặc tạo mới một câu hỏi để thêm vào trong bộ câu hỏi của ứng dụng Alternative flow Không

Sơ đồ lớp

Hình 3.5: Sơ đồ lớp của ứng dụng

Bảng 3.11: Bảng mô tả các trường dữ liệu

Tên lớp Tên trường dữ liệu

Kiểu dữ liệu Mô tả

User userId String Chuỗi ký tự chứa ID của người dùng Chuỗi ký tự này sẽ được hệ thống tạo một cách tự động khi tạo mới một tài khoản UserId của mỗi tài khoản là duy nhất email String Email của người dùng nhập vào

Email của mỗi người dùng không được phép trùng nhau firstName String Tên của người dùng lastName String Tên đệm của người dùng age Int Tuổi của người dùng language String Ngôn ngữ mà người dùng chọn để học score Double Điểm số của người dùng userStage Int Tiến trình hiện tại của người dùng Screen screenId String Chuỗi ký tự chứa ID của màn hình screenName String Tên của màn hình QuizQuestion quizId String Chuỗi ký tự chứa Id của câu hỏi quizQuestion String Nội dung câu hỏi quizAnswer String Danh sách câu trả lời quizCorrect String Câu trả lời đúng

CÀI ĐẶT VÀ TRIỂN KHAI HỆ THỐNG

Môi trường cài đặt

- Môi trường: Sử dụng môi trường NodeJS và ExpressJS

- Cơ sở dữ liệu: Firebase lưu thông tin người dùng và hỗ trợ Authentication MongoDB lưu dữ liệu của bộ câu hỏi và các thông tin khác như điểm người dùng,…

- Hệ điều hành: Android (phiên bản 5.0 trở lên) hoặc iOS (phiên bản 10.0 trở lên)

- Bộ nhớ RAM: Tối thiểu 2GB

- Bộ xử lý: Tối thiểu CPU 1.5 GHz hoặc tương đương trở lên

- Kết nối mạng: Tương đối ổn định để gửi API đến server và truy cập dữ liệu từ Firebase và MongoDB

Nhóm em đã sử dụng công nghệ và phần mềm sau để xây dựng và phát triển ứng dụng:

- Công cụ phát triển: VS Code

- Ngôn ngữ lập trình: Dart

- Cơ sở dữ liệu: Firebase và MongoDB

- Thiết kế giao diện: Figma

Thiết kế giao diện

Hình 4.1: Màn hình đăng nhập Hình 4.2: Màn hình đăng nhập bằng google

- Màn hình đăng nhập (Hình 4.1): Người dùng nhập vào Email và mật khẩu, hệ thống sẽ gửi API cho server để xác nhận thông tin đăng nhập từ CSDL, nếu người dùng điền đúng thông tin thì hệ thống sẽ xác thực và chuyển hướng người dùng vào trang chủ của ứng dụng

- Màn hình đăng nhập bằng google (Hình 4.2): Người dùng nhấn vào nút “Sign in with Google” sẽ hiện lên một dialog để chọn một tài khoản google của mình

Hình 4.3: Màn hình đăng ký Hình 4.4: Màn hình thông tin chi tiết

- Màn hình đăng ký (Hình 4.3): Người dùng điền email, mật khẩu và xác nhận mật khẩu để tạo một tài khoản mới Nếu email chưa được sử dụng thì người dùng sẽ được chuyển hướng sang màn hình thông tin chi tiết

- Màn hình thông tin chi tiết (Hình 4.4): Người dùng điền thông tin chi tiết (Tên, tên đệm, tuổi) và bấm “Finalize” để tiến hành tạo tài khoản của mình

4.2.3 Màn hình chọn ngôn ngữ

Hình 4.5: Màn hình chọn ngôn ngữ

- Màn hình chọn ngôn ngữ (Hình 4.5): Người dùng chọn ngôn ngữ mà mình muốn học Sau khi bấm chọn một ngôn ngữ sẽ được điều hướng đến màn hình chọn độ khó

4.2.4 Màn hình chọn độ khó

Hình 4.6: Màn hình chọn độ khó Hình 4.7: Xác nhận độ khó

- Màn hình chọn độ khó (Hình 4.6): Người dùng chọn một độ khó trong 4 mức độ: Novice – Dễ nhất, Beginner – Dễ, Intermediate – Trung bình, Expert – Khó nhất Ngoài ra người dùng có thể bấm vào nút “Don’t know your current level? Take a test now!” để làm một bài kiểm tra mức độ của mình

- Màn hình xác nhận độ khó (Hình 4.7): Người dùng khi đã chọn độ khó của mình, bấm vào nút “Confirm” để xác nhận và được điều hướng vào màn hình trang chủ

Hình 4.8: Màn hình bài test Hình 4.9: Màn hình bài test Hình 4.10: Màn hình kết quả

- Màn hình bài test (Hình 4.8, 4.9): Người dùng trả lời các câu hỏi để qua màn

- Màn hình kết quả (Hình 4.10): Sau khi trả lời, hệ thống sẽ chấm điểm người dùng dựa vào câu trả lời, sau đó sẽ gợi ý cho người dùng độ khó phù hợp với họ

Hình 4.11-12: Màn hình journey

- Màn hình bài journey (Hình 4.11, 4.12): Màn hình journey, người dùng chọn vòng chơi của mình để thực hiện bài test Các vòng chơi sau sẽ bị khóa nếu người dùng chưa hoàn thành vòng chơi hiện tại của mình

Hình 4.13: Màn hình journey ở màn 16

Hình 4.14: Màn hình reading Hình 4.15: Màn hình Writing

- Màn hình reading (Hình 4.14): Người dùng bấm start để bắt đầu bài đọc

- Màn hình writing (Hình 4.15): Người dùng bấm start để bắt đầu bài viết

Hình 4.16: Màn hình game Multiple choice

- Màn hình game Multiple choice (Hình 4.16): Người dùng chọn một trong 4 câu trả lời và bấm vào Check answer để kiểm tra câu trả lời và tiến đến vòng tiếp theo

Hình 4.17: Màn hình khi chọn đúng Hình 4.18: Màn hình khi chọn sai

- Khi bấm vào “Check answer” thì hệ thống sẽ kiểm tra kết quả và hiển thị kết quả cho người dùng Nếu chọn đúng thì sẽ là “Correct”, còn chọn sai thì sẽ là

“Wrong” và hiển thị câu trả lời đúng

Hình 4.19: Màn hình game Connect string Hình 4.20: Màn hình kết quả game Connect string

Hình 4.21-22: Màn hình đáp án của game Connect string

- Màn hình game Connect string (Hình 4.19): Người dùng sẽ có hai cột hiển thị, bên trái sẽ là từ vựng còn bên phải sẽ là nghĩa của từ đó Người dùng tiến hành bấm vào từng ô để chọn đáp án của cột đó theo thứ tự được bấm (Như ví dụ ở hình 4.20)

- Màn hình kết quả game Connect string (Hình 4.20): Người dùng sau khi nối hết kết quả thì sẽ bấm vào “Check answer” để kiểm tra đáp án

- Màn hình đáp án của game Connect string (Hình 4.21 và 4.22): Hệ thống kiểm tra kết quả của người dùng và thông báo kết quả đó

Hình 4.23: Màn hình game Fill answer

- Màn hình game Fill answer (Hình 4.23): Người dùng điền vào đáp án cho câu hỏi và bấm Check answer để kiểm tra kết quả

Hình 4.24: Màn hình game Reorder sentence

- Màn hình game Reorder sentece (Hình 4.24): Người dùng sắp xếp lại từ để tạo thành một câu có nghĩa, sau đó bấm Check answer để kiểm tra đáp án

Hình 4.25-26: Màn hình game Word categorize

- Màn hình game Word categorize (Hình 4.25, 4.26): Người dùng kéo các từ vựng vào vùng tương ứng của chúng và chọn Check answer để kiểm tra kết quả

Hình 4.27: Màn hình kết quả

- Màn hình kết quả (Hình 4.27): Sau khi người dùng vượt qua hết màn chơi, hệ thống sẽ chấm điểm dựa vào số câu mà họ trả lời đúng Sau đó người dùng có thể bấm Return home để trở về lại trang chủ

Hình 4.28-29: Màn hình Reading Test

- Màn hình Reading Test (Hình 4.28 và 4.29): Người dùng tiến hành thực hiện bài đọc và kéo từ phải sang trái để đổi sang màn hình chứa câu hỏi Sau khi chọn câu trả lời đúng, bấm vào nút Check answer để kiểm tra kết quả

Hình 4.30: Màn hình bảng xếp hạng

- Màn hình bảng xếp hạng (Hình 4.30): Người dùng có thể kéo và xem thứ hạng của mình và các người dùng khác

4.2.16 Màn hình Profile và Edit Profile

Hình 4.31: Màn hình hồ sơ người dùng Hình 4.32: Màn hình chỉnh sửa hồ sơ người dùng

Hình 4.33: Màn hình đổi giao diện người dùng

Hình 4.34: Màn hình xác nhận chỉnh sửa hồ sơ người dùng

- Màn hình hồ sơ người dùng (Hình 4.31): Người dùng có thể xem thông tin mô tả hồ sơ của mình

- Màn hình chỉnh sửa hồ sơ người dùng (Hình 4.32): Người dùng có thể chỉnh sửa hồ sơ của mình (Tên, tên đệm, tuổi, địa chỉ email)

- Màn hình đổi giao diện người dùng (Hình 4.33): Người dùng có thể đổi ảnh đại diện của mình bằng cách bấm vào hình ảnh muốn chọn

- Màn hình xác nhận chỉnh sửa hồ sơ người dùng (Hình 4.34): Sau khi chỉnh sửa hồ sơ, người dùng có thể bấm Save để lưu, hoặc Cancel để hủy các chỉnh sửa và đổi các thông tin về trạng thái ban đầu

Hình 4.35-36: Màn hình biểu đồ thống kê điểm của người dùng

- Màn hình biểu đồ thống kê điểm của người dùng (Hình 4.35 và 4.36): Sau khi trả lời các câu hỏi, hệ thống sẽ tính điểm của người dùng và số điểm sẽ được hiển thị ở dạng biểu đồ cột qua 7 ngày trước tính từ ngày hôm nay

4.2.18 Màn hình Administrator – Người quản lý

Hình 4.37-38: Màn hình practice screen của Administrator

Hình 4.39: Màn hình danh sách các câu hỏi reading

Hình 4.40: Màn hình tạo mới bài reading

Hình 4.41-42: Màn hình mẫu câu hỏi Reading

- Màn hình practice screen của Administrator (Hình 4.37 và 4.38): Nếu user type là “Admin” thì màn hình practice sẽ có thêm nút Edit question ở phía dưới của nút Start Người dùng bấm vào nút Edit question để được điều hướng tới trang chỉnh sửa câu hỏi

TỔNG KẾT

Kết quả đạt được

Sau khi hoàn thành đồ án “Xây dựng ứng dụng giải trí luyện ngôn ngữ”, em đã được học được rất nhiều kỹ năng và kiến thức mới Em đã học được cách xây dựng và phát triển một ứng dụng hoàn chỉnh bằng framework Flutter, cách xây dựng và quản lý một server bằng NodeJS và ExpressJS, quản lý một cơ sơ dữ liệu bằng MongoDB và Firebase, cũng như là tạo API và kiểm thử chúng bằng công cụ Postman

Em cũng đã xây dựng được ứng dụng giải trí luyện ngôn ngữ AtoZ Ứng dụng này không chỉ cung cấp một giao diện thân thiện và dễ sử dụng mà còn tập trung vào việc kích thích sự học tập và giải trí Thông qua bài kiểm tra từ vựng, trò chơi giáo dục và các hoạt động ôn tập linh hoạt, AtoZ đã giúp người dùng nâng cao kỹ năng ngôn ngữ một cách hiệu quả Ứng dụng đã thực hiện thành công các chức năng như lưu trữ tiến trình học tập, hiển thị điểm số và cung cấp phản hồi chi tiết Sự tích hợp linh hoạt với cơ sở dữ liệu giúp người dùng duy trì thông tin cá nhân và kết quả học tập của họ

Một trong những điểm đặc biệt của AtoZ là khả năng tạo ra một môi trường học tập tích cực và thú vị Các trò chơi giáo dục được thiết kế một cách sáng tạo, giúp người dùng học một cách nhanh chóng và không nhàm chán.

Thuận lợi và khó khăn

Những thuận lợi có thể kể đến trong quá trình mà em thực hiện đồ án là:

- Framework Flutter là một công nghệ mới mẻ và phổ biến Điều này có nghĩa là số lượng tài liệu của Flutter cũng tương đối nhiều, khiến cho việc nghiên cứu dễ dàng hơn rất nhiều Ngoài ra, Flutter cũng cung cấp rất nhiều thư viện hỗ trợ cho việc xây dựng ứng dụng nhanh chóng

- Việc sử dụng Firebase được tạo bởi Google cũng góp phần giúp cho việc thực hiện đồ án thuận lợi hơn, vì Firebase cung cấp dịch vụ “Xác thực người dùng”, giúp lưu trữ người dùng mà không cần một backend server và cơ sở dữ liệu

5.2.2 Khó khăn và hạn chế

Tuy nhiên, trong quá trình thực hiện đồ án, em cũng đã gặp không ít khó khăn và thách thức, như là:

- Ứng dụng AtoZ vẫn còn thiếu nhiều chức năng như chưa luyện được hai kỹ năng Nghe và Nói cho người đọc, số lượng trò chơi chưa đủ đa dạng

- Ngoài ra, việc sử dụng các dịch vụ miễn phí như Firebase sẽ giới hạn về tài nguyên sử dụng, bao gồm băng thông, lưu trữ, số lượng người dùng tối đa.

Hướng phát triển

Trong tương lai, để phát triển ứng dụng của mình và khắc phục các hạn chế còn tồn đọng, em xin đề xuất một số hướng phát triển tiềm năng như sau:

- Tối ưu hóa cơ sở dữ liệu để đảm bảo hiệu suất và khả năng mở rộng

- Phát triển giao diện người dùng trở nên đẹp mà cuốn hút hơn, thêm các tính năng khác để nâng cao trải nghiệm của người dùng như chế độ màu tối,…

- Thêm nhiều hiệu ứng âm thanh cho ứng dụng

- Thêm tính năng kết bạn, theo dõi người dùng, nhắn tin

- Phát triển thêm hai kỹ năng Nghe và Nói

- Đối với kỹ năng Nói, đặc biệt phát triển công nghệ Speech to Text và chấm điểm giọng đọc cũng như cách phát âm của người dùng

- Đa dạng hóa các màn chơi ở màn hình Journey

- Nghiên cứu thư viện Flame và áp dụng vào trong ứng dụng để xây dựng nhiều loại hình game giải trí đa dạng khác

Em tin là với hướng phát triển này, ứng dụng của em sẽ có tiềm năng cao để mở rộng, đương đầu với những ứng dụng lớn đã có trên thị trường

Định dạng
Số trang	60
Dung lượng	3,51 MB