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

Vì vậy để có được một cách tự chủ trong việc học tập tiếng Nhật ta rất cần một ứng dụng để hiện thực hóa điều này, mà ở đó có thể giúp ta phát triển vốn ngôn ngữ của bản thân.. Ngoài ra,

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

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

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

NỘI DUNG 2

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 2

1 Tổng quan React 2

2 Tổng quan NodeJS 5

3 Tổng quan ExpessJS 5

4 Tổng quan MongoDB 6

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 8

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

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

3 Trang http://mina.mazii.net/ 12

4 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

1 Usecase Diagram 15

2 Mô tả chi tiết usecase 17

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

4 Thiết kế CSDL 37

5 Mô tả CSDL chi tiết 37

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 40

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

2 Sequence Diagram cho các 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ở dữ liệu

JSON: Javascrip Object Notation

MỤC LỤC HÌNH ẢNH

Hình 1 Vòng đời React [1] 3

Hình 2 Cấu trúc Express[3] 6

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

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

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

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

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

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

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

Hình 10 WEB khảo sát 3 số 2 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ữ cái 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ữ cái 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ữ cái 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 1 Usecase diagram 15

Bảng 2 Register 17

Bảng 3 Login 18

Bảng 4 Logout 19

Bảng 5 View course 20

Bảng 6 Create course 20

Bảng 7 Delete course 21

Bảng 8 Update course 22

Bảng 9 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 màn hình đăng nhập 40

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

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

Bảng 29 Các đối tượng màn hình trang hiển thị khoá 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ữ cái 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ữ cái 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ữ cái 66

GIỚI THIỆU

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

Hiện nay, trong điều kiện kinh tế, văn hóa – xã hội phát triển, đặc biệt là sự ảnh hưởng của hội nhập kinh tế quốc tế và toàn cầu hóa thì ngoại ngữ cùng với tin học giữ một vai trò vô cùng quan trọng Có thể nói Tiếng Anh là ngoại ngữ cơ bản không thể thiếu đối với các cá nhân, tổ chức, doanh nghiệp Biết tiếng Anh có lẽ đã

là đủ với đa số cá nhân, tuy nhiên nếu như có thể biết thêm nhiều ngôn ngữ khác nữa thì đó là thêm lợi thế trong môi trường cạnh tranh ở tất cả mọi ngành nghề Và tiếng Nhật là một lựa chọn hoàn hảo Lý do là bởi vì sẽ tăng thêm cơ hội trong việc làm, mức lương thưởng hấp dẫn hơn, và có thể tìm hiểu văn hoá và con người xứ sở hoa anh đào này Vì vậy để có được một cách tự chủ trong việc học tập tiếng Nhật ta rất cần một ứng dụng để hiện thực hóa điều này, mà ở đó có thể giúp ta phát triển vốn ngôn ngữ của bản thân

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

Xây dựng trang web học tiếng Nhật giúp người dùng có một cách tiếp cận với ngôn ngữ này nhanh hơn Website cần cung cấp các chủ đề học gần gũi với thực tế giúp người dùng học hiệu quả hơn Các bài tập, thử thách giúp người dùng ôn tập lại kiến thức đã học Ngoài ra, website cần có chức năng giúp người dùng có thể tự tạo một khoá học của chính bản thân mình, ở đây người dùng tạo ra những từ ngữ mà bản thân muốn thực hành thường xuyên, và trong khoá học cũng cung cấp phần tự kiểm tra

NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1 Tổng quan React

1.1 Giới thiệu React

React là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, mục đích là tạo ra những ứng dụng web nhanh hơn, hấp dẫn hơn và hiệu quả hơn với khối lượng mã nguồn tối thiểu

Sức mạnh của ReactJS đến từ việc chia web thành các thành phần riêng lẻ thay vì làm việc trên toàn bộ ứng dụng web, ReactJS cho phép một developer có thể chia giao diện người dùng phức tạp thành các thành phần đơn giản hơn Ngoài ra, chúng cũng còn được sử dụng kết hợp với thư viện JavaScript hay framework khác như Angular hoặc MVC

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

1.2.1 Virtual dom

Là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật

hàm xử lý việc tạo thẻ HTML cũng như chứng tỏ cho khả năng xử lý qua DOM Mọi thay đổi của dữ liệu ở bất cứ thời điểm nào đều cũng sẽ được Virtual-DOM xử lý và update ngay tức thì

Virtual-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ộ bị kiểm soát bởi component State chính là dữ liệu chỉ

có thể thay đổi trong component mà ta đã khai báo Các component khác không thể dử dụng cũng như thay đổi được

 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ình 1 Vòng đời React [1]

 constructor(props)

o Được gọi khi một thể hiện của component được tạo ra

o Có thể dùng để khởi tạo state cho component

o Cũng có thể dùng để "bind" các hàm của component

o Nếu phải cài đặt hàm này thì phải khai báo 1 tham số props cho nó và phải gọi super(props) đầu tiên

o Nếu không làm gì thì không phải cài đặt hàm này

 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()

o Trả về 1 đối tượng JSX (có thể lồng các đối tượng với nhau nhưng phải

có 1 đối tượng gói tất cả các đối tượng lại) để hiển thị hoặc null / false nếu không muốn hiển thị gì

o Không được gọi setState() trong hàm này (cũng như trong các hàm mà hàm này gọi đến), bởi khi gọi setState() thì hàm render sẽ được gọi => gây ra lặp vô hạn

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

 componentWillUpdate(nextProps, nextState)

o Được gọi ngay sau shouldComponentUpdate() nếu hàm này trả về true

o Không gọi setState() trong hàm này bởi hàm này là để chuẩn bị update cho đối tượng chứ không phải tạo ra 1 update mới, sẽ tạo ra lặp vô hạn

o Hàm render sẽ được gọi ngay sau hàm này

 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,

2 Tổng quan NodeJS

2.1 Giới thiệu

 NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, nó được sử dụng để xây dựng các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp

 NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ WIndow cho tới Linux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình

và giảm thời gian ở mức thấp nhất

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

(none-blocking), nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime)

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

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

luồng duy nhất với sự kiện lặp cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu Node.js sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP Server

chủ yếu là đầu ra dữ liệu

3 Tổng quan ExpessJS

3.1 Giới thiệu

 Express js là một Framework nhỏ, nhưng linh hoạt được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile

 Thiết lập các lớp trung gian để trả về các HTTP request, định nghĩa router cho phép sử dụng với 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

 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

4 Tổng quan MongoDB

4.1 Giới thiệu

 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]

4.2 Đặc điểm

 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

 Cập nhật nhanh hơn

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG

1 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ệ,

Các chức năng chính:

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

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

- Forum thảo luận

- Ô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

Nhược điểm:

- 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

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

Một số hình ảnh [6]

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:

- Header: thanh menu

- 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

Các chức năng chính:

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

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

- Forum thảo luận

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

- 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

- Lưu thông tin người dùng khi đăng nhập/đăng ký Từ đây có thể lưu lại các mục tiêu hàng ngày, lịch sử các bài học, lịch sử các bài kiểm tra

- 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

Nhược điểm:

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

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

- 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

CHƯƠNG 3: TIẾP NHẬN, PHÂN TÍCH YẾU CẦU

VÀ THIẾT KẾ CSDL

1 Usecase Diagram

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

Chose question UC_4.2

Manage This User

Update Username UC_5.1 View Information UC_5.2 Friend

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

Exception

Open Issues

2.2 Login

Hình 13 Login Bảng 3 Login

Open Issues

2.3 Logout

Hình 14 Logout Bảng 4 Logout

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

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

Exception

Open Issues

2.4 View Course

Hình 15 View course

Post-conditions

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

Open Issues

2.6 Delete Course

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

Main Flow 1 Chọn trang Home

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

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

Exception

Open Issues

2.7 Update Course

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

Main Flow 1 Chọn trang Home

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”

Exception

Open Issues

2.8 Learn Course

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

Pre-conditions Login Success

2.9 Listen Lession

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

2.10 View Lession

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

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

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

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

Pre-conditions Login Success

Post-conditions

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

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

Open Issues

2.14 Comment Challenge

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

2.15 Update User

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

Actors

Pre-conditions Login Success

Post-conditions

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

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

2.16 View information

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

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è”

Exception

Open Issues

2.18 Chat

Hình 29 Chat Bảng 19 Chat

Post-conditions

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

3 Typing và gửi Exception

Open Issues

2.19 Watch Lecture Clip

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

Open Issues