đồ án tốt nghiệp XÂY DỰNG WEBSITE HỌC VÀ KIỂM TRA TIẾNG ANH

ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP
NGÀNH: CÔNG NGHỆ THÔNG TIN
CHUYÊN NGÀNH: HỆ THỐNG NHÚNG

ĐỀ TÀI:

XÂY DỰNG WEBSITE
HỌC VÀ KIỂM TRA TIẾNG ANH

Người hướng dẫn: TS. BÙI THỊ THANH THANH
Sinh viên thực hiện: THÁI VĂN LỢI
Số thẻ sinh viên: 102130168
Lớp: 13T4

Đà Nẵng, 05/2018


ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHẬN XÉT ĐỒ ÁN TỐT NGHIỆP
1. Thông tin chung:

1. Họ và tên sinh viên: Thái Văn Lợi
2. Lớp: 13T4

Số thẻ SV: 102130168

3. Tên đề tài: Xây dựng website học và kiểm tra tiếng Anh
4. Người hướng dẫn: Bùi Thị Thanh Thanh

Học hàm/ học vị: Tiến sĩ

II. Nhận xét, đánh giá đồ án tốt nghiệp:
1. Về tính cấp thiết, tính mới, khả năng ứng dụng của đề tài: (điểm tối đa là 2đ)
………………………………………………………………………………………..
………………………………………………………………………………………..
2. Về kết quả giải quyết các nội dung nhiệm vụ yêu cầu của đồ án: (điểm tối đa là 4đ)
………………………………………………………………………………………..
………………………………………………………………………………………..
3. Về hình thức, cấu trúc, bố cục của đồ án tốt nghiệp: (điểm tối đa là 2đ)
………………………………………………………………………………………..
………………………………………………………………………………………..
4. Đề tài có giá trị khoa học/ có bài báo/ giải quyết vấn đề đặt ra của doanh nghiệp hoặc
nhà trường: (điểm tối đa là 1đ)
………………………………………………………………………………………..
………………………………………………………………………………………..
5. Các tồn tại, thiếu sót cần bổ sung, chỉnh sửa:
………………………………………………………………………………………..
………………………………………………………………………………………..
III. Tinh thần, thái độ làm việc của sinh viên: (điểm tối đa 1đ)
………………………………………………………………………………………..
IV. Đánh giá:

1. Điểm đánh giá:

……../10 (lấy đến 1 số lẻ thập phân)

2. Đề nghị: ☐ Được bảo vệ đồ án ☐ Bổ sung để bảo vệ

☐ Không được bảo vệ

Đà Nẵng, ngày
tháng năm 201
Người hướng dẫn


ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHẬN XÉT PHẢN BIỆN ĐỒ ÁN TỐT NGHIỆP
I. Thông tin chung:
1. Họ và tên sinh viên: Thái Văn Lợi
2. Lớp: 13T4

Số thẻ SV: 13T4

3. Tên đề tài: Xây dựng website học và kiểm tra tiếng Anh
4. Người phản biện: Bùi Thị Thanh Thanh

Học hàm/ học vị: Tiến sĩ

II. Nhận xét, đánh giá đồ án tốt nghiệp:
TT Các tiêu chí đánh giá
1
1a

1b

1c

2
2a
2b
3

Sinh viên có phương pháp nghiên cứu phù hợp, giải quyết
đủ nhiệm vụ đồ án được giao
- Tính mới (nội dung chính của ĐATN có những phần mới so với
các ĐATN trước đây).
- Đề tài có giá trị khoa học, công nghệ; có thể ứng dụng thực tiễn.
- Kỹ năng giải quyết vấn đề; hiểu, vận dụng được kiến thức cơ
bản, cơ sở, chuyên ngành trong vấn đề nghiên cứu.
- Chất lượng nội dung ĐATN (thuyết minh, bản vẽ, chương trình,
mô hình,…).
- Có kỹ năng vận dụng thành thạo các phần mềm ứng dụng trong
vấn đề nghiên cứu;
- Có kỹ năng đọc, hiểu tài liệu bằng tiếng nước ngoài ứng dụng
trong vấn đề nghiên cứu;

- Có kỹ năng làm việc nhóm;
Kỹ năng viết:
- Bố cục hợp lý, lập luận rõ ràng, chặt chẽ, lời văn súc tích
- Thuyết minh đồ án không có lỗi chính tả, in ấn, định dạng
Tổng điểm đánh giá theo thang 100:
Quy về thang 10 (lấy đến 1 số lẻ)

Điểm
Điểm
tối đa đánh giá
80
15

50

15

20
15
5

- Các tồn tại, thiếu sót cần bổ sung, chỉnh sửa: ………………………………………..
………………………………………………………………………………………...
- Câu hỏi đề nghị sinh viên trả lời trong buổi bảo vệ: …………………………………
………………………………………………………………………………………...
………………………………………………………………………………………...
- Đề nghị: ☐ Được bảo vệ đồ án ☐ Bổ sung để bảo vệ
☐ Không được bảo vệ
Đà Nẵng, ngày
tháng năm 201…

Người phản biện


TÓM TẮT
Tên đề tài: Xây dựng website học và kiểm tra tiếng Anh.
Sinh viên thực hiện: Thái Văn Lợi
Số thẻ SV: 102130168
Lớp: 13T4
Website học và kiểm tra tiếng Anh là website giúp cho người dùng có thể học và
kiểm tra các kỹ năng tiếng Anh về từ vựng, ngữ pháp, nghe, đọc hiểu. Ngoài ra, người
dùng có thể chơi game tiếng Anh cùng nhau và chat với nhau.
Website được xây dựng dựa trên ReactJS, Redux, NodeJS, Socket.IO, hệ quản trị
cơ sở dữ liệu PostgreSQL.
Source dự án được quản lý bằng Git và được lưu trữ trên Bitbucket.


ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
Họ tên sinh viên: Thái Văn Lợi.
Số thẻ sinh viên: 102130168
Lớp: 13T4.
Khoa: Công nghệ thông tin.
Ngành: Công nghệ thông tin.

1. Tên đề tài đồ án: Xây dựng website học và kiểm tra tiếng Anh.
2. Đề tài thuộc diện: ☐ Có ký kết thỏa thuận sở hữu trí tuệ đối với kết quả thực hiện
3. Các số liệu và dữ liệu ban đầu:
……………………………………..……………………………………………..……...
...…………………………………………………………………………………………
…..………………………………….…..………………………..………………………
4. Nội dung các phần thuyết minh và tính toán:
…...………………………………………………………………………………………
…...………………………………………………………………………………………
…...………………………………………………………………………………………
…...………………………………………………………………………………………
…...………………………………………………………………………………………
5. Các bản vẽ, đồ thị (ghi rõ các loại và kích thước bản vẽ):
…...………………………………………………………………………………………
…...………………………………………………………………………………………
…...………………………………………………………………………………………
…...………………………………………………………………………………………
6. Họ tên người hướng dẫn: TS. Bùi Thị Thanh Thanh.
7. Ngày giao nhiệm vụ đồ án:
……../……./2018
8. Ngày hoàn thành đồ án:
……../……./2018
Đà Nẵng, ngày 19 tháng 05 năm 2018
Trưởng Bộ môn ……………………..
Người hướng dẫn


LỜI NÓI ĐẦU
Từ khi bắt đầu làm Đồ án tốt nghiệp đến nay, em đã nhận được nhiều sự quan tâm,
giúp đỡ và động viên tận tình từ cô Bùi Thị Thanh Thanh. Với lòng biết ơn sâu sắc nhất,

em xin gửi đến cô vì cô đã dành hết tâm huyết của mình để truyền đạt kiến thức cho em
trong suốt thời gian làm Đồ án tốt nghiệp. Nếu không có sự ủng hộ và góp ý của cô thì
Đồ án của em khó có thể hoàn thiện được.
Đồng thời, em cũng xin gửi lời cảm ơn đến lãnh đạo trường Đại học Bách khoa Đại học Đà Nẵng, lãnh đạo khoa Công nghệ thông tin và toàn thể các thầy cô đã cung
cấp các kiến thức bổ ích cho em từ khi em vào trường cho đến bây giờ. Chính những
kiến thức quý giá đó đã hổ trợ em rất nhiều trong việc hoàn thành Đồ án tốt nghiệp.
Dù đã kiểm tra nhiều lần, nhưng trong Đồ án tốt nghiệp khó tránh khỏi sai sót, rất
mong các thầy cô bỏ qua và em rất mong nhận được những đóng góp của thầy cô để
giúp sản phẩm của em được hoàn thiện hơn.
Em xin chân thành cảm ơn.

i


CAM ĐOAN
Tôi xin cam đoan:
1. Nội dung trong đồ án này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của
T.S Bùi Thị Thanh Thanh.
2. Các tham khảo dùng trong đồ án đều được trích dẫn rõ ràng tên tác giả, tên công
trình, thời gian, địa điểm công bố.
3. Nếu có những sao chép không hợp lệ, vi phạm, tôi xin chịu hoàn toàn trách
nhiệm.
Sinh viên thực hiện

Thái Văn Lợi

ii


MỤC LỤC

TÓM TẮT
NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
LỜI NÓI ĐẦU........................................................................................................................ i
CAM ĐOAN .......................................................................................................................... ii
MỤC LỤC ............................................................................................................................iii
DANH SÁCH CÁC BẢNG, HÌNH VẼ ............................................................................... v
DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT ..........................................................viii
MỞ ĐẦU................................................................................................................................ 1
Chương 1: CƠ SỞ LÝ THUYẾT ........................................................................................ 3
1.1. NodeJS ..................................................................................................................... 3
1.1.1. Giới thiệu NodeJS ............................................................................................. 3
1.1.2. Đặc điểm của NodeJS ....................................................................................... 3
1.1.3. Những ứng dụng thường sử dụng NodeJS ........................................................ 3
1.2. Express Framework ............................................................................................... 3
1.2.1. Giới thiệu về Express Framework .................................................................... 3
1.2.2. Các tính năng cơ bản của Express Framework ................................................. 3
1.2.3. Một số ưu điểm của Express Framework ......................................................... 4
1.3. React JS ................................................................................................................... 4
1.3.1. Giới thiệu .......................................................................................................... 4
1.3.2. Các khái niệm cơ bản ........................................................................................ 4
1.4. Redux ....................................................................................................................... 5
1.4.1. Giới thiệu .......................................................................................................... 5
1.4.2. Các khái niệm cơ bản ........................................................................................ 5
1.4.3. Tính ứng dụng của Redux ................................................................................. 5
1.5. Socket.IO ................................................................................................................. 5
1.5.1. Giới thiệu về WebSocket .................................................................................. 5
1.5.2. Giới thiệu về Socket.IO .................................................................................... 6
1.6. Redis ........................................................................................................................ 6
1.7. PostgreSQL ............................................................................................................. 6

Chương 2: PHÂN TÍCH ...................................................................................................... 7
2.1. Phát biểu bài toán................................................................................................... 7
2.2. Phân tích ................................................................................................................. 7
2.2.1. Phân tích yêu cầu người dùng và quản trị viên ................................................. 7
2.2.2. Biểu đồ ca sử dụng ............................................................................................ 7
2.2.3. Biểu đồ tuần tự của chức năng ........................................................................ 22
iii


2.2.4. Tạo bảng cơ sở dữ liệu .................................................................................... 28
Chương 3: TRIỂN KHAI VÀ ĐÁNH GIÁ ...................................................................... 34
3.1. Triển khai .............................................................................................................. 34
3.1.1. Cài đặt môi trường .......................................................................................... 34
3.1.2. Triển khai ........................................................................................................ 34
3.2. Đánh giá ................................................................................................................ 45
3.2.1. Ưu điểm .......................................................................................................... 45
3.2.2. Nhược điểm..................................................................................................... 45
KẾT LUẬN ......................................................................................................................... 46
1. Kết quả đạt được ........................................................................................................ 46
2. Hướng phát triển ........................................................................................................ 46
TÀI LIỆU THAM KHẢO.................................................................................................. 47

iv


DANH SÁCH CÁC BẢNG, HÌNH VẼ
Danh sách các bảng
Bảng 1.1 Sự khác nhau giữa state và props ................................................................................ 4
Bảng 2.1 Use-case – Xem hướng dẫn sử dụng ........................................................................... 8
Bảng 2.2 Use-case – Đăng ký tài khoản ..................................................................................... 9

Bảng 2.3 Use-case – Đăng nhập ............................................................................................... 10
Bảng 2.4 Use-case – Đăng xuất ................................................................................................ 10
Bảng 2.5 Use-case – Xem bảng xếp hạng ................................................................................ 10
Bảng 2.6 Use-case – Xem trang cá nhân .................................................................................. 11
Bảng 2.7 Use-case – Xem thành tích........................................................................................ 11
Bảng 2.8 Use-case – Cập nhật tài khoản .................................................................................. 11
Bảng 2.9 Use-case – Học tiếng Anh ......................................................................................... 12
Bảng 2.10 Use-case – Kiểm tra tiếng Anh ............................................................................... 12
Bảng 2.11 Use-case – Xem kết quả kiểm tra............................................................................ 12
Bảng 2.12 Use-case – Chơi game ............................................................................................. 13
Bảng 2.13 Use-case – Chat với bạn trong phòng ..................................................................... 13
Bảng 2.14 Use-case – Đăng nhập ............................................................................................. 14
Bảng 2.15 Use-case – Đăng xuất .............................................................................................. 14
Bảng 2.16 Use-case – Cập nhật tài khoản ................................................................................ 14
Bảng 2.17 Use-case – Quản lý bài học ..................................................................................... 15
Bảng 2.18 Use-case – Tạo mới bài học .................................................................................... 15
Bảng 2.19 Use-case – Sửa bài học ........................................................................................... 15
Bảng 2.20 Use-case – Xóa bài học ........................................................................................... 16
Bảng 2.21 Use-case – Quản lý câu hỏi ..................................................................................... 16
Bảng 2.22 Use-case – Tạo mới câu hỏi .................................................................................... 16
Bảng 2.23 Use-case – Sửa câu hỏi ........................................................................................... 17
Bảng 2.24 Use-case – Xóa câu hỏi ........................................................................................... 17
Bảng 2.25 Use-case – Quản lý thành viên ................................................................................ 18
Bảng 2.26 Use-case – Tạo mới thành viên ............................................................................... 18
Bảng 2.27 Use-case – Sửa thành viên ...................................................................................... 18
Bảng 2.28 Use-case – Xóa thành viên ...................................................................................... 19
Bảng 2.29 Use-case – Quản lý cấp bậc thành viên................................................................... 19
Bảng 2.30 Use-case – Tạo mới cấp bậc thành viên .................................................................. 19
Bảng 2.31 Use-case – Sửa cấp bậc thành viên ......................................................................... 20
Bảng 2.32 Use-case – Xóa cấp bậc thành viên ......................................................................... 20

Bảng 2.33 Use-case – Quản lý quản trị viên ............................................................................ 21
v


Bảng 2.34 Use-case – Tạo mới quản trị viên............................................................................ 21
Bảng 2.35 Use-case – Sửa quản trị viên ................................................................................... 21
Bảng 2.36 Use-case – Xóa quản trị viên .................................................................................. 22
Bảng 2.37 Các trường của bảng Student .................................................................................. 29
Bảng 2.38 Các trường của bảng Users ..................................................................................... 29
Bảng 2.39 Các trường của bảng Lessons.................................................................................. 30
Bảng 2.40 Các trường của bảng Vocabularies ......................................................................... 30
Bảng 2.41 Các trường của bảng DetailLessons ........................................................................ 31
Bảng 2.42 Các trường của bảng Questions .............................................................................. 31
Bảng 2.43 Các trường của bảng Answers ................................................................................ 32
Bảng 2.44 Các trường của bảng Scores .................................................................................... 32
Bảng 2. 45 Các trường của bảng Achievements....................................................................... 33

Danh sách các hình
Hình 2.1 Sơ đồ các tác nhân ....................................................................................................... 7
Hình 2.2 Biểu đồ use-case của Khách ........................................................................................ 8
Hình 2.3 Biểu đồ Use-case của Moderator ............................................................................... 13
Hình 2.4 Biểu đồ Use-case của Super Moderator .................................................................... 17
Hình 2.5 Biểu đồ Use-case của Administrator ......................................................................... 20
Hình 2.6 Biểu đồ tuần tự của chức năng đăng ký..................................................................... 22
Hình 2.7 Biểu đồ tuần tự của chức năng đăng nhập ................................................................. 23
Hình 2.8 Biểu đồ tuần tự của chức năng chỉnh sửa tài khoản .................................................. 24
Hình 2.9 Biểu đồ tuần tự của chức năng tìm kiếm bài học, bài kiểm tra ................................. 25
Hình 2.10 Biểu đồ tuần tự của chức năng học tiếng Anh ......................................................... 26
Hình 2.11 Biểu đồ tuần tự của chức năng kiểm tra tiếng Anh ................................................. 27
Hình 2.12 Lược đồ quan hệ các bảng dữ liệu ........................................................................... 28

Hình 3.1 Kiểm tra cài đặt NodeJS và NPM.............................................................................. 34
Hình 3.2 Màn hình chính của website khi chưa đăng nhập ...................................................... 35
Hình 3.3 Màn hình đăng nhập dành cho thành viên ................................................................. 35
Hình 3.4 Màn hình chọn các kỹ năng tiếng Anh ...................................................................... 36
Hình 3.5 Danh sách các chủ đề phần Từ vựng ......................................................................... 36
Hình 3.6 Nội dung bài học về phần Từ vựng ........................................................................... 37
Hình 3.7 Bài kiểm tra về Từ vựng ............................................................................................ 37
Hình 3.8 Kết quả kiểm tra của người dùng về phần Từ vựng .................................................. 38
Hình 3.9 Danh sách các bài học phần Đọc hiểu ....................................................................... 38
Hình 3.10 Bài kiểm tra phần Nghe ........................................................................................... 39
Hình 3.11 Nội dung bài học phần Ngữ pháp ............................................................................ 39
Hình 3.12 Bài kiểm tra chung................................................................................................... 40
vi


Hình 3.13 Màn hình xem bảng xếp hạng các thành viên có tổng điểm cao nhất ..................... 40
Hình 3.14 Màn hình xem các phòng game ............................................................................... 41
Hình 3.15 Màn hình phòng game khi chưa chơi game............................................................. 41
Hình 3.16 Màn hình chat của phòng game ............................................................................... 42
Hình 3.17 Màn hình chơi game ................................................................................................ 42
Hình 3.18 Màn hình thống kê về bài học, bảng xếp hạng ........................................................ 43
Hình 3.19 Màn hình quản lý các chủ đề về từ vựng ................................................................. 43
Hình 3.20 Màn hình tạo từ vựng mới ....................................................................................... 44
Hình 3.21 Màn hình tạo mới câu hỏi cho bài học .................................................................... 44

vii


DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT

Từ viết tắt

Diễn giải

JS

JavaScript

ECMA

European Computer Manufacturers Association

ES

ECMAScript

API

Application Programming Interface

URL

Uniform Resource Locator

UI

User Interface

OOP

Object Oriented Programing

Npm

Node package manage

CSDL

Cơ sở dữ liệu

viii


Xây dựng website học và kiểm tra tiếng Anh

MỞ ĐẦU

1. Bối cảnh đề tài
Ngày nay, tiếng Anh là ngôn ngữ phổ biến, là ngôn ngữ chính của nhiều quốc gia
trên thế giới, dùng để giao tiếp giữa các nước với nhau. Đặc biệt, trong môi trường công
việc thì tiếng Anh lại trở nên cần thiết cho giao dịch và mở rộng quan hệ hợp tác kinh
doanh. Tiếng Anh càng ngày càng khẳng định được vị trí của mình, trong cuộc sống
cũng như công việc. Vì vậy, việc học tiếng Anh trở nên vô cùng quan trọng.
Hơn nữa, với sự bùng nổ của công nghệ thông tin và Internet, việc sử dụng máy
tính hay các thiết bị di động để kết nối với nhau ngày càng được cải thiện. Tận dụng lợi
thế từ Internet và công nghệ thông tin, chúng ta có thể học và kiểm tra tiếng Anh trên
mạng dễ dàng hơn.
Đề tài của em thực hiện là Xây dựng website học và kiểm tra tiếng Anh nhằm giúp
người dùng có thể học và kiểm tra trình độ tiếng Anh thông qua các kỹ năng: Từ vựng,
Ngữ pháp, Nghe, Đọc hiểu.

2. Mục tiêu, mục đích
2.1. Mục tiêu
- Hiểu rõ hơn về React JS và Redux.
- Hiểu rõ hơn về Node JS.
- Hiểu rõ hơn về Socket IO.
- Hiểu rõ hơn về cách thực hiện một dự án.
2.2. Mục đích
Đề tài được xây dựng nhằm mục đích giúp người dùng học và kiểm tra tiếng Anh
tốt hơn.
3. Phạm vi và đối tượng nghiên cứu
Học sinh THPT và sinh viên.
4. Phương pháp triển khai
- Thu thập thông tin các học sinh, sinh viên.
- Xây dựng ý tưởng, các chức năng và lịch trình thực hiện đề tài.
- Xây dựng biểu đồ ca sử dụng, các tác nhân và các biểu đồ cần thiết.
- Thiết kế cơ sở dữ liệu.
- Xây dựng chức năng quản trị viên.
- Xây dựng chức năng người dùng.
- Kiểm tra hoàn thiện các chức năng còn thiếu và phát triển thêm.
- Hoàn thành báo cáo + đĩa CD.
Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

1


Xây dựng website học và kiểm tra tiếng Anh

5. Cấu trúc của đồ án tốt nghiệp

Đồ án bao gồm các nội dung như sau:

Mở đầu
Giới thiệu về đề tài, mục tiêu, mục đích, phạm vi và đối tượng nghiên cứu của đề
tài đã chọn.

Chương 1: CƠ SỞ LÝ THUYẾT
Giới thiệu sơ lược về ngôn ngữ, các công nghệ sử dụng để thực hiện đề tài.

Chương 2: PHÂN TÍCH
Trình bày các biểu đồ use-case, biểu đồ tuần tự của chức năng và xây dựng cơ sở
dữ liệu.

Chương 3: TRIỂN KHAI VÀ ĐÁNH GIÁ
Trình bày về cách cài đặt các ứng dụng liên quan, các chức năng của website và
kết quả đạt được.

Kết luận
Trình bày về những kết quả bản thân đạt được sau khi thực hiện đề tài, hướng phát
triển của website.

Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

2


Xây dựng website học và kiểm tra tiếng Anh

Chương 1: CƠ SỞ LÝ THUYẾT

1.1. NodeJS
1.1.1. Giới thiệu NodeJS
NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine,
là mã nguồn mở được sử dụng bởi hàng ngàn lập trình viên trên toàn thế giới, có thể
chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho đến Linux, OS X.
1.1.2. Đặc điểm của NodeJS
- Bất đồng bộ: Tất cả các API của NodeJS đều bất đồng bộ, nó chủ yếu dựa trên
nền tảng của NodeJS Server và chờ đợi Server trả dữ liệu về.
- Xử lý nhanh: NodeJS dựa trên nền tảng V8 JavaScript Engine nên thực thi chương
trình rất nhanh, tận dụng tối đa tài nguyên của server, không tạo ra độ trễ như các ngôn
ngữ phía server khác.
- Đơn luồng nhưng khả năng mở rộng cao: NodeJS sử dụng một mô hình đơn 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ủ có khả năng mở rộng cao, trái ngược với các máy
chủ truyền thống.
- Không cache: NodeJS không đệm lên các dữ liệu nào và các ứng dụng này chủ
yếu là đầu ra dữ liệu.
1.1.3. Những ứng dụng thường sử dụng NodeJS
- Các ứng dụng về I/O.
- Các ứng dụng về luồng dữ liệu.
- Các ứng dụng về dữ liệu hướng đến thời gian thực.
- Các ứng dụng dựa vào JSON APIs.
- Các ứng dụng Single Page Application.
1.2. Express Framework
1.2.1. Giới thiệu về Express Framework
Express là một framework dành cho NodeJS. Nó cung cấp nhiều tính năng mạnh
mẽ trên nền tảng web cũng như trên các ứng dụng di động. Express hỗ trợ các phương
thức HTTP và middleware tạo ra một API vô cùng mạnh mẽ và dễ sử dụng.

1.2.2. Các tính năng cơ bản của Express Framework
- Cho phép thiết lập các lớp trung gian để trả về các HTTP request.
- Định nghĩa bảng routing có thể được sử dụng với các hành động khác nhau dựa
trên phương thức HTTP và URL.
- Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template.
Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

3


Xây dựng website học và kiểm tra tiếng Anh

1.2.3. Một số ưu điểm của Express Framework
- Express hỗ trợ phát triển theo mô hình MVC.
- Cho phép định nghĩa các middleware.
- Định nghĩa rõ ràng các request method trong route.
- Hỗ trợ mạnh về Restful API.
1.3. React JS
1.3.1. Giới thiệu
React JS được tạo ra bởi Jordan Walke, là một thư viện JavaScript dùng để xây
dựng giao diện người dùng (UI). ReactJS được duy trì bởi Facebook, Instagram và cộng
đồng các nhà phát triển cá nhân và các công ty.
React cho phép các nhà phát triển tạo ra các web-application sử dụng dữ liệu và có
thể thay đổi chúng theo thời gian mà không cần phải load lại trang với mục đích nâng
cao tốc độ, đơn giản hóa và khả năng mở rộng cao.
1.3.2. Các khái niệm cơ bản
Components
Components giúp chúng ta chia UI thành các thành phần độc lập, để chúng ta có

thể sử dụng lại và quản lý nó. Component giống như các hàm trong JavaScript. Nó chấp
nhận các input tùy ý, gọi là props, và trả về React element mô tả những gì sẽ xuất hiện
trên màn hình.
Props
Props chính là properties của một component, chúng ta có thể thay đổi props của
component bằng cách truyền dữ liệu từ bên ngoài vào. Props có thể là một object,
function, string hay number,…
States
So với props là properties của component thì state biểu diễn trạng thái của
component, state là private chỉ có thể thay đổi bên trong bản thân của chính component
đó.
Bảng 1.1 Sự khác nhau giữa state và props
Props

State

Có thể nhận được giá trị ban đầu từ Component cha

Có

Có

Có thể thay đổi bởi Component cha

Có

Không

Có thể set giá trị mặt định bên trong Component

Có

Có

Không

Có

Có thể thiết lập giá trị ban đầu cho Component con

Có

Có

Có thể thay đổi trong Component con

Có

Không

Có thể thay đổi bên trong Component

Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

4


Xây dựng website học và kiểm tra tiếng Anh

1.4. Redux
1.4.1. Giới thiệu
Redux là một thư viện JavaScript giúp tạo ra thành một lớp quản lý trạng thái của
ứng dụng. Redux được dựa trên nền tảng tư tưởng của ngôn ngữ Elm và kiến trúc Flux
do Facebook giới thiệu, do vậy, Redux thường là bộ đôi kết hợp hoàn hảo với React.
Ba nguyên tắc của Redux
- Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng được chứa trong một object
tree nằm trong Store duy nhất.
- Trạng thái chỉ được phép đọc: Cách duy nhất để thay đổi State của ứng dụng là
phát một Action (là 1 object mô tả những gì xảy ra).
- Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State được biến đổi bởi
Action chúng ta dùng các pure function gọi là Reducer.
1.4.2. Các khái niệm cơ bản
Actions
Action là nơi mang các thông tin dùng để gửi từ ứng dụng đến Store. Các thông tin
này là 1 object mô tả những gì đã xảy ra.
Reducers
Là nơi xác định State thay đổi như thế nào.
Store
Store là nơi quản lý State. Trong đó, store sẽ cho phép truy cập State, update State,
đăng kí listener.
1.4.3. Tính ứng dụng của Redux
- Quản lý trạng thái: như một bản replay có thể undo/redo trạng thái của ứng dụng.
- Tăng tốc phát triển: với webpack đã có Hot Module Replacement, khi kết hợp với
Redux, tạo thành sự kết hợp ăn ý, chúng ta có thể viết code và debug rất dễ dàng, nếu
chúng ta không áp dụng Redux, đồng nghĩa chúng ta phải debug lặp đi lặp lại việc nhập
dữ liệu, mà chưa chắc lỗi do code gây ra mà do dữ liệu nhập vào.
- Ứng dụng offline: tất cả các thao tác của người dùng được lưu vào một cây trạng
thái, khi có kết nối Internet, chương trình sẽ được đồng bộ lên server bởi một loạt các

sự kiện.
1.5. Socket.IO
1.5.1. Giới thiệu về WebSocket
WebSocket là một phần của HTML5, là giao thức giúp truyền dữ liệu hai chiều
giữa server-client qua một kết nối TCP duy nhất. Vì vậy, WebSocket có thể hoạt động
trên các cổng web tiêu chuẩn, nên không có rắc rối về việc mở cổng cho các ứng dụng,
lo lắng về việc bị chặn bởi tường lửa hay proxy server.
Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

5


Xây dựng website học và kiểm tra tiếng Anh

1.5.2. Giới thiệu về Socket.IO
Socket.IO là một bộ thư viện dành để phát triển các ứng dụng realtime trên web
hoặc ứng dụng mobile. Socket.IO càng ngày càng được sử dụng rộng rãi vì đặc trưng
mạnh mẽ và dễ sử dụng. Với Socket.IO, việc làm việc với Websockets trở nên đơn giản
hơn nhiều.
Thư viện Socket.IO gồm hai phần:
- Phía Client: gồm bộ thư viện viết cho web, iOS và Android.
- Phía Server: Viết bằng JavaScript, dùng cho các máy chủ Node JS.
1.6. Redis
Redis là hệ thống hỗ trợ caching data trên RAM, cho phép lưu trữ dữ liệu dưới
dạng key/value.
Đặc điểm nổi bật:
- Data lưu trên RAM với hiệu suất truy xuất cao.
- Định kỳ sao lưu dữ liệu ra đĩa cứng.

- Hỗ trợ thêm, sửa, xóa dữ liệu đơn giản và nhanh chóng.
1.7. PostgreSQL
PostgreSQL là hệ quản trị cơ sở dữ liệu được viết theo hướng mã nguồn mở và rất
mạnh mẽ. Hệ quản trị cơ sở dữ liệu này đã có hơn 15 năm phát triển, đồng thời kiến trúc
đã được kiểm chứng và tạo được lòng tin với người sử dụng về độ tin cậy, tính toàn vẹn
dữ liệu, và tính đúng đắn.

Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

6


Xây dựng website học và kiểm tra tiếng Anh

Chương 2: PHÂN TÍCH

2.1. Phát biểu bài toán
Đây là website học và kiểm tra tiếng Anh. Người dùng có thể đăng ký tài khoản để
học và kiểm tra tiếng Anh về các kỹ năng: Từ vựng, Ngữ pháp, Nghe, Đọc hiểu.
Bên cạnh đó, người dùng có thể chơi game tiếng Anh và chat với nhau trong các
phòng game.
2.2. Phân tích
2.2.1. Phân tích yêu cầu người dùng và quản trị viên
Người dùng:
- Giao diện dễ sử dụng, có tính thẩm mỹ cao.
- Cho phép người dùng đăng ký thành viên và đảm bảo bí mật thông tin của người
dùng. Có thể dùng tài khoản Facebook để đăng ký.
- Xem và thay đổi thông tin tài khoản.

- Học và kiểm tra các kỹ năng tiếng Anh. Có thể biết số điểm của bài kiểm tra và
biết được những bài học người dùng đã vượt qua.
- Người dùng có thể tìm kiếm các bài học.
- Có thể trao đổi với các thành viên khác.
- Có thể xem bảng xếp hạng những người dùng cao điểm nhất.
Quản trị viên:
- Có thể quản lý các bài học.
- Có thể quản lý các câu hỏi cho từng bài học.
- Có thể quản lý người dùng.
- Thống kê những người dùng mới đăng ký và những người dùng có điểm số cao
nhất.
2.2.2. Biểu đồ ca sử dụng
Các tác nhân

Hình 2.1 Sơ đồ các tác nhân
Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

7


Xây dựng website học và kiểm tra tiếng Anh

- Khách: Là những người truy cập vào hệ thống, không có tài khoản hoặc chưa
đăng nhập.
- Thành viên: Là những người có tài khoản bằng cách đăng ký, đã đăng nhập vào
hệ thống và sử dụng các chức năng mà hệ thống cung cấp.
- Moderator: Là những người được chủ hệ thống cung cấp tài khoản, có quyền
quản lý các bài học, nội dung và các câu hỏi, câu trả lời cho từng bài học.

- Super Moderator: Là quản trị viên cấp cao hơn Moderator, có quyền quản lý
thành viên, quản lý các cấp bậc người dùng và các quyền của Moderator, nhưng không
có quyền quản lý tài khoản của quản trị viên (Moderator, Super Moderator và
Administrator).
- Administrator: Là người quản trị cao nhất của hệ thống, có quyền quản lý tài
khoản của các quản trị viên (Moderator, Super Moderator và Administrator) và các chức
năng của Super Moderator.
Biểu đồ ca sử dụng và các tác nhân
- Khách

Hình 2.2 Biểu đồ use-case của Khách
Xem hướng dẫn sử dụng: Use-case này thực hiện chức năng xem hướng dẫn sử
dụng website.
Bảng 2.1 Use-case – Xem hướng dẫn sử dụng
Tên use-case

Xem hướng dẫn sử dụng

Tác nhân

Khách, Thành viên

Use-case liên quan

Không có use-case nào liên quan đến

Mô tả chung

Cho phép xem hướng dẫn sử dụng website

Điều kiện trước

Không có

Điều kiện sau

- Thành công: Hiển thị hướng dẫn sử dụng website
- Không thành công: Thông báo lỗi

Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

8


Xây dựng website học và kiểm tra tiếng Anh

Đăng ký tài khoản: Use-case này thực hiện chức năng đăng ký tài khoản để trở thành
thành viên.
Bảng 2.2 Use-case – Đăng ký tài khoản
Tên use-case

Đăng ký tài khoản

Tác nhân

Khách, Thành viên

Use-case liên quan

Không có use-case nào liên quan đến

Mô tả chung

Cho phép khách đăng ký tài khoản để trở thành thành viên

Điều kiện trước

Không có

Điều kiện sau

- Thành công: Thông báo tài khoản được tạo thành công.
- Không thành công: Thông báo lỗi.

Thành viên

Hình 2.1 Biểu đồ use-case của Thành viên

Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

9


Xây dựng website học và kiểm tra tiếng Anh

Đăng nhập: Use-case này thực hiện chức năng thành viên đăng nhập vào hệ thống.

Bảng 2.3 Use-case – Đăng nhập
Tên use-case

Đăng nhập

Tác nhân

Thành viên

Use-case liên quan

Không có use-case nào liên quan đến

Mô tả chung

Cho phép thành viên đăng nhập vào hệ thống để sử dụng các chức
năng.

Điều kiện trước

Không có.

Điều kiện sau

- Thành công: Đăng nhập vào hệ thống
- Thất bại: Hiển thị thông báo lỗi và trở về giao form đăng nhập

Đăng xuất: Use-case này thực hiện chức năng thành viên đăng xuất khỏi hệ thống.
Bảng 2.4 Use-case – Đăng xuất
Tên use-case

Đăng xuất

Tác nhân

Thành viên

Use-case liên quan

Đăng nhập

Mô tả chung

Cho phép thành viên đăng nhập vào hệ thống để sử dụng các chức
năng.

Điều kiện trước

Không có.

Điều kiện sau

- Thành công: Đăng nhập vào hệ thống
- Thất bại: Hiển thị thông báo lỗi và trở về giao form đăng nhập

Xem bảng xếp hạng: Use-case này thực hiện chức năng xem bảng xếp hạng những
thành viên có tổng điểm số cao nhất qua các lần kiểm tra.
Bảng 2.5 Use-case – Xem bảng xếp hạng
Tên use-case

Xem bảng xếp hạng

Tác nhân

Thành viên

Use-case liên quan

Đăng nhập

Mô tả chung

Cho phép xem bảng xếp hạng những thành viên có tổng điểm số
cao nhất qua các lần kiểm tra.

Điều kiện trước

Đã đăng nhập tài khoản thành viên.

Điều kiện sau

- Thành công: Hiển thị bảng xếp hạng thành viên.
- Không thành công: Thông báo lỗi.

Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

10

Xây dựng website học và kiểm tra tiếng Anh

Xem trang cá nhân: Use-case này thực hiện chức năng thành viên xem trang cá nhân
của chính mình.
Bảng 2.6 Use-case – Xem trang cá nhân
Tên use-case

Xem trang cá nhân

Tác nhân

Thành viên

Use-case liên quan

Đăng nhập

Mô tả chung

Cho phép thành viên xem trang cá nhân của chính mình.

Điều kiện trước

Đã đăng nhập tài khoản thành viên.

Điều kiện sau

- Thành công: Hiển thị trang cá nhân của thành viên.
- Không thành công: Thông báo lỗi.

Xem thành tích: Use-case này thực hiện chức năng thành viên xem thành tích của chính
mình.
Bảng 2.7 Use-case – Xem thành tích
Tên use-case

Xem thành tích

Tác nhân

Thành viên

Use-case liên quan

Đăng nhập, Xem trang cá nhân

Mô tả chung

Cho phép thành viên xem thành tích của chính mình.

Điều kiện trước

Đã đăng nhập tài khoản thành viên.

Điều kiện sau

- Thành công: Hiển thị thành tích của thành viên.
- Không thành công: Thông báo lỗi.

Cập nhật tài khoản: Use-case này thực hiện chức năng thành viên cập nhật tài khoản

của chính mình.
Bảng 2.8 Use-case – Cập nhật tài khoản
Tên use-case

Cập nhật tài khoản

Tác nhân

Thành viên

Use-case liên quan

Đăng nhập, Xem trang cá nhân

Mô tả chung

Cho phép thành viên cập nhật tài khoản của chính mình.

Điều kiện trước

Đã đăng nhập tài khoản thành viên.

Điều kiện sau

- Thành công: Hiển thị kết quả cập nhật tài khoản của thành viên.
- Không thành công: Thông báo lỗi.

Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

11


Xây dựng website học và kiểm tra tiếng Anh

Học tiếng Anh: Use-case này thực hiện chức năng thành viên học tiếng Anh.
Bảng 2.9 Use-case – Học tiếng Anh
Tên use-case

Học tiếng Anh

Tác nhân

Thành viên

Use-case liên quan

Đăng nhập

Mô tả chung

Cho phép thành viên học tiếng Anh trong hệ thống.

Điều kiện trước

Đã đăng nhập tài khoản thành viên.

Điều kiện sau

- Thành công: Hiển thị nội dung bài học của hệ thống.
- Không thành công: Thông báo lỗi.

Kiểm tra tiếng Anh: Use-case này thực hiện chức năng thành viên kiểm tra kỹ năng
tiếng Anh của mình.
Bảng 2.10 Use-case – Kiểm tra tiếng Anh
Tên use-case

Kiểm tra tiếng Anh

Tác nhân

Thành viên

Use-case liên quan

Đăng nhập, Học tiếng Anh

Mô tả chung

Cho phép thành viên kiểm tra kỹ năng tiếng Anh.

Điều kiện trước

Đã đăng nhập tài khoản thành viên.

Điều kiện sau

- Thành công: Hiển thị nội dung bài kiểm tra tiếng Anh.
- Không thành công: Thông báo lỗi.

Xem kết quả kiểm tra: Use-case này thực hiện chức năng thành viên xem kết quả kiểm
tra của mình.
Bảng 2.11 Use-case – Xem kết quả kiểm tra
Tên use-case

Xem kết quả kiểm tra

Tác nhân

Thành viên

Use-case liên quan

Đăng nhập, Kiểm tra từ vựng, Kiểm tra ngữ pháp, Kiểm tra đọc
hiểu, Kiểm tra nghe, Kiểm tra chung

Mô tả chung

Thành viên xem kết quả kiểm tra sau khi nộp bài.

Điều kiện trước

Đã đăng nhập tài khoản thành viên.

Điều kiện sau

- Thành công: Hiển thị điểm số và kết quả của thành viên.
- Không thành công: Thông báo lỗi.

Sinh viên thực hiện: Thái Văn Lợi

Hướng dẫn: T.S Bùi Thị Thanh Thanh

12