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

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 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 MỤC LỤC HÌNH ẢNH Hình Vịng đời React [1] Hình Cấu trúc Express[3] Hình WEB khảo Sát Header Hình WEB khảo Sát Body Hình WEB khảo Sát Footer Hình WEB khảo Sát Header .10 Hình WEB khảo Sát Body 11 Hình WEB khảo Sát Footer 11 Hình WEB khảo sát số .12 Hình 10 WEB khảo sát số 13 Hình 11 Usecase Diagram 15 Hình 12 Register .17 Hình 13 Login 18 Hình 14 Logout 19 Hình 15 View course 19 Hình 16 Create course .20 Hình 17 Delete course .21 Hình 18 Update course 22 Hình 19 Learn course 23 Hình 20 Listen lession .24 Hình 21 View lession 25 Hình 22 Learn lession .25 Hình 23 Play challenge .26 Hình 24 Chose question challenge 27 Hình 25 Comment in challenge 28 Hình 26 Update user 29 Hình 27 View information 30 Hình 28 Add friend 30 Hình 29 Chat .31 Hình 30 Watch lecture clip .32 Hình 31 Practice lecture clip .33 Hình 32 Manage topic .33 Hình 33 Manage challenge 34 Hình 34 Manage user 35 Hình 35 Context Diagram 35 Hình 36 Data Flow Diagram .36 Hình 37 ERD .37 Hình 38 Màn hình đăng nhập 40 Hình 39 Màn hình đăng ký 41 Hình 40 Màn hình trang chủ .43 Hình 41 Màn hình hiển thị khoá học .44 Hình 42 Màn hình flatcard 46 Hình 43 Màn hình học .47 Hình 44 Màn hình viết 49 Hình 45 Màn hình nghe 50 Hình 46 Màn hình chủ đề từ vựng 51 Hình 47 Màn hình từ vựng 52 Hình 48 Màn hình bảng chữ 53 Hình 49 Màn hình thơng tin cá nhân .55 Hình 50 Màn hình tin nhắn .57 Hình 51 Màn hình video 58 Hình 52 Màn hình bảng chữ 59 Hình 53 Màn hình quản lý người dùng .61 Hình 54 Màn hình quản lý thử thách 62 Hình 55 Màn hình quản lý chủ đề từ vựng .64 Hình 56 Màn hình quản lý bảng chữ 65 Hình 57 Sequence login 67 Hình 58 Sequence topic 67 Hình 59 Sequence register 68 Hình 60 Sequence create course .68 Hình 61 Learn topic 69 MỤC LỤC BẢNG Bảng Usecase diagram 15 Bảng Register 17 Bảng Login .18 Bảng Logout 19 Bảng View course 20 Bảng Create course 20 Bảng Delete course 21 Bảng Update course .22 Bảng Learn course 23 Bảng 10 Listen lession 24 Bảng 11 View lesion 25 Bảng 12 Learn lession .26 Bảng 13 Play challenge .26 Bảng 14 Chose question challenge 27 Bảng 15 Comment in challenge 28 Bảng 16 Update user 29 Bảng 17 View information 30 Bảng 18 Add friend 31 Bảng 19 Chat .31 Bảng 20 Watch lecture clip .32 Bảng 21 Practice lecture clip 33 Bảng 22 Manage topic 34 Bảng 23 Manage challenge .34 Bảng 24 Manage user 35 Bảng 25 CSDL Chi tiết .37 Bảng 26 Các đối tượng hình đăng nhập 40 Bảng 27 Các đối tượng hình đăng ký 41 Bảng 28 Các đối tượng hình trang chủ .43 Bảng 29 Các đối tượng hình trang hiển thị khố học 45 Bảng 30 Màn hình flatcard 46 Bảng 31 Màn hình học 48 Bảng 32 Màn hình viết 49 Bảng 33 Màn hình nghe 50 Bảng 34 Màn hình chủ đề từ vựng 52 Bảng 35 Màn hình từ vựng .53 Bảng 36 Màn hình bảng chữ .54 Bảng 37 Màn hình thông tin cá nhân 55 Bảng 38 Màn hình tin nhắn .57 Bảng 39 Màn hình video 59 Bảng 40 Màn hình bảng chữ .60 Bảng 41 Màn hình quản lý người dùng 61 Bảng 42 Màn hình quản lý thử thách 63 Bảng 43 Màn hình quản lý chủ đề từ vựng .64 Bảng 44 Màn hình quản lý bảng chữ 66 GIỚI THIỆU Tính cấp thiết đề tài Hiện nay, điều kiện kinh tế, văn hóa – xã hội phát triển, đặc biệt ảnh hưởng hội nhập kinh tế quốc tế tồn cầu hóa ngoại ngữ với tin học giữ vai trị vơ quan trọng Có thể nói Tiếng Anh ngoại ngữ thiếu cá nhân, tổ chức, doanh nghiệp Biết tiếng Anh có lẽ đủ với đa số cá nhân, nhiên biết thêm nhiều ngơn ngữ khác thêm lợi mơi trường cạnh tranh tất ngành nghề Và tiếng Nhật lựa chọn hồn hảo Lý tăng thêm hội việc làm, mức lương thưởng hấp dẫn hơn, tìm hiểu văn hoá người xứ sở hoa anh đào Vì để có cách tự chủ việc học tập tiếng Nhật ta cần ứng dụng để thực hóa điều này, mà giúp ta phát triển vốn ngơn ngữ 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ử thách giúp người dùng ôn tập lại kiến thức học Ngồi ra, website cần có chức giúp người dùng tự tạo khố học thân mình, người dùng tạo từ ngữ mà thân muốn thực hành thường xuyên, khoá học cung cấp phần tự kiểm tra NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Tổng quan React 1.1 Giới thiệu React React thư viện javascript mã nguồn mở phát triển Facebook, mục đích tạo ứng dụng web nhanh hơn, hấp dẫn hiệu với khối lượng mã nguồn tối thiểu Sức mạnh ReactJS đến từ việc chia web thành thành phần riêng lẻ thay làm việc toàn ứng dụng web, ReactJS cho phép developer chia giao diện người dùng phức tạp thành thành phần đơn giản Ngoài ra, chúng sử dụng kết hợp với thư viện JavaScript hay framework khác Angular MVC 1.2 Các khái niệm React 1.2.1 Virtual dom Là object Javascript, object chứa đầy đủ thông tin cần thiết để tạo DOM, liệu thay đổi tính tốn thay đổi object tree thật, điều giúp tối ưu hoá việc re-render DOM tree thật 1.2.2 Component  React xây dựng component, component nhỏ sử dụng, kết hợp với tạo giao diện cụ thể  Chúng ta tái sử dụng component nhiều nơi, với trạng thái thuộc tính khách nhau, component có component nhỏ  Trong component React hàm render quan trọng Nó hàm xử lý việc tạo thẻ HTML chứng tỏ cho khả xử lý qua VirtualDOM Mọi thay đổi liệu thời điểm VirtualDOM xử lý update tức Sơ đồ biến cố: 1.17 Màn hình quản lý thử thách Ý nghĩa: quản lý danh sách thử thách Hình 54 Màn hình quản lý thử thách 62 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 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ừ khoá tìm kiếm 64 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 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 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 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 phần xác nhận mật không khớp Xuất thông báo “Mật  Thực đăng ký 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  Truy cập trang đăng ký tài khoản Kiểm tra đăng ký với REG_04 email, tên tài khoản, Xuất thông báo đăng ký tài  Thực đăng ký 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 mật sai  Nhấn button “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 mật  Nhập tên tài khoản LOG_03 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ị khố PASS khẩu” thành cơng  Nhấn button “Login” Kiểm tra đăng nhập khoản mật PASS vui lòng liên hệ admin” 71  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ừ thêm  Tạo từ 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  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 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 ... 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ử... khảo sát Sau phần khảo sát trang web học tiếng Nhật chúng em rút yếu tố cần có mà thực tạo website học tiếng Nhật: - Cần có liệu bắt buộc phải có để người dùng học 13 - Cần có thêm khối lượng liệu... ngành nghề Và tiếng Nhật lựa chọn hồn hảo Lý tăng thêm hội việc làm, mức lương thưởng hấp dẫn hơn, tìm hiểu văn hố người xứ sở hoa anh đào Vì để có cách tự chủ việc học tập tiếng Nhật ta cần ứng