Báo cáo Đồ án 2: Xây dựng ứng dụng học tiếng Anh (ĐH CNTT-ĐHQG HCM)

Báo cáo đồ án 2 xây dựng ứng dụng học tiếng Anh bằng React Native. Tài liệu tham khảo chi tiết cho sinh viên ngành Công nghệ thông tin.

Chuyên ngành

Công Nghệ Phần Mềm

Người đăng

Ẩn danh

Thể loại

Báo Cáo Đồ Án

2022

58
0
0

Phí lưu trữ

30 Point

Tóm tắt

I. Giới Thiệu Về Ứng Dụng Học Tiếng Anh React Native

Ứng dụng học tiếng Anh React Native là một giải pháp hiện đại được phát triển tại Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP. Hồ Chí Minh. Trong bối cảnh kinh doanh toàn cầu hóa, tiếng Anh đã trở thành ngôn ngữ giao tiếp chủ yếu giữa các doanh nghiệp quốc tế. Hơn 50% các quốc gia trên thế giới sử dụng tiếng Anh làm ngôn ngữ trung gian chính thức, đặc biệt là trong các giao dịch thương mại với các đối tác lớn từ Mỹ, Anh, Đức và các nước khác. Tuy nhiên, người đi làm gặp khó khăn trong việc học tiếng Anh giao tiếp do thiếu thời gian tham gia lớp học trực tiếp. Chính vì vậy, ứng dụng này được xây dựng để hỗ trợ người dùng học tiếng Anh mọi lúc, mọi nơi với sự linh hoạt cao.

1.1. Đối Tượng Sử Dụng

Ứng dụng học tiếng Anh React Native hướng đến hai đối tượng chính: người đi làm cần nâng cao kỹ năng tiếng Anh giao tiếp công việc và trẻ em muốn làm quen với tiếng Anh từ sớm. Người dùng có nhu cầu học 4 kỹ năng tiếng Anh cơ bản: nghe, nói, đọc, viết sẽ tìm thấy giải pháp toàn diện trong ứng dụng này. Nhóm phát triển đã mở rộng phạm vi để phục vụ cả hai nhóm đối tượng này.

1.2. Tầm Quan Trọng Của Dự Án

Dự án Báo cáo đồ án 2 ứng dụng học tiếng Anh React Native được thực hiện bởi Trần Thanh Hiền (19520080) và Lê Khải Hoàn (19520087) dưới hướng dẫn ThS. Trần Thị Hồng Yến. Ứng dụng này đáp ứng nhu cầu thị trường ngày càng tăng về học tiếng Anh trực tuyến. Sử dụng framework React Native, ứng dụng hoạt động mượt mà trên cả hai nền tảng Android và iOS, giúp đa số người dùng thiết bị di động có thể truy cập.

II. Các Tính Năng Chính Của Ứng Dụng

Ứng dụng học tiếng Anh React Native cung cấp một bộ tính năng toàn diện giúp người dùng phát triển kỹ năng ngôn ngữ một cách hiệu quả. Các chức năng bao gồm học từ vựng theo chủ đề, luyện nghe các đoạn hội thoại, luyện phát âm với mẫu câu có sẵn, và luyện tập ngữ pháp thông qua các bài tập interactif. Ngoài ra, ứng dụng còn cung cấp video hội thoại giữa các nhân vật, giúp người dùng hiểu rõ hơn về ngữ cảnh sử dụng tiếng Anh thực tế. Để tăng sự hứng thú, ứng dụng tích hợp các trò chơi giáo dục nhằm ôn luyện từ vựng một cách vui vẻ. Hệ thống quản lý thông tin người dùng cho phép theo dõi tiến độ học tập.

2.1. Module Học Từ Vựng Và Ngữ Pháp

Module học từ vựng được tổ chức theo các chủ đề cụ thể như: giao tiếp hằng ngày, giao tiếp trong công việc, các mẫu câu hữu ích. Người dùng có thể học từ vựng mới với định nghĩa chi tiếtví dụ thực tế. Module ngữ pháp cung cấp các chủ điểm ngữ pháp quan trọng, giúp người dùng nắm vững cấu trúc câu tiếng Anh cơ bản đến nâng cao.

2.2. Công Cụ Luyện Tập 4 Kỹ Năng

Ứng dụng hỗ trợ luyện nghe thông qua các đoạn hội thoại thực tế với phiên âm chuẩn. Luyện nói/phát âm được thực hiện với so sánh âm thanh giữa người dùng và mẫu câu chuẩn. Luyện đọc và viết được tích hợp qua các bài tập tương tác. Hệ thống trò chơi ôn tập giúp người dùng nâng cao từ vựng một cách thú vị.

III. Công Nghệ Sử Dụng Trong Dự Án

Dự án ứng dụng học tiếng Anh React Native được xây dựng bằng các công nghệ hiện đạicác framework phổ biến. React Native được chọn làm framework chính vì khả năng phát triển ứng dụng cross-platform cho cả Android và iOS từ một codebase duy nhất. TypeScript được sử dụng để tăng tính an toàndễ bảo trì của mã nguồn. Redux được áp dụng để quản lý trạng thái ứng dụng một cách hiệu quả. Phần backend được xây dựng với NodeJSFirebase, cung cấp giải pháp serverless tiện lợi. Firebase Realtime Database được sử dụng để lưu trữ dữ liệu người dùngnội dung học tập. GitHub được dùng để quản lý source codephiên bản dự án.

3.1. Frontend React Native Và TypeScript

React Native cho phép phát triển ứng dụng di động chuyên nghiệp với performance cao. TypeScript giúp phát hiện lỗi trong quá trình phát triển, tăng chất lượng code. Kết hợp React Native và TypeScript, nhóm phát triển xây dựng giao diện thân thiện với người dùngresponsive trên tất cả thiết bị.

3.2. Backend Và Database

NodeJS cung cấp môi trường runtime hiệu quả cho xử lý request từ client. Firebase cung cấp xác thực người dùng, cơ sở dữ liệu realtime, và lưu trữ file. Firebase Realtime Database cho phép đồng bộ dữ liệu theo thời gian thực, đảm bảo trải nghiệm người dùng mượt mà. Cách tiếp cận này giảm chi phí vận hành và tăng tốc độ phát triển.

IV. Mục Tiêu Và Kết Quả Dự Án

Dự án ứng dụng học tiếng Anh React Native được thực hiện từ tháng 9 đến tháng 12 năm 2022 với những mục tiêu rõ ràngkhả thi. Nhóm phát triển nhằm nắm bắt và áp dụng các công nghệ mới để xây dựng sản phẩm chất lượng cao. Dự án giúp sinh viên hiểu rõ về nghiệp vụ của ứng dụng học ngoại ngữ hiện đại. Kiến thức về phân tích, thiết kế hệ thốngquy trình phát triển phần mềm được ứng dụng thực tế trong dự án này. Kết quả mong đợi là một ứng dụng hoàn chỉnh đáp ứng tất cả yêu cầu chức nănggiao diện người dùng được thiết kế chuyên nghiệp.

4.1. Các Mục Tiêu Cụ Thể

Mục tiêu chính của dự án là hiểu rõ framework React Native do Facebook phát triển và cách áp dụng vào thực tế. Nhóm cần xây dựng ứng dụng hoàn chỉnh với các chức năng cơ bản về học từ vựng, ngữ pháp, luyện tập 4 kỹ năng. Áp dụng kiến thức phân tích, thiết kếquản lý dự án để đạt chất lượng sản phẩm cao.

4.2. Kết Quả Dự Kiến

Ứng dụng học tiếng Anh React Native sẽ hoạt động mượt mà trên Android và iOS với giao diện đẹp mắt. Người dùng có thể học tiếng Anh hiệu quả thông qua các module học toàn diện. Sinh viên phát triển dự án tích lũy kinh nghiệm quý báu về phát triển ứng dụng di độngcác công nghệ backend hiện đại.

28/12/2025

Trích đoạn nội dung tài liệu

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í do chọn đề tài Công việc kinh doanh hiện nay không chỉ gói gọn quy mô trong nước, mà còn có sự hợp tác với rất nhiều quốc gia khác nhau trên thế giới. Trong đó tiếng Anh dường như là ngôn ngữ trung gian phổ biến và được ưa chuộng nhất với hơn 1/2 quốc gia trên thế giới sử dụng và là ngôn ngữ giao tiếp chính của giới doanh nghiệp. Các đối tác lớn chủ yếu đến từ các quốc gia lớn như Mỹ, Trung Quốc, Nga, Anh, Đức hầu hết đều sử dụng tiếng Anh là ngôn ngữ giao tiếp. Vì vậy, nếu chúng ta có kỹ năng tiếng Anh giao tiếp công việc tốt, chúng ta có thể làm việc với bất kỳ đối tác nào ở bất cứ đâu trên thế giới.

Do đó, các doanh nghiệp luôn yêu cầu từ nhân viên đến cấp quản lý phải có kỹ năng giao tiếp tiếng Anh công việc cũng là điều dễ hiểu. Việc học anh văn giao tiếp hiện nay khá khó khăn đối với người đi làm. Họ không có thời gian để tham gia vào các lớp học trực tiếp vì sau giờ hành chánh, họ còn phải chăm lo cho gia đình hoặc tập trung vào dự án công việc. Vì lẽ đó, nhóm em sẽ phát triển ứng dụng giúp cho người dùng học tiếng Anh giao tiếp mọi lúc mọi nơi.

Đồng thời, ứng dụng còn hướng đến đối tượng trẻ em để có thể đáp ứng với hầu hết mọi đối tượng có nhu cầu học tiếng Anh.3 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. Vì muốn hướng đến tất cả các đối tượng người dùng cho nên nhóm em không thể phát triển ứng dụng chỉ trên mỗi nền tảng Android hay là iOS được. Nhưng để xây dựng ứng dụng cho riêng mỗi loại hệ điều hành thì tốn khá nhiều thời gian và chi phí. Chính vì thế, nhóm em quyết định sử dụng framework React Native nhằm giúp cho ứng dụng chạy được trên cả 2 nền tảng phổ biến nhất hiện nay là Android và iOS, giúp cho đa số người dùng thiết bị di động đều có thể sử dụng một cách mượt mà và nhanh chóng.

1 Đề tài này nhóm em quyết định phát triển trên nền tảng các thiết bị di động mà không phải nền tảng web hay trên desktop là bởi vì người dùng có thể học tiếng Anh mọi lúc, mọi nơi mà không phụ thuộc vào môi trường, không gian. Vì không phải ai cũng mang theo một chiếc laptop bên mình, mà hiện nay ai cũng sở hữu cho mình một chiếc điện thoại. Khi cần học tiếng Anh, người dùng chỉ cần bật điện thoại của mình lên và khởi động ứng dụng là có thể học tập một cách tiện lợi. Nếu ứng dụng này chạy trên nền tảng web thì người dùng sẽ mất nhiều thao tác hơn để vào ứng dụng.

Thêm vào đó, giao diện có thể không được tốt bằng so với khi hiển thị trên ứng dụng di động.4 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 1.5 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 STT Tên yêu cầu 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 2 Chương 2: CƠ SỞ LÍ THUYẾT 2.1 React Native Hình 2.1 Biểu tượng React Native Hiện nay, hầu hết người dùng đang dần có xu hướng sử dụng các ứng dụng di động hơn là ngồi trước màn hình máy tính để sử dụng một trang web. Nắm bắt được xu hướng đó, nhóm em quyết định xây dựng đồ án trên nền tảng một ứng dụng di động. Thế nhưng, câu hỏi đặt ra là nhóm em nên xây dựng ứng dụng này bằng công nghệ gì? Sau nhiều lần đắn đo, nhóm em quyết định sử dụng framework React Native – Một Framework hỗ trợ xây dựng ứng dụng đa nền tảng trên cả Android, IOS và tiết kiệm thời gian học công nghệ cho các lập trình viên web đã có kinh nghiệm sử thư viện ReactJS trước đó.

Vậy React Native là gì? React Native là một framework do công ty công nghệ nổi tiếng Facebook phát triển nhằm mục đích giải quyết bài toán hiệu năng của Hybrid và bài toán chi phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động. Chúng ta sẽ build được ứng dụng Native, và chúng ta cũng có thể build ứng dụng đó một cách đa nền tảng (multi-platform) chứ không phải là một “mobile web app”, không phải là “HTML5 app”, và cũng không phải là một “hybrid app” hay cũng không chỉ build trên iOS hay Android mà chúng ta build và chạy được cả hai hệ sinh thái. Một điểm hay ho nữa là giảm chi phí recompile của Native bằng cách sử dụng Hot-Loading tức là bạn không cần phải build lại ứng dụng từ đầu nên việc chỉnh sửa diễn ra rất nhanh chóng. Giúp cho lập trình viên có thể thấy được những chỉnh sửa của họ một cách nhanh chóng trực quan, không còn phải bỏ quá nhiều thời gian trong việc build và run ứng dụng nữa.

[3] 3 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. Nhược điểm: - 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.

- Bảo mật không cao. - 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.2 Cloud Firestore Hình 2.2 Biểu tượng Cloud Firestore của Firebase Sau khi đã tìm được Framework ưng ý, tiết kiệm thời gian và dễ dàng phát triển trên nền tảng di động là React Native. Bài toán tiếp theo nhóm em cần giải quyết đó là cơ sở dữ liệu và phát triển code phía back-end.

4 Tuy nhiên việc phát triển một server và code back-end sẽ tốn kha khá thời gian để phát triển. Vậy nên, giải pháp ở đây là nhóm em quyết định sẽ sử dụng Firebase được phát triển bởi google. Firebase sẽ cung cấp cho chúng ta hai tùy chọn là Firebase realtime database và Cloud Firestore. Ở đồ án 2 kì này, nhóm em quyết định sử dụng Cloud Firestore.

Vậy Cloud Firestore là gì? Cloud Firestore là cơ sở dữ liệu mới của Firebase phát triển dành cho ứng dụng di động. Nó là sự kế thừa của Realtime Database với mô hình dữ liệu mới và trực quan hơn. Cloud Firestore phong phú hơn, nhanh hơn và có khả năng mở rộng siêu việt hơn so với Realtime Database. Giống như Firebase Realtime Database, nó giúp dữ liệu của bạn đồng bộ hóa trên các ứng dụng client thông qua việc đăng ký realtime và cung cấp hỗ trợ ngoại tuyến cho thiết bị di động và web.

Cloud Firestore cũng cung cấp 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ư: - Tính linh hoạt: Cloud Firestore hỗ trợ các cấu trúc dữ liệu linh hoạt, phân cấp dữ liệu. Lưu trữ dữ liệu của bạn trong các document, được tổ chức thành các collection. Các document có thể chứa các đối tượng phức tạp.

- Truy vấn tượng trưng: Bạn có thể sử dụng các truy vấn để truy xuất các document riêng lẻ hoặc để truy xuất tất cả các document trong collection khớp với các tham số truy vấn của bạn. Các truy vấn của bạn có thể bao gồm nhiều bộ lọc, kết hợp giữa bộ lọc và sắp xếp. - Cập nhật thời gian thực: Cloud Firestore sử dụng đồng bộ hóa dữ liệu để cập nhật dữ liệu trên mọi thiết bị được kết nối. Nó cũng được thiết kế để thực hiện các truy vấn tìm nạp một lần.

- Hỗ trợ offline: Cloud Firestore lưu trữ dữ liệu tại local, vì vậy ứng dụng có thể viết, đọc, nghe và truy vấn dữ liệu ngay cả khi thiết bị ngoại tuyến. Khi thiết bị trở lại trực tuyến, Cloud Firestore sẽ đồng bộ hóa mọi thay đổi cục bộ lên Cloud Firestore. - Khả năng mở rộng: Mang đến khả năng từ Google Cloud Platform thiết kế để sử dụng cơ sở dữ liệu khó khăn nhất từ các ứng dụng lớn nhất thế giới. Cách hoạt động của Cloud Firestore: 5 - Cloud Firestore là một cơ sở dữ liệu NoQuery được lưu trữ trên đám mây mà các ứng dụng IOS, Android, Web có thể truy cập trực tiếp thông qua SDK.Cloud Firestore cũng có sẵn trong Node.js, Java, Python và Go SDKs, REST và RPC APIs.

- Được tổ chức theo mô hình dữ liệu NoQuery của Cloud Firestore, dữ liệu lưu trong các document ánh xạ tới các giá trị. Các document này được lưu trữ trong các collection cho bạn tổ chức dữ liệu và thực hiện truy vấn - Bảo vệ quyền truy cập vào dữ liệu của bạn trong Cloud Firestore với Firebase Authentication cho Android, iOS và JavaScript hoặc nhận dạng và quản lý truy cập (IAM).3 Redux Toolkit Trong quá trình xây dựng ứng dụng sử dụng React Native, một bài toán các lập trình viên gặp phải là việc phải quản lý các trạng thái của các thành phần như: nút bấm, trường nhập liệu,… Các trạng thái này sẽ quyết định dữ liệu hiện lên cho người dùng thông qua giao diện ứng dụng là gì.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]: 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. 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.

Thông qua reducer trong redux store, các trạng thái được cập nhật mới. Các trạng thái mới sẽ được hiển thị lên giao diện người dùng.4 Biểu tượng TypeScript - Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ