Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN

XÂY DỰNG ỨNG DỤNG HỌC
TIẾNG NHẬT TRÊN NỀN TẢNG IOS

GVHD: TRẦN CÔNG TÚ
SVTH: NGUYỄN TRUNG NGHĨA
MSSV: 16110168
SVTH: ĐẶNG NGỌC TUẤN
MSSV: 16110239

SKL 0 0 7 0 4 2

Tp. Hồ Chí Minh, tháng 07/2020


LỜI CẢM ƠN
Trên thực tế khơng có sự thành cơng nào mà không gắn liền với những sự hỗ trợ,
giúp đỡ dù ít hay nhiều, dù trực tiếp hay gián tiếp của người khác. Nay nhóm thực hiện
xin được phép gửi lời cảm ơn chân thành này đến thầy Trần Cơng Tú, người đã hỗ trợ,
truyền động lực cho nhóm trong quá trình định chọn đề tài, hướng dẫn, nhận xét. Tuy
nhóm khơng hỏi nhiều nhưng khi hỏi thầy đã tận tình giúp đỡ, đó là nguồn động lực cho
nhóm hồn thành mơn học, nếu khơng có những lời hướng dẫn, những kinh nghiệm thực
tiễn của thầy thì nhóm sẽ khó có thể hồn thiện và hồn thành đúng thời hạn được. Một
lần nữa, nhóm thực hiện xin cảm ơn thầy!
Nhóm thực hiện xin gửi cảm ơn đến các bạn cùng khóa đã cung cấp nhiều thơng

tin và kiến thức hữu ích giúp cho nhóm hồn thiện đề tài hơn.
Khoảng thời gian có hạn, cùng với kiến thức cịn hạn chế và cịn nhiều bỡ ngỡ
khác do đó thiếu sót là điều khơng thể tránh khỏi nên nhóm rất mong nhận được những
ý kiến đóng góp quý báu của Thầy để kiến thức của nhóm thực hiện hồn thiện ứng dụng
hơn sau này. Nhóm thực hiện xin chân thành cảm ơn!

TP. Hồ Chí Minh, tháng 7 năm 2020
Sinh viên đại diện
(Ký và ghi họ tên)

…………………….

iv


MỤC LỤC
NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP......................................................................................... i
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ....................................................... ii
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ......................................................... iii
LỜI CẢM ƠN .......................................................................................................................... iv
DANH MỤC BẢNG ................................................................................................................. x
DANH MỤC HÌNH ẢNH ...................................................................................................... xii
CHƯƠNG 1: TỔNG QUAN .................................................................................................... 1

1.

Giới thiệu đề tài .................................................................................................... 1

2.

Lý do chọn đề tài .................................................................................................. 1

3.

Mục đích của đề tài ............................................................................................... 1

4.

Phạm vi nghiên cứu .............................................................................................. 1

5.

Phương pháp nghiên cứu ...................................................................................... 2

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG ............................................................................. 3

2.1 Khảo sát hiện trạng ............................................................................................ 3
2.1.1 Ứng dụng English Pop Quiz ............................................................................ 3
2.1.2 Ứng dụng Quizlet ............................................................................................ 4
2.1.3 Ứng dụng Takoboto: Japanese Dictionary ...................................................... 5
2.1.4 Kết luận từ khảo sát ......................................................................................... 6
CHƯƠNG 3: CƠ SỞ LÝ THUYẾT ........................................................................................ 7

3.1 React Native .......................................................................................................... 7
3.1.1 React Native là gì?........................................................................................... 7
3.1.2 Ứng dụng Hybrid ............................................................................................. 8
3.1.3 Ứng dụng Native ............................................................................................. 9
3.1.4 Tính năng của React Native .......................................................................... 11
3.1.5 Kiến trúc của React Native ............................................................................ 13
v

3.1.6 Threading Model của React Native ............................................................... 14
3.1.7 Chế độ Development của React Native ......................................................... 15
3.2 NodeJS ................................................................................................................. 16
3.2.1 Giới thiệu NodeJS ......................................................................................... 16
3.2.2 Nguồn gốc NodeJS ........................................................................................ 16
3.2.3 Các khái niệm cơ bản của NodeJs ................................................................. 16
3.3 MongoDB ............................................................................................................ 20
3.3.1 Giới thiệu NoSQL ......................................................................................... 20
3.3.2 MongoDB là gì? ........................................................................................... 21
3.3.3 Các tính năng của Mongodb .......................................................................... 22
3.3.4 Ưu và nhược điểm của Mongodb .................................................................. 23
3.4 Docker ................................................................................................................. 24
3.4.1 Vì sao nên sử dụng: ....................................................................................... 24
3.4.2 Quá trình hình thành: ..................................................................................... 25
3.4.3 Container là gì?.............................................................................................. 27
3.3.4 Các câu lệnh trong Docker? [3] ..................................................................... 29
3.5 Redis .................................................................................................................... 30
3.5.1 Redis là gì? .................................................................................................... 30
3.5.2 Các ứng dụng của Redis ................................................................................ 30
3.5.3 Các kiểu dữ liệu trong Redis ......................................................................... 31
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG .................................................. 35

4.1 Mơ hình hố yêu cầu .......................................................................................... 35
4.2 Thiết kế dữ liệu ................................................................................................... 36
4.2.1 Lược đồ cơ sở dữ liệu .................................................................................... 36
4.2.2 Mô tả các bảng dữ liệu .................................................................................. 36

vi

4.2.3 Các ràng buộc dữ liệu .................................................................................... 37
4.2.4 Luồng xử lý của ứng dụng ............................................................................. 37
Use case 1 – Register .......................................................................................... 41
Use case 2 – Login .............................................................................................. 42
Use case 3 – Logout ............................................................................................ 42
Use case 4 – Join room ....................................................................................... 43
Use case 5 – Learn by quiz ................................................................................. 43
Use case 6 – Add course ..................................................................................... 44
Use case 7 – Remove course............................................................................... 45
Use case 8 – Update course ................................................................................ 45
Use case 9 – View course ................................................................................... 46
Use case 10 - Flashcards ..................................................................................... 46
Use case 11 – Learn vocabulary ......................................................................... 47
Use case 12: Topic .............................................................................................. 47
Use case 13: View detail ..................................................................................... 48
Use case 14: Learn topic ..................................................................................... 48
Use case 15: View video ..................................................................................... 49
Use case 16: View news ..................................................................................... 49
Use case 17: View information ........................................................................... 50
Use case 18: Update avatar ................................................................................. 50
Use case 19: Update username ........................................................................... 51
4.3 Thiết kế giao diện ............................................................................................... 52
vii


4.3.1 Màn hình chính (chưa đăng nhập) ............................................................. 52
4.3.2 Màn hình đăng kí ....................................................................................... 53
4.3.3 Màn hình đăng nhập .................................................................................. 54

4.3.4 Màn hình chính (đã đăng nhập) ................................................................. 55
4.3.5 Giao diện bảng ký tự (alphabet) ................................................................ 57
4.3.6 Giao diện học phần video .......................................................................... 58
4.3.7 Giao diện xem tin tức................................................................................. 59
4.3.8 Giao diện hồ sơ (profile) người dùng ........................................................ 60
4.3.9 Giao diện chơi game với người dùng khác (chọn chủ đề) ......................... 61
4.3.10 Giao diện các học phần mà người dùng đã tạo ........................................ 62
4.3.11 Giao diện chi tiết học phần đã chọn ......................................................... 63
4.3.12 Giao diện học (học phần đã chọn) ........................................................... 64
4.3.13 Giao diện danh sách chủ đề (học từ vừng theo chủ đề) ........................... 65
4.3.14 Giao diện chi tiết danh sách từ vựng của chủ đề được chọn ................... 66
4.3.15 Giao diện học từ vựng theo chủ đề bằng cách chơi game ....................... 67
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ ............................................................................. 68

5.1 Cài đặt ................................................................................................................. 68
5.1.1 Expo (React Native) ...................................................................................... 68
5.1.2 Docker ........................................................................................................... 70
5.2 Kiểm thử ............................................................................................................. 73
CHƯƠNG 6: KẾT LUẬN ...................................................................................................... 75

6.1 Kết quả đạt được ................................................................................................ 75

viii


6.2 Ưu điểm và nhược điểm của ứng dụng: ........................................................... 75
6.2.1 Ưu điểm: ........................................................................................................ 75
6.2.2 Nhược điểm ................................................................................................... 75
6.3 Đề xuất hướng phát triển: ................................................................................. 76
TÀI LIỆU THAM KHẢO ...................................................................................................... 77

ix


DANH MỤC BẢNG
Bảng 1: Danh sách các yêu cầu phần mềm .................................................................... 39
Bảng 2: Use case 1 - Register ........................................................................................ 41
Bảng 3: Use case 2 - Login ............................................................................................ 42
Bảng 4: Use case 3 - Logout .......................................................................................... 42
Bảng 5: Use case 4 - Join room ..................................................................................... 43
Bảng 6: Use case 5 - Learn Topic, Vocabulary ............................................................. 43
Bảng 7: Use case 6 - Add Course .................................................................................. 44
Bảng 8: Use case 7 - Remove course ............................................................................. 45
Bảng 9: Use case 8 - Update Course.............................................................................. 45
Bảng 10: Use case 9 - View Course .............................................................................. 46
Bảng 11: Use case 10 - Flashcards ................................................................................ 46
Bảng 12: Use case 11 - Learn vocabulary ..................................................................... 47
Bảng 13: Use case 13 - View detail ............................................................................... 48
Bảng 14: Use case 14 - Learn topic ............................................................................... 48
Bảng 15: Use case 15 - View video ............................................................................... 49
Bảng 16: Use case 16 - View news................................................................................ 49
Bảng 17: Use case 17 - View information ..................................................................... 50
Bảng 18: Use case 18 - Update Avatar .......................................................................... 50
Bảng 19: Use case 19 - Update username...................................................................... 51
Bảng 20: Các thuộc tính của màn hình đăng nhập ........................................................ 52
Bảng 21: Các thuộc tính đăng ký ................................................................................... 53
Bảng 22: Các thuộc tính đăng nhập ............................................................................... 54
Bảng 23: Các thuộc tính của trang chủ (đã đăng nhập) ................................................. 56
Bảng 24: Giao diện bảng ký tự (alphabet) ..................................................................... 57
Bảng 25: Các thuộc tính bảng ký tự............................................................................... 57

Bảng 26: Các thuộc tính học phần video ....................................................................... 58
x


Bảng 27: Các thuộc tính xem tin tức ............................................................................. 59
Bảng 28: Các thuộc tính phần hồ sơ người dùng ........................................................... 60
Bảng 29: Thuộc tính phần giao diện chọn chủ đề.......................................................... 61
Bảng 30: Các thuộc tính phần danh sách học phần đã được tạo .................................... 62
Bảng 31: Các thuộc tính của giao diện học (học phần được chọn) ............................... 64
Bảng 32: Các thuộc tính của giao diện từ vựng theo chủ đề ......................................... 66
Bảng 33: Các thuộc tính của giao diện học từ vựng theo chủ đề................................... 67

xi


DANH MỤC HÌNH ẢNH
Hình 1: Giao diện ứng dụng Takoboto ............................................................................ 5
Hình 2: Phân biệt ứng dụng native và hybrid [1]............................................................. 7
Hình 3: Hybrid và Native................................................................................................. 8
Hình 4: Android, IOS và Window Phone ...................................................................... 10
Hình 5: Menu develop của ứng dụng React Native ....................................................... 12
Hình 6: React Native Bridge .......................................................................................... 14
Hình 7: Ví dụ mẫu về Asynchoronous........................................................................... 17
Hình 8: Ví dụ mẫu về callback ...................................................................................... 18
Hình 9: Một đoạn code về callback hell ........................................................................ 18
Hình 10: Promise ........................................................................................................... 19
Hình 11: Single Promise ................................................................................................ 19
Hình 12: Multiple Promise ............................................................................................ 19
Hình 13: Async/await .................................................................................................... 20
Hình 14: Một đoạn code về query trong MongoDB ...................................................... 21

Hình 15: Tổng quan máy chủ vật lý [5] ......................................................................... 25
Hình 16: Sơ đồ cấu trúc Docker [5] ............................................................................... 26
Hình 17: Tổng quan cấu trúc redis [4] ........................................................................... 30
Hình 18: Biểu đồ tổng quát ............................................................................................ 35
Hình 19: Lược đồ CSDL của ứng dụng ......................................................................... 36
Hình 20: Đăng Nhập ...................................................................................................... 37
Hình 21: Học từ vựng .................................................................................................... 38
Hình 22: Lược đồ use case của ứng dụng ...................................................................... 40
Hình 23: Use case add course ........................................................................................ 44
Hình 24: Use case 12 – Topic ........................................................................................ 47
Hình 25: Màn hình chính (chưa đăng nhập) .................................................................. 52
Hình 26: Màn hình đăng kí ............................................................................................ 53
xii


Hình 27: Màn hình đăng nhập ....................................................................................... 54
Hình 28: Màn hình chính (đã đăng nhập) ...................................................................... 55
Hình 29: Học phần video ............................................................................................... 58
Hình 30: Giao diện xem tin tức...................................................................................... 59
Hình 31: Giao diện hồ sơ người dùng ............................................................................ 60
Hình 32: Chọn chủ đề .................................................................................................... 61
Hình 33: Giao diện học phần được tạo .......................................................................... 62
Hình 34: Chi tiết học phần đã chọn ............................................................................... 63
Hình 35: Các thuộc tính của phần giao diện học phần được chọn................................. 63
Hình 36: Học về học phần đã tạo ................................................................................... 64
Hình 37: Giao diện học từ vựng theo chủ đề ................................................................. 65
Hình 38: Các thuộc tính của giao diện chọn học từ vựng theo chủ đề .......................... 65
Hình 39: Danh sách từ vựng của chủ đề đã được chọn ................................................. 66
Hình 40: Học từ vựng theo chủ đề ................................................................................. 67

xiii


CHƯƠNG 1: TỔNG QUAN
1. Giới thiệu đề tài
Đề tài xây dựng ứng dụng học tiếng Nhật trên nền tảng IOS, được sử dụng các công
nghệ mới nhất và được ưa thích nhất hiện nay là MERN stack, ứng dụng được thiết kế phù
hợp với tất cả màn hình trên di động, giao diện thân thiện, dễ sử dụng, performance tốt, đề
tài được xây dựng hướng tới cho người học có thể vừa học vừa chơi, tạo động lức để học,
với các chủ đề , video, từ vựng đa dạng, chơi game tạo nên mơi trường giải trí trong học tập.

2. Lý do chọn đề tài
Với niềm đam mê đất nước xứ mặt trời mọc và ham muốn chinh phục ngôn ngữ
Nhật Bản, qua thời gian tìm hiểu các ứng dụng học tiếng Nhật, nhóm thực hiện nhận
thấy các ứng dụng cịn q nhiều thiếu sót, các tính năng chưa ổn định và số lượng
từ vựng, hội thoại cịn q ít, nên nhóm thực hiện đã quyết định làm app học tiếng
Nhật với mong muốn để cải thiện những thiếu sót của các ứng dụng khác, đồng thời
phát triển cho ứng dụng được nhiều người biết đến.

3. Mục đích của đề tài
Xây dựng ứng dụng học tiếng Nhật với mong muốn giúp cho người dùng có thể
học ngơn ngữ tiếng Nhật hiệu quả, một ứng dụng có thể vừa học vừa chơi, học theo
flashcards, học theo từng lộ trình, với bộ chủ đề đa dạng, ngồi ra người dùng có thể
tự note các tự vựng muốn học với tính năng tạo khố học và từ vựng của chính mình,
ngồi ra nhóm thực hiện muốn xây dựng một cộng đồng cùng nhau học tiếng Nhật
vói tính năng chat cùng, đăng tin để chia sẻ kinh nghiệm học tập, với các tính năng
vừa chơi vừa giải trí theo dạng quiz, có thể chơi với nhau tại cùng thời điểm đó.

4. Phạm vi nghiên cứu
Khảo sát các ứng dụng học tiếng Nhật trên google play (android) và app store

(ios) tập trung chủ yếu vào các ứng dụng liên quan đến học ngôn ngữ.

1


5. Phương pháp nghiên cứu
+ Sử dụng và phân tích ưu và nhược điểm của các ứng dụng.
+ Tìm ra các tính năng thiếu sót từ đó áp dụng để xây dựng ứng dụng.

2


CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG
2.1 Khảo sát hiện trạng
2.1.1 Ứng dụng English Pop Quiz

Ưu điểm:
+ Các chủ đề và từ vựng đa dạng, mỗi chủ đề ứng với level khác nhau, học theo
dạng quiz vừa học vừa chơi, giải trí phù hợp với mọi lứa tuổi.
+ Khơng cần kết nối Internet để chơi.
Nhược điểm:
+ Chủ đề ít chỉ có 12 chủ đề, ít tính năng, chỉ có tính năng chơi game quiz để
học, màu hơi khó nhìn.
+ Quảng cáo nhiều, kết thúc một lượt chơi, tải quảng cáo 15s để có thể chơi tiếp

3


2.1.2 Ứng dụng Quizlet

Ưu điểm:
+ Học với flashcards.
+ Tự viết từ vựng mình muốn nhớ để học.
+ Có thể học nhiều ngơn ngữ khác nhau.

Nhược điểm:
+ Khơng có lộ trình học cụ thể.
+ Các tính năng nâng cao khơng được sử dụng free, phải nâng cấp quizlet-plus.

4


2.1.3 Ứng dụng Takoboto: Japanese Dictionary

Hình 1: Giao diện ứng dụng Takoboto
Ưu điểm:
+ Nhiều từ vựng
+ Đầy đủ chữ kanji, hiragana, katakana
+ Translate là tiếng anh nên không phù hợp với người không biết tiếng Anh
+ Tra cứu rất tiện
Nhược điểm:
+ Giao diện xấu, khó sử dụng
+ Khơng có phát âm
5


2.1.4 Kết luận từ khảo sát
Những điểm cần tiếp thu của ứng dụng:
• Giao diện đơn giản dễ thao tác
• Game đơn giản, dễ hiểu và sử dụng

Những hạn chế cần tránh:
• Quảng cáo nhiều
•

Chưa có lộ trình cụ thể

6


CHƯƠNG 3: CƠ SỞ LÝ THUYẾT
3.1 React Native
3.1.1 React Native là gì?
React Native là một framework xây dựng ứng dụng di động Native sử dụng ngôn ngữ
Javascript do Facebook phát hành. Sử dụng React Native để xây dựng ứng dụng iOS và
Android chỉ cần 1 ngôn ngữ javascript duy nhất. Để hiểu rõ về React Native là gì, chúng
ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid.
Trang chủ của React Native: />
Hình 2: Phân biệt ứng dụng native và hybrid [1]

7


3.1.2 Ứng dụng Hybrid
Hybrid mobile apps giống bất kỳ những app khác trên điện thoại di động. Chúng có
thể cài đặt được trên điện thoại của bạn. Bạn có thể tìm chúng trên các chợ ứng dụng. Với
chúng, bạn có thể chơi game, kết nối bạn bè qua các mạng xã hội, chụp ảnh, theo dõi sức
khoẻ, và nhiều hơn nữa.
Giống như những trang web khác trên internet, hybrid mobile apps cũng được xây
dựng bằng sự kết hợp của các công nghệ web như HTML, CSS và Javascript. Chỉ khác
là các ứng dụng hybrid mobile được lưu trữ bên trong một ứng dụng native sử dụng

WebView. (Bạn có thể tưởng tượng rằng một WebView như là một cửa sổ trình duyệt
được cấu hình chạy fullscreen bên trong một ứng dụng) Chính nhờ điều này, nên chúng
có thể truy cập được vào các chức năng dựa trên phần cứng của điện thoại như là cảm
biến gia tốc, camera, contacts, và nhiều hơn nữa. Đây là những khả năng thường bị hạn
chế khi truy cập trên các trình duyệt di động. Hơn nữa, những ứng dụng hybrid mobile
có thể cịn bao gồm các thành phần Native UI trong những trường hợp cần thiết.

Hình 3: Hybrid và Native
.
8


• Ưu điểm của Hybrid app:
o Viết một lần chạy mọi nơi, tiết kiệm được rất nhiều chi phí.
o Native app làm được những gì thì Hybird app cũng làm được.
o Không cần biết Java hay Objective-C để tạo ra các ứng dụng mobile.
o Ứng dụng Hybrid có thể đưa lên các chợ ứng dụng App Store và Play Store
như Native app.
• Tuy nhiên, Hybrid app cũng có một số nhược điểm:
o Ứng dụng có thể chậm và giật hơn Native app.
o Gặp vấn đề với giao diện trên nhiều thiết bị.
o Một số task vụ khi làm sẽ khó hơn native app, đặc biệt là những task phải
can thiệp tới phần cứng
3.1.3 Ứng dụng Native
Là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp.
Ví dụ với iOS là Objective-C, Swift và Android là Java, Window phone là C++ hoặc C#.
Các ứng dụng viết bằng ngôn ngữ này được biên dịch ra ngơn ngữ máy trên điện thoại
và có tồn bộ tính năng mà hệ điều hành đó cung cấp. Do là ngôn ngữ trực tiếp cũng như
không phải thông qua ứng dụng nào khác nên tốc độ là nhanh nhất.
Tốc độ ở đây bao gồm tốc độ hiển thị (độ mượt), và tốc độ xử lý. Nếu để ý kỹ bạn

sẽ thấy các thao tác của ứng dụng native như chuyển trang, điều hướng, cuộn trang đều
rất mượt. Với việc hơn hẳn về tốc độ xử lý, nên ứng dụng hybrid khó có thể làm được
ứng dụng nặng đồ hoạ như game, mặc dù vẫn có thể làm được nhưng khơng mượt mà
nên hầu như hiếm ai dùng hybrid cho lập trình game cho điện thoại di động (ngoại trừ
một số game đơn giản như xếp hình, giải câu đố, 2048…)

9


Hình 4: Android, IOS và Window Phone
• Ưu điểm của Native app:
o Về tính năng: Ứng dụng Native App có khả năng truy cập các phần cứng
như: GPS, Camera, thiết bị thu âm… Đồng thời, nó cũng có quyền truy
cập đến quyền Local như: tạo, ghi, sao chép, đọc tập tin, thực hiện cuộc
gọi, nhắn tin….
o Về tính năng native app có khả năng truy cập các phần cứng (như camera,
GPS, thiết bị thu âm… ) và có thể truy cập đến các quyền local như : sao
chép, tạo, ghi, đọc tập tin (trên bộ nhớ của mobile), các thông tin danh bạ,
thông tin cá nhân, thực hiện cuộc gọi, nhắn tin… Nói cách khác, native
app có thể khai thác được sức mạnh phần cứng nhiều nhất của nền tảng.
Trong khi Mobile Web app thì khơng thể (có trường hợp có thể đọc file,
như upload).
o Ở chế độ offline: Native app có lợi thế so với mobile web app (ln phải
chạy online). Ở offline-mode, native app sẽ dùng những dữ liệu đã cache
trước đó ở lần cuối cùng mà người dùng truy cập online.
10


• Nhược điểm của Native app:
o Không thể cross platform: một native app chỉ có thể chạy trên một hệ điều

hành nhất định.
o Mất nhiều thời gian khi bảo trì hoặc nâng cấp vì phải sửa chữa từng hệ
điều hành.
o Tính đa dạng phiên bản của hệ điều hành làm cản trở việc phổ dụng các
native app. Các thiết bị chạy phiên bản hệ điều hành cũ hơn sẽ không cài
đặt được.
3.1.4 Tính năng của React Native
React Native là framework giúp lập trình viên viết ứng dụng Native chỉ bằng
Javascript, React Native phủ nhận định nghĩa về ứng dụng native ở trên.
Ứng dụng RN truy cập trực tiếp đến toàn bộ APIs của ngôn ngữ Native. Như vậy
một ứng dụng được xây dựng bằng react native cho hiệu năng và cảm nhận tương tự như
một ứng dụng native.
Đầu tiên, có thể dễ dàng giả định rằng React Native sẽ biên dịch ngôn ngữ JS code
trực tiếp sang ngôn ngữ native tương ứng. Nhưng điều này thật sự khó khăn vì Objective
C hay Java đều là những ngôn ngữ khá chặt chẽ. Thay vì thế, RN hoạt động một cách
thơng minh hơn. Về bản chất RN được xem như là một tập hợp các thành phần React
(React components), mỗi component thế hiện tương ứng với view hay component nào
đó của native.
React Native giúp cho lập trình viên web có thể viết ứng dụng native để khắc phục
các điểm yếu của ứng dụng web và hybrid. Chỉ với một lập trình viên thành thạo
javascript, bạn có thể chiến đấu trên mọi mặt trận web, desktop, server và bây giờ là
mobile. Điều này khơng những có lợi cho lập trình viên web mà nó giúp cho các doanh
nghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn.
Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload
tương tự tính năng Hot Replacement Module trong Webpack. Tính năng Live Reload

11


khác tính năng Reload, trong khi Live Reload chỉ tải lại chức năng/tập tin nào thay đổi,

thì Reload sẽ tải lại toàn bộ mã nguồn. Ngoài ra, bạn cũng dễ dàng debug javascript trong
Chrome và Safari. Đối với những lỗi thuộc Native thì phải cần đến XCode cho iOS hoặc
Android Studio cho Android.

Hình 5: Menu develop của ứng dụng React Native

12


3.1.5 Kiến trúc của React Native
Cả IOS và Android có một cấu trúc tương tự nhau với những điểm khác biệt nhỏ.
Nếu chúng ta nhìn vào tổng thể thì platform này bao gồm 3 phần:
1. Native code/Module: Phần lớn native code với iOS thì được viết bằng
Objective-C hoặc Swift, trong khi với Android thì đó là Java. Nhưng khi viết
app bằng RN thì chúng ta rất ít khi phải viết native code cho từng platform.
2. Máy ảo Javascript: Máy ảo JS để chạy code Javascript của chúng ta. Với
máy ảo và thiết bị IOS/Android RN sử dụng JavascriptCore, một open
source engine Javascript xây dựng cho WebKit. Đối với iOS, RN sử dụng
Javascript Core cung cấp bởi nền tảng iOS. Nó được ra mắt lần đầu tiên
trong iOS 7 cùng với OS X Mavericks.
Đối với Android, RN đóng gói JavascriptCore vào cùng với ứng dụng. Điều này sẽ
làm tăng kích thước của app. Do đó app Hello World của RN sẽ có size khoảng 3-4 MB
cho Android.
Đối với debugging mode trong Chrome, Javascript code chạy ln trong Chrome
thay vì JavascriptCore trong thiết bị, và giao tiếp với native code thông qua WebSocket.
Tại đây, nó dùng engine V8, cho phép chúng ta truy cập đến rất nhiều thông tin bên trong
debugging tool của Chrome như network request, log,...
3. React Native Bridge: React Native Bridge là một cầu nối C++/Java có
nhiệm vụ xử lý giao tiếp giữa thread native và Javascript. Một giao thức tuỳ
chỉnh được sử dụng để truyền tin nhắn.

13


Hình 6: React Native Bridge
Trong phần lớn trường hợp thì lập trình viên sẽ chỉ cần viết tồn bộ app RN bằng
Javascript. Để chạy trên từng platform thì chúng ta sẽ sử dụng command cho platform
tương ứng thông qua CLI. Tại thời điểm đó, RN CLI sẽ tạo ra một trình đóng gói có
nhiệm vụ đóng gói code JS lại thành một file main.bundle.js. Trình đóng gói này có thể
được xem là tương tự như Webpack. Giờ thì mỗi khi một app RN được khởi chạy, mục
đầu tiên được load sẽ là entry point của native. Code JS này chứa tồn bộ logic của ứng
dụng. Thread native có thể gửi thông báo thông qua RN Bridge để khởi chạy ứng dụng
JS. Tại đây, thread Javascript sẽ bắt đầu phát ra các chỉ dẫn cho thread native thông qua
RN Bridge. Chỉ dẫn này bao gồm việc view nào cần phải được load, thơng tin nào cần
phải được lấy từ phần cứng,...
Ví dụ, nếu thread JS muốn một view và một text được khởi tạo, nó sẽ gộp các yêu
cầu thành một tin nhắn và gửi nó đến thread native để render. Thread native sẽ xử lý các
request này và gửi lại kết quả cho thread JS để chắc chắn rằng các tính tốn đã được xử
lý thành cơng.
3.1.6 Threading Model của React Native
Khi một ứng dụng RN được khởi chạy, nó tạo ra những hàng chờ sau:
Main thread (Native Queue) - Đây là main thread được tạo ra ngay khi ứng dụng
được khởi chạy. Nó tiến hành load ứng dụng và chạy thread JS để thi hành code
Javascript. Thread native cũng có nhiệm vụ lắng nghe các UI event như 'press', 'touch',...

14