Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp)

Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp) Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Đồ án tốt nghiệp)

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG ỨNG DỤNG HỌC TIẾNG NHẬT TRÊN NỀN TẢNG IOS GVHD: TRẦN CÔNG TÚ SVTH: NGUYỄN TRUNG NGHĨA MSSV: 16110168 SVTH: ĐẶNG NGỌC TUẤN MSSV: 16110239 SKL 0 Tp Hồ Chí Minh, tháng 07/2020 LỜI CẢM ƠN Trên thực tế khơng có thành cơng mà không gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Nay nhóm thực xin phép gửi lời cảm ơn chân thành đến thầy Trần Công Tú, người hỗ trợ, truyền động lực cho nhóm q trình định chọn đề tài, hướng dẫn, nhận xét Tuy nhóm khơng hỏi nhiều hỏi thầy tận tình giúp đỡ, nguồn động lực cho nhóm hồn thành mơn học, khơng có lời hướng dẫn, kinh nghiệm thực tiễn thầy nhóm khó hồn thiện hồn thành thời hạn Một lần nữa, nhóm thực xin cảm ơn thầy! Nhóm thực xin gửi cảm ơn đến bạn khóa cung cấp nhiều thơng tin kiến thức hữu ích giúp cho nhóm hồn thiện đề tài Khoảng thời gian có hạn, với kiến thức cịn hạn chế cịn nhiều bỡ ngỡ khác thiếu sót điều khơng thể tránh khỏi nên nhóm mong nhận ý kiến đóng góp quý báu Thầy để kiến thức nhóm thực hồn thiện ứng dụng sau Nhóm thực xin chân thành cảm ơn! TP Hồ Chí Minh, tháng năm 2020 Sinh viên đại diện (Ký ghi họ tên) …………………… iv MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP i PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iii LỜI CẢM ƠN iv DANH MỤC BẢNG x DANH MỤC HÌNH ẢNH xii CHƯƠNG 1: TỔNG QUAN 1 Giới thiệu đề tài Lý chọn đề tài Mục đích đề tài Phạm vi nghiên cứu Phương pháp nghiên cứu CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2.1 Khảo sát trạng 2.1.1 Ứng dụng English Pop Quiz 2.1.2 Ứng dụng Quizlet 2.1.3 Ứng dụng Takoboto: Japanese Dictionary 2.1.4 Kết luận từ khảo sát CHƯƠNG 3: CƠ SỞ LÝ THUYẾT 3.1 React Native 3.1.1 React Native gì? 3.1.2 Ứng dụng Hybrid 3.1.3 Ứng dụng Native 3.1.4 Tính React Native 11 3.1.5 Kiến trúc React Native 13 v 3.1.6 Threading Model React Native 14 3.1.7 Chế độ Development React Native 15 3.2 NodeJS 16 3.2.1 Giới thiệu NodeJS 16 3.2.2 Nguồn gốc NodeJS 16 3.2.3 Các khái niệm NodeJs 16 3.3 MongoDB 20 3.3.1 Giới thiệu NoSQL 20 3.3.2 MongoDB gì? 21 3.3.3 Các tính Mongodb 22 3.3.4 Ưu nhược điểm Mongodb 23 3.4 Docker 24 3.4.1 Vì nên sử dụng: 24 3.4.2 Quá trình hình thành: 25 3.4.3 Container gì? 27 3.3.4 Các câu lệnh Docker? [3] 29 3.5 Redis 30 3.5.1 Redis gì? 30 3.5.2 Các ứng dụng Redis 30 3.5.3 Các kiểu liệu Redis 31 CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG 35 4.1 Mơ hình hố u cầu 35 4.2 Thiết kế liệu 36 4.2.1 Lược đồ sở liệu 36 4.2.2 Mô tả bảng liệu 36 vi 4.2.3 Các ràng buộc liệu 37 4.2.4 Luồng xử lý ứng dụng 37 Use case – Register 41 Use case – Login 42 Use case – Logout 42 Use case – Join room 43 Use case – Learn by quiz 43 Use case – Add course 44 Use case – Remove course 45 Use case – Update course 45 Use case – View course 46 Use case 10 - Flashcards 46 Use case 11 – Learn vocabulary 47 Use case 12: Topic 47 Use case 13: View detail 48 Use case 14: Learn topic 48 Use case 15: View video 49 Use case 16: View news 49 Use case 17: View information 50 Use case 18: Update avatar 50 Use case 19: Update username 51 4.3 Thiết kế giao diện 52 vii 4.3.1 Màn hình (chưa đăng nhập) 52 4.3.2 Màn hình đăng kí 53 4.3.3 Màn hình đăng nhập 54 4.3.4 Màn hình (đã đăng nhập) 55 4.3.5 Giao diện bảng ký tự (alphabet) 57 4.3.6 Giao diện học phần video 58 4.3.7 Giao diện xem tin tức 59 4.3.8 Giao diện hồ sơ (profile) người dùng 60 4.3.9 Giao diện chơi game với người dùng khác (chọn chủ đề) 61 4.3.10 Giao diện học phần mà người dùng tạo 62 4.3.11 Giao diện chi tiết học phần chọn 63 4.3.12 Giao diện học (học phần chọn) 64 4.3.13 Giao diện danh sách chủ đề (học từ vừng theo chủ đề) 65 4.3.14 Giao diện chi tiết danh sách từ vựng chủ đề chọn 66 4.3.15 Giao diện học từ vựng theo chủ đề cách chơi game 67 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 68 5.1 Cài đặt 68 5.1.1 Expo (React Native) 68 5.1.2 Docker 70 5.2 Kiểm thử 73 CHƯƠNG 6: KẾT LUẬN 75 6.1 Kết đạt 75 viii 6.2 Ưu điểm nhược điểm ứng dụng: 75 6.2.1 Ưu điểm: 75 6.2.2 Nhược điểm 75 6.3 Đề xuất hướng phát triển: 76 TÀI LIỆU THAM KHẢO 77 ix DANH MỤC BẢNG Bảng 1: Danh sách yêu cầu phần mềm 39 Bảng 2: Use case - Register 41 Bảng 3: Use case - Login 42 Bảng 4: Use case - Logout 42 Bảng 5: Use case - Join room 43 Bảng 6: Use case - Learn Topic, Vocabulary 43 Bảng 7: Use case - Add Course 44 Bảng 8: Use case - Remove course 45 Bảng 9: Use case - Update Course 45 Bảng 10: Use case - View Course 46 Bảng 11: Use case 10 - Flashcards 46 Bảng 12: Use case 11 - Learn vocabulary 47 Bảng 13: Use case 13 - View detail 48 Bảng 14: Use case 14 - Learn topic 48 Bảng 15: Use case 15 - View video 49 Bảng 16: Use case 16 - View news 49 Bảng 17: Use case 17 - View information 50 Bảng 18: Use case 18 - Update Avatar 50 Bảng 19: Use case 19 - Update username 51 Bảng 20: Các thuộc tính hình đăng nhập 52 Bảng 21: Các thuộc tính đăng ký 53 Bảng 22: Các thuộc tính đăng nhập 54 Bảng 23: Các thuộc tính trang chủ (đã đăng nhập) 56 Bảng 24: Giao diện bảng ký tự (alphabet) 57 Bảng 25: Các thuộc tính bảng ký tự 57 Bảng 26: Các thuộc tính học phần video 58 x Bảng 27: Các thuộc tính xem tin tức 59 Bảng 28: Các thuộc tính phần hồ sơ người dùng 60 Bảng 29: Thuộc tính phần giao diện chọn chủ đề 61 Bảng 30: Các thuộc tính phần danh sách học phần tạo 62 Bảng 31: Các thuộc tính giao diện học (học phần chọn) 64 Bảng 32: Các thuộc tính giao diện từ vựng theo chủ đề 66 Bảng 33: Các thuộc tính giao diện học từ vựng theo chủ đề 67 xi DANH MỤC HÌNH ẢNH Hình 1: Giao diện ứng dụng Takoboto Hình 2: Phân biệt ứng dụng native hybrid [1] Hình 3: Hybrid Native Hình 4: Android, IOS Window Phone 10 Hình 5: Menu develop ứng dụng React Native 12 Hình 6: React Native Bridge 14 Hình 7: Ví dụ mẫu Asynchoronous 17 Hình 8: Ví dụ mẫu callback 18 Hình 9: Một đoạn code callback hell 18 Hình 10: Promise 19 Hình 11: Single Promise 19 Hình 12: Multiple Promise 19 Hình 13: Async/await 20 Hình 14: Một đoạn code query MongoDB 21 Hình 15: Tổng quan máy chủ vật lý [5] 25 Hình 16: Sơ đồ cấu trúc Docker [5] 26 Hình 17: Tổng quan cấu trúc redis [4] 30 Hình 18: Biểu đồ tổng quát 35 Hình 19: Lược đồ CSDL ứng dụng 36 Hình 20: Đăng Nhập 37 Hình 21: Học từ vựng 38 Hình 22: Lược đồ use case ứng dụng 40 Hình 23: Use case add course 44 Hình 24: Use case 12 – Topic 47 Hình 25: Màn hình (chưa đăng nhập) 52 Hình 26: Màn hình đăng kí 53 xii 4.3.12 Giao diện học (học phần chọn) Hình 36: Học học phần tạo STT Loại Ý nghĩa Button Huỷ học (phần học phần này) Button Chọn đáp án để qua câu Bảng 31: Các thuộc tính giao diện học (học phần chọn) 64 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ủ đề STT Loại Button Ý nghĩa Chọn học phần cần học Hình 38: Các thuộc tính giao diện chọn học từ vựng theo chủ đề 65 4.3.14 Giao diện chi tiết danh sách từ vựng chủ đề chọn Hình 39: Danh sách từ vựng chủ đề chọn STT Loại Ý nghĩa Button Quay danh sách chủ đề Button Học danh sách từ vựng Button Phát âm từ vựng Bảng 32: Các thuộc tính giao diện từ vựng theo chủ đề 66 4.3.15 Giao diện học từ vựng theo chủ đề cách chơi game Hình 40: Học từ vựng theo chủ đề STT Loại Ý nghĩa Button Quay danh sách từ vựng cần học Button Chọn đáp án để qua câu Bảng 33: Các thuộc tính giao diện học từ vựng theo chủ đề 67 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 5.1 Cài đặt 5.1.1 Expo (React Native) + Để cài đặt Expo 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 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 68 Hình 42: Các cách cài đặt Expo Sau 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 69 5.1.2 Docker + Cài đặt cho window Ban đầu vào link https://www.docker.com/get-started Sau thấy phần download Docker cho Developer Tạo tài khoản download Sau download cài đặt bình thường Sau đăng nhập vào https://hub.docker.com/ để tạo repository để lưu image Hình 44: Trang chủ docker Sau cài xong khởi động Start với ứng dụng Docker for Desktop Và chạy thành cơng có biểu tượng Docker is Running Tray Icon: 70 Hình 45: Docker running window Hãy chạy câu lệnh docker info để xem thông tin, hiển thị cài thành cơng: Hình 46: Xem thơng tin cài đặt docker + Cài đặt cho macOS Đối với macOS dễ dàng hơn, cần download cài từ trang chủ , xong cài đặt xong: 71 Hình 47: Cài đặt docker window Khi cài thành công thị trạng thái is running Hình 48: Docker running MacOS 72 Khi cài đặt docker thành công chạy lệnh source env-dev.sh && docker-compose up để chạy source backend 5.2 Kiểm thử • Trình bày test case: + Test case login: check màu sắc, font size, color, responsive ứng dụng tất thiết bị + Test case game học từ vựng theo từ theo topic: chọn xác chuyển tiếp sang câu tiếp, responsive giao diện tất thiết bị + Test case flash-card: Check phát âm, kéo thẻ flash card sang flash card + Test case tạo học phần: Check tạo học phần học phần với phần trở lên tạo khố học thành cơng STT Action Inputs Login facebook Click nút login facebook trang login Chức Click chơi đáp game học án đưa từ vựng theo topic chọn Expected Output Thành công chuyển đến trang trủ, tài khoản khơng hợp lệ báo đăng nhập lại Click vào đáp án với câu hỏi đưa ra, chọn sai đáp án mạng (3 mạng), hết mạng thua, Actual Output Đúng với Expected Output Test Devices iPhone Test Result Đạt Đúng với expected output iPhone, Android Chưa tối ưu perfor mance Comments 73 Chức học flash card từ vựng tạo Click vào học phần chọn Tạo học phần, xố học phần Giao diện hình Nhập vào tên học phần, mô tả học phần, danh sách từ vựng nghĩa học phần đó, để xố học phần chọn học phần xố kéo sang trái, button xoá hiển thị click vào button xoá Click vào chức để test giao diện ứng dụng, responsive hình, kích thước có chuẩn kích cỡ devices chọn sang câu hỏi Hiển thị flash card từ vựng học phần đó, click vào nghĩa từ vựng kéo sang flash card Nhập vào từ vựng nghĩa nó, click tạo tạo học phần, có lỗi thơng báo lỗi Test giao diện responsive hình Đúng với expected output iPhone, Android Đạt Đúng với expected output iPhone, Android Đạt Đúng với expected output IOS Đạt 74 CHƯƠNG 6: KẾT LUẬN 6.1 Kết đạt Sau thời gian nghiên cứu thực hiện, đề tài nhóm hồn thành mục tiêu theo tiến độ tự đặt Mục tiêu thực đề tài nhằm tìm hiểu cơng nghệ React Native, Node JS, Socket,… ứng dụng cơng nghệ nhằm tạo ứng dụng đóng góp cho cộng đồng, cụ thể với tính sau: • Học từ vựng theo chủ đề, course, học theo flashcards • Tính tạo học phần với tự vựng cần ghi nhớ • Tính vừa học vừa chơi theo dạng quiz • Đọc tin tức tìm hiểu văn hóa Nhật Bản • Học video với lộ trình cụ thể, đoạn hội thoại đa dạng 6.2 Ưu điểm nhược điểm ứng dụng: 6.2.1 Ưu điểm: + Performance tốt + UI thân thiện với người dùng, responsive đầy đủ thiết bị + Học flashcard + Vừa chơi vừa học với tính quiz + Cung cấp video đoạn hội thoại theo chủ đề 6.2.2 Nhược điểm Nhóm hoàn thành phần chức cần thiết ứng dụng Tuy nhiên, lực thân thời gian có hạn, đề tài khơng tránh khỏi sai sót, cịn hạn chế chức Nhược điểm: + Chưa cung cấp chủ đề theo dạng Alphabet + Lượng từ vựng, video hạn chế 75 6.3 Đề xuất hướng phát triển: Hiện nay, ứng dụng hướng đến việc lưu lịch sử học người dùng tính hỗ trợ liên kết với người dùng khác, nên hướng phát triển nhóm là: + Lưu vết (tracking) lịch sử học người dùng + Share khoá học, chủ đề cho người dùng khác (Facebook, Twitter,…) + Kết nối nhiều ứng dụng với + Chat với nhau, support cho trình học 76 TÀI LIỆU THAM KHẢO [1] https://viblo.asia/p/tim-hieu-ve-native-app-va-hybrid-app-3P0lPnPmKox [2] https://mongoosejs.com/docs/guide.html [3] https://docker-ghichep.readthedocs.io/en/latest/ghichep-lenh-docker/ [4] https://redis.io/documentation [5] https://viblo.asia/p/docker-chua-biet-gi-den-biet-dung-phan-1-lich-suByEZkWrEZQ0 Lược đồ EditAudio 77 ... định làm app học tiếng Nhật với mong muốn để cải thiện thiếu sót ứng dụng khác, đồng thời phát triển cho ứng dụng nhiều người biết đến Mục đích đề tài Xây dựng ứng dụng học tiếng Nhật với mong... ứng dụng học tiếng Nhật tảng IOS, sử dụng công nghệ ưa thích MERN stack, ứng dụng thiết kế phù hợp với tất hình di động, giao diện thân thiện, dễ sử dụng, performance tốt, đề tài xây dựng hướng... sát ứng dụng học tiếng Nhật google play (android) app store (ios) tập trung chủ yếu vào ứng dụng liên quan đến học ngôn ngữ Phương pháp nghiên cứu + Sử dụng phân tích ưu nhược điểm ứng dụng +