Mr Iľko

viacobrazovková aplikácia, asynchrónne volanie, REST API

About

Dnes vytvoríme jednoduchú aplikáciu na získanie predpovede počasia. Na tento účel využijeme externé API služby openweathermap.org a tentokrát bude mať aplikácia viac obrazoviek.

Objectives

  • naučiť sa jeden zo spôsobov tvorby aplikácií s viacerými obrazovkami
  • pracovať s REST API služby openweathermap.org

Content

Get Ready!

V tomto kroku si vytvoríte a nastavíte projekt.

Úloha

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/.

Úloha

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

Úloha

Pridajte do projektu platformy android a browser.

Úloha

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

Ú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 Screen

V tomto kroku pripravíte obrazovku, 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 obrazovky (elementy <div> s id v jednom prípade seach a v druhom detail). Chceme ale, aby sa po spustení aplikácie zobrazovala len obrazovka s id="search". Ak teda budete postupovať správne, po vyriešení úlohy sa na obrazovke bude zobrazovať len obrazovka 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.

Detail Screen

V tomto kroku vizualizujete získané údaje.

Ú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.

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

  • Weather API - opis použitia REST API služby openweathermap.org