Xây dựng ứng dụng hỗ trợ môn học (báo cáo cuối kì đồ án 1)

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

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 6 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 1

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 6 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 21/02/2022 đến 10/06/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 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.
Ngồ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.
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.
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 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 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 giao tiếp.


5. Phương pháp thực hiện:
- Tìm hiểu về React Native, Redux, Firebase, NodeJS.
- 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
- 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.
- Á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.
- Có thể mở rộng thêm các chức năng mới cho ứng dụng sản phẩm đề tài để phù hợp
với nhu cầu thực tiễn trong tương lai.

8. Kế hoạch thực hiện
Thời gian

Nội dung


21/02/2022 – 06/03/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.

07/03/2022 – 21/03/2022

- Tất cả: Tìm hiểu, nghiên cứu cơng nghệ React Native.

22/03/2022 – 04/04/2022

- Phân tích và thiết kế hệ thống ứng dụng.
+ Lê Khải Hoàn: Chức năng quản lý thơng tin người dùng,
luyện phát âm theo mẫu câu có sẵn, ôn tập từ vựng.
+ 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

05/04/2022 – 25/04/2022

Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao diện cho
ứng dụng

26/04/2022 – 23/05/2022

Cài đặt phần back-end, xử lý của hệ thống.

24/05/2022 – 10/06/2022

Kiểm thử hệ thống và hoàn thiện báo cáo.
TP. HCM, ngày 08 tháng 03 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 chúng 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.


LỜI CẢM ƠN
Chúng 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 1 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 chúng 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 chúng em được hoàn thiện hơn.
Chúng em xin chân thành cảm ơn!

MỤC LỤC
Chương 1: GIỚI THIỆU TỔNG QUAN ĐỀ TÀI ...................................... 1
1.1 Tên đề tài : XÂY DỰNG ỨNG DỤNG HỖ TRỢ MƠN HỌC ................. 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 Áp dụng các công nghệ vào đồ án ............................................................... 7
2.4.1 React Native ..................................................................................................... 7
2.4.2 Redux Toolkit .................................................................................................. 7
2.4.3 Cloud Firestore ................................................................................................ 7

Chương 3: MƠ HÌNH USE-CASE .............................................................. 8
3.1 Sơ đồ Use-case .............................................................................................. 8
3.2 Danh sách actor ............................................................................................ 8
3.3 Danh sách các use-case ................................................................................. 9
3.4 Đặc tả Use-case ............................................................................................. 9
3.4.1 Đặc tả use-case “Đăng nhập” .......................................................................... 9
3.4.2 Đặc tả use-case “Đăng xuất” ......................................................................... 10
3.4.3 Đặc tả use-case “Đăng ký”............................................................................. 11
3.4.4 Đặc tả use-case “Quản lý thông tin cá nhân” .............................................. 12
3.4.5 Đặc tả use-case “Kiểm tra đầu vào” ............................................................. 13
3.4.6 Đặc tả use-case “Xem video hội thoại” ......................................................... 14

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

Chương 4: PHÂN TÍCH .............................................................................. 18
4.1 Sơ đồ lớp (mức phân tích) ......................................................................... 18
4.2 Danh sách các lớp đối tượng và quan hệ ................................................. 18
4.3 Mô tả chi tiết từng lớp đối tượng ............................................................... 19
4.3.1 Lớp “User” ...................................................................................................... 19
4.3.2 Lớp “EntryTest” ............................................................................................ 20
4.3.3 Lớp “EntryTestDetail” .................................................................................. 20
4.3.4 Lớp “VideoOutline” ....................................................................................... 21
4.3.5 Lớp “Video” .................................................................................................... 21
4.3.6 Lớp “Vocabulary” .......................................................................................... 21
4.3.7 Lớp “Sentence” ............................................................................................... 22

Chương 5: THIẾT KẾ DỮ LIỆU ............................................................... 23
5.1 Sơ đồ logic ................................................................................................... 23
5.2 Mô tả chi tiết các kiểu dữ kiệu trong sơ đồ logic ...................................... 24
5.2.1 Bảng “Users” .................................................................................................. 24
5.2.2 Bảng “Video” .................................................................................................. 24
5.2.3 Bảng “Vocabulary” ........................................................................................ 25
5.2.4 Bảng “Sentence” ............................................................................................. 25

Chương 6: THIẾT KẾ GIAO DIỆN ỨNG DỤNG ................................... 26
6.1 Danh sách các màn hình ............................................................................. 26
6.2 Mơ tả chi tiết mỗi màn hình ....................................................................... 27
6.2.1 Đăng nhập ....................................................................................................... 27
6.2.2 Đăng ký............................................................................................................ 28
6.2.3 Trang chủ ........................................................................................................ 30

6.2.4 Video ................................................................................................................ 31
6.2.5 Thông tin cá nhân ........................................................................................... 32


6.2.6 Học từ vựng ..................................................................................................... 33
6.2.7 Ôn tập từ vựng ................................................................................................ 35
6.2.8 Luyện phát âm ................................................................................................ 36

Chương 7: KẾT LUẬN............................................................................... 38
7.1 Môi trường phát triển và môi trường triển khai ..................................... 38
7.1.1 Môi trường phát triển ứng dụng .................................................................. 38
7.1.2 Môi trường triển khai ứng dụng .................................................................. 38

7.2 Ưu điểm ....................................................................................................... 38
7.3 Nhược điểm ................................................................................................. 38
7.4 Hướng phát triển ........................................................................................ 38
7.5 Bảng phân công công việc ......................................................................... 39

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


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 3.1 Sơ đồ Use-case tổng quát của ứng dụng .............................................................. 8
Hình 4.1 Sơ đồ lớp tổng quát của ứng dụng...................................................................... 18
Hình 5.1 Sơ đồ dữ liệu tổng quát của ứng dụng ................................................................ 23
Hình 6.1 Màn hình đăng nhập ........................................................................................... 27
Hình 6.2 Màn hình đăng ký ............................................................................................... 28

Hình 6.3 Màn hình trang chủ ............................................................................................ 30
Hình 6.4 Màn hình học qua video ..................................................................................... 31
Hình 6.5 Màn hình thơng tin cá nhân ................................................................................ 32
Hình 6.6 Màn hình học từ vựng ........................................................................................ 33
Hình 6.7 Màn hình ôn tập từ vựng .................................................................................... 35
Hình 6.8 Màn hình luyện phát âm ..................................................................................... 36


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.1 Danh sách actor của ứng dụng ............................................................................. 8
Bảng 3.2 Danh sách các use-case của ứng dụng ................................................................. 9
Bảng 3.3 Đặc tả use-case đăng nhập ................................................................................. 10
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 ......................................................... 12
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 ............................................................................ 16
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 4.1 Danh sách các lớp và mối quan hệ trong ứng dụng ........................................... 19
Bảng 4.2 Bảng mơ tả thuộc tính lớp "User" ...................................................................... 19
Bảng 4.3 Bảng mô tả phương thức lớp "User" .................................................................. 19
Bảng 4.4 Bảng mơ tả thuộc tính lớp "EntryTest" .............................................................. 20
Bảng 4.5 Bảng mô tả phương thức lớp "EntryTest" ......................................................... 20
Bảng 4.6 Bảng mơ tả thuộc tính lớp "EntryTestDetail" .................................................... 20
Bảng 4.7 Bảng mô tả phương thức lớp "EntryTestDetail" ................................................ 20
Bảng 4.8 Bảng mơ tả thuộc tính lớp "VideoOutline" ........................................................ 21

Bảng 4.9 Bảng mơ tả thuộc tính lớp "Video" .................................................................... 21
Bảng 4.10 Bảng mô tả phương thức lớp "Video" ............................................................. 21
Bảng 4.11 Bảng mơ tả thuộc tính lớp "Vocabulary" ......................................................... 22
Bảng 4.12 Bảng mơ tả thuộc tính lớp "Sentence" ............................................................. 22
Bảng 4.13 Bảng mô tả phương thức lớp "Sentence" ......................................................... 22
Bảng 5.1 Bảng mô tả chi tiết trong sơ đồ dữ liệu .............................................................. 23
Bảng 5.2 Bảng mô tả chi tiết dữ liệu "User" ..................................................................... 24
Bảng 5.3 Bảng mô tả chi tiết dữ liệu "Video" ................................................................... 24
Bảng 5.4 Bảng mô tả chi tiết dữ liệu "Vocabulary" .......................................................... 25
Bảng 5.5 Bảng mô tả chi tiết dữ liệu "Sentence" .............................................................. 25


Bảng 6.1 Bảng mơ tả các màn hình của ứng dụng ............................................................ 26
Bảng 6.2 Bảng mô tả các thao tác trong màn hình đăng nhập .......................................... 28
Bảng 6.3 Bảng mơ tả các thao tác trong màn hình đăng ký .............................................. 29
Bảng 6.4 Bảng mô tả các thao tác trong màn hình trang chủ ............................................ 30
Bảng 6.5 Bảng mơ tả các thao tác trong màn hình học qua video .................................... 32
Bảng 6.6 Bảng mơ tả các thao tên trên màn hình thông tin cá nhân ................................. 33
Bảng 6.7 Bảng mô tả các thao tác trên màn hình học từ vựng .......................................... 34
Bảng 6.8 Bảng mô tả các thao tác trên màn hình ơn tập từ vựng...................................... 36
Bảng 6.9 Bảng mơ tả các thao tác trên màn hình luyện phát âm ...................................... 37


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.

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 chúng 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 chúng 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.
Đề tài này chúng 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
1


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

Bảng 1.1 Danh sách các yêu cầu của hệ thố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 chúng 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à chúng 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, chúng 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. [2]

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 [3]:
Ư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 toán tiếp theo nhóm chúng 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 chúng 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 1 kì này, nhóm chúng 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.

5


Cách hoạt động của Cloud Firestore:
-

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).
[4]

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

6


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 [5]:
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 Áp dụng các cơng nghệ vào đồ án
2.4.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.4.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 chúng em trong việc lập trình.
2.4.3 Cloud Firestore
Để lưu trữ dữ liệu về các chủ đề học tập, nhóm chúng 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, chúng em có thể lấy dữ liệu từ Cloud Firestore khá dễ dàng.

7


Chương 3:
MƠ HÌNH USE-CASE
3.1 Sơ đồ Use-case

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

3.2 Danh sách actor
STT
1

Tên actor
Người dùng

Ý nghĩa/Nội dung
Người trực tiếp sử dụng ứng dụng để học tiếng Anh
Bảng 3.1 Danh sách actor của ứng dụng

8


3.3 Danh sách các use-case
STT Tên use-case

Ý nghĩa/Ghi chú

1

Đăng nhập

2

Đăng xuất

3

Đăng kí

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

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

6

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
Bảng 3.2 Danh sách các use-case của ứng dụng

3.4 Đặc tả Use-case
3.4.1 Đặ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

9

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ó
Bảng 3.3 Đặc tả use-case đăng nhập

3.4.2 Đặ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ó

10

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

Trạng thái hệ thống sau Người dùng đăng xuất khỏi hệ thống
khi thực hiện use case
Điểm mở rộng

Khơng có
Bảng 3.4 Đặc tả use-case đăng xuất

3.4.3 Đặc tả use-case “Đăng ký”
Tên chức năng

Đăng ký

Tóm tắt

Chức năng giúp người dùng đăng ký tài khoản để sự dụng hệ
thống

Dịng sự kiện chính

1. Người dùng nhấn vào nút đăng ký
2. Hệ thống hiển thị màn hình đăng kí
3. Người dùng nhập những thơng tin cần thiết và chọn nút tạo
tài khoản
4. Hệ thống kiểm tra thông tin đăng ký, lưu dữ liệu vào cơ sở
dữ liệu, thông báo thành công và yêu cầu người dùng kiểm

tra email để xác thực tài khoản
(Dòng sự kiện khác: Thông tin đăng ký không hợp lệ)
5. Hệ thống chuyển về màn hình đăng nhập
6. Người dùng xác thực tài khoản
7. Tài khoản xác thực thành cơng và có thể dùng để đăng
nhập vào ứng dụng

Dịng sự kiện khác

1. Thơng tin đăng ký không hợp lệ:
Hệ thống hiển thị thông báo lỗi ngay tại chỗ bị lỗi và yêu cầu
nhập lại thơng tin hợp lệ

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

Khơng có

11