Mr Iľko

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

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:

$ choco install nodejs

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:

$ sudo dnf install nodejs

Úloha

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

$ npm install -g cordova

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:

$ cordova -v
8.1.2 (cordova-lib@8.1.1)

Úloha

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

$ cordova help create

Úloha

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

Úloha

Pridajte do projektu platformy android a browser.

$ cordova platform ls

Úloha

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

Aplikáciu spustíte príkazom:

$ cordova run platform

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

$ cordova run android

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.

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.

Úloha

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

Úloha

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

Úloha

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

Úloha

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

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

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í

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

Úloha

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

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

Úloha

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.

Additional Links

• Node.js

• npm

• Apache Cordova

• Temps - Temps is a modern and minimal menubar application based on Electron with actual weather information and forecast for Windows, Mac and Linux.