Báo cáo đồ án 2 xây dựng ứng dụng hỗ trợ môn học

ĐẠ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
---------------------------

BÁO CÁO ĐỒ ÁN 2

XÂY DỰNG ỨNG DỤNG HỖ TRỢ MÔN HỌC

Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến
Sinh viên thực hiện:
Trần Thanh Hiền - 19520080
Lê Khải Hồn - 19520087

Tp. Hồ Chí Minh, tháng 12 năm 2022


ĐẠ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
---------------------------

BÁO CÁO ĐỒ ÁN 2

XÂY DỰNG ỨNG DỤNG HỖ TRỢ MÔN HỌC

Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến
Sinh viên thực hiện:
Trần Thanh Hiền - 19520080

Lê Khải Hồn - 19520087

Tp. Hồ Chí Minh, tháng 12 năm 2022


ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM
TRƯỜNG ĐẠI HỌC

Độc Lập - Tự Do - Hạnh Phúc

CÔNG NGHỆ THÔNG TIN

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI:
XÂY DỰNG ỨNG DỤNG HỖ TRỢ MÔN HỌC
Tên đề tài tiếng Anh:
BUILDING A SUBJECT SUPPORT APPLICATION
Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày 05/09/2022 đến 31/12/2022
Sinh viên thực hiện:
Lê Khải Hoàn – 19520087
Trần Thanh Hiền - 19520080
Nội dung đề tài:
1. Giới thiệu:
Công việc kinh doanh hiện nay khơng chỉ gói gọn quy mơ trong nước, mà
cịn có sự hợp tác với rất nhiều quốc gia khác nhau trên thế giới. Trong đó tiếng
Anh dường như là ngôn ngữ trung gian phổ biến và được ưa chuộng nhất với hơn
1/2 quốc gia trên thế giới sử dụng và là ngôn ngữ giao tiếp chính của giới doanh
nghiệp. Các đối tác lớn chủ yếu đến từ các quốc gia lớn như Mỹ, Trung Quốc,

Nga, Anh, Đức hầu hết đều sử dụng tiếng Anh là ngơn ngữ giao tiếp. Vì vậy, nếu
chúng ta có kỹ năng tiếng Anh giao tiếp công việc tốt, chúng ta có thể làm việc
với bất kỳ đối tác nào ở bất cứ đâu trên thế giới. Do đó, các doanh nghiệp luôn
yêu cầu từ nhân viên đến cấp quản lý phải có kỹ năng giao tiếp tiếng Anh cơng
việc cũng là điều dễ hiểu.


Ngoài ra, việc học anh văn giao tiếp hiện nay khá khó khăn đối với người
đi làm. Họ khơng có thời gian để tham gia vào các lớp học trực tiếp vì sau giờ
hành chánh, họ cịn phải chăm lo cho gia đình hoặc tập trung vào dự án cơng việc.
Vì lẽ đó, nhóm em sẽ phát triển ứng dụng giúp cho người dùng học tiếng Anh
giao tiếp mọi lúc mọi nơi. Thêm vào đó, nhóm em sẽ sử dụng framework React
Native nhằm giúp cho ứng dụng chạy được trên cả 2 nền tảng phổ biến nhất hiện
nay là Android và iOS, giúp cho đa số người dùng thiết bị di động đều có thể sử
dụng một cách mượt mà và nhanh chóng.
Ngồi việc hướng đến đối tượng là người đi làm, ứng dụng đã mở rộng đến
với đối tượng trẻ em giúp cho các bé có thể làm quen với tiếng Anh từ sớm. Sau
này, việc phát triển tiếng Anh cho các bé cũng sẽ dễ dàng hơn.
2. Mục tiêu:
- Hiểu rõ cấu trúc của framework React Native do Facebook phát triển và cách
áp dụng vào đồ án.
- Xây dựng được ứng dụng hỗ trợ học tiếng Anh giao tiếp với các chức năng cơ
bản như: học từ vựng, ngữ pháp, các mẫu câu giao tiếp hằng ngày, trong công
việc, luyện nghe các đoạn hội thoại, luyện phát âm với mẫu câu cho trước, trị
chơi giúp ơn luyện từ vựng, quản lý thông tin người dùng, học tiếng Anh cho
trẻ em.
3. Phạm vi:
• Phạm vi mơi trường:
o Ứng dụng có thể hoạt động trên các thiết bị Android và IOS
• Phạm vi chức năng:

o Học từ vựng theo chủ đề
o Học các chủ điểm ngữ pháp
o Luyện viết, luyện đọc
o Luyện nghe
o Luyện phát âm theo mẫu câu có sẵn
o Ôn tập từ vựng
o Xem video hội thoại giữa các nhân vật
o Học tiếng Anh cho trẻ em
o Quản lý thông tin người dùng


4. Đối tượng:
- Người dùng có nhu cầu mua học tiếng Anh gồm 4 kỹ năng
- Trẻ em bắt đầu làm quen với tiếng Anh
5. Phương pháp thực hiện:
- Tìm hiểu về React Native, Redux, Firebase, NodeJS, TypeScript.
- Khảo sát thực trạng các ứng dụng học tiếng Anh giao tiếp tương tự như
Duolingo, Cake, TFlat,… được nhiều người dùng sử dụng nhất, từ đó tiến hành
phân tích, xác định các yêu cầu cụ thể cho đề tài và tìm ra những ưu, nhược
điểm để khắc phục cho đề tài của nhóm.
- Phân tích và thiết kế hệ thống ứng dụng.
- Tìm hiểu quy trình thiết kế UX/UI và tiến hành thiết kế giao diện cho ứng dụng.
- Xây dựng ứng dụng cho người dùng sử dụng được trên cả Android và iOS.
- Tiến hành triển khai và kiểm thử ứng dụng.
6. Công nghệ:
- Mobile: React Native, Type Script
- State management: Redux
- Back-end: NodeJS, Firebase
- Database: Firebase Realtime Database
- Source Control: GitHub

7. Kết quả mong đợi
- Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài.
- Hiểu rõ các nghiệp vụ, chức năng của một ứng dụng học tiếng Anh giao tiếp
với 4 kỹ năng.
- Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần
mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án
phần mềm để xây dựng ứng dụng sản phẩm đề tài.
- Xây dựng được ứng dụng học tiếng Anh giao tiếp cho người dùng đáp ứng
được các yêu cầu về giao diện và chức năng đã đề ra.
8. Kế hoạch thực hiện
Thời gian

Nội dung


05/09/2022 – 11/09/2022 - Tất cả: Tìm hiểu đề tài, đánh giá thị trường, xác định các
chức năng của hệ thống.
12/09/2022 – 18/09/2022 - Tất cả: Tìm hiểu, nghiên cứu TypeScript.
19/09/2022 – 02/10/2022 + Lê Khải Hoàn: Chức năng quản lý người dùng (đăng
nhập, đăng kí, quản lý thơng tin cá nhân, ...), luyện phát
âm theo mẫu câu có sẵn, trị chơi ơn tập từ vựng, học tiếng
Anh cho trẻ em.
+ Trần Thanh Hiền: Chức năng học từ vựng theo chủ đề,
học các chủ điểm ngữ pháp, xem video hội thoại giữa các
nhân vật, luyện viết, luyện đọc, luyện nghe.
03/10/2022 – 23/10/2022 Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao diện
cho ứng dụng
24/10/2022 – 10/11/2022 + Lê Khải Hồn: Đăng nhập, đăng ký, quản lý thơng tin
user; phân loại người dùng (trẻ em hay người lớn);học
tiếng Anh cho trẻ.

+ Trần Thanh Hiền: Test tiếng Anh đầu vào cho user (nếu
user chọn target là người lớn học tiếng Anh), hoàn thành
homepage ứng dụng.
11/11/2022 – 30/11/2022 + Lê Khải Hoàn: Hoàn thành các chức năng học tiếng Anh
cho trẻ em.
+ Trần Thanh Hiền: Hoàn thành danh sách grammar các
bài học.
1/12/2022 – 11/12/2022 + Lê Khải Hoàn: Hoàn thành các chức năng luyện phát âm
và ôn tập các kiến thức đã học bên phần học tiếng Anh cho
người lớn.
+ Trần Thanh Hiền: Hoàn thành phần học tiếng Anh qua
video, học từ vựng, ngữ pháp.
12/12/2022 – 25/12/2022 + Lê Khải Hoàn: Hoàn thành các chức năng các chức năng
luyện viết theo chủ đề.
+ Trần Thanh Hiền: Hoàn thành phần lưu những kiến thức
đã học và hoàn chỉnh các mục khác.
26/12/2022 – 31/12/2022 Kiểm thử hệ thống và hoàn thiện báo cáo.
TP. HCM, ngày 05 tháng 09 năm 2022
Xác nhận của CBHD

Sinh viên

(Ký tên và ghi rõ họ tên)

(Ký tên và ghi rõ họ tên)

ThS. Trần Thị Hồng Yến

Lê Khải Hoàn

Trần Thanh Hiền


LỜI MỞ ĐẦU
Tiếng Anh là ngôn ngữ phổ biến của thế giới trong nhiều thập kỷ qua. Có lẽ rất khó
để tìm ra một quốc gia mà khơng sử dụng tiếng Anh như một ngôn ngữ dùng trong công
việc. Tiếng Anh là ngơn ngữ được nói nhiều nhất trên thế giới, ước tính có 380 triệu người
bản xứ, 300 triệu người sử dụng tiếng Anh như một ngôn ngữ thứ hai. Học tiếng Anh còn
giúp mở rộng sự hiểu biết của bạn. Khơng những có thể hiểu được các nền văn hóa khác
thơng qua việc học tiếng Anh mà bạn có thể kết nối khoảng cách giữa các nền văn hóa
khác. Nó cũng làm tăng sự hiểu biết về văn hóa của bạn. Nếu bạn học tiếng Anh và văn
hóa của nó, bạn sẽ có thể thấy nền văn hóa của mình từ một góc nhìn khác.
Hiện nay có rất nhiều tin tuyển dụng yêu cầu về kĩ năng giao tiếp tiếng Anh tốt, và
đi kèm với yêu cầu đó thì mức lương cũng khá cao. Cho nên ta mới thấy được tầm quan
trọng của việc học tiếng Anh hiện nay ảnh hưởng lớn như thế nào đến chất lượng công
việc. Ước mơ của các bạn trẻ hiện nay về lĩnh vực cơng nghệ thơng tin nói riêng và các
ngành khác nói chung là được làm việc trong các cơng ty quốc tế lớn như Google,
Facebook, Cocacola, Amazon, ... vừa có mức lương hấp dẫn, vừa có mơi trường làm việc
chuyên nghiệp. Nhưng mà khi làm việc trong các công ty này, các bạn phải dùng tiếng Anh
để giao tiếp trong công việc. Vậy nếu như bạn không giỏi giao tiếp bằng tiếng Anh thì chắc
chắn rằng bạn sẽ bị loại ngay từ vịng gửi xe. Chính vì thế, bạn cần phải trau dồi tiếng Anh
ngay từ bây giờ, càng sớm càng tốt.
Có một vấn đề chung mà các bạn trẻ hiện nay đang gặp phải là các bạn ấy đợi đến
lúc sắp tốt nghiệp mới lo học tiếng Anh, đa số đều cần để lấy được tấm bằng tốt nghiệp,
hoặc các bạn đã đi làm nhưng mới bắt đầu mới nhận ra tầm quan trọng của nó và bắt đầu
đi học. Nhưng các bạn bị vướng bận thời gian, cơng việc cho nên việc học tiếng Anh trở
nên khó khăn. Đó là lí do nhóm em chọn đề tài "Xây dựng ứng dụng hỗ trợ môn học",
cụ thể là ứng dụng hỗ trợ học tiếng Anh giao tiếp dành cho những người có ít thời gian,
hoặc những người đã đi làm và mở rộng hơn đến đối tượng là trẻ em.

LỜI CẢM ƠN
Nhóm em xin chân thành gửi lời cảm ơn đến cô Trần Thị Hồng Yến - giảng viên
hướng dẫn Đồ án 2 của nhóm thuộc khoa Cơng nghệ Phần mềm đã hướng dẫn từng bước
nghiên cứu, thực hiện đề tài này.
Tuy nhiên trong quá trình nghiên cứu đề tài này, nhóm em có thể cịn một số nhược
điểm, hạn chế khi tìm hiểu, thực hiện. Rất mong nhận được sự nhận xét, góp ý từ các thầy
cơ giảng viên trong trường để đề tài của nhóm em được hồn thiện hơn.
Nhóm em xin chân thành cảm ơn!

Nhóm sinh viên thực hiện
Lê Khải Hoàn - Trần Thanh Hiền


MỤC LỤC
Chương 1: GIỚI THIỆU TỔNG QUAN ĐỀ TÀI ...................................... 1
1.1 Tên đề tài....................................................................................................... 1
1.2 Lí do chọn đề tài ........................................................................................... 1
1.3 Lí do chọn cơng nghệ ................................................................................... 1
1.4 Mơi trường phát triển ứng dụng................................................................. 2
1.5 Các yêu cầu của hệ thống ............................................................................ 2

Chương 2: CƠ SỞ LÍ THUYẾT ................................................................... 3
2.1 React Native .................................................................................................. 3
2.2 Cloud Firestore ............................................................................................. 4
2.3 Redux Toolkit ............................................................................................... 6
2.4 TypeScript..................................................................................................... 7
2.5 Áp dụng các công nghệ vào đồ án ............................................................... 8
2.5.1 React Native ..................................................................................................... 8
2.5.2 Redux Toolkit .................................................................................................. 8

2.5.3 Cloud Firestore ................................................................................................ 8
2.5.4 TypeScript ........................................................................................................ 8

Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ............................. 9
3.1 Sơ đồ Use-case .............................................................................................. 9
3.2 Danh sách actor .......................................................................................... 10
3.3 Danh sách các use-case ............................................................................... 10
3.4 Đặc tả Use-case ........................................................................................... 11
3.4.1 Đặc tả use-case “Đăng nhập” ........................................................................ 11
3.4.2 Đặc tả use-case “Đăng xuất” ......................................................................... 11
3.4.3 Đặc tả use-case “Đăng ký”............................................................................. 12
3.4.4 Đặc tả use-case “Quản lý thông tin cá nhân” .............................................. 13


3.4.5 Đặc tả use-case “Kiểm tra đầu vào” ............................................................. 14
3.4.6 Đặc tả use-case “Xem video hội thoại” ......................................................... 15
3.4.7 Đặc tả use-case “Học từ vựng” ...................................................................... 15
3.4.8 Đặc tả use-case “Ôn tập từ vựng” ................................................................. 16
3.4.9 Đặc tả use-case “Luyện phát âm” ................................................................. 17

3.5 Sơ đồ lớp (mức phân tích) ......................................................................... 18
3.6 Danh sách các lớp đối tượng và quan hệ ................................................. 18
3.7 Mô tả chi tiết từng lớp đối tượng ............................................................... 19
3.7.1 Lớp “User” ...................................................................................................... 19
3.7.2 Lớp “EntryTest” ............................................................................................ 20
3.7.3 Lớp “EntryTestDetail” .................................................................................. 20
3.7.4 Lớp “VideoOutline” ....................................................................................... 21
3.7.5 Lớp “Video” .................................................................................................... 21
3.7.6 Lớp “Vocabulary” .......................................................................................... 21
3.7.7 Lớp “Sentence” ............................................................................................... 22

3.8 Sơ đồ logic ................................................................................................... 23
3.9 Mô tả chi tiết các kiểu dữ kiệu trong sơ đồ logic ...................................... 24
3.9.1 Bảng “Users” .................................................................................................. 24
3.9.2 Bảng “Video” .................................................................................................. 24
3.9.3 Bảng “Vocabulary” ........................................................................................ 25
3.9.4 Bảng “Sentence” ............................................................................................. 25

3.10 Danh sách các màn hình ........................................................................... 26
3.11 Mơ tả chi tiết mỗi màn hình ..................................................................... 27
3.11.1 Đăng nhập ..................................................................................................... 27
3.11.2 Đăng ký.......................................................................................................... 28
3.11.3 Trang chủ ...................................................................................................... 29
3.11.4 Video .............................................................................................................. 30
3.11.5 Thông tin cá nhân ......................................................................................... 32
3.11.6 Học từ vựng qua tranh ảnh ......................................................................... 33
3.11.7 Ôn tập từ vựng .............................................................................................. 35


3.11.8 Luyện phát âm .............................................................................................. 36
3.11.9 Từ vựng và ngữ pháp theo chủ đề .............................................................. 37
3.11.10 Luyện nghe tiếng Anh ................................................................................ 39
3.11.11 Luyện đọc tiếng Anh .................................................................................. 41

KẾT LUẬN ................................................................................................... 43
•

Ưu điểm ...................................................................................................... 43

•

Nhược điểm ................................................................................................ 43

•

Hướng phát triển ....................................................................................... 43

TÀI LIỆU THAM KHẢO ........................................................................... 44


MỤC LỤC HÌNH ẢNH
Hình 2.1 Biểu tượng React Native........................................................................................3
Hình 2.2 Biểu tượng Cloud Firestore của Firebase...............................................................4
Hình 2.3 Cấu trúc của Redux Toolkit...................................................................................6
Hình 2.4 Biểu tượng TypeScript...........................................................................................7
Hình 3.4 Sơ đồ Use-case tổng quát của ứng dụng................................................................9
Hình 3.2 Sơ đồ lớp tổng quát của ứng dụng........................................................................18
Hình 3.3 Sơ đồ dữ liệu tổng quát của ứng dụng...................................................................23
Hình 3.4 Màn hình đăng nhập............................................................................................27
Hình 3.5 Màn hình đăng ký................................................................................................28
Hình 3.6 Màn hình trang chủ..............................................................................................29
Hình 3.7 Màn hình học qua video.......................................................................................31
Hình 3.8 Màn hình thơng tin cá nhân..................................................................................32
Hình 3.9 Màn hình học từ vựng..........................................................................................33
Hình 3.10 Màn hình ơn tập từ vựng....................................................................................35
Hình 3.11 Màn hình luyện phát âm.....................................................................................36
Hình 3.12 Màn hình từ vựng và ngữ pháp theo chủ đề.......................................................37
Hình 3.13 Màn hình luyện nghe tiếng Anh.........................................................................39
Hình 3.14 Màn hình luyện đọc tiếng Anh...........................................................................41

MỤC LỤC BẢNG BIỂU
Bảng 1.1 Danh sách các yêu cầu của hệ thống....................................................................2
Bảng 3.2 Danh sách actor của ứng dụng.............................................................................10
Bảng 3.3 Danh sách các use-case của ứng dụng..................................................................10
Bảng 3.4 Đặc tả use-case đăng nhập...................................................................................11
Bảng 3.4 Đặc tả use-case đăng xuất....................................................................................11
Bảng 3.5 Đặc tả use-case đăng ký.......................................................................................12
Bảng 3.6 Đặc tả use-case quản lý thông tin cá nhân............................................................13
Bảng 3.7 Đặc tả use-case sửa thông tin cá nhân..................................................................13
Bảng 3.8 Đặc tả use-case kiểm tra đầu vào.........................................................................14
Bảng 3.9 Đặc tả use-case xem video hội thoại..................................................................15
Bảng 3.10 Đặc tả use-case học từ vựng...............................................................................15
Bảng 3.11 Đặc tả use-case ôn tập từ vựng...........................................................................16
Bảng 3.12 Đặc tả use-case luyện phát âm...........................................................................17
Bảng 3.14 Danh sách các lớp và mối quan hệ trong ứng dụng...........................................18
Bảng 3.15 Bảng mô tả thuộc tính lớp "User"......................................................................19
Bảng 3.16 Bảng mơ tả phương thức lớp "User"..................................................................19
Bảng 3.17 Bảng mơ tả thuộc tính lớp "EntryTest"..............................................................20
Bảng 3.18 Bảng mô tả phương thức lớp "EntryTest"..........................................................20
Bảng 3.19 Bảng mô tả thuộc tính lớp "EntryTestDetail"....................................................20
Bảng 3.20 Bảng mơ tả phương thức lớp "EntryTestDetail"................................................20
Bảng 3.21 Bảng mơ tả thuộc tính lớp "VideoOutline"........................................................21
Bảng 3.22 Bảng mơ tả thuộc tính lớp "Video"....................................................................21
Bảng 3.23 Bảng mô tả phương thức lớp "Video"................................................................21
Bảng 3.24 Bảng mô tả thuộc tính lớp "Vocabulary"...........................................................21
Bảng 3.25 Bảng mơ tả thuộc tính lớp "Sentence"...............................................................22
Bảng 3.26 Bảng mơ tả phương thức lớp "Sentence"...........................................................22
Bảng 3.27 Bảng mô tả chi tiết trong sơ đồ dữ liệu..............................................................23

Bảng 3.28 Bảng mô tả chi tiết dữ liệu "User"......................................................................24
Bảng 3.29 Bảng mô tả chi tiết dữ liệu "Video"...................................................................24
Bảng 3.30 Bảng mô tả chi tiết dữ liệu "Vocabulary"..........................................................25
Bảng 3.31 Bảng mô tả chi tiết dữ liệu "Sentence"...............................................................25
Bảng 3.32 Bảng mô tả các màn hình của ứng dụng............................................................26
Bảng 3.33 Bảng mơ tả các thao tác trong màn hình đăng nhập...........................................27
Bảng 3.34 Bảng mơ tả các thao tác trong màn hình đăng ký...............................................28
Bảng 3.35 Bảng mô tả các thao tác trong màn hình trang chủ.............................................30
Bảng 3.36 Bảng mơ tả các thao tác trong màn hình học qua video.....................................31
Bảng 3.37 Bảng mơ tả các thao tên trên màn hình thơng tin cá nhân..................................33
Bảng 3.38 Bảng mơ tả các thao tác trên màn hình học từ vựng...........................................34
Bảng 3.39 Bảng mô tả các thao tác trên màn hình ơn tập từ vựng......................................35
Bảng 3.40 Bảng mơ tả các thao tác trên màn hình luyện phát âm........................................36
Bảng 3.41 Bảng mơ tả các thao tác trên màn hình từ vựng và ngữ pháp theo chủ đề.........38
Bảng 3.42 Bảng mơ tả các thao tác trên màn hình luyện nghe tiếng Anh............................40
Bảng 3.43 Bảng mô tả các thao tác trên màn hình luyện đọc tiếng Anh.............................42


Chương 1:
GIỚI THIỆU TỔNG QUAN ĐỀ TÀI
1.1 Tên đề tài
XÂY DỰNG ỨNG DỤNG HỖ TRỢ MƠN HỌC
1.2 Lí do chọn đề tài
Cơng việc kinh doanh hiện nay khơng chỉ gói gọn quy mơ trong nước, mà cịn có
sự hợp tác với rất nhiều quốc gia khác nhau trên thế giới. Trong đó tiếng Anh dường như
là ngơn ngữ trung gian phổ biến và được ưa chuộng nhất với hơn 1/2 quốc gia trên thế giới
sử dụng và là ngôn ngữ giao tiếp chính của giới doanh nghiệp. Các đối tác lớn chủ yếu đến
từ các quốc gia lớn như Mỹ, Trung Quốc, Nga, Anh, Đức hầu hết đều sử dụng tiếng Anh
là ngơn ngữ giao tiếp. Vì vậy, nếu chúng ta có kỹ năng tiếng Anh giao tiếp cơng việc tốt,

chúng ta có thể làm việc với bất kỳ đối tác nào ở bất cứ đâu trên thế giới. Do đó, các doanh
nghiệp ln u cầu từ nhân viên đến cấp quản lý phải có kỹ năng giao tiếp tiếng Anh công
việc cũng là điều dễ hiểu.
Việc học anh văn giao tiếp hiện nay khá khó khăn đối với người đi làm. Họ khơng
có thời gian để tham gia vào các lớp học trực tiếp vì sau giờ hành chánh, họ cịn phải chăm
lo cho gia đình hoặc tập trung vào dự án cơng việc. Vì lẽ đó, nhóm em sẽ phát triển ứng
dụng giúp cho người dùng học tiếng Anh giao tiếp mọi lúc mọi nơi. Đồng thời, ứng dụng
cịn hướng đến đối tượng trẻ em để có thể đáp ứng với hầu hết mọi đối tượng có nhu cầu
học tiếng Anh.
1.3 Lí do chọn cơng nghệ
Mọi người thường sử dụng hệ điều hành Android và iOS là phổ biến nhất hiện nay.
Vì muốn hướng đến tất cả các đối tượng người dùng cho nên nhóm em khơng thể phát triển
ứng dụng chỉ trên mỗi nền tảng Android hay là iOS được. Nhưng để xây dựng ứng dụng
cho riêng mỗi loại hệ điều hành thì tốn khá nhiều thời gian và chi phí.
Chính vì thế, nhóm em quyết định sử dụng framework React Native nhằm giúp cho
ứng dụng chạy được trên cả 2 nền tảng phổ biến nhất hiện nay là Android và iOS, giúp cho
đa số người dùng thiết bị di động đều có thể sử dụng một cách mượt mà và nhanh chóng.

1


Đề tài này nhóm em quyết định phát triển trên nền tảng các thiết bị di động mà
không phải nền tảng web hay trên desktop là bởi vì người dùng có thể học tiếng Anh mọi
lúc, mọi nơi mà khơng phụ thuộc vào mơi trường, khơng gian. Vì khơng phải ai cũng mang
theo một chiếc laptop bên mình, mà hiện nay ai cũng sở hữu cho mình một chiếc điện thoại.
Khi cần học tiếng Anh, người dùng chỉ cần bật điện thoại của mình lên và khởi động ứng
dụng là có thể học tập một cách tiện lợi. Nếu ứng dụng này chạy trên nền tảng web thì
người dùng sẽ mất nhiều thao tác hơn để vào ứng dụng. Thêm vào đó, giao diện có thể
khơng được tốt bằng so với khi hiển thị trên ứng dụng di động.
1.4 Môi trường phát triển ứng dụng

-

Hệ điều hành: Microsoft Windows, macOS

-

Front-end: React Native, Redux toolkit

-

Cơ sở dữ liệu: Cloud Firestore.

-

Công cụ phân tích thiết kế: Draw.io

-

Cơng cụ xây dựng ứng dụng: Visual Studio Code

1.5 Các yêu cầu của hệ thống
Bảng 1.13 Danh sách các yêu cầu của hệ thống
STT

Tên yêu cầu

1

Hệ thơng phân loại trình độ của người học

2

Học từ vựng, ngữ pháp từ các mẫu câu giao tiếp hằng ngày, trong công việc

3

Luyện nghe các đoạn hội thoại

4

Luyện phát âm với mẫu câu cho trước và đưa ra so sánh

5

Hệ thống giúp người học ôn luyện từ vựng

6

Quản lý thông tin người dùng

2


Chương 2:
CƠ SỞ LÍ THUYẾT
2.1 React Native

Hình 2.1 Biểu tượng React Native
Hiện nay, hầu hết người dùng đang dần có xu hướng sử dụng các ứng dụng di động
hơn là ngồi trước màn hình máy tính để sử dụng một trang web. Nắm bắt được xu hướng

đó, nhóm em quyết định xây dựng đồ án trên nền tảng một ứng dụng di động. Thế nhưng,
câu hỏi đặt ra là nhóm em nên xây dựng ứng dụng này bằng công nghệ gì? Sau nhiều lần
đắn đo, nhóm em quyết định sử dụng framework React Native – Một Framework hỗ trợ
xây dựng ứng dụng đa nền tảng trên cả Android, IOS và tiết kiệm thời gian học cơng nghệ
cho các lập trình viên web đã có kinh nghiệm sử thư viện ReactJS trước đó.
Vậy React Native là gì? React Native là một framework do công ty công nghệ nổi
tiếng Facebook phát triển nhằm mục đích giải quyết bài tốn hiệu năng của Hybrid và bài
tốn chi phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động. Chúng
ta sẽ build được ứng dụng Native, và chúng ta cũng có thể build ứng dụng đó một cách đa
nền tảng (multi-platform) chứ không phải là một “mobile web app”, không phải là
“HTML5 app”, và cũng không phải là một “hybrid app” hay cũng không chỉ build trên iOS
hay Android mà chúng ta build và chạy được cả hai hệ sinh thái. Một điểm hay ho nữa là
giảm chi phí recompile của Native bằng cách sử dụng Hot-Loading tức là bạn không cần
phải build lại ứng dụng từ đầu nên việc chỉnh sửa diễn ra rất nhanh chóng. Giúp cho lập
trình viên có thể thấy được những chỉnh sửa của họ một cách nhanh chóng trực quan, khơng
cịn phải bỏ quá nhiều thời gian trong việc build và run ứng dụng nữa. [3]

3


Một số ưu và nhược điểm của React Native trong q trình phát triển ứng dụng mà
chúng ta có thể cân nhắc như sau [4]:
Ưu điểm:
- Sử dụng ít native code hơn.
- Thời gian phát triển ứng dụng được rút ngắn.
- Tiết kiệm chi phí nhân lực cho doanh nghiệp.
- Khả năng tái sử dụng code cao (75% – 80%).
- Trải nghiệm người dùng rất tốt.
- Không cần nhiều kiến thức nền.
Nhược điểm:

- Chỉ hỗ trợ 2 nền tảng Android và iOS.
- Hiệu năng sẽ thấp hơn với ứng dụng thuần native code.
- Bảo mật khơng cao.
- Có một số thư viện cần trả phí.
- Khả năng tùy biến khơng thực sự tốt với một vài module.
2.2 Cloud Firestore

Hình 2.2 Biểu tượng Cloud Firestore của Firebase
Sau khi đã tìm được Framework ưng ý, tiết kiệm thời gian và dễ dàng phát triển trên
nền tảng di động là React Native. Bài tốn tiếp theo nhóm em cần giải quyết đó là cơ sở
dữ liệu và phát triển code phía back-end.

4


Tuy nhiên việc phát triển một server và code back-end sẽ tốn kha khá thời gian để
phát triển. Vậy nên, giải pháp ở đây là nhóm em quyết định sẽ sử dụng Firebase được phát
triển bởi google. Firebase sẽ cung cấp cho chúng ta hai tùy chọn là Firebase realtime
database và Cloud Firestore. Ở đồ án 2 kì này, nhóm em quyết định sử dụng Cloud
Firestore.
Vậy Cloud Firestore là gì? Cloud Firestore là cơ sở dữ liệu mới của Firebase phát
triển dành cho ứng dụng di động. Nó là sự kế thừa của Realtime Database với mơ hình dữ
liệu mới và trực quan hơn. Cloud Firestore phong phú hơn, nhanh hơn và có khả năng mở
rộng siêu việt hơn so với Realtime Database. Giống như Firebase Realtime Database, nó
giúp dữ liệu của bạn đồng bộ hóa trên các ứng dụng client thông qua việc đăng ký realtime
và cung cấp hỗ trợ ngoại tuyến cho thiết bị di động và web. Cloud Firestore cũng cung cấp
tích hợp với các sản phẩm khác của Firebase và Google Cloud Platform, bao gồm cả Cloud
Functions.
Cloud Firestore cung cấp cho chúng ta một số chức năng chính như:
- Tính linh hoạt: Cloud Firestore hỗ trợ các cấu trúc dữ liệu linh hoạt, phân cấp dữ liệu.

Lưu trữ dữ liệu của bạn trong các document, được tổ chức thành các collection. Các
document có thể chứa các đối tượng phức tạp.
- Truy vấn tượng trưng: Bạn có thể sử dụng các truy vấn để truy xuất các document riêng
lẻ hoặc để truy xuất tất cả các document trong collection khớp với các tham số truy vấn
của bạn. Các truy vấn của bạn có thể bao gồm nhiều bộ lọc, kết hợp giữa bộ lọc và sắp xếp.
- Cập nhật thời gian thực: Cloud Firestore sử dụng đồng bộ hóa dữ liệu để cập nhật dữ liệu
trên mọi thiết bị được kết nối. Nó cũng được thiết kế để thực hiện các truy vấn tìm nạp một
lần.
- Hỗ trợ offline: Cloud Firestore lưu trữ dữ liệu tại local, vì vậy ứng dụng có thể viết, đọc,
nghe và truy vấn dữ liệu ngay cả khi thiết bị ngoại tuyến. Khi thiết bị trở lại trực tuyến,
Cloud Firestore sẽ đồng bộ hóa mọi thay đổi cục bộ lên Cloud Firestore.
- Khả năng mở rộng: Mang đến khả năng từ Google Cloud Platform thiết kế để sử dụng cơ
sở dữ liệu khó khăn nhất từ các ứng dụng lớn nhất thế giới.
Cách hoạt động của Cloud Firestore:

5


- Cloud Firestore là một cơ sở dữ liệu NoQuery được lưu trữ trên đám mây mà các ứng
dụng IOS, Android, Web có thể truy cập trực tiếp thơng qua SDK.Cloud Firestore cũng có
sẵn trong Node.js, Java, Python và Go SDKs, REST và RPC APIs.
- Được tổ chức theo mô hình dữ liệu NoQuery của Cloud Firestore, dữ liệu lưu trong các
document ánh xạ tới các giá trị. Các document này được lưu trữ trong các collection cho
bạn tổ chức dữ liệu và thực hiện truy vấn
- Bảo vệ quyền truy cập vào dữ liệu của bạn trong Cloud Firestore với Firebase
Authentication cho Android, iOS và JavaScript hoặc nhận dạng và quản lý truy cập (IAM).
[5]
2.3 Redux Toolkit
Trong quá trình xây dựng ứng dụng sử dụng React Native, một bài tốn các lập trình
viên gặp phải là việc phải quản lý các trạng thái của các thành phần như: nút bấm, trường

nhập liệu,… Các trạng thái này sẽ quyết định dữ liệu hiện lên cho người dùng thông qua
giao diện ứng dụng là gì.

Hình 2.3 Cấu trúc của Redux Toolkit
Quá trình người dùng tương tác với ứng dụng và Redux toolkit cập nhật trạng thái ứng
dụng [6]:
6


1.

Người dùng tương tác với giao diện ứng dụng (chẳng hạn nhấn một nút bấm), lúc

này người dùng đã gửi đi một action (hành động) chứa trạng thái mới và trong redux store.
2.

Redux Store như 1 nơi lưu state global mà tất cả các bộ phận ứng dụng trong phạm

vi của Store đều có thể truy xuất để lấy dữ liệu hoặc cập nhật dữ liệu.
3.

Thông qua reducer trong redux store, các trạng thái được cập nhật mới.

4.

Các trạng thái mới sẽ được hiển thị lên giao diện người dùng.

2.4 TypeScript

Hình 2.4 Biểu tượng TypeScript

- Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn.
- Dễ dàng tổ chức code cho các ứng dụng cực lớn và phức tạp nhờ modules, namespaces
và hỗ trợ OOP mạnh mẽ.
- TypeScript có một bước biên dịch thành JavaScript, sẽ bắt tất cả các loại lỗi trước khi
chúng chạy và làm hỏng một vài thứ.
- Framework Angular 2 viết với TypeScript và nó cũng khuyến khích các lập trình viên sử
dụng ngôn ngữ này trong các dự án của họ [9].

7


2.5 Áp dụng các công nghệ vào đồ án
2.5.1 React Native
Đồ án của nhóm em sẽ được xây dựng bằng React Native để nó có thể hoạt động
được trên cả hai nền tảng phổ biến nhất hiện nay là Android và iOS. Nhóm sẽ dùng
JavaScript để viết code cho ứng dụng và thực thi chúng qua React Native CLI.
React Native có thể hiểu đơn giản là tập hợp các thành phần của React (React
components). Mỗi component thể hiện tương ứng với view hoặc component nào đó của
native. Sau đó, nhóm em sẽ viết code xử lí logic cho các component đó có thể tương tác
hoặc thực hiện chức năng của ứng dụng.
2.5.2 Redux Toolkit
Việc sử dụng Redux Toolkit này khá đơn giản so với Redux thơng thường, nhóm sẽ
dùng cơng cụ này làm một kho lưu trữ chung cho toàn bộ ứng dụng. So với Redux thông
thường, để thay đổi trạng thái của các đối tượng trong ứng dụng như thêm từ vựng, xóa từ
vựng, mẫu câu, ... thì bây giờ cũng đã đơn giản hơn với những cú pháp ngắn gọn, dễ hiểu
cho nhóm em trong việc lập trình.
2.5.3 Cloud Firestore
Để lưu trữ dữ liệu về các chủ đề học tập, nhóm em chọn Cloud Firestore để sử dụng.
Việc lưu toàn bộ tài liệu trực tiếp lên ứng dụng sẽ khiến cho dung lượng của ứng dụng rất
là lớn. Và mỗi lần người dùng chọn một chủ đề nhỏ để học tập, ứng dụng sẽ lưu lại những

nội dung cần thiết để tối ưu hóa dung lượng của ứng dụng. Với các cú pháp dễ hiểu từ trang
chủ của Firebase, nhóm em có thể lấy dữ liệu từ Cloud Firestore khá dễ dàng.
2.5.4 TypeScript
Ngôn ngữ TypeScript hỗ trợ việc triển khai các lớp đối tượng một cách dễ dàng hơn,
giúp quản lý việc xây dựng các chức năng học tiếng Anh một cách có hệ thống, đồng nhất.
Việc sử dụng ngôn ngữ TypeScript vào đồ án giúp cho các thành viên trong nhóm phát
triển có thể tái sử dụng lại cấu trúc, chức năng của các lớp đối tượng.

8


Chương 3:
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
3.1 Sơ đồ Use-case

Hình 3.1 Sơ đồ Use-case tổng quát của ứng dụng

9


3.2 Danh sách actor
Bảng 3.14 Danh sách actor của ứng dụng
STT

Tên actor

Ý nghĩa/Nội dung

Người dùng (trẻ
Trẻ em sử dụng ứng dụng để học tiếng Anh

em)
Người dùng (người
Người lớn sử dụng ứng dụng học tiếng Anh
lớn)

1
2

3.3 Danh sách các use-case
Bảng 3.15 Danh sách các use-case của ứng dụng
STT Tên use-case

Ý nghĩa/Ghi chú

1

Đăng nhập

Người dùng đăng nhập vào hệ thống

2

Đăng xuất

Người dùng đăng xuất khỏi hệ thống

3

Đăng kí

Người dùng đăng kí tài khoản mới

4

Quản lý thông tin cá nhân

Xem/Chỉnh sửa thông tin cá nhân

5

Kiểm tra đầu vào

Bài kiểm tra đầu vào cho người dùng để chuẩn
bị các chủ đề học phù hợp

6

Xem video hội thoại

Xem video các cuộc hội thoại bằng tiếng Anh
(có chuẩn bị các mẫu câu vả từ vựng cho người
dùng trước khi xem)

7

Học từ vựng

Các từ vựng được người dùng lưu vào sẽ hiển
thị dưới dạng flashcard giúp cho họ dễ dàng ghi
nhớ từ vựng

8

Ôn tập từ vựng

Người dùng sẽ làm các câu hỏi trắc nghiệm để
luyện tập lại những từ vựng đã học

9

Luyện phát âm

Người dùng sẽ nói theo những mẫu câu cho sẵn
và hệ thống sẽ so sánh độ phát âm chính xác

10


3.4 Đặc tả Use-case
3.4.1 Đặc tả use-case “Đăng nhập”
Bảng 3.16 Đặc tả use-case đăng nhập
Tên chức năng

Đăng nhập

Tóm tắt

Chức năng đăng nhập vào hệ thống

Dịng sự kiện chính

1. Hệ thống hiển thị màn hình đăng nhập
2. Người dùng nhập email và mật khẩu (cả 2 trường này đều
bắt buộc nhập) và nhấn “Đăng nhập”
3. Hệ thống kiểm tra thông tin đăng nhập
(Dịng sự kiện khác: Thơng tin đăng nhập sai)
4. Hệ thống chuyển tới màn hình chính của ứng dụng

Dịng sự kiện khác

1. Thông tin đăng nhập sai:
Hệ thống hiển thị thông báo tài khoản đăng nhập không hợp
lệ

Các yêu cầu đặc biệt

- Tài khoản đã được đăng kí trước đó
- Email người dùng đã được chứng thực

Trạng thái hệ thống trước Actor: người dùng
khi thực thiện use case

Điều kiện: Người dùng vào ứng dụng khi chưa đăng nhập

Trạng thái hệ thống sau Người dùng đăng nhập thành công vào hệ thống, có thể sử
khi thực hiện use case

dụng các quyền mà hệ thống cho phép

Điểm mở rộng

Khơng có

3.4.2 Đặc tả use-case “Đăng xuất”
Bảng 3.17 Đặc tả use-case đăng xuất
Tên chức năng

Đăng xuất

Tóm tắt

Chức năng đăng xuất ra hệ thống

Dịng sự kiện chính

1. Người dùng nhấn vào Đăng xuất
2. Hệ thống đăng xuất và trở về màn hình đăng nhập

Dịng sự kiện khác

Khơng có

Các u cầu đặc biệt

Khơng có

Trạng thái hệ thống trước Actor: Người dùng
khi thực hiện use case

Điều kiện: người dùng đã đăng nhập hệ thống

11