(Đồ án hcmute) xây dựng ứng dụng học tiếng nhật trên nền tảng ios

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 an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên 1: Nguyễn Trung Nghĩa MSSV: 16110168 Họ tên sinh viên 2: Đặng Ngọc Tuấn MSSV: 16110239 Ngành: Công Nghệ Thông Tin Lớp: 16110CL3 Giảng viên hướng dẫn: ThS Trần Công Tú Tên đề tài: Xây dựng ứng dụng học tiếng Nhật tảng IOS Thời gian thực hiện: 03/2020 đến 07/2020 Các số liệu, tài liệu ban đầu: Tiểu luận chuyên ngành Nội dung thực hiện: Phân tích, thiết kế xây dựng ứng dụng học tiếng Nhật tảng IOS Đề tài phát triển lên từ tiểu luận chuyên ngành, nhiệm vụ cụ thể khoá luận sau: + Hồn thiện tính có như: Đăng nhập, đăng kí, thiết kế giao diện người dùng, thêm sửa xoá học phần, học học phần tạo + Tính học video theo lộ trình + Thêm tính chơi game dạng Quiz người dùng với + Cập nhật thêm lượng từ vựng + Cập nhật bảng kí tự alphabet (kanji hiragana) cho ứng dụng + Thêm tính xem tin tức, đọc tin cho ứng dụng TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN (Ký ghi họ tên) (Ký ghi họ tên) an CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên : ………………………… MSSV 1: ………………………………… Họ tên Sinh viên : ………………………… MSSV 2: ………………………………… Ngành: Công nghệ Thông tin Tên đề tài : Họ tên Giáo viên hướng dẫn : NHẬN XÉT Về nội dung đề tài & khối lượng thực : Ưu điểm : Khuyết điểm : Đề nghị cho bảo vệ hay không ? Đánh giá loại : Điểm : ( Bằng chữ: ) TP Hồ Chí Minh, ngày tháng năm 2020 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ii an CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên : ………………………… MSSV 1: ………………………………… Họ tên Sinh viên : ………………………… MSSV 2: ………………………………… Ngành: Công nghệ Thông tin Tên đề tài : Họ tên Giáo viên phản biện: NHẬN XÉT Về nội dung đề tài & khối lượng thực : Ưu điểm : Khuyết điểm : Đề nghị cho bảo vệ hay không ? Đánh giá loại : Điểm : ( Bằng chữ: ) TP Hồ Chí Minh, ngày tháng năm 2020 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) iii an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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 an 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, xoá 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 xoá 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 an 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 hồ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 an 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 an 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 an an ... Xây dựng ứng dụng học tiếng Nhật tảng IOS Thời gian thực hiện: 03/2020 đến 07/2020 Các số liệu, tài liệu ban đầu: Tiểu luận chuyên ngành Nội dung thực hiện: Phân tích, thiết kế xây dựng ứng dụng. .. đị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 muốn... dựng ứ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