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 kinh tế và văn hóa – xã hội phát triển hiện nay, ngoại ngữ và tin học đóng vai trò quan trọng, đặc biệt là Tiếng Anh, ngôn ngữ thiết yếu cho cá nhân và tổ chức Tuy nhiên, việc biết thêm nhiều ngôn ngữ khác, đặc biệt là tiếng Nhật, sẽ tạo ra lợi thế cạnh tranh trong môi trường làm việc Học tiếng Nhật không chỉ mở ra cơ hội nghề nghiệp và mức lương hấp dẫn mà còn giúp tìm hiểu văn hóa và con người Nhật Bản Để tự chủ trong việc học tiếng Nhật, việc sử dụng ứng dụng hỗ trợ học tập là cần thiết để phát triển khả năng 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ả hơn Website cần cung cấp các chủ đề học gần gũi với thực tế, cùng với các bài tập và thử thách để người dùng ôn tập kiến thức Hơn nữa, trang web nên cho phép người dùng tự tạo khóa học cá nhân, nơi 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 để đánh giá tiến độ 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 tạo ra 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 chia nhỏ ứng dụng web thành các thành phần độc lập, giúp các nhà phát triển dễ dàng quản lý và phát triển giao diện người dùng phức tạp Bằng cách này, ReactJS không chỉ tối ưu hóa quy trình phát triển mà còn cho phép tích hợp linh hoạt với các thư viện JavaScript và framework khác như Angular hoặc 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 Khi dữ liệu thay đổi, object sẽ tính toán sự khác biệt giữa object và cây DOM thực, từ đó tối ưu hóa quá trình re-render cây DOM thật.

 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 hoặc thuộc tính khác nhau Trong một component, có thể bao gồm các component nhỏ hơn, tạo nên sự linh hoạt và hiệu quả trong việc phát triển giao diện.

Hàm render là thành phần quan trọng nhất trong các component của React, chịu trách nhiệm tạo thẻ HTML và thể hiện khả năng xử lý qua Virtual-DOM Mọi thay đổi dữ liệu đều được Virtual-DOM xử lý và cập nhật ngay lập tức.

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 kiểm soát bởi component, chỉ có thể thay đổi trong component mà đã được khai báo Các component khác không thể 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

Hàm constructor(props) được gọi khi một thể hiện của component được tạo ra, cho phép khởi tạo state và "bind" các hàm của component 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ần thực hiện các thao tác này, không nhất thiết phải 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, có thể lồng ghép nhiều đối tượng nhưng cần có một đối tượng chính bao bọc 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 này gọi đến, vì việc gọi setState() sẽ kích hoạt lại hàm render, dẫn đến tình trạng 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.

 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ì mục đích của nó là 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 vòng lặp vô hạn Sau khi thực hiện hàm này, 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 động cơ Javascript V8, 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 có quy mô nhỏ.

NodeJS hỗ trợ nhiều hệ điều hành như Windows, Linux và OS X, mang lại sự linh hoạt cho lập trình viên Với các thư viện phong phú dưới dạng Javascript Module, NodeJS 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

NodeJS sử dụng cơ chế không đồng bộ (non-blocking) cho tất cả các API, cho phép máy chủ chờ phản hồi dữ liệu mà không bị chặn Điều này giúp máy chủ chuyển tiếp đến các API tiếp theo ngay sau khi thực hiện cuộc gọi, đồng thời sử dụng cơ chế thông báo sự kiện để 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ở hữu khả năng mở rộng cao nhờ vào mô hình đơn luồng với cơ chế tổ chức sự kiện, cho phép máy chủ đáp ứng không ngăn chặn Điều này giúp Node.js xử lý một lượng lớn yêu cầu đồng thời, vượt trội hơn so với các máy chủ truyền thống như Apache HTTP Server, vốn có giới hạn trong khả năng phục vụ.

 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 framework nhẹ nhưng linh hoạt, được phát triển trên nền tảng Node.js Nó mang đến nhiều tính năng mạnh mẽ, hỗ trợ hiệu quả cho việc phát triển ứng dụng web và di động.

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, khai báo và định nghĩa cần thiết để đảm bảo hoạt động ổn định Đồ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

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

- 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

- 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 đã rút ra những yếu tố quan trọng cần có khi 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, nội dung phong phú, phương pháp học đa dạng và hỗ trợ cộng đồng học viên Việc tối ưu hóa SEO cũng rất cần thiết để tăng khả năng tiếp cận và thu hút người học.

- 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

System Functions Main Use Cases Use Case ID

Mô tả chi tiết usecase

Goal Đăng ký tài khoản mới

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

3 Nhấn nút đăng nhập Exception

Goal Đăng Xuất Khỏi Website

Main Flow 1 Nhấn vào nút “Trang cá nhân”

2 Nhấn vào nút “Đăng Xuất”

Goal Xem danh sách khóa học và thông tin các khóa học

Main Flow 1 Chọn trang Home

Hình 16 Create course Bảng 6 Create course

Goal Tạo mới một khóa học với ít nhất một thẻ nội dung

Main Flow 1 Nhấn nút “thêm khóa học”

2 Điền nội dung cho từng thẻ

3 Nhấn nút “Create” để hoàn thành Exception

Hình 17 Delete course Bảng 7 Delete course

Goal Xóa từng nội dung của 1 khóa học

2 Chọn khóa học muốn xóa

3 Nhấn vào nút “Xóa Khóa Học”

Hình 18 Update course Bảng 8 Update course

Goal Chỉnh sửa nội dung khóa học

2 Chọn khóa học muốn chỉnh sửa

3 Nhấn vào nút “Chỉnh sửa khóa học”

Hình 19 Learn course Bảng 9 Learn course

Goal Học khóa học vừa được tạo với số câu hỏi bằng số thẻ đã tạo Actors

2 Chọn khóa học muốn học

3 Nhấn nút “Learn” và bắt đầu kiểm tra Exception

Hình 20 Listen lession Bảng 10 Listen lession

Goal Nghe cách phát âm của các chữ trong Lession

Main Flow 1 Nhấn nút “Chủ đề học”

Hình 21 View lession Bảng 11 View lesion

Goal Hiển thị danh sách bài học

Main Flow 1 Nhấn nút “Chủ đề học”

Goal Học/ kiểm tra từng câu hỏi và câu trả lời random

Main Flow 1 Nhấn nút “Chủ đề học “

3 Nhấn nút “Learn” để bắt đầu học và kiểm tra Exception

Hình 23 Play challenge Bảng 13 Play challenge

Goal Thực hiện chơi/ kiểm tra có phân cấp

Main Flow 1 Chọn trang “thử thách”

2 Bắt đầu kiểm tra Exception

Hình 24 Chose question challenge Bảng 14 Chose question challenge

Goal Thực hiện chơi với việc tự chọn câu hỏi

Main Flow 1 Chọn trang “Thử Thách”

2 Chọn câu hỏi để trả lời Exception

Hình 25 Comment in challenge Bảng 15 Comment in challenge

Main Flow 1 Chọn một Thử thách bất kỳ

2 Gõ text cần bình luận vào ô “để lại bình luận của bạn”

Hình 26 Update user Bảng 16 Update user

Goal Thay đổi tên tài khoản

Main Flow 1 Chọn nút “Trang Cá Nhân”

2 Chọn trang “Thông Tin Cá Nhân”

3 Nhấn nút “chỉnh sửa tên”

4 nhâp tên mới và mật khẩu cũ để kiểm tra

Hình 27 View information Bảng 17 View information

Goal Xem thông tin của User

Main Flow 1 Chọn trang “thông tin cá nhân”

Main Flow 1 Nhấp chọn avatar của bản thân để vào trang thông tin cá nhân

2 chọn tab “người dùng” sử dụng chức năng tìm kiếm thể tìm người mà mình muốn kết bạn

3 Nhấp chọn “Thêm” để gửi lời mời kết bạn

4 Khi người dùng còn lại chấp nhận thì sẽ hiển thị trong tab “bạn bè”

Main Flow 1 Nhấp chọn chức năng “Messages” ở thanh menu

2 Chọn 1 người bạn mà mình muốn nhắn tin

Hình 30 Watch lecture clip Bảng 20 Watch lecture clip

Goal Xem clip giảng dạy

Main Flow 1 Chọn video ở thanh menu

2 Chọn bài mình muốn học

3 Nhấp nút phát để xem video Exception

Hình 31 Practice lecture clip Bảng 21 Practice lecture clip

Goal Kiểm tra lại bài học

Main Flow 1 Chọn video ở thanh menu

2 Chọn bài mình muốn học

3 Chọn câu trả lời ở phía dưới video Exception

Goal Quản lý chủ đề từ vựng

Main Flow 1 Chọn topic ở thanh menu

2 Chọn topic muốn thực hiện Exception

Hình 33 Manage challenge Bảng 23 Manage challenge

Goal Quản lý thử thách

Main Flow 1 Chọn challenge ở thanh menu

2 Chọn challenge muốn thực hiện Exception

Hình 34 Manage user Bảng 24 Manage user

Goal Quản lý người dùng

Main Flow 1 Chọn User ở thanh menu

2 Chọn user muốn thực hiện Exception

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

Thiết kế CSDL

Mô tả CSDL chi tiết

Tên Collection Các Field Ý nghĩa

User _id username Tên đăng nhập của người dùng email Email của người dùng

Password Mật khẩu của người dùng phoneNumber Số điện thoại của người dùng avatar Ảnh đại diện của người dùng course Khóa học của người dùng

Course _id title Tiêu đề của khóa học

Text Từ nghữ totalClick Số lần học totalTrue Số lần học đúng

Topic _id title Tiêu đề của Topic lesson_number Số thứ tự bài học

Text Từ vựng kanji_text Từ Kanji

Sound Phát âm của từ vựng kanji_meaning Nghĩa Kanji vocabulary_meaning Nghĩa từ vựng

The article presents a structured format for quiz questions, including the challenge ID, the question itself, the answer, and an explanation of the answer It categorizes the level of difficulty for each question and provides two answer choices, along with corresponding audio files for each option This format enhances user engagement and understanding of the quiz material.

Kata Từ dưới dạng katakana

Romaji Từ dưới dạng romaji

Hira Từ dưới dạng hiragana

Message Tin nhắn giữa hai người

Content Nội dung báo cáo

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

STT Loại Ý nghĩa Ghi chú

1 Button Chuyển đổi giữa tiếng Anh và tiếng

2 Text Nhập tên người dùng

4 Button Hiển thị mật khẩu

5 Button Đăng nhập vào màn hình chính

6 Button Chuyển đến màn hình đăng ký

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ý

2 Text Nhập địa chỉ email

6 Button Xác nhận mật khẩu

7 Button Hiển thị xác nhận mật khẩu

8 Button Đăng ký tài khoản

9 Button Quay trở lại màn hình đăng nhập

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ủ

2 Text Nhập địa chỉ email

6 Button Xác nhận mật khẩu

7 Button Hiển thị xác nhận mật khẩu

8 Button Đăng ký tài khoản

9 Button Quay trở lại màn hình đăng nhập

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

Hình 41 Màn hình hiển thị khoá học

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

1 Button Chuyển đến màn hình tạo khoá học

2 Button Chuyển đến màn hình thẻ ghi nhớ

3 Button Chuyển đến màn hình học

5 Button Tải thêm khoá học nếu 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 Button Chuyển đổi giữa từ mới và nghĩa

2 Button Quay lại từ mới phía trước

3 Button Hiển thị từ mới tiếp theo

4 Button Phát âm từ mới

5 Button Chỉnh sửa từ mới

6 Button Chuyển đến màn hình thẻ ghi nhớ

7 Button Chuyển đến mà hình học

8 Button Chuyển đến màn hình viết

9 Button Chuyển đến màn hình nghe

10 Button Chuyển đến màn hình thẻ ghi nhớ của của khoá được chọn

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 Text Hiển thị câu hỏi

2 Button Chọn đáp án đúng

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 Text Hiển thị câu hỏi

2 Text Nhập câu trả lời

3 Button Kiểm tra kết quả đúng/sai

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 Button Phát âm câu hỏi

2 Text Nhập câu trả lời

3 Button Kiểm tra kết quả đúng/sai

4 Button Bàn phím để nhập tiếng Nhật

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 Button Chuyển đến màn hình chi tiết của chủ đề

2 Button Chuyển trang hiển thị danh sách chủ đề

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 Text Hiển thị từ mới

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 Button Chuyển đến tab bảng chữ cái hiragana

2 Button Chuyển đến tab chữ cái katakana

3 Icon Phát âm chữ cái đó

4 Input Rê chuột để vẽ

5 Button Làm sạch vùng vẽ

6 Button Tải về máy nội dung vẽ

7 Button Tải chi tiết phát âm và cách vẽ của 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 Button Chuyển đến tab phía trước

2 Button Hiển thị tab lời mời kết bạn

3 Button Hiển thị tab lời mời kết bạn đã gửi

4 Button Hiển thị tab người dùng

5 Button Chuyển đến tab phía sau

6 Input Cho phép người dùng nhập tên người dùng khác để tìm kiểm

7 Button Hiển thị dialog với các hành động như kết bạn, xem thông tin cá nhân

8 Input Cho phép người dùng nhập mật khẩu hiện tại

9 Input Cho phép người dùng nhập mật khẩu mới

10 Input Cho phép người dùng nhập xác nhận lại mật khẩu mới

11 Button Xác nhận thay đổi mật khẩu

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 Button Tải tin nhắn và thông tin cá nhân của người bạn đó

2 Button Tải tin nhắn và thông tin cá nhân của người bạn đó

3 Input Cho phép người dùng nhập nội dung tin nhắn ở đây

4 Button Gửi tin nhắn đến bạn bè

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 Button Chuyển đến màn hình phát video đó

2 Button Chuyển đến màn hình phát video đó

3 Input Chuyển đến màn hình phát video đó

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 Input Nhập tên khoá học

2 Icon Xoá thẻ từ mới chỉ định

3 Input Nhập nội dung từ mới

4 Input Nhập nghĩa của từ mới

5 Button Tạo một thẻ từ mớ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 Button Hiển thị dialog để nhập từ khoá tìm kiếm

2 Button Khoá tài khoản người dùng

3 Button Mở khoá tài khoản người dùng

4 Button Trở về trang phía trước

5 Button Click để tới số trang tương ứng

6 Button Trở về trang phía sau

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 Button Hiển thị modal tạo mới một thử thách

3 Button Chỉnh sửa thử thách được chọn

4 Button Xoá thử thách được chọn

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 Button Hiển thị modal tạo mới một chủ đề học

3 Button Chỉnh sửa chủ đề học được chọn

4 Button Xoá chủ đề học được chọn

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

1 Button Tạo mới một chữ cái

2 Button Chỉnh sửa 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:

ID Test case description Test steps Expected Result Status

REG_01 Kiểm tra đăng ký với tài khoản đã tồn tại

 Truy cập vào trang đăng ký tài khoản

 Thực hiện đăng ký tài khoản với tên tài khoản hoặc email đã tồn tại

Xuất hiện thông báo lỗi “Tài khoản email/ tên người dùng đã sử dụng”

Kiểm tra đăng ký với phần xác nhận mật khẩu không khớp

 Thực hiện đăng ký tài khoản với phần xác nhận mật khẩu không khớp

Xuất hiện thông báo “Mật khẩu xác nhận phải giống mật khẩu !!!”

Kiểm tra đăng ký với email, tên tài khoản, mật khẩu, mật khẩu xác nhận rỗng

 Thực hiện đăng ký khi email, tên tài khoản, mật khẩu, mật khẩu xác nhận rỗng

Xuất hiện thông báo “Không được bỏ trống”

Kiểm tra đăng ký với email, tên tài khoản, mật khẩu, mật khẩu xác nhận hợp lệ

 Truy cập trang đăng ký tài khoản

 Thực hiện đăng ký với email, tên tài khoản, mật khẩu, mật khẩu xác nhận hợp lệ

Xuất hiện thông báo đăng ký tài khoản thành công và chuyển đến màn hình đăng nhập

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

 Nhập tên tài khoản và mật khẩu sai

Xuất hiện thông báo “Sai tên tài khoản hoặc mật khẩu”

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

 Nhập tên tài khoản và mật khẩu đúng

Xuất hiện thông báo đăng nhập thành công và chuyển đến màn hình trang chủ

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

 Nhập tên tài khoản và mật khẩu bị khoá

Xuất hiện thông báo lỗi “tài khoản hiện tại bị khoá, vui lòng liên hệ admin”

Kiểm tra tạo khoá học với tên khoá học bị bỏ trống

 Truy cập trang tạo khoá học

 Bỏ trống tên khoá học và nhấn nút

Xuất hiện thông báo “Không được bỏ trống tên khoá học”

Kiểm tra tạo khoá học với một từ mới được thêm

 Tạo một từ mới và nhấn nút “tạo”

Xuất hiện thông báo “Khoá học phải có ít nhất 2 từ”

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

 Nhập tên khoá học, từ mới, nghĩa của từ(2 từ trở lên)

Xuất hiện thông báo tạo khoá học thành công và chuyển sang màn hình danh sách khoá học

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

 Nhập tên khoá học, để trống thẻ từ mới

Xuất hiện thông báo lỗi “không được để trống thẻ từ mới”

CRC_05 Để trống thẻ nghĩa

 Nhập tên khoá học, để trống thẻ nghĩa

Xuất hiện thông báo lỗi “không được để trống thẻ nghĩa”

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

 Truy cập trang thông tin cá nhân

 Nhập sai mật khẩu hiện tại

 Nhập đúng mật khẩu mới và mật khẩu mới xác nhận

Xuất hiện thông báo lỗi “Mật khẩu hiện tại không đúng”

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

 Nhập sai mật khẩu mới xác nhận

Xuật hiện thông báo lỗi “Mật khẩu mới xác nhận không khớp”

Kiểm tra thay đổi mật khẩu với thông tin nhập vào hợp lệ

 Nhập đúng mật khẩu hiện tại, mật khẩu mới và mật khẩu mới xác nhận

Xuật hiện thông báo lỗi “Thay đổi mật khẩu thành công”

Tiêu đề	Xây Dựng Website Học Tiếng Nhật
Tác giả	Hứa Văn Lâm, Nguyễn Việt Hoàng
Người hướng dẫn	ThS. Trần Công Tú
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án Tốt Nghiệp
Năm xuất bản	2020
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	92
Dung lượng	6,32 MB