Revolučný vývoj aplikácií pre chytré zariadenia: Objavte tajomstvá úspechu!

Ahojte a vitajte v kurze Vývoj aplikácií pre chytré zariadenia. V tomto kurze sa naučíte, ako vyvíjať natívne aplikácie pre chytré zariadenia pomocou rámca React Native primárne pre platformu Android. Nebudeme sa však venovať veciam ako používateľské rozhranie (UI) alebo používateľská skúsenosť (UX). Na to máte v tomto semestri samostatný predmet. My sa budeme venovať viac práci so senzormi, ktorými sú chytré zariadenia vybavené. Budeme teda vytvárať aplikácie, ktoré budú vedieť pracovať s polohou zariadenia, s jeho kamerou, Bluetooth-om, NFC čítačkou a pod. Na zvládnutie tohto kurzu nepotrebujete mať žiadne predchádzajúce znalosti s vývojom aplikácií pre niektorú z platforiem, ktorá sa používa na beh aplikácií na chytrých zariadeniach. Všetko potrebné, čo potrebujete vedieť, ste sa už naučili v predchádzajúcich kurzoch.

Chytré zariadenia by sme mohli definovať ako elektronické zariadenie, ktoré je schopné pracovať samostatne, interagovať s jeho používateľom, ako aj s inými zariadeniami pomocou rozličných komunikačných technológií.

Ilustrácia smartfónu s ikonami rôznych aplikácií

Keď sa na trhu objavili operačné systémy pre chytré zariadenia Android a iOS a chceli ste pre ne vyvíjať aplikácie, nemali ste veľa možností. Odvtedy sa však situácia diametrálne zmenila. Ako na úrovni jazykov, tak aj na úrovni nástrojov, ktoré môžete pre vývoj používať. Aj napriek tomu však vieme to množstvo možností zoskupiť do niekoľkých kategórií. Ešte skôr, ako sa začneme venovať samotným technológiám, si predstavíme 3 rozličné spôsoby vývoja aplikácií, resp.

Typy aplikácií pre chytré zariadenia

1. Natívne aplikácie

Tieto aplikácie sú vyvíjané a cielené špeciálne pre konkrétnu platformu pomocou nástrojov, ktoré nám poskytol jej výrobca. Príkladom môže byť jazyk Kotlin (predtým jazyk Java) v prostredí Android Studio pre Android alebo jazyk Swift (predtým jazyk Objective-C) v prostredí XCode pre iOS. Natívne aplikácie dosahujú v porovnaní s ostatnými typmi aplikácií najvyšší výkon. Ponúkajú veľmi dobrý používateľský zážitok, nakoľko vývojári používajú natívne UI zariadenia. Ponúkajú priamy prístup k natívnemu API a teda aj ku všetkým vlastnostiam platformy a ku všetkým senzorom a akčným členom zariadenia. Za najväčšiu nevýhodu je možné považovať to, že aplikácie nie sú platformovo nezávislé. To znamená, že v prípade distribúcie pre viaceré platformy je potrebné aplikáciu vytvoriť pre každú zvlášť. Obyčajne je ich vývoj náročnejší a tým pádom aj drahší.

2. Webové aplikácie

Jednou zo základných aplikácií, ktorú nájdete na každom mobilnom zariadení, je určite webový prehliadač. Webové prehliadače už dávno neslúžia len na prehliadanie statických webových stránok, ale dnes fungujú ako isté kontajnery, v ktorých je možné spúšťať rozličné aplikácie. Na sile webového prehliadača stavajú aj webové aplikácie. Tie sú napísané pomocou webových technológií HTML5 a spúšťa ich prehliadač a nie operačný systém. Aplikácie sú teda umiestnené na vzdialenom serveri a do prehliadača sa musia stiahnuť zakaždým (alebo takmer zakaždým), keď sa aplikácia spustí. Obyčajne sú to naozaj len webové stránky optimalizované pre zobrazovanie na mobilnom zariadení. Aplikácie sa neinštalujú na zariadenie, pretože sú umiestnené na vzdialenom serveri. Jednoduchá správa a údržba aplikácií, nakoľko nevyžadujú od používateľa žiadne špecifické oprávnenia pre inštalovanie/aktualizáciu. Webové aplikácie nemajú prístup k natívnemu API a platforme. To znamená, že aplikácia nebude mať prístup napr. k funkciám kamery alebo GPS. Obmedzené možnosti používateľského rozhrania, ktoré sú dané možnosťami technológií HTML5. To sa môže prejaviť napr. tak, že používateľské rozhranie webových aplikácií bude odlišné od natívnych aplikácií pre danú platformu.

3. Progresívne webové aplikácie (PWA)

Špeciálnym prípadom webových aplikácií sú Progresívne webové aplikácie, skrátene označované ako PWA. Tieto aplikácie vyzerajú a pracujú ako bežné webové stránky, ale ponúkajú funkcionalitu natívnych aplikácií. To znamená, že vedia napr. prijímať notifikácie alebo pracovať offline. PWA sú pomerne mladou technológiou. Za jej vznikom stoja ľudia zo spoločnosti Google, ktorí tento termín prvýkrát použili v roku 2015. Aj napriek tomu už dnes poskytujú svoje aplikácie vo forme PWA aplikácií mnohé veľké spoločnosti. Výnimkou je spoločnosť Apple, na ktorého zariadeniach sa síce PWA aplikácie dajú inštalovať a používať, ale tento proces je stále zbytočne komplikovaný.

4. Hybridné aplikácie

Hybridné aplikácie predstavujú kombináciu oboch predchádzajúcich prístupov. Hybridné aplikácie sa vytvárajú pomocou HTML5 technológií a majú prístup k natívnemu API. Architektúra hybridnej aplikácie je zobrazená na nasledujúcom obrázku. Aplikácia obsahuje tzv. Web View (izolovanú inštanciu prehliadača), ktorý umožňuje spustiť webovú aplikáciu vo vnútri natívnej aplikácie. Tento Web View využíva wrapper, pomocou ktorého dokáže webová aplikácia komunikovať s natívnou platformou a mať tak prístup ku zdrojom zariadenia (napr. GPS, databáza, súbory atď.). Tento wrapper nie je súčasťou natívnej platformy, ale sú to produkty tretích strán. V prípade inštalácie, spúšťania a aj aktualizácie sa aplikácia správa ako natívna aplikácia. Inštaluje sa z obchodu danej platformy, sťahuje sa do zariadenia a spúšťa ju operačný systém. Aplikácie sú cross-platformové, čo znamená, že rovnakú aplikáciu je možné spustiť na viacerých platformách. Vývoj je relatívne rýchly, jednoduchý a lacný. Hybridné aplikácie neposkytujú rovnaký výkon ako natívne aplikácie. Wrapper nemusí mať implementovanú podporu všetkých možností natívneho API. Hybridné aplikácie, podobne ako webové aplikácie, nemusia vyzerať rovnako ako natívne aplikácie. Je to však záležitosť dostupných CSS rámcov.

Trendy vo vývoji aplikácií

Takže chcete vytvoriť mobilnú aplikáciu a tá má byť… natívna? Alebo stačí webová? Na otázku “Ktorý prístup je najlepší?” neexistuje univerzálna odpoveď. Často však rozhodnutie môže závisieť od mnohých faktorov. Pozrime sa však na to, ako vyzerajú aktuálne trendy v oblasti vývoja aplikácií pre chytré zriadenia.

V rokoch 2015 a 2016 portál DZone urobil na túto tému prieskum, ktorého sa zúčastnilo vyše 500 (v roku 2015) a 400 (v roku 2016) IT profesionálov, ktorí sú nejakým spôsobom zahrnutí v oblasti mobilných technológií. Ich výsledky zverejnili vo svojich DZone’s Guide to Mobile Development 2015 a DZone’s Guide to Mobile Development 2016.

Každý rok však portál Stack Overflow robí svoj vlastný prieskum. Nie je síce zameraný výlučne na vývojárov mobilných aplikácií, ale z mnohých otázok sa dajú aktuálne trendy vyčítať.

Prvá otázka sa týkala platforiem, pre ktorú vývojári vyvíjajú svoje aplikácie. Spomedzi všetkých platforiem v porovnaní Android a iOS sa aplikácie viac vyvíjajú pre Android.

Ďalšia otázka sa týkala popularity programovacích jazykov. Už niekoľko rokov sa na prvom mieste drží jazyk JavaScript. Samozrejme - prieskum sa týka technológií celkovo nehľadiac na typ projektov. Ale v prieskume sa nachádzajú aj jazyky, ktoré sú takmer výlučne určené pre tvorbu mobilných aplikácií, ako napr. Swift a Kotlin.

V ďalších otázkach sa pýtali vývojárov na používané rámce vo vývoji webových aplikácií a ostatných aplikáciách.

React Native a Expo

React Native je rámec na tvorbu natívnych aplikácií v jazyku JavaScript. Pri písaní aplikácií nepotrebujete poznať detaily cieľovej platformy ako je Android alebo iOS a aj napriek tomu môžete vytvárať komplexné aplikácie. Stačí poznať len jazyk JavaScript a jeden kód je možné spúšťať na oboch cieľových platformách.

Expo predstavuje sadu nástrojov vytvorených pre React Native, pomocou ktorých zjednodušuje samotný vývoj aplikácií. Pre mnohých je práve Expo jasnou voľbou, ak sa jedná o vývoj React Native aplikácií a je aj odporúčaním, ak chcete vyvíjať/prototypovať aplikácie čo najrýchlejšie.

Kedy sa oplatí používať Expo?

Ak ste noví vo vývoji aplikácií pre chytré zariadenia a nemáte (alebo nechcete mať) skúsenosti s natívnym vývojom aplikácií.
Ak vyvíjate len klientske aplikácie, ktoré pre svoju prácu nepoužívajú žiadne komponenty cieľovej platformy alebo žiadne hardvérové súčasti zariadenia, na ktorom aplikácia beží.

Kedy sa naopak neoplatí Expo používať?

V našom prípade sa budeme venovať práci s hardvérom zariadenia, takže naše projekty budú čistými React Native aplikáciami.

Vývoj aplikácie Baterka (Torch) pomocou React Native

Miesto štandardnej Killer App s názvom Hello world sa pustíme rovno do niečoho použiteľnejšieho. Vytvoríme si aplikáciu, ktorá nemôže chýbať v žiadnej aplikácii typu švajčiarsky nožík (z angl. Swiss Knife) - flashlight (baterku).

Ešte predtým, ako začneme so samotným vývojom, si potrebujeme pripraviť prostredie pre vývoj.

Na inštaláciu rámca React Native máme niekoľko možností. Rámec React Native nainštalujeme pomocou správcu balíčkov npm pre node.js. Nainštalujeme ho do systému globálne inštaláciou klienta Expo, ktorý má rámec React Native uvedený v závislostiach. Táto operácia bude samozrejme chvíľu trvať a vo výstupe sa môže objaviť niekoľko upozornení.

Vytvorenie projektu opäť zaberie nejaký čas, kedy dôjde k nainštalovaniu potrebných balíčkov a vytvorenie projektu na základe zvolenej šablóny.

Ak sa pozrieme naspäť na výpis, ktorý sa zobrazil po vytvorení projektu, spustiť projekt máme príkazom npm start.

Miesto aplikácie sa však spustí Metro Bundler. Metro Bundler je JavaScript-ový balič (z angl. bundler) pre React Native.

Ak sa venujete tvorbe JS aplikácií, s termínom Bundler ste sa už stretli. Na čo však JS Bundler slúži?

Prvé spustenie v každom prípade trvá dlhšie, nakoľko najprv sa nainštaluje klientska aplikácia Expo.

Pokiaľ je vaše mobilné zariadenie v rovnakej sieti, ako je váš počítač, môžete pomocou čítačky QR kódov naskenovať QR kód z aplikácie Metro Bundler.

Jednou z výhod rámca React Native je “blesková” aktualizácia vykonaných zmien. Ak totiž vykonáte vo svojom kóde zmenu a uložíte ju, tá sa okamžite dostane na všetky výstupné zariadenia. Túto vlastnosť si vieme vyskúšať v komponente App, ktorý sa nachádza v súbore App.js. Stačí, ak upravíte text v elemente <Text> a súbor uložíte.

Základy React Native: Komponenty a JSX

Aby sme zvládli prácu v rámci React Native, nemôžeme zabudnúť na rámec React, na ktorom je React Native postavený, a na ktorom je závislý. Obecne môžeme povedať, že rámec React Native sa používa na tvorbu (nie len) mobilných aplikácií pomocou React-u a schopností/možností natívnej platformy.

Takže - čo je React? React je knižnica pre JavaScript na tvorbu používateľských rozhraní. Komponenty je možné navzájom prepájať, čím je možné vytvárať komplexné používateľské rozhrania. Toto prepojenie je možné vizualizovať pomocou stromu, v ktorom existuje jeden koreňový komponent a každý ďalší komponent sa stáva jeho samostatnou vetvou. Každá ďalšia vetva môže mať samozrejme ďalšie podvetvy. Príklad takéhoto stromu komponentov.

Komponenty sú základným stavebným prvkom týchto rámcov. Pre jednoduchosť nahradíme ukážkovú aplikáciu, ktorá bola automagicky vytvorená, za jednoduchšiu. Komponent je teda definovaný ako funkcia. Čokoľvek, čo táto funkcia vráti, je vykreslené ako React element, ktorý definuje, čo bude viditeľné na obrazovke zariadenia. To znamená, že čokoľvek, čo vidíme na obrazovke, je nejakým prípadom komponentu. Obecne je každý komponent definovaný svojim stavom a vlastnosťami.

Pri vývoji aplikácií pre Android alebo iOS sú pohľady (views) základným stavebným blokom pre tvorbu používateľského rozhrania. Pohľad (view) je vlastne všetko, čo je možné zobraziť na obrazovke zariadenia.

Rámec React Native obsahuje generické (core) komponenty (resp. pohľady), pomocou ktorých je možné vyskladať ľubovoľné používateľské rozhranie pre všetky podporované platformy. Následne pri spustení rovnakého kódu na konkrétnej platforme sú tieto pohľady nahradené natívnymi komponentami (resp. pohľadmi).

React Native má mnoho Core komponentov. Ich kompletný zoznam nájdete v dokumentácii API.

Keď sa však pozrieme bližšie na to, čo funkcia v skutočnosti vracia, nie je to ani reťazec a nie je to ani HTML. React totiž používa syntax JSX (JavaScript XML), čo je XML/HTML rozšírenie pre kód jazyka JavaScript. React nie je na technológii JSX závislý, ale jeho použitím je tvorba komponentov jednoduchšia, prehľadnejšia a hlavne prirodzenejšia. Príklad jednoduchého Hello, world!

Aby React (a vlastne JavaScript) rozumel JSX, je potrebné použiť transpiler Babel, ktorý dokáže preložiť tento značkovací jazyk do jazyka JavaScript.

Do UI našej aplikácie potrebujeme pridať tlačidlo, pomocou ktorého budeme baterku ovládať. Dnes sme teda vytvorili kostru aplikácie baterka. Nabudúce budeme pokračovať a pokúsime sa rozsvietiť blesk fotoaparátu vo vašom zariadení.

Príprava prostredia a spustenie aplikácie

Ešte predtým, ako začneme so samotným vývojom, si potrebujeme pripraviť prostredie.

Ak máme pripravené prostredie, môžeme vyskúšať spustiť samotnú aplikáciu. Týmto príkazom bol spustený server na adrese 8000, na ktorý sa je možné pripojiť a výslednú aplikáciu pozrieť.

Ak však urobíme v kóde zmeny, potrebujeme opäť preložiť a spustiť novú verziu aplikácie. Miesto toho, aby sme tento proces opakovali pri každej zmene, využijeme príkaz cordova prepare browser, pomocou ktorého vieme aktualizovaný kód nahrať na webový server Cordovy a nemusíme ho pritom vypnúť a znovu zapnúť. Tento proces vieme automatizovať napr. pomocou rozšírenia s názvom Cordova Browser-Sync Plugin, ktoré zabezpečí aktualizovanie aplikácie o nový kód.

V súbore config.xml sa nachádza konfigurácia projektu.

content - The app’s starting page.
access - Used to control access to external domains. The default origin value is set to * which means that access is allowed to any domain.
allow-intent - Allows specific URLs to ask the app to open.

Vývoj aplikácie Baterka pomocou Cordovy

Projekt samotný už poznáme z čias, keď sme ho robili pre Android. Najprv stiahneme potrebné .js a .css súbory a umiestnime ich do príslušných priečinkov v priečinku www/. Začneme podobne, ako v prípade baterky pre Android - rozložením aplikácie. Rozloženie aplikácie budeme vytvárať a upravovať v súbore www/index.html.

Teraz začneme upravovať správanie aplikácie v súbore www/js/torch.js. Keď overíme funkcionalitu, zistíme, že po prvom kliknutí dôjde k zmene textu tlačidla, ale naspäť k jeho zmene nedôjde. Potrebujeme teda opäť uchovávať stav baterky a pri jeho zmene aktualizujeme text tlačidla. Teraz už pôjde po stlačení tlačidla pekne prepínať.

Až na to, že na žiarovke k žiadnemu prepínaniu nedôjde. Ak teraz vyskúšame aplikáciu, tak sa bude správať presne tak, ako má. Teda až na jednu maličkosť, ktorou je práve rozsvietenie svetla na telefóne.

Cordova nemá v základe všetku potrebnú funkcionalitu. Je ju však možné rozširovať pomocou plugin-ov. To, či sa podarilo plugin úspešne nainštalovať, uvidíme na príkazovom riadku priamo po jeho inštalácii. Na stránke plugin-u je možné vidieť rovnako aj ukážku jeho použitia. Na to, aby sme funkcionalitu tohto plugin-u mohli vyskúšať, samozrejme potrebujeme aplikáciu spustiť na reálnom zariadení s OS Android. Okrem týchto funkcií je však možné využiť aj funkciu toggle(), ktorá sama zabezpečí prepínanie kamery na základe jej vnútorného stavu.