Mr Iľko

Cordova, JavaScript, npm

About

Hybridne aplikacie

Objectives

  • naučiť sa základy práce s rámcom Cordova

Content

The Environment

V prvom kroku si pripravíme nástroje a prostredie, v ktorom budeme vytvárať projekt.

Úloha 1.1

Nainštalujte si do svojho prostredia nástroj npm.

npm je správca balíčkov pre JavaScript. Je súčasťou inštalácie nástroja Node.js. Takže ak chceme do systému nainštalovať npm, musíme do systému nainštalovať Node.js.

Ak používate OS Windows a máte nainštalovaného správcu balíčkov chocolatey, inštaláciu vykonáte z príkazového riadku nasledovne:

Ak používate niektorú z linuxových distribúcií, Node.js nainštalujete priamo z balíčkov distribúcie. Ak ste používateľom napríklad distribúcie Fedora, napíšte do príkazového riadku:

Poznámka

V prípade inštalácie z balíčkov distribúcie si overte, či verzia, ktorú inštalujete, vyhovuje vašim požiadavkám. Môže byť totiž staršia ako tá, ktorá je dostupná priamo na domovskej stránke projektu. Vždy teda môžete nainštalovať najnovšiu verziu Node.js priamo zo stránky projektu www.nodejs.org.

Úloha 1.2

Pomocou nástroja npm nainštalujte rámec Cordova a overte úspešnosť inštalácie.

Po úspešnom nainštalovaní budete mať z príkazového riadku dostupný nástroj cordova. Úspešnosť inštalácie overte spustením s prepínačom -v, ktorý zobrazí verziu nástroja:

Úloha 1.3

Pomocou nástroja cordova vytvorte nový projekt s názvom MrIlko, ktorý sa bude nachádzať v balíku sk.tuke.smart.mrilko a umiestnite ho do priečinka mrilko_project/.

Na vytvorenie projektu použite globálny príkaz nástroja cordova s názvom create. Má niekoľko parametrov (podľa poradia):

  1. priečinok projektu
  2. balíček projektu
  3. názov projektu

Poznámka

Pre získanie ďalších informácií ohľadom používania príkazu create môžete využiť príkaz help v tvare:

Úloha 1.4

V súbore confix.xml doplňte opis aplikácie spolus informáciami o vás ako autorovi aplikácie.

Úloha 1.5

Pridajte do projektu platformy android a browser.

Poznámka

Platformy, ktoré sa v projekte nachádzajú, si môžete zobraziť príkazom:

Úloha 1.6

Spustite aplikáciu Mr Iľko na oboch platformách.

Aplikáciu spustíte príkazom:

kde platform je názov platformy, na ktorej chcete aplikáciu spustiť. Spustenie aplikácie na platforme android bude teda vyzerať nasledovne:

Po spustení dôjde k vytvoreniu balíku aplikácie pre OS Android spolu so spustením emulátora, na ktorý bude následne táto aplikácia spustená. V prípade, že sa tak nestane, overte nastavenie svojho systému.

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

Po spustení aplikácie na platforme browser dôjde k vytvoreniu webového servera a spustenie prehliadača na adrese http://localhost:8000/index.html.

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

Úloha 1.7

Odstráňte z priečinku www/ súbory css/index.css a js/index.js.

Úloha 1.8

Nahraďte súbor index.html v priečinku www/ týmto súborom.

Úloha 1.9

Do priečinku css/ stiahnite súbor app.css.

Úloha 1.10

V priečinku js/ vytvorte prázdny súbor s názvom app.js.

Search Activity

V tomto kroku pripravíme aktivitu, ktorá je zodpovedná za získanie informácií zo služby openweathermap.org.

Úloha 2.1

Po načítaní stránky (udalosť load alebo stav document ready) schovajte element <div> s id="detail" a overte svoju implementáciu.

Aktuálne sa na stránke zobrazujú obe aktivity (elementy <div> s id v jednom prípade seach a v druhom detail). Chceme ale, aby sa po spustení aplikácie zobrazovala len aktivita s id="search". Ak teda budete postupovať správne, po vyriešení úlohy sa na obrazovke bude zobrazovať len aktivita na vyhľadanie mesta.

Úloha 2.2

Ošetrite, aby po kliknutí na tlačidlo vyhľadať, došlo k získaniu predpovede počasia pre zadané mesto zo služby openweathermap.org.

Údaje získate z adresy http://api.openweathermap.org/data/2.5/weather?units=metric&q=QUERY&appid=APPID, kde: * QUERY - obsahuje názov mesta, pre ktoré sa snažíme získať predpoveď počasia, a * APPID - je kľúč do služby openweathermap.org na získanie údajov o počasí

Poznámka

Pokiaľ nemáte vlastný kľúč, môžete použiť kľúč 08f5d8fd385c443eeff6608c643e0bc5.

Po získaní údajov zo služby ich vypíšte do konzoly.

Poznámka

Nezabudnite na potlačenie predvoleného správania, ktoré po klinutí na tlačidlo formulára znovunačíta stránku.

Úloha 2.3

Zabezpečte, aby sa po úspešnom získaní údajov zobrazil element <div> s id="detail", a aby element <div> s id="search" sa naopak skryl.

Úloha 2.4

Získané údaje zo služby openweathermap.org vizualizute.

Úloha 2.5

Overte správnosť svojej implementácie.

Additional Tasks

  1. Ak pri vyhľadávaní dôjde k chybe, zobrazte varovné dialógové okno bez toho, aby ste zobrazili okno s detailmi.