Tirei de Letra

Estava pesquisando como fazer coleta de temperatura para uma solução de Angular5 implementando com Typescript; A solução é bem simples, mas pode ajudar aqueles que estejam buscando tal solução;

Implementando a classe “provider”
[code]
/*
<summary>
subject: weather-service para acessar openweathermap
auth: amarildo lacerda <tireideletra.com.br>
uso:
– providers: [
WeatherService,..]

– para enviar pedido de temperatura:
ngOnInit() {
this._weather.getWeatherbyName("SAO PAULO,BR").subscribe(rsp => {
this.weather.fillWeather(rsp);
console.log(this.weather.response());
});
}
– …fillWeather -> preenche os dados retornados do json

</summary>

*/
import { Injectable } from ‘@angular/core’;
import { Http, Response, URLSearchParams } from ‘@angular/http’;
import { Observable } from ‘rxjs/Rx’; /// para corrigir erro do catch

export interface Coord {
lon: number;
lat: number;
}

export class Weather {
temp: any;
temp_max: any;
temp_min: any;
description: string;
city: string;
county:string;
date: any;
pressure: any;
humidity: any;
sunrise: any;
coord: Coord;
wind:any;
weather:any;
private resp: any;
response() {
return this.resp;
}
public fillWeather(body: any) {
this.resp = body;
this.city = body.name;
this.county = body.sys.country;
this.description = body.weather[0].main;
this.temp = body.main.temp.toFixed(0);
this.temp_max = body.main.temp_max;
this.temp_min = body.main.temp_min;
this.pressure = body.main.pressure;
this.humidity = body.main.humidity;
this.date = new Date(body.dt * 1000);
this.sunrise = new Date(body.sys.sunrise * 1000);
this.coord = body.coord;
this.wind = body.wind;
this.weather = body.weather;
}

}

@Injectable()
export class WeatherService {
city: string = "Sao Paulo,BR";

urlAPI = "http://api.openweathermap.org/data/2.5/weather";
tokenAPI = ""; //gerar uma API no provedor – esta é limitada
units = "metric";

constructor(private http: Http) {

}

getWeatherbyName(localName: string = "Sao Paulo,BR", api:string="") {
if (localName == "") {
localName = this.city;
}
if (api==""){
api = this.tokenAPI;
}
console.log(localName);
let myParams = new URLSearchParams();
myParams.append(‘appid’, api);
myParams.append(‘q’, localName);
myParams.append(‘units’, this.units);
return this.http.get(this.urlAPI, { search: myParams })
.map(this.extractData)
.catch(this.handleError);
}

private extractData(res: Response) {
let body = res.json();
return body;
}

private handleError(error: Response | any) {
console.error(error.message || error);
return Observable.throw(error.message || error);
}

}

[/code]

Usando o “Provider”

[code]

import { Component, OnInit } from ‘@angular/core’;
import { WeatherService, Weather } from ‘./weather-service’;

const
token = "gerar um token no site – openweathermap";
const
local = "SAO PAULO,BR";

@Component({
selector: ‘app-previsao-tempo’,
template: ‘<div>{{weather.city}}: {{weather.temp}}c </div> \
Min: {{weather.temp_min}}c Max: {{weather.temp_max}}c ‘,
styleUrls: []
})
export class PrevisaoTempoComponent implements OnInit {
weather: Weather = new Weather();
constructor(private _weather: WeatherService) {
}
ngOnInit() {
this._weather.getWeatherbyName(local,token).subscribe(rsp => {
this.weather.fillWeather(rsp);
console.log(this.weather.response());
});
}

}

[/code]