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

MỤC LỤC TRANG PHỤ BÌA i NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN iii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iv LỜI CẢM ƠN v MỤC LỤC vi DANH MỤC CÁC TỪ VIẾT TẮT ix DANH MỤC CÁC BẢNG BIỂU x DANH MỤC CÁC HÌNH ẢNH xii Chương TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Mục tiêu nghiên cứu 1.3 Khảo sát trạng 1.4 Mô tả tổng thể 1.4.1 Phối cảnh sản phẩm 1.4.2 Chức ứng dụng 1.4.3 Các lớp người dùng đặc điểm người dùng 1.4.4 Môi trường hoạt động 1.4.5 Ràng buộc Chương CƠ SỞ LÝ THUYẾT 2.1 Tổng quan NodeJS 2.1.1 Express framework 2.2 Tổng quan Jquery 2.2.1 Khái niệm 2.2.2 Các tính quan trọng 2.2.3 Ưu điểm 2.3 Tổng quan Swift 2.3.1 Khái niệm 2.3.2 Đặc điểm 2.3.3 Ưu điểm so với Objective-C vi 2.3.4 Nhược điểm so với Objective-C 10 2.3.5 Realm Swift 10 2.3.6 Auto Layout 11 2.3.7 User Defaults 13 2.3.8 Thread 14 2.3.9 Speed 14 2.3.10 NSTimer 14 2.3.11 Core ML 14 Chương PHÂN TÍCH VÀ MÔ HÌNH HĨA U CẦU 15 3.1 Phân tích yêu cầu chức 15 3.1.1 Chức nghe, ghi âm 15 3.1.2 Chức thêm vào danh sách yêu thích 15 3.1.3 Chức nghe liên tục 16 3.1.4 Chức luyện tập từ, câu qua đáp án 16 3.1.5 Chức làm test 17 3.1.6 Chức tìm kiếm 17 3.1.7 Chức luyện viết chữ 18 3.1.8 Chức luyện tập qua Video ca nhạc 18 3.1.9 Chức luyện tập qua trò chơi Search Word 19 3.1.10 Chức luyện tập qua trò chơi Word Garden 19 3.1.11 Chức luyện tập qua Flash Card 20 3.2 Phân tích yêu cầu phi chức 20 3.3 Mơ hình hóa u cầu 21 3.3.1 Use case tổng quát 21 3.3.2 Chi tiết Use case 22 3.3.2.1 Use case Học từ vựng 22 3.3.2.2 Use case Học ngữ pháp 28 3.3.2.3 Use case Luyện tập 30 3.3.2.4 Use case Quản lý từ vựng 38 3.3.2.5 Use case Quản lý ngữ pháp 40 3.3.2.6 Use case Quản lý video 41 3.3.2.7 Use case Quản lý Lyric 42 Chương THIẾT KẾ HỆ THỐNG 44 4.1 Thiết kế liệu 44 4.1.1 Mơ hình ERD 44 4.1.2 Mô tả bảng 44 4.2 Kiến trúc hệ thống 47 vii 4.3 Thiết kế xử lý 48 4.3.1 Sequence diagram 48 4.3.1.1 Sequence diagram Gramma 48 4.3.1.2 Sequence diagram Xem Video 48 4.3.1.3 Sequence diagram Vocabulary 49 4.3.1.4 Sequence diagram Tìm Kiếm 49 4.3.1.5 Sequence diagram Đánh dấu từ học 50 4.3.1.6 Sequence diagram Nghe phát âm 50 4.3.1.7 Sequence diagram Luyện phát âm 51 4.3.1.8 Sequence diagram Luyện nghe phiên âm 52 4.3.2 Class diagram 53 4.3.2.1 Class diagram tổng thể 53 4.3.2.2 Class diagram từ vựng 54 4.3.2.2 Class diagram Lession, Gramma, Video and Lyric 55 4.4 Thiết kế giao diện 56 4.4.1 Màn hình trang chủ 56 4.4.2 Màn hình Menu 58 4.4.3 Màn hình danh sách từ, câu 59 4.4.4 Màn hình ghi âm 61 4.4.5 Màn hình học nói 63 4.4.6 Màn hình làm test 65 4.4.7 Màn hình tìm kiếm 67 4.4.8 Màn hình luyện tập nghe 69 4.4.9 Màn hình luyện viết 71 4.4.10 Màn hình hiển thị file PDF để xem từ vựng, ngữ pháp 73 4.4.11 Màn hình trị chơi “Search Word” 74 4.4.12 Màn hình trị chơi “Word Garden” 76 4.4.13 Màn hình Flash Card 78 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 80 5.1 Kết 80 5.2 Hạn chế 80 5.3 Hướng phát triển 80 TÀI LIỆU THAM KHẢO 81 Tài liệu tham khảo viết báo cáo 81 Tài liệu tham khảo để Code 81 viii DANH MỤC CÁC TỪ VIẾT TẮT UI/UX: User Interface / User Experience API: Application program interfac I/O: Input/ Output HTML : Hypertext Markup Language IOS: Iphone Operation System WWDC: Worldwide Developers Conference DOM: Document Object Model SDK: Software Development Kit ML: Machine Learning PDF: Portable Document Forma ix DANH MỤC CÁC BẢNG BIỂU Bảng 3.1: Mô tả chức nghe, ghi âm Bảng 3.2: Mô tả chức thêm vào danh sách yêu thích Bảng 3.3: Mô tả chức nghe liên tục Bảng 3.4: Mô tả chức luyện tập từ Bảng 3.5: Mô tả chức làm test Bảng 3.6: Mô tả chức tìm kiếm Bảng 3.7: Mơ tả chức luyện tập qua Video Bảng 3.8: Mô tả chức trị chơi Search Word Bảng 3.9: Mơ tả chức trị chơi Word Garden Bảng 3.10: Mơ tả chức trò chơi Flash Card Bảng 3.11: Use case Xem video Bảng 3.12: Use case Tìm kiếm Bảng 3.13: Use case Đánh dấu từ học Bảng 3.14: Use case Xem từ học Bảng 3.15: Use case Nghe phát âm Bảng 3.16: Use case PDF từ vựng Bảng 3.17: Use case PDF ngữ pháp Bảng 3.18: Use case Luyện viết Bảng 3.19: Use case Luyện phát âm Bảng 3.20: Use case Nghe kiểm tra Bảng 3.21: Use case Luyện nghe phiên âm Bảng 3.22: Use case Luyện nghe Bảng 3.23: Use case Game Word Garden Bảng 3.24: Use case Game Search Word Bảng 3.25: Use case Flash Card Bảng 3.26: Use case Quản lý từ vựng x Bảng 3.27: Use case Quản lý ngữ pháp Bảng 3.28: Use case Quản lý video Bảng 3.29: Use case Quản lý Lyric Bảng 4.1: Mô tả bảng word Bảng 4.2: Mô tả bảng grammar Bảng 4.3: Mô tả bảng lession Bảng 4.4: Mô tả bảng video Bảng 4.5: Mô tả bảng video Bảng 4.6: Đặc tả hình trang chủ Bảng 4.7: Đặc tả hình Menu Bảng 4.8: Đặc tả hình danh sách câu, từ Bảng 4.9: Đặc tả hình ghi âm Bảng 4.10: Đặc tả hình học nói Bảng 4.11: Đặc tả hình làm test Bảng 4.12: Đặc tả hình tìm kiếm Bảng 4.13: Đặc tả hình luyện tập nghe Bảng 4.14: Đặc tả hình luyện viết Bảng 4.15: Đặc tả hình hiển thị file PDF Bảng 4.16: Đặc tả hình trị chơi “Search Word” Bảng 4.17: Đặc tả hình trị chơi “Word Gardent” Bảng 4.18: Đặc tả hình “Flash Card” xi DANH MỤC CÁC HÌNH ẢNH Hình 2.1: Express Framework Hình 2.2: Realm Platform Hình 2.3: Thuật tốn AutoLayout Hình 3.1: Use case tổng quát Hình 3.2: Use case Học từ vựng Hình 3.3: Use case Học ngữ pháp Hình 3.4: Use case Luyện tập Hình 3.5: Use case Quản lý từ vựng Hình 3.6: Use case Quản lý ngữ pháp Hình 3.7: Use case Quản lý video Hình 3.8: Use case Quản lý Lyric Hình 4.1: Mơ hình ERD Hình 4.2: System Architect Hình 4.3: Sequence diagram Gramma Hình 4.4: Sequence diagram Xem Video Hình 4.5: Sequence diagram Vocabulary Hình 4.6: Sequence diagram Tìm Kiếm Hình 4.7: Sequence diagram Đánh dấu từ học Hình 4.8: Sequence diagram Nghe Phát âm Hình 4.9: Sequence diagram Luyện phát âm Hình 4.10: Sequence diagram Luyện nghe phiên âm Hình 4.11: Class Diagram tổng thể Hình 4.12: Class Diagram Từ vựng Hình 4.13: Class Diagram Lession, Gramma, Video and Lyric Hình 4.14: Danh sách từ, câu xii Chương TỔNG QUAN 1.1 Lý chọn đề tài Ngày nhiều bạn trẻ mong muốn tìm cho cơng việc ổn định cơng ty nước ngồi phong cách làm việc chuyên nghiệp, chế độ đãi ngộ tốt, mức lương cao… Và để làm việc công ty nước ngồi trình độ ngoại ngữ bạn phải tốt Do đó, cơng nhân, học sinh, sinh viên, người làm, bỏ nhiều thời gian học ngoại ngữ từ đến nhiều thứ tiếng như: tiếng Anh, Nhật, Hàn, Pháp, Nga, Trung, Thái… Vậy tiếng Hàn? Hiện nay, Việt Nam Hàn Quốc trì quan hệ đối tác quan trọng hàng đầu khu vực Đông Nam Á, với lượng vốn đầu tư vào Việt Nam nằm vị trí thứ Rất nhiều tập đồn, cơng ty Hàn Quốc xuất Việt Nam năm gần đây, điển hình Samsung, LG Electronics, Lotte với nguồn vốn khổng lồ nhiều chi nhánh khắp tỉnh thành nước Tại Việt Nam có 15 trường Đại học chuyên giảng dạy ngôn ngữ Hàn Quốc hàng loạt trung tâm dậy tiếng Hàn hoạt động tỉnh thành nước Đặc biệt, Việt Nam nước nghe Kpop nhiều giới Điển hình số lượng view mà người Việt Nam đóng góp cho nhóm nhạc BlackPink youtube đứng thứ giới Tuy số lượng người học tiếng Hàn thời gian gần tăng lên nhanh, không đáp ứng đủ nhu cầu nhà tuyển dụng Nhiều công ty Hàn Quốc bắt buộc phải tuyển nhân viên thơng thạo tiếng Anh khơng tìm người phù hợp Nếu bạn làm việc với sếp người Hàn nhận thấy họ không giỏi giao tiếp tiếng Anh khó thay đổi nói ngơn ngữ khác Vì học tiếng Hàn có lợi lớn trình trao đổi làm việc với người ngữ Thị trường tiếng Anh nguồn cung vượt cầu, tiếng Nhật dần tiến tới mức bão hòa, tiếng Hàn trở thành ngôn ngữ tiềm thị trường tuyển dụng nhân lực 1.2 Mục tiêu nghiên cứu a UI/UX Thiết kế giao diện cho ứng dụng với màu sắc đẹp mắt, kích thước icon, lề phải chuẩn gần chuẩn ứng dụng khác IOS b Back-End Viết số API cho trang quản trị (bằng NodeJS) client (NodeJS 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 học dễ dàng cho người bắt đầu 1.3 Khảo sát trạng Duolingo - Giao diện: Animation xuyên suốt - Dữ liệu: phong phú - Các cấp độ: Nhiều cấp độ - Tính cá nhân hố: Cao - Phần thưởng: Đa dạng - Đánh giá chung: Một app chuyên nghiệp cho người bắt đầu học từ đến nâng cao, có hỗ trợ đầy đủ việc luyện tập kỹ : nghe, nói, đọc, viết - Hầu khơng có quảng cáo Tiếng hàn giao tiếp – chủ đề - Giao diện: chưa chuyên nghiệp, theo dạng liệt kê - Dữ liệu: phong phú - Tính cá nhân hố: 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 tị mị tìm hiều ứng dụng, vọc ứng dụng Khơng khuyến khích sử dụng - Có nhiều quảng cáo Thị trường học ngoại ngữ nói chung học tiếng Hàn nói riêng cạnh tranh khốc liệt Để đưa ứng dụng lên top (hoặc có số người sử dụng định) Chi phí quảng cáo chi phí phát triển bỏ cao 1.4 Mô tả tổng thể 1.4.1 Phối cảnh sản phẩm App Chuppy xây dựng nhằm tạo môi trường học tập tiếng Hàn từ đến nâng cao cho người giao tiếp, ngữ pháp, từ vựng Tạo hứng thú với đam mê đặc biệt dành cho có đam mê âm nhạc cách học qua video Kpop 1.4.2 Chức ứng dụng Chức ứ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 4.4.7 Màn hình tìm kiếm Hình 4.20: Giao diện tìm kiếm 67 Bảng 4.12: Đặc tả hình tìm kiếm Số Tên Loại thứ Tham Ghi chiếu tự Quay lại Khi click quay lại hình Button trước Danh sách từ, Table Realm Hiển thị nhừng từ cần học câu View Database Thêm vào danh Button sách yêu thích Nghe Khi click thêm từ vào danh sách u thích Button Khi click phát âm từ Tìm kiếm Search Điền từ, câu cần tìm Bar 68 4.4.8 Màn hình luyện tập nghe Hình 4.21: Giao diện luyện tập nghe 69 Bảng 4.13: Đặc tả hình luyện tập nghe Số Tên Loại Quay lại Button Tham chiếu Ghi thứ tự Khi click quay lại hình trước Thêm vào danh Khi click thêm vào danh Button sách yêu thích sách yêu thích Hiển thị câu hỏi Realm Hiển thị loại câu hỏi Database Hiện thị đáp án Button Khi click hiển thị màu nâu, sai hiển thị màu cam 70 4.4.9 Màn hình luyện viết Hình 4.22: Giao diện luyện tập viết 71 Bảng 4.14: Đặc tả hình luyện viết Số Tên Loại Tham chiếu Màn hình vẽ View Màn hình để vẽ chữ Hàn Màn hình View Hiển thị kết sau vẽ Ghi thứ tự đáp án Xoá xong ấn “Nhận Dạng” Button Khi click dọn đáp án chữ vừa vẽ Nhận dạng Button Khi click thị kết 72 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 thị file PDF Bảng 4.15: Đặc tả hình hiển thị file PDF Số thứ tự Tên Loại Hiển thị nội View Tham chiếu Ghi Hiển thị nội dung PDF dung 73 4.4.11 Màn hình trị chơi “Search Word” Hình 4.24: Giao diện trị chơi “Search Word” 74 Bảng 4.16: Đặc tả hình trị chơi “Search Word” Số Tên Loại thứ Tham Ghi chiếu tự Hiển thị chữ Grid View Hiển thị grid chữ Màn hình View Hiển thị đáp án cần tìm đáp án Quay lại kiếm Khi click quay lại Button hình trước Tải lại Khi click chơi lại từ Button đầu Dừng lại Khi click thời gian Button dừng lại ‘ 75 4.4.12 Màn hình trị chơi “Word Garden” Hình 4.25: Giao diện trò chơi “Word Garden” 76 Bảng 4.17: Đặc tả hình trị chơi “Word Gardent” Số Tên Loại thứ Tham Ghi chiếu tự Nghe Button Khi click phát âm đáp án Gợi ý Button Gợi ý đáp án Đáp án Label Hiển thị từ chữ đáp án nhập Nhập đáp án Text Field Nhập đáp án, có chữ Label đáp án Hình ảnh hoa Image View Hiển thị hoa, nhập chữ sai cánh hoa rơi xuống Cách cài đặt bàn Button Khi click hiển thị cách cài đặt bàn phím tiếng phím Hàn Quay lại Button Khi click quay trang chủ 77 4.4.13 Màn hình Flash Card Hình 4.26: Giao diện Flash Card 78 Bảng 4.18: Đặc tả hình “Flash Card” Số Tên Loại Quay lại Button Tham chiếu Ghi thứ tự Khi click quay Main Nghĩa từ Label Realm Hiển thị nghĩa từ Database Tạo Flash Card Button Gợi ý đáp án 79 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết Sau khoảng thời gian thực đề tài, kết mà nhóm thu hoạch được: - Hiểu phần ngôn ngữ Hàn - Hiểu cách sử dụng Swift để phát triển ứng dụng IOS - Hiểu cách sử dụng NodeJS MongoDB - Xây dựng ứng dụng hỗ trợ học ngôn ngữ Hàn - Giao diện chương trình thân thiện dễ sử dụng 5.2 Hạn chế - Ứng dụng chưa deploy lên App Store - Một số tính chưa hồn thiện - Dữ liệu cịn - Thời gian có hạn - Chưa có đa ngơn ngữ 5.3 Hướng phát triển Để chương trình hoạt động hiệu hơn, cần thêm số tính nghe đoạn hội thoại, trị chơi nhiều hơn, học qua hình ảnh, lượng liệu phải nhiều Giao diện cần cải tiến thêm để thân thiện với người dùng Chúng em muốn hướng đến việc xây dựng ứng dụng học tiếng Hàn nhiều tính hiệu ứng dụng có thị trường 80 TÀI LIỆU THAM KHẢO • Tài liệu tham khảo viết báo cáo [1]: Alex Young, Marc Harter “NodeJS in Practice”, pp [2]: Azart Mardan “Express.JS Guide”, pp [3]: Jonathon Manning, Paris Buttfield-Addison, Tim Nugent “Learning Swift”, pp 27 [4]: Marin Todorov “Realm – Building Modern Swift Apps with Realm Database”, pp 11 [5]: Jonathon Manning, Paris Buttfield-Addison, Tim Nugent “Learning Swift”, pp 188 • Tài liệu tham khảo để Code Link github: https://github.com/quynguyen11/AppHocTiengHan • Link web tham khảo [6]: https://amela.vn/node-js-la-gi-2/ [7]: https://topdev.vn/blog/express-js-la-gi/ [8]: https://vi.wikipedia.org/wiki/Swift_(ngơn_ngữ_lập_trình) [9]: https://fxstudio.dev/realm-swift-trong-10-phut/ [10]: https://fxstudio.dev/basic-ios-tutorial-gioi-thieu-autolayout/ [11]: https://giaphiep.com/blog/userdefaults-trong-swift-1578 81 ... học tập): Khơng có - Đánh giá chung: Một app nghiệp dư cho tị mị tìm hiều ứng dụng, vọc ứng dụng Khơng khuyến khích sử dụng - Có nhiều quảng cáo Thị trường học ngoại ngữ nói chung học tiếng Hàn. .. youtube ? ?ứng thứ giới Tuy số lượng người học tiếng Hàn thời gian gần tăng lên nhanh, không đáp ứng đủ nhu cầu nhà tuyển dụng Nhiều công ty Hàn Quốc bắt buộc phải tuyển nhân viên thơng thạo tiếng. .. công nhân, học sinh, sinh viên, người làm, bỏ nhiều thời gian học ngoại ngữ từ đến nhiều thứ tiếng như: tiếng Anh, Nhật, Hàn, Pháp, Nga, Trung, Thái… Vậy tiếng Hàn? Hiện nay, Việt Nam Hàn Quốc