Xây dựng ứng dụng học tiếng hàn trên nền tảng ios

TỔNG QUAN

Lý do chọn đề tài

Ngày nay, nhiều bạn trẻ khao khát tìm kiếm công việc ổn định tại các công ty nước ngoài nhờ vào phong cách làm việc chuyên nghiệp, chế độ đãi ngộ hấp dẫn và mức lương cao Để có cơ hội làm việc tại những công ty này, trình độ ngoại ngữ là yếu tố then chốt Vì vậy, nhiều công nhân, học sinh, sinh viên và người đã đi làm dành thời gian học ngoại ngữ, từ tiếng Anh, Nhật, Hàn, Pháp, Nga đến Trung và Thái.

Việt Nam và Hàn Quốc hiện duy trì mối quan hệ đối tác quan trọng trong khu vực Đông Nam Á, với vốn đầu tư Hàn Quốc vào Việt Nam đứng thứ 4 Nhiều tập đoàn lớn như Samsung, LG Electronics và Lotte đã có mặt tại Việt Nam, mang theo nguồn vốn khổng lồ và nhiều chi nhánh trên toàn quốc Việt Nam hiện có 15 trường đại học chuyên đào tạo ngôn ngữ Hàn Quốc cùng nhiều trung tâm dạy tiếng Hàn Đặc biệt, Việt Nam là một trong những quốc gia nghe Kpop nhiều nhất thế giới, với người Việt đóng góp lượng view lớn cho nhóm nhạc BlackPink trên YouTube, đứng thứ 3 toàn cầu.

Mặc dù số lượng người học tiếng Hàn đang tăng nhanh, nhưng vẫn chưa đủ để đáp ứng nhu cầu tuyển dụng của các công ty Hàn Quốc Nhiều doanh nghiệp buộc phải tìm nhân viên thông thạo tiếng Anh do không tìm được ứng viên phù hợp Thực tế cho thấy, các sếp Hàn Quốc thường không giỏi giao tiếp bằng tiếng Anh, điều này khiến việc học tiếng Hàn trở thành một lợi thế lớn trong công việc Trong bối cảnh thị trường tiếng Anh đang bão hòa và tiếng Nhật cũng dần đạt mức bão hòa, tiếng Hàn đang nổi lên như một ngôn ngữ tiềm năng nhất trong lĩnh vực tuyển dụng hiện nay.

Mục tiêu nghiên cứu

Thiết kế giao diện ứng dụng cần chú trọng đến màu sắc hấp dẫn, kích thước biểu tượng hợp lý và căn lề chuẩn hoặc gần chuẩn giống như các ứng dụng khác trên iOS.

Viết một số các API cho trang quản trị (bằng NodeJS) và client (NodeJS và Swift) c Front-End

Trang quản trị: Thiết kế trang quản trị đẹp mắt, dễ sử dụng

Client: Xây dựng ứng dụng học ngôn ngữ Hàn đẹp mắt, dễ sử dụng và có thể học dễ dàng cho người mới bắt đầu.

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

- Giao diện: Animation xuyên suốt

- Các cấp độ: Nhiều cấp độ

- Tính cá nhân hoá: Cao

App này là lựa chọn hoàn hảo cho người mới bắt đầu học tiếng, từ cơ bản đến nâng cao Nó cung cấp đầy đủ các kỹ năng cần thiết như nghe, nói, đọc và viết, giúp người dùng luyện tập một cách hiệu quả.

- Hầu như không có quảng cáo

Tiếng hàn giao tiếp – chủ đề

- Giao diện: chưa được chuyên nghiệp, còn theo dạng liệt kê

- Dữ liệu: khá phong phú

- Tính cá nhân hoá: Thấp

- Phần thưởng (kích thích học tập): Không có

- Đánh giá chung: Một app nghiệp dư cho những ai tò mò tìm hiều ứng dụng, hoặc vọc ứng dụng Không khuyến khích sử dụng

Thị trường học ngoại ngữ, đặc biệt là tiếng Hàn, đang diễn ra sự cạnh tranh gay gắt Để đưa ứng dụng lên vị trí hàng đầu và thu hút một lượng người dùng nhất định, chi phí cho quảng cáo và phát triển sẽ cần phải đầu tư đáng kể.

Mô tả tổng thể

Ứng dụng Chuppy được phát triển để cung cấp môi trường học tiếng Hàn cho người mới bắt đầu, từ giao tiếp, ngữ pháp đến từ vựng Ứng dụng còn tạo hứng thú cho người học, đặc biệt là những ai yêu thích âm nhạc, thông qua việc học qua các video Kpop.

Chức năng chính của ứng dụng gồm:

- Admin: o Quản lý từ vựng o Quản lý ngữ pháp o Quản lý video o Quản lý lyric

- Clien: o Nghe từ vựng, câu o Ghi âm o Làm bài test o Xem video o Luyện viết

1.4.3 Các lớp người dùng và đặc điểm người dùng

Vì đây là ứng dụng clone về nên người dùng của hệ thống được xếp vào hai loại:

- Lớp admin: Quản lý hệ thống

- Lớp client: Sử dụng ứng dụng

- Điện thoại sử dụng hệ điều hành IOS

- Code editer: Visual Code, Xcode

- Ngôn ngữ: o Back-end: NodeJS o Front-end: Swift

- Hệ quản trị cơ sở dữ liệu: MongoDB

Một số chức năng phải kết nối Internet

- Kết nối lần đầu : Load data

- Luôn kết nối: Xem video, Ngữ pháp, Từ Vựng, Flash Card (create), nghe, ghi âm

CƠ SỞ LÝ THUYẾT

Tổng quan về NodeJS

Node có một thư viện tiêu chuẩn nhỏ gọn, cung cấp API ở mức thấp nhất cho các nhà phát triển xây dựng mô-đun Mặc dù dễ dàng tìm thấy các mô-đun bên thứ ba, nhiều tác vụ vẫn có thể hoàn thành mà không cần đến chúng Ưu điểm nổi bật của NodeJS là tính linh hoạt và khả năng mở rộng cao.

- Các ứng dụng Nodejs được viết bằng javascript, đây là một ngôn ngữ khá thông dụng và có cộng đồng lớn trên thế giới

- Với phía Server, NodeJS chạy đa nền tảng, sử dụng Event-driven, non-blocking I/O, vì đó là công nghệ mới nên tốc độ thực thi nhanh và nhẹ

- Chạy được trên mọi nền tảng hệ điều hành: Mac – Window – Linux

- Có thể chạy thời gian thực(Real time), đa nền tảng(multi platform), đa thiết bị (multi device) [6]

Express.js là một khung công tác web linh hoạt dựa trên mô-đun http của Node.js, cho phép các nhà phát triển dễ dàng tích hợp các phần mềm trung gian Điều này giúp họ tự do lựa chọn thư viện phù hợp cho từng dự án, mang lại khả năng tùy biến cao.

Một số chức năng chính của Expressjs:

- Trả về các HTTP request thông qua các lớp trung gian đã thiết lập

- Sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL bằng Define router

- Kết hợp các tham số và dữ liệu để trả về trang HTML [7]

Tổng quan về Jquery

JQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn

JQuery tích hợp nhiều module đa dạng, bao gồm cả module hiệu ứng và module truy vấn selector Hiện nay, JQuery được sử dụng trên 99% tổng số website toàn cầu.

Các module phổ biến của jQuery bao gồm:

- Attributes – Xử lý các thuộc tính của đối tượng HTML

- Effect – xử lý hiệu ứng

- Event – xử lý sự kiện

- Form – xử lý sự kiện liên quan tới form

- DOM – xử lý Data Object Model

- Selector – xử lý luồng lách giữa các đối tượng HTML

jQuery không phải là ngôn ngữ lập trình độc lập mà là một thư viện kết hợp với JavaScript, giúp người dùng thực hiện nhiều tác vụ phức tạp một cách dễ dàng hơn Nó cung cấp API để duyệt tài liệu HTML, tạo hoạt ảnh, xử lý sự kiện và thao tác AJAX một cách hiệu quả jQuery tương thích với nhiều trình duyệt khác nhau và đối thủ chính của nó là các JS Framework Được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC, jQuery hiện được duy trì và phát triển bởi đội ngũ của Google, do Timmy Wilson dẫn dắt.

2.2.2 Các tính năng quan trọng

- Gọn nhẹ: jQuery là một thư viện khá gọn nhẹ – có kích cỡ khoảng 19KB

- Tương thích đa nền tảng: Nó tự động sửa lỗi và chạy được trên mọi trình duyệt phổ biến như Chrome, Firefox, Safari, MS Edge, IE, Android và iOS

Thư viện jQuery giúp việc tạo Ajax trở nên đơn giản, cho phép mã Ajax tương tác hiệu quả với máy chủ và tự động cập nhật nội dung mà không cần tải lại trang.

jQuery cho phép xử lý DOM một cách nhanh nhạy, giúp người dùng dễ dàng lựa chọn và duyệt các phần tử DOM Với việc sử dụng Selector mã nguồn mở, hay còn gọi là Sizzle, jQuery hỗ trợ chỉnh sửa nội dung của các phần tử này một cách hiệu quả.

Đơn giản hóa quá trình tạo hiệu ứng bằng cách sử dụng code snippet có sẵn với hiệu ứng animation, cho phép người dùng chỉ cần thêm biến hoặc nội dung cần thiết mà không phải viết lại toàn bộ mã.

jQuery hỗ trợ hiệu quả trong việc xử lý các sự kiện HTML, giúp quản lý các sự kiện đa dạng mà không làm rối mã HTML bằng cách loại bỏ sự cần thiết phải sử dụng các Event Handler phức tạp.

- jQuery xử lý code rất nhanh và có khả năng mở rộng

- jQuery tạo điều kiện cho người dùng viết các mã chức năng bằng các dòng tối thiểu

- jQuery cải thiện hiệu suất lập trình web

- jQuery phát triển các ứng dụng có tương thích với trình duyệt

- Hầu hết các tính năng mới của trình duyệt mới đều được jQuery sử dụng

Tổng quan về Swift

Ngôn ngữ lập trình Swift được Apple giới thiệu lần đầu vào tháng 6 năm 2014 tại Hội nghị các nhà phát triển toàn cầu (WWDC) Swift đã gây ấn tượng mạnh khi Apple phát triển một ngôn ngữ mới cùng với các thư viện hỗ trợ, công cụ cho nhà phát triển và tài liệu, giúp nó hoạt động mượt mà bên cạnh ngôn ngữ Objective-C hiện có.

- Là một ngôn ngữ có khả năng chịu lỗi cao

- Sử dụng cú pháp lập trình hiện đại, bên cạnh bộ cú pháp của Objective-C

- Là ngôn ngữ tuyệt vời để phát triển ứng dụng trên iOS và OS X

- Swift đi kèm tính năng ảo hoá, các lập trình viên Swift có thể viết code và thực thi trên iphone ảo để xem kết quả ngay lập tức

- Swift thống nhất được phần thủ tục và hướng đối tượng [8]

2.3.3 Ưu điểm so với Objective-C

- Swift chạy nhanh hơn, tương đương với C++

- Swift dễ đọc và dễ học hơn so với Objective-C (cú pháp hoàn toàn mới, ngắn gọn hơn rất nhiều)

- Các file trong Swift thống nhất nên bảo trì code đơn giản hơn

- Compiler của Swift tốt hơn Objective-C

- Swift không sử dụng con trỏ giúp cho code an toàn hơn, và giúp lập trình viên lược bỏ phần khái niệm khó nhằn về con trỏ

- Swift quản lý bộ nhớ tốt hơn

- Swift là mã nguồn mở: có thể xem được mã nguồn, chỉnh sửa, vá lỗi [8]

2.3.4 Nhược điểm so với Objective-C

- Nhiều API không làm việc với Swift

- Nhiều qui tắc khi khởi tạo, lựa chọn kiểu optional

Nhiều dự án và phần mềm trước đây được phát triển bằng Objective-C, vì vậy việc bảo trì, phát triển và tìm kiếm thông tin liên quan đến Objective-C vẫn dễ dàng hơn.

Realm là một cơ sở dữ liệu độc đáo, không giống như bất kỳ cơ sở dữ liệu nào khác Nó không chỉ sở hữu nhiều tính năng phong phú mà còn được thiết kế đặc biệt như một API nhằm đáp ứng nhu cầu cụ thể của các nhà phát triển ứng dụng.

Realm là một công cụ tùy chỉnh mạnh mẽ, cho phép bạn khởi tạo cơ sở dữ liệu chỉ với một dòng mã và thao tác với các đối tượng như thể chúng được lưu trữ trong bộ nhớ Với API RealmSwift, lập trình viên có thể sử dụng các đối tượng gốc và linh hoạt trong việc phát triển ngôn ngữ lập trình Hơn nữa, người lập trình sẽ không cần phải lo lắng về vấn đề đa luồng.

Realm Database là một cơ sở dữ liệu mã nguồn mở và miễn phí dành cho mobile, hiện hỗ trợ Android và iOS, với kế hoạch mở rộng sang React Native và Xamarin trong tương lai gần.

Auto Layout là hệ thống ràng buộc giữa các thành phần giao diện, giúp các thiết bị hiển thị đúng kích thước và tỷ lệ dù ở nhiều màn hình khác nhau, nhờ vào sự hỗ trợ của Auto Layout.

Hình 2.3: Thuật toán của AutoLayout

- Constraint: chính là sự ràng buộc 2 View trên

- Attribute 1: Là view leading (Điểm đầu tiên của view), bị ràng buộc của item 1

Mối quan hệ trong toán học được xác định bởi 3 giá trị: bằng, lớn hơn hoặc nhỏ hơn, phản ánh sự tương quan giữa hai vế của phương trình Trong một phương trình, hai vế bên trái và bên phải luôn phải bằng nhau để đảm bảo tính chính xác.

Hệ số Multipler là giá trị mà thuộc tính được nhân với hệ số này, trong trường hợp cụ thể là 1.0 Người sử dụng có thể bỏ qua Multipler nếu hệ số bằng 1.0.

- Item 2: Là BlueView, và có thể để trống, chứ không nhất thiết phải thiết lập constraint như item 1

Attribute 2 chỉ xuất hiện khi item 2 có thiết lập ràng buộc với một item khác ngoài RedView, tạo nên một sự liên kết trong item 2 Hình ảnh minh họa cho thấy đây là điểm cuối của BlueView.

- Constant: Giá trị hằng số bù trừ, giá trị này được thêm vào cho attribute 2 [10]

Giống như JSON, dữ liệu cục bộ được lưu trữ sẽ chiếm 1MB bộ nhớ hệ thống Dữ liệu này có thể bao gồm chữ, hình ảnh, và nhiều loại khác Tuy nhiên, nếu kích thước dữ liệu vượt quá 1MB, sẽ xảy ra lỗi tràn bộ nhớ.

UserDefaults.standard.set(“Value”, forKey: “Key”) [11]

Các luồng (Thread) cho phép CPU thực thi đồng thời, giúp bạn thực hiện nhiều nhiệm vụ cùng lúc Trong các ứng dụng iOS và Mac, luôn có ít nhất một luồng chính (Main thread) để xử lý giao diện người dùng Nếu một tác vụ tốn thời gian, như chuẩn bị bộ chứa iCloud, ứng dụng có thể xuất hiện như bị treo hoặc chạy chậm.

Async closure cho phép thực hiện các tác vụ một cách bất đồng bộ, giúp bạn có thể xử lý nhiều nhiệm vụ khác nhau trong khi một tác vụ đang được thực hiện.

Cơ chế bất đồng bộ cho phép thực hiện các tác vụ đồng thời mà không làm ảnh hưởng đến nhau Tuy nhiên, việc sử dụng chung dữ liệu hoặc hàm có thể dẫn đến xung đột Hơn nữa, cả bất đồng bộ và đồng bộ đều không thể tự do truy xuất các biến toàn cục trong Main.

Một framework cho phép người dùng truy cập API của Apple để chuyển đổi giọng nói thành văn bản Để sử dụng, người dùng cần cấp quyền truy cập vào micro và đảm bảo có kết nối internet trong suốt quá trình hoạt động của phần mềm.

NSTimer là một công cụ hữu ích trong lập trình, cho phép thiết lập một khoảng thời gian chờ và thực thi một hàm đã chỉ định Sau khi hàm được thực hiện, NSTimer sẽ tiếp tục chờ một khoảng thời gian nhất định trước khi lặp lại quá trình này Quá trình sẽ tiếp diễn cho đến khi có lệnh dừng được đưa ra trong mã nguồn.

PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

Phân tích yêu cầu chức năng

3.1.1 Chức năng nghe, ghi âm

Khi người dùng xem từ, nghĩa, phiên âm và nghe cách phát âm, họ có thể ghi âm lại giọng nói của mình Nếu cách phát âm trùng khớp, ứng dụng sẽ hiển thị biểu tượng “Like”, ngược lại sẽ không có phản hồi tích cực.

Bảng 3.1: Mô tả chức năng nghe, ghi âm

1.Xem từ, phiên âm và nghĩa

Xem từ, phiên âm và nghĩa của từ cần học

2 Nghe cách đọc App sẽ phát ra cách đọc của một từ nào đó

3 Ghi âm Ghi âm lại lời đọc của User và so sánh với từ cần học

3.1.2 Chức năng thêm vào danh sách yêu thích

Thêm từ vào danh sách yêu thích riêng khi người dùng cảm thấy thích hoặc đã học thuộc từ bất kì

Bảng 3.2: Mô tả chức năng thêm vào danh sách yêu thích

1.Thêm vào danh sách yêu thích

Thêm những từ đã thuộc hoặc yêu thích vào danh sách yêu thích

3.1.3 Chức năng nghe liên tục

Nghe tất cả cách đọc của 1 từ hoặc 1 câu theo thứ tự

Bảng 3.3: Mô tả chức năng nghe liên tục

1.Nghe liên tục theo thứ tự

Nghe tất cả các từ hoặc các câu cần học theo thứ tự trong danh sách

3.1.4 Chức năng luyện tập từ, câu qua các đáp án

Nghe cách đọc của 1 từ hoặc câu rồi chọn đáp án đúng

Bảng 3.4: Mô tả chức năng luyện tập từ

1 Nghe cách đọc App sẽ phát ra cách đọc của một từ nào đó

2 Chọn đáp án Chọn đáp án đúng với từ hoặc câu được phát ra

3 Hiển thị đáp án Hiển thị đáp án gồm từ,câu và nghĩa của nó

3.1.5 Chức năng làm bài test

Luyện tập qua các câu hỏi

Bảng 3.5: Mô tả chức năng làm bài test

1 Hiển thị câu hỏi Hiển thị các loại câu hỏi

2 Chọn đáp án Chọn đáp án đúng với từ hoặc câu được phát ra

3 Hiển thị đáp án Hiển thị đáp

Tìm kiếm từ hoặc câu cần tìm

Bảng 3.6: Mô tả chức năng tìm kiếm

1 Tìm kiếm Tìm kiếm từ, câu theo yêu cầu

2 Hiển thị Hiển thị từ, câu cần tìm

3.1.7 Chức năng luyện viết chữ

Ứng dụng này giúp người dùng luyện viết chữ Hàn một cách đẹp hơn Người dùng chỉ cần vẽ một từ lên ứng dụng, sau đó ứng dụng sẽ hiển thị từ đó để so sánh và kiểm tra xem người dùng có viết đúng nét của từ hay không.

Bảng 3.6: Mô tả chức năng luyện viết chữ

1 Vẽ chữ Hàn Vẽ các nét của 1 từ

2 Hiển thị đáp án Hiển thị chữ hoàn chỉnh của từ vừa vẽ

3.1.8 Chức năng luyện tập qua Video ca nhạc

Luyện tập qua video ca nhạc Video phát tới đâu thì sẽ có dòng lyric ở dưới chạy theo để người dùng luyện tập

Bảng 3.7: Mô tả chức năng luyện tập qua Video

1.Hiển thị video Hiển thị video ca nhạc và chạy

2 Hiển thị lyric Hiển thị lyric của video

3 Hiển thị lyric theo thời gian video

Video chạy tới đâu thì lyric sẽ hiển thị theo tới đó

3.1.9 Chức năng luyện tập qua trò chơi Search Word

Luyện tập tiếng Hàn qua trò chơi Search Word, nơi người chơi sẽ tìm kiếm các từ trong một bảng chữ cái ngẫu nhiên Trò chơi hiển thị danh sách các từ cần tìm bên dưới, và người chơi phải nối các chữ cái để tạo ra từ đúng Khi tìm được từ chính xác, nó sẽ hiển thị với nền màu nâu, đồng thời từ đó sẽ bị gạch trong danh sách đáp án.

Bảng 3.8: Mô tả chức năng trò chơi Search Word

1.Hiển thị Grid chữ cái Hiển thị các chữ Grid tất cả chữ cái

2 Hiển thị đáp án Hiển thị các từ cần tìm

3 Hiển thị màu khi ấn chọn

Hiển thị màu khi ấn chọn chữ cái bất kì để nối

3.1.10 Chức năng luyện tập qua trò chơi Word Garden

Luyện tập từ vựng hiệu quả với trò chơi Word Garden, nơi người chơi phải nghe từ và điền chính xác vào chỗ trống Mỗi lần điền sai, một cánh hoa sẽ rụng, và nếu sai hết, trò chơi sẽ kết thúc Để chiến thắng, người chơi cần hoàn thành đúng toàn bộ từ.

Bảng 3.9: Mô tả chức năng trò chơi Word Garden

1 Hiển thị phát âm Phát âm chữ Hàn khi bấm vào biểu tượng loa

2 Hiển thị gợi ý Hiển thị toàn bộ chữ Hàn nếu không giải được

3 Hiển thị cơ hội Hiển thị cơ hội còn được phép chơi

3.1.11 Chức năng luyện tập qua Flash Card

Học từ vựng hiệu quả bằng cách sử dụng Flash Card, trong đó các từ được che một phần để người học tự nhớ lại toàn bộ Sau đó, họ có thể bấm vào Flash Card để xem kết quả, giúp củng cố kiến thức từ vựng.

Bảng 3.10: Mô tả chức năng trò chơi Flash Card

1.Hiển thị danh sách chữ

Hiển thị danh sách tất cả các chữ Hàn

Hiển thị form tạo flash card tự động

3 Hiển thị form học từ vựng

Hiển thị form học từ vụng và show đáp án chính xác.

Phân tích yêu cầu phi chức năng

App chạy mượt mà không bị giật, âm thanh rõ ràng, lyric video chạy không bị giật

Mô hình hóa yêu cầu

Hình 3.1: Use case tổng quát

Use case tổng quát mô tả sự tương tác giữa các nhóm người dùng và hệ thống, giúp làm rõ vai trò và chức năng của từng nhóm trong hệ thống Việc phân tích từng use case cụ thể sẽ cung cấp cái nhìn sâu sắc về cách thức hoạt động và mối quan hệ giữa người dùng và hệ thống.

3.3.2.1 Use case Học từ vựng

Hình 3.2: Use case Học từ vựng

Bảng 3.11: Use case Xem video

Tên use case Xem video

Mô tả Học ngoại ngữ bằng cách xem Video

STT User Phản hồi hệ thống

1 Vuốt từ cạnh trái sang phải

Hiện ra một view ẩn liệt kê các mục được chọn

2 Click vào “Xem video” Hiển thị view xem video

3 Click vào “Play” Phát video đó Điều kiện cần Có kết nối internet

Kết quả Video bắt đầu phát và Lyric bắt đầu chạy theo thời gian phát của video

Bảng 3.12: Use case Tìm kiếm

Tên use case Tìm kiếm

Mô tả Tìm kiếm các từ bằng cách gõ nghĩa của từ vào khung tìm kiếm

2 Click vào “Tìm kiếm” Hiển thị view xem video

3 Click vào khung tìm kiếm có hình kính lúp Bàn phím sẽ hiện ra

Các chữ Hàn có nghĩa tiếng Việt sẽ được hiển thị, bao gồm một phần hoặc toàn bộ Để sử dụng, người dùng cần có kết nối internet trong lần chạy đầu tiên, nhưng các lần sau không cần thiết Kết quả sẽ là danh sách các từ tiếng Hàn được lọc theo nghĩa tiếng Việt.

Use case Đánh dấu từ đã học

Bảng 3.13: Use case Đánh dấu từ đã học

Tên use case Đánh dấu từ đã học

Mô tả Đánh dấu các từ đã học để làm ghi chú

1 Bấm vào các mục chủ đề trên màn hình chính

Hiện ra màn hình liệt kê các từ vựng trong chủ đề đó

2 Click vào hình ngôi sao phía bên phải các từ

Ngôi sao chuyển sang màu hồng khi người dùng đánh dấu yêu thích Để sử dụng, cần có kết nối internet trong lần chạy đầu tiên, nhưng các lần sau không cần Kết quả là các từ mà người dùng đã học và chọn sẽ được lưu lại.

Use case Xem từ đã học

Bảng 3.14: Use case Xem từ đã học

Tên use case Xem từ đã học

Mô tả Xem các từ đã học thuộc trong quá khứ

Để xem các từ đã học, bạn chỉ cần nhấp vào “Yêu thích” Lưu ý rằng cần có kết nối internet trong lần sử dụng đầu tiên, nhưng các lần sau sẽ không cần Kết quả sẽ hiển thị danh sách các từ tiếng Hàn mà bạn đã thêm trước đó.

Use case Nghe phát âm

Bảng 3.15: Use case Nghe phát âm

Tên use case Nghe phát âm

Mô tả Nghe phát âm tiếng Hàn

1 Bấm vào các mục chủ đề trên màn hình chính

Hiện ra màn hình liệt kê các từ vựng trong chủ đề đó

2 Click vào biểu tượng loa ở phía bên trái Phát âm thanh của từ được chọn

“Play” ở phía cuối bên trái màn hình

Phát âm thanh tất cả các từ Điều kiện cần Có kết nối internet

Kết quả Âm thanh của từ vựng được phát

Use case PDF từ vựng

Bảng 3.16: Use case PDF từ vựng

Tên use case PDF từ vựng

Mô tả Học các từ đơn lẻ bằng PDF

2 Click vào “Từ vựng” Hiển thị view liệt kê các chủ đề từ vựng

3 Click vào bất kỳ chủ đề nào muốn học

Hiển thị file PDF liệt kê các từ vựng của chủ đề đó Điều kiện cần

Có kết nối internet, yêu cầu thời gian chờ, thời gian nhanh chậm tuỳ vào tốc độ của Internet

Kết quả Danh sách các PDF từ vựng được liệt kê

3.3.2.2 Use case Học ngữ pháp

Hình 3.3: Use case Học ngữ pháp

Use case PDF ngữ pháp

Bảng 3.17: Use case PDF ngữ pháp

Tên use case PDF ngữ pháp

Mô tả Học ngữ pháp tiếng Hàn bằng PDF

2 Click vào “Ngữ pháp” Hiển thị view liệt kê các chủ đề ngữ pháp

3 Click vào bất kỳ chủ đề nào muốn học

Hiển thị file PDF liệt kê ngữ pháp của chủ đề đó Điều kiện cần

Có kết nối internet, yêu cầu thời gian chờ, thời gian nhanh chậm tuỳ vào tốc độ của Internet

Kết quả Danh sách các PDF ngữ pháp được liệt kê

Hình 3.4: Use case Luyện tập

Bảng 3.18: Use case Luyện viết

Tên use case Luyện viết

Mô tả Luyện viết tiếng Hàn bằng cách vẽ chữ trên màn hình

2 Click vào “Luyện viết” Hiển thị khung luyện viết cùng khung kết quả

3 Vẽ chữ Hàn vào khung vàng nhạt bên dưới Hiển thị chữ đã vẽ

4 Bấm nút ‘Recognize’ để hiển thị kết quả

Kết quả sẽ hiển thị ở khung màu trắng bên trên Điều kiện cần (không có)

Kết quả Chữ đã vẽ sẽ được hiển thị ở trên, nếu vẽ không chính xác, chữ sẽ không hiện

Use case Luyện phát âm

Bảng 3.19: Use case Luyện phát âm

Tên use case Luyện phát âm

Mô tả Luyện phát âm tiếng Hàn bằng cách nghe và tự nói lại

Từ màn hình chính, bấm vào biểu tượng ghi âm tròn nhỏ phía trong chủ đề

Hiện ra một view với từ vựng, phiên âm, dịch nghĩa và phát âm

2 Click vào biểu tượng loa để nghe từ vựng đó

Hệ thống sẽ phát âm từ vựng đã chọn

Click vào nút ‘Ghi âm’, chờ 3 giây và nói lại từ đó (trong 4 giây)

Hệ thống sẽ hiển thị 3 giây đầu để chờ và 4 giây sau để thực hiện ghi âm

4 Bấm nút ‘Nghe’ để nghe kết quả

Hệ thống tự phát lại âm thanh đã ghi trước đó Điều kiện cần Có kết nối Internet

Kết quả Âm thanh đã ghi trước đó được phát, User tự đối chiếu với âm thanh mẫu xem đã đọc đúng chưa

Use case Nghe và kiểm tra

Bảng 3.20: Use case Nghe và kiểm tra

Tên use case Nghe và kiểm tra

Mô tả Nghe âm thanh gốc, sau đó ghi âm lại và xem kết quả từ hệ thống

Từ màn hình chính, bấm vào biểu tượng micro tròn nhỏ phía trong chủ đề

Hiện ra một view với từ vựng, phiên âm, dịch nghĩa phát âm và nút ghi âm

‘Micro’ màu đỏ phía dưới, chờ biểu tưởng di chuyển lên trên và bắt đầu nói

Biểu tượng ‘Micro’ sẽ đi từ dưới lên và hiệu ứng thu phóng là tín hiệu sẵn sàng để ghi âm

Click lần thứ 2 vào biểu tượng ‘Micro’ để xem kết quả

Nếu nói chính xác, sẽ có khung chữ

“Like”, ngược lại, khung chữ

“Unlike” sẽ hiện ra Điều kiện cần Có kết nối Internet

Kết quả Kiểm tra âm thanh ghi lại có đúng hay không đúng so với bản gốc

Use case Luyện nghe phiên âm

Bảng 3.21: Use case Luyện nghe phiên âm

Tên use case Luyện nghe phiên âm

Mô tả Nghe phiên âm của một từ, rồi chọn đáp án phiên âm đúng của từ đó Chủ thể User

Từ màn hình chính, bấm vào biểu tượng mũ tròn nhỏ phía trong chủ đề

Hiện ra một view với từ vựng, dịch nghĩa, phát âm và các đáp án

3 Click chọn đáp án chính xác ở phía dưới

Nếu bạn chọn đáp án đúng, câu hỏi tiếp theo sẽ được chuyển đến Nếu sai 3 lần, đáp án sẽ được hiển thị Lưu ý rằng bạn cần có kết nối Internet trong lần truy cập đầu tiên.

Kết quả Sau 10 lần chọn đúng liên tiếp, sẽ trở lại màn hình chính Mỗi lần sai thì trừ một điểm

Bảng 3.22: Use case Luyện nghe

Tên use case Luyện nghe

Mô tả Nghe phiên âm của một từ, rồi chọn đáp án đúng của từ đó

1 Từ màn hình chính, bấm vào chủ đề muốn học

Hiện ra danh sách các từ vựng có trong database

Click vào biểu tượng tai nghe ở phía dưới bên phải

Click biểu tượng loa và chọn đáp án chính xác ở phía dưới

Nếu bạn chọn đáp án đúng, hệ thống sẽ chuyển sang câu hỏi tiếp theo Nếu hết thời gian hoặc bạn trả lời sai 5 lần, đáp án sẽ được hiển thị Lưu ý rằng bạn cần có kết nối Internet trong lần đầu tiên để tham gia.

Kết quả Sai 5 lần thì sẽ hiển thị đáp án, sau 8 giây sẽ tự động chuyển qua câu mới

Use case Game Word Garden

Bảng 3.23: Use case Game Word Garden

Tên use case Game Word Garden

Mô tả Game nghe và điền chữ Hàn vào chỗ trống

1 Từ màn hình chính, bấm vào Game Word Garden

2 Click vào biểu tượng tai nghe ở phía trên Hiện ra khung nghe

3 Cài đặt bàn phím tiếng

Hiển thị hướng dẫn cài đặt bàn phím tiếng Hàn (Use case này sử dụng bàn phím có sẵn của hệ thống)

4 Gõ chữ muốn đoán và nhấn “Xong”

Nếu đáp án chính xác, sẽ hiển thị chữ lên khung, sai thì hình cánh hoa sẽ hiển thị bị rụng đi

5 Bấm “Hint” để xem chữ gợi ý Đưa ra gợi ý cho từ tiếng Hàn đó Điều kiện cần Có kết nối Internet trong lần đầu tiên

Kết quả Sau 8 lần sai, sẽ không được chọn nữa, bấm ‘Play Again’ để chơi lại hoặc thoát ra, không chơi nữa

Use case Game Search Word

Bảng 3.24: Use case Game Search Word

Tên use case Game Search Word

Mô tả Game tìm chữ đúng trong bảng

1 Từ màn hình chính, bấm vào ‘Search Word’

Tìm các chữ trong bảng dựa vào các từ ở phía dưới

Nếu từ đó là đúng, hiển thị màu nâu, nếu là sai, thì không hiển thị

‘reload’ để chơi lại Cài đặt lại thời gian là ’00:00’

‘Pause’ để tạm dừng game

Thời gian sẽ dừng, và khung hiển thị game biến mất

‘Play’ để tiếp tục chơi

Thời gian sẽ chạy tiếp và khung hiển thị game sẽ hiện ra lại

‘Back’ để quay lại màn hình chính

Màn hình game sẽ đóng lại và màn hình chính sẽ hiện ra Điều kiện cần Có kết nối Internet trong lần đầu tiên

Kết quả Sau khi tìm hết 6 chữ Hàn, thời gian sẽ dừng lại

Bảng 3.25: Use case Flash Card

Tên use case Flash Card

Mô tả Tạo Flash Card cho chữ Hàn, hỗ trợ việc ghi nhớ

1 Từ màn hình chính, bấm vào Flash Card

2 Bấm vào Hiện ra khung nghe

Click biểu tượng loa và chọn đáp án chính xác ở phía dưới

Nếu đáp án đúng, hệ thống sẽ chuyển sang câu hỏi mới Nếu hết thời gian hoặc người chơi sai ba lần, đáp án sẽ được hiển thị Lưu ý rằng cần có kết nối Internet trong lần truy cập đầu tiên.

Kết quả Sau 10 lần chọn đúng liên tiếp, sẽ trở lại màn hình chính Mỗi lần sai thì trừ một điểm

3.3.2.4 Use case Quản lý từ vựng

Hình 3.5: Use case Quản lý từ vựng

Use case Quản lý từ vựng

Bảng 3.26: Use case Quản lý từ vựng

Tên use case Quản lý từ vựng

Mô tả Thêm các từ vựng chưa có, sửa, xoá các từ vựng đã có trong database Chủ thể User

Từ màn hình trang web chính, bấm vào mục

Hiện ra bên phải một bảng liệt kê các từ đang có trong database

2 Click vào từ muốn chỉnh sửa

Hiển thị thông tin từ đó ở các khung bên trên

3 Click nút ‘update’ Lưu từ cũ với các chỉnh sửa mới

4 Click nút ‘delete’ Xoá từ đó khỏi database

Nhập từ mới trong khung ‘Language’, nghĩa của từ trong khung

‘Meaning, phiên âm trong ‘Spelling’ , chủ đề của từ đó trong ‘Types’

Hệ thống hiển thị thông tin đã nhập lên màn hình

6 Bấm nút ‘Choose File’ Một khung hiển thị hiện ra để chọn tệp mp3 cho từ đó

7 Bấm nút ‘Add new’ Thêm tất cả vào database Điều kiện cần Có kết nối Internet

Kết quả Từ mới nhập được thêm vào database

3.3.2.5 Use case Quản lý ngữ pháp

Hình 3.6: Use case Quản lý ngữ pháp

Use case Quản lý ngữ pháp

Bảng 3.27: Use case Quản lý ngữ pháp

Tên use case Quản lý ngữ pháp

Mô tả Thêm các ngữ pháp chưa có, sửa, xoá các ngữ pháp đã có trong database

Hiện ra bên phải một bảng liệt kê các ngữ pháp đang có trong database

2 Click vào ngữ pháp muốn chỉnh sửa

Hiển thị thông tin ngữ pháp ở các khung bên trên

3 Click nút ‘update’ Lưu chỉnh sửa mới

4 Click nút ‘delete’ Xoá ngữ pháp khỏi database

5 Nhập tên ngữ pháp mới trong khung ‘Title’

Hệ thống hiển thị tên ngữ pháp đó trên màn hình

6 Bấm nút ‘Choose File’ Một khung hiển thị hiện ra để chọn tệp

PDF cho ngữ pháp đó

Kết quả Ngữ pháp mới được thêm vào database

3.3.2.6 Use case Quản lý video

Hình 3.7: Use case Quản lý video

Use case Quản lý video

Bảng 3.28: Use case Quản lý video

Tên use case Quản lý video

Mô tả Thêm các ngữ pháp chưa có, sửa, xoá các ngữ pháp đã có trong database

Hiện ra bên phải một bảng liệt kê các video đang có trong database

2 Click vào video muốn chỉnh sửa

Hiển thị thông tin video ở các khung bên trên

3 Click nút ‘update’ Lưu thông tin video cũ với các chỉnh sửa mới

4 Click nút ‘delete’ Xoá video khỏi database

5 Nhập tên video mới trong khung ‘Title’

Hệ thống hiển thị tên video lên màn hình

6 Bấm nút ‘Choose File’ Một khung hiển thị hiện ra để chọn tệp video mới

Kết quả Video mới được thêm vào database

3.3.2.7 Use case Quản lý Lyric

Hình 3.8: Use case Quản lý Lyric

Use case Quản lý Lyric

Bảng 3.29: Use case Quản lý Lyric

Tên use case Quản lý Lyric

Mô tả Thêm các lyric chưa có, sửa, xoá các lyric đã có trong database

Hiện ra bên phải một bảng liệt kê các Lyric đang có trong database theo bài hát được chọn

2 Click vào lyric muốn chỉnh sửa

Hiển thị thông tin lyric ở các khung bên trên

3 Click nút ‘update’ Lưu thông tin lyric cũ với các chỉnh sửa mới

4 Click nút ‘delete’ Xoá lyric khỏi database

5 Chọn tên video muốn thêm lyric mới

‘Korea’, Tiếng anh dịch nghĩa của tiếng Hàn trong ô ‘English’, thời gian hiển thị trong mục ‘Time’

Kết quả Video mới được thêm vào database

THIẾT KẾ HỆ THỐNG

Thiết kế dữ liệu

Bảng word được sử dụng để lưu các từ, câu để học

Bảng 4.1: Mô tả bảng word

Thuộc tính Mô tả Kiểu dữ liệu Khóa

The article discusses the structure of a word object in a database, highlighting key components such as the ObjectID (_id), the language of the word or phrase (language), the phonetic spelling (spelling), the meaning of the word or phrase (meaning), and the associated audio file name (media) Each element plays a crucial role in organizing and retrieving language learning resources effectively.

String types Chủ để của từ, câu String

Bảng grammar được sử dụng để lưu thông tin của file pdf chứa Ngữ pháp

Bảng 4.2: Mô tả bảng grammar

_id _id của grammar ObjectID title Chủ để của ngữ pháp String file Tên của file pdf String

Bảng lession được sử dụng để lưu thông tin của file pdf chứa các bài học như: hội thoại, từ vựng giao tiếp

Bảng 4.3: Mô tả bảng lession

_id _id của grammar ObjectID title Chủ để của ngữ pháp String file Tên của file pdf String

Bảng video chứa thông tin của video

Bảng 4.4: Mô tả bảng video

_id _id của video ObjectID title Tên của video String file Tên của file video String lyric Chứa lyric của video Array

Bảng lyric chứa thông tin của lyric bao gồm: lyric tiếng Hàn, Anh và thời gian của lyric đó

Bảng 4.5: Mô tả bảng video

_id _id của video ObjectID korean Lời Hàn của đoạn video String english Lời tiếng Anh của video String time Thời gian cửa đoạn lyric đó xuất hiện

Kiến trúc hệ thống

Thiết kế xử lý

Hình 4.1: Sequence diagram Xem Video

Hình 4.6: Sequence diagram Tìm Kiếm

4.3.1.5 Sequence diagram Đánh dấu từ đã học

Hình 4.7: Sequence diagram Đánh dấu từ đã học

4.3.1.6 Sequence diagram Nghe phát âm

Hình 4.8: Sequence diagram Nghe Phát âm

4.3.1.7 Sequence diagram Luyện phát âm

Hình 4.9: Sequence diagram Luyện phát âm

4.3.1.8 Sequence diagram Luyện nghe phiên âm

Hình 4.10: Sequence diagram Luyện nghe phiên âm

Hình 4.11: Class Diagram tổng thể

4.3.2.2 Class diagram từ vựng

Hình 4.12: Class Diagram Từ vựng

4.3.2.2 Class diagram Lession, Gramma, Video and Lyric

Hình 4.13: Class Diagram Lession, Gramma, Video and Lyric

Thiết kế giao diện

Bảng 4.6: Đặc tả màn hình trang chủ

Tên Loại Tham chiếu Ghi chú

1 Menu Button Khi click hiển thị thanh menu

Khi click sẽ qua màn hình học

Butoon Khi click sẽ hiển thị màn hình học

Khi click hiển thị màn hình ghi âm

5 Bài test Button Khi click hiển thị màn hình làm bài test

Bảng 4.7: Đặc tả màn hình Menu

1 Các mục Button Khi click bất kì vào mục nào, sẽ hiển thị nội dung của các mục

4.4.3 Màn hình danh sách các từ, câu

Hình 4.16: Giao diện danh sách từ, câu để học

Bảng 4.8: Đặc tả màn hình danh sách các câu, từ trong bài

1 Quay lại Button Khi click quay lại màn hình trước

Api lấy danh sách các từ, câu

Hiển thị nhừng từ cần học trong bài

3 Thêm vào danh sách yêu thích

Butoon Khi click sẽ tất cả những từ vào danh sách yêu thích

Button Khi click sẽ thêm từ đó vào danh sách yêu thích

5 Tìm kiếm Button Khi click sẽ hiển thị ra màn hình tìm kiếm

6 Nghe Button Khi click sẽ phát ra âm thanh của từ đó

7 Nghe toàn bộ Button Khi click sẽ nghe theo thứ tự từ trên xuống

8 Học ngẫu nhiên Button Khi click sẽ hiển thị ra màn hình học

9 Ghi âm Button Khi click sẽ hiển thị ra màn hình ghi âm

Button Khi click sẽ hiển thị ra màn hình luyện nghe

Hình 4.17: Giao diện màn hình ghi âm

Bảng 4.9: Đặc tả màn hình ghi âm

4 Hiện thị từ Text Hiển thị từ, câu người dùng nói

5 Ghi âm Button Khi click sẽ bắt đầu ghi âm

6 Di chuyển qua từ, câu khác

Button Khi click sẽ hiển thị ra từ, câu khác trong bài

Hình 4.18: Giao diện màn hình học nói

Bảng 4.10: Đặc tả màn hình học nói

4 Ghi âm Button Khi click sẽ bắt đầu ghi âm, khi ghi âm kết thúc, sẽ hiện ra button lưu lại đoạn ghi âm người dùng vừa nói

5 Di chuyển qua từ, câu khác

Button Khi click sẽ hiển thị ra từ, câu khác trong bài

4.4.6 Màn hình làm bài test

Hình 4.19: Giao diện làm bài test

Bảng 4.11: Đặc tả màn hình làm bài test

2 Thanh điểm Hiển thị số điểm qua mỗi câu đúng

3 Hiển thị câu hỏi Realm Database Hiển thị mỗi loại câu hỏi

4 Hiện thị các đáp án

Button Khi click đúng hiển thị màu nâu, sai hiển thị màu cam

Hình 4.20: Giao diện tìm kiếm

Bảng 4.12: Đặc tả màn hình tìm kiếm

Hiển thị nhừng từ cần học trong bài

Bar Điền từ, câu cần tìm

4.4.8 Màn hình luyện tập nghe

Hình 4.21: Giao diện luyện tập nghe

Bảng 4.13: Đặc tả màn hình luyện tập nghe

Button Khi click sẽ thêm vào danh sách yêu thích

3 Hiển thị câu hỏi Realm

Hiển thị mỗi loại câu hỏi

4 Hiện thị các đáp án

Button Khi click đúng hiển thị màu nâu, sai hiển thị màu cam

Hình 4.22: Giao diện luyện tập viết

Bảng 4.14: Đặc tả màn hình luyện viết

1 Màn hình vẽ View Màn hình để vẽ chữ Hàn

2 Màn hình hiện đáp án

View Hiển thị kết quả sau khi vẽ xong và ấn “Nhận Dạng”

3 Xoá Button Khi click sẽ dọn đi đáp án và chữ vừa vẽ

4 Nhận dạng Button Khi click sẽ hiện thị kết quả

4.4.10 Màn hình hiển thị file PDF để xem từ vựng, ngữ pháp

Hình 4.23: Giao diện hiện thị file PDF

Bảng 4.15: Đặc tả màn hình hiển thị file PDF

Số thứ tự Tên Loại Tham chiếu Ghi chú

View Hiển thị nội dung trong PDF

4.4.11 Màn hình trò chơi “Search Word”

Hình 4.24: Giao diện trò chơi “Search Word”

Bảng 4.16: Đặc tả màn hình trò chơi “Search Word”

1 Hiển thị các chữ Grid View Hiển thị grid chữ

2 Màn hình hiện đáp án

View Hiển thị đáp án cần tìm kiếm

3 Quay lại Button Khi click sẽ quay lại màn hình trước

4 Tải lại Button Khi click sẽ chơi lại từ đầu

5 Dừng lại Button Khi click thời gian sẽ dừng lại

4.4.12 Màn hình trò chơi “Word Garden”

Hình 4.25: Giao diện trò chơi “Word Garden”

Bảng 4.17: Đặc tả màn hình trò chơi “Word Gardent”

1 Nghe Button Khi click sẽ phát ra âm thanh của đáp án

2 Gợi ý Button Gợi ý đáp án

3 Đáp án Label Hiển thị từ chữ của đáp án mỗi khi nhập đúng

4 Nhập đáp án Text Field Nhập đáp án, nếu có chữ đúng sẽ hiện thì trên Label đáp án

5 Hình ảnh hoa Image View Hiển thị hoa, nếu nhập 1 chữ sai cánh hoa sẽ rơi xuống

6 Cách cài đặt bàn phím

Button Khi click sẽ hiển thị cách cài đặt bàn phím tiếng Hàn

7 Quay lại Button Khi click sẽ quay về trang chủ

Hình 4.26: Giao diện Flash Card

Bảng 4.18: Đặc tả màn hình “Flash Card”

1 Quay lại Button Khi click sẽ quay về

2 Nghĩa của từ Label Realm

Hiển thị nghĩa của từ

2 Tạo Flash Card Button Gợi ý đáp án

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Kết quả

Sau một khoảng thời gian thực hiện đề tài, kết quả mà nhóm thu hoạch được:

- Hiểu được một phần về ngôn ngữ Hàn

- Hiểu được cách sử dụng Swift để phát triển ứng dụng IOS

- Hiểu được cách sử dụng NodeJS và MongoDB

- Xây dựng ứng dụng hỗ trợ học ngôn ngữ Hàn

- Giao diện của chương trình thân thiện và dễ sử dụng.

Hạn chế

- Ứng dụng chưa được deploy lên App Store

- Một số tính năng chưa hoàn thiện

- Chưa có đã đa ngôn ngữ.

Hướng phát triển

Để nâng cao hiệu quả của chương trình học tiếng Hàn, cần bổ sung các tính năng như nghe đoạn hội thoại, tăng cường trò chơi, học qua hình ảnh và mở rộng lượng dữ liệu Ngoài ra, giao diện cần được cải tiến để thân thiện hơn với người dùng Chúng tôi hướng đến việc phát triển một ứng dụng học tiếng Hàn đa dạng tính năng, vượt trội hơn so với các ứng dụng hiện có trên thị trường.

Tiêu đề	Xây Dựng Ứng Dụng Học Tiếng Hàn Trên Nền Tảng IOS
Thể loại	Đồ Án Tốt Nghiệp

Định dạng
Số trang	88
Dung lượng	1,98 MB