Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS

TỔNG QUAN

Giới thiệu đề tài

Đề tài xây dựng ứng dụng học tiếng Nhật trên nền tảng iOS sử dụng công nghệ MERN stack hiện đại, thiết kế giao diện thân thiện và dễ sử dụng trên mọi màn hình di động Ứng dụng hướng tới việc kết hợp học và chơi, tạo động lực cho người học thông qua các chủ đề phong phú, video, từ vựng đa dạng và trò chơi, mang đến môi trường giải trí trong quá trình học tập.

Lý do chọn đề tài

Với niềm đam mê văn hóa Nhật Bản và mong muốn học tiếng Nhật, nhóm đã nhận thấy nhiều ứng dụng học ngôn ngữ hiện tại còn thiếu sót về tính năng, từ vựng và hội thoại Do đó, nhóm quyết định phát triển một ứng dụng học tiếng Nhật mới nhằm cải thiện những hạn chế này và tăng cường sự phổ biến của ứng dụng trong cộng đồng người học.

Mục đích của đề tài

Ứng dụng học tiếng Nhật được thiết kế nhằm giúp người dùng học ngôn ngữ hiệu quả thông qua các phương pháp học đa dạng như flashcards và lộ trình học cụ thể Người dùng có thể tự tạo khóa học và lưu trữ từ vựng cá nhân, đồng thời tham gia vào cộng đồng học tập với tính năng chat và chia sẻ kinh nghiệm Ứng dụng còn cung cấp các trò chơi giải trí dạng quiz, cho phép người dùng thi đấu cùng nhau trong thời gian thực.

Phạm vi nghiên cứu

Khảo sát các ứng dụng học tiếng Nhật trên Google Play (Android) và App Store (iOS) cho thấy sự đa dạng trong các ứng dụng liên quan đến việc học ngôn ngữ Các ứng dụng này không chỉ cung cấp các bài học từ vựng và ngữ pháp, mà còn tích hợp các phương pháp học tập tương tác, giúp người dùng nâng cao khả năng giao tiếp và hiểu biết về văn hóa Nhật Bản.

Phương pháp nghiên cứu

+ Sử dụng và phân tích ưu và nhược điểm của các ứng dụng

+ Tìm ra các tính năng thiếu sót từ đó áp dụng để xây dựng ứng dụng

KHẢO SÁT HIỆN TRẠNG

Khảo sát hiện trạng

2.1.1 Ứng dụng English Pop Quiz Ưu điểm:

Các chủ đề và từ vựng phong phú, được phân loại theo từng cấp độ, giúp người học tiếp cận kiến thức một cách dễ dàng Hình thức học qua quiz không chỉ tạo cơ hội học tập mà còn mang lại sự giải trí, phù hợp cho mọi lứa tuổi.

+ Không cần kết nối Internet để chơi

+ Chủ đề ít chỉ có 12 chủ đề, ít tính năng, chỉ có tính năng chơi game quiz để học, màu hơi khó nhìn

+ Quảng cáo nhiều, kết thúc một lượt chơi, tải quảng cáo 15s để có thể chơi tiếp

2.1.2 Ứng dụng Quizlet Ưu điểm:

+ Tự viết từ vựng mình muốn nhớ để học

+ Có thể học nhiều ngôn ngữ khác nhau

+ Không có lộ trình học cụ thể

+ Các tính năng nâng cao không được sử dụng free, phải nâng cấp quizlet-plus

2.1.3 Ứng dụng Takoboto: Japanese Dictionary

Hình 1: Giao diện ứng dụng Takoboto Ưu điểm:

+ Đầy đủ chữ kanji, hiragana, katakana

+ Translate là tiếng anh nên không phù hợp với người không biết tiếng Anh + Tra cứu rất tiện

+ Giao diện xấu, khó sử dụng

2.1.4 Kết luận từ khảo sát

Những điểm cần tiếp thu của ứng dụng:

• Giao diện đơn giản dễ thao tác

• Game đơn giản, dễ hiểu và sử dụng Những hạn chế cần tránh:

• Chưa có lộ trình cụ thể

CƠ SỞ LÝ THUYẾT

React Native

React Native là một framework do Facebook phát triển, cho phép xây dựng ứng dụng di động Native bằng ngôn ngữ JavaScript Với React Native, bạn có thể phát triển ứng dụng cho cả iOS và Android chỉ với một ngôn ngữ duy nhất Để nắm rõ React Native, cần phân biệt giữa ứng dụng Native và Hybrid.

Trang chủ của React Native: https://facebook.github.io/react-native/

Hình 2: Phân biệt ứng dụng native và hybrid [1]

Hybrid mobile apps tương tự như các ứng dụng di động khác, cho phép người dùng cài đặt trên điện thoại và tìm thấy chúng trên các chợ ứng dụng Những ứng dụng này mang đến nhiều tính năng hữu ích, như chơi game, kết nối bạn bè qua mạng xã hội, chụp ảnh, theo dõi sức khỏe và nhiều chức năng khác.

Ứng dụng di động hybrid được xây dựng từ các công nghệ web như HTML, CSS và Javascript, nhưng chúng được lưu trữ bên trong một ứng dụng native thông qua WebView, tương tự như một cửa sổ trình duyệt chạy toàn màn hình Nhờ vào cấu trúc này, ứng dụng hybrid có thể truy cập vào các chức năng phần cứng của điện thoại như cảm biến gia tốc, camera và danh bạ, điều mà thường bị hạn chế trên các trình duyệt di động Bên cạnh đó, ứng dụng hybrid cũng có thể tích hợp các thành phần Native UI khi cần thiết.

Ứng dụng Hybrid mang lại nhiều ưu điểm, bao gồm khả năng viết một lần và chạy trên nhiều nền tảng, giúp tiết kiệm chi phí đáng kể Ứng dụng Hybrid có thể thực hiện tất cả các chức năng mà ứng dụng Native làm được, đồng thời không yêu cầu lập trình viên phải thông thạo Java hay Objective-C để phát triển Bên cạnh đó, ứng dụng Hybrid cũng có thể được phát hành trên các chợ ứng dụng như App Store và Play Store giống như ứng dụng Native.

Mặc dù ứng dụng Hybrid mang lại nhiều lợi ích, nhưng cũng tồn tại một số nhược điểm Đầu tiên, hiệu suất của ứng dụng Hybrid có thể chậm và không mượt mà như ứng dụng Native Thứ hai, giao diện người dùng có thể gặp vấn đề khi chạy trên nhiều thiết bị khác nhau Cuối cùng, một số tác vụ liên quan đến phần cứng sẽ khó thực hiện hơn so với ứng dụng Native.

Là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp

Trên iOS, các ứng dụng thường được phát triển bằng Objective-C hoặc Swift, trong khi Android chủ yếu sử dụng Java Đối với Windows Phone, ngôn ngữ lập trình phổ biến là C++ hoặc C# Những ứng dụng này được biên dịch thành ngôn ngữ máy, tận dụng toàn bộ tính năng của hệ điều hành, mang lại hiệu suất cao nhất do không cần thông qua ứng dụng trung gian.

Tốc độ ứng dụng bao gồm cả tốc độ hiển thị và tốc độ xử lý Các thao tác như chuyển trang, điều hướng và cuộn trang trên ứng dụng native diễn ra rất mượt mà Với ưu thế về tốc độ xử lý, ứng dụng hybrid gặp khó khăn trong việc phát triển các ứng dụng nặng đồ họa như game Mặc dù có thể tạo ra game bằng công nghệ hybrid, nhưng chất lượng không được mượt mà, dẫn đến việc hiếm khi sử dụng hybrid cho lập trình game di động, ngoại trừ một số trò chơi đơn giản như xếp hình hay giải câu đố.

Hình 4: Android, IOS và Window Phone

Ứng dụng Native App có nhiều ưu điểm nổi bật, đặc biệt về khả năng truy cập các phần cứng như GPS, camera và thiết bị thu âm, cũng như quyền truy cập vào các dữ liệu local như tạo, ghi, sao chép và đọc tập tin Điều này cho phép native app khai thác tối đa sức mạnh phần cứng của nền tảng Bên cạnh đó, native app cũng có lợi thế khi hoạt động ở chế độ offline, sử dụng dữ liệu đã được lưu trữ trước đó, trong khi mobile web app thường yêu cầu kết nối internet để hoạt động.

Native app có nhược điểm lớn là không thể hoạt động trên nhiều nền tảng, vì mỗi ứng dụng chỉ chạy trên một hệ điều hành cụ thể Việc bảo trì và nâng cấp cũng tốn thời gian, do cần sửa chữa cho từng hệ điều hành riêng lẻ Hơn nữa, sự đa dạng của các phiên bản hệ điều hành gây khó khăn trong việc phổ biến native app, khi các thiết bị sử dụng phiên bản cũ hơn sẽ không thể cài đặt được ứng dụng.

3.1.4 Tính năng của React Native

React Native là một framework cho phép lập trình viên phát triển ứng dụng Native chỉ bằng JavaScript, đồng thời cung cấp khả năng truy cập trực tiếp vào toàn bộ APIs của ngôn ngữ Native Điều này mang lại hiệu suất và trải nghiệm người dùng tương tự như ứng dụng native truyền thống Mặc dù có thể dễ dàng giả định rằng React Native sẽ biên dịch mã JS trực tiếp sang ngôn ngữ native, nhưng thực tế việc này gặp nhiều khó khăn, đặc biệt với ngôn ngữ Objective-C.

Cả Java và C# đều là những ngôn ngữ lập trình chặt chẽ, trong khi React Native (RN) hoạt động một cách linh hoạt hơn RN có thể được coi là một tập hợp các thành phần React, với mỗi component tương ứng với một view hoặc component của ứng dụng native.

React Native cho phép lập trình viên web phát triển ứng dụng native, khắc phục những hạn chế của ứng dụng web và hybrid Với kỹ năng thành thạo JavaScript, lập trình viên có thể làm việc trên nhiều nền tảng như web, desktop, server và mobile Điều này không chỉ mang lại lợi ích cho lập trình viên mà còn giúp doanh nghiệp tối ưu hóa nguồn lực, phát triển sản phẩm cuối cùng với ít nhân lực hơn.

Khi phát triển ứng dụng với React Native, tính năng Live Reload được tích hợp sẵn, tương tự như tính năng Hot Replacement Module trong Webpack, giúp nâng cao hiệu suất làm việc Tính năng này cho phép người dùng xem ngay lập tức những thay đổi trong mã nguồn mà không cần phải biên dịch lại toàn bộ ứng dụng, mang lại trải nghiệm phát triển mượt mà và hiệu quả hơn.

Có 12 tính năng khác nhau so với Reload, trong đó Live Reload chỉ tải lại các chức năng hoặc tập tin đã thay đổi, trong khi Reload sẽ tải lại toàn bộ mã nguồn Ngoài ra, bạn cũng có thể dễ dàng gỡ lỗi JavaScript trong Chrome và Safari Đối với các lỗi thuộc về Native, bạn sẽ cần sử dụng XCode cho iOS hoặc Android Studio cho Android.

Hình 5: Menu develop của ứng dụng React Native

3.1.5 Kiến trúc của React Native

Cả iOS và Android đều có cấu trúc tương tự nhau, mặc dù có một số điểm khác biệt nhỏ Tổng thể, nền tảng này được chia thành ba phần chính.

1 Native code/Module: Phần lớn native code với iOS thì được viết bằng

NodeJS

Node.js là nền tảng phát triển độc lập, được xây dựng trên Javascript Runtime của Chrome, cho phép tạo ra các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.

Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao

Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực

Node.js là lựa chọn lý tưởng cho các sản phẩm có lưu lượng truy cập lớn, yêu cầu khả năng mở rộng nhanh chóng và đổi mới công nghệ Ngoài ra, Node.js cũng rất phù hợp cho việc phát triển các dự án khởi nghiệp một cách nhanh nhất có thể.

Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ

Hiện tại nodejs có 71k start trên Github

3.2.3 Các khái niệm cơ bản của NodeJs

Yêu cầu thực thi một thao tác I/O sẽ được hoàn thành và trả kết quả Trong quá trình này, tiến trình hoặc luồng sẽ bị chặn cho đến khi nhận được kết quả hoặc gặp phải ngoại lệ Trong trường hợp I/O không chặn, quá trình thực hiện sẽ không bị dừng lại và có thể tiếp tục thực hiện các tác vụ khác trong khi chờ đợi kết quả.

Yêu cầu thực hiện thao tác IO ngay lập tức với timeout bằng 0 Nếu thao tác chưa sẵn sàng, hệ thống sẽ thử lại sau Điều này có nghĩa là kiểm tra tính sẵn sàng của thao tác IO: nếu có, sẽ thực hiện ngay và trả kết quả; nếu không, sẽ thông báo người dùng thử lại sau.

Hiểu đơn giản: Diễn ra theo thứ tự Một hành động chỉ được bắt đầu khi hành động trước kết thúc

Các hành động có thể diễn ra đồng thời mà không theo thứ tự, nghĩa là mặc dù bắt đầu theo một trình tự nhất định, nhưng thời điểm kết thúc lại không nhất quán Một hành động có thể bắt đầu, thậm chí kết thúc, trước khi hành động trước đó hoàn tất.

3.2.3.5 Ví dụ về Synchronous và Asynchronous kết hợp với Promise, async/await

Trong javascript các action đều là không đồng bộ (asynchronous):

Trong lập trình JavaScript, khái niệm bất đồng bộ (asynchronous) thường xảy ra khi một đoạn mã, như function addLinkScript, chưa hoàn thành thì một câu lệnh khác, chẳng hạn console.log, đã được thực thi Điều này có thể dẫn đến các vấn đề về thứ tự thực thi Để khắc phục tình huống này, JavaScript sử dụng callback, cho phép lập trình viên kiểm soát thứ tự thực hiện các hàm.

Callback là một khái niệm quan trọng trong lập trình, cho phép đoạn code được thực thi theo trình tự (Synchronous) Tuy nhiên, việc lồng quá nhiều callback có thể dẫn đến tình trạng gọi là "callback hell", gây khó khăn trong việc quản lý và đọc hiểu mã nguồn.

Callback hell gây ra sự rối rắm và làm cho mã nguồn trở nên không sạch sẽ Để khắc phục vấn đề này, JavaScript đã giới thiệu Promise, giúp cải thiện tính rõ ràng và dễ đọc của code.

Với một promise sẽ được định nghĩa như sau:

Hình 10: Promise Khi sử dụng thì:

Hình 11: Single Promise Nhìn rất dễ đọc nhưng khi lồng nhiều promise thì cũng sẽ rất khó đọc như sau:

Nên javascript cho ra đời async/await:

Hình 13: Async/await Với async/await giúp cho việc xử lý asynchronous trở nên dễ dàng hơn, code đọc dễ hiểu hơn.

MongoDB

Thuật ngữ NoSQL lần đầu tiên được giới thiệu vào năm 1998, dùng để chỉ các cơ sở dữ liệu quan hệ nguồn mở nhẹ mà không sử dụng SQL cho các truy vấn.

Dữ liệu trong NoSQL DB được lưu dưới dạng document, object Truy vấn dễ dàng và nhanh hơn RDBMS nhiều

Việc đổi cấu trúc dữ liệu (thêm, xóa trường hoặc bảng) rất dễ dàng và nhanh gọn trong NoSQL

+ High Scalability: gần như không có một giới hạn cho dữ liệu và người dùng trên hệ thống

Tính khả dụng cao (High Availability) cho phép hệ thống chấp nhận sự trùng lặp trong lưu trữ, do đó, nếu một node (máy tính thông thường) gặp sự cố, toàn bộ hệ thống vẫn hoạt động bình thường mà không bị ảnh hưởng.

+ Atomicity: độc lập data state trong các operation

+ Consistency: chấp nhận tính nhất quán yếu, có thể không thấy ngay được sự thay đổi mặc dù đã cập nhật dữ liệu

+ Durability: dữ liệu có thể tồn tại trong bộ nhớ máy tính nhưng đồng thời cũng được lưu trữ lại đĩa cứng

Tính linh hoạt trong triển khai: Hệ thống cho phép tự động nhận diện và lưu trữ khi thêm hoặc loại bỏ các node mà không cần can thiệp thủ công Ngoài ra, hệ thống không yêu cầu cấu hình phần cứng mạnh mẽ và đồng nhất.

+ Modeling flexibility: Key-Value pairs, Hierarchical data (dữ liệu cấu trúc)

MongoDB là một hệ thống cơ sở dữ liệu NoSQL mã nguồn mở, hỗ trợ đa nền tảng và được thiết kế theo hướng đối tượng Với cấu trúc bảng linh hoạt, gọi là collection, MongoDB cho phép lưu trữ dữ liệu mà không cần tuân theo một định dạng cố định nào.

Hình 14: Một đoạn code về query trong MongoDB

3.3.3 Các tính năng của Mongodb

3.3.3.1 Truy vấn ad hoc Truy vấn ad hoc là một trong những tính năng tốt nhất của chương trình

Nó hỗ trợ các trường, cho phép truy vấn phạm vi và tìm kiếm biểu thức để trả về các trường tài liệu cụ thể, bao gồm các hàm JavaScript do người dùng xác định Các truy vấn này có thể được cấu hình để trả về mẫu kết quả ngẫu nhiên với kích thước nhất định Thêm vào đó, các trường trong MongoDB có thể được sử dụng để lập chỉ mục chính và chỉ mục phụ.

3.3.3.2 Nhân rộng Đây là tính năng mà chương trình cung cấp Replica set Nó bao gồm hai hoặc nhiều bản sao của dữ liệu Trong đó mỗi bản sao có thể đóng vai trò chính và phụ

Trong quá trình nhân rộng, tất cả các dữ liệu ghi và đọc thực hiện trên bản sao chính

Bản sao thứ cấp sử dụng bản sao tích hợp để duy trì bản sao dữ liệu của bản chính.

Khi bản sao chính gặp sự cố, Replica set sẽ chọn một bản sao thứ cấp để thay thế làm bản sao chính mới Bản sao thứ cấp có thể thực hiện các hoạt động tùy chọn, nhưng dữ liệu cuối cùng sẽ luôn nhất quán theo mặc định.

3.3.3.3 Cân bằng tải Bằng cách sử dụng Sharding, MongoDB chia tỷ lệ theo chiều ngang để người dùng chọn một Shard key Xác định các dữ liệu được phân phối trong collection Nhìn chung, dữ liệu được chia thành các phạm vi và

Hệ thống 23 được phân phối đồng đều dựa trên các Shard key, cho phép nó hoạt động trên nhiều máy chủ Điều này giúp cân bằng tải và sao chép dữ liệu, đảm bảo rằng hệ thống luôn duy trì hoạt động ngay cả khi gặp sự cố về phần cứng.

3.3.3.4 Lưu trữ tệp Với tính năng lưu trữ tệp, MongoDB được sử dụng như một hệ thống tệp (GridFS) giúp cân bằng tải và sao chép dữ liệu trên nhiều máy tính để lưu trữ tệp Trong đó, GridFS chia một tệp ra thành các phần hoặc các đoạn và lưu trữ thành những tài liệu riêng biệt Bạn có thể truy cập GridFS bằng tiện ích Mongofiles hoặc plugin cho Nginx và Lighttpd

3.3.4 Ưu và nhược điểm của Mongodb

3.3.4.1 Ưu điểm Đầu tiên có thể nhắc đến là tính linh hoạt lưu trữ dữ liệu theo các kích cỡ khác nhau, dữ liệu dưới dạng hướng tài liệu JSON nên bạn có thể chèn vào thoải mái bất cứ thông tin gì bạn muốn

Khác với RDBMS, dữ liệu trong hệ thống này không bị ràng buộc và không yêu cầu tuân thủ một khuôn khổ cố định, giúp tiết kiệm thời gian cho việc kiểm tra cấu trúc khi thực hiện các thao tác như chèn, xóa, cập nhật hoặc thay đổi dữ liệu trong bảng.

MongoDB cho phép mở rộng hệ thống dễ dàng bằng cách thêm các node vào cluster, nơi các node chứa dữ liệu và giao tiếp với nhau Một trong những ưu điểm nổi bật của MongoDB là tốc độ truy vấn nhanh hơn nhiều so với hệ quản trị cơ sở dữ liệu quan hệ RDBMS, nhờ vào việc dữ liệu truy vấn được lưu trữ trong bộ nhớ RAM, giúp tăng tốc độ truy vấn mà không cần phải đọc từ ổ cứng.

Cũng là một ưu điểm về hiệu suất truy vấn của MongoDB, trường dữ liệu

“_id” luôn được tự động đánh chỉ mục để đạt hiệu suất cao nhất

Ngoài các ưu điểm vượt trội, vẫn còn một số hạn chế khi cài đặt và sử dụng bạn cần chú ý như sau:

Dữ liệu trong MongoDB không bị ràng buộc như trong hệ quản trị cơ sở dữ liệu quan hệ (RDBMS), tuy nhiên, người dùng cần thực hiện các thao tác một cách cẩn thận để tránh những kết quả không mong muốn có thể ảnh hưởng đến tính toàn vẹn của dữ liệu.

Một trong những lo ngại lớn của “dân công nghệ” là bộ nhớ của thiết bị, vì chương trình này tiêu tốn nhiều bộ nhớ do dữ liệu được lưu dưới dạng key-value Các collection chỉ khác nhau ở giá trị, dẫn đến việc lặp lại key và gây ra tình trạng dư thừa dữ liệu.

Docker

3.4.1 Vì sao nên sử dụng:

Docker chạy cách li trên môi trưởng ảo hóa, giúp cho việc cài đặt giữa các môi trường, giữa các version không bị conflict với nhau

Với dự án cài đặt Docker, bạn chỉ cần cấu hình một lần duy nhất Sau đó, dự án có thể chạy mượt mà trên bất kỳ hệ điều hành nào mà không cần quá trình cài đặt phức tạp.

Thời trước mô hình máy chủ thường là:

Máy chủ vật lý (physical server) + hệ điểu hành (operating system) + ứng dụng

Hình 15: Tổng quan máy chủ vật lý [5]

Vấn đề gặp phải ở đây là lãng phí tài nguyên:

• Một máy chủ chỉ cài được một OS

• Cho dù có ổ cứng khủng, ram khủng thì cũng không tận dụng hết lợi thế

• Có thể bạn đã nghe tới cái tên Vituralbox hay VMware rồi đúng không, đó đó chính nó đó

• Với công nghệ này, trên một máy chủ vật lý mình có thể cài đặt được nhiều

OS tận dụng tài nguyên đã tốt hơn

Sau đó ra đời công nghệ ảo hóa virtualization:

Hình 16: Sơ đồ cấu trúc Docker [5]

Khi sử dụng máy ảo trên VirtualBox, bạn cần cấu hình để cung cấp tài nguyên ổ cứng và RAM từ máy thật ngay từ đầu Nếu máy ảo được bật nhưng không sử dụng, máy thật vẫn không thể tái sử dụng tài nguyên đã phân bổ Chẳng hạn, khi tạo một máy ảo với 2GB RAM trên máy thật có 6GB RAM, máy thật chỉ còn tối đa 4GB RAM, dù máy ảo không sử dụng hết 2GB RAM đã cấp, dẫn đến lãng phí tài nguyên.

Việc khởi động và tắt máy ảo truyền thống thường mất thời gian khá lâu, có thể lên tới vài phút Để khắc phục vấn đề này, công nghệ containerization đã ra đời, cho phép cài đặt nhiều máy ảo trên một máy chủ vật lý Khác với công nghệ ảo hóa truyền thống, các máy ảo này (Guest OS) sử dụng chung phần nhân của máy chủ vật lý (Host OS) và chia sẻ tài nguyên, giúp tối ưu hóa hiệu suất và thời gian khởi động.

Containerization tối ưu hóa việc sử dụng tài nguyên bằng cách cấp phát tài nguyên theo nhu cầu, tức là chỉ cung cấp bao nhiêu tài nguyên cần thiết Điểm nổi bật nhất của containerization chính là việc sử dụng các container để quản lý và triển khai ứng dụng hiệu quả hơn.

Các phần mềm, chương trình sẽ được Container Engine ( là một công cụ ảo hóa tinh gọn được cài đặt trên host OS) đóng gói thành các container

Thế Container là gì, nó là một giải pháp để chuyển giao phần mềm một cách đáng tin cậy giữa các môi trường máy tính khác nhau bằng cách:

• Tạo ra một môi trường chứa mọi thứ mà phần mềm cần để có thể chạy được

• Không bị các yếu tố liên quan đến môi trường hệ thống làm ảnh hưởng tới

• Cũng như không làm ảnh hưởng tới các phần còn lại của hệ thống

Ruby, Rails và MySQL được đóng gói trong các thùng (container), cho phép ứng dụng của bạn hoạt động trong môi trường đã được chuẩn bị sẵn, không bị ảnh hưởng từ bên ngoài và cũng không gây tác động ra ngoài.

Các tiến trình trong một container được cô lập với các tiến trình của các container khác, nhưng tất cả đều chia sẻ kernel của hệ điều hành host Đây là nền tảng mở giúp lập trình viên và quản trị hệ thống dễ dàng xây dựng, chuyển giao và chạy ứng dụng Ví dụ, với một ứng dụng Java, bạn không cần cài đặt JDK trên máy thật; chỉ cần tải container đã được cấu hình sẵn và chạy ứng dụng trong đó Khi không còn sử dụng, bạn có thể tắt hoặc xóa container mà không ảnh hưởng đến máy thật.

• Linh động: Triển khai ở bất kỳ nơi đâu do sự phụ thuộc của ứng dụng vào tầng

OS cũng như cơ sở hạ tầng được loại bỏ

Container có thể được tạo gần như ngay lập tức nhờ vào việc chia sẻ hệ điều hành host, điều này khác biệt so với Vagrant, nơi tạo môi trường ảo ở cấp độ phần cứng, dẫn đến thời gian khởi động lâu hơn.

• Nhẹ: Container cũng sử dụng chung các images nên cũng không tốn nhiều disks

• Đồng nhất :Khi nhiều người cùng phát triển trong cùng một dự án sẽ không bị sự sai khác về mặt môi trường

Đóng gói ứng dụng trong container cho phép ẩn môi trường, giúp việc kiểm tra và quản lý trở nên đơn giản hơn Việc tạo mới hoặc loại bỏ container cũng rất dễ dàng, mang lại sự linh hoạt cho quá trình phát triển.

Xét về tính an toàn:

• Do dùng chung OS nên nếu có lỗ hổng nào đấy ở kernel của host OS thì nó sẽ ảnh hưởng tới toàn bộ container có trong host OS đấy

Nếu hệ điều hành chủ là Linux, việc một người hoặc ứng dụng trong container chiếm quyền superuser có thể dẫn đến việc tầng OS bị xâm nhập, gây ra ảnh hưởng trực tiếp đến máy chủ và các container khác trên cùng hệ thống.

3.3.4 Các câu lệnh trong Docker? [3]

Pull một image từ Docker Hub: sudo docker pull image_name

Tạo mới container bằng cách chạy image, kèm theo các tùy chọn: sudo docker run -v : -p

: -it /bin/bash

Here are some essential Docker commands to manage images and containers: Use "docker images" to list available images, and "docker rmi {image_id/name}" to remove an image To see running containers, use "docker ps," while "docker ps -a" displays all containers, including those that are stopped To delete a container, the command is "docker rm -f {container_id/name}." To start a new container, use "docker start {new_container_name}," and to access a running container, execute "docker exec -it {new_container_name} /bin/bash."

Redis

Redis, or Remote Dictionary Server, is an open-source data storage solution that can function as a database, cache, or message broker It is a powerful and widely-used key-value data storage system that supports various fundamental data structures, including hash, list, set, sorted set, and string With all data stored in RAM, Redis offers exceptionally fast read and write speeds, making it an ideal choice for high-performance applications.

Hình 17: Tổng quan cấu trúc redis [4]

3.5.2 Các ứng dụng của Redis

Redis không chỉ cung cấp tính năng lưu trữ KEY-VALUE trên RAM mà còn hỗ trợ xắp xếp, truy vấn và sao lưu dữ liệu trên đĩa cứng, giúp phục hồi dữ liệu khi hệ thống gặp sự cố Bên cạnh đó, Redis cho phép nhân bản, cho phép chạy nhiều Server Redis đồng thời.

Redis là một giải pháp lý tưởng cho việc caching nhờ vào tốc độ đọc ghi nhanh, cho phép nó hoạt động như bộ nhớ đệm, nơi chia sẻ dữ liệu giữa các ứng dụng hoặc làm database tạm thời Ngoài ra, Redis còn có thể được sử dụng để làm Full Page Cache cho website Tính nhất quán của Redis đảm bảo rằng ngay cả khi khởi động lại, người dùng vẫn không cảm thấy chậm khi tải trang.

Counter trong Redis được sử dụng để đếm lượt truy cập, với khả năng tăng giảm thông số nhanh chóng nhờ dữ liệu được lưu trữ trên RAM Các cấu trúc dữ liệu như sets và sorted sets giúp thực hiện việc đếm lượt view cho website và bảng xếp hạng trong game Redis hỗ trợ tính năng thread safe, cho phép đồng bộ hóa dữ liệu giữa các yêu cầu một cách hiệu quả.

Publish/Subscribe (Pub/Sub) enables the creation of data-sharing channels, allowing Redis to facilitate communication between publishers and subscribers, similar to channels in Socket Cluster or topics in Apache Kafka For instance, Pub/Sub can be utilized to monitor connections in social networks or chat systems.

Queues trong Redis cho phép tạo hàng đợi để xử lý các request theo thứ tự Redis hỗ trợ lưu trữ dữ liệu dưới dạng danh sách và cung cấp nhiều thao tác linh hoạt với các phần tử trong danh sách, do đó, nó cũng được sử dụng hiệu quả như một message queue.

3.5.3 Các kiểu dữ liệu trong Redis

Khác với các hệ quản trị cơ sở dữ liệu quan hệ như MySQL hay PostgreSQL, Redis lưu trữ dữ liệu dưới dạng key-value mà không sử dụng bảng Mặc dù memcache cũng áp dụng phương pháp tương tự, nhưng kiểu dữ liệu của memcache bị hạn chế và không đa dạng như Redis, dẫn đến việc không hỗ trợ nhiều thao tác từ phía người dùng Dưới đây là tổng quan về các kiểu dữ liệu mà Redis sử dụng để lưu giá trị.

– STRING: string, integer hoặc float Redis có thể làm việc với cả string, từng phần của string, cũng như tăng/giảm giá trị của integer, float

Danh sách (List) trong Redis là một tập hợp các chuỗi được sắp xếp theo thứ tự chèn Redis cho phép thêm phần tử vào đầu hoặc cuối danh sách, giúp thao tác với các phần tử gần đầu và cuối diễn ra nhanh chóng, ngay cả khi có hàng triệu phần tử Tuy nhiên, nhược điểm của danh sách là việc truy cập các phần tử ở giữa có tốc độ chậm.

SET in Redis is an unordered collection of strings that allows for operations such as adding, reading, and deleting individual elements It also provides functionality to check for the presence of elements within the set Additionally, Redis supports set operations including intersection, union, and difference.

HASH trong Redis là một cấu trúc lưu trữ dạng bảng băm, chứa các cặp key-value với key được sắp xếp ngẫu nhiên Redis cho phép thực hiện các thao tác như thêm, đọc, xóa từng phần tử và cũng có thể đọc tất cả các giá trị trong bảng băm.

– SORTED SET (ZSET): là 1 danh sách, trong đó mỗi phần tử là map của 1 string

A sorted set (zset) consists of members and their associated floating-point scores, arranged in ascending order based on the scores.

Redis hỗ trợ nhiều loại dữ liệu như Bit arrays, HyperLogLogs và Streams Để cài đặt Redis, bạn có thể tham khảo tài liệu chính thức Để quản lý Redis qua giao diện web, bạn có thể sử dụng công cụ phpRedisAdmin tại địa chỉ: https://github.com/erikdubbelboer/phpRedisAdmin.

Bên cạnh việc lưu key-value trên bộ nhớ RAM, Redis có 2 background threads chuyên làm nhiệm vụ định kỳ ghi dữ liệu lên đĩa cứng

Có 2 loại file được ghi xuống đĩa cứng:

RDB thực hiện tạo và sao lưu snapshot của DB vào ổ cứng sau mỗi khoảng thời gian nhất định

RDB cho phép người dùng lưu các version khác nhau của DB, rất thuận tiện khi có sự cố xảy ra

Bằng việc lưu trữ data vào 1 file cố định, người dùng có thể dễ dàng chuyển data đến các data centers, máy chủ khác nhau

RDB tối ưu hóa hiệu năng của Redis bằng cách phân chia công việc giữa tiến trình chính và tiến trình con Tiến trình chính xử lý các thao tác cơ bản trên RAM như thêm, đọc và xóa dữ liệu từ client, trong khi tiến trình con đảm nhiệm các thao tác I/O với ổ đĩa Cấu trúc này giúp nâng cao hiệu suất tổng thể của Redis.

Khi restart server, dùng RDB làm việc với lượng data lớn sẽ có tốc độ cao hơn là dùng AOF

RDB không phải là giải pháp tối ưu để bảo vệ dữ liệu khỏi mất mát Người dùng thường thiết lập RDB snapshot mỗi 5 phút hoặc thường xuyên hơn, nhưng trong trường hợp xảy ra sự cố, Redis sẽ không hoạt động và dữ liệu được tạo ra trong những phút cuối sẽ bị mất.

RDB sử dụng hàm fork() để tạo tiến trình con phục vụ cho các thao tác I/O trên đĩa Tuy nhiên, khi dữ liệu quá lớn, quá trình fork() có thể mất nhiều thời gian, khiến server không thể đáp ứng yêu cầu từ client trong vài mili giây hoặc thậm chí lên đến 1 giây, tùy thuộc vào kích thước dữ liệu và hiệu suất của CPU.

PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG

Mô hình hoá yêu cầu

Người dùng (User) là khách hàng sử dụng ứng dụng:

+ Đăng nhập vào ứng dụng để sử dụng các tính năng của ứng dụng

+ Đăng ký tài khoản người dùng mới

+ Người dùng có các học phần, chủ đề cho từng người dùng riêng

Hình 18: Biểu đồ tổng quát

Thiết kế dữ liệu

4.2.1 Lược đồ cơ sở dữ liệu

Hình 19: Lược đồ CSDL của ứng dụng

4.2.2 Mô tả các bảng dữ liệu

+ User: mô tả những thông tin của user

+ Avatar: chứa tất cả những ảnh đại diện đã được upload

+ Room: chứa những thông tin của user trong room bao gồm câu hỏi, câu trả lời

+ Course: chứa tất cả thông tin khóa học và tự vựng do người dùng tạo

+ Topic: chứa thông tin của topic bao gồm link video

+ Vocabulary: chưa tất thông thông tin Từ vựng của topic và Course

+ History: lịch sử học tập theo dạng quiz của user

4.2.3 Các ràng buộc dữ liệu

+ User quan hệ 1-1 với Avatar, quan hệ 1- nhiều với Room, quan hệ 1 - nhiều với Course

+ Course và Topic quan hệ 1- nhiều với Vocabulary

+ Topic quan hệ 1-1 với History

+ Bảng nào có ảnh đại diện sẽ quan hệ 1-1 với Avatar

4.2.4 Luồng xử lý của ứng dụng

38 Sequence diagram học từ vựng:

4.2.5 Lược đồ usecase từng chức năng

System Functions Main Use Cases Use Case #

Bảng 1: Danh sách các yêu cầu phần mềm

40 Hình 22: Lược đồ use case của ứng dụng

Goal Đăng ký tài khoản

Pre-conditions User chưa có tài khoản trong hệ thống

Main Flow 1.Click vào nút đăng ký

2.Hiện thị màn hình đăng ký 3.Điền thông tin và ấn submit Exception Email đăng ký phải là email thật

Username đăng ký là ký tự thường và số ( lớn hơn hoặc bằng 8 ký tự)

Exception -Nếu tìm không thấy , show thông báo không tìm thấy sách

Goal Đăng ký tài khoản

Pre-conditions User chưa có tài khoản trong hệ thống

Main Flow 1.Click vào nút đăng ký

2.Hiện thị màn hình đăng ký 3.Điền thông tin và ấn submit Exception Email đăng ký phải là email thật

Username đăng ký là ký tự thường và số ( lớn hơn hoặc bằng 8 ký tự)

Pre-conditions User đã đăng nhập tài khoản trong hệ thống

Main Flow 1.Click vào nút setting

2.Hiện thị màn hình setting 3.Click vào nút logout Exception - Xuất hiện thông báo nếu logout thành công hoặc thất bại

Goal Join một room để cùng học theo dạng quiz ( real time)

Pre-conditions Đã đăng nhập vào app

Cùng join tại một thời điểm Post-conditions

Main Flow 1.Click join room

2.Đi vào màn hình learn nếu thành công Exception Trở lại trang home nếu không có room nào tại thời điểm đó

Bảng 5: Use case 4 - Join room

Use case 5 – Learn by quiz

Goal Học theo dạng quiz

Pre-conditions Đã đăng nhập vào app

Main Flow 1.Click topic hoặc course muốn học

2.Màn hình câu hỏi sẽ hiện ra, được trả về từ server 3.Có thẻ setting số lượng câu hỏi trong (setting user) 4.Chơi xong, thống kê

Exception -trở lại màn hình home nếu chơi hết số lượt chơi

Bảng 6: Use case 5 - Learn Topic, Vocabulary

Hình 23: Use case add course

Goal Thêm khóa học mình tự tạo bao gồm từ vựng mình muốn nhớ và học

Pre-conditions Đã đăng nhập vào app

Main Flow 1 Click nút add course

2 Điền thông tin course bao gồm từ vựng

3 Nhấn nút submit Exception Thông báo trùng tên course nếu user đã tạo course có tên đó rồi

Mỗi course phải trên 2 từ vựng nếu không sẽ xuất hiện thông báo

Bảng 7: Use case 6 - Add Course

Goal Xóa course của user

Pre-conditions Đã đăng nhập vào app

Course đã được tạo bởi User Post-conditions

Main Flow 1 Click nút remove course

Exception Thống báo xóa thành công hoặc thất bại

Bảng 8: Use case 7 - Remove course

Goal update course của user

Pre-conditions Đã đăng nhập vào app

Course đã được tạo bởi User Post-conditions

Main Flow 1.Click nút edit course

2.Thêm thông tin cần edit 3.Nhấn vào nút submit Exception Thống báo update thành công hoặc thất bại

Bảng 9: Use case 8 - Update Course

Goal view course của user

Pre-conditions Đã đăng nhập vào app

Course đã được tạo bởi User Post-conditions

Main Flow 1.Click nút view detail course

Exception Thông báo error not found nếu ko tìm thấy course

Bảng 10: Use case 9 - View Course

Goal Ghi nhớ từ vựng trong course

Pre-conditions Đã đăng nhập vào app

Course đã được tạo bởi User Post-conditions

Main Flow 1.Click nút flashcard

Exception Thông báo error not found nếu ko tìm thấy course

Goal Học từ vựng trong course theo dạng quiz

Pre-conditions Đã đăng nhập vào app

Course đã được tạo bởi User Post-conditions

Main Flow 1.Click nút learn

2.Đi tới màn hình quiz Exception Thông báo error not found nếu ko tìm thấy course hoặc câu hỏi

Bảng 12: Use case 11 - Learn vocabulary

Goal Xem chi tiết topic bao gồm cách phát âm, nghĩa

Pre-conditions Đã đăng nhập vào app

Main Flow 1 Click card topic

2 Đi tới màn hình detail Exception Thông báo error not found nếu ko tìm thấy topic

Bảng 13: Use case 13 - View detail

Goal Học từ vụng theo topic dạng câu hỏi

Pre-conditions Đã đăng nhập vào app

Main Flow 1.Click card topic

2.Đi tới màn hình detail 3.Click nút learn

Exception Thông báo error not found nếu ko tìm thấy topic

Bảng 14: Use case 14 - Learn topic

Goal Hiển thị video hội thoại nếu có

Pre-conditions Đã đăng nhập vào app

Main Flow 1.Click card topic

2.Đi tới màn hình detail 3.Click play video Exception Thông báo error not found nếu ko tìm thấy topic

Bảng 15: Use case 15 - View video

Goal Hiển thị thông tin tức để người dùng có thể học văn hóa nước

Pre-conditions Đã đăng nhập vào app

Main Flow 1 Click card news

2 Đi tới màn hình detail news Exception Thông báo error not found nếu ko tìm thấy news

Bảng 16: Use case 16 - View news

Goal Hiển thị thông tin của user

Pre-conditions Đã đăng nhập vào app

Main Flow 1.Click nút setting

2.Đi tới màn hình detail user Exception Thông báo token expired nếu token hết hạn

Bảng 17: Use case 17 - View information

Goal Chỉnh sửa ảnh đại diện user

Pre-conditions Đã đăng nhập vào app

Main Flow 1.Click nút setting

2.chọn edit ảnh đại diện Exception Thông báo token expired nếu token hết hạn

Bảng 18: Use case 18 - Update Avatar

Goal Chỉnh sửa tên user

Pre-conditions Đã đăng nhập vào app

Main Flow 1.Click nút setting

2.chọn edit username 3.Điền username mới Exception Thông báo token expired nếu token hết hạn

Thông báo trùng tên nếu có username tồn tại Open Issues N/A

Bảng 19: Use case 19 - Update username

Thiết kế giao diện

4.3.1 Màn hình chính (chưa đăng nhập)

Hình 25: Màn hình chính (chưa đăng nhập)

+ Bao gồm các thuộc tính

1 Button Người dùng đăng nhập bằng facebook

2 Button Người dùng đăng kí tài khoản

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

Bảng 20: Các thuộc tính của màn hình đăng nhập

Hình 26: Màn hình đăng kí

1 Button Quay lại màn hình chính (chưa đăng nhập)

2 Text input Yêu cầu người dùng nhập username

3 Text input Yêu cầu người dùng nhập email

4 Text input Yêu cầu người dùng nhập password

5 Button Người dùng đăng kí tài khoản

Bảng 21: Các thuộc tính đăng ký

Hình 27: Màn hình đăng nhập

1 Text Input Yêu cầu người dùng nhập email

2 Text input Yêu cầu người dùng nhập password

Bảng 22: Các thuộc tính đăng nhập

55 4.3.4 Màn hình chính (đã đăng nhập)

Hình 28: Màn hình chính (đã đăng nhập)

1 Button Xem các thiết lập (setting) của ứng dụng

2 Button Hiển thị các thông báo đến

3 Button Hiển thị danh sách bảng chữ cái tiếng Nhật bao gồm chữ kanji và hiragana

4 Button Người dùng chọn học phần học bằng video

5 Button Chuyển đến trang học phần

6 Button Quay trở lại màn hình chính (đã đăng nhập)

7 Button Xem hồ sơ (profile) của người dùng

8 Button Chuyển đến phần chơi game với các người dùng khác

9 Button Chuyển đến các học phần đã tạo của người dùng

Bảng 23: Các thuộc tính của trang chủ (đã đăng nhập)

4.3.5 Giao diện bảng ký tự (alphabet)

Bảng 24: Giao diện bảng ký tự (alphabet)

1 Button Chọn bảng ký tự theo dạng chữ hiragana

2 Button Chọn bảng ký tự theo dạng chữ katakana

3 Button Click vào ký tự trong danh sách để nghe phát âm

Bảng 25: Các thuộc tính bảng ký tự

4.3.6 Giao diện học phần video

1 Button Bắt đầu xem video

2 Button Huỷ chọn học phần

Bảng 26: Các thuộc tính học phần video

4.3.7 Giao diện xem tin tức

Hình 30: Giao diện xem tin tức

1 Button Quay về màn hình chính

2 Button Xem phần tin tức đã chọn

Bảng 27: Các thuộc tính xem tin tức

4.3.8 Giao diện hồ sơ (profile) người dùng

Hình 31: Giao diện hồ sơ người dùng

1 Button Chuyển chế độ màn hình (sáng, tối)

2 Button Xem các học phần người dùng đã tạo

Bảng 28: Các thuộc tính phần hồ sơ người dùng

4.3.9 Giao diện chơi game với người dùng khác (chọn chủ đề)

1 Button Chọn chủ đề mà người dùng muốn chơi

Bảng 29: Thuộc tính phần giao diện chọn chủ đề

4.3.10 Giao diện các học phần mà người dùng đã tạo

Hình 33: Giao diện học phần được tạo

1 Button Tạo học phần mới

2 Button Chọn học phần cần học

Bảng 30: Các thuộc tính phần danh sách học phần đã được tạo

4.3.11 Giao diện chi tiết học phần đã chọn

Hình 34: Chi tiết học phần đã chọn

1 Button Tạo học phần mới

2 Button Chọn học phần cần học

3 Button Làm bài kiểm tra học phần đã học

Hình 35: Các thuộc tính của phần giao diện học phần được chọn

4.3.12 Giao diện học (học phần đã chọn)

Hình 36: Học về học phần đã tạo

1 Button Huỷ học (phần học phần này)

2 Button Chọn đáp án đúng để qua câu tiếp theo

Bảng 31: Các thuộc tính của giao diện học (học phần được chọn)

4.3.13 Giao diện danh sách chủ đề (học từ vừng theo chủ đề)

Hình 37: Giao diện học từ vựng theo chủ đề

1 Button Chọn học phần cần học

Hình 38: Các thuộc tính của giao diện chọn học từ vựng theo chủ đề

4.3.14 Giao diện chi tiết danh sách từ vựng của chủ đề được chọn

Hình 39: Danh sách từ vựng của chủ đề đã được chọn

1 Button Quay về danh sách các chủ đề

2 Button Học danh sách các từ vựng này

3 Button Phát âm của từ vựng

Bảng 32: Các thuộc tính của giao diện từ vựng theo chủ đề

4.3.15 Giao diện học từ vựng theo chủ đề bằng cách chơi game

Hình 40: Học từ vựng theo chủ đề

1 Button Quay về danh sách các từ vựng cần học

2 Button Chọn đáp án đúng để qua câu tiếp theo

Bảng 33: Các thuộc tính của giao diện học từ vựng theo chủ đề

CÀI ĐẶT VÀ KIỂM THỬ

Cài đặt

+ Để cài đặt Expo đầu tiên cần cài đặt NodeJS, truy cập vào https://nodejs.org/en/ để cài đặt NodeJS

Hình 41: Trang chủ NodeJS + Sau khi cài đặt xong NodeJS, bắt đầu cài đặt Expo để chạy ứng dụng React Native với câu lệnh npm install expo-cli –global

Hình 42: Các cách cài đặt Expo Sau khi cài đặt xong khởi chạy project react native với expo start

Hình 43: Chạy ứng dụng react native expo

Ban đầu đi vào link https://www.docker.com/get-started Sau đó sẽ thấy phần download Docker cho Developer

Để bắt đầu, bạn cần tạo tài khoản và tải xuống phần mềm Sau khi tải về, hãy cài đặt như bình thường Sau khi đăng nhập, bạn có thể truy cập https://hub.docker.com/ để tạo repository, nơi lưu trữ các image của bạn.

Sau khi cài đặt xong, bạn có thể khởi động Docker bằng cách chọn ứng dụng Docker for Desktop từ menu Start Nếu quá trình khởi động thành công, biểu tượng "Docker is Running" sẽ xuất hiện trong biểu tượng hệ thống (Tray Icon).

Hình 45: Docker running trên window Hãy chạy câu lệnh docker info để xem thông tin, nếu hiển thị là cài thành công:

Để cài đặt Docker trên macOS, bạn chỉ cần tải bộ cài đặt từ trang chủ và thực hiện các bước cài đặt đơn giản.

Hình 47: Cài đặt docker trên window Khi cài thành công sẽ hiện thị trạng thái is running

Hình 48: Docker được running MacOS

Khi cài đặt docker thành công hãy chạy lệnh source env-dev.sh && docker-compose up để chạy source backend.

Kiểm thử

• Trình bày về test case:

+ Test case login: check màu sắc, font size, color, responsive của ứng dụng trên tất cả các thiết bị

+ Test case game học từ vựng theo từ theo topic: chọn chính xác sẽ chuyển tiếp sang câu tiếp, responsive giao diện trên tất cả thiết bị

+ Test case flash-card: Check phát âm, kéo thẻ flash card sẽ sang flash card mới

+ Test case tạo học phần: Check tạo học phần nếu học phần với 2 phần trở lên sẽ tạo khoá học thành công

1 Login facebook Click nút login facebook ở trang login

Thành công chuyển đến trang trủ, nếu tài khoản không hợp lệ thì báo đăng nhập lại Đúng với Expected Output iPhone Đạt

2 Chức năng chơi game học từ vựng theo topic đã chọn

Click một trong các đáp án được đưa ra

Click on the correct answer to the given question; selecting incorrectly will cost you a life (you have three lives) If you run out of lives, you lose The expected output is optimized for iPhone, while Android is not yet optimized for performance.

74 chọn đúng sẽ sang câu hỏi tiếp theo

3 Chức năng học flash card từ vựng đã được tạo

Click vào học phần được chọn

Display vocabulary flashcards for the specific lesson; clicking on a card reveals the word's meaning, and swiping allows you to move to the next flashcard This functionality is compatible with both iPhone and Android devices, ensuring an optimal user experience.

4 Tạo học phần, xoá học phần

Nhập tên học phần, mô tả và danh sách từ vựng cùng nghĩa liên quan Để xóa học phần, hãy chọn học phần cần xóa và kéo sang trái Khi đó, nút xóa sẽ hiển thị, và bạn chỉ cần click vào nút xóa để hoàn tất.

Nhập vào các từ vựng và nghĩa của nó, click tạo sẽ tạo học phần, nếu có lỗi sẽ thông báo lỗi Đúng với expected output iPhone, Android Đạt

5 Giao diện màn hình Click vào các chức năng để test giao diện của ứng dụng, responsive màn hình, kích thước có chuẩn trên từng kích cỡ devices

Test giao diện responsive màn hình Đúng với expected output