Ladíme Cordova/PhoneGap mobilnú aplikáciu

Publikoval Michal Kočí dňa 23.04.2014 o 18:59 v kategórii Mobilné aplikácie

Máte aplikáciu rozrobenú a niečo nefunguje. Alebo nefunguje presne tak, ako by malo. Alebo sa s niečím trápite a potrebovali by ste detailnejšie vidieť, čo presne sa vám v aplikácii deje. Áno, nastal čas ladenia (debugovania).

Ladenie priamo v desktopovom prehliadači

Vzhľadom na to, že vyvíjate webovú aplikáciu, asi vás ako prvé napadne, ladiť priamo v prehliadači. A prečo aj nie, spustite si prehliadač a...

A nič. Teda, záleží. Používate nejaké Cordova API? Nefunguje? Alebo sa aplikácia ani nenaštartuje, lebo nikdy nenastane udalosť deviceready? Vitajte v realite.

Čo s tým? Môžete skúsiť nájsť nejaký workaround, napríklad môžete vyskúšať phonegap-desktop.

Mňa osobne však zaujíma, ako aplikácia funguje na mobile a tak som tento spôsob ladenia zavrhol, čo však neznamená, že vám nebude vyhovovať. Vyskúšajte a uvidíte...

Ladenie JavaScriptu

Ak ste zvyknutí ladiť weby, isto ste už niekedy použili konzolu a do nej ste si logovali informácie, ktoré vám pomohli pochopiť, čo sa v aplikácii deje. Ak vám toto stačí, ste v pohode - logovanie do konzoly môžete naďalej používať aj pri vývoji cez Cordovu.

console.log - neoceniteľný pomocník. Dáte si pár volaní tejto logovacej funkcie a... Nič. Nikde ich nevidíte. Ak ich vidíte, máte už zrejme nainštalovaný potrebný plugin.

Ak v logoch nič nevidíte, plugin si nainštalujte, ide o plugin org.apache.cordova.console a je to jeden zo základných Cordova pluginov dostupný pre iOS aj Android. Pre iOS logovacie záznamy uvidíte v Output okne, pre Android v LogCate.

Jeden drobný problém, na ktorý môžete na Androide naraziť je, že ak console.log voláte s viacerými parametrami (môj zvyk z desktopu), v LogCate uvidíte iba hodnotu prvého. Navyše, ak je to objekt, moc užitočný výpis to nebude. Rátajte s tým a logovanie tomu prispôsobte. Na iOS taký problém nie je.

Ladenie užívateľského rozhrania (vzdialený web inspector)

Ak vyvíjate weby, pravdepodobne poznáte vývojárske nástroje (niekedy nazývané F12, pretože to je klávesová skratka na ich zobrazenie vo väčšine prehliadačoch, ktoré ich obsahujú). Nebolo by super mať niečo také k dispozícii aj pri vývoji Cordova mobilných aplikácií? Samozrejme, že bolo a pre iPhone aplikácie to aj možné je. Bohužial, pre Android to nie je také jednoduché...

Na mojom školení programovania mobilných aplikácií v Cordove sa venujeme aj možnostiam ladenia a odstraňovania problémov a to ako Javascriptového kódu tak aj UI (HTML, CSS). Pokiaľ sa chcete rýchlo a ľahko naučiť programovať mobilné aplikácie v Javascripte, príďte na moje školenie.

iOS

Takže, vyvíjate pre iOS, máte Mac a na ňom Safari. V Safari chodťe do nastavení, na záložku Rozšírené a úplne dole povoľte hodnotu Zobraziť menu pre vývojárov v lište. Následne v hlavnom menu uvidíte položku Vývojár.

Druhý krok je povoliť ladenie na zariadení (simulátor to má povolené by default). Choďte do nastavení, vyberte Safari, dole vyberte Rozšírené a následne zapnite voľbu Webový inšpektor.

Ak ste správne nastavili Safari na desktope aj na zariadení, v momente kedy budete mať spustené Safari, alebo vašu aplikáciu, ktorá interne používa webový prehliadač, v desktopovom Safari v položke Vývojár uvidíte svoje zariadenie a v ňom spustenú aplikáciu. Tak si viete spustiť inšpektora a smelo ho začať používať.

Android

Nuž, s Androidom je to trochu horšie a ťažšie. Teda ak nemáte aspoň Android 4.4 a Chrome 30 alebo novší.

Tým, že ja som vývoj začal na iPhone, celú aplikáciu som odladil na ňom a nakoľko prehliadače na Androidoch 4 a vyšších už slušne podporuje HTML5, nemusel som našťastie ladenie UI na Androide ani raz riešiť. Navyše mám zariadenie s Android 4.3, takže by to ani nebolo moc jednoduché...

V minulosti som mal docela dobré skúsenosti s ladením cez Weinre, ak teda potrebujete debugovať tak v prvom rade príjmite moju úprimnú sústrasť a v druhom rade pozrite na Weinre, alebo ešte lepšie, pozrite sa na článok, ktorý sa debugovaniu venuje viac.

Ladenie natívneho kódu

Ladenie natívneho kódu sa vám hodí vtedy, ak ste si sami napísali nejaký plugin (o Cordova/PhoneGap pluginoch som písal minule), alebo ak vám niektorý z dodaných pluginov nefunguje ako má. Že sa to môže stať vám môžem z vlastných skúseností potvrdiť...

Dobrá správa je, že aj XCode, aj Eclipse vám s ladením pomôžu, klasicky v nich môžete pridávať breakpointy, môžete si logovať (funkcia NSLog v ObjectiveC či trieda Log v Jave), môžete si pozerať hodnoty premenných... no jednoducho môžete robiť to, na čo ste pri klasickom ladení zvyknutý.

Záverom

Ako vidno, ladiť sa dá, niekde je to jednoduchšie (iOS), niekde zložitejšie (Android), ale poväčšinou sa dá. Prajem vám, aby ste ladiť ideálne nemuseli a ak aj áno, tak len minimálne. Nič príjemné to totiž nie je...

Mohlo by ťa tiež zaujímať

Páčil sa ti príspevok?

Zdieľaj príspevok alebo si ho odlož na neskôr

Sleduj ma

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.

Komentáre

K tomuto článku nie su pridané žiadne komentáre.

Pridať komentár

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.

Pridanie komentára sa nepodarilo. Oprav si prosím chyby.