Xây dựng ứng dụng hỗ trợ môn học

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
----------

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 1

:

Nguyễn Xuân Luân

Mã số sinh viên 1

:

18521066

Sinh viên thực hiện 2

:

Phan Đức Cường

Mã số sinh viên 2

:

18520547

Lớp

:

SE122.M11

Bộ mơn

:

Phát triển phần mềm

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


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

chỉ bảo, ý kiến đóng góp q báu của cơ và các bạn học cùng lớp để chúng em có điều
kiện được bổ sung, nâng cao kiến thức của mình trong lĩnh vực này, giúp hồn thiện
hơn và tích lũy thêm cho bản thân nhiều kinh nghiệm, phục vụ tốt hơn cho công việc
thực tế sau này.
Chúng em xin chân thành cảm ơn cơ!
Thành phố Hồ Chí Minh, ngày 24 tháng 12 năm 2021
Nhóm sinh viên thực hiện

NGUYỄN XUÂN LUÂN – PHAN ĐỨC CƯỜNG


ĐỀ CƯƠNG CHI TIẾT
Tên đề tài: Xây dựng ứng dụng hỗ trợ môn học
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 10/9/2021 đến ngày 25/12/2021
Sinh viên thực hiện:
1. NGUYỄN XUÂN LUÂN - 18521066
2. PHAN ĐỨC CƯỜNG - 18520547
Nội dung đề tài:(Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực
hiện, kết quả mong đợi của đề tài)
Mục tiêu:
Ứng dụng hỗ trợ mơn học được thực hiện dựa trên hai mục đích chính sau:
Thứ nhất là nghiên cứu các cơng nghệ lập trình như: lập trình ứng dụng di động
với React Native, xây dựng hệ thống backend với .NET Core.
Thứ hai là phát triển ứng dụng có tính thực tiễn cao, có khả năng triển khai ứng
dụng vào thực tế, hỗ trợ các bạn mới bắt đầu học tiếng Anh làm quen với ngơn
ngữ này một cách nhanh chóng.
Nhóm hy vọng dựa trên nền tảng lý thuyết đã được thầy cô truyền thụ lại, kết hợp
với sự tìm hiểu cơng nghệ của nhóm, đồ án của nhóm sẽ đạt được mục đích mong
đợi.

Phương pháp thực hiện: làm việc với nhóm 02 thành viên, phân chia công việc phù
hợp với năng lực và kinh nghiệm của từng người, thực hiện đồ án theo lượng công
việc và thời gian đã được lập kế hoạch chi tiết. Các vấn đề liên quan đến đồ án đều
được trao đổi trực tiếp giữa các thành viên.


Kết quả mong đợi:
Sau khi xác định đề tài và nghiên cứu, tìm hiểu thực tế, nhóm đã xây dựng ý
tưởng thiết kế ứng dụng hỗ trợ môn học đạt được những mục tiêu sau:
Đối với người dùng:
-

Cung cấp các tính năng đa dạng cho người dùng có thể rèn luyện đầy đủ bốn
kỹ năng nghe, nói, đọc, viết tiếng Anh.

-

Cung cấp các bài học từ vựng theo chủ đề, một số điểm ngữ pháp quan trọng,
đọc tin tức, nghe podcast tiếng Anh.

-

Tích hợp những chức năng bổ trợ như tra từ điển, kiểm tra lỗi chính tả và ngữ
pháp, chấm điểm phát âm từ vựng.

-

Sau mỗi bài học từ vựng hoặc ngữ pháp, ứng dụng sẽ có bài tập tự luyện cho
người dùng ôn tập lại kiến thức đã học.

Các tiêu chí khác:
Tính thẩm mỹ
-

Phần mềm có giao diện đẹp, dễ sử dụng, bố cục hợp lý cuốn hút người dùng
khi sử dụng.
Tính logic và bảo mật

-

Tạo được sự liên kết logic giữa các màn hình để người dùng có thể chuyển
màn hình một cách nhanh nhất và thuận tiện nhất.

-

Đảm bảo tính bảo mật về các thơng tin nhạy cảm, tạo cảm giác an tồn cho
người dùng.

-

Có thể cập nhật, thêm xóa sửa đổi thơng tin liên quan đến từ vựng tiếng Anh
và các vấn đề khác liên quan khác đến người dùng.


Kế hoạch thực hiện: (Mô tả kế hoạch làm việc và phân chia công việc các thành
viên tham gia)
Với thời gian thực hiện từ 10/9/2021 tới 25/12/2021, nhóm chia thành 6 sprint
với 2 giai đoạn cụ thể:
-

Giai đoạn 1: Khảo sát hiện trạng, hoàn thiện ứng dụng với các chức năng
dành cho người dùng.
+ Sprint 1: Tìm hiểu về những phương pháp hỗ trợ học tiếng Anh, sử dụng
React Native và .NET Core trong việc xây dựng ứng dụng di động, tìm
hiểu các ứng dụng hỗ trợ học tiếng Anh hiện nay.
+ Sprint 2: Thiết kế chức năng và dữ liệu cho ứng dụng.
+ Sprint 3: Xây dựng các API, xây dựng giao diện ứng dụng để thực hiện
một số chức năng đã được xác định ở sprint 2.
+ Sprint 4: Xây dựng các chức năng ở sprint 3.

Sprint

1
(10/9/2021 –

NGUYỄN XUÂN LUÂN

PHAN ĐỨC CƯỜNG

Tìm hiểu về .NET Core,

Tìm hiểu về React Native,

JSON Web Token, Redis

Redux

Cache, Firebase

30/9/2021)

Tìm hiểu về các phương pháp
hỗ trợ học tiếng Anh
Khảo sát các ứng dụng hiện

Tìm hiểu về các phương pháp
hỗ trợ học tiếng Anh
Khảo sát các ứng dụng hiện
có: Duolingo, 4English,

có: Duolingo, 4English, ELSA ELSA

2

Thiết kế kiến trúc hệ thống

(1/10/2021 –

Tìm các API hỗ trợ dữ liệu và

15/10/2021)

chức năng của ứng dụng

Mô tả yêu cầu chức năng của
ứng dụng, thiết kế dữ liệu.


3
(16/10/2021 –
31/10/2021)

4
(1/11/2021 –
20/11/2021)

-

Xây dựng API cho các chức

Xây dựng giao diện các màn

năng chính của ứng dụng như

chính của ứng dụng như đăng

học từ vựng, ngữ pháp theo

nhập, đăng ký, quên mật

chủ đề, cung cấp bài tập tự

khẩu, màn hình từ vựng, ngữ

luyện, đọc báo, nghe podcast

pháp, đọc báo, nghe podcast.

Hoàn thành API xác thực

Hoàn thành giao diện ứng

người dùng (đăng ký, đăng

dụng, kết nối được với

nhập, quên mật khẩu) và các

backend.

API ở sprint 3.

Giai đoạn 2: Thêm các chức năng mở rộng, kiểm thử, viết báo cáo đề tài.
+ Sprint 5: Mở rộng thêm chức năng cho ứng dụng
+ Sprint 6: Tiến hành kiểm thử, viết báo cáo.

Sprint

5
(21/11/2021 –

NGUYỄN XUÂN LUÂN

Xây dựng API hỗ trợ kiểm tra Xây dựng giao diện màn hình
chính tả và ngữ pháp, đánh giá kiểm tra chính tả, ngữ pháp,
phát âm của người dùng

4/12/2021)

6
(5/12/2021 –

25/12/2021)

PHAN ĐỨC CƯỜNG

đánh giá phát âm của người
dùng

Tiến hành kiểm thử.

Tiến hành kiểm thử.

Viết báo cáo.

Viết báo cáo.


MỤC LỤC
CHƯƠNG 1 - TỔNG QUAN VỀ ĐỀ TÀI .................................................................... 1
1.1. Giới thiệu về đề tài .............................................................................................. 1
1.1.1. Tầm quan trọng của tiếng Anh ..................................................................... 1
1.1.2. Lý do chọn đề tài .......................................................................................... 2
1.2. Khảo sát hiện trạng .............................................................................................. 3
1.3. Đối tượng nghiên cứu .......................................................................................... 3
1.4. Phạm vi nghiên cứu ............................................................................................. 3
1.5. Phương pháp nghiên cứu ..................................................................................... 3
1.6. Nhiệm vụ của đề tài ............................................................................................. 4
CHƯƠNG 2 - CƠ SỞ LÝ THUYẾT ............................................................................. 5
2.1. Tổng quan về React Native ................................................................................. 5
2.1.1. Giới thiệu ...................................................................................................... 5
2.1.2. Cách hoạt động ............................................................................................. 5

2.1.3. Ưu nhược điểm ............................................................................................. 6
2.1.4. Điểm khác biệt giữa React Native và ReactJS ............................................. 7
2.1.5. Công cụ phát triển React Native ................................................................... 7
2.2. Tổng quan về .NET Core ..................................................................................... 7
2.2.1. Giới thiệu ...................................................................................................... 7
2.2.2. Khả năng sử dụng ......................................................................................... 8
2.2.3. Thành phần ................................................................................................... 9
2.2.4. Phân biệt .NET Framework, .NET Core và Mono ....................................... 9
2.2.5. Trường hợp sử dụng ................................................................................... 10
2.3. Tổng quan về Redis Cache ................................................................................ 10
2.3.1. Đặt vấn đề ................................................................................................... 10
2.3.2. Giới thiệu Redis .......................................................................................... 11
2.3.3. So sánh Redis và Memcached .................................................................... 12
2.3.4. Lợi ích ......................................................................................................... 13
2.3.5. Một số ứng dụng ......................................................................................... 14
2.3.6. Trường hợp sử dụng ................................................................................... 15


2.4. Tổng quan về JSON Web Token ....................................................................... 16
2.4.1. Giới thiệu .................................................................................................... 16
2.4.2. Các thành phần ........................................................................................... 16
2.4.3. Trường hợp sử dụng ................................................................................... 17
2.5. Tổng quan về Firebase....................................................................................... 17
2.5.1. Giới thiệu .................................................................................................... 17
2.5.2. Lịch sử phát triển ........................................................................................ 18
2.5.3. Những dịch vụ nổi bật ................................................................................ 19
2.5.4. Ưu nhược điểm ........................................................................................... 20
CHƯƠNG 3 - PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................. 21
3.1. Mô tả yêu cầu .................................................................................................... 21
3.1.1. Yêu cầu chức năng ..................................................................................... 21

3.1.2. Yêu cầu phi chức năng ............................................................................... 23
3.2. Kiến trúc hệ thống ............................................................................................. 24
3.2.1. Sơ đồ kiến trúc tổng quát ............................................................................ 24
3.2.2. Mô tả kiến trúc Front-End .......................................................................... 25
3.2.3. Mô tả kiến trúc Back-End........................................................................... 25
CHƯƠNG 4 - HIỆN THỰC HỆ THỐNG ................................................................... 27
4.1. Thiết kế dữ liệu .................................................................................................. 27
4.1.1. Danh sách các đối tượng trong hệ thống .................................................... 27
4.1.2. Dữ liệu liên quan đến người dùng .............................................................. 28
4.1.3. Dữ liệu liên quan đến chủ đề từ vựng ........................................................ 29
4.1.4. Dữ liệu liên quan đến ngữ pháp.................................................................. 30
4.2. Thiết kế giao diện .............................................................................................. 31
4.2.1. Danh sách các màn hình ............................................................................. 31
4.2.2. Sơ đồ liên kết các màn hình........................................................................ 33
4.2.3. Giao diện các màn hình chức năng xác thực người dùng .......................... 33
4.2.4. Giao diện các màn hình chức năng liên quan đến từ vựng ........................ 34
4.2.5. Giao diện các màn hình chức năng liên quan đến ngữ pháp ...................... 36
4.2.6. Giao diện các màn hình chức năng đọc tin tức .......................................... 38
4.2.7. Giao diện các màn hình chức năng nghe tiếng Anh ................................... 38


4.2.8. Giao diện các màn hình khác...................................................................... 39
CHƯƠNG 5 - KẾT LUẬN........................................................................................... 40
5.1. Đánh giá ............................................................................................................. 40
5.1.1. Thuận lợi ..................................................................................................... 40
5.1.2. Khó khăn..................................................................................................... 40
5.2. Kết quả đạt được ................................................................................................ 40
5.2.1. Ưu điểm ...................................................................................................... 40
5.2.2. Nhược điểm ................................................................................................ 41
5.3. Hướng phát triển ................................................................................................ 41

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


DANH MỤC BẢNG
Bảng 3.1 - Mô tả chức năng của ứng dụng ................................................................... 23
Bảng 3.2 - Mô tả thành phần kiến trúc front-end ......................................................... 25
Bảng 3.3 - Mô tả thành phần kiến trúc back-end ......................................................... 26
Bảng 4.1 - Danh sách đối tượng trong hệ thống ........................................................... 27
Bảng 4.2 - Mô tả dữ liệu người dùng ........................................................................... 28
Bảng 4.3 - Mô tả dữ liệu liên quan đến từ vựng ........................................................... 29
Bảng 4.4 - Mô tả dữ liệu liên quan đến ngữ pháp ........................................................ 30
Bảng 4.5 - Danh sách các màn hình chức năng ............................................................ 32


DANH MỤC HÌNH ẢNH
Hình 2.1 - React Native .................................................................................................. 5
Hình 2.2 - Thành phần trong .NET................................................................................. 9
Hình 2.3 - Kiến trúc redis cahce ................................................................................... 11
Hình 2.4 - So sánh tốc độ Redis và Memcache ............................................................ 12
Hình 2.5 - Firebase ....................................................................................................... 18
Hình 2.6 - Các dịch vụ của Firebase............................................................................. 20
Hình 3.1 - Sơ đồ kiến trúc hệ thống ............................................................................. 24
Hình 4.1 - Đối tượng người dùng ................................................................................. 28
Hình 4.2 - Sơ đồ quan hệ giữa các đối tượng liên quan đến từ vựng ........................... 29
Hình 4.3 - Sơ đồ quan hệ giữa các đối tượng liên quan đến ngữ pháp ........................ 30
Hình 4.4 - Sơ đồ liên kết giữa các màn hình chức năng............................................... 33
Hình 4.5 - Giao diện màn hình Sign in ......................................................................... 33
Hình 4.6 - Giao diện màn hình Sign up ........................................................................ 33
Hình 4.7 - Giao diện màn hình Forgot password ......................................................... 33
Hình 4.8 - Giao diện màn hình Vocabulary main ........................................................ 34

Hình 4.9 - Giao diện màn hình Topic ........................................................................... 34
Hình 4.10 - Giao diện màn hình Vocabulary ............................................................... 34
Hình 4.11 - Giao diện màn hình Flash cards ................................................................ 34
Hình 4.12 - Nội dung của flashcards ............................................................................ 34
Hình 4.13 - Giao diện dạng bài tập trắc nghiệm từ vựng ............................................. 35
Hình 4.14 - Kết quả dạng bài tập trắc nghiệm từ vựng ................................................ 35
Hình 4.15 - Giao diện dạng bài tập nghe phát âm và điền từ ....................................... 35
Hình 4.16 - Kết quả dạng bài tập nghe phát âm và điền từ .......................................... 35
Hình 4.17 - Giao diện dạng bài tập điền vào chỗ trống................................................ 36
Hình 4.18 - Kết quả dạng bài tập điền vào chỗ trống ................................................... 36
Hình 4.19 - Kết quả ơn luyện bằng các dạng bài tập.................................................... 36
Hình 4.20 - Giao diện màn hình Grammar main .......................................................... 36
Hình 4.21 - Kết quả kiểm tra chính tả và ngữ pháp ..................................................... 36
Hình 4.22 - Giao diện màn hình Grammar ................................................................... 36


Hình 4.23 - Giao diện dạng bài tập trắc nghiệm ngữ pháp........................................... 37
Hình 4.24 - Kết quả dạng bài tập trắc nghiệm ngữ pháp .............................................. 37
Hình 4.25 - Giao diện dạng bài tập ngữ pháp điền vào chỗ trống ................................ 37
Hình 4.26 - Kết quả dạng bài tập ngữ pháp điền vào chỗ trống ................................... 37
Hình 4.27 - Giao diện màn hình News main ................................................................ 38
Hình 4.28 - Giao diện màn hình Article ....................................................................... 38
Hình 4.29 - Giao diện màn hình Listen main ............................................................... 38
Hình 4.30 - Giao diện màn hình Podcast ...................................................................... 38
Hình 4.31 - Giao diện màn hình Intro .......................................................................... 39
Hình 4.32 - Giao diện màn hình Splash ....................................................................... 39
Hình 4.33 - Giao diện màn hình Pronunciation assessment ......................................... 39


CHƯƠNG 1 - TỔNG QUAN VỀ ĐỀ TÀI

1.1. Giới thiệu về đề tài
1.1.1. Tầm quan trọng của tiếng Anh
Tiếng Anh rất quan trọng và phổ biến mang lại rất nhiều lợi ích, cơ hội cho người
học nó, và cũng là xu thế 2021 mọi người sẽ sử dụng ngoại ngữ này nhiều hơn. Dưới
đây là một số lợi ích, cơ hội mà tiếng Anh mang đến cho chúng ta:
❖ Tiếp cận thêm kiến thức
Học một ngoại ngữ đồng nghĩa với việc học thêm về một nền văn hóa và tiếp
nhận thêm kiến thức mới. Nếu là người thích khám phá, thích du lịch vịng quanh thế
giới, tận hưởng những điều mới lạ. Vậy việc học tiếng Anh sẽ cung cấp nhiều điều mới
mẻ, thú vị về nền văn hóa của các nước như Anh, Mỹ, Australia,… Đây đều là những
quốc gia đã phát triển với bề dày lịch sử lớn cộng thêm nền văn hóa đa màu sắc, làm
cho tiếng Anh càng trở nên phong phú và thú vị.
Theo cuộc khảo sát cho thấy những người biết song ngữ thường tự tin, cởi mở,
thích học hỏi hơn. Điều này là cần thiết để thành công trong môi trường làm việc quốc
tế (đang ngày càng mở rộng), và chúng ta sẽ cảm thấy dễ thích nghi hơn trong một thế
giới ln thay đổi.
❖ Mở cánh cửa hội nhập, kết nối toàn cầu
Hiện nay, tiếng Anh là ngơn ngữ chính thức của hơn 53 quốc gia và vùng lãnh
thổ, là ngôn ngữ thứ hai của gần 100 quốc gia và ngôn ngữ chung của hơn 400 triệu
người trên thế giới. Trong thời đại công nghiệp 4.0, hầu như các ngành nghề thương
mại, y tế, truyền thông, du lịch,… đều sử dụng tiếng Anh. Ở hầu hết các cuộc gặp gỡ,
diễn đàn và trao đổi công việc, kiến thức, kinh nghiệm trên thế giới đều dùng ngôn ngữ
quốc tế này để làm cầu nối.
Tiếng Anh là tấm vé thông hành, là một cánh cửa tiếp nối với thế giới hiện đại
kết nối với nhiều người, và cũng không thể thiếu cho bất kỳ người nào mong muốn
khẳng định bản thân trong thời đại tồn cầu hóa như hiện nay và sau này. Với sự trang
bị đầy đủ cả về kiến thức lẫn kỹ năng giao tiếp, những người giỏi tiếng Anh có thể hòa

1

nhập nhanh chóng vào mơi trường đa văn hóa, đảm nhiệm nhiều vị trí cơng việc khác
nhau tùy theo sở thích và sở trường, năng lực của mình.
❖ Phát triển trong cơng việc
Cùng với sự hội nhập từ nước ngồi vào Việt Nam, chắc chắn giao tiếp bằng
tiếng Anh là một điều đương nhiên. Vì có các cơng ty nước ngoài, đối tác nước ngoài
làm việc và chỉ giao tiếp bằng tiếng Anh, và nếu biết tiếng Anh đó là một lợi thế đối với
bản thân mỗi người, chúng ta sẽ có cơ hội học tập và làm việc với họ, phát triển bản
thân mình hơn cuộc sống cũng dễ dàng hơn.
Theo thống kê từ JobStreet Kuala Lumpur, những học sinh giỏi tiếng Anh trong
tương lai sẽ nhận mức lương cao hơn đến 22% so với những người không biết sử dụng
tiếng Anh. Có thể nói, việc biết và sử dụng thành thạo tiếng Anh sẽ tăng cơ hội có một
cơng việc tốt tại các tập đồn lớn, với mức lương vượt trội so với các đồng nghiệp khác.
1.1.2. Lý do chọn đề tài
Trong nền kinh tế tồn cầu hóa thì việc học tiếng Anh càng trở nên cấp bách hơn
bao giờ hết. Nhiều người đã đầu tư rất nhiều thời gian, tiền bạc, công sức cho việc học
tiếng Anh nhưng vẫn chưa hiệu quả, vẫn khơng thể nói thứ ngôn ngữ ấy một cách tự
nhiên và trôi chảy. Sở dĩ xảy ra tình trạng như vậy là bởi vì trong quá trình học tiếng
Anh, người học thường hay gặp phải những khó khăn khi học ngữ âm, từ vựng, học q
nhiều ngữ pháp nhưng khơng nói được, khơng tìm được cấu trúc/từ vựng khi viết để thể
hiện suy nghĩ, không nghe được tiếng Anh,...
Nhận thức được tầm quan trọng của tiếng Anh trong cuộc sống hiện nay, cũng
như biết được những khó khăn mà người học tiếng Anh đang gặp phải, đồng thời được
sự giúp đỡ của cô Trần Thị Hồng Yến, nhóm chúng em đã quyết định lựa chọn đề tài
“Xây dựng ứng dụng hỗ trợ môn học” với mục đích áp dụng cơng nghệ để xây dựng
một ứng dụng di động hỗ trợ những người mới bắt đầu học tiếng Anh, giúp cho việc
học tiếng Anh của họ trở nên hiệu quả, dễ dàng hơn.

2

1.2. Khảo sát hiện trạng
Hiện nay trên thị trường có nhiều ứng dụng hỗ trợ học tiếng Anh, nhưng đa phần
các phần mềm đều chỉ hỗ trợ chuyên biệt một kỹ năng tiếng Anh nào đó. Ví dụ như ứng
dụng Duolingo chuyên hỗ trợ học từ vựng, ngữ pháp, 4English chuyên hỗ trợ kỹ năng
đọc, ELSA chuyên hỗ trợ kỹ năng nói.
Với mục đích hỗ trợ người học tiếng Anh toàn diện, chúng em quyết định xây
dựng ứng dụng với nhiều chức năng hỗ trợ cả 4 kỹ năng nghe nói đọc viết, đó cũng là
điểm khác biệt của đề tài so với các ứng dụng hỗ trợ học tiếng Anh hiện nay.
1.3. Đối tượng nghiên cứu
Đồ án này hướng đến nghiên cứu các đối tượng sau:
❖ Các công nghệ:
o React Native
o .NET Core
o Redis Cache
o JSON Web Token
o Firebase
❖ Đối tượng trong phạm vi đề tài hướng đến:

o Những người đang có nhu cầu học 4 kỹ năng tiếng Anh ở mức cơ bản.
1.4. Phạm vi nghiên cứu
Đề tài tập trung vào nghiên cứu về ứng dụng hỗ trợ học tiếng Anh. Sản phẩm
của đề tài là ứng dụng di động hỗ trợ cho việc học tập của những người học tiếng Anh
cơ bản.
1.5. Phương pháp nghiên cứu
Nhóm đã sử dụng các phương pháp nghiên cứu:
-

Phương pháp đọc tài liệu.

-

Phương pháp phân tích các ứng dụng hiện có.

3


1.6. Nhiệm vụ của đề tài
Đề tài “Xây dựng ứng dụng hỗ trợ môn học” là một ứng dụng chạy trên di động
đáp ứng các yêu cầu sau:
-

Cung cấp các tính năng đa dạng cho người dùng có thể rèn luyện đầy đủ bốn kỹ
năng nghe, nói, đọc, viết tiếng Anh.

-

Cung cấp các bài học từ vựng theo chủ đề, một số điểm ngữ pháp quan trọng,
đọc tin tức, nghe podcast tiếng Anh.

-

Tích hợp những chức năng bổ trợ như tra từ điển, kiểm tra lỗi chính tả và ngữ
pháp, chấm điểm phát âm từ vựng.

-

Sau mỗi bài học từ vựng hoặc ngữ pháp, ứng dụng sẽ có bài tập tự luyện cho
người dùng ôn tập lại kiến thức đã học.
Mục tiêu của đề tài này là:

-

Tìm hiểu cách xây dựng ứng dụng di động

-

Tìm hiểu về kiến trúc hệ thống, những công nghệ liên quan

-

Xây dựng thành công ứng dụng hỗ trợ học tiếng Anh trên di động

4


CHƯƠNG 2 - CƠ SỞ LÝ THUYẾT
2.1. Tổng quan về React Native
2.1.1. Giới thiệu
Được phát triển bởi Facebook, React Native là một framework hướng đến phát
triển ứng dụng di động đa nền tảng. Với sự trợ giúp của React Native, lập trình viên
(developer) có thể sử dụng JavaScript để tạo ra mobile apps (ứng dụng di động) hỗ trợ
cho cả nền tảng Android và iOS. Instagram, Facebook, Skype,… là những ứng dụng
nổi bật sử dụng React Native.

Hình 2.1 - React Native

2.1.2. Cách hoạt động
React Native hoạt động được nhờ tích hợp 2 thread là Main Thread và JS Thread
cho ứng dụng di động. Trong đó:

▪

Main Thread: cập nhật giao diện người dùng và xử lý tương tác người dùng.

▪

JS Thread: thực thi và xử lý code Javascript.
Hai luồng Main Thread và JS Thread này hoạt động độc lập với nhau. Hai Thread

sẽ tương tác với nhau nhờ một Bridge (cầu nối). Chiếc cầu này sẽ chuyển đổi dữ liệu
qua lại giữa các Thread.

5


2.1.3. Ưu nhược điểm
2.1.3.1. Ưu điểm
❖ Có thể tái sử dụng code
React Native cho phép các developer có thể tái sử dụng code trong khi phát triển
các ứng dụng đa nền tảng. Đặc biệt, developer có thể tái sử dụng hầu như 80-90% các
đoạn code thay vì phải viết và tạo các ứng dụng riêng biệt cho các nền tảng khác
nhau. Ưu điểm này giúp người dùng:
▪

Tiết kiệm thời gian và giảm chi phí phát triển của một ứng dụng.

▪

Tận dụng nguồn nhân lực tốt hơn

▪

Duy trì ít code hơn, ít bugs hơn

▪

Các tính năng trong cả 2 nền tảng cũng tương tự nhau.
❖ Cộng đồng người dùng lớn
React Native được đánh giá là một trong những Framework được yêu thích nhất

(khảo sát của stack overflow vào năm 2019). Nhờ cộng đồng người dùng rất lớn trên
toàn thế giới, chúng ta có thể tìm sự hỗ trợ nếu gặp phải bugs.
❖ Tính ổn định và tối ưu
Được phát triển bởi Facebook, React Native có hiệu năng ổn định khá cao.
▪

Code React Native giúp đơn giản hóa q trình xử lý dữ liệu.

▪

Đội ngũ phát triển ứng dụng không quá lớn.

▪

Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau.

▪

Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid.
2.1.3.2. Nhược điểm

▪

Yêu cầu Native code.

▪

Hiệu năng kém hơn so với Native App.

▪

Bảo mật chưa thật sự tốt do dùng JavaScript. Do sử dụng JavaScript, người dùng
cũng sẽ bị ảnh hưởng bởi những đặc điểm của JavaScript: dễ làm dễ sai, dẫn đến
khó duy trì về sau.

▪

Quản lý bộ nhớ.

▪

Tùy biến chưa thật sự tốt ở một số module.

▪

Khơng thích hợp cho các ứng dụng cần năng lực tính tốn cao (hash, crypto, etc).
6


2.1.4. Điểm khác biệt giữa React Native và ReactJS

▪

Thiết lập và đóng gói (setup and bundling): Thiết lập và vận hành React
Native khá nhanh chóng vì có sẵn tất cả những module cần thiết. Trong khi đó,
bạn cần phải xác định các module cần thiết cho ứng dụng của mình khi
dùng ReactJS.

▪

DOM và Styling: React Native không dùng HTML để render app mà cung cấp
các component để thay thế. Component React Native sẽ map các UI iOS hoặc
Android được render trên ứng dụng.

▪

Animations và Gestures: Thay vì CSS animation, bạn sẽ phải sử dụng
JavaScript để tạo các Component động trong React Native.

▪

Điều hướng (Navigation): Navigator trong React Native cung cấp tất cả những
gì mà bạn cần để thực hiện việc chuyển đổi giữa các Scene trong ứng dụng.

▪

Nền tảng code riêng (Platform specific code): React Native có khả năng phát
hiện và nạp đúng code cho nền tảng được hỗ trợ.

2.1.5. Cơng cụ phát triển React Native
Các nhà phát triển có thể sử dụng những cơng cụ hồn tồn miễn phí như sau:

▪

Hot Reloading

▪

Chrome Dev Tools để kiểm tra yêu cầu mạng, hiển thị bản ghi giao diện và dừng
mã trên các trình gỡ lỗi

▪

Redux DevTools để kiểm tra trạng thái của store Redux

2.2. Tổng quan về .NET Core
2.2.1. Giới thiệu
.NET Core là một framework được Microsoft phát triển. Đây là một nền tảng
phát triển đa mục đích. .Net Core là nền tảng chéo (hỗ trợ Windows, macOS và Linux)
và có thể được sử dụng để xây dựng các ứng dụng thiết bị, đám mây và IoT.
.NET Core hỗ trợ các ngôn ngữ như: C# và F# (và C++/CLI kể từ 3.1; chỉ được
bật trên Windows) và nó cịn hỗ trợ một phần của Visual Basic .NET.
Cụ thể:
•

C#: Là loại ngơn ngữ lập trình phát triển theo hướng đối tượng và mục đích.

7


•

F# : Là loại ngơn ngữ lập trình cho chức năng đa nền tảng, mã nguồn mở. Nó
cũng thường bao gồm lập trình cho hướng đối tượng và mệnh lệnh.

•

Visual Basic: Là ngơn ngữ lập trình có cú pháp đơn giản giúp xây dựng cho các
ứng dụng hướng tới đối tượng an tồn.
Những cơng cụ (gọi tắt là IDE) để lập trình với .NET core:

•

Visual Studio

•

Visual Studio Code

•

Sublime Text

•

Vim
Các phiên bản .NET Core được ra đời từ năm 2016 đã phát triển rất đều đặn và

nhận được những sự tiếp đón từ phía cộng đồng lập trình viên. Trong đó bản được đánh
giá là ổn định và được ưa chuộng nhất chính là 3.1.2.
2.2.2. Khả năng sử dụng
ASP.NET đã xuất hiện cách đây 15 năm trước. Nó là một phần của .NET

Framework. Nó đã có hàng triệu lập trình viên đã sử dụng để xây dựng những ứng dụng
web. Và Microsoft đã phát triển thêm nhiều tính năng mới qua từng năm.
ASP.NET Core có một số thay đổi lớn. Từ việc học hỏi các framework module
hóa khác. ASP.NET Core khơng còn dựa trên System.Web.dll nữa. Mà được dựa trên
một tập hợp các gói, các module hay cũng được gọi là các Nuget packages.
Với ASP.NET Core bạn có thể:
•

HTTP request được tối ưu nhẹ hơn.

•

Hợp nhất xây dựng web UI và web APIs.

•

Tích hợp những client-side frameworks hiện đại và có những luồng phát triển.

•

Hệ thống cấu hình dựa trên mơi trường đám mây thật sự.

•

Dependency injection được xây dựng sẵn.

•

Có thể host trên IIS hoặc self-host trong process của riêng bạn.

•

Được xây dựng trên .NET Core, hỗ trợ thực sự app versioning.

•

Những cơng cụ mới để đơn giản hóa q trình phát triển web tối ưu.

•

Xây dựng và chạy đa nền tảng(Windows, Mac và Linux).

•

Mã nguồn mở và tập trung vào cộng đồng.
8


2.2.3. Thành phần
.NET Core bao gồm các nền tảng: .NET Compiler Roslyn, .NET Core
framework CoreFX, .NET Core runtime CoreCLR, và ASP.NET Core.
Cấu trúc của.Net Core chi tiết
•

CoreFX: Nó được xem là nền tảng thư viện dành cho .NET Core.

•

CoreCLR: Đây là cơng cụ thực thi .Net trong .Net Core. Nó hỗ trợ thực hiện một
số chức năng như thu gom và biên dịch rác thành mã máy.

•

.Net Core runtime: Sẽ cung cấp một kiểu hệ thống, tải lắp ráp, trình thu gom rác
và các dịch vụ cơ bản khác.

•

Net Core runtime: Cung cấp framework để việc xây dựng các ứng dụng hiện đại
tối ưu, dựa trên đám mây, ứng dụng web, kết nối internet,…

•

.Net Core SDK và trình biên dịch ngôn ngữ (Roslyn và F#): giúp cho phép phát
triển .Net Core

•

Lệnh dotnet: Lệnh dùng cho việc khởi chạy ứng dụng .NET Core và các lệnh
CLI.

Hình 2.2 - Thành phần trong .NET

2.2.4. Phân biệt .NET Framework, .NET Core và Mono
Với người mới làm quen với .NET hay kể cả một số người đã làm việc với .NET
lâu năm. Những thuật ngữ, khái niệm như .NET Framework, Mono hay .NET core vẫn
hay gây ra nhầm lẫn. Về cơ bản thì .NET Framework, .NET core và Mono là ba phiên
9

bản .NET khác nhau (có nghĩa là mỗi phiên bản có Runtime, Libraries và Toolings
riêng). Dưới đây là sự khác biệt giữa ba phiên bản đó:
▪

.NET Framework: Được Microsoft đưa ra chính thức từ năm 2002. .NET
Framework chỉ hoạt động trên hệ điều hành Windows. Những nền tảng như:
WPF, Winforms, ASP.NET(1-4) hoạt động dựa trên .NET Framework.

▪

Mono là phiên bản cộng đồng giúp mang .NET đến những nền tảng ngoài
Windows. Mono được phát triển để xây dựng những ứng dụng với giao diện
người dùng và được sử dụng rất rộng rãi như: Unity Game, Xamarin…

▪

.NET core: Đến năm 2013, Microsoft định hướng đa nền tảng và phát triển .NET
core. .NET core hiện được sử dụng trong các ứng dụng Universal Windows
platform và ASP.NET Core.

2.2.5. Trường hợp sử dụng
Chúng ta nên lựa chọn .NET Core nếu như:
•

Đang muốn xây dựng ứng dụng của mình chạy đa nền tảng: Windows, Linux và
Mac.

•

Có sẵn các tinh thần học hỏi, không sợ sai bởi vì .NET Core vẫn chưa có thể

hồn thiện.

•

Phát triển ứng dụng theo kiểu Microservices:Xây dựng các ứng dụng phức tạp
dựa theo module với khả năng tách rời và với mỗi module có thể sử dụng các
cơng nghệ khác nhau. Hiện nay .Net Core chính là một trong những lựa chọn
chính xác nhất.

•

Nếu hệ thống của bạn cần hiệu năng và khả năng mở rộng tốt nhất cho dù có
nhiều người dùng thì .NET Core và ASP.NET Core sẽ vẫn là trợ thủ sáng giá
nhất chúng ta nên lựa chọn.

2.3. Tổng quan về Redis Cache
2.3.1. Đặt vấn đề
Thông thường, cứ mỗi request từ phía client thì database sẽ trả kết quả về cho
client. Cho tới khi số lượng request giống nhau tăng lên đáng kể sẽ khiến cho CPU và
Hard Disk phải thực hiện lặp đi lặp lại công việc lấy dữ liệu ấy. Để giải quyết vấn đề
trên thì Caching đã làm tốt nhiệm vụ của nó bằng việc giúp server ghi nhớ kết quả của
10


cả q trình tính tốn, để trả về cho những lần request tương tự từ client trong tương lai.
Và Redis được biết đến là một công cụ hỗ trợ server giải quyết bài tốn Caching này.
2.3.2. Giới thiệu Redis

Hình 2.3 - Kiến trúc redis cahce

Redis là tên viết tắt của Remote Dictionary Server (Máy chủ từ điển từ xa), là
kho dữ liệu key-value, trong bộ nhớ, mã nguồn mở và có tốc độ truy cập nhanh để dùng
làm cơ sở dữ liệu, cache, message broker và queue. Redis có thể được sử dụng như một
database được lưu trữ trong ram để tăng tốc độ xử lí.
Redis hiện cung cấp thời gian phản hồi ở tốc độ chưa đến một mili giây, vì Redis
cho phép bạn lưu trữ trên RAM của mình nhanh hơn so với khi lưu trữ trên các ổ cứng,
khoảng 150.000 lần so với truy cập ổ HDD và nhanh hơn 500 lần so với truy cập SSD.
Thông thường khi ta sử dụng cơ sở dữ liệu thì vẫn lưu trữ trên ổ đĩa cứng. Ví dụ khi
query một cơ sở dữ liệu để đọc 10.000 bản ghi. Nếu dữ liệu được lưu trữ trên đĩa, thì nó
sẽ mất trung bình 30 giây, trong khi chỉ mất khoảng 0,0002 giây để đọc từ RAM, đó
chính là lí do mà Redis dùng RAM để lưu trữ. Redis thường được tạo trên một máy chủ
riêng hoặc set giới hạn bộ nhớ nhất định được sử dụng trên máy chủ dùng chung cho nên
sẽ khơng bị tình trạng thiếu RAM khi chạy đồn thời các ứng dụng khác.
Tuy nhiên, khi lưu trữ trên RAM thì nhanh thật nhưng lại gặp 1 vấn đề là bị mất
điện thì dữ liệu cũng mất tiêu. Để ngăn chặn việc mất dữ liệu xảy ra, có một mơ-đun
được tích hợp sẵn để ghi trạng thái trong bộ nhớ vào file trên đĩa trong những trường
11


hợp nhất định. Các file này được tải lại khi khởi động lại redis. Vì vậy, dữ liệu sẽ khơng
bị mất. Ngồi ra, để tăng tính sẵn sàng và khả năng chịu lỗi của hệ thống. Redis có thể
cấu hình theo dạng Cluster với kỹ thuật Master-Slave giúp hệ thống Redis luôn sẵn sàng
đáp ứng sao lưu dữ liệu trên đĩa cứng và phục hồi dữ liệu khi gặp sự cố.
2.3.3. So sánh Redis và Memcached
Redis và Memcached đều nhanh và mạnh, đều lưu trữ dữ liệu trong bộ nhớ RAM
và rất hữu ích. Cả redis và memcached đều lưu trữ các kết quả dữ liệu giúp tăng tốc ứng
dụng cho người dùng.
Memcached lưu tất cả dữ liệu trên RAM, chỉ có dữ liệu dạng key/value.
Memcached là tầng cache nên khơng có tính persistent, rất khó backup dữ liệu, vì thế dữ
liệu rất dễ mất. Khi xảy ra tình trạng mất dữ liệu, memcached sẽ đẩy những key cũ hoặc

ít dùng ra trước. Memcached đa luồng nên memcached có khả năng sử dụng nhiều lõi
xử lý, có nghĩa là người dùng có thể xử lý nhiều hoạt động hơn bằng việc gia tăng cơng
suất tính tốn.
Có thể thấy, redis phần nào có những ưu điểm như memcached nhưng có sự cải
tiến rõ rệt và tăng khả năng lưu trữ, xử lý khi xảy ra sự cố.
Khi số lượng clients tăng thì tốc độ của Redis tỏ ra nhanh hơn:

Hình 2.4 - So sánh tốc độ Redis và Memcache

12


2.3.4. Lợi ích
❖ In-Memory Data Store
Tồn bộ dữ liệu Redis nằm trong bộ nhớ chính của máy chủ, khác với các cơ sở
dữ liệu thường lưu phần lớn dữ liệu trên ổ đĩa hoặc ổ SSD. So với cơ sở dữ liệu trên ổ
đĩa truyền thống trong đó phần lớn các tác vụ đều yêu cầu truy cập lặp lại tới ổ đĩa, cịn
Redis thì chỉ việc lấy ra kết quả đã tính tốn. Do đó hiệu suất nhanh thấy rõ rệt với các
tác vụ đọc hoặc ghi thông thường mất chưa đầy một mili giây và hỗ trợ hàng triệu tác vụ
mỗi giây.
❖ Cấu trúc dữ liệu linh hoạt
Khác với những kho dữ liệu key-value đơn giản có cấu trúc dữ liệu giới hạn,
Redis có nhiều cấu trúc dữ liệu khác nhau nên đáp ứng được nhu cầu ứng dụng của bạn.
Kiểu dữ liệu Redis gồm có:
•

String – văn bản hoặc dữ liệu nhị phân có kích thước lên tới 512MB

•

List – một tập hợp các chuỗi được sắp xếp theo thứ tự như khi được thêm vào

•

Set – một tập hợp chưa được sắp xếp các chuỗi, có khả năng giao cắt, liên kết và
khác với các kiểu tập khác

•

Sorted Set – Tập được sắp xếp theo giá trị

•

Hash – một cấu trúc dữ liệu dùng để lưu trữ danh sách các trường và giá trị

•

Bitmap – một kiểu dữ liệu cho phép thực hiện các tác vụ quy mơ bit

•

HyperLogLogs – một cấu trúc dữ liệu xác suất để ước tính các thành phần duy
nhất trong một tập dữ liệu

❖

Đơn giản và dễ sử dụng
Redis đơn giản hóa code của bạn bằng cách cho phép bạn viết ít dòng code hơn

để lưu trữ, truy cập và sử dụng dữ liệu trong các ứng dụng của mình. Ví dụ: nếu ứng

dụng của bạn có dữ liệu được lưu dạng hashmap và bạn muốn lưu trữ dữ liệu đó trong
DB thì bạn chỉ cần sử dụng cấu trúc dữ liệu hashes để lưu chúng. Thao tác tương tự trên
DB khơng có cấu trúc dữ liệu hashes sẽ u cầu nhiều dòng code để chuyển đổi từ định

13