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

ĐẠ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 ứ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 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ụ ngđọcbáobằng React Native 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ẬN XÉT CỦA GIẢNG VIÊN MụcLục I Tổngquanvề React Native 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 độngđanềntảng(cross- - platform) chocả android vàios React Native đượcpháttriểndựatrênmột web framework 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 app vàtốigiảnsốlượngngơnngữ native di động Lịchsửhìnhthành React Native - Năm 2012, Mark Zuckerberg lầmlớnnhấtcủachúngtôikhilàmcông ty đãphátbiểu: “Sai làdựatrênquánhiều HTML hơnlàmơitrườngpháttriểngốc” Ơnghứarằng Facebook sẽsớmcungcấptrảinghiệm - di độngtốthơn Kỹsư Jordan Walketại Facebook đãtìm cáchxâydựngcácthànhphầnUIcho iOS bằngmộtluồngJavaScript HọquyếtđịnhtổchứccuộcthiHackathonđểhồnthiệnngunmẫuhệthốngđểcóthểxâ - ydựngcácứngdụng di độnggốc (native app) bằngcôngnghệnày Sau nhiềuthángpháttriển, Facebookđãpháthànhphiênbảnđầutiêncho Native vàonăm 2015 Trongmộtcuộchộithảocơngnghệ, ChedeauchobiếtFacebookđãsửdụng React React Christopher Native trongpháttriểnứngdụngnhómvàứngdụngquảnlíquảngcáocủahọ Tạisao React Native 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ả Android iOS - DựatrênnềntảngngơnngữJavascript, ngơnngữ “đanăng” đượcgiớilậptrìnhviênưachuộngvàphổbiếnnhấtthếgiới - React Native tạonênsự “mượtmà” trongviệc vàxóanhịakhoảngcáchvềhiệunănggiữaứngdụngđanềntảng render UI so vớiứngdụngđộclậpnềntảng - Facebook, instagramlà ứngdụngmượtmàđượcxâydựngbằng React Native vàchúngthựcsựchothấy 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ý tạisao React Native tin tưởngsẽlànềntảngthốngtrịtrongthếgiớikhichỉcó Native App Hybrid App Đặcđiểmnổibậtcủa React Native - React Native tíchhợp thread Main thread JS thread choứngdụng mobile: + Main thread đảmnhiệmvaitrịcậpnhậtgiaodiệnngườidùngvàxửlítươngtácngườidùngtron gqtrì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ừ thread - sang thread khác React Native 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ạing - uờidùngkhácnhau React Native sửdụng JSX đểkếthợpJavascriptvà XML-markup syntax đểtạo - giaodiện Ngườilậptrìnhcóthểviếttấtcảchỉtrongmột file duynhấtchứkhơngcầnphải chia nhiều file HTML, CSS, JS nhưlậptrình web Nếunhưkhi design trongứngdụng web dùngcssthìtrong React Native cũngcómộtthứtươngtựgọilà flexbox layout model đểtùychỉnhthiếtkế - component Trong React Native, sẻ chia nhỏứngdụng 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ác component 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ừ local vàoứngdụng React Native + Touchable Opacity: Làmột component màchúng ta cóthểnhấnvàođểtươngtácvàthựchiệnmộthàmgìđó + ScrollView:Làmột scrolling component cóthểchứanhiều component view + TextInput: Là component chophépngườidùngnhậpliệutrênmànhình + Button: Là component tươngtựnhưTouchalbe Opacity nhưngngườidùngkhơngthểtự custom theo ý + Status Bar: Là component sửdụngđểkiểmsốtthanhtrạngtháitrênứngdụng - Trong qua trìnhquảnlí component, sẽgặpphải kháiniệmlà props state: + Props: Viếttắtcủa properties ● Props dùngđểtruyềndữliệutừ component cha xuống component ● Khi truyềndữliệu qua props, component chỉđượcđọcvàkhơngđượcphépthayđổinó ● Điềunàykhiếnchodùchúng ta bấtkìđâucũngsẽcóchung sửdụng output component khinhậpcùng input =>Giúpkiểmsốt component tốthơn + State: Nếunhư props đượctruyềngiátrịtừbênngồivào component, state lạ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 render lạigiátrịtrong component Nhượcđiểmcủa React Native - Chỉhỗtrợ nềntảng iOS 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 ngônngữ Native - React Native chưahỗtrợ push thẳnglên App Store hay Google Play - Nhữnglầnphảithayđổi source lớnkhi upgrade phiênbản React So sánh React Native vànềntảng Cross-platform rấtmạnhhiện nay: Flutter 10 Giao diệnứngdụng 6.1 Mànhìnhchờ 48 6.2 Mànhìnhđăngnhập 49 50 6.3 Mànhìnhlỗikhikhơngđiềnthơng tin đăngnhập 51 52 6.4 Mànhìnhđăngkýtàikhoản 53 54 6.5 Mànhìnhquênmậtkhẩu 55 56 6.6 Mànhìnhdanhmụcchọnbáo 57 58 6.7 Mànhìnhhiểnthịdanhsáchbàibáo 59 6.8 Mànhìnhhiểnthịnội dung bàibáo 60 61 III Tổngkết Khókhănkhithựchiện - React Native sửdụngngơnngữchínhlàjavascript, tuyngơnngữphổbiếnrộngrãinhưnglại hay thayđổivàcậpnhậtmớidẫnđếnnhữngvấnđềphátsinh, nhómemđãgặpphảilỗivới WebView, RSS vàmộtsốvấnđềnhỏkháckhihướngdẫnvề React Native khơngthểchạy Biếtcáchphân chia cơngviệcvàlàmviệcnhóm - Trongqtrì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 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 qtrì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, hồnthànhđượcđồánđặt vàđúngtiếnđộ Mụctiêuđồán - Nhómemcảmthấycónhữngngườidùngthíchđọcnhiềutrangbáo, cùngmột tin tứcnhưngmuốnxem nhữngtrangbáokhácnhau, hoặcmỗidanhmụcbáohọlạithíchmộthãngbáođóviết, vìvậynhómemxâydựngứngdụngnàytíchhợpcóđểchuyển qua lạigiữacáctrangbáokhácnhaunhư: VN Express, báo 24h.com, báoTuổiTrẻ,… đểnhữngđốitượngngườidùngcónhiềulựachọnvàthuậntiệnhơntronglúccậpnhật tin tức Hướngpháttriển - Chắcchắnlàđồánnhómemlàmkhơngthểđượchồnthiệnhồntồn, tươnglaiemsẽpháttriểnứngdụngnàycóthêmnhiềuchứcnănghiệnđạihơn, giaodiệnbắtmắthơnhỗtrợngườidùng 62 ... Facebookđãpháthànhphiênbảnđầutiêncho Native vàonăm 2015 Trongmộtcuộchộithảocôngnghệ, ChedeauchobiếtFacebookđãs? ?dụng React React Christopher Native trongpháttriểnứngdụngnhómvàứngdụngquảnlíquảngcáocủahọ Tạisao React Native. .. bởimộtcộngđồnglậptrìnhviênlớnsẽlnđónggópvàduytrìđứa tinhthầncủahọ II Xâydựngứngdụngs? ?dụng React Native Expo 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ư... khác React Native 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ạing - uờidùngkhácnhau React Native s? ?dụng JSX đểkếthợpJavascriptvà