Hybridní mobilní aplikace: Jak ušetřit statisíce a dostat se až na vrchol žebříčku Google Play

DEV tým Skrz.cz
5 min readJan 6, 2020

--

Ve Skrz.cz jsme se před 3 lety vydali, v rámci tvorby mobilní aplikace, cestou hybridního vývoje. Co to zjednodušeně znamená? Z jedné codebase (díky jednomu zdrojovému kódu) vytváříme aplikaci, kterou můžeme následně jednoduše nahrát do zařízení s Androidem, iOS, Mac OS X nebo Windows.

Ačkoliv tento přístup v ČR možná není příliš známý, pro určitou část projektů to může být velmi výhodná a především úsporná varianta. O tom, jaké výhody (i nevýhody) tento vývoj přináší, jsme se rozhodli rozepsat v následujících odstavcích.

A jestli již nyní pochybujete o tom, že hybridní aplikace může fungovat, můžeme na sebe prásknout, že naše mobilní aplikace má na Google Play více než 2 tisíce hodnocení s průměrnou známkou 4,7. A ruku na srdce, takové hodnocení má jen velmi málo českých nativních aplikací.

Co je to ten Ionic, potažmo hybridní vývoj?

Ionic, který jsme zvolili pro vývoj naší aplikace, si můžete zjednodušeně představit jako sbírku komponent nebo UI toolkit pro front-end — obdobně jako Bootstrap nebo Foundation. O aktuální oblíbenosti Ionicu svědčí například umístění v TOP 100 nejcennějších repozitářů Githubu v roce 2019.

Vytvořená aplikace běží v cílovém zařízení uživatele ve Web view, které zde funguje jako moderní webový prohlížeč s jednoduchým přístupem k fotoaparátu, bluetooth, geolokaci a mnoha dalším funkcím pomocí standardního HTML5 API.

Pokud vám toto základní propojení nestačí, můžete použít také vrstvu s nativními pluginy (přímý přístup k Hardware API zařízení). Takto můžete jednoduše mezi použitelné funkce aplikace přidat podporu Touch ID, Apple Pay, Google Maps, čtečky čárových kódů a mnoho dalšího. To celé poté zabalíte pomocí Apache Cordova jako nativní aplikaci.

„Použití fotoaparátu, Touch ID, Apple Pay, Google Maps a mnoho dalšího není pro hybridní vývoj problém.”

Výchozí soubor vaší aplikace se spustí ve Web View a aplikace na zákazníka působí jako každá jiná. Aktuálně můžete díky Cordově vyexportovat nativní aplikaci pro iOS, Android, Electron, Progressive Web Application nebo Windows Phone. Posledního jmenovaného uvádíme spíše pro úplnost, protože vývoj tohoto systému již nepokračuje.

Checkboxy pro Android (Material design).

Usnadňuje nějak framework vývoj pro jednotlivé mobilní OS?

Framework je multiplatformní, takže z jednoho kódu můžete jednoduše spravovat aplikaci pro více operačních systémů. Komponenty jsou navíc upraveny tak, aby byly vizuálně shodné s prvky nativních aplikací (Material design v Androidu nebo Apple UI Design pro iOS).

Checkboxy v IOS. Zdroj: Ionicframework.com

To pro vás znamená méně času na grafický návrh prvků aplikace a více na samotný vývoj jejich funkcí.

Jaký programovací jazyk musím umět, abych si aplikaci napsal?

Jedná se o open-source, který má připravené komponenty pro React, Angular, Vue.js a moderní webové prohlížeče pomocí standardu Web components. Hlavním jazykem nad celým frameworkem je tedy Javascript.

Ve Skrzu používáme pro frontendovou část Angular, proto i odkaz na dokumentaci směřuje na něj. Nicméně díky framework-agnostic pohledu vývojářů Ionicu (od verze 4) můžete dokumentaci snadno přepnout na výše zmíněné alternativní frameworky.

A kolik tedy potřebujeme vývojářů pro celou mobilní aplikaci?

Vývoj nativní aplikace bývá relativně drahou záležitostí. Jen velmi málo vývojářů vám totiž dokáže napsat aplikaci pro Android i iOS zároveň.

Rozdíl mezi vývojem nativní a hybridní aplikace. Zdroj: Ionicframework.com

A pokud již takového jednorožce najdete, psaní duplicitního kódu mu zabere nějaký čas — vývoj se tedy prodlouží. V opačném případě potřebujete pro každou platformu jednoho vývojáře. To samozřejmě neznamená pouze větší náklad na vývoj, ale i více starostí s procesy/komunikací.

Na celý vývoj hybridní aplikace stačí jeden full-stack vývojář.”

A kolik lidí pracuje na hybridní aplikaci ve Skrzu? Na celý vývoj hybridní aplikace ve Skrzu stačí jeden full stack vývojář, který zvládne obstojně programovat v Javascriptu (my používáme v Angularu jeho nadstavbu — Typescript), HTML a CSS.

Pokud potřebujete aplikaci plnit jako tenkého klienta i dynamickými daty, musí vývojář také umět i nějakou serverovou technologii. V ní je poté napsáno API pro předávání dat. U nás máme od první verze aplikace REST API, ale samozřejmě můžete využít například GraphQL a usnadnit si tak budoucí rozšiřování přístupových bodů.

Díky tomuto je velice snadné v případě chyby udělat rychlou opravu a aplikaci v krátkém čase nahrát na obchody pro všechny podporované platformy — a to bez větších starostí s udržováním jejich specifických grafických rysů. Na druhou stranu musíte aplikaci před nasazením otestovat na všech platformách najednou.

Je tedy hybridní vývoj vhodný pro všechny?

Velké výhody hybridního vývoje se samozřejmě vztahují především na aplikace prezentující firmu nebo produkt. Pokud plánujete aplikaci s vysokými grafickými požadavky (typicky například hry) nebo vysokým výpočetním výkonem, zvolte raději nativní implementaci. Ačkoli při využití Service Workers můžete určitým způsobem dělat snadno ve více vláknech dnes i toto.

Výhodou celého ekosystému je navíc to, že řada vývojářů Ionicu a komunita kolem pracují na podpůrných nástrojích jako je Studio (rychlý návrh uživatelských rozhraní), AppFlow pro řízení celého procesu testování, buildů a následného nasazování do App / Play store. Navíc můžete využít velké množství již vytvořených integrací do služeb třetích stran (Firebase, Crashlytics, Facebook ad.).

A co vy a hybridní vývoj?

Chtěli byste se dozvědět více informací k některým ze zmíněných částí? Používáte na nějaký z popisovaných problémů jiné řešení?

Napište nám níže do komentářů nebo k příspěvku na Twitteru.

A pokud byste se chtěli zdokonalit nebo naučit práci s Ionicem, tak máte skvělou příležitost — hledáme nové parťáky do týmu.

--

--

DEV tým Skrz.cz

Blogují vývojáři Skrz.cz o všem, co zajímavého řeší při programování Skrz.cz / Sortado.pl (PHP, Front-end, Javascript, NodeJS, Redis, MySQL, Nginx, Elastic,..)