Đồ án xây dựng website hỗ trợ học tiếng anh

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG WEBSITE HỖ TRỢ HỌC TIẾNG ANH
GV HƯỚNG DẪN: TH.S TRẦN THỊ HỒNG YẾN
SINH VIÊN THỰC HIỆN:
NGUYỄN MINH HIẾU – 20520183
ĐẶNG BẢO TRÂM – 205202033
LỚP: SE121.N21

Thành phố Hồ Chí Minh, tháng 06 năm 2023


ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG WEBSITE HỖ TRỢ HỌC TIẾNG ANH
GV HƯỚNG DẪN: TH.S TRẦN THỊ HỒNG YẾN
SINH VIÊN THỰC HIỆN:
NGUYỄN MINH HIẾU – 20520183
ĐẶNG BẢO TRÂM – 205202033
LỚP: SE121.N21

Thành phố Hồ Chí Minh, tháng 06 năm 2023


NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
Người nhận xét
(Ký và ghi rõ họ tên)

Trần Thị Hồng Yến


LỜI CẢM ƠN
Nhóm xin gửi lời cảm ơn tới cơ Trần Thị Hồng Yến, người đã trực tiếp tận tình
hướng dẫn nhóm trong suốt q trình thực hiện đồ án. Nhóm vơ cùng biết ơn sự tận tình
chỉ dẫn của cơ trong q trình nhóm thực hiện đề tài này. Bước đầu tiếp cận các cơng
nghệ mới, nhóm cịn nhiều thiếu sót về mặt kiến thức cũng như kinh nghiệm thực tiễn
nên khơng tránh khỏi nhiều sai sót. Những nhận xét, góp ý chân tình của cơ chính là cơ
sở để nhóm có thể cải tiến và hồn thiện đề tài này một cách tốt nhất. Nếu Không những
lời chỉ bảo tận tình của cơ thì đồ án này của nhóm rất khó để thực hiện.
Trong q trình thực hiện đồ án, nhóm có thể khơng tránh khỏi được sai sót, chúng

em kính mong nhận được sự góp ý, hướng dẫn của cơ để có thể hồn thiện đồ án hơn
nữa, không chỉ dừng lại ở đồ án 1 mà có thể phát triển lên thành đồ án 2.
Chúng em xin gửi lời cảm ơn chân thành nhất đến cô.

TP.HCM, ngày 17 tháng 6 năm 2023
Nhóm sinh viên thực hiện
Nguyễn Minh Hiếu - Đặng Bảo Trâm


MỤC LỤC
TÓM TẮT ĐỒ ÁN ........................................................................................................ 1
CHƯƠNG 1: MỞ ĐẦU ................................................................................................. 3
1.1. Lý do chọn đề tài................................................................................................... 3
1.2. Mục tiêu đề tài....................................................................................................... 4
1.3. Đối tượng nghiên cứu ........................................................................................... 4
1.4. Phạm vi ................................................................................................................. 5
1.5. Phân tích và đánh giá các hướng nghiên cứu đã có .............................................. 5
1.5.1. Phân tích các hướng nghiên cứu và phương pháp đã được áp dụng .............. 5
1.5.2. Đánh giá các ưu điểm và hạn chế của những nghiên cứu này ........................ 5
1.6. Vấn đề còn tồn tại ................................................................................................. 6
1.6.1. Liệt kê những vấn đề chưa được giải quyết.................................................... 6
1.6.2. Đánh giá tầm quan trọng của những vấn đề này và tác động ......................... 6
1.7. Vấn đề cần tập trung và nghiên cứu giải quyết ..................................................... 7
1.7.1. Xác định và trình bày những vấn đề mà đề tài cần tập trung vào................... 7
1.7.2. Giải thích tầm quan trọng và lợi ích ............................................................... 7
1.7.3. Đề xuất phương pháp nghiên cứu và phân tích .............................................. 8
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT............................................................................. 9
2.1. Ngôn ngữ Javascript.............................................................................................. 9
2.2. ReactJS ................................................................................................................ 12
2.3. HTML ................................................................................................................. 14

2.4. CSS ..................................................................................................................... 16
2.5. NodeJS ................................................................................................................ 18


2.6. MongoDB............................................................................................................ 20
2.7. ExpressJS ............................................................................................................ 21
2.8. Mongoose ............................................................................................................ 22
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG .............................................. 23
3.1. Phân tích yêu cầu ................................................................................................ 23
3.1.1. Yêu cầu chức năng........................................................................................ 23
3.1.2. Yêu cầu phi chức năng ................................................................................. 24
3.2. Xây dựng hệ thống .............................................................................................. 25
3.2.1. Kiến trúc hệ thống ............................................................................................ 25
3.2.2. Mô tả các thành phần trong hệ thống ............................................................... 25
3.3. Thiết kế sơ đồ Use case ....................................................................................... 27
3.3.1. Sơ đồ Use case .............................................................................................. 27
3.3.2. Danh sách Actor ........................................................................................... 29
3.3.3. Danh sách Use case ...................................................................................... 29
3.3.4. Danh sách đặc tả Use case ............................................................................ 30
3.3.4.1. Use case Đăng nhập ................................................................................... 30
3.4. Thiết kế dữ liệu ................................................................................................... 47
3.4.1. Sơ đồ Logic................................................................................................... 47
3.4.2. Mô tả chi tiết từng bảng dữ liệu.................................................................... 49
CHƯƠNG 4: XÂY DỰNG TRANG WEB ................................................................ 55
4.1. Danh sách giao diện ............................................................................................ 55
4.2. Chi tiết giao diện ................................................................................................. 56
4.2.1. Login ............................................................................................................. 56


4.2.2. Sign Up ......................................................................................................... 58

4.2.3. Forgot Pass ................................................................................................... 59
4.2.4. Verify ............................................................................................................ 60
4.2.5. Home ............................................................................................................ 61
4.2.6. ChangInfor .................................................................................................... 62
4.2.7. Courses ......................................................................................................... 64
4.2.8. Course Detail ................................................................................................ 65
4.2.9. Vocab ............................................................................................................ 67
4.2.10. Game1 ......................................................................................................... 68
4.2.11. Game2 ......................................................................................................... 69
4.2.12. Game3 ......................................................................................................... 70
4.2.13. Game4 ......................................................................................................... 71
4.2.14. Game5 ......................................................................................................... 72
4.2.15. Big test ........................................................................................................ 73
4.2.16. Video .......................................................................................................... 74
4.2.17. MiniGame ................................................................................................... 75
4.2.18. Score ........................................................................................................... 76
4.2.19. League ........................................................................................................ 77
KẾT LUẬN .................................................................................................................. 78
TÀI LIỆU THAM KHẢO .......................................................................................... 80


DANH MỤC HÌNH
Hình 2.1. Logo Javascript................................................................................................ 9
Hình 2.2. Logo ReactJS ................................................................................................. 12
Hình 2.3. Logo HTML .................................................................................................. 14
Hình 2.4. Logo CSS ...................................................................................................... 16
Hình 2.5. Logo NodeJS ................................................................................................. 18
Hình 2.6. Logo MongoDB ............................................................................................ 20
Hình 2.7. Logo ExpressJS ............................................................................................. 21
Hình 2.8. Logo Mongoose ............................................................................................. 22

Hình 3.1. Kiến trúc hệ thống ......................................................................................... 25
Hình 3.2. Sơ đồ Use case đối với người dùng chưa đăng nhập..................................... 27
Hình 3.3. Sơ đồ Use case đối với người dùng đã đăng nhập......................................... 28
Hình 3.4. Sơ đồ Logic ................................................................................................... 47
Hình 4.1. Giao diện trang Login.................................................................................... 56
Hình 4.2. Giao diện trang Sign Up ................................................................................ 58
Hình 4.3. Giao diện trang Forgot Password .................................................................. 59
Hình 4.4. Giao diện trang Verify ................................................................................... 60
Hình 4.5. Giao diện trang Home ................................................................................... 61
Hình 4.6. Giao diện trang ChangeInfor ......................................................................... 62
Hình 4.7. Giao diện trang Courses ................................................................................ 64
Hình 4.8. Giao diện trang CoursesDetail ...................................................................... 65
Hình 4.9. Giao diện trang Vocab ................................................................................... 67
Hình 4.10. Giao diện trang Game1................................................................................ 68
Hình 4.11. Giao diện trang Game 2 ............................................................................... 69
Hình 4.12. Giao diện trang Game3................................................................................ 70
Hình 4.13. Giao diện trang Game 4............................................................................... 71


Hình 4.14. Giao diện trang Game5................................................................................ 72
Hình 4.15. Giao diện trang Big test ............................................................................... 73
Hình 4.16. Giao diện trang Video .................................................................................. 74
Hình 4.17. Giao diện trang MiniGame .......................................................................... 75
Hình 4.18. Giao diện trang Score .................................................................................. 76
Hình 4.19. Giao diện trang League ............................................................................... 77


DANH MỤC BẢNG
Bảng 3.1. Yêu cầu chức năng ........................................................................................ 23
Bảng 3.2. Bảng mô tả các thành phần trong hệ thống. .................................................. 25

Bảng 3.3. Danh sách các Actors .................................................................................... 29
Bảng 3.4. Danh sách các Use case ................................................................................ 29
Bảng 3.5. Đặc tả Use case Đăng nhập ........................................................................... 30
Bảng 3.6. Đặc tả Use case Đăng ký .............................................................................. 32
Bảng 3.7. Đặc tả Use case Quên mật khẩu .................................................................... 33
Bảng 3.8. Đặc tả Use case thay đổi thông tin ................................................................ 34
Bảng 3.9. Đặc tả Use case đăng xuất ............................................................................ 36
Bảng 3.10. Đặc tả Use case Xem bảng xếp hạng tổng thể ............................................ 37
Bảng 3.11. Đặc tả Use case Xem trang giới thiệu trang web ........................................ 37
Bảng 3.12. Đặc tả Use case Xem khóa học ................................................................... 39
Bảng 3.13. Đặc tả Use case Liên hệ .............................................................................. 40
Bảng 3.14. Đặc tả Use case Xem danh sách từ vựng .................................................... 41
Bảng 3.15. Đặc tả Use case xem danh sách bài học ...................................................... 42
Bảng 3.16. Đặc tả Use case xem bảng xếp hạng khóa học ........................................... 42
Bảng 3.17. Đặc tả Use case bắt đầu khóa học ............................................................... 43
Bảng 3.18. Đặc tả Use case chơi trò chơi ...................................................................... 44
Bảng 3.19. Danh sách bảng trong cơ sở dữ liệu ............................................................ 48
Bảng 3.20. Mô tả chi tiết bảng NGUOIDUNG ............................................................. 49
Bảng 3.21. Mô tả chi tiết bảng ND_KH ........................................................................ 49
Bảng 3.22. Mô tả chi tiết bảng KHOAHOC ................................................................. 50
Bảng 3.23. Mô tả chi tiết bảng BAIHOC ...................................................................... 50
Bảng 3.24. Mô tả chi tiết bảng LICHSUHOCTAP ....................................................... 51
Bảng 3.25. Mô tả chi tiết bảng BAIKIEMTRA ............................................................ 51
Bảng 3.26. Mô tả chi tiết bảng TUVUNG..................................................................... 52
Bảng 3.27. Mô tả chi tiết bảng CAUHOI_TUVUNG ................................................... 52


Bảng 3.28. Mô tả chi tiết bảng CAUHOI ...................................................................... 52
Bảng 3.29. Mô tả chi tiết bảng TROCHOI.................................................................... 53
Bảng 3.30. Mô tả chi tiết bảng LICHSUTROCHOI ..................................................... 53

Bảng 3.31. Mô tả chi tiết bảng BH_TC ......................................................................... 54
Bảng 4.1. Danh sách các màn hình ............................................................................... 55


TĨM TẮT ĐỒ ÁN
Vấn đề nghiên cứu:
• Khó khăn trong việc học tiếng Anh cho trẻ em: Học tiếng Anh có thể là một thách
thức đối với trẻ em, đặc biệt là trong mơi trường học tập truyền thống.
• Sự quan trọng của trò chơi và hoạt động tương tác: Trẻ em thường hứng thú và học
hỏi tốt thông qua trị chơi và hoạt động tương tác.
• Sự phát triển toàn diện cho trẻ em: Đồ án tập trung vào việc xây dựng một trang
web không chỉ giúp trẻ học tiếng Anh mà còn phát triển các kỹ năng khác.
Các hướng tiếp cận và giải quyết vấn đề:
• Phương pháp thực hiện: 
o Tìm hiểu công nghệ: Reactjs, Nodejs, Figma. Thu thập yêu cầu thông qua:
khảo sát các website tương tự trên thị trường, tạo các form khảo sát để lấy
thêm các yêu cầu của mọi người.
o Phân tích và xác định yêu cầu. Thiết kế: đối tượng, dữ liệu, giao diện.
o Cài đặt, kiểm thử, hồn thiện sản phẩm.
• Cơng nghệ sử dụng: figma, Javascript, HTML5, CSS3, ReactJS, ExpressJS,
Swagger, Github, MongoDB, Mongoose, Firebase.

1


Một số kết quả đạt được:
Thiết kế trang web hỗ trợ học tiếng Anh: Đồ án đã tạo ra một trang web dễ sử dụng,
thân thiện với trẻ em. Giao diện đơn giản, màu sắc sáng tạo và hình ảnh hấp dẫn đã được
sử dụng để thu hút sự quan tâm và tham gia của trẻ. Cung cấp các bài học, bài kiểm tra,
lưu kết quả, xếp hạng và đề xuất khóa học cho học viên.

Nội dung báo cáo:
Nội dung đồ án được trình bày trong 5 chương như sau:
CHƯƠNG 1. MỞ ĐẦU: Xác định lí do, mục tiêu đề tài, đối tượng, phạm vi và
phương pháp nghiên cứu, phân tích và đánh giá hướng nghiên cứu đã có, phân tích
các vấn đề cịn tồn tại và đề ra các hướng giải quyết.
CHƯƠNG 2. CƠ SỞ LÍ THUYẾT: Giới thiệu các công nghệ và ngôn ngữ đã sử
dụng gồm: ngôn ngữ Javascript, công nghệ ReactJS, công nghệ NodeJS.
CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG: Phân tích u cầu, sơ đồ
use case, sơ đồ hoạt động và thiết kế dữ liệu cho website hỗ trợ học tiếng Anh.
CHƯƠNG 4. XÂY DỰNG ỨNG DỤNG: Xây dựng website hỗ trợ học tiếng Anh
được mô tả thông qua danh sách và chi tiết các màn hình.
CHƯƠNG 5. KẾT LUẬN: Trình bày thuận lợi, ưu điểm, nhược điểm của đồ án
và hướng phát triển trong tương lai của đồ án.

2


CHƯƠNG 1: MỞ ĐẦU
1.1. Lý do chọn đề tài
Trong xu thế tồn cầu hóa hiện nay, việc các nước trên thế giới có một ngơn ngữ
chung để giao tiếp là một nhu cầu tất yếu. Trong số các ngôn ngữ phổ biến thì tiếng
Anh có độ phổ biến đứng hàng thứ ba (sau tiếng Trung và tiếng Tây Ban Nha), tuy
nhiên dường như tiếng Anh đang là “văn hóa thế hệ” quốc tế. Đa số các nước trên
thế giới đều xem việc học tiếng Anh là ưu tiên hàng đầu khi nói đến học ngoại ngữ.
Ngồi ra, hiện nay hầu hết các bài nghiên cứu khoa học, cập nhật công nghệ hiện đại
hay tài liệu hướng dẫn đều có bản viết bằng tiếng Anh. Vì vậy để có thể bắt kịp xu
hướng phát triển của xã hội thì việc học tiếng Anh là vơ cùng cần thiết.
Bên cạnh đó, ngày nay cơng nghệ thơng tin nói chung và Internet nói riêng đang
ngày một phát triển mạnh mẽ và trở thành một phần không thể thiếu trong cuộc sống.
Những năm gần đây, đặc biệt là sau cơn đại dịch Covid-19, cụm từ “đào tạo từ xa”

hay “học trực tuyến”, “học online” đã khơng cịn trở nên xa lạ với mọi người nữa.
Phương thức học tập này không chỉ hỗ trợ mọi người có thể học an tồn trong mùa
dịch mà cịn đem lại những lợi ích to lớn về thời gian, công sức và cả tiền bạc cho
tất cả mọi người trong việc học khi dịch bệnh đã qua đi.
Kết hợp hai vấn đề trên ta có thể thấy, việc học anh văn trực tuyến đang là nhu
cầu tất yếu. Nắm bắt được thực trạng hầu hết mọi người đều mong muốn nâng cao
trình độ tiếng Anh nhưng lại khơng có thời gian tới lớp học hoặc không đủ điều kiện
tài chính cho việc theo học một lớp ngoại ngữ chính khóa, chúng em quyết định chọn
đề tài Xây dựng website hỗ trợ học tiếng Anh để giải quyết vấn đề này.
Chỉ cần một đường truyền Internet và một số thao tác đơn giản, chúng ta vẫn có
thể tự luyện khả năng tiếng Anh của mình.

3


1.2. Mục tiêu đề tài
Xây dựng một website hỗ trợ học tiếng Anh trực tuyến, thân thiện, dễ sử dụng,
giao diện trực quan, thú vị. Hỗ trợ quản lý tài khoản để người dùng đăng nhập và lưu
quá trình học của người dùng. Hỗ trợ người học trau dồi kỹ năng nghe nói đọc viết
tiếng Anh thơng qua các trị chơi quen thuộc như: ghép từ, ghép câu, nhìn hình đốn
nghĩa, nhìn nghĩa chọn hình, lật cặp hình giống nhau. Cung cấp tính năng làm kiểm
tra và xem lại kết quả kiểm tra giúp người dùng kiểm tra kiến thức.
1.3. Đối tượng nghiên cứu
Đối tượng nghiên cứu của đồ án là trẻ em trong độ tuổi học tiếng Anh, thường
là từ 5 đến 12 tuổi. Đây là giai đoạn phát triển ngôn ngữ quan trọng trong cuộc sống
của trẻ, và việc hỗ trợ họ học tiếng Anh thông qua các trị chơi và bài học đơn giản có
thể giúp tăng cường khả năng ngôn ngữ, từ vựng, ngữ pháp và giao tiếp của trẻ.
Trẻ em trong độ tuổi này thường có sự tị mị và khả năng học hỏi cao. Họ có thể
hứng thú với việc học qua các trị chơi và hoạt động tương tác, như làm bài tập trắc
nghiệm, ghép hình, xếp từ, nghe và phản xạ lại, tìm lỗi sai, và thực hiện các hoạt động

nhóm. Đồ án sẽ tập trung vào việc thiết kế và phát triển một trang web dễ sử dụng,
thân thiện với trẻ em, với các chức năng và nội dung phù hợp cho độ tuổi của trẻ. Giao
diện đơn giản, màu sắc sáng tạo và hình ảnh hấp dẫn sẽ được sử dụng để thu hút sự
quan tâm và tham gia của trẻ em.
Nội dung học tiếng Anh sẽ được tổ chức thành các bài học đơn giản và có cấu
trúc, tương tác và phù hợp với trình độ của trẻ. Các bài học có thể bao gồm từ vựng,
ngữ pháp, cấu trúc câu, phát âm và các hoạt động luyện nghe và nói. Trị chơi sẽ được
tích hợp vào các bài học để tăng cường sự hứng thú và tiếp thu kiến thức của trẻ.
Mục tiêu chính của đồ án là cung cấp một môi trường học tập thú vị và hấp dẫn
cho trẻ em, giúp trẻ phát triển kỹ năng ngôn ngữ tiếng Anh một cách tự nhiên và đáng
yêu.

4


1.4. Phạm vi
• Phạm vi mơi trường: triển khai sản phẩm trên mơi trường web.
• Phạm vi chức năng:
o Học tiếng Anh trực tuyến thơng qua các trị chơi đơn giản.
o Làm kiểm tra, xem lại kết quả kiểm tra và xếp hạng kết quả học tập.
o Quản lý tài khoản của người dùng.
1.5. Phân tích và đánh giá các hướng nghiên cứu đã có
1.5.1. Phân tích các hướng nghiên cứu và phương pháp đã được áp dụng
Các tác giả ngoài nước đã áp dụng các hướng nghiên cứu và phương pháp đa
dạng để nghiên cứu lập trình web tiếng Anh cho trẻ em. Các hướng nghiên cứu và
phương pháp chủ yếu bao gồm:
Sử dụng công nghệ mới: Các tác giả đã tìm cách áp dụng cơng nghệ mới như
trực tuyến, thực tế ảo, trị chơi hoặc trí tuệ nhân tạo để tạo ra môi trường học tập
tiếng Anh và lập trình web tương tác và thú vị cho trẻ em.
Phát triển các ứng dụng và công cụ học tập: Các tác giả đã phát triển các ứng

dụng và công cụ học tập đa phương tiện nhằm giúp trẻ em học tiếng Anh và lập trình
web một cách hiệu quả. Các ứng dụng này thường có giao diện đồ họa thân thiện và
các hoạt động thú vị để tăng cường sự tham gia và quan tâm của trẻ em.
1.5.2. Đánh giá các ưu điểm và hạn chế của những nghiên cứu này
Các nghiên cứu của tác giả ngoài nước đã mang lại một số ưu điểm và hạn chế
nhất định. Các ưu điểm bao gồm:
Sự sáng tạo và đổi mới: Các tác giả đã đưa ra các ý tưởng mới và sáng tạo trong
việc kết hợp lập trình web và học tiếng Anh cho trẻ em. Các phương pháp và công

5


nghệ mới đã được áp dụng để cung cấp một trải nghiệm học tập tốt hơn và hấp dẫn
hơn.
Mở rộng phạm vi nghiên cứu: Các tác giả ngoài nước đã đưa ra các phương
pháp và quan điểm mới trong lĩnh vực này, mở rộng phạm vi nghiên cứu và tạo điều
kiện cho những nghiên cứu tương lai.
1.6. Vấn đề còn tồn tại
1.6.1. Liệt kê những vấn đề chưa được giải quyết
Trong lĩnh vực xây dựng web học tiếng Anh cho trẻ em, có một số vấn đề chưa
được giải quyết hoặc đang tồn tại. Dưới đây là một số ví dụ về những vấn đề này:
Thiết kế giao diện người dùng hấp dẫn và thân thiện với trẻ em: Đối tượng
người dùng là trẻ em đòi hỏi một giao diện người dùng được thiết kế đơn giản, màu
sắc tươi sáng và có tính tương tác cao. Tuy nhiên, việc tạo ra giao diện hấp dẫn và
đồng thời đảm bảo tính tương thích với nhiều thiết bị và kích thước màn hình khác
nhau vẫn là một thách thức.
Nội dung phù hợp với lứa tuổi và trình độ của trẻ em: Việc xây dựng nội dung
phù hợp và hấp dẫn cho trẻ em trong việc học tiếng Anh là một vấn đề quan trọng.
Cần đảm bảo rằng nội dung học tập phù hợp với từng lứa tuổi và trình độ của trẻ em,
vừa giúp trẻ hứng thú với việc học, vừa đảm bảo tính chính xác và hợp lý của thơng

tin.
Đáp ứng các yêu cầu về quyền riêng tư và an toàn trực tuyến: Trẻ em đang sử
dụng web học tiếng Anh có yêu cầu đặc biệt về quyền riêng tư và an tồn trực tuyến.
Việc bảo vệ thơng tin cá nhân của trẻ em và đảm bảo an toàn khi truy cập vào Website
là một vấn đề quan trọng cần được xem xét.
1.6.2. Đánh giá tầm quan trọng của những vấn đề này và tác động
Tầm quan trọng: Việc giải quyết những vấn đề này là quan trọng vì trẻ em là
một đối tượng người dùng đặc biệt và yêu cầu một giao diện người dùng và nội dung

6


phù hợp với họ. Nếu không thể đáp ứng được các yêu cầu và mong đợi của trẻ em,
Website sẽ không đạt được hiệu quả học tập và sự tham gia của trẻ.
Tác động: Những vấn đề chưa được giải quyết có thể tạo ra tác động tiêu cực
đến trải nghiệm người dùng của trẻ em, từ việc không hứng thú với nội dung đến
khó khăn trong việc sử dụng giao diện người dùng. Điều này có thể dẫn đến mất mát
người dùng, giảm hiệu quả học tập và tiếp cận thông tin.
Đáng quan tâm về mặt đạo đức và pháp lý: Việc không đáp ứng các yêu cầu về
quyền riêng tư và an tồn trực tuyến có thể dẫn đến vấn đề đạo đức và pháp lý. Bảo
vệ thông tin cá nhân của trẻ em và đảm bảo an tồn trong q trình sử dụng Website
là một trách nhiệm quan trọng và cần được coi trọng.
1.7. Vấn đề cần tập trung và nghiên cứu giải quyết
1.7.1. Xác định và trình bày những vấn đề mà đề tài cần tập trung vào
Xây dựng giao diện người dùng đáp ứng (Responsive User Interface): Với sự
phát triển của thiết bị di động và đa nền tảng, việc xây dựng giao diện web linh hoạt,
tương thích với nhiều loại màn hình và thiết bị là một vấn đề quan trọng. Đề tài của
nhóm tập trung vào phân tích, thiết kế và triển khai các phương pháp và kỹ thuật để
xây dựng giao diện người dùng đáp ứng một cách hiệu quả.
Tối ưu hóa tốc độ tải trang (Page Load Speed Optimization): Hiệu suất và tốc

độ tải trang là yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng và SEO
(Search Engine Optimization). Nghiên cứu cách tối ưu hóa tốc độ tải trang bằng cách
sử dụng kỹ thuật caching, tối ưu hóa mã nguồn và tải dữ liệu hiệu quả có thể là một
phần quan trọng trong đề tài của nhóm em.
1.7.2. Giải thích tầm quan trọng và lợi ích
Nâng cao trải nghiệm người dùng: Xây dựng giao diện người dùng đáp ứng sẽ
giúp đảm bảo rằng người dùng có trải nghiệm tốt trên mọi thiết bị và màn hình, từ
đó tăng cường tương tác và tăng tỷ lệ chuyển đổi.

7


Tăng cường hiệu suất và SEO: Tối ưu hóa tốc độ tải trang giúp cải thiện hiệu
suất Website, giảm tỷ lệ thoát trang và cải thiện xếp hạng trang trên các cơng cụ tìm
kiếm, đồng thời thu hút lượng truy cập lớn hơn.
1.7.3. Đề xuất phương pháp nghiên cứu và phân tích
Để tập trung và nghiên cứu giải quyết các vấn đề đã đề xuất, nhóm sử dụng các
phương pháp nghiên cứu và phân tích sau đây:
Đánh giá các cơng nghệ mới và các tiêu chuẩn web: Nghiên cứu và phân tích
các cơng nghệ mới như HTML5, CSS3, JavaScript frameworks, responsive design,
và các tiêu chuẩn web khác để xác định những công nghệ phù hợp và tiềm năng cho
đề tài của nhóm.
Tiến hành thử nghiệm và đánh giá: Xây dựng và triển khai các Website tiếng
Anh với các phương pháp và kỹ thuật đã nghiên cứu. Tiến hành các bài thử nghiệm
để đánh giá hiệu quả của các phương pháp và kỹ thuật đã áp dụng.
Tổ chức khảo sát và phỏng vấn: Tiến hành khảo sát và phỏng vấn người dùng
để hiểu những yêu cầu, nhận định, và mong đợi của họ đối với Website tiếng Anh.
Sử dụng kết quả này để cải thiện và điều chỉnh đề tài của nhóm.

8

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1. Ngơn ngữ Javascript

Hình 2.1. Logo Javascript
• Javascript là gì?
o Javascript chính là một ngơn ngữ lập trình web rất phổ biến ngày nay.
Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website
trở nên sống động hơn. Chúng cũng đóng vai trò tương tự như một phần của
website, cho phép Client-side Script từ người dùng tương tự máy chủ (Nodejs)
để tạo ra những website động. [7]
• Lịch sử phát triển của Javascript:
o Brendan Eich chính là người đã phát triển Javascript tại Netscape với tiền
thân là Mocha. Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới
đổi thành JavaScript.
o Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành và
đến năm 1999 thì ECMAScript 3 được ra mắt.

9


o Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng,
đồng thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với lập
trình viên. [7]
• Cách hoạt động của javascript là gì?
o Thơng thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặc
chúng được tham chiếu qua file .js hoặc .JavaScript.
o Đây là một ngơn ngữ đến từ phía Client nên Script sẽ được download về máy
client khi truy cập.

o Tại đây, chúng sẽ được hệ thống xử ý. Vì vậy, bạn không cần phải tải về máy
server rồi chờ cho chúng xử lý xong mới phản hồi được kết quả đến client.
• Javascript dùng để làm gì?
o Bên cạnh việc tìm hiểu javascript là ngơn ngữ gì thì chúng được sử dụng để
làm gì cũng rất quan trọng. Việc nắm bắt được mục đích của ngơn ngữ đặc
biệt này sẽ giúp bạn dễ dàng sử dụng chúng hơn trong cơng việc.
o Ưu nhược điểm của ngơn ngữ lập trình Javascript: Là một ngơn ngữ lập trình
rất phổ biến hiện nay, Javascript có cho mình rất nhiều ưu điểm nổi bật. Tuy
nhiên, bên cạnh những ưu điểm đó thì ngơn ngữ lập trình này cũng có những
nhược điểm cần được lưu ý.
• Ưu điểm:
o Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách
nhanh chóng hơn.
o Những trình duyệt web có thể dịch thơng qua HTML mà không cần sử dụng
đến một compiler.
o JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau.

10


o Được các chuyên gia đánh giá là một loại ngơn ngữ lập trình nhẹ và nhanh
hơn nhiều so với các ngơn ngữ lập trình khác.
o JS cịn có thể được gắn trên một số các element hoặc những events của các
trang web.
o Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương
tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.
o Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những input
thay vì cách kiểm tra thủ công thông qua hoạt động truy xuất database.
o Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop,
Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu

tính năng).
o Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau.
• Nhược điểm:
o JS Code Snippet khá lớn.
o JS dễ bị các hacker và scammer khai thác hơn.
o JS cũng khơng có khả năng đa luồng hoặc đa dạng xử lý.
o Có thể được dùng thực thi những mã độc ở trên máy tính của người sử dụng.
o Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự
không đồng nhất.
o JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối
mạng.

11


2.2. ReactJS

Hình 2.2. Logo ReactJS
• (react.dev, 2023) Về cơ bản, các tính năng của reactJS thường xuất phát từ việc
tập trung các phần mềm riêng lẻ, cho phép các developer có chức năng phá vỡ
giao diện của người dùng từ một cách phức tạp và biến nó trở thành các phần mềm
đơn giản. Hiểu đơn giản thì các render dữ liệu khơng chỉ được thực hiện ở vị trí
server mà cịn ở vị trí client khi sử dụng reactJS. [4]
• Hiện nay, reactJS thường được dùng để thiết kế bố cục cho trang web, nhưng hạn
chế đó chính là cấu trúc khó. Thay vào đó sử dụng JSX và nhúng vào các đoạn
HTML và javascript, bạn sẽ thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu
các code khi biên soạn, vừa giúp ích cho người lập trình tiện cho việc biên dịch.
• Ưu điểm của ReactJS:
o Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các
component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất

nhiều. Reactjs cũng tính tốn những thay đổi nào cần cập nhật lên DOM và
chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trên
DOM mà nhiều chi phí.

12


o Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc
biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và
Javascript. Ta có thể thêm vào các đoạn HTML vào trong hàm render mà
không cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển
đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến
đổi JSX.
o Nó có nhiều cơng cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt
ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ
dàng hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào
virtual DOM như thể bạn đang xem cây DOM thông thường.
o Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là
tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang
đều thực hiện ở client, thì người dùng sẽ phải chờ cho trang được khởi tạo và
hiển thị lên. Điều này thực tế là chậm. Hoặc nếu giả sử người dùng vơ hiệu
hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa
render ở ngồi trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi
HTML mà server trả về.
o Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao
diện vì virtual DOM được cài đặt hoàn toàn bằng JS.
o Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho
bảo trì và sửa lỗi.
• Nhược điểm của ReactJS:
o Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải

là một MVC framework như những framework khác. Đây chỉ là thư viện của
Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model và

13


Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2way binding hay là Ajax. [5]
o React khá nặng nếu so với các framework khác React có kích thước tương
tương với Angular (Khoảng 35KB so với 39KB của Angular). Trong khi đó
Angular là một framework hồn chỉnh.
2.3. HTML

Hình 2.3. Logo HTML
• Tổng quan:
o HTML (hay Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản.
Nó hỗ trợ người dùng xây dựng cấu trúc các thành phần có trong trang web
hoặc ứng dụng. Cùng với đó chúng cũng giúp trang web phân chia các đoạn
văn, links, heading, blockquotes. [7]
o HTML không được coi là một ngơn ngữ lập trình. Như vậy, nó khơng thể tạo
ra các chức năng “động”. Nó chỉ được sử dụng để tạo nên bố cục và định dạng
trang web. Khi làm việc cùng HTML, người ta sẽ dùng cấu trúc code đơn giản

14