Đồ án xây dựng website hỗ trợ học tiếng anh cho người đi làm

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

XÂY DỰNG WEBSITE HỖ TRỢ HỌC TIẾNG ANH
CHO NGƯỜI ĐI LÀM

GV HƯỚNG DẪN: TS. Đỗ Thị Thanh Tuyền
SV THỰC HIỆN: Nguyễn Khánh Huyền – 20520558

TP. HỒ CHÍ MINH, 2023


LỜI CẢM ƠN
Em xin chân thành gửi lời cảm ơn đến cơ Đỗ Thị Thanh Tuyền vì đã giúp đỡ
và hướng dẫn em trong suốt q trình hồn thành đồ án xây dựng Website Hỗ trợ học
tiếng Anh cho người đi làm. Cảm ơn cô đã dành thời gian giúp em hiểu rõ hơn về chủ
đề, giải đáp thắc mắc, gợi ý hướng giải quyết các vấn đề cũng như các hướng phát
triển để đồ án trở nên hoàn thiện hơn.
Nhờ vào sự giúp đỡ tận tình đó, em đã hồn thành đồ án này một cách tốt nhất
có thể. Bên cạnh đó, em cũng trao dồi được nhiều hơn các kĩ năng cứng và cả các kỹ
năng mềm khác như kỹ năng tư duy, giải quyết vấn đề, lên kế hoạch và ghi chép. Em
chân thành cảm ơn những lời động viên, tư vấn và sự quan tâm của cơ dành cho em.
Những lời động viên đó đã giúp em có thêm động lực để hồn thành đồ án, cũng như
dần ổn định trên hướng đi của mình. Em rất mong mình sẽ có cơ hội nhận được sự cố
vấn, hướng dẫn của cô trong tương lai.

Sinh viên thực hiện: Nguyễn Khánh Huyền.

MSSV: 20520558.

2


MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI .........................................................................12
1.1. Lí do chọn đề tài .............................................................................................12
1.2. Mục đích nghiên cứu ......................................................................................12
1.3. Phạm vi ứng dụng ..........................................................................................13
1.4. Đối tượng sử dụng ..........................................................................................14
CHƯƠNG 2: CƠNG NGHỆ VÀ PHƯƠNG PHÁP THỰC HIỆN ..........................15
2.1. Các cơng nghệ, thư viện, ngôn ngữ, công cụ được sử dụng ..........................15
2.1.1. Các ngôn ngữ: Typescript, TSX, CSS/SCSS ..........................................15
2.1.2. Công nghệ/thư viện: React, Redux, Firebase ..........................................16
2.1.3. Các công cụ: Github, Figma, Visual Studio Code ..................................18
2.1.4. Các thư viện khác ....................................................................................18
2.2. Phương pháp phát triển ..................................................................................18
2.3. Kết quả mong đợi ...........................................................................................19
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ...............................................20
3.1. Khảo sát ..........................................................................................................20
3.1.1. Khảo sát giao diện người dùng qua form: ...............................................20
3.1.2. Khảo sát các chức năng qua các Website liên quan:...............................22
3.2. Use-case .........................................................................................................24
3.2.1. Use-case “Đăng nhập” ............................................................................28
3.2.2. Use-case “Đăng kí” .................................................................................30
3.2.3. Use-case “Quên mật khẩu” .....................................................................31
3.2.4. Use-case “Cập nhật thông tin cá nhân” ...................................................32
3.2.5. Use-case “Đổi mật khẩu” ........................................................................33

3


3.2.6. Use-case “Lấy gợi ý lộ trình học” ...........................................................35
3.2.7. Use-case “Học theo lộ trình” ..................................................................36
3.2.8. Use-case “Luyện tập”..............................................................................37
3.2.9. Use-case “Đăng bài viết” ........................................................................38
3.2.10. Use-case “Yêu thích bài viết” ...............................................................40
3.2.11. Use-case “Bình luận” ............................................................................41
3.2.12. Use-case “Thêm lộ trình học” ...............................................................42
3.2.13. Use-case “Cập nhật lộ trình học” ..........................................................43
3.2.14. Use-case “Xóa lộ trình học”..................................................................45
3.2.15. Use-case “Thêm tài liệu” ......................................................................46
3.2.16. Use-case “Cập nhật tài liệu” .................................................................47
3.2.17. Use-case “Xóa tài liệu” .........................................................................49
3.2.18. Use-case “Thêm bài luyện tập” .............................................................50
3.2.19. Use-case “Cập nhật bài luyện tập” ........................................................51
3.2.20. Use-case “Xóa bài luyện tập” ...............................................................53
3.3. Thiết kế...........................................................................................................54
3.3.1. Thiết kế giao diện ....................................................................................54
3.3.2. Thiết kế dữ liệu .......................................................................................57
3.3.3. Thiết kế kiến trúc ....................................................................................57
CHƯƠNG 4: CÀI ĐẶT ............................................................................................59
4.1. Màn hình “Đăng nhập” ..................................................................................59
4.2. Màn hình “Đăng kí” .......................................................................................61
Màn hình “Qn mật khẩu” ..................................................................................63
4.3. Màn hình “Onboarding” .................................................................................65

4

4.4. Màn hình “Gợi ý lộ trình học” .......................................................................67
4.5. Màn hình “Trang chủ” ...................................................................................69
4.6. Màn hình “Mơ tả bài học” ..............................................................................70
4.7. Màn hình “Học theo lộ trình”.........................................................................72
4.8. Màn hình “Tổng kết bài học” .........................................................................74
4.9. Màn hình “Luyện tập” ....................................................................................76
4.10. Màn hình “Mơ tả bài luyện tập”...................................................................78
4.11. Màn hình “Làm bài luyện tập” .....................................................................80
4.12. Màn hình “Kết quả bài luyện tập” ...............................................................82
4.13. Màn hình “Chi tiết kết quả bài luyện tập” ...................................................84
4.14. Màn hình “Tài liệu” .....................................................................................86
4.15. Màn hình “Chi tiết tài liệu” ..........................................................................88
4.16. Màn hình “Diễn đàn” ...................................................................................90
4.17. Màn hình “Tạo bài viết mới” .......................................................................92
4.18. Màn hình “Chi tiết bài viết” .........................................................................94
4.19. Màn hình “Thơng tin cá nhân” .....................................................................96
4.20. Màn hình hộp thoại “Cập nhật thơng tin cá nhân” .......................................98
4.21. Màn hình hộp thoại “Đổi mật khẩu” ............................................................99
4.22. Màn hình “Quản lý lộ trình học” ...............................................................100
4.23. Màn hình hộp thoại “Thêm lộ trình học mới”............................................101
4.24. Màn hình “Chi tiết lộ trình học” ................................................................102
4.25. Màn hình hộp thoại “Thêm chặng mới” ....................................................104
4.26. Màn hình hộp thoại “Thêm câu mới” ........................................................105
4.27. Màn hình “Quản lý tài liệu” .......................................................................106

5


4.28. Màn hình hộp thoại “Thêm tài liệu mới” ...................................................108

4.29. Màn hình “Chi tiết tài liệu” ........................................................................109
4.30. Màn hình hộp thoại “Thêm thẻ mới” .........................................................110
4.31. Màn hình “Quản lý bài luyện tập” .............................................................112
4.32. Màn hình hộp thoại “Thêm bài luyện tập mới” .........................................113
4.33. Màn hình “Chi tiết bài luyện tập” ..............................................................114
4.34. Màn hình hộp thoại “Thêm câu hỏi mới” ..................................................116
CHƯƠNG 5: KẾT LUẬN ......................................................................................118
5.1. Kết quả ........................................................................................................118
5.2. Ưu điểm/Nhược điểm...................................................................................118
5.2.1. Ưu điểm .................................................................................................118
5.2.2. Nhược điểm ...........................................................................................118
5.3. Hướng phát triển ..........................................................................................119

6


MỤC LỤC HÌNH ẢNH

Hình 3.1 Khảo sát người dùng về màu sắc chủ đề ...................................................20
Hình 3.2 Khảo sát người dùng về phong cách .........................................................21
Hình 3.3 Khảo sát người dùng về phơng chữ ..........................................................21
Hình 3.4 Khảo sát người dùng về vị trí thanh điều hướng.......................................22
Hình 3.5 Hình ảnh use-case Hệ thống Hỗ trợ học tiếng Anh cho người đi làm ......25
Hình 3.6 Hình ảnh giao diện hồn chỉnh .................................................................55
Hình 3.7 Hình ảnh Wireframe giao diện ..................................................................56
Hình 3.8 Hình ảnh thiết kế dữ liệu ...........................................................................57
Hình 3.9 Hình ảnh kiến trúc Website .......................................................................58
Hình 4.1 Hình ảnh màn hình “Đăng nhập” ..............................................................59
Hình 4.2 Hình ảnh màn hình “Đăng kí” ...................................................................61
Hình 4.3 Hình ảnh màn hình “Quên mật khẩu” .......................................................63

Hình 4.4 Hình ảnh màn hình “Onboarding” ............................................................65
Hình 4.5 Hình ảnh màn hình “Gợi ý lộ trình học” ...................................................67
Hình 4.6 Hình ảnh màn hình “Trang chủ” ...............................................................69
Hình 4.7 Hình ảnh màn hình “Mơ tả bài học” .........................................................70
Hình 4.8 Hình ảnh màn hình “Học theo lộ trình” ....................................................72
Hình 4.9 Hình ảnh màn hình “Tổng kết bài học” ....................................................74
Hình 4.10 Hình ảnh màn hình “Luyện tập” .............................................................76
Hình 4.11 Hình ảnh màn hình “Mơ tả bài luyện tập” ..............................................78
Hình 4.12 Hình ảnh màn hình “Làm bài luyện tập” ................................................80
Hình 4.13 Hình ảnh màn hình “Kết quả bài luyện tập” ...........................................82
Hình 4.14 Hình ảnh màn hình “Chi tiết kết quả bài luyện tập” ...............................84
Hình 4.15 Hình ảnh màn hình “Tài liệu” .................................................................86
Hình 4.16 Hình ảnh màn hình “Chi tiết tài liệu” .....................................................88
Hình 4.17 Hình ảnh màn hình “Diễn đàn” ...............................................................90
Hình 4.18 Hình ảnh màn hình “Tạo bài viết mới” ...................................................92

7


Hình 4.19 Hình ảnh màn hình “Chi tiết bài viết”.....................................................94
Hình 4.20 Hình ảnh màn hình “Thơng tin cá nhân” ................................................96
Hình 4.21 Hình ảnh màn hình “Cập nhật thơng tin cá nhân” ..................................98
Hình 4.22 Hình ảnh màn hình “Quản lý lộ trình học” ...........................................100
Hình 4.23 Hình ảnh màn hình “Thêm lộ trình học mới” .......................................101
Hình 4.24 Hình ảnh màn hình “Chi tiết lộ trình học” ............................................102
Hình 4.25 Hình ảnh màn hình “Thêm chặng mới” ................................................104
Hình 4.26 Hình ảnh màn hình “Thêm câu mới” ....................................................105
Hình 4.27 Hình ảnh màn hình “Quản lý tài liệu”...................................................106
Hình 4.28 Hình ảnh màn hình “Thêm tài liệu mới” ...............................................108
Hình 4.29 Hình ảnh màn hình “Chi tiết tài liệu” ...................................................109

Hình 4.30 Hình ảnh màn hình “Thêm thẻ mới” .....................................................110
Hình 4.31 Hình ảnh màn hình “Quản lý bài luyện tập” .........................................112
Hình 4.32 Hình ảnh màn hình “Thêm bài luyện tập mới” .....................................113
Hình 4.33 Hình ảnh màn hình “Chi tiết bài luyện tập” ..........................................114
Hình 4.34 Hình ảnh màn hình “Thêm câu hỏi mới” ..............................................116

8


MỤC LỤC BẢNG
Bảng 3.1 Danh sách use-case người dùng.................................................................26
Bảng 3.2 Danh sách use-case quản trị viên ...............................................................26
Bảng 3.3 Use-case “Đăng nhập” ...............................................................................28
Bảng 3.4 Use-case “Đăng kí”....................................................................................30
Bảng 3.5 Use-case “Quên mật khẩu” ........................................................................31
Bảng 3.6 Use-case “Cập nhật thông tin người dùng” ...............................................32
Bảng 3.7 Use-case “Đổi mật khẩu”...........................................................................33
Bảng 3.8 Use-case “Lấy gợi ý lộ trình học” .............................................................35
Bảng 3.9 Use-case “Học theo lộ trình” .....................................................................36
Bảng 3.10 Use-case “Luyện tập” ..............................................................................37
Bảng 3.11 Use-case “Đăng bài viết” .........................................................................38
Bảng 3.12 Use-case “Yêu thích bài viết” ..................................................................40
Bảng 3.13 Use-case “Bình luận” ...............................................................................41
Bảng 3.14 Use-case “Thêm lộ trình học” .................................................................42
Bảng 3.15 Use-case “Cập nhật lộ trình học” ............................................................43
Bảng 3.16 Use-case “Xố lộ trình học” ....................................................................45
Bảng 3.17 Use-case “Thêm tài liệu” ........................................................................46
Bảng 3.18 Use-case “Cập nhật tài liệu” ....................................................................47
Bảng 3.19 Use-case “Xoá tài liệu” ............................................................................49
Bảng 3.20 Use-case “Thêm bài luyện tập” ...............................................................50

Bảng 3.21 Use-case “Cập nhật bài luyện tập” ..........................................................51
Bảng 3.22 Use-case “Xoá bài luyện tập” ..................................................................53
Bảng 4.1 Thiết kế xử lý màn hình “Đăng nhập” .......................................................60
Bảng 4.2 Thiết kế xử lý màn hình “Đăng kí” ...........................................................61
Bảng 4.3 Thiết kế xử lý màn hình “Quên mật khẩu” ................................................63
Bảng 4.4 Thiết kế xử lý màn hình “Onboarding” .....................................................65
Bảng 4.5 Thiết kế xử lý màn hình “Gợi ý lộ trình học” ............................................67
Bảng 4.6 Thiết kế xử lý màn hình “Trang chủ” ........................................................69

9


Bảng 4.7 Thiết kế xử lý màn hình “Mơ tả bài học” ..................................................71
Bảng 4.8 Thiết kế xử lý màn hình “Học theo lộ trình” .............................................72
Bảng 4.9 Thiết kế xử lý màn hình “Tổng kết bài học” .............................................74
Bảng 4.10 Bảng 3.33 Thiết kế xử lý màn hình “Luyện tập”.....................................77
Bảng 4.11 Thiết kế xử lý màn hình “Mơ tả bài luyện tập” .......................................78
Bảng 4.12 Thiết kế xử lý màn hình “Làm bài luyện tập” .........................................81
Bảng 4.13 Thiết kế xử lý màn hình “Kết quả bài luyện tập” ....................................82
Bảng 4.14 Thiết kế xử lý màn hình “Chi tiết kết quả bài luyện tập” ........................85
Bảng 4.15 Thiết kế xử lý màn hình “Tài liệu” ..........................................................86
Bảng 4.16 Thiết kế xử lý màn hình “Chi tiết tài liệu” ..............................................88
Bảng 4.17 Thiết kế xử lý màn hình “Diễn đàn”........................................................91
Bảng 4.18 Thiết kế xử lý màn hình “Tạo bài viết mới” ............................................92
Bảng 4.19 Thiết kế xử lý màn hình “Chi tiết bài viết” .............................................95
Bảng 4.20 Thiết kế xử lý màn hình “Thơng tin cá nhân” .........................................97
Bảng 4.21 Thiết kế xử lý màn hình “Đổi mật khẩu” ................................................98
Bảng 4.22 Thiết kế xử lý màn hình “Quản lý lộ trình học” ....................................100
Bảng 4.23 Thiết kế xử lý màn hình “Thêm lộ trình học mới” ................................101
Bảng 4.24 Thiết kế xử lý màn hình “Chi tiết lộ trình học” .....................................102

Bảng 4.25 Thiết kế xử lý màn hình “Thêm chặng mới” .........................................104
Bảng 4.26 Thiết kế xử lý màn hình “Thêm câu mới” .............................................106
Bảng 4.27 Thiết kế xử lý màn hình “Quản lý tài liệu” ...........................................107
Bảng 4.28 Thiết kế xử lý màn hình “Thêm tài liệu mới” .......................................108
Bảng 4.29 Thiết kế xử lý màn hình “Chi tiết tài liệu” ............................................109
Bảng 4.30 Thiết kế xử lý màn hình “Thêm thẻ mới”..............................................111
Bảng 4.31 Thiết kế xử lý màn hình “Quản lý bài luyện tập” ..................................112
Bảng 4.32 Thiết kế xử lý màn hình “Thêm bài luyện tập mới” ..............................113
Bảng 4.33 Thiết kế xử lý màn hình “Chi tiết bài luyện tập”...................................114

10


TÓM TẮT ĐỒ ÁN
Đề tài đồ án “Xây dựng Website học tiếng Anh cho người đi làm” được lên kế
hoạch thực hiện trong vòng 6 tháng. Với mục tiêu là tìm hiểu đề tài, các cơng nghệ
liên quan và xây dựng được Website với các chức năng cơ bản.
Đồ án mang đến một Webiste giúp những người đi làm nói riêng và những
người bận rộn nói chung có nhu cầu cải thiện tiếng Anh, có thể tiếp cận việc học ngôn
ngữ này một cách đơn giả, hiệu quả và thú vị.
Đồ án được xây dựng dựa trên nền tảng Web và công nghệ khá phổ biến hiện
nay là ReactJs và Firebase.
Đồ án hồn thành các chức năng cơ bản, có thể đáp ứng được nhu cầu đơn
giản của người dùng.

Báo cáo gồm 5 phần:
1. Giới thiệu đề tài: Trình bày lí do chọn đề tài, giới thiệu sơ lược các chức năng,
đối tượng sử dụng của đề tài.
2. Công nghệ và phương pháp thực hiện: Trình bày sự tìm hiểu về các công
nghệ sử dụng trong đồ án cùng phương pháp thực hiện đồ án.

3. Phân tích thiết kế hệ thống: Trình bày các phần khảo sát, thiết kế use-case,
thiết kế kiến trúc và thiết kế giao diện người dùng.
4. Cài đặt: Trình bày các màn hình giao diện cùng các xử lý tương tác trên màn
hình.
5. Kết luận: Nêu ra kết quả thực hiện đồ án, những ưu nhược điểm cùng hướng
phát triển đồ án trong tương lai.

11


CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1. Lí do chọn đề tài
Ngày nay, thế giới ngày càng hội nhập. Vì thế, tiếng Anh là vô cùng cần thiết đối
với hầu hết mọi người, nhằm có thể bắt kịp nhịp phát triển của thế giới. Và Việt Nam
cũng có xu hướng này. Nhà nhà học tiếng Anh, người người học tiếng Anh, không
phân biệt tuổi tác. Tuy nhiên, những người đi làm thường khơng có thời gian để đến
các lớp học cũng như việc tiếp thu không hiệu quả do cách học khơng hiệu quả. Từ
đó, dễ xảy ra tâm trạng chán nản, từ bỏ.
Hiểu được tâm lý đó, Website hỗ trợ học tiếng Anh cho người đi làm được tạo ra
để mang lại điều kiện tốt cho những người bận rộn có khả năng phát triển bản thân.
Website tập trung hỗ trợ 2 kỹ năng nghe-đọc. Bằng cách cung cấp nguồn kiến thức
chính xác và phong phú. Với lối học dễ tiếp thu qua các chủ đề, nhớ sâu các kiến thức
hơn với những bài luyện tập sinh động sau mỗi bài học lý thuyết. Tiến trình của lộ
trình và kết quả học tập sẽ được lưu vào mỗi tài khoản. Bên cạnh đó, chúng ta cịn có
một diễn đàn để hỏi đáp những thắc mắc, hay chia sẻ những kiến thức mới giữa các
người dùng. Với lối học dễ dàng tiếp thu, có thể học mọi lúc mọi nơi, có nơi để chia
sẻ hay hỏi đáp thắc mắc, đây chính là website giúp cải thiện hay học tiếng Anh một
cách hiệu quả, đáp ứng được nhu cầu của những người bận rộn.
1.2. Mục đích nghiên cứu
Xây dựng được Website:

• Cung cấp cho người dùng danh sách bài học được hệ thống hóa theo chủ đề,
dễ dàng tiếp thu một cách mau chóng, đầy đủ, chính xác với kho dữ liệu phong
phú liên quan đến các chủ đề trong đời sống và cơng việc.
• Giúp người dùng có hứng thú với việc học tiếng Anh hơn qua những bài luyện
tập và diễn đàn kết nối với cộng đồng sẽ mang lại nhiều động lực hơn.
• Phát triển quy mơ nhỏ cộng đồng những người có đam mê tiếng Anh.

12


• Hỗ trợ quản trị viên quản lý các tài liệu, thơng tin người dùng.
1.3. Phạm vi ứng dụng
• Nền tảng hỗ trợ: Triển khai trên Website.
• Chức năng:
o Gợi ý lộ trình học: Hệ thống đưa ra một số câu hỏi về tình trạng, mong
muốn của người dùng, dựa vào sự lựa chọn của người dùng để đưa ra lộ
trình gợi ý.
o Học theo lộ trình: Kiến thức được hiển thị theo dạng flash card theo chủ
đề và cấp độ của ngừoi dùng.
o Xem tiến trình học tập theo lộ trình: Người dùng xem được tiến trình học
tập của bản thân.
o Lưu trữ vào mục cần nhớ: Người dùng có thể lưu trữ những bài học, từ
vựng,… vào mục riêng của mỗi tài khoản.
o Luyện tập qua các trò chơi: Người dùng ôn lại kiến thức đã học qua các
trị chơi có lưu trữ, tích lũy điểm thưởng và có thể chia sẻ lên mạng xã hội
hoặc diễn đàn trên website.
o Tạo bài viết trên diễn đàn: Người dùng tạo bài viết cá nhân để chia sẻ hoặc
hỏi đáp thắc mắc, cho phép những người dùng khác tương tác trên bài viết.
o Quản lý các bài học: Quản trị viên tạo, sửa đổi lộ trình học.
o Quản lý kho tài liệu: Quản trị viên đăng tài liệu, người dùng có thể tìm

kiếm kiến thức qua kho tài liệu.
o Quản lý bài luyện tập: Quản trị viên tạo các bài luyện tập theo chủ đề, có
thể cài đặt nội dung, số điểm thưởng, độ khó,…
o Quản lý diễn đàn: Quản trị viên đăng những thơng báo quan trọng hoặc có
quyền xóa những bài viết có nội dung khơng liên quan, không lành mạnh.
o Quản lý người dùng: Quản lý tài khoản người dùng, xem được thành tích
của người dùng.

13


o Báo cáo và phân tích: Cung cấp thơng tin cho quản trị viên nhằm cải thiện
chất lượng website.
1.4. Đối tượng sử dụng
• Người dùng: Tự chọn cấp độ, hoặc dùng chức năng gợi ý lộ trình học, xem
được tiến trình học, lưu trữ những kiến thức cần nhớ, luyện tập qua các trị
chơi, có thể chia sẻ và giải đáp thắc mắc qua diễn đàn.
• Quản trị viên: Quản lý các bài học, kho kiến thức, tạo lộ trình học, các bài
luyện tập, diễn đàn và người dùng, xem báo cáo phân tích.

14


CHƯƠNG 2: CÔNG NGHỆ VÀ PHƯƠNG PHÁP THỰC HIỆN
2.1. Các công nghệ, thư viện, ngôn ngữ, công cụ được sử dụng
Trong quá trình phát triển ứng dụng, một số các cơng nghệ, ngơn ngữ, thư viện,
cơng cụ được sử dụng:
• Ngơn ngữ:
o Typescript
o TSX

o CSS/SCSS
• Cơng nghệ/thư viện:
o React
o Redux
o Firebase
• Cơng cụ:
o Github
o Figma
o Visual Studio Code
• Các thư viện khác:
o Flexbox Grid
Sau đây, em sẽ điểm qua một vài điểm đặc biệt, điều khiến em sử dụng chúng:
2.1.1. Các ngôn ngữ: Typescript, TSX, CSS/SCSS
Đây là các ngôn được sử dụng để tạo nên Website.
• Typescript: là một ngơn ngữ lập trình mở rộng của Javascript, được thiết kế
để giải quyết các vấn đề về kiểm tra lỗi và quản lý mã nguồn trong quá trình
phát triển phần mềm. Việc sử dụng Typescript giúp tăng tính ổn định và tin
cậy của ứng dụng, đồng thời giúp cho quá trình phát triển và bảo trì ứng dụng
trở nên dễ dàng và linh hoạt hơn.

15


• TSX(Typescript Extension): là một phần mở rộng của Typescript, được sử
dụng để phát triển giao diện người dùng trong React. TSX cho phép bạn viết
mã HTML giống như trong React, nhưng với các tính năng của Typescript như
kiểm tra lỗi tĩnh và kiểu dữ liệu tĩnh.
o HTML(Hypertext Markup Language): là một ngôn ngữ đánh dấu
văn bản được sử dụng để tạo nội dung và cấu trúc cho các trang web.
HTML được sử dụng để tạo ra các thành phần trên trang web như định

dạng văn bản, hình ảnh, video, bảng, biểu đồ và các liên kết tới các
trang web khác.
• CSS(Cascading Style Sheets): là một ngơn ngữ định dạng kiểu được sử dụng
để tạo kiểu cho các tài liệu HTML hoặc XML. CSS cho phép bạn kiểm soát
cách mà các phần tử HTML hiển thị trên trang web, bao gồm kích thước, màu
sắc, khoảng cách, vị trí và hình dạng.
o SCSS(Sassy CSS): được phát triển dựa trên cú pháp của CSS và cung
cấp thêm nhiều tính năng và khả năng tùy biến hơn so với CSS. SCSS
cho phép sử dụng các biến, hàm, lồng các quy tắc CSS và các thực thi
điều kiện để giúp tạo ra mã CSS dễ đọc hơn, dễ tái sử dụng hơn và dễ
bảo trì hơn.
2.1.2. Cơng nghệ/thư viện: React, Redux, Firebase
React và Redux là hai công nghệ/thư viện được sử dụng xuyên suốt q trình phát
triển ứng dụng. Chúng có mối quan hệ chặt chẽ với nhau.
• React:
o React là một thư viện JavaScript mã nguồn mở được phát triển bởi
Facebook, được sử dụng để xây dựng các giao diện người dùng (UI)
động cho các ứng dụng web. React cho phép phát triển các UI phức tạp
bằng cách sử dụng các thành phần (components) độc lập và có thể tái
sử dụng.

16


o React cũng cho phép tích hợp với các thư viện và framework khác như
Redux, React Router, hoặc Axios để tạo ra các ứng dụng web đầy đủ
tính năng.
• Redux:
o Redux là một thư viện JavaScript mã nguồn mở được sử dụng để quản
lý trạng thái (state) của ứng dụng web. Redux cho phép quản lý trạng

thái của ứng dụng một cách dễ dàng và hiệu quả, giúp giảm thiểu các
lỗi và tăng tính ổn định của ứng dụng.
o Redux cũng cho phép tích hợp với các thư viện và framework khác như
React, Angular hoặc Vue để tạo ra các ứng dụng web đầy đủ tính năng.
Người ta thường sử dụng cùng lúc hai công nghệ này để xây dựng một Website
hoàn chỉnh. Khi kết hợp React và Redux, chúng ta có thể tận dụng lợi thế của cả hai
cơng nghệ. React được sử dụng để xây dựng các thành phần giao diện người dùng
động, trong khi Redux được sử dụng để quản lý trạng thái của các thành phần này.
Việc kết hợp hai công nghệ này giúp cho việc phát triển ứng dụng web trở nên dễ
dàng hơn, giảm thiểu các lỗi và tăng tính ổn định của ứng dụng.
• Firebase:
o Firebase là một cơng nghệ của Google được sử dụng để phát triển các
ứng dụng web và di động. Nó cung cấp các cơng cụ để lưu trữ dữ liệu,
xác thực người dùng, phân tích dữ liệu, cung cấp thơng báo đẩy và
nhiều tính năng khác.
o Firebase cũng cung cấp các thư viện (libraries) cho các ngôn ngữ lập
trình khác nhau như JavaScript, Android, iOS, Unity, và C++. Những
thư viện này giúp cho việc tích hợp các tính năng của Firebase vào ứng
dụng trở nên dễ dàng hơn.

17


2.1.3. Các cơng cụ: Github, Figma, Visual Studio Code
• Github: là một nền tảng mã nguồn miễn phí, cho phép nhà phát triển lưu trữ,
quản lý, chia sẻ mã nguồn của mình với cộng đồng mạnh mẽ. Các tính năng
khác nổi bật như tự động tích hợp, tự động triển khai. Đây là công cụ được sử
dụng rộng rãi nhất hiện nay.
• Figma: là một ứng dụng thiết kế đồ họa dựa trên đám mây (cloud-based
graphic design tool), cho phép người dùng tạo ra các thiết kế đồ họa, giao diện

người dùng (UI), giao diện trải nghiệm người dùng (UX) và các bản vẽ khác
trên nền tảng web. Cộng đồng của cơng cụ này vơ cùng lớn mạnh.
• Visual Studio Code: là công cụ giúp biên tập, soạn thảo code, đi kèm nhiều
tính năng như debug, IntelliSense, linter, và thay đổi mã nguồn phục hồi, giúp
người dùng tăng tốc độ phát triển và giảm thiểu các lỗi. Nó hỗ trợ nhiều ngơn
ngữ và tích hợp sẵn trình quản lý code Git, Docker,… Bên cạnh đó, nó hỗ trợ
nhiều extension để người dùng có thể mở rộng các tính năng mong muốn.
Cộng đồng của công cụ này vô cùng lớn mạnh.
2.1.4. Các thư viện khác
• Flexbox Grid: thư viện hỗ trợ giao diện người dùng sẽ tương thích nhiều kích
thước thiết bị khác nhau.

2.2. Phương pháp phát triển
Quản lý mã nguồn: sử dụng Github để quản lý.
Các bước phát triển cùng phương pháp thực hiện được liệt kê như bên dưới:
• Tìm hiểu các cơng nghệ React, Redux, Firebase.
• Thu thập yêu cầu thông qua:
o Khảo sát bằng form: giao diện người dùng.
o Khảo sát các ứng dụng liên quan: chức năng.
• Phân tích và xác định u cầu:

18


o Khảo sát bằng form để thu thập ý kiến về giao diện người dùng.
o Các ứng dụng liên quan “Doulingo”, “Viblo”... để khảo sát những chức
năng đã có và cần có cho ứng dụng. Đưa ra các yêu cầu chức năng và
phi chức năng.
• Thiết kế:
o Thiết kế giao diện.

o Thiết kế dữ liệu.
• Cài đặt: dựa trên nền tảng công nghệ và sử dụng các thư viện, ngôn ngữ được
nêu ở phần trước.

2.3. Kết quả mong đợi
• Hồn thiện các chức năng cơ bản của Website.

19


CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG
3.1. Khảo sát
3.1.1. Khảo sát giao diện người dùng qua form:
Link form khảo sát giao diện người dùng:
/>
Kết quả:
• Màu chủ đề:

Hình 3.1 Khảo sát người dùng về màu sắc chủ đề

o Theo khảo sát, đa số mọi người chọn cách phối màu đơn giản, kích
thích người học. Vì thế, em chọn tơng vàng, cam cho ứng dụng.

20


• Phong cách:

Hình 3.2 Khảo sát người dùng về phong cách

o Theo khảo sát, số người chọn phong cách Website dễ thương chiếm
nhiều hơn. Vì thế, em sẽ mang đến một giao diện khá dễ thương, nhưng
lại đơn giản để đa số mọi người có thể dễ sử dụng.

• Phơng chữ:

Hình 3.3 Khảo sát người dùng về phơng chữ

21


o Trên tổng số 16 người khảo sát, có tới 62.5% số người chọn kiểu chữ
đơn giản. Với sự lựa chọn này, sẽ phù hợp với đại đa số người dùng với
những đặc điểm tuổi tác, giới tính khác nhau. Vì vậy, em sẽ chọn một
phơng chữ đơn giản, dễ nhìn: Quicksand (Google Font).

• Vị trí điều hướng:

Hình 3.4 Khảo sát người dùng về vị trí thanh điều hướng

o Với 62.5% số người lựa chọn thanh điều hướng nằm bên trên, Website
sẽ được thiết kế với sự lựa chọn này. Nhưng để phù hợp hơn với bản
chất là một Website, ở kích thước màn hình điện thoại thì thanh điều
hướng sẽ được để bên trái.

3.1.2. Khảo sát các chức năng qua các Website liên quan:
Duolingo - Website học tiếng Anh [1]:
• Chọn mục tiêu: thời gian học một ngày là bao nhiêu phút.
• Chọn hướng đi: đánh giá trình độ hiện tại.
• Học theo lộ trình: một lộ trình sẽ bao gồm nhiều bài học.

• Luyện tập: chơi trị chơi.

22


• Trò chơi:
o Cho nghĩa → chọn từ tiếng Anh (kèm hình ảnh minh họa).
o Cho tiếng Anh → chọn nghĩa (kèm hình ảnh minh họa).
o Nghe tiếng Anh → chọn nghĩa (2 lựa chọn tốc độ: bình thường, chậm).
o Cho danh sách từ tiếng Anh, nghĩa → Nối câu.
o Cho danh sách từ tiếng Việt, câu tiếng Anh → Nối câu.
o Cho phép xem lại kết quả trò (bảng điểm).
o Đánh dấu tick cho mục tiêu của ngày đó.
• Hồ sơ cá nhân: lưu trữ thành tích cá nhân: được tổng hợp sau các bài luyện
tập, bài học.
Viblo - Diễn đàn [2]
• Tạo bài viết, xem bài viết trước khi tạo.
• Xếp hạng nhà sáng tạo nội dung (bạc, vàng, kim cương).
• Đặt câu hỏi, cho phép người khác trả lời câu hỏi, thả cảm xúc, hiển thị số like
trên câu trả lời đó.
• Có thơng báo.
• Những bài viết nổi bật, những hỏi đáp nổi bật.
• Cho phép đăng video.
• Theo dõi tác giả cụ thể.
• Hiển thị mục lục cho mỗi bài viết.

Kết quả:
Người dùng:
1. Gợi ý lộ trình học.
2. Học theo lộ trình.

3. Quản lý thơng tin cá nhân.
4. Luyện tập qua trò chơi.
5. Quản lý kết quả luyện tập.

23


6. Tương tác trên diễn đàn.
Quản trị viên:
1. Quản lý lộ trình học.
2. Quản lý kho tài liệu.
3. Quản lý các bài luyện tập.

3.2. Use-case
Dưới đây là sơ đồ use-case được thiết kế sau khi xác định được các chức năng cụ thể
của Website:

24


Hình 3.5 Hình ảnh use-case Hệ thống Hỗ trợ học tiếng Anh cho người đi làm

25