(Đồ án hcmute) 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 HOÀNG MSSV:16110076 SKL 0 Tp Hồ Chí Minh, tháng 07/2020 an 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 : HỨA VĂN LÂM 16110133 NGUYỄN VIỆT HỒNG 16110076 Khóa : KHĨA 2016 Ngành : CƠNG NGHỆ THƠNG TIN GVHD : THS TRẦN CƠNG TÚ Tp Hồ Chí Minh, tháng 07 / 2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA ĐT CHẤT LƯỢNG CAO  Độc lập – Tự – Hạnh phúc  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 Hoàng MSSV: 16110076 Chuyên 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ý: an 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 TP.HCM, ngày… tháng…năm… TRƯỞNG KHOA ĐT CHẤT LƯỢNG CAO (Ký ghi rõ họ tên) an GIẢNG 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 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 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an năm 2020 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 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 Giáo viên phản biện (Ký & ghi rõ họ tên) an năm 2020 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ừ q thầy 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 an 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 .6 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG .8 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 an 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 an 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 an Bảng 42 Màn hình quản lý thử thách STT Loại Ý nghĩa Button Hiển thị modal tạo thử thách Button Button Chỉnh sửa thử thách chọn Button Xoá thử thách chọn Ghi Hiển thị dialog để nhập từ khố tìm kiếm Sơ đồ biến cố: 63 an 1.18 Màn hình quản lý chủ đề từ vựng Ý nghĩa: quản lý danh sách chủ đề từ vựng Hình 55 Màn hình quản lý chủ đề từ vựng Bảng 43 Màn hình quản lý chủ đề từ vựng STT Loại Ý nghĩa Button Hiển thị modal tạo chủ đề học Button Button Chỉnh sửa chủ đề học chọn Button Xoá chủ đề học chọn Ghi Hiển thị dialog để nhập từ khố tìm kiếm 64 an Sơ đồ biến cố: 1.19 Màn hình quản lý bảng chữ Ý nghĩa: quản lý danh sách bảng chữ Hình 56 Màn hình quản lý bảng chữ 65 an Bảng 44 Màn hình quản lý bảng chữ STT Loại Ý nghĩa Button Tạo chữ Button Chỉnh sửa chữ Button Xoá chữ Ghi Sơ đồ biến cố: 66 an 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 an 2.3 Đăng ký Hình 59 Sequence register 2.4 Create Course Hình 60 Sequence create course 68 an 2.5 Learn topic Hình 61 Learn topic 69 an CHƯƠNG 5: TEST Nhóm thực số test case trang web, rút kết sau: Test case ID Test case description Test steps Expected Result Status  Truy cập vào trang đăng ký tài khoản REG_01 Kiểm tra đăng ký với tài khoản tồn Xuất thông báo lỗi “Tài  Thực đăng ký khoản email/ tên tài khoản với tên người dùng sử tài khoản dụng” PASS email tồn  Truy cập vào trang đăng ký tài khoản Kiểm tra đăng ký với REG_02 báo “Mật  Thực đăng ký phần xác nhận mật không khớp Xuất thông xác nhận phải tài khoản với phần giống mật xác nhận mật khẩu !!!” PASS không khớp  Truy cập vào trang đăng ký tài khoản Kiểm tra đăng ký với REG_03 email, tên tài khoản,  Thực đăng ký Xuất thông mật khẩu, mật email, tên tài báo “Không xác nhận rỗng khoản, mật khẩu, bỏ trống” PASS mật xác nhận rỗng 70 an  Truy cập trang đăng ký tài khoản Kiểm tra đăng ký với REG_04 báo đăng ký tài  Thực đăng ký email, tên tài khoản, Xuất thông khoản thành công mật khẩu, mật với email, tên tài chuyển đến xác nhận hợp lệ khoản, mật khẩu, hình đăng mật xác nhận nhập PASS hợp lệ Kiểm tra đăng nhập LOG_01  Nhập tên tài khoản Xuất thông mật sai báo “Sai tên tài với tên tài khoản  Nhấn button mật sai “Login”  Nhập tên tài khoản Kiểm tra đăng nhập LOG_02 mật với tên tài khoản “Login”  Nhập tên tài khoản Kiểm tra đăng nhập Xuất thơng báo đăng nhập hình trang chủ Xuất thơng báo lỗi “tài khoản khố bị khoá,  Nhấn button “Login” PASS chuyển đến mật bị với tài khoản bị khoá PASS khẩu” thành công  Nhấn button mật LOG_03 khoản mật PASS vui lòng liên hệ admin” 71 an  Truy cập trang tạo khoá học Kiểm tra tạo khoá học CRC_01 với tên khoá học bị bỏ Xuất thông báo “Không  Bỏ trống tên khoá trống học nhấn nút bỏ trống tên khoá PASS học” “tạo”  Truy cập trang tạo Kiểm tra tạo khoá học CRC_02 khoá học với từ  Tạo từ thêm nhấn nút “tạo”  Truy cập trang tạo khoá học CRC_03 Kiểm tra tạo khoá học hợp lệ phải có Để trống thẻ từ  Xuất thơng báo tạo khố học từ mới, nghĩa hình danh sách từ(2 từ trở lên) khố học khoá học Để trống thẻ nghĩa  PASS Xuất thơng báo lỗi “khơng Nhập tên khố học, để trống thẻ để trống thẻ từ từ mới”  Truy cập trang tạo PASS từ”  Nhập tên khoá học, chuyển sang khoá học CRC_05 báo “Khoá học thành công  Truy cập trang tạo CRC_04 Xuất thông PASS Xuất thông báo lỗi “không Nhập tên khoá học, để trống thẻ để trống thẻ nghĩa nghĩa” PASS 72 an  Truy cập trang thông tin cá nhân  Nhập sai mật CPW_01 Sai mật tại  Nhập mật Xuất thông báo lỗi “Mật không PASS đúng” mật xác nhận  Truy cập trang CPW_02 Sai mật xác nhận thông tin cá nhân Xuật thông báo lỗi “Mật  Nhập sai mật xác nhận xác nhận không khớp” PASS  Truy cập trang thông tin cá nhân Kiểm tra thay đổi mật CPW_03 với thông tin nhập vào hợp lệ  Nhập mật Xuật thông báo lỗi “Thay đổi tại, mật mật thành mật công” PASS xác nhận 73 an 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 khoá 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 an 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 hồ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 hồ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à: - Hồ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 - Hồn thiện tính thơng báo 75 an 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 an S an K L 0 ... 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... 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ử