Tìm hiểu và ứng dụng react native

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI Tìm hiểu và ứng dụng React Native Giảngviênhướngdẫn: ThầyHuỳnhTuấn Anh Sinhviênthựchiện

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN CHUYÊN NGÀNH

ĐỀ TÀI Tìm hiểu và ứng dụng React Native

Giảngviênhướngdẫn: ThầyHuỳnhTuấn Anh

Sinhviênthựchiện:

• Vương Bảo Minh - 17520768

• NguyễnVĩnhDuyệt - 17520411

1

LỜI CẢM ƠN

TrântrọnggửilờicảmơnthầyHuỳnhTuấn Anh đãtạođiềukiệnchochúngemcócơhộiđượcthựchiệnđềtàinày.

Chỉtrongmộtthờigianngắn, nhưngnhờsựchỉdẫnnhiệttìnhcủathầy, chúngemđãtiếpthuđượcnhữngkiếnthứcquantrọngđểcóthểxâydựngđượcứngdụ

Chânthànhcảmơnthấyđãhướngdẫnchúngemtronghọckìvừa qua.

Tuyđồánvẫncònnhiềuthiếusótnhưngnhờcósựchỉdẫncủathầymàchúngem đãtiếnbộhơnrấtnhiều, cũngnhưcóhướngpháttriểndựántrongtươnglại.

Mộtlầnnữa, chúngemxincảmơnthầy

<Nhómpháttriển>

<TpHCM, ngày 15 tháng 1 năm 2021>

2

NHẬN XÉT CỦA GIẢNG VIÊN

3

4

I Tổngquanvề React Native

1 Giớithiệuchungvề React Native

- React Native làmộtjavascript framework đượcpháttriểnbởi Facebook

- React Native đượchướngtớiviệcpháttriểnứngdụng di platform) chocả android vàios

độngđanềntảng(cross React Native đượcpháttriểndựatrênmột web framework của Facebook gọilàReact

- Ngônngữsửdụngđểlậptrìnhtrong React Native làJavascriptvà JSX

- Mụctiêucủa React Native làgiúptốiưuhiệunăngcủa Hybrid appvàtốigiảnsốlượngngônngữ native di động

2 Lịchsửhìnhthành React Native

lầmlớnnhấtcủachúngtôikhilàmcông ty làdựatrênquánhiều HTMLhơnlàmôitrườngpháttriểngốc” Ônghứarằng Facebook sẽsớmcungcấptrảinghiệm

lạitrởnênphổbiếnvàmạnhmẽtronggiớilậptrình?

- Hot reloading, thứmànhữngứngdụng Native Code khôngcó

- Code mộtlần, chạynhiềuchỗ, nềntảng Cross-Platform cóthểchạytrêncả

6

- Facebook, instagramlà 2 ứngdụngmượtmàđượcxâydựngbằng React Native

lànềntảngtốtnhấtcholậptrìnhviênứngdụng

- Đằngsau React Native làmột Facebook đangrấtmạnhchốnglưng, đólàlý dotạisao React Native được tin tưởngsẽlànềntảngthốngtrịtrongthếgiớikhichỉcóNative App và Hybrid App

4 Đặcđiểmnổibậtcủa React Native

- React Native tíchhợp 2 thread là Main thread và JS thread choứngdụngmobile:

đảmnhiệmvaitròcậpnhậtgiaodiệnngườidùngvàxửlítươngtácngườidùngtron

7

gquátrìnhsửdụng app.

+ JS thread sẽthựcthivàxửlí code javascript

- Hai thread sẽtươngtácvớinhauthông qua mộtcầunối(React Native Bridge)chophépchúnggiaotiếpmàkhôngphụthuộclẫnnhau, chuyểnđổidữliệutừ threadnày sang thread khác

- React Native sẽ render native UI component phụthuộcvàonềntảng diđộngmàngườidùngđangsửdụngnêngiaodiệnứngdụngsẽgầngũivớinhiềuloạinguờidùngkhácnhau

- React Native sửdụng JSX đểkếthợpJavascriptvà XML-markup syntax đểtạo

ra giaodiện Ngườilậptrìnhcóthểviếttấtcảchỉtrongmột fileduynhấtchứkhôngcầnphải chia ra nhiều file HTML, CSS, JS nhưlậptrình web

- Nếunhưkhi design trongứngdụng web chúng ta dùngcssthìtrong React Nativechúng ta cũngcómộtthứtươngtựgọilà flexbox layout model đểtùychỉnhthiếtkếcomponent

- Trong React Native, chúng ta sẻ chia nhỏứngdụng ra thànhnhiều component.Đâylàthànhphầncơbảnnhấttrongmọiứngdụng react native vàmọithứtrong appđềuđượccấuthànhtừđó:

- Mộtsốloại component phổbiếnthườngdùngtrong react native:

+ View: Là component cơbảnnhất, dùngđểlàmkhunghiểnthịchocáccomponent kháctrênmànhình

+ Text: Là component dùngđểchứakítựxuấthiệntrênmànhình

+ Image: Là component giúpthêmhìnhảnhtừtrên Internet hoặctừ localvàoứngdụng React Native

+ Touchable Opacity: Làmột component màchúng tacóthểnhấnvàođểtươngtácvàthựchiệnmộthàmgìđó

+ ScrollView:Làmột scrolling component cóthểchứanhiều component vàview

+ TextInput: Là component chophépngườidùngnhậpliệutrênmànhình

+ Button: Là component tươngtựnhưTouchalbe Opacitynhưngngườidùngkhôngthểtự do custom theo ý mình

+ Status Bar: Là component sửdụngđểkiểmsoátthanhtrạngtháitrênứngdụng

8

- Trong qua trìnhquảnlí component, chúng ta sẽgặpphải 2 kháiniệmlà props vàstate:

+ Props: Viếttắtcủa properties

● Props dùngđểtruyềndữliệutừ component cha xuống component con

● Khi truyềndữliệu qua props, component conchỉđượcđọcvàkhôngđượcphépthayđổinó

● Điềunàykhiếnchodùchúng ta sửdụng component ởbấtkìđâucũngsẽcóchung 1 output khinhậpcùng 1 input

=>Giúpkiểmsoát component tốthơn

+ State: Nếunhư props đượctruyềngiátrịtừbênngoàivào component, statelạilàdữliệunộibộcủa component

● Bấtcứkhinàongườidùngthayđổigiátrịtrong component thìchúng tađềucóthểdùng state đểcậpnhậtlại

● Khi gọihàmSetStatethì React Native sẽ render lạigiátrịtrongcomponent

5 Nhượcđiểmcủa React Native

- Chỉhỗtrợ 2 nềntảng iOS và Android, Windows vàlinuxchưacó official support từReact Native team

- Khôngthể build đượcứngdụngquáphứctạpnhư native

- Khótiếpcận (theonhiều developer nhậnxét)

- Chưacó IDE hỗtrợ (IDE dànhriêngcho React Native chưađược release)

- Cầnbiết 1 ngônngữ Native

- React Native chưahỗtrợ push thẳnglên App Store hay Google Play

9

- Nhữnglầnphảithayđổi source lớnkhi upgrade phiênbản React.

6 So sánh React Native vànềntảng Cross-platform rấtmạnhhiện nay: Flutter

10

Ưuđiểm:

11

– Mạnhvề animation, performance app rấtcao.

– Giao tiếpgầnnhưtrựctiếpvới native

– Static language nhưngvới syntax hiệnđại, compiler linhđộnggiữa AOT (for archive, buildprod) và JIT (for development, hot reload)

– Cóthểchạyđượcgiảlập mobile ngaytrên web, tiệncho development Các metric measureperformance đượchỗtrợsẵngiúp developer kiểmsoáttốt performance của app

– Cóthểdùngđể build các bundle/framework gắnvà app native đểtăng performance

Nhượcđiểm:

– Bộ render UI được team author gầnnhưviếtlại, khôngliênquantới UI cósẵncủaFramework native, dẫnđến memory sửdụngkhánhiều

– Phảihọcthêmngônngữ DART, bloc pattern, DART Streaming

– Dùđã release 1.0 chínhthức, tuynhiêncònkhámới Mộtsố plugin rấtquantrọngnhư GoogleMap vẫncònđangpháttriển, chưa stable

– Là con cưngcủa Google, tuynhiênhãngdínhnhìuphốtvớithóiquen “quăng con giữachợ”nêncầncânnhắc

React Native:

Ưuđiểm:

– Thiênvề development/hotfix nhanh (hot reload, bundle injection)

– Sửdụng JS (quenthuộcvớinhiều developer) vàcóthể share business logic codebase vớifrontend (js)

– Back bởi Facebook, họdùngcho product củahọhàngngàynên developerhưởnglợikhánhiềutừđây

– Hiệntạiđãrấtnhiềuthưviện, gầnnhưđãrấtđầyđủchocácnhucầu app thôngdụng

Nhượcđiểm:

– Giao tiếpvới native thông qua các bridge, dễbị bottleneck nếukhôngđượckiểmsoáttốt.– Dùng JS nênmangtheocácđặcđiểmcủa JS: rấtdễlàmnhưngcũngdễsai, dẫntớikhó

12

maintain vềsau.

– HIệunăng animation làđiểmyếucủa RN, muốnlàmtốtphảilàmtừ native, tầngjschỉ call vào,setup views Tuynhiênvớicác interactive animation thìrấtđaukhổ

– Khôngthíchhợpchocác app cầnnănglựctínhtoáncao (hash, crypto, etc)

7 Liệu React Native cònsứccạnhtranhvới Flutter trongtươnglai?

- Tấtcảmọisự so sánhđềulàkhậpkhiễng, vì:

+ React Native cho ta mộthiệunăngtươngtựnhư “Native App Performance”

+ Mộtcộngđồnghỗtrợlớnmạnh

+ NhữnglậptrìnhviênsửdụngJavascriptvàmuốnlấnsân sang ứngdụng diđộngmộtcáchdễdàng

-> React Native sẽcònđượccậpnhậtvàpháttriểndàitrongtươnglaiđểcạnhtranhvớiFlutter từ Google, chúng ta sẽkhôngbiếtđượcnhữnggìsẽxảy ranhưngchắcchắnrằngmộtnềntảngtuyệtvờinhư React Native sẽkhông bao giờ “chết”bởimộtcộngđồnglậptrìnhviênlớnsẽluônđónggópvàduytrìđứa con tinhthầncủahọ

II Xâydựngứngdụngsửdụng React Native

1 Expo là gì? Sửdụng Expo khởichạyứngdụng

- Expo làmột framework dùngđểpháttriểnnhanhcácứngdụng React Native

13

Nógiốngnhư Laravel chocácnhàpháttriển PHP, hoặc Ruby on Railschocácnhàpháttriển Ruby Expo cungcấpmộtlớpnằmtrêncùngcủa React Native APIđểgiúpchúngdễsửdụngvàquảnlý.

Nócòncungcấpcáccôngcụgiúpbạndễdàngkhởitạovàkiểmthửcácứngdụng ReactNative Sau cùng, nócungcấpcácthànhphần UIvàcácdịchvụthườngchỉcósẵnkhibạncàiđặtmộtthànhphần React Native củabênthứba.Tấtcảđềuđượccungcấpthông qua Expo SDK

- Khởichạyứngdụng qua Expo:

B1: Vàothưmụcchứaứngdụng, tạiđườngdẫnthưmụcứngdụng, mởtrình “cmd”

‘

14

B2: Sửdụnglệnh “Yarn start” đểkhởichạyứngdụng, lúcnàytrình Yarn sẽhiệnlên 1 mã

QR, nếusửdụngmáyảothìkhôngcầnquantâm, nếusửdụngđiệnthoại tathựchiệnquétmã QR để Expo càiđặtvàmởứngdụng

15

2 Cáctínhnăngđượcxâydựng

2.1 Đăngkýtàikhoản.

16

2.2 Đăngnhậptàikhoản.

18

2.3 Quênmậtkhẩu.

20

2.4 Chọnloạibáo.

21

2.5 Hiểnthịdanhsáchbáotheothờigianthực.

22

2.6 Xem chi tiếttừngthông tin bàibáo.

23

3 Cấutrúcthưmụcdựán

25

4 Giớithiệu RSS đểsửdụnglấythông tin báo

- RSS làtừviếttắtcủa “Really Simple Syndication“,theonghĩatiếngviệtthìnólàđịnhdạngtàiliệu RSS

Nócótácdụnggiúpchongườidùngcóthểdễdàng update vàtìmkiếmthông tinbằngcáchtómtắtthông tin trongmộtđoạndữliệungắn RSSlàđịnhdạngtàiliệuphổbiếnvìsựthuậntiệncủanóvàđặcbiệtnóhướngngườidùngrấttốt

- Vềbảnchất, việcbạn parser data ra từ link feed đểhiểnthịtrên websitecũnghoàntoàntưongtựnhưkhibạngọilên serve đểlấy data vây Tuynhiênviệclấy data

từ RSS đểhiểnthịrấtđơngiản, nhanhchóngvàkhôngphụthuộcvào servernênbạnkhôngcần lo lắngvềvấnđề serve 500 hay các config vềapilằngnhằng,chỉcầncó link feed và internet, phầnhiểnthịrsssẽluônchạy Do đócóthểthấy RSSsẽgiúpchobạntiếtkiệmđượckhánhiềutàinguyênvà chi phí Khi bạndùng RSSthìbăngthôngcủabạnsẽđượcgiảiphóngnhiềuhơn, chi phítruyềnvàphânphốisẽíthơn

27

5 Sơđồ

5.1 Sơđồ Use-case:

29

5.2 Đặctả Use-case:

ID and Name: UC-1 Đăngnhập

Actors:

Không

Description: Use-case chophép actor đăngnhậpvàohệthống

Trigger: User muốnsửdụnghệthống

Preconditions: User đãcótàikhoản

TàikhoảnđãđượcđăngxuấtPostconditions: Đăngnhậpthànhcông

Normal Flow: 1 Actor mở úng dụng

2 Hệ thống hiểnthị form gồmtênđăngnhậpvàmậtkhẩu

3 Actor nhậpthông tin vànhấnđăngnhập

4 Hệthốngkiểmtratênđăngnhậpvàmậtkhẩu,xácnhậnlàđúngvàchophép actor đăngnhậpvàohệthống

ID and Name: UC-2 Đăngkí

Actors:

Không

Description: Use-case chophép actor tạotàikhoảnmới

Trigger: User bấmđăngkí

Preconditions: User chưacótàikhoản

TàikhoảncũđãđượcđăngxuấtPostconditions: Đăngkíthànhcông

Normal Flow: 1 Actor chọnchứcnăng “đăngkí”

2 Hệ thống hiểnthị form gồmcácthông tin đăngkí

3 Actor nhậpthông tin vàbấmđăngkí

4 Hệthốngkiểmtraxemtàikhoảnđãcó hay chưa,nếuchưasẽthôngbáođăngkíthànhcông, nếukhôngsẽbáolỗi

ID and Name: UC-3 Quênmậtkhẩu

Actors:

Không

Description: Use-case chophép actor thayđổimậtkhẩukhiquênmậtkhẩu

33

Trigger: User bâmchọnQuênmậtkhẩu

Preconditions: User khôngnhậpđúngmậtkhẩu

TàikhoảnđãđượcđăngxuấtPostconditions: Đổimậtkhẩumớithànhcông

Normal Flow: 1 Actor chọnchứcnăng “Quênmậtkhẩu”

2 Hệ thống hiểnthị form gồmđể actor thayđổimậtkhẩumới

3 Actor điềnthông tin mới

ID and Name: UC-4 Lọcbáotheotrang

Postconditions: User thấydanhsáchcácbáotheotrangbáođãchọn

Normal Flow: 1 Actor chọn nút “+”

2 Hệ thống hiểnthị 3 báocho actor chọnlọc: Tuổitrẻ,VNExpress,24h.com

3 Actor chọntrangbáomàmìnhmuốnxem

4 Hệthốngsẽlấydanhsáchbáomớinhấtvàchuyển actortớitrangcódanhsáchtươngứng

ID and Name: UC-5 Xemthông tin báomớinhất

Actors:

Không

củacáctờbáomớitheotừngtrangTrigger: User chọntrangbáocầnlọc

Preconditions: User đãlọcbáotheotrangthànhcông

Postconditions: Không

37

Normal Flow: 1 Actor chọntrangbáocầnlọc.

ID and Name: UC-6 Đọcbáo

Actors:

Không

Description: Use-case chophép actor đọcbáo

Trigger: User chọntờbáomuốnđọc

Preconditions: Actor đãlọcbáothànhcông

Postconditions: Hiểnthịbáocho user đọc

39

Normal Flow: 1 Actor chọn báo muốnđọc.

5.3Môhình Sequence-Diagram

- Chứcnăngđăngnhập:

41

- Chứcnăngđăngkí:

42

- Chứcnăngquênmậtkhẩu:

43

- Chứcnăngchọnbáo:

44

- Chứcnăngxemthông tin báo:

45

- Chứcnăngđọcbáo:

46

6 Giao diệnứngdụng

6.1 Mànhìnhchờ

48

6.2 Mànhìnhđăngnhập

49

6.3 Mànhìnhlỗikhikhôngđiềnthông tin đăngnhập

51

6.4 Mànhìnhđăngkýtàikhoản

53

6.5 Mànhìnhquênmậtkhẩu

55

6.6 Mànhìnhdanhmụcchọnbáo

57

6.7 Mànhìnhhiểnthịdanhsáchbàibáo

59

6.8 Mànhìnhhiểnthịnội dung bàibáo

60

WebView, RSS vàmộtsốvấnđềnhỏkháckhihướngdẫnvề React Native khôngthểchạy

2 Biếtcáchphân chia côngviệcvàlàmviệcnhóm

- Trongquátrìnhthựchiệnđồán, nhómemhọcđượcnhiềuđiềutựviệclàmviệcnhóm, từviệcphân chia task nhưthếnào, đếnviệcthốngnhấtcácgiátrịvềtênbiến,

tênhàmsaochođồngnhấtđểdễthựchiệnviệcghépcác task riênglạivớinhau

3 Kếtquảđạtđược

- Thậtsựđểnóithì React Native khôngkhó,

nhưngchúngrấtkhóđểnắmbắtvàthuầnthụcđếnmứcđiêuluyện, qua

quátrìnhtựhọccộngvớimộtnềntảnglậptrìnhvữngchắcmàthầycô ở trườngđãtruyềndạy,cụthể ở đâylàthầyHuỳnhTuấn Anh, chúngemcóthểnắmvàlàmđược React Native ở mứccơbản, hoànthànhđượcđồánđặt ra vàđúngtiếnđộ

giaodiệnbắtmắthơnhỗtrợngườidùng

62