React native báo cáo giữa kỳ phát triển Ứng dụng di Động Đa nền tảng

Với React Native,bạn sử dụng JavaScript để truy cập các API của nền tảng cũng như để mô tả giaodiện và hành vi của giao diện người dùng của bạn bằng cách sử dụng các thànhphần React: các

KHOA CÔNG NGHỆ THÔNG TIN

NGUYỄN QUANG LỢI - 52100910

KHOA CÔNG NGHỆ THÔNG TIN

NGUYỄN QUANG LỢI - 52100910

THÀNH PHỐ HỒ CHÍ MINH, NĂM 2024

LỜI CẢM ƠN

Em xin chân thành cảm ơn thầy Trần Đại Nhân, người đã dành tâm huyết vàthời gian để hướng dẫn chúng em trong quá trình thực hiện bài báo cáo Sự chia sẻkiến thức sâu rộng và tận tâm của thầy không chỉ giúp chúng em vượt qua nhữngthách thức trong nghiên cứu mà còn là nguồn động viên lớn, làm cho hành trình nàytrở nên ý nghĩa và giáo dục hơn

Thầy không chỉ là những người hướng dẫn mà còn là những người đồng hành,người bạn quan trọng trong quá trình học tập Chúng em xin bày tỏ lòng biết ơn sâusắc và tri ân đến thầy, người đã góp phần làm nên thành công của công trình này.Cảm ơn thầy vì sự cống hiến và sự hỗ trợ vô song

TP Hồ Chí Minh, ngày 17 tháng 05 năm 2024

Tác giả(Ký tên và ghi rõ họ tên)Nguyễn Quang LợiPhạm Quang Đức

CÔNG TRÌNH ĐƯỢC HOÀN THÀNH

TẠI TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

Tôi xin cam đoan đây là công trình nghiên cứu của nhóm và được sựhướng dẫn khoa học của Thầy Trần Đại Nhân Các nội dung nghiên cứu, kếtquả trong đề tài này là trung thực và chưa công bố dưới bất kỳ hình thức nàotrước đây Những số liệu trong các bảng biểu phục vụ cho việc phân tích, nhậnxét, đánh giá được chính tác giả thu thập từ các nguồn khác nhau có ghi rõtrong phần tài liệu tham khảo

Ngoài ra, trong Dự án còn sử dụng một số nhận xét, đánh giá cũng như

số liệu của các tác giả khác, cơ quan tổ chức khác đều có trích dẫn và chú thíchnguồn gốc

Nếu phát hiện có bất kỳ sự gian lận nào tôi xin hoàn toàn chịu tráchnhiệm về nội dung Dự án của mình Trường Đại học Tôn Đức Thắng khôngliên quan đến những vi phạm tác quyền, bản quyền do tôi gây ra trong quá trìnhthực hiện (nếu có)

TP Hồ Chí Minh, ngày 17 tháng 05 năm 2024

Tác giả(Ký tên và ghi rõ họ tên)Nguyễn Quang LợiPhạm Quang Đức

REACT NATIVE TÓM TẮT

Bài báo cáo tập trung vào React Native, một framework mã nguồn mở phổbiến cho phát triển ứng dụng di động đa nền tảng (iOS và Android) bằng JavaScript.Được phát triển bởi Facebook từ năm 2015, React Native sử dụng kiến trúc MVC

để tách logic nghiệp vụ và giao diện người dùng Nó sử dụng JavaScript, Node.js,npm và React Native CLI để phát triển và kiểm thử ứng dụng Các ưu điểm baogồm tái sử dụng code, hiệu suất cao, hot reloading, và cộng đồng lớn Tuy nhiên, có

độ dốc học cao và cần kiến thức về native modules và thư viện UI bên thứ ba Sosánh với các framework khác như Native Development, Flutter, Xamarin, Ionic.Demo ứng dụng quản lý thông tin sinh viên để minh họa kiến trúc, công nghệ vàthách thức trong quá trình phát triển Tổng kết, React Native là một framework linhhoạt và mạnh mẽ giúp xây dựng ứng dụng di động đa nền tảng hiệu quả

MỤC LỤC

DANH MỤC HÌNH VẼ vi

DANH MỤC CÁC CHỮ VIẾT TẮT viii

CHƯƠNG 1 MỞ ĐẦU VÀ TỔNG QUAN ĐỀ TÀI 1

1.1 Lịch sử hình thành và phát triển của React Native 1

1.2 Vòng Đời của React Native (React Native Lifecycle) 2

1.2.1 Mounting 2

1.2.2 Updating 3

1.2.3 Unmounting 3

1.3 Quản lý trạng thái trong React Native (State Management) 3

1.3.1 Sử dụng State nội bộ của Component 3

1.3.2 Sử dụng Hooks 4

1.3.3 Context API 4

1.3.4 Quản lý trạng thái toàn cục với Redux 4

1.3.5 Quản lý trạng thái với MobX 5

1.3.6 Sử dụng Recoil 5

1.4 Core Components và Native Components 6

1.4.1 Core Components 6

1.4.2 Native Components 10

1.5 Thiết lập môi trường phát triển 10

1.6 Workflow 10

1.7 UI và Tương tác 12

1.8 Debugging 13

1.9 Testing 14

1.10 Hiệu năng 15

1.11 JavaScript Runtime 17

1.12 Native Module 17

1.13 Ưu và Nhược điểm của React Native 19

1.13.1 Ưu điểm 19

1.13.2 Nhược điểm 21

1.14 So sánh với các framework khác 21

CHƯƠNG 2 XÂY DỰNG ỨNG DỤNG DEMO 24

2.1 Giới thiệu chung 24

2.2 Công nghệ 24

2.3 Thiết kế ứng dụng 24

2.3.1 Lược đồ Use-case 24

2.3.2 Sơ đồ tuần tự 25

2.4 Giao diện ứng dụng 35

CHƯƠNG 3 BẢNG PHÂN CÔNG CÔNG VIỆC 42

TÀI LIỆU THAM KHẢO 43

DANH MỤC HÌNH VẼ

Hình 1.1 Sơ đồ vòng đời 2

Hình 2.1 Lược đồ Use-case 25

Hình 2.2 Sơ đồ tuần tự Đăng nhập 26

Hình 2.3 Sơ đồ tuần tự Thay đổi ảnh đại diện 27

Hình 2.4 Sơ đồ tuần tự Xem danh sách người dùng 27

Hình 2.5 Sơ đồ tuần tự Thêm người dùng mới 27

Hình 2.6 Sơ đồ tuần tự Xóa người dùng 28

Hình 2.7 Sơ đồ tuần tự Chỉnh sửa thông tin người dùng 28

Hình 2.8 Sơ đồ tuần tự Xem lịch sử đăng nhập của người dùng 29

Hình 2.9 Sơ đồ tuần tự Xem danh sách sinh viên 29

Hình 2.10 Sơ đồ tuần tự Thêm sinh viên 30

Hình 2.11 Sơ đồ tuần tự Xóa sinh viên 30

Hình 2.12 Sơ đồ tuần tự Chỉnh sửa thông tin sinh viên 31

Hình 2.13 Sơ đồ tuần tự Sắp xếp danh sách sinh viên 32

Hình 2.14 Sơ đồ tuần tự Tìm sinh viên 32

Hình 2.15 Sơ đồ tuần tự Xem thông tin chi tiết sinh viên 33

Hình 2.16 Sơ đồ tuần tự Nhập danh sách sinh viên bằng file csv 34

Hình 2.17 Sơ đồ tuần tự Xuất danh sách sinh viên ra file csv 34

Hình 2.18 Giao diện đăng nhập 35

Hình 2.19 Giao diện tổng quan 36

Hình 2.20 Giao diện chỉnh sửa thông tin cá nhân 37

Hình 2.21 Giao diện thêm user 38

Hình 2.22 Giao diện cá nhân và lịch sử đăng nhập 39

Hình 2.23 Giao diện xóa, sửa user 39

Hình 2.24 Giao diện cá nhân sinh viên 40

Hình 2.25 Giao diện tìm kiếm và các chức năng liên quan 41

DANH MỤC CÁC CHỮ VIẾT TẮT

UI User Interface

CHƯƠNG 1 MỞ ĐẦU VÀ TỔNG QUAN ĐỀ TÀI

1.1 Lịch sử hình thành và phát triển của React Native

React Native là một framework phát triển ứng dụng di động mã nguồn mởđược Facebook giới thiệu lần đầu vào năm 2015 Đây là một công cụ cho phép nhàphát triển xây dựng ứng dụng di động sử dụng JavaScript và React, ngôn ngữ lậptrình phổ biến trong cộng đồng phát triển web

Năm 2015, React Native được công bố lần đầu vàn tháng 3 năm 2015 Nó làmột phần mở rộng của React, mục tiêu là cho phép phát triển xây dựng ứng dụng diđộng đa nền tảng bằng cách sử dụng cùng một mã nguồn JavaScript

Năm 2016, sau khi ra mắt, React Native nhanh chóng thu hút sự quan tâmcủa cộng đồng phát triển Facebook và cộng đồng phát triển cải tiến framework, bổsung tính năng mới và sửa đổi

Năm 2017, React native trở thàn một trong những coong cụ phát triển ứngdụng di động pổ biến nhất trên thể giới Được sử dụng bởi nhiều công ty công nghệlớn và start up Community cũng phát triển mạnh mẽ với nhiều thư và công cụ hỗtrợ đặc biệt

Năm 2018, Facebook và cộng đồng tiếp tục cải tiến và phát triển những bảncập nhật đáng chú ý bao gồm hiệu suất cải thiện, bổ sung tính năng mới như ReactHook và phiên bản cải tiếng của React Navigation

Năm 2019, Microsoft công bố một framework gọi là React native forwindows để hỗ trợ phát triển ứng dụng Window10 bằn React Native Điều này mởrộng khả năng sử dụng của React native từ ứng dụng di động sau sang phát triểnmáy tính

Từ năm 2020 đến năm 2022, Tiếp tục các bản cập nhật, cải tiến về hiệu suất

và tính năng React Native vẫn duy trì vị thế mạnh mẽ trong cộng đồng phát triểnứng dụng di động, với sự hỗ trợ từ Facebook và các công ty công nghệ khác

1.2 Vòng Đời của React Native (React Native Lifecycle)

Hình 1.1 Sơ đồ vòng đờiVòng đời của một component trong React Native có ba giai đoạn chính:Mounting (Gắn kết), Updating (Cập nhật), và Unmounting (Gỡ bỏ) Dưới đây là chitiết về từng giai đoạn

1.2.1 Mounting

Mounting là quá trình một component được tạo ra và chèn vào cây DOM

 constructor(props): Được gọi khi component được khởi tạo Đây là nơi để thiếtlập state ban đầu và gắn kết các phương thức

 static getDerivedStateFromProps(props, state): Được gọi trước khi render, cảkhi mounting và updating Dùng để cập nhật state dựa trên sự thay đổi củaprops

 render(): Phương thức bắt buộc phải có, trả về cấu trúc JSX để hiển thịcomponent

 componentDidMount(): Được gọi ngay sau khi component được chèn vàoDOM Dùng để thực hiện các thao tác như gọi API, thiết lập subscription, hoặckhởi tạo các thư viện bên ngoài.

1.2.2 Updating

Updating là quá trình khi component nhận các props mới hoặc state thay đổi

 static getDerivedStateFromProps(props, state): Được gọi trước khi render,giống như trong giai đoạn Mounting

 shouldComponentUpdate(nextProps, nextState): Quyết định liệu component cócần render lại không Mặc định trả về true

 render(): Giống như trong giai đoạn Mounting, trả về cấu trúc JSX

 getSnapshotBeforeUpdate(prevProps, prevState): Được gọi ngay trước khi cậpnhật DOM Kết quả trả về sẽ được truyền vào componentDidUpdate

 componentDidUpdate(prevProps, prevState, snapshot): Được gọi ngay sau khicập nhật DOM Thực hiện các thao tác sau khi DOM đã được cập nhật, như gọiAPI dựa trên thay đổi của props hoặc state

1.2.3 Unmounting

Unmounting là quá trình component bị gỡ bỏ khỏi cây DOM

 componentWillUnmount(): Được gọi ngay trước khi component bị gỡ bỏ vàhủy bỏ Thực hiện các thao tác dọn dẹp như hủy subscription, clear timer, hoặcgiải phóng tài nguyên

1.3 Quản lý trạng thái trong React Native (State Management)

1.3.1 Sử dụng State nội bộ của Component

State nội bộ: Đây là phương pháp cơ bản nhất, sử dụng state nội bộ củacomponent để quản lý dữ liệu và cập nhật UI State nội bộ thích hợp cho cáccomponent đơn giản và không cần chia sẻ dữ liệu với các component khác

Quy trình: State được khởi tạo trong constructor (đối với class component)hoặc sử dụng hook useState (đối với functional component) Khi state thay đổi,React sẽ tự động render lại component để hiển thị dữ liệu mới.

useContext: Hook useContext cho phép component truy cập vào dữ liệutrong Context mà không cần truyền props qua nhiều cấp

1.3.3 Context API

Context API: Context API được sử dụng để truyền dữ liệu qua nhiều cấp củacây component mà không cần truyền props ở từng cấp Nó phù hợp cho dữ liệuglobal như theme, ngôn ngữ hoặc thông tin người dùng

Tạo Context: Đầu tiên, bạn tạo một Context với React.createContext().Provider: Context Provider bao bọc các component con và cung cấp giá trịcho Context

Consumer: Component con sử dụng Context Consumer hoặc hookuseContext để truy cập vào giá trị từ Context

1.3.4 Quản lý trạng thái toàn cục với Redux

Redux: Redux là một thư viện quản lý trạng thái toàn cục mạnh mẽ, phù hợpcho các ứng dụng lớn và phức tạp Redux tạo một store trung tâm để quản lý tất cảstate của ứng dụng, đảm bảo tính nhất quán và dễ dàng theo dõi trạng thái

Store: Store là nơi lưu trữ toàn bộ state của ứng dụng Bạn chỉ có một storeduy nhất trong ứng dụng Redux.

Actions: Actions là các đối tượng chứa thông tin về hành động (action) và dữliệu cần cập nhật Mỗi action có một thuộc tính type và các payload cần thiết.Reducers: Reducers là các hàm thuần túy nhận vào state hiện tại và action,sau đó trả về state mới Reducers xác định cách state của ứng dụng thay đổi để đápứng actions

Middleware: Middleware (như redux-thunk hoặc redux-saga) giúp xử lý cáchành động bất đồng bộ, như gọi API hoặc thực hiện các tác vụ phức tạp trước khihành động tới reducer

Provider: Để sử dụng Redux trong React Native, bạn bao bọc ứng dụng bằngProvider từ react-redux, truyền vào store để các component con có thể kết nối vớiRedux store

1.3.5 Quản lý trạng thái với MobX

MobX: MobX là một thư viện quản lý trạng thái khác, cung cấp cách tiếpcận reactivity và observable MobX dễ sử dụng và thích hợp cho các ứng dụng cầnphản ứng nhanh với các thay đổi của trạng thái

Observable State: State được đánh dấu là observable, khi thay đổi sẽ tự độngcập nhật các component phụ thuộc

Actions: Actions là các phương thức thay đổi observable state

Reactions: Reactions là các hàm tự động chạy khi observable state thay đổi,giúp cập nhật UI hoặc thực hiện các tác vụ liên quan

1.3.6 Sử dụng Recoil

Recoil: Recoil là một thư viện mới của Facebook dành cho quản lý trạng tháitrong React Nó đơn giản và dễ sử dụng, cho phép quản lý state với các atoms vàselectors

Atoms: Atoms là đơn vị state cơ bản, có thể được chia sẻ và sử dụng bởinhiều component

Selectors: Selectors là các hàm thuần túy dựa trên state, cho phép tính toánhoặc biến đổi state.

1.4 Core Components và Native Components

React Native là một khung mã nguồn mở để xây dựng các ứng dụng Android

và iOS bằng React và các khả năng gốc của nền tảng ứng dụng Với React Native,bạn sử dụng JavaScript để truy cập các API của nền tảng cũng như để mô tả giaodiện và hành vi của giao diện người dùng của bạn bằng cách sử dụng các thànhphần React: các gói mã có thể tái sử dụng, có thể lồng nhau Bạn có thể tìm hiểuthêm về React trong phần tiếp theo Nhưng trước tiên, hãy đề cập đến cách cácthành phần hoạt động trong React Native

1.4.1 Core Components

Core Components là các thành phần cốt lõi của React Native, cung cấp cácthành phần giao diện người dùng (UI) cơ bản như View, Text, Image, TextInput,ScrollView và nhiều hơn nữa Những thành phần này là các thành phần được xâydựng sãn sử dụng trong mọi ứng dụng React Native và được tối ưu hoá cho hiệusuất và tính di động

Component Name, mỗi Core Component có tên dịnh dạng duy nhất, cho biếtloại thành phần mà nó đại diện (ví dụ: View, Text, Image, TextInput,

ScrollView, …)

 View:

 View là component cơ bản để chứa các component khác

 View có thể được sử dụng để tạo bố cục cho giao diện ứng dụng của bạn

 View có thể có các thuộc tính như style, flexDirection, justifyContent,alignItems, và children

 Text:

 Text hiển thị văn bản trên màn hình

 Text có thể có các thuộc tính như style, fontSize, fontWeight, color,fontFamily, và children

 Image:

 Image hiển thị hình ảnh trên màn hình

 Image có thể có các thuộc tính như source, style, resizeMode, và

accessibilityLabel

 Button:

 Button là nút cho phép người dùng thực hiện hành động

 Button có thể có các thuộc tính như title, onPress, style, disabled, vàaccessibilityLabel

 ScrollView:

 ScrollView cho phép cuộn nội dung trong một vùng chứa

 ScrollView có thể có các thuộc tính như contentContainerStyle, horizontal,showsHorizontalScrollIndicator, showsVerticalScrollIndicator, vàalwaysBounceVertical

 ListView:

 ListView hiển thị danh sách các mục có thể cuộn

 ListView có thể có các thuộc tính như data, renderItem, renderSeparator,initialScrollIndex, và contentContainerStyle

 TextInput:

 TextInput cho phép người dùng nhập văn bản

 TextInput có thể có các thuộc tính như value, onChangeText, style,placeholder, keyboardType, secureTextEntry, autoCompleteType,autoCapitalize, autoCorrect, và multiline

 TouchableOpacity:

 TouchableOpacity là một component cho phép bạn tạo các vùng chạm có thểtương tác

 TouchableOpacity có thể có các thuộc tính như onPress, activeOpacity, style,disabled, và accessibilityLabel.

 TouchableWithoutFeedback có thể có các thuộc tính như onPress,

onLongPress, activeOpacity, style, disabled, và accessibilityLabel

 ImageBackground hiển thị hình ảnh làm nền cho một component khác

 ImageBackground có thể có các thuộc tính như source, style, resizeMode,and accessibilityLabel

 ProgressBar:

 ProgressBar là một component hiển thị tiến trình của một tác vụ

 ProgressBar có thể có các thuộc tính như style, progress, color, indeterminate,and accessibilityLabel

 FlatList:

 FlatList là một component hiệu quả hơn ListView để hiển thị danh sách cácmục

 FlatList có thể có các thuộc tính như data, renderItem, itemKeyExtractor,initialScrollIndex, contentContainerStyle, và onRefresh.

 SectionList:

 SectionList là một component để hiển thị danh sách các mục được chia thànhcác phần

 SectionList có thể có các thuộc tính như data, renderItem,

renderSectionHeader, renderSectionFooter, sectionKeyExtractor,

itemKeyExtractor, initialScrollIndex, contentContainerStyle, và onRefresh

 Swiper:

 Swiper là một component cho phép bạn tạo các trang cuộn ngang

 Swiper có thể có các thuộc tính như style, loop, showsPagination,

paginationStyle, dotColor, activeDotColor, and onIndexChange

State là trạng thái, cho phép một số Core Component có khả năng lưu trữtrạng thái nội bộ Khi trạng thái thay đổi, Component có thể render lại để phản ánhcác thay đổi đó

.Lifecycle Methods, một số Core Components có các phương thức vòng đời,cho phép thực hiện các hành động trong quá trình mà Component được tạo ra, cậpnhật hoặc huỷ bỏ

Children Components, một số Core Component có thể chứa các CoreComponents khác, tạo thành một câu thành phần Các thành phần con này có thểđược truyền vào như là các thành phần con của Props hoặc được bổ sung trực tiếptrong JSX.

Event Handling, một Core Component có thể có các sự kiện được kích hoạtkhi người dùng tương tác với nó ví dụ như Text Input, Button, Bằng cách sửdụng các props như ‘onPress’, ‘onChangeText’, … Bạn có thể xử lý các sự kiện này

để thực hiện một hành động nhất định

1.4.2Native Components

Native Components là các thành phần để viết hoặc sử dụng từ ngôn ngữ lậptrình cụ thể của nền tảng di động đang phát triển, chẳng hạn như Java hoặc Kotlincho Android và Swift hoặc Objective-C cho iOS Các thành phần này cho phép truycập tính năng cụ thể của hệ điều hành thiết bị như camera, định vị GPS, sensor, …

và tương tác với chúng trong ứng dụng thông qua giao diện của React Native thôngqua cơ chế gọi là native module

1.5 Thiết lập môi trường phát triển

Thiết lập môi trường phát triển trong React Native là bước quan trọng để bắtđầu phát triển ứng dụng di động Nếu là một người mới, cách dễ nhất để bắt đầu làvới Expo Go Expo là một bộ công cụ và dịch vụ được xây dựng xung quanh ReactNative và, trong khi nó có nhiều tính năng, tính năng phù hợp nhất đối với chúng tôingay bây giờ là nó có thể giúp bạn viết một ứng dụng React Native trong vòng vàiphút Bạn sẽ chỉ cần một phiên bản gần đây của Node.js và điện thoại hoặc trình giảlập Nếu bạn muốn dùng thử React Native trực tiếp trong trình duyệt web của mìnhtrước khi cài đặt bất kỳ công cụ nào, bạn có thể dùng thử Snack Cài đặt các phụthuộc sẽ cần như Node, giao diện dòng lệnh React Native, JDK và Android studio

1.6 Workflow

Chạy ứng dụng React Native trên một thiết bị thực tế trước khi phát hành làmột ý tưởng tốt, vì điều này giúp bạn kiểm tra và đảm bảo rằng ứng dụng của bạnhoạt động đúng trên môi trường thực tế và đối với nhiều loại thiết bị khác nhau.Fast Refresh là một tính năng của React Native giúp phục hồi nhanh chóng(hoặc cập nhật nhanh chóng) trạng thái của ứng dụng React Native mà không cầnphải làm lại toàn bộ quá trình khởi chạy ứng dụng Khi bạn phát triển ứng dụngReact Native, mỗi khi bạn thay đổi mã nguồn của các component, React Native sẽ

tự động cập nhật ứng dụng trên thiết bị hoặc máy ảo của bạn để phản ánh các thayđổi mà không cần phải khởi động lại ứng dụng từ đầu Điều này giúp tiết kiệm thờigian và nâng cao trải nghiệm phát triển của bạn Fast Refresh thường được kíchhoạt mặc định trong môi trường phát triển của React Native và có thể được sử dụngtrong cả iOS và Android Để sử dụng Fast Refresh, bạn chỉ cần chỉnh sửa mã nguồn

và lưu lại, sau đó React Native sẽ tự động cập nhật ứng dụng của bạn

Metro là một công cụ được sử dụng trong quá trình phát triển ứng dụngReact Native để xây dựng mã JavaScript và tài nguyên của bạn Nó là một trìnhbiên dịch JavaScript mạnh mẽ và hiệu quả, được thiết kế đặc biệt để phục vụ choviệc phát triển ứng dụng di động Các chức năng chính của Metro bao gồmBundling (Gói hóa): Metro có khả năng gói hóa mã JavaScript và tài nguyên củabạn thành các bundle tối ưu hóa để sử dụng trong quá trình chạy ứng dụng ReactNative Điều này giúp giảm thiểu kích thước của bundle và tối ưu hóa hiệu suất khiứng dụng của bạn được chạy trên thiết bị Hot Reloading (Nạp lại nhanh): Metro hỗtrợ tính năng nạp lại nhanh, cho phép bạn thấy các thay đổi trong mã nguồn củamình ngay lập tức trên thiết bị hoặc máy ảo mà không cần khởi động lại ứng dụnghoặc môi trường phát triển Source Maps (Bản đồ nguồn): Metro tạo ra các bản đồnguồn để liên kết mã JavaScript được biên dịch với mã nguồn gốc của bạn Điềunày giúp bạn dễ dàng gỡ lỗi và theo dõi mã JavaScript của mình trong quá trìnhphát triển Asset Management (Quản lý tài nguyên): Metro cũng quản lý và tối ưuhóa các tài nguyên như hình ảnh, âm thanh và font chữ được sử dụng trong ứngdụng của bạn, giúp tối ưu hóa kích thước của ứng dụng và tăng hiệu suất tải

Trong React Native, "Using Libraries" (Sử dụng thư viện) là quá trình tíchhợp các thư viện bên thứ ba vào ứng dụng của bạn để mở rộng chức năng và khảnăng của nó Mặc dù React Native cung cấp một bộ sẵn có các Core Components vàAPIs để sử dụng trong ứng dụng của bạn, nhưng đôi khi chúng không đáp ứng đủyêu cầu của bạn Trong trường hợp này, bạn có thể sử dụng thư viện từ cộng đồngReact Native để bổ sung các chức năng và thành phần cụ thể mà bạn cần.

TypeScript là một ngôn ngữ mở rộng của JavaScript bằng cách thêm khaibáo kiểu (type definitions) Trong một dự án React Native, TypeScript là một lựachọn phổ biến cho việc viết mã do nó cung cấp các tính năng như kiểm tra kiểu tĩnh,

tự động hoàn thành mã, và cải thiện tính tương tác của mã

1.7 UI và Tương tác

Giao diện người dùng bao gồm các yếu tố như bố cục, màu sắc, kiểu chữ vàhình ảnh UI đóng vai trò quan trọng trong việc thu hút người dùng và mang đến trảinghiệm sử dụng tốt

Tương tác là cách thức người dùng tương tác với ứng dụng, bao gồm cáchành động như chạm, vuốt, kéo và nhấp chuột Tương tác hiệu quả giúp người dùng

dễ dàng điều hướng và hoàn thành các tác vụ trong ứng dụng

React Native cung cấp nhiều công cụ và thư viện để xây dựng UI vàInteraction phong phú và hấp dẫn cho ứng dụng di động Dưới đây là một số điểmchính về UI và Interaction trong React Native:

 Sử dụng các thành phần UI gốc: React Native cho phép bạn sử dụng các thànhphần UI gốc của Android và iOS, giúp đảm bảo ứng dụng của bạn có giao diện

và cảm nhận giống như ứng dụng gốc trên mỗi nền tảng

 Tạo UI tùy chỉnh: Ngoài các thành phần UI gốc, React Native cũng cho phépbạn tạo các thành phần UI tùy chỉnh bằng JavaScript Điều này giúp bạn tạo ragiao diện độc đáo và phù hợp với nhu cầu cụ thể của ứng dụng

 Xử lý các sự kiện tương tác: React Native cung cấp một hệ thống xử lý sự kiệnmạnh mẽ cho phép bạn phản hồi các hành động của người dùng Bạn có thể sử

dụng các trình xử lý sự kiện để cập nhật trạng thái ứng dụng và thay đổi giaodiện khi người dùng tương tác với các yếu tố UI.

 Sử dụng các cử chỉ: React Native hỗ trợ nhiều cử chỉ phổ biến như chạm, vuốt,kéo và nhấp chuột Bạn có thể sử dụng các cử chỉ để tạo ra các tương tác trựcquan và hấp dẫn trong ứng dụng của mình

 Hoạt động động: React Native cho phép bạn tạo ra các hoạt động động, chẳnghạn như chuyển đổi và hiệu ứng Các hoạt động động có thể giúp cải thiện trảinghiệm người dùng và làm cho ứng dụng của bạn trở nên hấp dẫn hơn

 Thư viện bên thứ ba: Có rất nhiều thư viện bên thứ ba có sẵn cho React Nativegiúp bạn xây dựng UI và Interaction phong phú hơn Các thư viện này cung cấpcác thành phần UI tùy chỉnh, hiệu ứng động và các tính năng khác

Ví dụ về UI và Interaction trong React Native:

Một ứng dụng danh sách có thể sử dụng các thành phần UI như ListViewhoặc RecyclerView để hiển thị danh sách các mục Người dùng có thể chạm vào cácmục để xem chi tiết

Một ứng dụng bản đồ có thể sử dụng các thành phần UI như MapView đểhiển thị bản đồ Người dùng có thể vuốt và kéo để di chuyển bản đồ và nhấp vàocác điểm đánh dấu để xem thông tin chi tiết

Một ứng dụng trò chơi có thể sử dụng các thành phần UI như Button vàImage để hiển thị các nút và hình ảnh trò chơi Người dùng có thể chạm vào các nút

để điều khiển trò chơi và tương tác với các đối tượng trên màn hình

1.8 Debugging

Debugging (gỡ lỗi) là quá trình xác định và sửa chữa các lỗi trong code.Trong React Native, debugging có thể hơi khác so với các ngôn ngữ lập trình truyềnthống vì nó không hỗ trợ debugging trực tiếp trên IDE Tuy nhiên, vẫn có nhiềucách hiệu quả để debug ứng dụng React Native của bạn

Các cách debug trong React Native:

Dev Menu: React Native cung cấp một Dev Menu tích hợp sẵn cho phép bạnkiểm tra và debug ứng dụng của mình Bạn có thể truy cập Dev Menu bằng cách:

 Lắc thiết bị của bạn (chỉ iOS Simulator)

 Sử dụng các phím tắt bàn phím: iOS Simulator: Cmd + D

 Android emulators: Cmd + M (macOS) hoặc Ctrl + M (Windows/Linux)

 Chạy lệnh adb shell input keyevent 82 trên Android (82 là key code củaMenu button)

React Native Debugger: React Native Debugger là một công cụ debug mạnh

mẽ cho phép bạn thiết lập điểm dừng (breakpoints), kiểm tra các biến, và theo dõiluồng thực thi của code Bạn có thể cài đặt React Native Debugger thông qua npmhoặc yarn và kích hoạt nó trong Dev Menu

Console logs: Sử dụng câu lệnh console.log để in ra các giá trị biến và trạngthái ứng dụng của bạn tại các điểm khác nhau trong code Điều này giúp bạn theodõi luồng thực thi và xác định nơi sự cố xảy ra

React Developer Tools: Nếu bạn đang sử dụng Chrome DevTools để debugứng dụng React Native trên web, bạn có thể tận dụng React Developer Tools đểkiểm tra component hierarchy, props, và state của ứng dụng

Error messages: Đọc kỹ các thông báo lỗi được hiển thị trên màn hình hoặctrong console Chúng thường cung cấp manh mối quan trọng về bản chất của lỗi

Linters và static code analysis: Sử dụng các công cụ linters và static codeanalysis để giúp bạn bắt lỗi cú pháp và các vấn đề tiềm ẩn khác trong code trước khichạy ứng dụng

1.9 Testing

Testing (kiểm thử) là một phần quan trọng trong việc xây dựng các ứng dụngReact Native chất lượng cao Kiểm thử giúp đảm bảo rằng ứng dụng của bạn hoạtđộng như mong đợi, giảm thiểu lỗi và regression bugs (lỗi quay trở lại), và cải thiệntính ổn định tổng thể.

Các loại hình testing trong React Native:

 Unit testing: Kiểm thử các đơn vị code nhỏ nhất, chẳng hạn như hàm vàcomponent Unit testing giúp đảm bảo các đơn vị code này hoạt động chínhxác theo logic riêng của chúng

 Integration testing: Kiểm thử cách các component khác nhau tương tác vớinhau Integration testing giúp đảm bảo rằng các component giao tiếp hiệuquả và không có vấn đề về đầu vào/đầu ra

 End-to-end testing (E2E testing): Kiểm thử toàn bộ luồng sử dụng của ứngdụng, từ góc nhìn của người dùng E2E testing giúp đảm bảo rằng ngườidùng có thể hoàn thành các tác vụ mong muốn mà không gặp sự cố

Các framework testing phổ biến trong React Native:

 Jest: Jest là một framework testing phổ biến được tích hợp sẵn với ReactNative Jest cung cấp các tính năng như mocking (giả lập), snapshot testing(kiểm thử ảnh chụp nhanh), và code coverage (phủ sóng code)

 Mocha: Mocha là một framework testing JavaScript khác có thể được sửdụng với React Native Mocha cung cấp một cú pháp linh hoạt cho việc viếtcác test case (trường hợp kiểm thử)

 Enzyme: Enzyme là một thư viện testing giúp bạn render và thao tác với cáccomponent React tách biệt khỏi DOM Enzyme thường được sử dụng kếthợp với Jest hoặc Mocha để kiểm thử các component React Native

 React Testing Library: React Testing Library là một thư viện testing cấpcao hơn giúp bạn viết các test case tập trung vào hành vi của componentthay vì chi tiết về cách component được render

1.10 Hiệu năng

Performance (hiệu năng) là một yếu tố quan trọng ảnh hưởng đến trảinghiệm người dùng của ứng dụng React Native Một ứng dụng có hiệu năng tốt sẽchạy mượt mà, phản hồi nhanh với các tương tác của người dùng, và không bị giậtlag.

Mục tiêu về hiệu năng trong React Native:

 Giữ tốc độ khung hình (frame rate) ở mức 60 FPS: Điều này đảm bảo hìnhảnh hiển thị mượt mà và không bị giật lag

 Giảm thiểu thời gian phản hồi (response time): Ứng dụng nên phản hồinhanh với các tương tác của người dùng để tạo cảm giác nhanh nhẹn vàmượt mà

 Giảm thiểu thời gian khởi động (startup time): Ứng dụng nên khởi độngnhanh chóng để cải thiện trải nghiệm người dùng

 Giữ mức sử dụng CPU và bộ nhớ ở mức thấp: Điều này giúp cải thiện tuổithọ pin của thiết bị và ngăn chặn các vấn đề về hiệu năng khác

Các chiến lược cải thiện hiệu năng trong React Native:

 Chọn các thành phần UI hiệu quả: Sử dụng các thành phần UI gốc của nềntảng (Android hoặc iOS) thay vì các thành phần tùy chỉnh phức tạp

 Tránh render lại không cần thiết: Sử dụng techniques như React.memo,shouldComponentUpdate, và PureComponent để tránh render lại cáccomponent không cần thiết

 Optimize image loading: Sử dụng thư viện để giảm kích thước ảnh và tảiảnh theo yêu cầu thay vì tải tất cả ảnh cùng một lúc

 Lazy loading: Trì hoãn việc tải các component hoặc dữ liệu cho đến khichúng thực sự cần thiết

 Giảm thiểu các tác vụ nặng trên luồng chính (main thread): Các tác vụ nặngnhư thao tác DOM hoặc gọi API nên được thực hiện trên luồng nền(background thread) để tránh làm chặn luồng chính và gây ra giật lag