Vývoj hybridných mobilných aplikácií

vývoj hybridných aplikácií pomocou rámca Apache Cordova

Oznamy

  • Hackathon (slide)
    • registrácia uzavretá
    • late registration
  • Art&Tech Days Kosice (slide)
    • Game Days

Motivácia

  • Úvod do tvorby hybridných aplikácií
    • podstata, princíp
    • html5
  • viaceré rámce

WarmUp

  • Ešte predtým, ako začneme so samotným vývojom, si potrebujeme pripraviť prostredie. Potrebujeme zabezpečiť tieto veci:

    • nainštalovať node.js
    • nainštalovať Cordovu
    • vytvoriť samotný projekt
    • pridať platformy, pre ktoré budeme projekt vyvíjať

Installing Cordova

Create a project

kde:

  • torch - je názov priečinka, v ktorom bude váš projekt vytvorený
  • sk.tuke.smart.torch - je doména vašej spoločnosti/organizácie zapísaná opačne
  • Torch - je názov aplikácie

Samotné vytvorenie projektu je možné aj len s parametrom priečinka, čiže:

Poznámka

Po vytvorení projektu je možné doménu spolu s názvom aplikácie zmeniť v konfiguračnom súbore config.xml, ktorý sa nachádza v koreňovom priečinku projektu.

Adding a Platform

Running Your Application

Poznámka

Ak chcete pracovať priamo s Androidom, potrebujete mať vo vašom systéme dostupný systém Gradle. Buď si ho priamo nainštalujte a cestu k jeho binárke pridajte do systémovej cesty (alebo do premennej PATH v linuxových systémoch) alebo si len nalinkujte binárku z inštalácie Gradle v Android Studiu.

Ak máme pripravené prostredie, môžeme vyskúšať spustiť samotnú aplikáciu. Pre spustenie aplikácie vo webovom prehliadači napíšme v príkazovom riadku príkaz:

Týmto príkazom bol spustený server na adrese 8000, na ktorý sa je možné pripojiť a výslednú aplikáciu pozrieť. Cordova spustí prehliadač sama a výsledná aplikácia bude v prehliadači vyzerať nasledovne:

Obr. 1: Nová aplikácia spustená v prehliadači
Obr. 1: Nová aplikácia spustená v prehliadači

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. použitím nástroja entr z príkazového riadku Linux-u nasledovne:

Je však možné doinštalovať rozšírenie s názvom Cordova Browser-Sync Plugin, ktoré zabezpečí aktualizovanie aplikácie o nový kód. Rozšírenie sa nainštaluje príkazom:

Podporu aktualizácie kódu na cieľovej platforme je následne možné zabezpečiť spustením platformy s prepínačom --live-reload nasledovne:

Poznámka

Uvedené rozšírenie zabezpečí znovunahratie aktualizovanej verzie aplikácie na cieľovú platformu. Ak je cieľovou platformou prehliadač, nezabudnite jeho obsah obnoviť!

Podobne, ak chceme otestovať aplikáciu na platforme Android, napíšeme do príkazového riadku príkaz:

Výsledná aplikácia sa nachádza na nasledovnom obrázku:

Obr. 2: Nová aplikácia spustená v Android emulátore
Obr. 2: Nová aplikácia spustená v Android emulátore

Poznámka

Ak však nemáte v systéme vytvorený žiadny emulátor, aplikácia sa nespustí. Emulátor z príkazového riadku vytvoríte pomocou nástroja avdmanager, ktorý sa nachádza v priečinku /tools/bin/ vašej inštalácie Android SDK. Jeho použitie môže vyzerať napríklad takto:

./avdmanager create avd -n test_phone -k "system-images;android-19;google_apis;x86"

Project Structure

  • Po vytvorení projektu bude jeho štruktúra vyzerať nasledovne:

    .
        ├── config.xml
        ├── hooks/
        ├── package.json
        ├── platforms/
        │    ├── android/
        │    └── browser/
        ├── plugins/
        ├── res/
        └── www/
            ├── css/
            │   └── index.css
            ├── img/
            │   └── logo.png
            ├── index.html
            └── js/
                └── index.js
  • Význam jednotlivých priečinkov a súborov je nasledovný:
    • config.xml - súbor s konfiguráciou projektu
    • platforms/ - priečinok, v ktorom sa nachádzajú nainštalované platformy (v našom prípade sa jedná o dve platformy Android a prehliadač)
    • www/ - priečinok s našou aplikáciou
    • res/ - zdroje, medzi ktorými sa nachádza aj ikona aplikácie

Project Configuration

  • V súbore config.xml sa nachádza konfigurácia projektu. Význam jednotlivých položiek je nasledovný:

    • widget - The app reverse domain value that we specified when creating the app.
    • name - The name of the app that we specified when creating the app.
    • description - Description for the app.
    • author - Author of the app.
    • content - The app’s starting page. It is placed inside the www directory.
    • plugin - The plugins that are currently installed.
    • access - Used to control access to external domains. The default origin value is set to * which means that access is allowed to any domain. This value will not allow some specific URLs to be opened to protect information.
    • allow-intent - Allows specific URLs to ask the app to open. For example, will allow tel: links to open the dialer.
    • platform - The platforms for building the app.

Project Torch

  • Projekt samotný už poznáme z čias, keď sme ho robili pre Android. Tentokrát však skúsime jeho implementáciu pomocou webových technológií pomocou rámca Cordova.

  • O vizuál projektu sa bude starať webový rámec Bootstrap a o funkčnú časť sa bude starať rámec jQuery

  • Najprv stiahneme potrebné .js a .css súbory a umiestnime ich do príslušných priečinkov v priečinku www/. Konkrétne sa jedná o tieto súbory:
    • jQuery - stačiť nám bude súbor jquery.min.js, ale pre parádnejšie aplikácie je možné použiť aj jQuery Mobile
    • Bootstrap - stačiť nám budú súbory bootstrap.min.js a bootstrap.min.css
    • Popper - závislosť rámca Bootstrap, pozor však na sťahovanú verziu (musí byť umd)

Poznámka

Samozrejme je možné zmenšiť aplikáciu tým, že budeme príslušné súbory sťahovať pri spustení aplikácie z CDN serverov. Ak však chceme aplikáciu používať aj offline, nie je dobré sa spoliehať, že budeme mať určite nejakú verziu uloženú v cache.

Application Layout

Torch Behavior

Let There be Light!

Building Application Package

  • Ak chceme vytvoriť z výslednej aplikácie balíček pre zvolenú mobilnú platformu, použijeme príkaz build:

Conclusion

Resources