Blog

Ako sa nepopáliť pri vývoji hybridných aplikácií

Know-how Technológie
11.9.2019
Digitálnemu svetu dnes dominujú mobilné aplikácie. Prehliadanie webu na desktopoch je na ústupe a v roku 2017 začali dominovať mobilné zariadenia.

Podľa dát portálu StatCounter, ktorý meria web traffic na celom svete, sa globálne používanie mobilných zariadení oproti roku 2016 zvýšilo o 11 percent. Smartfóny a mobilné aplikácie začínajú valcovať desktopy a notebooky, nehovoriac o tabletoch, ktoré používajú len necelé 4 percentá ľudí.
Mobilné aplikácie sú teda prioritou väčšiny firiem, ktoré sa vývojom softvéru zaoberajú. Nehovoríme však len o aplikáciách či hrách, ktoré sú určené na zábavu – prakticky všetko, čo sa točí okolo biznisu či pracovnej činnosti sa presunulo do mobilov.
Jedného dňa však môžete stáť pred zložitým rozhodnutím: potrebujem pre svoj biznis natívnu mobilnú appku, alebo mi bude viac vyhovovať hybridná aplikácia?
Natívne aplikácie sú určené výhradne pre mobilné platformy iOS a/alebo Android, kódujú sa v jazyku špeciálne vyvinutom pre danú platformu a inštalujú sa priamo do mobilného zariadenia. Hybridné aplikácie kombinujú prvky natívnych a webových aplikácií, viac sa podobajú webovým stránkam. Píšu sa v jazyku HTML5, CSS a JavaScript, používajú jeden zdrojový kód, jednotný framework, vyvíjajú sa naraz pre viaceré platformy a dokážu pracovať s natívnymi funkcionalitami mobilného zariadenia pomocou API a rôznych pluginov.
Poďme sa teda pozrieť na to, ako sa hybridná aplikácia vyvíja na „zelenej lúke“ a čo pri vývoji nesmieme podceniť.

Analyzujte, analyzujte a ešte raz analyzujte

Dvakrát meraj a raz rež. Toto ošúchané príslovie platí pri vývoji hybridnej appky dvojnásobne. Vystihuje totiž najdôležitejší nosný prvok projektu, ktorý sa chystáte realizovať a o aplikáciách neviete vôbec nič. Predtým, než sa do tohto dobrodružstva pustíte, dajte si u renomovanej firmy urobiť podrobnú analýzu projektu.
Skúsme si to ilustrovať na príklade:
Predstavte si, že vašou úlohou je vytvoriť na prvý pohľad bežnú hybridnú aplikáciu určenú pre platformy iOs, Android a web. Mala by obsahovať bežné funkcie – rôzne druhy prihlásenia, vytváranie obsahu užívateľmi, synchronizáciu kontaktov medzi appkou a mobilom, nahrávanie fotiek, videí či ďalších súborov alebo platby za predplatený obsah.
Po základnej analýze zistíte, že na trhu je k dispozícii milión pluginov, ktoré pre vaše potreby postačia a na prvý pohľad budú pre vás vhodné. V ich dokumentácii je uvedená podpora naprieč všetkými platformami a dokáže s nimi pracovať aj stredoškolák. Poviete si – super, problém vyriešený, ušetrím kopu peňazí – zaplatíte za pluginy a tešíte sa, akú perfektnú appku si z nich poskladáte. A práve vtedy narazíte na veľký problém.

Lacné pluginy nie sú všetko

Ak vás pred týmto bezhlavým postupom nikto vopred nevaroval, urobíme to teraz my: fakt to nerobte. Venujte radšej viac času konzultáciám s profíkmi, ktorí budú vašim potrebám rozumieť a navrhnú vám na mieru šité riešenie. Môžete sa totiž popáliť napríklad na tom, že konkrétny plugin v novších verziách Androidu neumožňuje import e-mailových adries a zbytočne stratíte čas a peniaze vytváraním natívneho pluginu.
Pri analýze nezabúdajte ani na výber serverov, vhodnú API technológiu či framework, ktorý budete používať na frontende. Nezabudnite si pripraviť viaceré scenáre testovania a hlavne si krok za krokom overte odlišnosti rôznych platforiem a náklady, ktoré na to budete musieť vynaložiť.
Po analýze si dôkladne naplánujte samotnú realizáciu projektu, určite nevynechajte ani jeden z nižšie uvedených postupov. Nezabúdajte, že kvalitná firma by vám všetko mala podrobne vysvetliť, názorne ukázať a zároveň detailne previesť celým procesom vývoja appky.

Návrh databázového modelu

Toto je úloha pre senior analytika alebo architekta. Ak vás budú presviedčať, že to zvládne hocikto, neverte im. Ide o komplexný proces, v ktorom sa pomocou špeciálnych nástrojov navrhne kompletný databázový model so všetkými závislosťami. Slúži ako podklad pre tvorbu API.

Graficky návrh frontend časti aplikácie

Úloha pre skúsených grafikov a UX dizajnérov. V tejto fáze sa vytvárajú wireframes, alebo samotný dizajn aplikácie, dôraz sa kladie na efektivitu, použiteľnosť a čo najjednoduchšie ovládanie užívateľského prostredia. Po finalizácii a schválení wireframes sa pracuje na konečnej podobe grafického dizajnu aplikácie.

Vytvorenie a zdokumentovanie API

Po návrhu databázového modelu nastupujú backend programátori (Java, PHP, Ruby), ktorí vytvoria backendovú časť aplikácie.  Zvyčajne pracuje cez REST volania a funguje ako medzičlánok medzi frontendovou aplikáciou a databázou. Po vytvorení jednotlivých služieb sa zdokumentuje spôsob, prostredníctvom ktorého sa určí, aké možnosti konkrétne volanie poskytuje a aké dáta z neho získame.

Návrh aplikačnej logiky frontend aplikácie a servisnej vrstvy ide ruka v ruke s modelmi

Po ukončení prác na API sa začína pracovať na frontendovej časti aplikácie (v SCR technologies používame overenú Ionic platformu postavenú na JavaScript frameworku Angular7). Ako prvá sa vytvorí štruktúra aplikácie rozdelená podľa modulov, následne sa pracuje na vytvorení modelov a definovaní servisných volaní, ktoré sa namapujú na modely. Tie sa posielajú do jednotlivých komponentov aplikácie, ktorá s nimi pracuje. Nasleduje použitie vhodných pluginov potrebných pre chod aplikácie a implementácia grafického návrhu do užívateľského rozhrania.

Testovanie projektu & bug fixing

Nikdy aplikáciu nevypustite do sveta bez opakovaného a dôkladného testovania. Mal by ho robiť tím šikovných testerov, ktorí appku otestujú krížom-krážom – vyskúšajú funkčnosť aplikácie, užívateľské rozhranie, podrobia automatizovaným testom a prípadné chyby nahlásia vývojárom, ktorí ich opravia.

Devops & vypustenie hotovej aplikácie

Až po dôkladných testoch všetkých funkcionalít a vyladení chýb nasleduje fáza implementácie a integrácie appky na servery. Doladia sa posledné detaily a keď je všetko tak, ako má byť, hotová aplikácia sa nasadí do mobilných obchodov.
Teraz už viete, ako na hybridných appkách pracujú profesionáli. Nezabudnite na to, keď sa rozhodnete investovať svoje ťažko zarobené peniaze do vývoja tej vašej.

Aďo
Angular Developer

Používate zastaralý prehliadač. Môžete si ho aktualizovať na tejto stránke.