Báo cáo Đồ án 2: Xây dựng ứng dụng học tiếng Anh giao tiếp bằng React Native

Tải miễn phí báo cáo Đồ án 2: Xây dựng ứng dụng học tiếng Anh giao tiếp bằng React Native. Tài liệu tham khảo hữu ích cho sinh viên ngành CNTT.

• Tác giả: 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. Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Ứng Dụng Hỗ Trợ Học Tiếng Anh React Native (Full)
• Loại tài liệu: Đồ Án
• Năm xuất bản: 2022
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Xây dựng App Học Tiếng Anh React Native

Đồ án 2: Xây dựng App học tiếng Anh React Native là một dự án toàn diện nhằm phát triển ứng dụng mobile hỗ trợ học tiếng Anh giao tiếp hiệu quả. Trong bối cảnh kinh doanh quốc tế phát triển mạnh mẽ, tiếng Anh đã trở thành ngôn ngữ trung gian chính được sử dụng bởi hơn nửa quốc gia trên thế giới. Ứng dụng này được phát triển bởi sinh viên Trường Đại học Công nghệ Thông tin ĐHQG TP.HCM, với mục tiêu giúp người di làm và trẻ em có thể học tiếng Anh mọi lúc, mọi nơi mà không bị ràng buộc bởi lịch trình lớp học truyền thống. Sử dụng framework React Native, ứng dụng có khả năng chạy trên cả nền tảng Android và iOS, đảm bảo trải nghiệm mượt mà cho đa số người dùng thiết bị di động.

1.1. Nhu cầu và Động lực Phát triển

Hiện nay, học tiếng Anh giao tiếp khá khó khăn cho người đi làm vì thiếu thời gian tham gia lớp học trực tiếp. Người lao động cần cân bằng giữa công việc, gia đình và tự nâng cao kỹ năng. Vì vậy, một ứng dụng hỗ trợ học tiếng Anh trên di động trở nên cần thiết, giúp người dùng tối ưu hóa thời gian rảnh rỗi để phát triển kỹ năng ngôn ngữ, từ đó tăng khả năng cạnh tranh trong môi trường làm việc toàn cầu.

1.2. Công nghệ và Nền tảng Sử dụng

Dự án sử dụng React Native - framework mạnh mẽ do Facebook phát triển, cho phép xây dựng ứng dụng đa nền tảng. Stack công nghệ bao gồm TypeScript cho lập trình type-safe, Redux quản lý state, Firebase làm backend và cơ sở dữ liệu, cùng NodeJS cho server-side processing. Sử dụng GitHub để quản lý source code, đảm bảo quy trình phát triển chuyên nghiệp.

II. Mục tiêu và Phạm vi của Dự án

Mục tiêu chính của đồ án là xây dựng một ứng dụng học tiếng Anh toàn diện với các chức năng hỗ trợ 4 kỹ năng ngôn ngữ: nghe, nói, đọc, viết. Ứng dụng cần đáp ứng nhu cầu học tập của hai nhóm đối tượng chính: người đi làm có nhu cầu nâng cao kỹ năng giao tiếp công việc, và trẻ em bắt đầu làm quen với tiếng Anh. Phạm vi chức năng của ứng dụng bao gồm học từ vựng theo chủ đề, luyện nghe hội thoại, luyện phát âm, luyện viết và đọc hiểu, ôn tập qua trò chơi tương tác. Ngoài ra, ứng dụng cung cấp tính năng quản lý thông tin người dùng và hỗ trợ học tiếng Anh đặc biệt cho trẻ em với giao diện thân thiện.

2.1. Các Mục tiêu Học tập

Ứng dụng hướng đến việc giúp người dùng nắm vững các kỹ năng giao tiếp tiếng Anh thông qua các bài học cấu trúc. Người học sẽ được tiếp xúc với từ vựng đa dạng theo chủ đề, ngữ pháp, mẫu câu giao tiếp hằng ngày, và giao tiếp trong môi trường công việc. Bên cạnh đó, luyện nghe qua đoạn hội thoại thực tế giữa các nhân vật giúp người dùng làm quen với phát âm tự nhiên và ngữ cảnh sử dụng.

2.2. Phạm vi Chức năng Chi tiết

Ứng dụng cung cấp 8 module chính: Học từ vựng theo chủ đề, Học ngữ pháp, Luyện viết và đọc, Luyện nghe, Luyện phát âm, Trò chơi ôn tập, Xem video hội thoại, và Module học tiếng Anh cho trẻ em. Mỗi module được thiết kế để tương tác, giúp người dùng tiếp thu kiến thức một cách tự nhiên và hiệu quả, đồng thời quản lý dữ liệu người dùng một cách an toàn.

III. Quy trình Thiết kế và Phát triển

Quy trình phát triển đồ án tuân theo các bước chuẩn trong phát triển phần mềm: khảo sát thực trạng, phân tích yêu cầu, thiết kế hệ thống, xây dựng ứng dụng, và kiểm thử. Nhóm tác giả đã thực hiện khảo sát các ứng dụng tương tự như Duolingo, Cake, TFlat để xác định các điểm mạnh và yếu, từ đó tối ưu hóa sản phẩm. Thiết kế UX/UI được thực hiện kỹ lưỡng nhằm đảm bảo giao diện thân thiện, dễ sử dụng cho cả người lớn lẫn trẻ em. Quá trình xây dựng sử dụng các công nghệ hiện đại, đảm bảo ứng dụng chạy mượt trên cả Android và iOS.

3.1. Phân tích và Khảo sát Thị trường

Nhóm đã phân tích chi tiết các ứng dụng học tiếng Anh hàng đầu như Duolingo, Cake, TFlat để hiểu rõ về tính năng, giao diện, và trải nghiệm người dùng. Từ đó, xác định được ưu điểm cần duy trì và nhược điểm cần khắc phục trong sản phẩm của mình. Phân tích thị trường giúp định hình rõ yêu cầu chức năng và kỳ vọng của người dùng.

3.2. Thiết kế UX UI và Kiến trúc Ứng dụng

Thiết kế giao diện được thực hiện theo quy trình UX/UI chuẩn, đảm bảo trải nghiệm người dùng tối ưu và giao diện hấp dẫn trực quan. Kiến trúc ứng dụng được tổ chức rõ ràng với các module độc lập, giúp dễ bảo trì và mở rộng. Sử dụng Redux quản lý state toàn cục, Firebase xử lý backend và lưu trữ dữ liệu an toàn.

IV. Kết quả Mong đợi và Ứng dụng Thực tiễn

Kết quả chính của đồ án là hoàn thiện một ứng dụng học tiếng Anh toàn chức năng đáp ứng đầy đủ các yêu cầu về giao diện và tính năng. Sinh viên sẽ nắm vững các công nghệ hiện đại như React Native, Redux, Firebase, giúp công cụ xây dựng ứng dụng di động chuyên nghiệp. Ứng dụng này có tiềm năng được triển khai thực tế, phục vụ đông đảo người dùng muốn cải thiện kỹ năng tiếng Anh. Qua dự án, sinh viên hiểu sâu hơn về quy trình phát triển phần mềm từ A đến Z, từ yêu cầu, thiết kế, phát triển đến kiểm thử, cũng như quản lý và triển khai dự án phần mềm chuyên nghiệp.

4.1. Kỳ vọng về Sản phẩm Cuối cùng

Ứng dụng hoàn thành dự kiến sẽ là một sản phẩm chất lượng cao với giao diện thân thiện, các chức năng đầy đủ, và trải nghiệp mượt mà trên cả iOS và Android. Ứng dụng cần đáp ứng được yêu cầu lưu trữ dữ liệu an toàn, xác thực người dùng, đồng bộ dữ liệu real-time, và cung cấp các tính năng tương tác hấp dẫn như trò chơi giáo dục, video hội thoại, và luyện phát âm.

4.2. Ứng dụng Thực tiễn và Tầm Ảnh hưởng

Ứng dụng có thể được triển khai trên App Store và Google Play, phục vụ người dung muốn học tiếng Anh một cách linh hoạt. Sản phẩm góp phần nâng cao chất lượng giáo dục ngôn ngữ ở Việt Nam, đặc biệt giúp người đi làm và trẻ em tiếp cận tài nguyên học tiếng Anh hiệu quả, từ đó cải thiện khả năng giao tiếp quốc tế.

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.5 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.6 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ì.7 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.