Publikoval Michal Kočí dňa 13.3.2014 o 14:51 v kategórii Mobilné aplikácie
V minulom príspevku som v skratke popísal čo je to PhoneGap/Cordova - že v takejto aplikácii je iba full screen prehliadač stránok, v ktorom beží vaša aplikácia. Dnes na to nadviažme a povieme si viac...
Keďže v PhoneGap aplikácii je hlavným hráčom web prehliadač, môžem do neho dať svôj web a mám aplikáciu, správne?
Nesprávne. Teda, spraviť to samozrejme môžete, ale s veľkou pravdepodobnosťou vám takúto "aplikáciu" nepustia do AppStore.
Začnime tým, že sa snažíme vytvoriť aplikáciu. Aplikáciu. Nie web. Čiže, ak by bola vaša predstava, že zabalíte vaše tradičné webové stránky do PhoneGap a hotovo, tak vás sklamem. Takto teda nie.
Ak sa snažíte spraviť aplikáciu pre mobily, robte aplikáciu. Rozmýšlajte nad ňou ako nad aplikáciou. Nie ako nad webom, i keď používate používate HTML a JavaScript, technológie prvotne určené pre webové stránky.
Dobrá aplikácia sa líší hlavne tým, že vyzerá a správa sa ako aplikácia. Užívateľovi chcete dať k dispozícii aplikáciu a boli ste úspešný vtedy, ak nepozná, že to nie je tradičná aplikácia napísaná v ObjectiveC, teda ak nebude tušiť, že je to vlastne HTML.
Predstavte si, že si stiahnete aplikáciu, akúkoľvek. Spustíte si ju a začnete sa v nej navigovať. A pri každej navigácii čakáte. Sekundu, dva, možno viac. Potom vidíte, ako sa celá "stránka" renderuje, jednotlivé elementy pribúdajú, štýly sa aplikujú. No vážne, si to predstavte. Chceli by ste takú aplikáciu používať? Snáď nie.
Takže cieľ je jasný. Napísať v HTML a JavaScripte aplikáciu, ktorá je rýchla a prechody medzi "stránkami" nie je vidieť ani cítiť. Neznie to ako SPA? Single-page application? Správne...
Ak teda rozmýšlate, že aplikáciu cez PhoneGap spravíte ako SPA, čiže jednostránkovú, v zmysle, že to bude jedno HTML ktorého obsah sa bude meniť v závislosti na akciách užívateľa, teda nebudete reálne meniť stránky pri navigácii po aplikácii, uvažujete správne.
SPA, ak sa dobre naprogramuje a ak sa pekne naštýluje, má aj šancu dostať sa do AppStore. A má šancu, aby jej užívatelia dali šancu a aby ju mali radi.
Vyberte si technológiu respektíve framework, v ktorom SPA naprogramujete. Máte veľa možností, voľba je len na vás. Ja som si pre Audiolibrix aplikáciu vybral AngularJS, ale vy si vyberte to, čo najviac vyhovuje vám.
AngularJS je super. Umožní vám rýchlo a efektívne meniť DOM, zvláda binding, má dobrú architektúru a napísaný kód sa dobre testuje. Je vyspelý, obľúbený a stále sa vyvýja.
AngularJS tu ale nebudem popisovať, pretože o ňom sa dá nájsť popísaného veľa. Ak vás AngularJS zaujíma, začnite na jeho domovskej stránke, pozrite si o ňom sadu krátkych videí alebo si prečítajte nejakú knihu.
Ak nemáte čas či chuť učiť sa sami AngularJS, rád vás to naučím na mojom školení programovania webových aplikácií v AngularJS. Ak sa chcete rýchlo a ľahko naučiť programovať mobilné aplikácie v Javascripte, určite príďte na moje školenie.
Občas som počul o použití Sencha Touch frameworku, priznám sa, že som ho nikdy neskúšal a tak som ho do úvahy ani nebral. Najmä pre to, že už som mal veľké skúsenosti s vývojom AngularJS mobilnej aplikácie. Ak ale nemáte vybratý framework, určite sa na Sencha Touch pozrite, možno vám bude vyhovovať viac.
Nuž, jednoducho. Píšete HTML a ten určite poznáte. Mobilné telefóny sú na tom s podporou HTML veľmi slušne, iOS webový prehliadač podporuje HTML5 a tak sa nemusíte moc obmedzovať.
I keď pravdepodobne narazíte na veci, ktoré vám na mobile nebudú moc príjemné na použitie (napríklad HTML range), väčšinou ich však viete nahradiť niečím iným (napríklad si "ovládací prvok" poskladáte sami).
CSS je podporované tiež veľmi slušne - môžete rátať s vecami ako media queries, animáciami, ... I keď ak ste niekedy vyvíjali pre mobilné telefóny (nemusela to byť hneď HTML aplikácia, stačí ak to boli HTML stránky), tak viete, že niekedy je to boj a že aj relatívne triviálne veci sú na mobiloch nie vždy dobre naimplementované. Napríklad position:fixed. Rátajte teda s tým, že niektoré veci vám nemusia hneď fungovať tak, ako si predstavujete.
Na štýlovanie aplikácie si tiež môžete zobrať nejaký framework. Ja som sa pôvodne s touto myšlienkou pohrával, nakoniec som od nej po prototype odstúpil.
Moje predstavy o výzore Audiolibrix aplikácie sa rozchádzali s tým, čo niektoré frameworky ponúkajú. Najmä som nechcel, aby aplikácia vyzerala ako tisícky klasických iOS aplikácií. Jednoducho, chcel som mať výzor aplikácie plne pod kontrolou.
Nevravím, že Audiolibrix aplikácia je vrchol krásy, ale je to presne podľa našich predstáv. Alebo blízko našim predstavám. Niektoré časti aplikácie určite prejdú redizajnom, ale hlavné je, že CSS máme plne pod kontrolou.
Vy si tiež vyberte podľa vašich požiadaviek. Trúfnete si postaviť výzor aplikácie v CSS od nuly? Skúste to. Chcete mať rýchlejší vývoj, alebo vám vyhovuje výzor niektorého frameworku? Použite ho. Na začiatok môžete pozrieť sem na výčet niektorých, i keď nezabudnite vždy zvážiť jeho vhodnosť pre mobily.
Ak s vývojom mobilných aplikácií nemáte žiadne skúsenosti, doprajte si čas. A verte, že času budete potrebovať veľa - čas na naštudovanie technológií čí na výber správneho frameworku (JavaScriptového či CSS). Zlý výber a celková nepripravenosť vás môže spomaliť, alebo odradiť úplne.
Pokiaľ sa chcete rýchlo a ľahko naučiť programovať mobilné aplikácie v Javascripte, príďte na moje školenie programovania mobilných aplikácií v Cordove.
Vývoj pre mobily je síce veľmi podobný vývoju pre tradičné prehliadače, ale niekedy budete mať pocit, ako keby ste sa vrátili o pár rokov spät. Niekedy vás prepadne pocit zúfaľstva a budete mať pociť, ze opäť vyvíjate pre IE6. Ale nenechajte sa tým odradiť, je to relatívne bežný jav.
Osobne som si na začiatku zobral AngularJS a jeden CSS framework a napísal rýchly prototyp úvodnej stránky a preklik na ďalšiu. Nahral som to do emulátora a chvíľu sa s tým hral.
Uvidíte, ako to vyzerá v mobile, ako sa to správa, či je to rýchle, ako ľahko sa vám framework používa. Ja som napríklad hneď na to zahodil CSS framework, pretože ma viac obmedzoval, než mi pomáhal.
V ďalšom článku sa pozriem na pluginy. Takže ak som vás od vývoja pre mobily ešte neodradil, zostaňte naladený...
Ak nechceš premeškať príspevky ako je tento, sleduj ma na Twitteri, alebo ak máš RSS čítačku, môžeš sledovať môj RSS kanál.
K tomuto článku nie su pridané žiadne komentáre.
Máš niečo zaujímavé povedať k článku? Pridaj to k článku ako komentár. Spam, reklamu alebo inak nerelevantné komentáre okamžite mažem.