Part 02

ukážková aplikácia, pridanie zdrojov do aplikácie, inštalácia modulov tretích strán

Oznamy

(slide) Eastcode Sessions: Apache Kafka
(slide) Hackathon
aktualizácia problemset-u 0:
- oprava obrazu na stiahnutie
- pridané build tools na inštaláciu

Project Torch

(slide) Na minulej prednáške sme si predstavili hybridný rámec na vývoj mobilných aplikácií Apache Cordova a začali sme vyvíjať aplikáciu Torch. Dnes túto aplikáciu dokončíme.
(slide) Ešte predtým, ako sa pustíme do vývoja, si znova pripomeňme, čo je úlohou aplikácie - jedná sa o jednoduchú implementáciu aplikácie baterka, pričom ako svetlo bude využívať blesk zadnej kamery.

Pre zopakovanie si projekt vytvorím znova týmito príkazmi:

$ cordova create torch sk.tuke.smart.torch Torch
$ cordova platform add browser
$ cordova platform add android
$ cordova plugin add cordova-plugin-browsersync
$ cordova run browser -- --live-reload

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

Začneme rozložením, resp. vzhľadom 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:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/torch.css">
        <title>Torch</title>
    </head>
    <body>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/torch.js"></script>
    </body>
</html>

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

Kód rozloženia bude vyzerať nasledovne:

<img src="img/bulb_off.png"/>
<br/>
<button type="button">Turn On</button>

Ak teraz spustíme aplikáciu, bude vyzerať nasledovne:
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:

body {
    background-color: black;
    text-align: center;
}

Po spustení bude aplikácia vyzerať nasledovne:

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:
```
$('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.

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:

var isOn = false;

$('button').on('click', function(){
    update();
});


$('img').on('click', function(){
    update();
});

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

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
```
Poznámka

Pri inštalovaní nezabudnite na to, že musíte byť vo vnútri priečinku s vašim projektom!
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:

$('button').on('click', function(){
    update();
});

$('img').on('click', function(){
    update();
});

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

    if(window.plugins.flashlight.isSwitchedOn()){
        $('button').text('Turn Off');
        $('img').attr('src', 'img/bulb_on.png');
    }else{
        $('button').text('Turn On');
        $('img').attr('src', 'img/bulb_off.png');
    }
}

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
```

Additional Resources

slajdy z prednášky