Lekce 1 - Představení frameworku
Vítejte u kurzu vývoje multiplatformních mobilních aplikací v React Native pro začátečníky. Naučíme se zde vytvářet nativní aplikace pro Android a iOS. Začneme klasickou aplikací, která nás bude umět pozdravit a postupně se dostaneme například až k využití databáze nebo načtení obsahu z webu pomocí API.
Předpoklady pro úspěšné zvládnutí kurzu
Než se pustíme do samotné práce s React Native, je potřeba ještě zmínit vyžadované znalosti. Nezbytně budeme potřebovat znalosti obsažené v kurzech:
- Základní konstrukce jazyka JavaScript,
- Responzivní webdesign,
- Objektově orientované programování v JavaScriptu.
Výhodou bude také základní znalost platformy Android a základní orientace v databázích.
Úvod do mobilních aplikací
Mobilní aplikace, stejně jako aplikace webové, jsou dnes na vzestupu. Zamysleme se, proč jsou tyto aplikace tak populární jak pro uživatele, tak pro firmy. Je to velmi jednoduché.
Pokud si uživatel nainstaluje naši aplikaci, poskytne nám způsob, jak ho jednoduše informovat o novinkách, výhodách atd. přímo na jeho telefon a tím zvýšit šanci něco prodat. Toho bychom asi jen těžko dosáhli pomocí nějakého emailového newsletteru, který uživatel většinou rovnou vymaže bez toho, aby ho vůbec četl. Jako bonus ještě dostaneme informace o jeho zařízení, třeba polohu. Tím lze cílit naše nabídky na konkrétní město / lokalitu a podle toho i upravit nabídku produktů. Pro uživatele jsou mobilní aplikace zase výhodné v tom, že většinu obsahu má k dispozici neustále, bez nutnosti mít v dosahu PC.
V současné době existují čtyři mobilní platformy (Android, iOS, Windows a Huawei) a pro každou z nich se používá jiný programovací jazyk:
Pokud tedy zákazník bude chtít vytvořit aplikaci pro všechny platformy, pořádně se u toho asi zapotíme. Okamžitě nás napadne, že bude k zbláznění stejnou aplikaci psát několikrát – jednu pro Android, druhou pro iOS, třetí pro Windows, další případně pro Huawei, a ještě k tomu každou v jiném jazyce. Naštěstí ale existují cross-platform frameworky, které umožňují nám vývojářům vytvářet aplikace pro více platforem s využitím jednoho jediného sdíleného kódu.
Framework React Native
Takovým frameworkem je právě React Native. Je to open-source framework vytvořený společností Meta. React Native je určený pro nativní vývoj aplikací pro operační systémy Android, iOS, Windows, macOS, Android TV a tvOS.
Pro vývoj v React Native se pro všechny platformy s rozdílnými nativními jazyky používá pouze JavaScript! Princip je velmi jednoduchý. Při startu aplikace je JavaScript kód spuštěn na virtuálním stroji. Avšak kód, který je napsán v JavaScriptu, není přímo převeden na Javu, Kotlin nebo Swift. Místo toho, když JavaScriptový kód potřebuje přistupovat k nativním funkcím zařízení (jako je například fotoaparát nebo GPS), React Native poskytuje "most" (anglicky Bridge) mezi JavaScriptem a nativními jazyky. Tento most umožňuje vývojářům posílat a přijímat zprávy mezi JavaScriptem a nativním kódem pomocí univerzálního formátu dat jako je JSON.
Takže, když píšeme aplikaci v React Native, ve skutečnosti vytváříme JavaScriptový kód, který je pak schopen komunikovat s nativním kódem zařízení prostřednictvím tohoto mostu. Výsledkem je, že aplikace se chová tak, jako by byla napsána přímo v nativním jazyce pro danou platformu, přestože hlavní logika je napsána v JavaScriptu.
Instalace Node.js
Nyní když máme připravené IDE, pojďme si společně Node.js nainstalovat. Je to velice jednoduché. Přejdeme na oficiální stránky Node.js, případně přímo do sekce download:
Stáhneme si instalátor pro náš operační systém. Ten následně spustíme a podle instrukcí nainstalujeme. Určitě už jste takových instalací dělali nespočet 🙂
Příprava vývojového prostředí
V tomto kurzu budeme používat Visual Studio Code. Pokud ho nemáme nainstalované, stáhneme si instalátor pro náš operační systém z domovské stránky a nainstalujeme opět podle pokynů instalátoru.
Abychom si ulehčili práci, nainstalujeme si do VS Code několik rozšíření. Prvním z nich je React Native Tools. Toto rozšíření nabízí mnoho užitečných příkazů, například se vůbec nebudeme zabývat příkazovým řádkem při spouštění aplikace. V panelu na levé straně klikneme na Rozšíření a vyhledáme React native Tools.
Dalším rozšířením je Prettier - Code formatter. Toto rozšíření za nás automaticky opraví vzhled našeho kódu v případě, že se někde objeví např. mezery navíc. Rozšíření nainstalujeme stejně jako React Native Tools.
Příprava Android emulátoru
Pro spuštění aplikace na počítači během vývoje potřebujeme emulátor pro příslušný operační systém. Pro Windows je k dispozici Android Studio. Nicméně, kvůli uzavřené politice Apple, lze simulátor aplikace iOS Xcode spustit pouze na macOS. My si v této lekci projdeme pouze instalaci Android Studia. Instalátor si stáhneme z domovské stránky Android studia a budeme postupovat podle jeho pokynů:
Po spuštění Setup Wizardu zvolíme možnost instalace Standard. Poté si musíme vytvořit virtuální zařízení, na kterém spustíme později simulaci. Přejdeme tedy do Virtual device manageru. Zde klikneme v levém horním rohu na Create Device. Otevře se nám okno s výběrem telefonů. Abychom mohli aplikaci pomocí emulátoru otevřít, je nutné vybrat zařízení s ikonkou Play Store:
Klikneme na Next. Nyní si musíme vybrat, jaké API použijeme. Pro naše účely vybereme Tiramisu:
Klikneme na Next a poté Finish. Ještě ale není hotovo, musíme si vytvořit uživatelskou proměnou ANDROID_HOME. Otevřeme Ovládací panely > Uživatelské účty > Změnit proměnné prostředí. Klikneme na Nová, jako název použijeme ANDROID_HOME a jako hodnotu cestu k Android SDK. Tu nalezneme v Android Studiu:
Posledním krokem je upravení proměnné Path. V té vytvoříme
novou cestu, stejnou jako minule, jen na konec přidáme
\platform-tools. Bude tedy vypadat takhle -
C:\Users\vas-profil\AppData\Local\Android\Sdk\platform-tools. A
simulátor máme připravený 
Nyní máme prostředí připravené k další práci a pro dnešek to je vše.
V příští lekci, Struktura projektu a životní cyklus aplikace, si povíme, co se v aplikaci děje od spuštění až do ukončení a rozebereme si strukturu React Native projektu.
