Báo-cáo-ttsx- Tìm Hiểu Về Framework React Native

Trong công nghệ điện toán , đa nền tảng Cross-Platfrom là một thuật ngữ chỉ các phần mềm máy tính hay các phương thức điện toán và các khái niệm được thựcthi đầy đủ và vận hanh

TRƯỜNG ĐẠI HỌC MỎ ĐỊA CHẤT KHOA CÔNG NGHỆ THÔNG TIN

-*** -Báo Cáo Thực Tập Sản Xuất

Đề tài Tìm Hiểu Về Framework React Native

NGUYỄN TIẾN HOÀNG TS LÊ HỒNG ANH

LỚP KHMT K61B

Hà Nội – 2021

LỜI CẢM ƠN

Em xin chân thành cảm ơn Khoa Công Nghệ Thông Tin, Bộ môn Khoa Học Máy Tính , trường Đại học Mỏ – Địa Chất đã tạo điều kiện tốt cho em hoàn thành bài báo cáo này.

Em xin gửi lời cảm ơn sâu sắc tới tất cả các thầy cô, những người đã giảng dạy, trang bị cho em những kiến thức quý báu trong suốt những năm học vừa qua.

Xin chân thành cảm ơn tới gia đình, anh chị, bạn bè đã giúp đỡ, ủng hộ, động viên em trong suốt thời gian học tập và nghiên cứu.

Mặc dù em đã cố gắng hoàn thiện thật tốt đồ án nhưng do kiến thức có hạn

do đó không thể tránh khỏi những sai sót, em rất mong nhận được sự cảm thông, ý kiến đóng góp của các quý Thầy Cô và các bạn!

Em xin chân thành cảm ơn ! Hà Nội , Ngày 25 Tháng 01 Năm 2021

Sinh viên thực hiện

Hoàng Nguyễn Tiến Hoàng

Mục lục

Chương I: Tổng Quan Cros-Platfrom 3

1 Cross-Platfrom là gì 3

2 Ưu nhược điểm của Cross-Platfrom 3

Chương II : Giới Thiệu Framework React Native 4

2.1 Tổng quan về React Native 42.2 Ưu nhược điểm của React Native 6

2.3 Thiết lập môi trường 7

2.3.1 Thiết lập môi ảo 7 2.3.2 Thiết lập môi thực 12

Chương III :Trợ Năng - Guide 13

AccesiibilityTraits(IOS) 13 AccessibilityViewModal 13 onAccessibilityTap14

onMagicTap14

Chương IV: Một số Component trong React Native 15

Chương V :Tích hợp React Native vào ứng dụng Native 16

5.1 Tich hợp React Native vào IOS 16 5.2 Tích hợp React Native vào Android 19

Chương VI :Hiệu suất trong React Native 20

Chương VII :JavaScript RunTime 25

Chương VIII:Native Modules 25

8.1 Android Native Modules 25

Chương IX : Định hướng phát triển 29

Chương X :Demo 29

I Tổng quan Cross-Platfrom

1 Cross-Platfrom là gì ?

Trong công nghệ điện toán , đa nền tảng (Cross-Platfrom) là một thuật ngữ chỉ các phần mềm máy tính hay các phương thức điện toán và các khái niệm được thựcthi đầy đủ và vận hanh cùng nhau trên nhiều nền tảng máy tính hay ứng dụng … Phần mềm đa nền tảng có thể được chia thành hai loại:

+ Loại 1: yêu cầu phải thiết kế hoặc biên dịch từng phiên bản cho mỗi nền tảng

nó hỗ trợ

+ Loại 2: có thể chạy trực tiếp trên bất cứ nền tảng nào mà không cần sự chuẩn bị thêm đặc biệt nào chẳng hạn như viết một ngôn ngữ thông dịch hay được biên dich sang mã bytecode có khả năng di động bằng một trình thông dịch hay các gói run-time thường dùng hoặc là thành phần tiêu chuẩn trên mọi nền tảng

2 Ưu điểm , nhược điểm của cross-platfrom

2.1 Ưu điểm

+ Mạch lạc về kiến trúc: Để xây dựng một ứng dụng cross-platform thì thiết kế chặt chẽ , tuân thủ theo đúng mô hình ( MVC, MVVM…) để tách phần phụ thuộc vào Ó , phần phụ thuộc vào phía 3rd Library Việc này sẽ là áp lục cho nhà thiết kế , nhưng

bù lại sẽ làm cho ứng dụng có hiệu năng cao , dễ dàng bảo trì trong tương lai

+ Viết code ít: Bạn chỉ cần code duy nhất một bộ mã và có thể build và chạy trên các nền tảng khác nhau , Nghĩa là công sức bỏ ra để viết mã máy sẽ được tối ưu.+ Dễ dàng bảo trì và mở rộng: Do mạch lạc về kiến trúc việc điều tra sửa lỗi cũng sẽ dễ dàng hơn, giúp cho việc bảo trì và mở rộng cũng sẽ dễ dàng hơn nhiều

+ Tính tái sử dụng cao : Vì cross-platform nên các đoạn mã sẽ dễ dàng được tái sửdụng và share cho các ứng dụng , phần mềm khác cho dù nó là cross-platform không.+ Chi phí gia công và bảo trì thấp: Vì cross-platform tính chất build một lần chạy được nhiều nơi nên sẽ được giảm được chi phí thuê người code , tăng tốc độ hoàn thành của dự án

2.2 Nhược điểm:

+ Hiệu năng thấp

+ Ứng dụng có chức năng nặng về phần cứng sẽ khá khó xử lý

II Giới Thiệu Framework React Native.

Điều kiện tiên quyết là phải có kiến thức của CSS, JS ( ES6 trở lên),

ReactJS

Sự phát triển về CNTT ngày càng khủng khiếp Những công nghệ mới đã vàđang làm thay đổi thế giới một cách nhanh chóng Từ lúc mới ra đời cho đến nay smartphone đã có những bước tiến mạnh mẽ vì vậy mà những công nghệ kèm theo cũng đòi hỏi những nhà phát triển phần mềm viết ra nhiều phần mềm hơn để có thể

sử dụng được trên smartphone chứ không còn đơn thuần là những ứng dụng nhắn tin gọi điện thông thường

Kèm theo đó là số lượng người dùng di động (smartphone) tăng lên chóng mặt Cụ thể theo những báo cáo mới đây mà các nhà khoa học đã thống kê thì thời gian dành cho smartphone trung bình qua khảo sát hàng tỉ người thì rơi vào khoảng 3 tiếng một ngày

Đồng thời giá smartphone đang ngày càng rẻ qua từng năm, vì các dòng

smartphone giá rẻ đến từ các quốc gia phát triển và đông dân như Ấn Độ, Trung Quốc Cùng với đó công nghệ sản xuất càng dần hoàn thiện hơn kéo giá smartphone xuống tới các tầng lớp phổ thông của xã hội Từ đó smartphone trở thành một thiết bị có thể được sởhữu dễ dàng

Nhiều công ty sản xuất phần mềm trên di động hoặc những công ty lớn nhìn thấy đây là mảnh đất màu mỡ và tiềm năng phát triển của nó rất lớn Đồng thời dựa theo số liệu thống kê như trên thì bắt đầu người dùng đã chịu chi tiền cho smartphone nhiều hơn,

số lượng người dùng chịu bỏ tiền ra mua ứng dụng để sử dụng trên smartphone cũng tăng lên theo từng năm Do đó kéo theo nhu cầu về công việc liên quan đến mảng smartphone nói chung và lập trình mobile nói riêng tăng lên chóng mặt Đưa ra những tiềm năng và thử thách dành cho những ai muốn phát triển theo hướng lập trình ứng dụng di động Nhu cầu dạy và học lập trình ứng dụng di động đang dần trở thành xu hướng của xã hội hiện nay

2.1 Tổng quan về React Native.

React Native là một framework mã nguồn mở do Facebook phát triển nhằm mục địch giải quyết bài toán hiệu năng của Hybrid và bài toán chi phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di dộng Chúng ta sẽ build được ứng dụng Native, và chúng ta có thể build ứng dụng đó một cách đa nền tảng ( Cross-platform) chứ không phải là một “ mobile web app” , không phải là “ HTML5 app”, và cũng không phải là mộthybrid app, hay cũng không chỉ build trên IOS hay Android mà chúng ta build và chạy được cả hai hệ sinh thái luôn

Một điểm hay ho nữa là giảm chi phí recompile của Native bằng cách sử dụng Hot-loading tức là bạn không cần phải build lại ứng dụng từ đầu nên việc chỉnh sửa diễn

ra nhất nhanh chóng Giups cho lập trình viên có thể thấy được những chỉnh sửa của họ một cách nhanh chóng trực quan , không còn phải bỏ quá nhiều thời gian trong việc build

và run ứng dụng nữa

2.2 Ưu và nhược điểm của React Native 2.2.1 Ưu điểm:

• Hiệu quả về mặt thời gian khi mà bạn muốn phát triển mộtứng dụng nhanh chóng

• Hiệu năng tương đối ổn định

• Cộng đồng phát triển mạnh.

• Tiết kiệm tiền

• Team phát triển nhỏ

• Ứng dụng tin cậy và ổn định

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

• Trải nghiệm người dùng tốt hơn là hybrid app

2.2.2 Nhược điểm:

• Vẫn đòi hỏi native code

• Hiệu năng sẽ thấp hơn với app thuần native code

• Bảo mật không cao do dựa trên JS

• Quản lý bộ nhớ

• Khả năng tùy biến cũng không thực sự tốt đối với một vài module

2.3 Thiết lập môi trường

Có 2 cách để thiết lập môi trường phát triển React Native:

• Thiết lập môi trường ảo thông qua virtual devices

• Thiết lập môi trường thực thông qua Expo

2.3.1 Thiết lập môi trường ảo thông qua virtual devices.

2.3.1.1 Cài đặt Nodejs, JDK, Android Studio.

a) Nodejs.

b) JDK

c) Android Studio.

2.3.1.2 Cài SDK trong Android Studio

Để xây dựng một ứng dụng React Native với code native cần cài đặt một số gói trongAndroid Studio

File -> Settings -> Appearance & Behavior -> System -> Android SDK -> Select Show package Details -> Android 10.0(Q) -> Select Android SDK Platform 29 , Intel x86 Atom System Image, Intel x86 Atom_64 System Image -> SDK Tools -> Select Show package Details -> Android SDK Build-Tools -> Select 28.0.3 -> OK

• File -> Settings

• Appearance & Behavior -> System -> Android SDK

• Select Show package Details

• Selects: Android 10.0(Q) -> Select Android SDK Platform 29 , Intel x86 Atom System Image, Intel x86 Atom_64 System Image

• SDK Tools

• Select Show Package Details

• Android SDK Build-Tools -> Select 28.0.3 -> OK

Tạo biến môi trường Android_Home

Tạo biến Path

Cài đặt app bằng npx

Mở cửa sổ cmd gõ lệnh : npx react-native init <ten_project>

Cd AppSearch->npx react-native run android/ios

2.3.2 Thiết lập môi trường thực thông qua ứng dụng Expo

2.3.2.1 Cài đặt global Expo trên cửa sổ cmd

Mở cửa sổ cmd gõ lệnh: npm install -g expo-cli

2.3.2.2 Tải Expo client về điện thoại.

III Trợ Năng ( Guide)

Cả iOS và Android đều cung cấp các API để làm cho các ứng dụng có thể tiếp cận được với người khuyết tật Ngoài ra, cả hai nền tảng cung cấp công nghệ trợ giúp kèm theo, như người đọc màn hình VoiceOver (iOS) và TalkBack (Android) dành cho người khiếm thị Tương tự, trong bản phản hồi, chúng tôi đã bao gồm các API được thiết

kế để cung cấp cho các nhà phát triển hỗ trợ làm cho các ứng dụng dễ truy cập hơn Lưu ý,iOS và Android khác nhau theo cách tiếp cận của họ, và do đó triển khai React Native có thể thay đổi theo nền tảng

• accessibilityTraits (iOS)

Các tính năng trợ năng cho người dùng VoiceOver biết họ đã chọn loại phần tử nào Đây có phải là một phần của nhãn? Một nut bâm? Một tiêu đề? Những câu hỏi này được trả lời bởi

• none được sử dụng khi phần tử không có đặc điểm.

• button được sử dụng khi phần tử được coi như một nút.

• link được sử dụng khi phần tử được coi như một liên kết.

• header được sử dụng khi một phần tử hoạt động như phần đầu của phần nội dung

(ví dụ tiêu đề thanh điều hướng)

• search được sử dụng khi phần tử trường văn bản cũng phải được coi như là một

trường tìm kiếm

• image Được sử dụng khi các yếu tố nên được đối xử như một hình ảnh Có thể kết

hợp với nút hoặc liên kết, ví dụ

• selected Sử dụng khi phần tử được chọn Ví dụ: một hàng được chọn trong một

bảng hoặc một nút được chọn trong một điều khiển phân đoạn

• plays được sử dụng khi phần tử phát âm thanh của riêng mình khi kích hoạt.

• key được sử dụng khi phần tử hoạt động như một phím.

• text được sử dụng khi các phần tử nên được coi như là văn bản tĩnh mà không thể

thay đổi

• summary được sử dụng khi một phần tử có thể được sử dụng để cung cấp một bản

tóm tắt nhanh các điều kiện hiện tại trong ứng dụng khi ứng dụng được khởi chạy lần đầu tiên Ví dụ: khi Thời tiết mở đầu tiên, yếu tố có điều kiện thời tiết hôm nay được đánh dấu bằng đặc tính này

• disabled được sử dụng khi điều khiển không được kích hoạt và không đáp ứng với

đầu vào của người dùng

• frequentUpdates được sử dụng khi phần tử thường xuyên cập nhật nhãn hoặc giá

trị, nhưng thường xuyên gửi thông báo Cho phép khách hàng khả năng truy cập tìm kiếm các thay đổi Một stopwatch sẽ là ví dụ

• startsMedia được sử dụng khi kích hoạt một phần tử bắt đầu phiên media (ví dụ

như phát phim, ghi âm) không được gián đoạn bởi đầu ra từ một công nghệ trợ giúp, như VoiceOver

• adjustable được sử dụng khi một phần tử có thể được "điều chỉnh" (ví dụ như

thanh trượt)

• allowsDirectInteraction được sử dụng khi một phần tử cho phép tương tác cảm

ứng trực tiếp cho người dùng VoiceOver (ví dụ như chế độ xem thể hiện một bàn phím piano)

• pageTurn thông báo cho VoiceOver rằng nó sẽ di chuyển tới trang tiếp theo khi nó

đọc xong nội dung của phần tử

• OnAccessibillityTap(ios)

Sử dụng thuộc tính này để chỉ định một hàm tùy chỉnh để được gọi khi người nào đó kích hoạt một phần tử có thể truy cập bằng cáchnhấn đúp vào nó khi nó được chọn

• OnMagicTap

Gán thuộc tính này cho một chức năng tùy chỉnh sẽ được gọi khi

ai đó thực hiện cử chỉ "magic tap", đó là một double-tap bằng hai ngón tay Chức năng magic tap phải thực hiện hành động có liên quan nhất mà người dùng có thể thực hiện trên một thành phần Trong ứng dụng trên iPhone, một tập magic tap sẽ trả lời cuộc gọi điện thoại hoặc kết thúc cuộc gọi hiện tại Nếu phần tử đã chọn

không có chức năng onMagicTap, hệ thống sẽ đi qua phân cấp chế độ xem cho đến khi nó tìm ra chế độ xem đó.

• AccesssibilityComponentType(Android)

Trong một số trường hợp, chúng tôi cũng muốn cảnh báo người dùng cuối về loại thành phần đã chọn (nghĩa là nó là một "Button") Nếu chúng tôi sử dụng các nút mặc định, điều này sẽ hoạt động tự động Vì chúng ta đang sử dụng javascript, chúng ta cần cung cấp thêm một ngữ cảnh cho TalkBack Để làm như vậy, bạn phải chỉ định thuộc tính 'accessibilityComponentType' cho bất kỳ thành phần UI nào

IV.Một số Components trong React Native

IV.1 Điều khiển Text Input.

TextInput là một thành phần cơ bản cho phép người dùng có thể nhập text Nó có một tham số onChangeText dành cho việc cài đặt một function được gọi mỗi khi nội dung text trong khung nhập thay đổi, và một tham số onSubmitEditing để cài đặt function được gọi khi text được submit.

ScrollView là một thành phần giao diện cha, nó có thể chứa được nhiều những thành phần khác bên trong nó, và nó có khả năng scroll các thành phần ở bên trong nó Cácthành phần có thể scroll cần phải đồng nhất, và bạn có thể scroll dọc hoặc ngang bằng cáchcài đặt cho thuộc tính horizontal.

ListView là thành phần hiển thị các thành phần con có thể vuốt dọc được, như các thành phần bên trong có cấu trúc tương tự nhau

ListView yêu cầu hai thuộc tính dataSource và renderRow Thuộc

tính dataSource là thông tin nguồn để hiển thị lên ListView renderRow sẽ trả về định dạnghiển thị của một row trong ListView

V Tích hợp React Native vào ứng dụng Native

V.1 IOS(Swift)React Native là sự lựa chọn tốt khi bắt đầu một dụng mobile mới sử dụng việc kết hợp Dù sao thì nó cũng sẽ hoạt động tốt khi thêm một màn hình hoặc thêm một lường xử lý mới vào các ứng dụng native Với một vài bước cơ bản dưới đây, có thể thêm được các tính năng cơ bản trên nền tảng React Native , các màng hình , các view và nhiều hơn thế nữa

V.1.1 Những khái niệm chính

• Cài đặt React Native dependencies và cấu trúc thư mục

• Hiểu được những thành phần trong React Native được sử dụng trong ứng dụng

• Thêm các thành phần như là các dependencies sử dụng CocoaPods

• Phát triển các thành phần React Native với JavaScript

• Thêm một RCTRootView vào ứng dụng dùng IOS , View này sẽ phục vụ cho việc lưu trữ các thành phần React Native

• Start React Native server và chạy ứng dụng native

• Xác nhận React Native trong ứng dụng của bạn đã hoạt động như kỳ vọng

V.1.2 Điều kiện cần

Đã cài đặt React Native Cli Môi trường phát triển để build ra ứng dụng native của IOS

V.1.3 Thiết lập cấu trúc thư mục:

Để đảm bảo trải nghiệm mượt mà, hãy tạo một thư mục mới cho dự án React Native của bạn , sau đó sao chép dự án IOS hiện có của bạn vào thư mục /IOS của dự án React Native

V.1.4 Cài đặt JavaScript dependencies

V.1.5 Cài đặt React và Reat NativeV.1.6 Cài đặt CocoaPods

V.1.7 Cấu hình CocoPods dependenciesTích hợp React Native vào trong ứng dụng của đã cài trước đó, muốn định nghĩa thành phần nào của React Native mà bạn muốn tích hợp Chúng ta sẽ sử dụng CocoaPods để chỉ rõ đâu là subspecs mà ứng dụng của bạn sẽ phụ thuộc

Danh sách các subspecs được hỗ trợ đã sẵn sàng trong native/Reacat.podpec Chúng đã được tạo ra và đặt tên theo chức năng

/node_modules/react-Có thể chỉ rõ subspecs mà bạn sẽ cần trong một Podfile file Cách dễ nhất làtạo ra một Podfile là chạy CocoPods init trong thư mục con IOS/ của dự án

Gõ lệnh trên terminal: pod init

Podfile sẽ bao gồm một bản mẫu cài đặt , nó sex nhóm các mục tiêu tích hợp Cuối cùng, một file Podfile sẽ trông tương tự như sau:

V.1.8 Tích hợp code

V.1.8.1 Tạo file app.jsĐầu tiên , tạo một empty file index.js ở root của React Native project index.js là điểm bắt đầu của ứng dụng, và nó là một yêu cầu bắt buộc Nó có thể là một file nhỏ và require đến các phần khác của các thành phần trong React Native hoặc ứng dụng hoặc nó

có thể bao gồm tất cả các code mà bạn cần cho nó Trong trường hợp của chúng ta , chúng ta sẽ đưa tất cả mọi thứ vào trong app.js

V.1.8.2 Thêm code của React Native

V.2 Android (Java)

V.2.1 Các khái niệm chính

• Thiết lập cấu trúc thư muc

• Phát triển các thành phần React Native của dự án trong Js

• Thêm ReactRootView vào ứng dụng Android của dự án

• Khởi động máy chủ React Native và chạy ứng dụng native của dự án

V.2.2 Điều kiện tiên quyết:

Phải sử dụng React Native Cli

V.2.3 Thiết lập cấu trúc thư mục

Để đảm bảo trải nghiệm mượt mà, hãy tạo một thư mục mới cho dự án React Native tích hợp của bạn, sau đó sao chép dự án Android hiện có của bạn vào một /androidthư mục con