Ionic + OpenWeatherMap – prikaz vremenske prognoze

U ovom ću blog postu pokazati kako unutar Ionic aplikacije postaviti API za prikaz vremenske prognoze koristeći OpenWeatherMap.

Iako svaki Android mobilni uređaj sam po sebi već ima prikaz vremenske prognoze, koji je moguće dodatno prilagoditi, na početnom zaslonu ipak može biti korisno ubaciti i ovakav način prikaza takvih informacija.

Npr. ako je u pitanju nekakva turistička aplikacije dobro je prikazati trenutnu vremensku prognozu mjesta u koje smo stigli ili gdje planiramo putovati.

Uvod

Prije svega potrebno je kreirati korisnički račun na https://home.openweathermap.org/users/sign_up

OpenWeatherMap API registracija

Postoji nekoliko različitih opcija od kojih je manji dio besplatan, ali u svakom slučaju i to je dovoljno za osnovni prikaz vremenske prognoze. U slučaju potrebe za dodatnim informacijama moguće je koristiti neki od oblika mjesečne pretplate.

Kreiranje aplikacije

Kreiram novi Ionic, u ovom slučaju Ionic 4, projekt i odmah dodajem podršku za Android platformu.

OpenWeatherMap API

S obzirom da sam se registrirao za besplatnu verziju API-ja mogu, od onoga što je meni trenutno zanimljivo, koristiti samo “Current weather dataAPI i “5 day / 3 hour forecastAPI.

Current weather data

Ovaj API prikazuje trenutnu vremensku prognozu za odabrani grad, a pozivam ga na adresi

U sljedećem primjeru pozivam ovaj API s dva osnovna parametra, a to su: moj API ključ koji sam dobio nakon registracije te ime grada za koji želim dobiti vremensku prognozu.

I odmah dobijem željene podatke na kojima se mogu primijetiti dva detalja. Prvi se tiče opisa vremenske prognoze koji je na engleskom jeziku, a drugi se tiče mjerne jedinice koja nije u °C.

OpenWeatherMap – prikaz vremenske prognoze

Kako bi to promijenio dodat ću još dva parametra u API URL.

Nakon toga mogu vidjeti da je sada opis vremenske prognoze na hrvatskom jeziku i da je mjerna jedinica °C.

OpenWeatherMap – prikaz vremenske prognoze

Ikona se prikazuje na način da se na URL 'http://openweathermap.org/img/w/' doda naziv slike data['weather'][0]['icon'] + ".png" koji se dobije kao odgovor na API zahtjev. Više o tome na poveznici https://openweathermap.org/weather-conditions

Na ekranu to može izgledati ovako, ali je i dalje malo čudno zbog decimalnog prikaza.

Ionic OpenWeatherMap

To se vrlo lako riješi pomoću Math.round().

Što daje sljedeći rezultat

Ionic OpenWeatherMap

5 day / 3 hour forecast

Ovaj API prikazuje vremensku prognozu za pet dana unaprijed u razmacima od po tri sata, a pozivam ga na adresi

OpenWeatherMap API forecast

Nakon svega navedenog u primjeru iznad u ovom se primjeru neće puno toga promijeniti. Rezultat će ostati na hrvatskom jeziku te u obliku °C.

Na ekranu to može izgledati ovako

Ionic OpenWeatherMap forecast

Zaključak

Struktura projekta prema package.json