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

Tính cấp thiết của đề tài

Trong bối cảnh hội nhập kinh tế quốc tế và toàn cầu hóa hiện nay, việc học ngoại ngữ, đặc biệt là tiếng Anh, trở nên vô cùng quan trọng đối với cá nhân, tổ chức và doanh nghiệp Tuy nhiên, việc biết thêm tiếng Nhật sẽ tạo ra nhiều cơ hội việc làm hấp dẫn hơn, cùng với mức lương cao hơn và cơ hội tìm hiểu văn hóa Nhật Bản Để tự chủ trong việc học tiếng Nhật, việc sử dụng một ứng dụng hỗ trợ học tập là cần thiết để phát triển vốn ngôn ngữ của bản thân.

Mục tiêu của đề tài

Xây dựng một trang web học tiếng Nhật giúp người dùng tiếp cận ngôn ngữ nhanh chóng và hiệu quả Website nên cung cấp các chủ đề gần gũi với thực tế, cùng với các bài tập và thử thách để ôn tập kiến thức Bên cạnh đó, tính năng cho phép người dùng tự tạo khóa học cá nhân, trong đó họ có thể chọn từ ngữ muốn thực hành thường xuyên và bao gồm phần tự kiểm tra, sẽ nâng cao trải nghiệm học tập.

CƠ SỞ LÝ THUYẾT

Tổng quan React

React là thư viện JavaScript mã nguồn mở do Facebook phát triển, nhằm mục đích xây dựng các ứng dụng web nhanh chóng, hấp dẫn và hiệu quả với lượng mã nguồn tối thiểu.

Sức mạnh của ReactJS nằm ở khả năng phân chia ứng dụng web thành các thành phần độc lập Thay vì xử lý toàn bộ giao diện người dùng phức tạp, ReactJS cho phép lập trình viên tách biệt thành các thành phần đơn giản hơn, giúp dễ dàng quản lý và phát triển Hơn nữa, ReactJS có thể kết hợp hiệu quả với các thư viện JavaScript hoặc framework khác như Angular và MVC.

1.2 Các khái niệm cơ bản trong React

Mỗi object trong Javascript chứa thông tin cần thiết để tạo ra một DOM, và khi dữ liệu thay đổi, nó sẽ tính toán sự khác biệt giữa object và cây DOM thực Quá trình này giúp tối ưu hóa việc tái tạo lại cây DOM thực, nâng cao hiệu suất của ứng dụng.

 React được xây dựng bằng các component, các component nhỏ sẽ được sử dụng, kết hợp với nhau tạo ra một giao diện cụ thể.

Chúng ta có khả năng tái sử dụng một component ở nhiều vị trí khác nhau, với các trạng thái và thuộc tính đa dạng Trong một component, có thể chứa các component nhỏ hơn để tạo nên cấu trúc linh hoạt và hiệu quả.

Hàm render trong các component của React đóng vai trò quan trọng nhất, vì nó chịu trách nhiệm tạo ra các thẻ HTML và thể hiện khả năng xử lý thông qua Virtual-DOM Mọi thay đổi dữ liệu đều sẽ được cập nhật kịp thời, đảm bảo tính năng động và hiệu quả của ứng dụng.

Virtual-DOM xử lý và update ngay tức thì.

1.2.3 Các dạng dữ liệu cơ bản của React

 React có hai dạng dữ liệu là Prop và State, hai dạng này tương đối khó phân biệt nên cần hiểu rõ mục đích sử dụng của từng dạng:

State là dữ liệu cục bộ được quản lý bởi component, chỉ có thể thay đổi trong component đã được khai báo Các component khác không có khả năng truy cập hoặc thay đổi dữ liệu này.

 Prop là thì không bị kiểm soát bởi component Ngược với State thì Prop lại có thể được sử dụng và thay đổi thông qua component khác.

Constructor(props) là phương thức được gọi khi một thể hiện của component được tạo ra, cho phép khởi tạo state cho component và "bind" các hàm của nó Khi cài đặt hàm này, cần khai báo tham số props và gọi super(props) trước tiên Nếu không có yêu cầu cụ thể, không cần cài đặt hàm constructor.

 componentWillMount() o Được gọi trước khi render(). o Dùng để đăng ký các sự kiện toàn cục. o Dựa vào các props để tính toán và set lại state

 render() o Hàm này bắt buộc phải có trong component().

Trong React, hàm render phải trả về một đối tượng JSX duy nhất, có thể bao gồm các đối tượng lồng nhau, nhưng cần có một đối tượng bao gói tất cả Nếu không muốn hiển thị gì, hàm có thể trả về null hoặc false Lưu ý rằng không được gọi setState() trong hàm render hoặc trong các hàm mà hàm render gọi đến, vì điều này sẽ dẫn đến việc gọi lại hàm render và gây ra lặp vô hạn.

Hàm componentDidMount() được gọi ngay sau khi hàm render hoàn tất lần đầu tiên, thường được sử dụng để lấy dữ liệu từ server và cập nhật state để hiển thị dữ liệu Tại thời điểm này, các phần tử đã được tạo ra và có thể tương tác với DOM bằng JavaScript trong hàm này.

 componentWillReceiveProps(nextProps) o Hàm này được chạy khi mà props của component đã được sinh ra có sự thay đổi. o Phải gọi setState() nếu muốn render lại.

 shouldComponentUpdate(nextProps, nextState) o Được gọi trước render. o Trả về true / false Nếu false thì sẽ không render lại Mặc định là true.

Hàm componentWillUpdate(nextProps, nextState) được gọi ngay sau khi shouldComponentUpdate() trả về true Trong hàm này, không nên gọi setState() vì nó chỉ nhằm chuẩn bị cho việc cập nhật đối tượng, không phải tạo ra một cập nhật mới, điều này có thể dẫn đến lặp vô hạn Sau khi hàm này hoàn tất, hàm render sẽ được gọi ngay lập tức.

 componentDidUpdate(prevProps, prevState) o Được gọi ngay sau render() từ lần render thứ 2 trở đi. o Đây cũng là 1 cơ hội để thao tác với các phần tử DOM bằng JS.

 componentWillUnmount() o Được gọi khi 1 component được loại bỏ khỏi DOM.

Thực hiện các thao tác dọn dẹp như huỷ các timer, loại bỏ các phần tử thừa,

Tổng quan NodeJS

NodeJS là một nền tảng mã nguồn mở được phát triển dựa trên Javascript V8 Engine, cho phép xây dựng các ứng dụng web đa dạng như trang video clip, diễn đàn và đặc biệt là các mạng xã hội chuyên biệt.

NodeJS hỗ trợ nhiều hệ điều hành như Windows, Linux và OS X, mang lại lợi thế lớn cho người dùng Nó cung cấp một loạt thư viện phong phú dưới dạng Javascript Module, giúp đơn giản hóa quá trình lập trình và tối ưu hóa thời gian phát triển.

2.2 Các đặc tính của NodeJS

Tất cả các API của NodeJS đều hoạt động theo cơ chế không đồng bộ (non-blocking), cho phép máy chủ chờ đợi phản hồi từ server mà không bị ngắt quãng Điều này giúp di chuyển giữa các API nhanh chóng và hiệu quả, đồng thời sử dụng cơ chế thông báo sự kiện của Node.js để nhận phản hồi theo thời gian thực từ các cuộc gọi API trước đó.

 Realtime: Nodejs xử lý các vấn đề realtime rất tốt

 Chạy rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript

Engine nên việc thực thi chương trình rất nhanh.

Node.js sử dụng mô hình đơn luồng với cơ chế sự kiện lặp, cho phép máy chủ hoạt động không ngăn chặn và mở rộng cao hơn so với các máy chủ truyền thống Điều này giúp Node.js xử lý nhiều yêu cầu đồng thời một cách hiệu quả, vượt trội hơn hẳn so với các máy chủ như Apache HTTP Server, nhờ vào khả năng phục vụ số lượng lớn kết nối mà không bị giới hạn.

 Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu.

 Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License.[2]

Tổng quan ExpessJS

 Express js là một tảng của Nodejs Nó mobile

Framework nhỏ, nhưng linh hoạt được xây dựng trên nền cung cấp các tính năng mạnh mẽ để phát triển web hoặc

Thiết lập các lớp trung gian để xử lý các yêu cầu HTTP, đồng thời định nghĩa router cho phép thực hiện các hành động khác nhau dựa trên phương thức HTTP và URL.

 Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ

 Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn Chứ không làm giảm tốc độ của NodeJS.

Các thành phần tương ứng:

Trong ứng dụng của chúng ta, file app.js chứa các thông tin cấu hình và định nghĩa cần thiết để đảm bảo ứng dụng hoạt động hiệu quả Đồng thời, file package.json quản lý các package cần thiết cho ứng dụng, tương tự như chức năng của file composer.json trong PHP hoặc Ruby on Rails.

 Folder routes: chứa các route có trong ứng dụng

 Folder view: chứa view/template cho ứng dụng

 Folder public chứa các file css, js, images, cho ứng dụng

Tổng quan MongoDB

 MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc nosql

 Là một database hướng tài liệu (document), dữ liệu được lưu dưới dạng document kiểu JSON thay vì bảng như CSDL quan hệ nên truy vấn nhanh

 Với CSDL quan hệ chúng ta có khái niệm bảng, với MongoDB chúng ta sẽ dùng khái niệm collection thay vì bảng

 Các collection trong MongoDB được cấu trúc linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

 MongoDB được phát triển bởi MongoDB Inc và được cấp phép theo Server Side Public License (SSPL).[4]

 Kho lưu định hướng Document: Dữ liệu được lưu trong các tài liệu kiểu JSON.

 Lập chỉ mục trên bất kỳ thuộc tính nào.

 Các truy vấn đa dạng.

KHẢO SÁT HIỆN TRẠNG

Trang https://www.nhk.or.jp/lesson/vietnamese/learn/list/

Một vài hình ảnh của trang web [5]

Hình 3 WEB khảo Sát 1 Header

Hình 4 WEB khảo Sát 1 Body

Hình 5 WEB khảo Sát 1 Footer

Bố cục trang web gồm có 3 phần chính:

- Header: bao gồm tên trang web và thanh menu

- Body: hiển thị danh sách các bài học, thanh bên phải hiển thị các option liên quan, hữu ích dành cho người dùng khi sử dụng web

- Footer: Hiển thị các thông tin thêm về trang web như bài học, bảng chữ cái, liên hệ,

- Khoá học theo các chủ đề

- Học các bảng chữ cái

- Ôn tập, bài tập kiểm tra

- Lọc, tìm kiếm theo chủ đề học Ưu điểm:

- Các chức năng của trang web được thể hiện rõ ràng, phân theo cụm chức năng nên dễ dàng sử dụng, tìm kiếm

- Các bài học được hiển thị theo dạng danh sách card kèm hình ảnh, giúp bài học sinh động dễ hiểu

- Trang web ít có quảng cáo, giúp trải nghiệm người dùng được tốt hơn

- Có thể sử dụng trên điện thoại

- Tốc độ load trang nhanh

- Nội dung hiển thị nhiều

- Không có chức năng đăng nhập/ đăng ký

- Không lưu lại lịch sử kiểm tra khi người dùng làm các bài ôn tập/kiểm tra.

Trang https://www.duolingo.com/learn

Hình 6 WEB khảo Sát 2 Header

Hình 7 WEB khảo Sát 2 Body

Hình 8 WEB khảo Sát 2 Footer

Bố cục trang web gồm có 3 phần chính:

- Body: hiển thị danh sách các bài học, thanh bên phải hiển thị mục tiêu đã đạt được hàng ngày, đăng nhập/đăng ký nếu chưa có tài khoản.

- Footer: Hiển thị các thông tin thêm về trang web.

- Khoá học theo các chủ đề dưới dạng trò chơi.

- Học các bảng chữ cái.

- Ôn tập, bài tập kiểm tra. Ưu điểm:

- Các chức năng của trang web được thể hiện rõ ràng, phân theo cụm chức năng nên dễ dàng sử dụng, tìm kiếm.

- Các bài học được hiển thị theo dạng danh sách card kèm hình ảnh, giúp bài học sinh động dễ hiểu.

- Trang web ít có quảng cáo, giúp trải nghiệm người dùng được tốt hơn.

- Có thể sử dụng trên điện thoại.

- Tốc độ load trang nhanh.

Khi người dùng đăng nhập hoặc đăng ký, thông tin của họ sẽ được lưu trữ Điều này cho phép hệ thống ghi lại các mục tiêu hàng ngày, theo dõi lịch sử bài học và lưu lại lịch sử các bài kiểm tra.

- Các bài học không thể hiện sự thực tế trong cuộc sống hàng ngày.

Trang http://mina.mazii.net/

Hình 9 WEB khảo sát 3 số 1

Hình 10 WEB khảo sát 3 số 2

Bố cục trang web gồm có 3 phần chính

- Phần 3: phần thể hiện nội dung

- Học các bài học dưới dạng từ điển, tự giác học.

- Có phần ôn tập, bài luyện thi Ưu điểm:

- Các chức năng của trang web thể hiện rõ ràng, phân theo từng chức năng

- Thể hiện các đối tượng đơn giản, đơn giản và dễ tiếp xúc với người dùng

- Trang web không có quảng cáo

- Tốc độ load trang nhanh

- Không có phần đăng nhập/đăng ký

- Không lưu lại lịch sử người dùng

Kết luận khảo sát

Sau khi khảo sát các trang web học tiếng Nhật, chúng tôi nhận thấy một số yếu tố quan trọng cần thiết để xây dựng một website học tiếng Nhật hiệu quả Những yếu tố này bao gồm giao diện thân thiện với người dùng, nội dung phong phú và đa dạng, phương pháp giảng dạy sáng tạo, cũng như các công cụ hỗ trợ học tập tương tác Việc tối ưu hóa SEO cũng rất quan trọng để thu hút người học và nâng cao khả năng tiếp cận của website.

- Cần có được những dữ liệu bắt buộc phải có để người dùng có thể học

- Cần có thêm một khối lượng dữ liệu lớn để người dùng có thể nâng cao khả năng của bản thân

- Cần có các bài kiểm tra để người dùng kiểm tra lại những gì đã xem, đã học

- Cần lưu lại lịch sử người dùng để người dùng có thể thấy được bước tiến của mình trong từng lần đăng nhập vào website

- Cần có phần tạo tài khoản để có thể lưu lại lịch sử

- Cần thể hiện nội dung trang web một cách có logic, hướng tới việc đơn giản cho người sử dụng

TIẾP NHẬN, PHÂN TÍCH YẾU CẦU VÀ THIẾT KẾ CSDL

Usecase Diagram

Hình 11 Usecase Diagram Bảng 1 Usecase diagram

Mô tả chi tiết usecase

2 Nhấn vào “you don’t have account”

Sơ đồ luồng dữ liệu

Thiết kế CSDL

Mô tả CSDL chi tiết

THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ

Thiết kế giao diện và xử lý

1.1 Màn hình đăng nhập Ý nghĩa: Người dùng đăng nhập vào trang web

Hình 38 Màn hình đăng nhập Bảng 26 Các đối tượng màn hình đăng nhập

1.2 Màn hình đăng ký Ý nghĩa: Người dùng đăng ký tài khoản để có thể đăng nhập vào trang web

Hình 39 Màn hình đăng ký Bảng 27 Các đối tượng màn hình đăng ký

1.3 Màn hình trang chủ Ý nghĩa: Hiển thị danh sách các tin tức mà quản trị viên sẽ cập nhật đối với trang web như tạo thử thách, chỉnh sửa chủ đề học, …

Hình 40 Màn hình trang chủ

Bảng 28 Các đối tượng màn hình trang chủ

1.4 Màn hình hiển thị khoá học Ý nghĩa: Hiển thị danh sách các khoá học mà bản thân người dùng tự tạo ra

Bảng 29 Các đối tượng màn hình trang hiển thị khoá học

1.5 Màn hình thẻ ghi nhớ trong khoá học Ý nghĩa: Người dùng có thể ôn tập các từ trong khoá học dưới dạng flash card, xem mức độ hoàn thành của khoá học thông qua các từ đã nắm vững và chưa nắm vững Người dùng có thể chỉnh sửa từ mới nếu muốn

Hình 42 Màn hình flatcard Bảng 30 Màn hình flatcard

1.6 Màn hình học trong khoá học Ý nghĩa: Người dùng có thể ôn tập qua phần kiểm tra trắc nghiệm

1.7 Màn hình viết trong khoá học Ý nghĩa: Người dùng có thể ôn tập qua phần kiểm tra nhập nghĩa của từ

Hình 44 Màn hình viết Bảng 32 Màn hình viết

1.8 Màn hình nghe trong khóa học Ý nghĩa: Người dùng có thể ôn tập qua phần kiểm tra chính tả

Hình 45 Màn hình nghe Bảng 33 Màn hình nghe

1.9 Màn hình chủ đề từ vựng Ý nghĩa: Hiển thị danh sách các chủ đề từ vựng mà hệ thống cung cấp cho người dùng

Hình 46 Màn hình chủ đề từ vựng

Bảng 34 Màn hình chủ đề từ vựng

1.10 Màn hình chi tiết chủ đề từ vựng Ý nghĩa: Hiển thị chi tiết các từ ngữ có trong chủ đề học

Hình 47 Màn hình từ vựng

Bảng 35 Màn hình từ vựng

1.11 Màn hình bảng chữ cái Ý nghĩa: Hiển thị bảng chữ cái tiếng Nhật

Hình 48 Màn hình bảng chữ cái

Bảng 36 Màn hình bảng chữ cái

1.12 Màn hình thông tin cá nhân Ý nghĩa: Hiển thị các thông tin cá nhân của người dùng, thay đổi mật khẩu, xem danh sách bạn bè và kết bạn với người khác

Hình 49 Màn hình thông tin cá nhân Bảng 37 Màn hình thông tin cá nhân

1.13 Màn hình tin nhắn Ý nghĩa: Hiển thị danh sách bạn bè, tin nhắn giữa người dùng, cho phép người dùng nhắn tin với nhau đồng thời có thể xem thông tin cá nhân của nhau.

Hình 50 Màn hình tin nhắn Bảng 38 Màn hình tin nhắn

1.14 Màn hình video Ý nghĩa: Hiển thị danh sách video bài giảng cho người dùng có thể tự học

1.15 Màn hình tạo khoá học Ý nghĩa: Hiển thị danh sách video bài giảng cho người dùng có thể tự học

Hình 52 Màn hình bảng chữ cái

Bảng 40 Màn hình bảng chữ cái

1.16 Màn hình quản lý người dùng Ý nghĩa: quản lý danh sách người dùng trang web

Hình 53 Màn hình quản lý người dùng Bảng 41 Màn hình quản lý người dùng

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

Bảng 42 Màn hình quản lý thử thách

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

1.19 Màn hình quản lý bảng chữ cái Ý nghĩa: quản lý danh sách bảng chữ cái

Hình 56 Màn hình quản lý bảng chữ cái

Bảng 44 Màn hình quản lý bảng chữ cái

Sequence Diagram cho các xử lý

2.2 Xem thông tin page topic

TEST

Nhóm đã thực hiện một số test case đối với trang web, và đã rút ra được kết quả sau:

Kiểm tra đăng ký với

REG_01 tài khoản đã tồn tại

Kiểm tra đăng ký với

REG_02 phần xác nhận mật khẩu không khớp

Kiểm tra đăng ký với email, tên tài khoản, REG_03 mật khẩu, mật khẩu

Kiểm tra đăng ký với

REG_04 email, tên tài khoản, mật khẩu, mật khẩu xác nhận hợp lệ

Kiểm tra đăng nhập LOG_01 với tên tài khoản và mật khẩu sai

Kiểm tra đăng nhập LOG_02 với tên tài khoản và mật khẩu đúng

Kiểm tra đăng nhập LOG_03 với tài khoản bị khoá

Kiểm tra tạo khoá học

CRC_01 với tên khoá học bị bỏ trống

Kiểm tra tạo khoá học

CRC_02 với một từ mới được thêm

CRC_03 Kiểm tra tạo khoá học hợp lệ

CRC_04 Để trống thẻ từ mới

CRC_05 Để trống thẻ nghĩa

CPW_01 Sai mật khẩu hiện tại

Sai mật khẩu mới xác CPW_02 nhận

Kiểm tra thay đổi mật

CPW_03 khẩu với thông tin nhập vào hợp lệ