1. diel - React Native - Predstavenie frameworku
Vitajte pri kurze vývoja multiplatformných mobilných aplikácií v React Native pre začiatočníkov. Naučíme sa tu vytvárať natívne aplikácie pre Android a iOS. Začneme klasickou aplikáciou, ktorá nás bude vedieť pozdraviť, a postupne sa dostaneme napríklad až na využitie databázy alebo načítanie obsahu z webu pomocou API.
Predpoklady pre úspešné zvládnutie kurzu
Než sa pustíme do samotnej práce s React Native, treba ešte zmieniť vyžadované znalosti. Nevyhnutne budeme potrebovať znalosti obsiahnuté v kurzoch:
- Základná konštrukcia jazyka JavaScript
- Responzívny webdesign
- Objektovo orientované programovanie v JavaScripte
Úvod do mobilných aplikácií
Mobilné aplikácie, rovnako ako aplikácie webové, sú dnes na vzostupe. Zamyslime sa, prečo sú tieto aplikácie tak populárne ako pre užívateľov, tak aj pre firmy. Je to veľmi jednoduché.
Pokiaľ si užívateľ nainštaluje našu aplikáciu, poskytne nám spôsob, ako ho jednoducho informovať o novinkách, výhodách atď. priamo na jeho telefón a tým zvýšiť šancu niečo predať. To by sme asi len ťažko dosiahli pomocou nejakého emailového newslettera, ktorý používateľ väčšinou rovno vymaže bez toho, aby ho vôbec čítal. Ako bonus ešte dostaneme informácie o jeho zariadení, napríklad polohu. Tým je možné zacieliť naše ponuky na konkrétne mesto / lokalitu a podľa toho aj upraviť ponuku produktov. Pre užívateľov sú mobilné aplikácie zase výhodné v tom, že väčšinu obsahu má k dispozícii neustále, bez nutnosti mať v dosahu PC.
V súčasnej dobe existujú štyri mobilné platformy (Android, iOS, Windows a Huawei) a pre každú z nich sa používa iný programovací jazyk:
Pokiaľ teda zákazník bude chcieť vytvoriť aplikáciu pre všetky platformy, poriadne sa pri tom asi zapotíme. Okamžite nás napadne, že bude na zbláznenie rovnakú aplikáciu písať niekoľkokrát – jednu pre Android, druhú pre iOS, tretiu pre Windows, ďalšiu prípadne pre Huawei a ešte k tomu každú v inom jazyku. Našťastie ale existujú cross-platform frameworky, ktoré umožňujú nám vývojárom vytvárať aplikácie pre viac platforiem s využitím jedného jediného zdieľaného kódu.Framework React Native
Takým frameworkom je práve React Native. Je to open-source framework vytvorený spoločnosťou Meta. React Native je určený na natívny vývoj aplikácií pre operačné systémy Android, iOS, Windows, macOS, Android TV a tvOS.
Pre vývoj v React Native sa pre všetky platformy s rozdielnymi natívnymi jazykmi používa iba JavaScript ! Princíp je veľmi jednoduchý. Pri štarte aplikácie je JavaScript kód spustený na virtuálnom stroji. Avšak kód, ktorý je napísaný v JavaScripte, nie je priamo prevedený na Javu, Kotlin alebo Swift. Namiesto toho, keď JavaScriptový kód potrebuje pristupovať k natívnym funkciám zariadenia (ako je napríklad fotoaparát alebo GPS), React Native poskytuje "most" (anglicky Bridge) medzi JavaScriptom a natívnymi jazykmi. Tento most umožňuje vývojárom posielať a prijímať správy medzi JavaScriptom a natívnym kódom pomocou univerzálneho formátu dát ako je JSON.
Takže, keď píšeme aplikáciu v React Native, v skutočnosti vytvárame JavaScriptový kód, ktorý je potom schopný komunikovať s natívnym kódom zariadenia prostredníctvom tohto mosta. Výsledkom je, že aplikácia sa chová tak, ako by bola napísaná priamo v natívnom jazyku pre danú platformu, hoci hlavná logika je napísaná v JavaScripte.
Inštalácia Node.js
Teraz keď máme pripravené IDE, poďme si spoločne Node.js nainštalovať. Je to veľmi jednoduché. Prejdeme na oficiálne stránky Node.js, prípadne priamo do sekcie download:
Stiahneme si inštalátor pre náš operačný systém. Ten následne spustíme a podľa inštrukcií nainštalujeme. Určite už ste takých inštalácií robili nespočet 🙂
Príprava vývojového prostredia
V tomto kurze budeme používať Visual Studio Code. Pokiaľ ho nemáme nainštalované, stiahneme si inštalátor pre náš operačný systém z domovskej stránky a nainštalujeme opäť podľa pokynov inštalátora.
Aby sme si uľahčili prácu, nainštalujeme si do VS Code niekoľko rozšírení. Prvým z nich je React Native Tools. Toto rozšírenie ponúka mnoho užitočných príkazov, napríklad sa vôbec nebudeme zaoberať príkazovým riadkom pri spúšťaní aplikácie. V paneli na ľavej strane klikneme na Rozšírenie a vyhľadáme React native Tools.
Ďalším rozšírením je Prettier-Code formatter. Toto rozšírenie za nás automaticky opraví vzhľad nášho kódu v prípade, že sa niekde objavia napr. medzery navyše. Rozšírenie nainštalujeme rovnako ako React Native Tools.
Príprava Android emulátora
Na spustenie aplikácie na počítači počas vývoja potrebujeme emulátor pre príslušný operačný systém. Pre Windows je k dispozícii Android Studio. Avšak, kvôli uzavretej politike Apple, je možné simulátor aplikácie iOS Xcode spustiť iba na macOS. My si v tejto lekcii prejdeme iba inštaláciu Android Studia. Inštalátor si stiahneme z domovskej stránky Android štúdia a budeme postupovať podľa jeho pokynov:
Po spustení Setup Wizardu zvolíme možnosť inštalácie Standard. Potom si musíme vytvoriť virtuálne zariadenie, na ktorom spustíme neskôr simuláciu. Prejdeme teda do Virtual device manažéra. Tu klikneme v ľavom hornom rohu na Create Device. Otvorí sa nám okno s výberom telefónov. Aby sme mohli aplikáciu pomocou emulátora otvoriť, je nutné vybrať zariadenie s ikonkou Play Store:
Kliknite na Next. Teraz si musíme vybrať, aké API použijeme. Na naše účely vyberieme Tiramisu:
Klikneme na Next a potom Finish. Ešte ale nie je hotové, musíme si vytvoriť užívateľskú premenu ANDROID_HOME. Otvoríme Ovládací panel > Užívateľské účty > Zmeniť premenné prostredia. Klikneme na Nová, ako názov použijeme ANDROID_HOME a ako hodnotu cestu k Android SDK. Tú nájdeme v Android Studiu:
Posledným krokom je upravenie premennej Path. V tej vytvoríme
novú cestu, rovnakú ako minule, len na koniec pridáme
\platform-tools. Bude teda vyzerať takto -
C:\Users\vas-profil\AppData\Local\Android\Sdk\platform-tools. A
simulátor máme pripravený:-)
Teraz máme prostredie pripravené na ďalšiu prácu a pre dnešok to je všetko.
V budúcej lekcii, React Native - Štruktúra projektu a životný cyklus aplikácie , si povieme, čo sa v aplikácii deje od spustenia až do ukončenia a rozoberieme si štruktúru React Native projektu.
