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

npm install -g cordova

Create a project

cordova create torch sk.tuke.smart.torch Torch

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:

cordova create torch 
cordova help create

Adding a Platform

cordova platform ls
cordova platform add android
cordova platform add browser
cordova platform ls

Running Your Application

cordova run android
cordova run browser

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:

cordova run browser

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:

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:

find www | entr cordova prepare browser

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:

cordova plugin add cordova-plugin-browsersync

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:

cordova run browser -- --live-reload

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

cordova run android

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

Nová aplikácia spustená v Android emulátore

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)

Application Layout

  • Začneme podobne, ako v prípade baterky pre Android - rozložením aplikácie. Aplikácia sa bude skladať z jedného obrázku a jedného tlačidla.

  • Rozloženie aplikácie budeme vytvárať a upravovať v súbore www/index.html. Ten na začiatku upravíme tak, že z neho odstránime nepotrebné riadky a pridáme odkazy na knižnicu jQuery a našu aplikáciu:

    <#include "src/cordova_torch_default.index.html">

  • Nasledovné obrázky uložíme do priečinku www/img/ bulb_on bulb_off

  • Kód rozloženia bude vyzerať nasledovne: html <img src="img/bulb_off.png"/> <br/> <button type="button">Turn On</button>

  • Ak teraz spustíme aplikáciu, bude vyzerať nasledovne: Rozloženie aplikácie Torch

  • Je na čase, aby sme sa pohrali trošku s vizuálom a zabezpečili, aby:

    • pozadie aplikácie bolo čierne, a
    • elementy boli umiestnené na stred (aspoň horizontálne)

  • Aktualizujeme teda súbor so štýlmi aplikácie torch.css nasledovne: css body { background-color: black; text-align: center; }

  • Po spustení bude aplikácia vyzerať nasledovne: Aplikovanie základného štýlu na aplikáciu Torch

Torch Behavior

  • Teraz začneme upravovať správanie aplikácie v súbore www/js/torch.js. Začneme tým, že na tlačidlo pridáme udalosť, pomocou ktorej dôjde pri jeho stlačení k zmene jeho nápisu: javascript $('button').on('click', function(){ $(this).text('Turn Off'); });

  • Keď overíme funkcionalitu, zistíme, že po prvom kliknutí dôjde k zmene textu tlačidla, ale naspäť k jeho zmene nedôjde. Potrebujeme teda opäť uchovávať stav baterky a pri jeho zmene aktualizujeme text tlačidla. ```javascript var isOn = false;

    $(‘button’).on(‘click’, function(){ if(isOn == true){ isOn = false; $(this).text(‘Turn On’); }else{ isOn = true; $(this).text(‘Turn Off’); } }); ```

  • Teraz už pôjde po stlačení tlačidla pekne prepínať. Až na to, že na žiarovke k žiadnemu prepínaniu nedôjde. Ošetríme teda kliknutie aj na žiarovku, vytvoríme funkciu update(), ktorá bude zodpovedná za aktualizáciu baterky pri zmene stavu a budeme ju volať pri stlačení tlačidla alebo pri kliknutí na obrázok:

    <#include "src/torch.js">

  • Ak teraz vyskúšame aplikáciu, tak sa bude správať presne tak, ako má. Teda až na jednu maličkosť, ktorou je práve rozsvietenie svetla na telefóne. Na to sa teraz pozrieme.

Let There be Light!

  • Cordova nemá v základe všetku potrebnú funkcionalitu. Je ju však možné rozširovať pomocou plugin-ov. K nim sa dostaneme prostredníctvom vyhľadávača priamo zo stránky http://cordova.apache.org/plugins/

  • Tu sa teda skúsime do vyhľadávača zadať kľúčové slovo flashlight

  • Našťastie nájdeme plugin s názvom cordova-plugin-flashlight, ktorý nainštalujeme do našej aplikácie príkazom:

    cordova plugin add cordova-plugin-flashlight

  • To, či sa podarilo plugin úspešne nainštalovať, uvidíme na príkazovom riadku priamo po jeho inštalácii. Rovnako však môžeme skontrolovať obsah súboru config.xml alebo spustiť nasledovný príkaz, ktorým nám vypíše zoznam všetkých nainštalovaných plugin-ov:

    cordova plugins

  • Na stránke plugin-u je možné vidieť rovnako aj ukážku jeho použitia. Upravíme teda funkciu update() nasledovne:

    function update(){
    if(isOn == true){
        isOn = false;
        $('button').text('Turn On');
        $('img').attr('src', 'img/bulb_off.png');

        // switch off
        window.plugins.flashlight.switchOff();
    }else{
        isOn = true;
        $('button').text('Turn Off');
        $('img').attr('src', 'img/bulb_on.png');

        // switch on 
        window.plugins.flashlight.switchOn(
            function() {}, // optional success callback 
            function() {}, // optional error callback 
            {intensity: 0.3} // optional as well 
        );
    }
}

  • Na to, aby sme funkcionalitu tohto plugin-u mohli vyskúšať, samozrejme potrebujeme aplikáciu spustiť na reálnom zariadení s OS Android. V prehliadači nám bude Cordova vypisovať pri volaní chybu.

    cordova android run

  • Okrem týchto funkcií je však možné využiť aj funkciu toggle(), ktorá sama zabezpečí prepínanie kamery na základe jej vnútorného stavu. To vieme s výhodou využiť a upraviť celý kód nasledovne:

    <#include "src/torch_with_flashlight.js">

Building Application Package

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

    cordova build android

Conclusion

Resources