Xây dựng website học tiếng nhật

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 WEBSITE HỌC TIẾNG NHẬT GVHD: TRẦN CÔNG TÚ SVTH:HỨA VĂN LÂM MSSV:16110133 SVTH:NGUYỄN VIỆT HỒNG MSSV:16110076 SKL007069 Tp Hồ Chí Minh, tháng 07/2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE HỌC TIẾNG NHẬT SVTH : Khóa : Ngành : GVHD : Tp Hồ Chí Minh, tháng 07 / 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT CỘNG HÒA XÃ HỘI CHỦ NGHĨA TP HỒ CHÍ MINH KHOA ĐT CHẤT LƯỢNG CAO  NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP Họ tên SV: Hứa Văn Lâm MSSV: 16110133 Họ tên SV: Nguyễn Việt Hồng MSSV: 16110076 Chun ngành: Cơng nghệ phần mềm Tên đề tài: Xây dựng Website học tiếng Nhật Các số liệu, tài liệu ban đầu: Xây dựng từ Tiểu luận chuyên ngành Nội dung thực đề tài: Xây dựng Website học tiếng Nhật Đề tài phát triển từ tiểu luận chuyên ngành, nhiệm vụ cụ thể khóa luận sau: - Hồn thiện tính có như: Đăng nhập, đăng ký, người dùng tự tạo khóa học, học làm kiểm tra theo khóa học, học mục thử thách - Thêm chức mới: Cho người dùng: o Xây dựng bảng chữ Alphabet o Chức quên mật o Lưu lại lịch sử, tiến trình người học khóa học o Chỉnh sửa khóa học người dùng o Bình luận thử thách hệ thống o Người dùng báo cáo vi phạm người dùng khác o Kết bạn o Nhắn tin o Xem video giảng hệ thống Cho người quản lý: o Quản lý người dùng: khóa tài khoản người dùng o Quản lý thử thách: tạo, chỉnh sửa xóa o Quản lý chủ đề từ vựng: tạo, chỉnh sửa xóa o Quản lý bảng chữ cái: tạo, chỉnh sửa xóa Thời gian thực hiện: Bắt đầu từ 09/02/2020 đến 30/06/2020 (Ký ghi rõ họ tên) 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 1: Hứa Văn Lâm MSSV 1: 16110133 Họ tên Sinh viên 2: Nguyễn Việt Hoàng MSSV 2: 16110076 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng Website học tiếng Nhật Họ tên Giáo viên hướng dẫn: ThS.Trần Công Tú NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ư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) 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 1: Hứa Văn Lâm MSSV 1: 16110133 Họ tên Sinh viên 2: Nguyễn Việt Hồng MSSV 2: 16110076 Ngành: Cơng nghệ Thông tin Tên đề tài: Xây dựng Website học tiếng Nhật Họ tên Giáo viên hướng dẫn: ThS.Trần Công Tú NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ư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 phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn đến thầy Trần Cơng Tú tận tình hướng dẫn, giúp đỡ hỗ trợ suốt q trình làm khóa luận tốt nghiệp Chúng em xin tri ân tất thầy cô dạy dỗ, truyền kiến thức đầy quý báu cho chúng em Với lượng thời gian kiến thức có hạn thân chúng em, khóa luận khơng tránh khỏi có sai xót Chúng em mong nhận đóng góp cảm thơng từ quý thầy cô Một lần chúng em xin chân thành cảm ơn! TP Hồ Chí Minh, tháng năm 2020 Nhóm sinh viên thực Hứa Văn Lâm Nguyễn Việt Hoàng MỤC LỤC NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN .iv PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN v LỜI CẢM ƠN vi MỤC LỤC vii DANH MỤC VIẾT TẮT ix MỤC LỤC HÌNH ẢNH x MỤC LỤC BẢNG xiii GIỚI THIỆU 1 Tính cấp thiết đề tài Mục tiêu đề tài NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Tổng quan React 2 Tổng quan NodeJS Tổng quan ExpessJS Tổng quan MongoDB CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG Trang https://www.nhk.or.jp/lesson/vietnamese/learn/list/ Trang https://www.duolingo.com/learn 10 Trang http://mina.mazii.net/ 12 Kết luận khảo sát 13 CHƯƠNG 3: TIẾP NHẬN, PHÂN TÍCH YẾU CẦU VÀ THIẾT KẾ CSDL 15 Usecase Diagram 15 Mô tả chi tiết usecase 17 Sơ đồ luồng liệu 35 Thiết kế CSDL 37 Mô tả CSDL chi tiết 37 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 40 Thiết kế giao diện xử lý 40 Sequence Diagram cho xử lý 67 CHƯƠNG 5: TEST 70 KẾT LUẬN 74 TÀI LIỆU THAM KHẢO 76 DANH MỤC VIẾT TẮT MVC: Model-View-Controller DOM: Document Object Model HTML: Hypertext Markup Language JSX: Javascrip Extensible Markup Language JS: Javascrip API: Application Programming Interface HTTP: Hypertext Transfer Protocal MIT: Massachusetts Institute of Technology URL: Uniform Resource Locator CSDL: Cơ sở liệu JSON: Javascrip Object Notation Sequence Diagram cho xử lý 2.1 Đăng nhập Hình 57 Sequence login 2.2 Xem thơng tin page topic Hình 58 Sequence topic 67 2.3 Đăng ký Hình 59 Sequence register 2.4 Create Course Hình 60 Sequence create course 68 2.5 Learn topic Hình 61 Learn topic 69 CHƯƠNG 5: TEST Nhóm thực số test case trang web, rút kết sau: Test case ID Test case de Kiểm tra đăn REG_01 tài khoản Kiểm tra đăn REG_02 phần xác nhậ không k Kiểm tra đăn REG_03 email, tên tài mật khẩu, mậ xác nhận rỗn 70 Kiểm tra đăn REG_04 email, tên tài mật khẩu, mậ xác nhận hợp Kiểm tra đăn LOG_01 với tên tài kh mật sai Kiểm tra đăn LOG_02 với tên tài kh mật đún Kiểm tra đăn LOG_03 với tài khoản 71 Kiểm tra tạo CRC_01 với tên khoá trống Kiểm tra tạo CRC_02 với từ m thêm CRC_03 Kiểm tra tạo hợp lệ CRC_04 Để trống thẻ CRC_05 Để trống thẻ 72 CPW_01 CPW_02 Sai mật Sai mật nhận Kiểm tra thay CPW_03 với thôn nhập vào hợp 73 KẾT LUẬN Kết luận Sau tìm hiểu thực đề tài mức độ hồn thành tương đối, nhóm nắm vấn đề: - Hiểu kiến trúc, mơ hình hoạt động phát triển ReactJS - Hiểu kiến trúc, mơ hình hoạt động, thao tác xử lý liệu NodeJS với sở liệu MongoDB - Hiểu kiến trúc, mơ hình hoạt động Socket để xử lý hành động realtime - Hiểu kiến trúc, mơ hình hoạt động React-i18next để xử lý đa ngơn ngữ - Hiểu kiến trúc, mơ hình hoạt động hai thư viện React Component Material-UI Ant Design Xây dựng thành công web app học tiếng Nhật với việc áp dụng cơng nghệ, kiến thức tìm hiểu Ưu điểm Sau thời gian tìm hiểu thực đề tài nhóm, trang web có ưu điểm sau: - Dễ dàng thao tác sử dụng - Người dùng tạo khố học với từ ngữ mà thân muốn luyện tập - Người dùng học từ ngữ, đoạn hội thoại có tính thực tế cao - Người dùng tương tác với người dùng khác, tăng cảm giác hứng thú vào website qua mục bình luận nhắn tin - Sử dụng hai ngôn ngữ song song tiếng Anh tiếng Việt - Triển khai nhiều tảng duyệt web Nhược điểm 74 Do thời gian lực có hạn nên đề tài cịn nhiều thiếu sót, hạn chế Cụ thể sau: - Ứng dụng chưa hoàn thành tất tính đề tính thời gian học, tạo trị chơi cho trang web, chức thơng báo tin tức cho người dùng - Còn vài trải nghiệm chưa tốt trình sử dụng, gây ảnh hưởng đến trải nghiệm người dùng Khó khăn - Còn yếu việc lấy yêu cầu dẫn đến việc khai thác phát triển web hạn chế - Khả phân chia công việc thời gian cho task cịn hạn chế dẫn đến việc khơng hoàn thành số yêu cầu đặt trước Hướng phát triển Khắc phục nhược điểm app, cụ thể là: - Hoàn thành đầy đủ tính chuyển ngơn ngữ tiếng Việt tiếng Anh - Tính thời gian học, lập biểu đồ thống kê thời gian học người dùng - Hoàn thiện tính thơng báo 75 TÀI LIỆU THAM KHẢO [1] https://viblo.asia/p/vong-doi-cua-mot-react-component-RQqKLMRzZ7z [2] https://freetuts.net/nodejs-la-gi-584.html [3] https://viblo.asia/p/phan-1-tim-hieu-express-js-framework-Qbq5Qq7m5D8 [4] https://jobs.hybrid-technologies.vn/blog/mongodb-la-gi/ [5] https://www.duolingo.com/ [6] https://www.nhk.or.jp/ [7] http://mina.mazii.net/ 76 ... nghệ phần mềm Tên đề tài: Xây dựng Website học tiếng Nhật Các số liệu, tài liệu ban đầu: Xây dựng từ Tiểu luận chuyên ngành Nội dung thực đề tài: Xây dựng Website học tiếng Nhật Đề tài phát triển... tạo khóa học, học làm kiểm tra theo khóa học, học mục thử thách - Thêm chức mới: Cho người dùng: o Xây dựng bảng chữ Alphabet o Chức quên mật o Lưu lại lịch sử, tiến trình người học khóa học o Chỉnh... thân Mục tiêu đề tài Xây dựng trang web học tiếng Nhật giúp người dùng có cách tiếp cận với ngôn ngữ nhanh Website cần cung cấp chủ đề học gần gũi với thực tế giúp người dùng học hiệu Các tập, thử