Công nghệ phát triển ứng dụng di động react native và ứng dụng thí nghiệm cho phần mềm hỗ trợ học tiếng anh

vi DANH MỤC CÁC THUẬT NGỮ, KÝ HIỆU, CỤM TỪ VIẾT TẮT của React Native cho hệ điều hành iOS DOM Document Object Model Mô hình các đối tượng trong tài liệu HTML Framework Framework Nền tả

BỘ GIÁO DỤC VÀ ĐÀO TẠO VIỆN ĐẠI HỌC MỞ HÀ NỘI

LUẬN VĂN THẠC SỸ

CÔNG NGHỆ PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG REACT NATIVE VÀ ỨNG DỤNG THÍ NGHIỆM CHO

i

LỜI CAM ĐOAN

Tôi xin cam đoan toàn bộ nội dung đƣợc trình bày trong bản luận văn này là kết quả tìm hiểu và nghiên cứu của riêng tôi, chƣa đƣợc sử dụng để bảo vệ một học

vị nào

Tôi xin cam đoan rằng, mọi sự giúp đỡ trong việc thực hiện luận văn này đã đƣợc cảm ơn và các thông tin trích dẫn trong luận văn đều đã đƣợc ghi rõ nguồn gốc

Hà Nội, ngày 12 tháng 11 năm 2017

Học viên

Phạm Thị Hà Hạnh

ii

LỜI CẢM ƠN

Trong quá trình thực hiện luận văn, tôi đã nhận được sự hướng dẫn, giúp đỡ động viên của nhiều cá nhân và tập thẻ Tôi xin được bày tỏ sự cảm ơn sâu sắc nhất tới tất cả các cá nhân tập thẻ đã tạo điều kiện giúp đỡ tôi trong học tập và nghiên cứu

Tôi xin trân trọng cảm ơn Ban giám hiệu nhà trường, khoa Đào tạo Sau đại học và các thầy giáo, cô giáo Viện Đại học Mở Hà Nội, đặc biệt là TS Dương Thăng Long đã nhiệt tình hướng dẫn chỉ bảo tôi trong quá trình nghiên cứu và thực hiện đề tài của mình

Tôi xin cảm ơn sự động viên, giúp đỡ của bạn bè và gia đình đã giúp đỡ tôi thực hiện đề tài này

Tôi xin chân thành cảm ơn mọi sự giúp đỡ quý báu đó!

Hà Nội, ngày 12 tháng 11 năm 2017

Học viên

Phạm Thị Hà Hạnh

iii

MỤC LỤC

LỜI CAM ĐOAN i

LỜI CẢM ƠN ii

MỤC LỤC iii

DANH MỤC CÁC THUẬT NGỮ, KÝ HIỆU, CỤM TỪ VIẾT TẮT vi

DANH MỤC CÁC BẢNG BIỂU, HÌNH VẼ vii

MỞ ĐẦU 1

CHƯƠNG 1.TỔNG QUAN VỀ DI ĐỘNG VÀ LẬP TRÌNH DI ĐỘNG 4

1.1.Giới thiệu về điện thoại thông minh 4

1.2.Kiến trúc của các nền tảng hệ điều hành 5

1.2.1 Hệ điều hành Android 5

1.2.2 Hệ điều hành iOS 10

1.2.3 Các hệ điều hành khác 15

1.3.Các phương pháp lập trình ứng dụng 15

1.3.1 Phương pháp lập trình ứng dụng Native 15

1.3.2 Phương pháp lập trình ứng dụng lai 16

1.3.3 Phương pháp lập trình ứng dụng đa nền tảng 17

1.4.Kết luận chương 18

CHƯƠNG 2.LẬP TRÌNH ỨNG DỤNG DI ĐỘNG VỚI REACT NATIVE 19

2.1.Tổng quan về React Native 19

2.1.1.Giới thiệu React Native 19

2.1.2.Lịch sử phát triển 20

2.1.3.Ý tưởng hình thành của React Native 21

2.2.React Native và các công nghệ liên quan 23

2.2.1 Ngôn ngữ lập trình Javascript 23

2.2.2 Javascript VM (V8 engine) 24

2.2.3 ReactJS 26

iv

2.2.4 JSX 27

2.2.5 Node.js và NPM 28

2.3.Kiến trúc React Native 28

2.3.1 Kiến trúc ứng dụng React Native 28

2.3.2 Cách thức hoạt động của React Native 31

2.3.3 Luồng hoạt động và hiệu năng 37

2.4.Thành phần và các khái niệm cơ bản 38

2.4.1 React Native Component 38

2.4.2 Props và state của Component 39

2.4.3 Vòng đời của React Native Component 42

2.4.4 Định dạng và bố cục 44

2.4.5 Làm việc với mạng 47

2.4.6 Xử lý chạm 48

2.5.Các thành phần và giao diện 48

2.5.1 Các thành phần được hỗ trợ bởi React Native 49

2.5.2 Các giao diện được hỗ trợ từ React Native 49

2.6.Kết luận chương 50

2.6.1 Ưu điểm 50

2.6.2 Nhược điểm 52

CHƯƠNG 3.PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG HỖ TRỢ HỌC TIẾNG ANH DỰA TRÊN CÔNG NGHỆ REACT NATIVE 53

3.1.Phương pháp triển khai 53

3.1.1 Lựa chọn nội dung và phạm vi phát triển ứng dụng 53

3.1.2 Mục tiêu phát triển 53

3.2.Xác định và phân tích chức năng 54

3.3.Phân tích hệ thống 55

3.4.Hình ảnh ứng dụng khi chạy thực tế 63

3.5.Kết luận chương 67

v

KẾT LUẬN 68DANH MỤC TÀI LIỆU THAM KHẢO 70PHỤ LỤC 72

vi

DANH MỤC CÁC THUẬT NGỮ, KÝ HIỆU, CỤM TỪ VIẾT TẮT

của React Native

cho hệ điều hành iOS

DOM Document Object Model Mô hình các đối tượng trong tài liệu

HTML

Framework Framework Nền tảng lập trình và thực thi ứng

dụng

Native app Native application Ứng dụng viết bằng ngôn ngữ gốc

phát hành kèm theo hệ điều hành

Dùng để mô tả công việc vẽ một giao diện người dùng lên màn hình hiển thị của thiết bị di động

RN React Native Tên một nền tảng hỗ trợ lập trình

ứng dụng di động SDK Software Development Kit Bộ công cụ phát triển phần mềm

React Native

vii

DANH MỤC CÁC BẢNG BIỂU, HÌNH VẼ

Hình 1.1 Kiến trúc hệ điều hành Android 6

Hình 1.2 Kiến trúc hệ điều hành iOS 11

Hình 2.1 Các ứng dụng được viết bằng React Native 20

Hình 2.2 Cách thức hoạt động của DOM ảo 22

Hình 2.3 Cách thức hoạt động của React Native 22

Hình 2.4 Cách thức hoạt động của Javascript VM 25

Hình 2.5 Quá trình tạo lớp ẩn của Javascript VM 26

Hình 2.6 Kiến trúc ứng dụng React Native 29

Hình 2.7 Mỗi trường cầu nối giữa JavaScript VM và ngôn ngữ gốc 29

Hình 2.8 Quá trình thực thi mã nguồn React Native 30

Hình 2.9 Chi tiết quá trình hoạt động của mã nguồn RN thông qua cầu nối 31

Hình 2.10 Ví dụ ứng dụng “Hello world” bằng React Native 32

Hình 2.11 Quá trình biên dịch và tải mã nguồn Javascript 33

Hình 2.12 Quá trình thực thi ứng dụng React Native 34

Hình 2.13 Quá trình tương tác qua lại giữa JavaScript mà ngôn ngữ gốc 35

Hình 2.14 Quá trình thành phần giao diện gốc được tạo tương ứng với JavaScript 36 Hình 2.15 Quá trình xử lý tương tác người dùng 37

Hình 2.16 Quá trình giao diện thay đổi theo state 41

Hình 2.17 Vòng đời của một component trong React Native 42

Hình 2.18 Các bước thay đổi của component trong Reat Native 42

Hình 2.19 Định dạng giao diện trong React Native 45

Hình 2.20 Quá trình thay đổi kích thước của thành phần giao diện trong RN 45

Hình 2.21 Cách thức bố cục trong React Native 46

Hình 3.1 Biểu đồ User case tổng quát 56

Hình 3.2 Biểu đồ hoạt động đăng ký 57

viii

Hình 3.3 Biểu đồ hoạt động đăng nhập 57

Hình 3.4 Biểu đồ hoạt động xem video 58

Hình 3.5 Biểu đồ hoạt động đƣa vào danh sách yêu thích 59

Hình 3.6 Biểu đồ hoạt động phát âm câu 59

Hình 3.7 Biểu đồ hoạt động phát âm từ 60

Hình 3.8 Biểu đồ hoạt động tra từ 60

Hình 3.9 Biểu đồ trình tự đăng ký 61

Hình 3.10 Biểu đồ trình tự phát âm câu 61

Hình 3.11 Biểu đồ trình tự phát âm từ 62

Hình 3.12 Biểu đồ trình tự tra từ 62

Hình 3.13 Màn hình đăng nhập 63

Hình 3.14 Màn hình đăng ký 63

Hình 3.15 Màn hình danh sách nội dung bài học 64

Hình 3.16 Màn hình menu nội dung ƣa thích 64

Hình 3.18 Màn hình xem nội dung video của bài học 65

Hình 3.19 Tra từ điển khi xem chi tiết 66

Hình 3.20 Tra từ điển khi xem video 66

1

MỞ ĐẦU

Mạng viễn thông xuất hiện tại Việt Nam từ đầu những năm 1990 và theo thời gian số lượng các thuê bao cũng như các nhà cung cấp dịch vụ đi động tại Việt Nam ngày càng tăng Do nhu cầu trao đổi thông tin ngày càng tăng và nhu cầu sử dụng sản phẩm công nghệ cao nhiều tính năng, cấu hình cao, chất lượng tốt, kiểu dáng mẫu mà đẹp, phong phú nên nhà cung cấp phải luôn luôn cải thiện, nâng cao những sản phẩm của mình Do đó việc xây dựng các ứng dụng cho điện thoại di động đang

là một ngành công nghiệp mới đầy tiềm năng và hứa hẹn nhiều sự phát triển vượt bậc của ngành khoa học kĩ thuật

Trong những năm gần đây tại các triển lãm điện tử tiêu dùng CES, các thiết

bị thông minh như tivi thông minh, điện thoại thông minh, tủ lạnh thông minh liên tục được các hãng công nghệ lớn giới thiệu Các hãng công nghệ không chỉ tập trung vào các thiết bị độc lập nữa mà chuyển sang xu hướng kết nối các thiết bị thông minh với nhau thông qua Internet hay còn gọi là xu hướng kết nối vạn vật (Internet of Things - gọi tắt là IOT) Chúng có khả năng trao đổi và truyền tải thông tin, dữ liệu một cách hiệu quả, tiện lợi thông qua mạng Internet mà không cần sự tương tác trực tiếp giữa người với thiết bị hay giữa người với người Theo hãng Gartner thì trong năm 2016 có tới 6,4 triệu thiết bị có thể kết nối, tăng 30% so với năm 2015, đến năm 2017 được dự đoán là có tới 8.4 triệu thiết bị có thể kết nối, và đến năm 2020 dự đoán có thể có tới 21 triệu thiết bị có thể kết nối vào mạng Internet [12],[13] Do đó, IOT là xu hướng tất yếu và đăng được các doanh nghiệp trong lĩnh vực công nghệ quan tâm, đầu tư và nghiên cứu

Cùng với xu hướng IOT, điện thoại thông minh hay còn gọi là smartphone đang trở nên rất phổ biến ở thời điểm hiện tại, smartphone là một loại trong IoT nhưng nó có vai trò lớn trong tương tác, tính toán và xử lý trong một hệ tích hợp IoT Các hệ điều hành được sử dụng trên các thiết bị này cũng không ngừng phát triển và hoàn thiện Đã có rất nhiều hệ điều hành được nghiên cứu và phát triển như Android, iOS, WindowsPhone, Blackberry, Tizen Tuy nhiên theo hãng nghiên cứu thị trường Gartner cho biết, hệ điều hành di động Android của Google và iOS

2

của Apple đã chiếm đến 99,6% thị phần smartphone bán ra trong ba tháng cuối năm

2016 [13] Và sang đến năm 2017 chủ yếu chỉ còn lại cuộc đua giữa hai hệ điều hành Android và iOS Điều này đã khẳng định vị trí của Android và iOS trên thị trường

Ứng dụng cho điện thoại thông minh hiện nay rất đa dạng và phong phú trên các hệ điều hành di động cũng phát triển mạnh mẽ và đang thay đổi từng ngày Tuy nhiên, để phát triển và bảo trì một ứng dụng trên mỗi hệ điều hành các lập trình viên cần phải tìm hiểu cách thức hoạt động của hệ điều hành, công cụ phát triển được phát hành kèm theo hệ điều hành và các hệ sinh thái liên quan đến hệ điều hành đó Chẳng hạn, để phát triển ứng dụng cho Android lập trình viên sẽ phải tìm hiểu công

cụ phát triển cho Android, ngôn ngữ lập trình Java [7], để phát triển ứng dụng cho công cụ phát triển cho iOS, ngôn ngữ lập trình Object-C hoặc Swift [8], Để khắc phục hạn chế này một số các phương pháp phát triển ứng dụng đa nền tảng đã ra đời như:

+ Phương pháp hybrid sử dụng Html5 với một số công cụ như Ionic, PhoneGap, Appcelerator… Tuy nhiên phương pháp này gặp phải vấn đề hiệu năng kém đối với các ứng dụng lớn, yêu cầu xử lý phức tạp

+ Phương pháp phát triển ứng dụng đa nền tảng Xamarin, được phát hành bởi Microsoft Tuy nhiên với phương pháp này là lập trình viên không có toàn quyền điều khiển mã nguồn được cung cấp kèm theo hệ điều hành, cũng như phải mất phí sử dụng cho một số các công cụ nhất định

+ Phương pháp phát triển ứng dụng đa nền tảng React Native, được phát hành bởi Facebook Phương pháp này đang được các lập trình viên sử dụng khá nhiều và ngày càng tăng lên đặc biệt là các dự án khởi nghiệp, do công cụ phát triển này là mã nguồn mở, hiệu năng gần giống như ứng dụng viết bằng ngôn ngữ của hệ điều hành, thời gian phát triển nhanh cũng như khả năng linh hoạt trong việc sử dụng công cụ cũng như tương thích với mã nguồn viết bằng các công cụ, ngôn ngữ kèm theo hệ điều hành

3

Do vậy, luận văn sẽ nghiên cứu một công nghệ phát triển ứng dụng di động

đa nền tảng mới React native và ứng dụng công nghệ này phát triển ứng dụng hỗ trợ học Tiếng Anh Công nghệ này hứa hẹn sẽ mang lại một phương pháp phát triển ứng dụng đa nền tảng mới bằng một ngôn ngữ và công cụ phát triển duy nhất giúp làm giảm thời gian, chi phí phát triển và bảo trì

Ngoài phần mở đầu và kết luận, luận văn được chia làm 3 chương, nội dung

cụ thể của các chương như sau:

Chương I: Tổng quan về di động và lập trình di động

Chương II: Lập trình ứng dụng di động với React Native

Chương III: Phát triển ứng dụng di động hỗ trợ học Tiếng Anh dựa trên công nghệ React Native

Tuy đã rất cố gắng để hoàn thiện, tuy nhiên trong luận văn không thể tránh khỏi còn nhiều thiếu sót, em rất mong nhận được ý kiến đóng góp quý báu của thầy

cô và đồng nghiệp

4

CHƯƠNG 1 TỔNG QUAN VỀ DI ĐỘNG VÀ LẬP TRÌNH

DI ĐỘNG 1.1 Giới thiệu về điện thoại thông minh

Điện thoại di động ngày nay đang trở thành một vật dụng không thể thiếu trong cuộc sống hằng ngày Mục đích ban đầu của điện thoại di động là tạo sự thuận lợi trong liên lạc, xóa bỏ sự hạn chế về khoảng cách địa lý Tuy nhiên không chỉ dừng lại ở đó, điện thoại di động ngày nay đã phát triển mạnh mẽ về chức năng Không chỉ đơn thuần nghe, gọi hay nhắn tin SMS như lúc đầu, mà nó còn là phương tiện giải trí đa chức năng, là công cụ hỗ trợ cho nhu cầu công việc của con người

Khái niệm smartphone (điện thoại thông minh) đang ngày càng được nhiều người biết đến Điện thoại thông minh là khái niệm để chỉ loại điện thoại tích hợp một nền tảng hệ điều hành di động với nhiều tính năng hỗ trợ tiên tiến về điện toán

và kết nối dựa trên nền tảng cơ bản của điện thoại di động thông thường

Ban đầu điện thoại thông minh bao gồm các tính năng của điện thoại di động thông thường kết hợp với các thiết bị phổ biến khác như PDA, thiết bị điện tử cầm tay, máy ảnh kỹ thuật số, hệ thống định vị toàn cầu GPS Điện thoại thông minh ngày nay bao gồm tất cả chức năng của laptop như duyệt web, Wi-Fi, các ứng dụng của bên thứ 3 trên di động và các phụ kiện đi kèm cho máy

Những điện thoại thông minh phổ biến nhất hiện nay dựa trên nền tảng của

hệ điều hành Windows Phone của Microsoft, Android của Google và iOS của Apple Các ngành công nghiệp tin rằng điện thoại thông minh đa số có một màn hình độ phân giải cao hơn so với điện thoại truyền thống và điện thoại thông minh như một máy tính di động, vì nó có một hệ điều hành riêng biệt vì có thể hiển thị phù hợp các trang website bình thường và người dùng có thể thay đổi một giao diện

và sở hữu khả năng mở ứng dụng tiện hơn và dễ dàng cài đặt lẫn gõ bỏ ứng dụng; điện thoại thông minh có màn hình cảm ứng độ phân giải cao, và sẵn sàng để gọi bàn phím ảo và viết chữ tay Có thể tiến hành đa tác vụ thao tác, và có một đa phương tiện mạnh mẽ, Email, Internet và hoàn toàn có thể thay đổi các thiết bị

5

truyền thống nhƣ MP3 và PDA điện thoại thông minh có thể thay thế xử lý các vấn

đề máy tính văn phòng và các vấn đề khác, nó có thể giao tiếp với mạng duy trì một thời gian kết nối liền mạch với thời gian, đồng thời có thể vô hiệu hóa mạng bất cứ lúc nào, và đồng bộ hóa dữ liệu với máy tính, máy tính xách tay và các thiết bị khác

1.2 Kiến trúc của các nền tảng hệ điều hành

1.2.1 Hệ điều hành Android

1.2.1.1 Giới thiệu về hệ điều hành Android

Android là một hệ điều hành dựa trên nền tảng Linux đƣợc thiết kế dành cho các thiết bị di động có màn hình cảm ứng nhƣ điện thoại thông minh và máy tính bảng [7]

Ban đầu, Android đƣợc phát triển bởi Công ty Android, với sự hỗ trợ tài chính từ Google và sau này đƣợc chính Google mua lại vào năm 2005 và trở thành một hệ điều hành di động mã nguồn mở, miễn phí, mạnh mẽ và đƣợc ƣa chuộng cao trên thế giới

Năm 2008, hệ điều hành Android đã chính thức mở toàn bộ mã nguồn, điều

đó cho phép các hãng điện thoại có thể đem mã nguồn về tùy chỉnh, thiết kế lại sao cho phù hợp với mỗi mẫu mã điện thoại của họ và điều quan trọng nữa là hệ điều hành mở này hoàn toàn miễn phí, không phải trả tiền nên giúp họ tiết kiệm khá lớn chi phí phát triển hệ điều hành

Android có mã nguồn mở và Google phát hành mã nguồn theo Giấy phép Apache Chính mã nguồn mở cùng với một giấy phép không có nhiều ràng buộc đã cho phép các nhà phát triển thiết bị, mạng di động và các lập trình viên nhiệt huyết đƣợc điều chỉnh và phân phối Android một cách tự do Ngoài ra, Android còn có một cộng đồng lập trình viên đông đảo chuyên viết các ứng dụng để mở rộng chức năng của thiết bị, bằng một loại ngôn ngữ lập trình Java có sửa đổi Cửa hàng ứng dụng chính của Android, Google Play có hơn 82 triệu ứng dụng tải xuống trong năm 2016 và hơn 2,7 triệu ứng dụng đƣợc công khai trong năm 2017

6

Android liên tục phát triển, mỗi bản cập nhật từ Google là mỗi lần Android được tối ưu hóa để hoạt động tốt hơn, nhanh và ổn định hơn, hỗ trợ thêm công nghệ mới Hiện nay, phiên bản mới nhất của Android là 8.0 đang được các hãng điện thoại tích cực cập nhật [7]

1.2.1.2 Kiến trúc hệ điều hành android

Hệ điều hành Android có 4 tầng từ dưới lên trên là tầng hạt nhân Linux, tầng Libraries & Android runtime, tầng Application Framework và trên cùng là tầng Application [2, tr.12]

Hình 1.1 Kiến trúc hệ điều hành Android

7

 Tầng hạt nhân (Linux Kernel layer)

Hệ điều hành Android được phát triển dựa trên hạt nhân Linux Mọi hoạt động của điện thoại muốn thi hành thì đều được thực hiện ở lớp này bao gồm quản

lý bộ nhớ (memory management), giao tiếp với phần cứng (driver model), thực hiện bảo mật (security), quản lý tiến trình (process)

Tuy được phát triển dựa vào nhân Linux nhưng thực ra nhân Linux đã được nâng cấp và sửa đổi rất nhiều để phù hợp với tính chất của những thiết bị cầm tay như hạn chế về bộ vi xử lý, dung lượng bộ nhớ, kích thước màn hình, nhu cầu kết nối mạng không dây…

- Bluetooth Driver: Điều khiển thiết bị phát và thu sóng Bluetooth

- USB driver: Quản lý hoạt động của các cổng giao tiếp USB

- Keypad driver: Điều khiển bàn phím

- Wifi Driver: Chịu trách nhiệm về việc thu phát sóng wifi

- Audio Driver: điều khiển các bộ thu phát âm thanh, giải mã các tính hiệu dạng audio thành tín hiệu số và ngược lại

- Binder IPC Driver: Chịu trách nhiệm về việc kết nối và liên lạc với mạng

vô tuyến như CDMA, GSM, 3G, 4G, E để đảm bảo những chức năng truyền thông được thực hiện

- M-System Driver: Quản lý việc đọc ghi lên các thiết bị nhớ như thẻ

SD, flash

- Power Madagement: Giám sát việc tiêu thụ điện năng

 Tầng Application Framework

Tầng này xây dựng bộ công cụ - các phần tử ở mức cao để các lập trình viên

có thể nhanh chóng xây dựng ứng dụng Nó đƣợc viết bằng Java, có khả năng sử dụng chung để tiết kiệm tài nguyên Đây là một nền tảng mở, điều đó có 2 điều lợi:

- Với các hãng sản xuất điện thoại: Có thể tùy biến để phù hợp với cấu hình điện thoại mà họ sản xuất cũng nhƣ để có nhiều mẫu mã, style hợp thị hiếu

9

người dùng Vì thế nên tuy cùng chung nền tảng android mà điện thoại của Google

có thể khác hẳn với Motorola, HTC, T-Mobile, Samsung

- Với lập trình viên: Cho phép lập trình viên có thể sử dụng các API ở tầng trên mà không cần phải hiểu rõ cấu trúc bên dưới, tạo điều kiện cho lập trình viên tự

do sáng tạo bởi vì chỉ cần quan tâm đến nội dung mà ứng dụng họ làm việc Một tập hợp API rất hữu ích được xây dựng sẵn như hệ thống định vị, các dịch vụ chạy nền, liên lạc giữa các ứng dụng, các thành phần giao diện cấp cao

Giới thiệu một số thành phần của phần này:

- Activity Manager: Quản lý các chu kỳ sống của một ứng dụng cũng như cung cấp công cụ điều khiển các Activity

- Telephony Manager: Cung cấp công cụ để thực hiện việc liên lạc như gọi điện thoại

- XMPP Service: Cung cấp công cụ để liên lạc trong thời gian thực

- Location Manager: Cho phép xác định vị trí của điện thoại thoại dựa vào

hệ thống định vị toàn cầu GPS và Google Maps

- Window Manager: Quản lý việc xây dựng và hiển thị các giao diện người dùng cũng như tổ chức quản lý các giao diện giữa các ứng dụng

- Notication Manager: Quản lý việc hiển thị các thông báo (như báo có tin nhắn, có e-mail mới )

- Resource Manager: Quản lý tài nguyên tĩnh của các ứng dụng bao gồm các file hình ảnh, âm thanh, layout, string (Những thành phần không được viết bởi ngôn ngữ lập trình)

 Tầng Application:

Đây là lớp ứng dụng giao tiếp với người dùng, bao gồm các ứng dụng như:

- Các ứng dụng cơ bản, được cài đặt đi liền với hệ điều hành là gọi điện (phone), quản lý danh bạ (Contacts), duyệt web (Browser), nhắn tin

- Viết bằng Java, phần mở rộng là apk

- Khi mỗi ứng dụng được chạy, nó có một phiên bản Virtual Machine được dựng lên để phục vụ cho nó Nó có thể là một Active Program: Chương trình có giao diện với người sử dụng hoặc là một background: chương trình chạy nền hay là dịch vụ

1.2.2 Hệ điều hành iOS

1.2.2.1 Giới thiệu về hệ điều hành iOS

iOS (viết tắt của iPhone Operating System) là một hệ điều hành trên thiết bị

di động được xây dựng và phát triển bởi tập đoàn Apple Hệ điều hành này được sử dụng trên nhiều thiết bị di động, bao gồm iPhone, iPad và iPod Touch Đây là hệ điều hành trên thiết bị di động phổ biết thứ hai, sau hệ điều hành Android [1],[8]

Bắt đầu được phát triển từ năm 2007, sử dụng cho iPhone, iOS dần được mở rộng và hỗ trợ các thiết bị khác của Apple như iPod Touch (từ tháng 9 năm 2007)

và iPad (từ tháng 1 năm 2010) Đến tháng 1 năm 2017, cửa hàng ứng dụng của Apple đã có hơn 2.2 tỷ ứng dụng iOS, 1 triệu ứng dụng trong số đó chỉ dành riêng cho iPad Số lượng lượt tải xuống của những ứng dụng này đã lên đến hơn 130 tỷ lần

Giao diện người dùng của iOS dựa trên cơ sở thao tác bằng tay, sử dụng cảm ứng đa điểm Các thành phần điều khiển trên giao diện bao gồm thanh trượt, công tắc và các nút Người dùng tương tác với hệ điều hành thông qua các cử chỉ bao gồm vuốt, gõ, chụm, và lật ngược, tất cả đều được định nghĩa trong ngữ cảnh của hệ điều hành Máy đo gia tốc được sử dụng trong một số ứng dụng để nhận biết được các chuyển động rung, lắc của thiết bị, hoặc xoay thiết bị theo nhiều chiều Apple

11

được đánh giá cao trong việc kết hợp các chức năng truy cập trong suốt vào iOS, cho phép người dùng khiếm thị hoặc gặp khó khăn về thính giác vẫn có thể sử dụng được sản phẩm của mình

Hàng năm, Apple đều cho ra những phiên bản mới cập nhật của iOS Hai phiên bản mới nhất vừa được cập nhật là iOS 10.3.3, phát hành vào ngày 25/07/2017, sử dụng trên các phiên bản iPhone từ iPhone 5 trở đi, iPad Air, iPad Air 2, iPad Pro… Phiên bản iOS 11 vừa mới được ra mắt chính thức vào ngày 19/9/2017 vừa qua

1.2.2.2 Kiến trúc hệ điều hành iOS

Kiến trúc của iOS là một kiến trúc theo tầng Tầng cao nhất hoạt động như phần trung gian kết nối giữa phần cứng bên dưới với các thao tác thực hiện trên ứng

dụng Ứng dụng không giao tiếp trực tiếp với phần cứng [8]

Ứng dụng “nói chuyện” với phần cứng thông qua một bộ giao diện hệ thống

đã được định nghĩa Các giao tiếp này giúp đơn giản hóa việc xây dựng các ứng dụng hoạt động trên các thiết bị có phần cứng khác nhau

Hình 1.2 Kiến trúc hệ điều hành iOS

12

Tầng thấp hơn cung cấp những dịch vụ cơ bản phục vụ hoạt động của các ứng dụng Tầng cao hơn cung cấp các dịch vụ và giao diện về đồ họa máy tính

Apple cung cấp hầu hết các giao diện hệ thống dưới dạng gói gọi là

“Framework” Một “Framework” là một thư mục chưa các thư viện chia sẻ động gồm các tệp a, các tài nguyên liên quan như tệp tiêu đề, hình ảnh và các ứng dụng trợ giúp cần thiết để hỗ trợ thư viện Mỗi tầng đều có một bộ “Framework” để lập trình viên sử dụng và xây dựng ứng dụng [8]

● External Accessory Framework

● Security Services Famework

● Local Authentication Framework

64-Bit support của iOS7 hỗ trợ xây dựng các ứng dụng 64 bit và giúp ứng dụng chạy nhanh hơn

Tầng Core Services

Một số “Framework” quan trọng được lưu tại tầng Core services, bao gồm:

● Address book Framework – Sổ địa chỉ: Cung cấp quyền truy cập cơ sở dữ

liệu danh bạ của người dùng cho các ứng dụng khác

● Cloud Kit Framework – Cung cấp phương thức di chuyển dữ liệu giữa ứng

dụng và iCloud

● Core data Framework – Công nghệ cho phép quản lý mô hình dữ liệu của

ứng dụng Kiểm soát mô hình

● Core Foundation Framework – Giao diện cho phép quản lý dữ liệu cơ bản

và các tính năng dịch vụ cho ứng dụng trên iOS

● Core Location Framework – Cung cấp thông tin về vị trí và tiêu đề cho các

ứng dụng

13

● Core Motion Framework – Truy cập tất cả các dữ liệu về trạng thái có trên

thiết bị Sử dụng tính năng này, các thông tin của máy đo gia tốc có thể được truy cập

● Foundation Framework – Chưa nhiều tính năng phát triển trên nền tảng

hướng đối tượng C

● Healthkit Framework – Tính năng mới cung cấp các thông tin liên quan

đến sức khỏe cho người dùng

● Homekit Framework – Tính năng mới cho phép giao tiếp và điều khiển các

thiết bị trong nhà của người dùng

● Social Framework – Giao diện đơn giản cho phép truy cập các tài khoản

mạng xã hội của người dùng

● StoreKit Framework – Hỗ trợ mua các nội dụng và dịch vụ bên trong ứng

dụng iOS, hay còn được biết đến với tên gọi “In-App Purchase”

Tầng Media: Các tính năng đồ họa, âm thanh, phim ảnh hoạt động được dựa

trên tầng Media

Graphics Framework:

● UIKit Graphics – Mô tả hỗ trợ cấp cao, cho phép thiết kế hình ảnh, đồ họa,

tạo phim từ nội dung mà người sử dụng xem

● Core Graphics Framework – Là công cụ vẽ đầu tiên cho các ứng dụng

● OpenGl ES and GLKit – quản lý việc xây dựng hình ảnh 2D và 3D sử dụng

giao diện tăng tốc phần cứng

● Metal – Cho phép các tính năng đồ họa máy tính hoạt động với hiệu suất cực

cao

Audio Framework:

14

● Media Player Framework – Hỗ trợ người sử dụng truy cập thư viện iTunes

một cách dễ dàng

● AV Foundation – Giao diện giúp thu/ phát âm thanh hoặc đoạn phim

● OpenAL – Công nghệ tiêu chuẩn để phát âm thanh

Video Framework

● AV Kit – Hỗ trợ trình chiếu video một các đơn giản

● AV Foundation – Giao diện giúp thu/ phát âm thanh hoặc đoạn phim

● Core Media – Giao diện mô tả kiểu dữ liệu cho các đối tượng âm thanh,

hình ảnh, đoạn phim

Tầng Cocoa Touch

● EventKit Framework – Hỗ trợ hiển thị lịch và thông báo sự kiện trên lịch

● GameKit Framework – Hỗ trợ người dùng chia sẻ các thông tin về trò chơi

trên di động của họ lên mạng

● iAd Framework – Cho phép hiển thị quảng cáo dạng bảng thông báo

(banner)

● MapKit Framework – cung cấp tính năng cuộn bên trong ứng dụng

● PushKitFramework – Hỗ trợ đăng ký các ứng dụng VoIP

● Twitter Framework – Hỗ trợ giao diện người dùng để đăng bài trên Twitter

và hỗ trợ tạo URL để truy cập các dịch vụ của Twitter

● UIKit Framework – cung cấp cơ sở hạ tầng cơ bản để chạy ứng dụng đồ họ,

sự kiện Một số tính năng quan trọng trong UIKit Framework như

– Hỗ trợ đa nhiệm

– Quản lý ứng dụng cơ bản

– Quản lý giao diện người dùng

– Hỗ trợ nhận biết thao tác chạm và di chuyển thiết bị

– Hỗ trợ các thao tác cắt, sao chép, dán và nhiều thao tác khác

15

1.2.3 Các hệ điều hành khác

Ngoài hai hệ điều hanh di động phổ biết là Android và iOS còn một số hệ điều hành khác cũng đƣợc các hãng phát triển nhƣ: BlackBerry OS 10, Sailfish OS, Firefox OS, Ubuntu Touch, Tizen, Windows Phone Tuy nhiên hiện nay hầu hết các

hệ điều hành này đều đã bị khai tử do không đƣợc hỗ trợ từ đông đảo lập trình viên

và các nhà phát hành, ngoại trừ hệ điều hành Tizen đƣợc hãng Samsung hậu thuẫn

và đƣợc cài sẵn trên một số thiết bị của hãng

– Việc bảo trì hay nâng cấp sẽ làm mất nhiều thời gian Do phải sửa chữa từng ứng dụng trên từng HĐH, thủ tục đưa lên chợ ứng dụng và chờ đợi được xét duyệt (đôi khi bị từ chối vì vi phạm một số điều lệ của chợ ứng dụng), nên bản cập nhật không đến tay người dùng ngay lập tức, hơn nữa họ phải tự cập nhật khi vào chợ ứng dụng

– Tính đa dạng phiên bản của HĐH làm cản trở việc phổ dụng các ứng dụng Native Các thiết bị chạy phiên bản HĐH cũ hơn sẽ không cài đặt được

1.3.2 Phương pháp lập trình ứng dụng lai

Ứng dụng lai (hybrid) 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 chúng ta Chúng ta có thể tìm chúng trên các chợ ứng dụng Với chúng, chúng ta 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, ứng dụng lai 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 [15] Chỉ khác là các ứng dụng lai được lưu trữ bên trong một ứng dụng Native sử dụng WebView (Chúng ta 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 toàn màn hình 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ả

17

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

Ưu điểm:

 Tận dụng được các chức năng của thiết bị so với ứng dụng web chạy trên trình duyệt di động.Ví dụ: Hiển thị nội dung trên tất cả các thiết bị di động, tận dụng tối đa các tính năng của thiết bị di động như GPS, Camera, cảm biến gia tốc… điều này không thể làm được trên web, sử dụng ứng dụng ngay cả khi không có kết nối internet Những ứng dụng di động của một số trang tin tức hiện nay như Vnexpress, Dantri v.v đều là những ứng dụng lai

 Viết một lần, chạy được trên nhiều hệ điều hành Do vậy chi phí phát triển một ứng dụng lại là rẻ hơn so với việc phát triển một ứng dụng Native

 Ưu điểm

- Cung cấp giải pháp cho các ứng dụng phổ biến trên các loại thiết bị di động như iPhone, iPad, Android, Windows phone…Cung cấp các ứng dụng Native nhất quán cho tất cả các hệ điều hành trên điện thoại di động

- Phù hợp cho kinh doanh, vì nó không cần phải tạo ra những ứng dụng riêng biệt cho những thiết bị riêng biệt

- Tuy có thể tạo ra hai ứng dụng dựa trên cùng một mã nguồn nhưng trong

một số trường hợp lập trình viên phải xử lý riêng cho từng nền tảng cho việc các hệ điều hành có các phiên bản và phương thức hoạt động khác nhau

- Chậm cập nhật các thư viện hơn so với các công cụ được phát hành kèm

theo các phiên bản hệ điều hành do các nhà phát hành công cụ phát triển đa nền tảng đều dựa trên các công cụ phát hành kèm theo HĐH

- Khó kiểm tra, gỡ lỗi, không tối ưu được mã nguồn do các Framework phát

triển hiện nay đều hoạt động theo phương thức dịch mã nguồn viết bằng ngôn ngữ của Framework sang ngôn ngữ Native, vì thế bước này phải phụ thuộc hoàn toàn vào các công cụ phát triển ứng dụng đa nền tảng

1.4 Kết luận chương

Như đã được đề cập ở trên, các phương pháp phát triển đa nền tảng, phương pháp lai hay phương pháp Native đều có có ưu nhược điểm riêng Với mục đích phát triển ứng dụng khác nhau thì các nhà phát hành hoặc lập trình viên có thể chọn cho mình một phương pháp phát triển ứng dụng tốt nhất phù hợp với thời gian, yêu cầu, hiệu năng và trải nghiệm người dùng

Hầu hết các lập trình viên đều ưu tiên chọn theo các công cụ phát triển sao cho nhanh nhất, chi phí cho nhân lực thấp nhất, hiệu năng và trải nghiệm người dùng tốt nhất, trong khi vẫn đảm bảo được khả năng bảo trì nâng cấp Phát triển ứng dụng đa nền tảng là lựa chọn tốt nhất phù hợp với hướng đi này Trong phần tiếp theo luận văn sẽ trình bày chi tiết hơn về phương pháp phát triển ứng dụng đa nền tảng ReactNative Một phương pháp được rất nhiều lập trình viên và các nhà phát hành lựa chọn để viết ứng dụng

19

CHƯƠNG 2 LẬP TRÌNH ỨNG DỤNG DI ĐỘNG VỚI

REACT NATIVE 2.1 Tổng quan về React Native

2.1.1 Giới thiệu React Native

React Native (RN) là một nền tảng lập trình Javascript (JS) để viết các ứng dụng thực sự, render ứng dụng di động mượt mà cho cả hai hệ điều hành Android

và iOS [3],[5],[9] Nền tảng lập trình này được phát triển dựa trên React, một thư viện Javascript được phát triển bởi Facebook để xây dựng giao diện người dùng, nhưng thay chạy trên trình duyệt như React thì RN được xây dựng với mục tiêu chạy trên nền tảng di động Như vậy RN cho phép lập trình viên xây dựng các ứng dụng trên Android và iOS chỉ với một ngôn ngữ thống nhất là JS nhưng mang lại trải nghiệm ứng dụng gốc thực sự, chứ không như các nền tảng lập trình lai khác (viết một lần triển khai nhiều nơi)

Giống như React cho Web, ứng dụng RN được viết bởi một ngôn ngữ kết hợp giữa ngôn ngữ lập trình JavaScript và ngôn ngữ đánh dấu XML gọi là JSX [11]

Về cơ bản, RN sẽ được gọi thực thi bởi các hàm giao diện lập trình (API) gốc được viết bằng Objective-C (cho iOS), hoặc Java (cho Android) [9] Như vậy các thành phần của ứng dụng sẽ được vẽ bằng các thành phần giao diện (UI) gốc Hơn nữa,

RN có thể tạo ra các giao diện JavaScript cho các API của từng nền tảng, do đó ứng dụng có thể truy cập các đặc trưng như trình quản lý cuộc gọi, máy ảnh, vị trí người dùng

Hiện tại RN hỗ trợ cả Android và iOS và hiện tại đang phát triển thêm sang các nền tảng khác Có rất nhiều các ứng dụng đã được viết bằng React Native Trong đó một số ứng dụng nổi tiếng đã được viết bằng React Native như: Facebook, Instagram, Facebook Ads Manager …

React tập trung vào việc chia nhỏ ứng dụng ra thành nhiều thành phần nhỏ, mỗi thành phần thể hiện một thành phần giao diện tương ứng Những thành phần này có thể dễ dàng được sử dụng lại trong hệ thống, khi có yêu cầu thay đổi chúng

ta không cần phải thay đổi toàn bộ hệ thống nữa mà thay vào đó chỉ cần thay đổi

21

một phần nhỏ trong đó Quan trọng hơn React đóng gói các thẻ DOM, API chỉ cần khai báo một lần, giúp tăng tính trừu tượng và đơn giản hóa mô hình lập trình Xây dựng app với React giúp code của chúng ta sẽ dễ hình dung hơn, dễ đoán hơn Tính

dễ đoán này giúp chúng ta có thể tự tin sử dụng lại và ứng dụng đáng tin cậy hơn Ngoài ra, xây dựng ứng dụng với React không những giúp ứng dụng có khả năng

mở rộng mà còn giúp chúng ta dễ dàng mở rộng qui mô của nhóm hơn

Tại sự kiện F8 26/3/2015, Facebook đã giới thiệu và đưa bộ thư viện lập trình JS React Native lên GitHub, giúp cho các nhà phát triển có thể tạo ra những ứng dụng native trên Android và iOS Từ ngày ra mắt ReactNative đã được cộng đồng đón nhận và với chu kỳ khoảng 2 tuần một phiên bản được nâng cấp React Native ngày càng phát triển đầy đủ và trưởng thành hơn rất nhiều, phiên bản hiện tại

là 0.48 và được đánh giá hơn 75.000 star trên GitHub

2.1.3 Ý tưởng hình thành của React Native

Ý tưởng để viết ứng dụng di động bằng JS không mới Nhưng làm sao để có thể sử dụng React trong môi trường di động? Để hiểu rõ kỹ thuật then chốt này của

RN chúng ra cần xem xét lại một đặc trưng của React là Virtual DOM Với React, Virtual DOM hoạt động như một lớp giữa các mô tả của lập trình viên sao cho có thể đọc được, khi hoàn thành vẽ ứng dụng lên trang Để vẽ các tương tác giao diện người dùng trên trình duyệt, lập trình viên phải sửa DOM của trình duyệt, như vậy khó có thể đạt được hiệu năng tốt khi ghi các thao đổi xuống DOM Thay vì trực tiếp thay đổi trên trang, React tính toán các thay đổi cần thiết sử dụng một phiên bản trong bộ nhớ trong của DOM và vẽ lại các thay đổi cần thiết ít nhất Hình dưới đây mô tả cách hoạt động của Virtual DOM [3],[4],[9],[10]

22

Hình 2.2 Cách thức hoạt động của DOM ảo

Trong môi trường React, Virtual DOM gần như được biết đến như một thành phần thực thi và tối ưu hiệu năng Vậy chuyện gì xảy ra nếu như React có thể vẽ trên một nơi khác thay vì DOM hay không? Thay vì vẽ lên DOM của trình duyệt,

RN gọi các API bằng Objective-C thông qua cầu nối để vẽ các thành phần cho iOS

và gọi các API Java để vẽ các thành phần của Android [3],[9] Hình ảnh dưới đây

sẽ thể quá trính này:

Hình 2.3 Cách thức hoạt động của React Native

Điều này hoàn toàn có thể với “bridge” hay còn gọi là cầu nối, cầu nối này cung cấp thành phần giao diện của môi trường gốc cho các thành phần giao diện của React Các thành phần của React trả lại một giao diện từ hàm “render” định nghĩa

23

các giao diện trông như thế nào Với React cho Web, thành phần này được chuyển trực tiếp cho DOM của trình duyệt, với RN thì được chuyển thành một thành phần giao diện của nền tảng thực thi, ví dụ “View” Sẽ trở thành “UIView” trong iOS hay

“View” trong Android

2.2 React Native và các công nghệ liên quan

2.2.1 Ngôn ngữ lập trình Javascript

Như đã được giới thiệu ở trên, React Native sử dụng một ngôn ngữ duy nhất

để khiển khai viết ứng dụng là Javascript [9] Javascript (viết tắt là JS) là một ngôn ngữ lập trình cấp cao, linh hoạt, hướng đối tượng, đa mô hình phía máy khách Cùng với HTML và CSS, Javascript là một trong ba công nghệ lõi để xây dựng các nội dung Web Javascript được sử dụng để tạo ra các trang tương tác và tạo ra các chương trình trực tuyến, bao gồm trò chơi điện tử Rất nhiều website sử dụng Javascript, và tất cả các trình duyệt web hiện nay đều hỗ trợ Javascript mà không cần đến plug-ins thay vào đó là các công cụ để thực thi Javascript Mỗi công cụ Javascript thể hiện một hướng phát triển khác nhau của Javascript, nhưng tất cả đều dựa trên đặc tả ECMAScript, ngoại trừ một số công cụ không hỗ trợ đầy đủ, hầu hết các công cụ đều hỗ trợ các tính năng bổ sung bên cạnh ECMA [5]

Là một ngôn ngữ đa mô hình, JS hỗ trợ các phong cách lập trình dựa trên sự kiện, chức năng, bao gồm cả hướng đối tượng và dựa trên nguyên mẫu Nó có giao diện lập trình ứng dụng để làm việc với các kiểu dữ liệu như văn bản, mảng, ngày tháng, biểu thức thông thường và các thao tác cơ bản, nhưng không bao gồm thiết bị mạng, lưu trữ hay đồ họa Mặc dù nhìn bên ngoài Javascript có sự tương đồng lớn với Java, bao gồm, tên, cú pháp, các thư viện tiêu chuẩn, nhưng đây là hai ngôn ngữ độc lập, khác nhau về thiết kế JS ảnh hưởng bởi các ngôn ngữ lập trình như Self và Scheme

Ban đầu, JS chỉ thực hiện phía máy khách trên các trình duyệt web, nhưng hiện nay, các công cụ JS được nhúng vào nhiều loại phần mềm máy chủ, bao gồm

cả phía máy chủ trong các máy chủ web, cơ sở dữ liệu, ứng dụng Để thực hiện điều

24

này cần sự hỗ trợ của một máy áo thực thi trên các môi trường khác nhau giúp Javascript có thể giao tiếp được với vi xử lý Một trong các máy ảo này là engine V8, một JavaScript VM hiệu năng cao mã nguồn mở của Google, chúng ta sẽ xem xét kỹ hơn ở phần tiếp theo

2.2.2 Javascript VM (V8 engine)

Engine V8 được viết bằng ngôn ngữ C++ và ban đầu được sử dụng trong Google Chrome Sau đó V8 được mở rộng chạy phía server (node.js) và có thể chạy trên các hệ điều hành từ Windows 7 trở lên, macOS 10.5+, các hệ điều hành Linux

sử dụng vi xử lý IA-32, ARM, MIPS V8 có thể chạy độc lập hoặc nhúng vào bất kỳ chương trình nào V8 biên dịch và thực thi mã nguồn JS, xử lý việc cấp phát bộ nhớ cho các đối tượng và dọn dẹp các đối tượng này khi không dùng đến Khả năng tạo

ra và dọn dẹp bộ nhớ là một trong các yếu tố cơ bản hình thành nên hiện năng của V8 [14]

V8 ban đầu được thiết kế tăng cường hiệu năng cho JavaScript trong trình duyệt Để đạt được hiệu năng này, V8 dịch JavaScript sang mã nguồn khác có khả năng tương thích tốt hơn với phần cứng thay vì biên dịch và sử dụng trực tiếp Trình biên dịch này biên dịch mã nguồn JavaScript sang mã máy và thực thi mã nguồn theo các cài đặt của JIT (Just-In-Time), tương tự như các trình biên dịch JavaScript khác tương tự như SpiderMonkey, Rhino (Mozilla) đã làm Khác biệt cơ bản của V8 là không tạo ra mã máy trưc tiếp từ mã nguồn hay các mã nguồn trung gian mà dịch mã nguồn sang mã nguồn mới tương thích tốt hơn với phần cứng và biên dịch

từ mã nguồn này

JavaScript là ngôn ngữ thông dịch, có nghĩa là không có lớp hay đối tượng nào được tạo ra sử dụng bởi đa tiến trình, hơn nữa JS là ngôn ngữ động nên các thông tin, thuộc tính có thể thêm hoặc xóa bất kỳ lúc nào Truy cập kiểu và thuộc tính của đối tượng trên thực tế là một thách thức lớn đối với V8 Thay vì sử dụng kiểu cấu trúc dữ liệu như từ điển để lưu trữ các thuộc tính của đối tượng và tìm kiếm động để tìm vị trí của các thuộc tính (giống như đa số các trình biên dịch JS khác làm), V8 tạo ra một lớp ẩn lúc thực thi, theo cách này mã nguồn có thể thể

25

hiện được các đặc trưng nội tại của hệ thống và cải thiện thời gian truy cập các thuộc tính

Để hiểu hơn về quá trình này chúng ta xem xét một hàm tên là “Point” và

hai đối tượng được tạo ra từ hàm này Hàm này cùng hai đối tượng được khởi tạo từ hàm này và lớp ẩn được tạo ra khi thực thi được thể hiện ở hình dưới đây:

Hình 2.4 Cách thức hoạt động của Javascript VM

Nếu cách bố trí giống nhau như trong trường hợp này thì hai biến “p” và

“q” đều cùng một loại lớp ẩn được tạo ra bởi V8, điều này cũng là một lợi thế khi

sử dụng lớp ẩn khi cho phép V8 nhóm các đối tượng cùng các kiểu thuộc tính Như

ví dụ trên đây là “p” và “q” đã được tối ưu để sử dụng cùng một mã nguồn

Bây giờ giả sử rằng, chúng ta muốn thêm thuộc tính z vào đối tượng “q”,

điều này dĩ nhiên là có thể làm được với ngôn ngữ kiểu động Nhưng với V8, do được dịch ra ngôn ngữ cấp thấp hơn nên các thuộc tính phải được khai báo trước khi đối tượng được khởi tạo, do đó không thể thêm thuộc tính sau khi một đối tượng được khởi tạo Để vượt qua điều này V8 tạo ra lớp ẩn mới mỗi lần một hàm khởi tạo một thuộc tính và chuyển tham chiếu từ đối tượng cũ tới đối tượng mới được tạo

26

ra Quá trình này được thực hiện lần lượt theo thứ tự “Point_0, Point_1, Point_2, Point_3” như hình sau:

Hình 2.5 Quá trình tạo lớp ẩn của Javascript VM

Theo như hình trên ta thấy mỗi khi lớp ẩn mới được tạo ra, đối tượng cũ được cập nhật với lớp ẩn mới được dịch thay vì sử dụng lớp cũ Cũng vì lý do này

mà lập trình viên nên tránh thêm thuộc tính sau khi đối tượng được tạo ra và luôn luôn khởi tạo đối tượng theo thứ tự để tránh tạo ra các cây lớp ẩn khác nhau

2.2.3 ReactJS

ReactJS là một thư viện viết bằng Javascript, dùng để xây dựng giao diện

người dùng (User Interface – UI) [10] ReactJS được Jordan Walke viết đầu tiên,

sau đó được sử dụng trên trang Newsfeed của Facebook (năm 2011) và Instagram (2012) Đến 05/2013 thì trở thành mã nguồn mở và được bảo hộ, phát triển bởi

ra dựa vào các đầu vào đó, điêu này lý giải tại sao nó lại mang tính tái sử dụng và dễ dàng cho việc kiểm thử

React Native kế thừa tư tưởng của ReactJS và sử dụng cấu trúc của nó để viết mã nguồn ứng dụng và chạy trên môi trường di động thay vì chạy trên web như React

<View>

<Text>Hello world!</Text>

</View>

http.createServer( function (req, res) {

res.writeHead( 200 , { 'Content-Type' : 'text/plain' });

res.end( 'Hello World!' );

}).listen( 8080 );

Npm là từ viết tắt của “Node Package Manager”, là một công cụ để quản lý

mã nguồn Javascript, Npm giúp các nhà phát triển JavaScript chia sẻ, sử dụng lại và cập nhật mã nguồn dễ dàng và tiện lợi

2.3 Kiến trúc React Native

2.3.1 Kiến trúc ứng dụng React Native

Kiến trúc của một ứng dụng RN bao gồm 3 phần chính:

- Môi trường thực thi JS

- Mã nguồn ứng dụng viết bằng JS

- Các gói thư viện bên thứ ba

Ngoài ra còn SDK kèm theo hệ điều hành và một bộ thư viện viết bằng ngôn ngữ gốc theo từng hệ điều hành để làm môi trường kết nối giữa JS và SDK của hệ điều hành [9] Các thành phần của React Native được thể hiện ở hình dưới đây:

29

Hình 2.6 Kiến trúc ứng dụng React Native

Như được đề cập ở trên RN sử dụng ngôn ngữ Javascript làm ngôn ngữ phát triển ứng dụng Để hiểu các mà RN làm việc chúng ta cần hiểu các mà ngôn ngữ JavaScript được thực thi như thế nào Vì JavaScript không phải là một ngôn ngữ dành cho môi trường trên điện thoại, nên để chạy được mã nguồn Javascript trên điện thoại chúng ta cần đến một kỹ thuật gọi là “cầu nối” để cho phép JavaScript chạy, liên lạc, tương tác với bộ vi xử lý trên điện thoại [9] Nói như vậy có nghĩa là điện thoại phải chạy được JavaScript hay đơn giản hơn là môi trường thực thi Javascript Môi trường chạy này không gì khác ngoài một số mã nguồn chạy trên hệ điều hành cho phép Javascript thực thi Môi trường chạy này chạy một số mã nguồn gốc được hỗ trợ bởi hệ điều hành sau đó tải thêm Javascript và thực thi trên môi trường này Hình dưới đây sẽ mô tả quá trình tương tác giữa mã nguồn Android và máy ảo JS:

Hình 2.7 Mỗi trường cầu nối giữa JavaScript VM và ngôn ngữ gốc

30

Chúng ta có thể xem biểu đồ hoạt động dưới đây chạy trên một hệ điều hành

di động cụ thể Chúng ta có môi trường chạy Javascript, bên trong môi trường này

mã nguồn RN JavaScript có thể thực thi

Hình 2.8 Quá trình thực thi mã nguồn React Native

Biều đồ phía trên đơn giản chỉ là những gì chúng ta đã đề cập đến từ đầu Nó thể hiện kiến trúc ở mức cao, ở đây cả mã nguồn gốc được hệ điều hành hỗ trợ và

mã nguồn RN được thực hiện theo thứ tự trong ứng dụng RN Ứng dụng RN đã tải JavaScript vào trong môi trường thực thi Trên thực tế sẽ có nhiều điểm cầu nối sẽ được tạo ra để mã nguồn Javascript kết nối đến các điều kiển hệ thống trên điện thoại Bởi vì Javascript chạy trên ứng dụng gốc vẫn phải chạy bằng ngôn ngữ gốc được hỗ trợ, và nhiều đối tượng mã nguồn gốc mà mỗi ứng dụng cần để sử dụng Ví dụ: chúng ta cần một ứng dụng có rất nhiều thành phần mà mỗi điện thoại cần, và mỗi thành phần sẽ cài đặt trong môi trường thực thi và liên hệ qua các cầu nối

Như ví dụ hình dưới đây mỗi khi một đối tượng giao diện được tạo ra trên thực tế thì một đối tượng giao diện bằng môi trường gốc cũng được tạo ra tương ứng Mỗi khi mã nguồn muốn thao tác với thành phần giao diện bằng JS thì thành phần cầu nối sẽ chuyển đổi các thao tác này thành các thao tác tương ứng với thành phần giao diện gốc kèm theo thư viện lập trình của hệ điều hành

31

Hình 2.9 Chi tiết quá trình hoạt động của mã nguồn React Native thông qua cầu nối

Chúng ta có thể thấy rằng mỗi thành phần điều khiển của của RN sẽ tương tác với một số thành phần gốc Mã nguồn gốc sẽ được hệ điều hành thực thi trên luồng của nó, có nghĩa là mã nguồn RN JavaScript sẽ liên hệ sẽ được thực thi độc lập với mã nguồn Native Đơn giản là các sự kiện sẽ được mã nguồn gốc gọi lại thông qua cầu nối Đây là một trong những điều kiện để phát triển ứng dụng RN mà không bị khóa khi mã nguồn Javascript khi thực thi bởi vì JS chỉ chạy trên một

luồng khi hoạt động

2.3.2 Cách thức hoạt động của React Native

Để hiểu cách thức hoạt động của RN chúng ta xem xét một ví dụ đơn giản chỉ bao gồm một màn hình hiển thị nội dung là “Hello world” Giả sử rằng môi trường thử nghiệm đã cài đặt giao diện dòng lệnh React Native (react-native-cli)

Để khởi tạo một ứng dụng viết bằng RN có tên là “HelloWorldApp”, chúng ta sử dụng giao diện dòng lệnh để chạy lệnh “react-native init HelloWorldApp” Sau khi tạo ứng dụng “HelloWorldApp” bằng dòng lệnh trên Chúng ta chạy dòng lệnh sau tương ứng với mỗi HĐH tại thư mục “HelloWorldApp” là “react-native run-ios”