{"id":8634,"date":"2018-11-18T21:16:16","date_gmt":"2018-11-18T19:16:16","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=8634"},"modified":"2019-01-05T19:45:29","modified_gmt":"2019-01-05T17:45:29","slug":"ionic-openweathermap","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/","title":{"rendered":"Ionic + OpenWeatherMap – prikaz vremenske prognoze"},"content":{"rendered":"

U ovom \u0107u blog postu pokazati kako unutar Ionic<\/em> aplikacije postaviti API<\/em> za prikaz vremenske prognoze<\/strong> koriste\u0107i OpenWeatherMap<\/a><\/em>. <\/p>\n

Iako svaki Android<\/em> mobilni ure\u0111aj sam po sebi ve\u0107 ima prikaz vremenske prognoze, koji je mogu\u0107e dodatno prilagoditi, na po\u010detnom zaslonu ipak mo\u017ee biti korisno ubaciti i ovakav na\u010din prikaza takvih informacija. <\/p>\n

Npr. ako je u pitanju nekakva turisti\u010dka aplikacije dobro je prikazati trenutnu vremensku prognozu mjesta u koje smo stigli ili gdje planiramo putovati.<\/p>\n

Uvod<\/h2>\n

Prije svega potrebno je kreirati korisni\u010dki ra\u010dun na https:\/\/home.openweathermap.org\/users\/sign_up<\/a><\/p>\n

\"OpenWeatherMap<\/a><\/p>\n

Postoji nekoliko razli\u010ditih opcija od kojih je manji dio besplatan<\/a>, ali u svakom slu\u010daju i to je dovoljno za osnovni prikaz vremenske prognoze. U slu\u010daju potrebe za dodatnim informacijama mogu\u0107e je koristiti neki od oblika mjese\u010dne pretplate.<\/p>\n

Kreiranje aplikacije<\/h2>\n

Kreiram novi Ionic<\/em>, u ovom slu\u010daju Ionic 4<\/a><\/em>, projekt i odmah dodajem podr\u0161ku za Android<\/em> platformu.<\/p>\n

$ ionic start IonicWeather blank--type=angular\r\n$ cd IonicWeather\r\n$ ionic cordova platform add android<\/pre>\n
OpenWeatherMap API<\/h2>\n
S obzirom da sam se registrirao za besplatnu verziju<\/a> API<\/em>-ja mogu, od onoga \u0161to je meni trenutno zanimljivo, koristiti samo “Current weather data<\/a><\/em>” API<\/em> i “5 day \/ 3 hour forecast<\/a><\/em>” API<\/em>.<\/p>\n
Current weather data<\/h4>\n
Ovaj API<\/em> prikazuje trenutnu vremensku prognozu za odabrani grad, a pozivam ga na adresi  <\/p>\n
http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=<\/pre>\n
U sljede\u0107em primjeru pozivam ovaj API<\/em> s dva osnovna parametra, a to su: moj API<\/em> klju\u010d koji sam dobio nakon registracije te ime grada za koji \u017eelim dobiti vremensku prognozu. <\/p>\n
import { Component } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: 'home.page.html',\r\n  styleUrls: ['home.page.scss'],\r\n})\r\nexport class HomePage {\r\n\r\n  vrijemeObjekt = {\r\n    temperatura: 0,\r\n    opis: '',\r\n    slika: ''};\r\n\r\n  grad: string = \"Vinkovci\";\r\n\r\n  constructor(\r\n    private _http: HttpClient) {\r\n  }\r\n\r\n  ionViewDidEnter(){\r\n    this.prikaziVrijeme();\r\n  }\r\n\r\n  prikaziVrijeme(){\r\n    this._http.get(\"http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=\" + this.grad + \"&appid=********************************\")\r\n    .subscribe((data) => {\r\n        console.log(data);\r\n        this.vrijemeObjekt.temperatura = data['main']['temp'];\r\n        this.vrijemeObjekt.opis = data['weather'][0]['description'];\r\n        this.vrijemeObjekt.slika = 'http:\/\/openweathermap.org\/img\/w\/' + data['weather'][0]['icon'] + \".png\";\r\n        console.log(this.vrijemeObjekt);\r\n    });\r\n  }\r\n\r\n}<\/pre>\n
I odmah dobijem \u017eeljene podatke na kojima se mogu primijetiti dva detalja. Prvi se ti\u010de opisa vremenske prognoze koji je na engleskom jeziku, a drugi se ti\u010de mjerne jedinice koja nije u \u00b0C.<\/p>\n
\"OpenWeatherMap<\/a><\/p>\n
Kako bi to promijenio dodat \u0107u jo\u0161 dva parametra u API URL<\/em>.<\/p>\n
prikaziVrijeme(){\r\n    this._http.get(\"http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=\" + this.grad + \"&appid=********************************\" + \"&units=metric\" + \"&lang=hr\")\r\n    .subscribe((data) => {\r\n        console.log(data);\r\n        this.vrijemeObjekt.temperatura = data['main']['temp'];\r\n        this.vrijemeObjekt.opis = data['weather'][0]['description'];\r\n        this.vrijemeObjekt.slika = 'http:\/\/openweathermap.org\/img\/w\/' + data['weather'][0]['icon'] + \".png\";\r\n        console.log(this.vrijemeObjekt);\r\n    });\r\n  }<\/pre>\n
Nakon toga mogu vidjeti da je sada opis vremenske prognoze na hrvatskom jeziku i da je mjerna jedinica \u00b0C.<\/p>\n
\"OpenWeatherMap<\/a><\/p>\n
Ikona se prikazuje na na\u010din da se na URL<\/em> ‘http:\/\/openweathermap.org\/img\/w\/’<\/span> doda naziv slike data[‘weather’][0][‘icon’] + “.png”<\/span> koji se dobije kao odgovor na API<\/em> zahtjev. Vi\u0161e o tome na poveznici https:\/\/openweathermap.org\/weather-conditions<\/a><\/p>\n
Na ekranu to mo\u017ee izgledati ovako, ali je i dalje malo \u010dudno zbog decimalnog prikaza.<\/p>\n
<ion-header>\r\n  <ion-toolbar>\r\n    <ion-title>\r\n      Ionic Weather App\r\n    <\/ion-title>\r\n  <\/ion-toolbar>\r\n<\/ion-header>\r\n\r\n<ion-content padding>\r\n  <ion-card>\r\n    <ion-row>\r\n      <ion-col>\r\n          <img src=\"{{vrijemeObjekt.slika}}\">\r\n      <\/ion-col>\r\n      <ion-col>\r\n          <h1>{{vrijemeObjekt.temperatura}}\u00b0C<\/h1>\r\n          {{vrijemeObjekt.opis}} \r\n      <\/ion-col>\r\n    <\/ion-row>\r\n <\/ion-card>\r\n<\/ion-content><\/pre>\n
\"Ionic<\/a><\/p>\n
To se vrlo lako rije\u0161i pomo\u0107u Math.round()<\/a><\/em>.<\/p>\n
this.vrijemeObjekt.temperatura = Math.round(data['main']['temp']);<\/pre>\n
\u0160to daje sljede\u0107i rezultat<\/p>\n
\"Ionic<\/a><\/p>\n
5 day \/ 3 hour forecast<\/h4>\n
Ovaj API<\/em> prikazuje vremensku prognozu za pet dana unaprijed u razmacima od po tri sata, a pozivam ga na adresi  <\/p>\n
http:\/\/api.openweathermap.org\/data\/2.5\/forecast?q=<\/pre>\n
\"OpenWeatherMap<\/a><\/p>\n
Nakon svega navedenog u primjeru iznad u ovom se primjeru ne\u0107e puno toga promijeniti. Rezultat \u0107e ostati na hrvatskom jeziku te u obliku \u00b0C.<\/p>\n
prikaziVrijeme(){\r\n    this._http.get(\"http:\/\/api.openweathermap.org\/data\/2.5\/forecast?q=\" + this.grad + \"&appid=********************************\" + \"&units=metric\" + \"&lang=hr\")\r\n    .subscribe((data) => {\r\n        console.log(data);\r\n        \/\/ Sada\r\n        this.vrijemeObjekt.slikaDanas = 'http:\/\/openweathermap.org\/img\/w\/' + data['list'][0]['weather'][0]['icon'] + \".png\";\r\n        this.vrijemeObjekt.temperaturaDanas = Math.round(data['list'][0]['main']['temp']);\r\n        this.vrijemeObjekt.opisDanas = data['list'][0]['weather'][0]['description'];\r\n       \/\/ Za 3 sata\r\n        this.vrijemeObjekt.slikaDanas3 = 'http:\/\/openweathermap.org\/img\/w\/' + data['list'][1]['weather'][0]['icon'] + \".png\";\r\n        this.vrijemeObjekt.temperaturaDanas3 = Math.round(data['list'][1]['main']['temp']);\r\n       \/\/ Za 6 sati\r\n        this.vrijemeObjekt.slikaDanas6 = 'http:\/\/openweathermap.org\/img\/w\/' + data['list'][2]['weather'][0]['icon'] + \".png\";\r\n        this.vrijemeObjekt.temperaturaDanas6 = Math.round(data['list'][2]['main']['temp']);\r\n       \/\/ Za 9 sati\r\n        this.vrijemeObjekt.slikaDanas9 = 'http:\/\/openweathermap.org\/img\/w\/' + data['list'][3]['weather'][0]['icon'] + \".png\";\r\n        this.vrijemeObjekt.temperaturaDanas9 = Math.round(data['list'][3]['main']['temp']);\r\n       \/\/ Za 12 sati\r\n       this.vrijemeObjekt.slikaDanas12 = 'http:\/\/openweathermap.org\/img\/w\/' + data['list'][4]['weather'][0]['icon'] + \".png\";\r\n       this.vrijemeObjekt.temperaturaDanas12 = Math.round(data['list'][4]['main']['temp']);\r\n       console.log(this.vrijemeObjekt);\r\n    });\r\n}<\/pre>\n
Na ekranu to mo\u017ee izgledati ovako<\/p>\n
<ion-content padding>\r\n  <ion-card>\r\n      <ion-row>\r\n          <ion-col>\r\n              <img src='{{vrijemeObjekt.slikaDanas}}'> \r\n         <\/ion-col>\r\n         <ion-col>\r\n              <h6>{{vrijemeObjekt.temperaturaDanas}}\u00b0C<br>\r\n              {{vrijemeObjekt.opisDanas}}<\/h6>\r\n          <\/ion-col>\r\n          <ion-col text-center>\r\n              <img src='{{vrijemeObjekt.slikaDanas3}}'> \r\n              {{vrijemeObjekt.temperaturaDanas3}}\u00b0C\r\n          <\/ion-col>\r\n          <ion-col text-center>\r\n              <img src='{{vrijemeObjekt.slikaDanas6}}'>\r\n              {{vrijemeObjekt.temperaturaDanas6}}\u00b0C\r\n          <\/ion-col>\r\n          <ion-col text-center>\r\n              <img src='{{vrijemeObjekt.slikaDanas9}}'>\r\n              {{vrijemeObjekt.temperaturaDanas9}}\u00b0C\r\n          <\/ion-col>\r\n          <ion-col text-center>\r\n              <img src='{{vrijemeObjekt.slikaDanas12}}'>\r\n              {{vrijemeObjekt.temperaturaDanas12}}\u00b0C\r\n          <\/ion-col>\r\n    <\/ion-row>\r\n <\/ion-card>\r\n<\/ion-content><\/pre>\n
\"Ionic<\/a><\/p>\n
Zaklju\u010dak<\/h2>\n
Struktura projekta prema package.json<\/strong><\/p>\n
{\r\n  \"name\": \"IonicWeather\",\r\n  \"version\": \"0.0.1\",\r\n  \"author\": \"Tomislav Stankovi\u0107\",\r\n  \"homepage\": \"https:\/\/www.tomislavstankovic.com\/\",\r\n  \"scripts\": {\r\n    \"ng\": \"ng\",\r\n    \"start\": \"ng serve\",\r\n    \"build\": \"ng build\",\r\n    \"test\": \"ng test\",\r\n    \"lint\": \"ng lint\",\r\n    \"e2e\": \"ng e2e\"\r\n  },\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"@angular\/common\": \"~7.0.0\",\r\n    \"@angular\/core\": \"~7.0.0\",\r\n    \"@angular\/forms\": \"~7.0.0\",\r\n    \"@angular\/http\": \"~7.0.0\",\r\n    \"@angular\/platform-browser\": \"~7.0.0\",\r\n    \"@angular\/platform-browser-dynamic\": \"~7.0.0\",\r\n    \"@angular\/router\": \"~7.0.0\",\r\n    \"@ionic-native\/core\": \"5.0.0-beta.21\",\r\n    \"@ionic-native\/splash-screen\": \"5.0.0-beta.21\",\r\n    \"@ionic-native\/status-bar\": \"5.0.0-beta.21\",\r\n    \"@ionic\/angular\": \"4.0.0-beta.16\",\r\n    \"cordova-android\": \"7.0.0\",\r\n    \"cordova-plugin-device\": \"^2.0.2\",\r\n    \"cordova-plugin-ionic-keyboard\": \"^2.1.3\",\r\n    \"cordova-plugin-ionic-webview\": \"^2.2.3\",\r\n    \"cordova-plugin-splashscreen\": \"^5.0.2\",\r\n    \"cordova-plugin-statusbar\": \"^2.4.2\",\r\n    \"cordova-plugin-whitelist\": \"^1.3.3\",\r\n    \"core-js\": \"^2.5.4\",\r\n    \"rxjs\": \"~6.3.3\",\r\n    \"zone.js\": \"~0.8.26\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular-devkit\/architect\": \"~0.10.0\",\r\n    \"@angular-devkit\/build-angular\": \"~0.10.0\",\r\n    \"@angular-devkit\/core\": \"~7.0.0\",\r\n    \"@angular-devkit\/schematics\": \"~7.0.0\",\r\n    \"@angular\/cli\": \"~7.0.0\",\r\n    \"@angular\/compiler\": \"~7.0.0\",\r\n    \"@angular\/compiler-cli\": \"~7.0.0\",\r\n    \"@angular\/language-service\": \"~7.0.0\",\r\n    \"@ionic\/angular-toolkit\": \"~1.2.0\",\r\n    \"@types\/node\": \"~10.12.0\",\r\n    \"@types\/jasmine\": \"~2.8.8\",\r\n    \"@types\/jasminewd2\": \"~2.0.3\",\r\n    \"codelyzer\": \"~4.5.0\",\r\n    \"jasmine-core\": \"~2.99.1\",\r\n    \"jasmine-spec-reporter\": \"~4.2.1\",\r\n    \"karma\": \"~3.0.0\",\r\n    \"karma-chrome-launcher\": \"~2.2.0\",\r\n    \"karma-coverage-istanbul-reporter\": \"~2.0.1\",\r\n    \"karma-jasmine\": \"~1.1.2\",\r\n    \"karma-jasmine-html-reporter\": \"^0.2.2\",\r\n    \"protractor\": \"~5.4.0\",\r\n    \"ts-node\": \"~7.0.0\",\r\n    \"tslint\": \"~5.11.0\",\r\n    \"typescript\": \"~3.1.6\"\r\n  },\r\n  \"description\": \"An Ionic Weather project\",\r\n  \"cordova\": {\r\n    \"plugins\": {\r\n      \"cordova-plugin-whitelist\": {},\r\n      \"cordova-plugin-statusbar\": {},\r\n      \"cordova-plugin-device\": {},\r\n      \"cordova-plugin-splashscreen\": {},\r\n      \"cordova-plugin-ionic-webview\": {\r\n        \"ANDROID_SUPPORT_ANNOTATIONS_VERSION\": \"27.+\"\r\n      },\r\n      \"cordova-plugin-ionic-keyboard\": {}\r\n    },\r\n    \"platforms\": [\r\n      \"android\"\r\n    ]\r\n  }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
U ovom \u0107u blog postu pokazati kako unutar Ionic aplikacije postaviti API za prikaz vremenske prognoze koriste\u0107i OpenWeatherMap. Iako svaki Android mobilni ure\u0111aj sam po sebi ve\u0107 ima prikaz vremenske prognoze, koji je mogu\u0107e dodatno prilagoditi, na po\u010detnom zaslonu ipak mo\u017ee biti korisno ubaciti i ovakav na\u010din prikaza takvih informacija. Npr. ako je u pitanju … Nastavi \u010ditati Ionic + OpenWeatherMap – prikaz vremenske prognoze<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":8635,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[564,351],"tags":[352,348,556],"class_list":["post-8634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-razvoj","tag-ionic","tag-ionic-framework","tag-openweathermap"],"yoast_head":"\nIonic + OpenWeatherMap - prikaz vremenske prognoze - Tomislav Stankovi\u0107<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic + OpenWeatherMap - prikaz vremenske prognoze - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"U ovom \u0107u blog postu pokazati kako unutar Ionic aplikacije postaviti API za prikaz vremenske prognoze koriste\u0107i OpenWeatherMap. Iako svaki Android mobilni ure\u0111aj sam po sebi ve\u0107 ima prikaz vremenske prognoze, koji je mogu\u0107e dodatno prilagoditi, na po\u010detnom zaslonu ipak mo\u017ee biti korisno ubaciti i ovakav na\u010din prikaza takvih informacija. Npr. ako je u pitanju … Nastavi \u010ditati Ionic + OpenWeatherMap – prikaz vremenske prognoze\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-18T19:16:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-05T17:45:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/11\/Ionic-OpenWeatherMap-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Ionic + OpenWeatherMap – prikaz vremenske prognoze\",\"datePublished\":\"2018-11-18T19:16:16+00:00\",\"dateModified\":\"2019-01-05T17:45:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/\"},\"wordCount\":443,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/Ionic-OpenWeatherMap-min.png\",\"keywords\":[\"Ionic\",\"Ionic Framework\",\"OpenWeatherMap\"],\"articleSection\":[\"Mobile\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/\",\"name\":\"Ionic + OpenWeatherMap - prikaz vremenske prognoze - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/Ionic-OpenWeatherMap-min.png\",\"datePublished\":\"2018-11-18T19:16:16+00:00\",\"dateModified\":\"2019-01-05T17:45:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/Ionic-OpenWeatherMap-min.png\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/Ionic-OpenWeatherMap-min.png\",\"width\":825,\"height\":510,\"caption\":\"Ionic + OpenWeatherMap - prikaz vremenske prognoze\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-openweathermap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic + OpenWeatherMap – prikaz vremenske prognoze\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ionic + OpenWeatherMap - prikaz vremenske prognoze - Tomislav Stankovi\u0107","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/","og_locale":"hr_HR","og_type":"article","og_title":"Ionic + OpenWeatherMap - prikaz vremenske prognoze - Tomislav Stankovi\u0107","og_description":"U ovom \u0107u blog postu pokazati kako unutar Ionic aplikacije postaviti API za prikaz vremenske prognoze koriste\u0107i OpenWeatherMap. Iako svaki Android mobilni ure\u0111aj sam po sebi ve\u0107 ima prikaz vremenske prognoze, koji je mogu\u0107e dodatno prilagoditi, na po\u010detnom zaslonu ipak mo\u017ee biti korisno ubaciti i ovakav na\u010din prikaza takvih informacija. Npr. ako je u pitanju … Nastavi \u010ditati Ionic + OpenWeatherMap – prikaz vremenske prognoze","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2018-11-18T19:16:16+00:00","article_modified_time":"2019-01-05T17:45:29+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/11\/Ionic-OpenWeatherMap-min.png","type":"image\/png"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"6 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Ionic + OpenWeatherMap – prikaz vremenske prognoze","datePublished":"2018-11-18T19:16:16+00:00","dateModified":"2019-01-05T17:45:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/"},"wordCount":443,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/11\/Ionic-OpenWeatherMap-min.png","keywords":["Ionic","Ionic Framework","OpenWeatherMap"],"articleSection":["Mobile","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/","name":"Ionic + OpenWeatherMap - prikaz vremenske prognoze - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/11\/Ionic-OpenWeatherMap-min.png","datePublished":"2018-11-18T19:16:16+00:00","dateModified":"2019-01-05T17:45:29+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/11\/Ionic-OpenWeatherMap-min.png","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/11\/Ionic-OpenWeatherMap-min.png","width":825,"height":510,"caption":"Ionic + OpenWeatherMap - prikaz vremenske prognoze"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-openweathermap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ionic + OpenWeatherMap – prikaz vremenske prognoze"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/8634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=8634"}],"version-history":[{"count":34,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/8634\/revisions"}],"predecessor-version":[{"id":8676,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/8634\/revisions\/8676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/8635"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=8634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=8634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=8634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}