Angular 2 - Obtendo dados com Http (Get) - II

 Neste artigo vou mostrar como podemos obter informações usando o método Htttp.get com o Angular 2 e o Visual Studio Code.

Continuando a primeira parte do artigo vamos agora mostrar algo mais prático usando o Http.Get.

Que tal obter a previsão do tempo para uma cidade ?

Para isso vamos acessar o serviço da  OpenWeatherMap API service que permite obter a previsão de tempo (e mapas) para uma determinada localidade e exibir os dados retornados.

Para pode usar o serviço grátis você tem que se registrar e obter uma API Key (AppId) neste link: https://home.openweathermap.org/users/sign_in

A documentação de como usar a API para previsão do tempo pode ser consultada neste link: https://openweathermap.org/current#current_JSON

Vamos ao trabalho...

Previsão do tempo com Angular e Http.Get

Crie um novo projeto Angular usando o comando : ng new previsaotempo

Nota: você precisa ter instalado o Angular CLI.

Durante a execução sreão realizadas as seguintes tarefas:

- um novo diretório chamado previsaotempo será criado;
- todos os arquivos e diretórios de origem para a sua nova aplicação angular são criados com base no guia oficial de Estilo Angular
- as dependências NPM serão instalados
- o TypeScript será configurado para você
- o executor de testes unitários Karma será configurado para você
- o framework de teste end-to-end Protractor será configurado para você
- os arquivos de ambiente com configuração padrão são criados;

Note que são criados os arquivos e as pastas necessárias para a nossa aplicação e que as dependências já foram instaladas na pasta node_modules.

Vamos abrir o projeto no Visual Studio Code digitando o comando : Code .

Abra o arquivo app.component.ts e defina o código abaixo:

import { Component } from '@angular/core';
import { Http, Response } from '@angular/http'

 
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
 
   apiUrl : string = "http://api.openweathermap.org/data/2.5/weather?APPID=__SEU_API_ID___&q=";
 
   cidade : string = "";

   //previsao do tempo
   humidade : string ;
   temperatura : number;
   minima : number;
   maxima : number;

   constructor(private http : Http) { }
 
    previsaoTempo() {
 
    this.http.get(this.apiUrl + this.cidade )
    .subscribe(
     (res: Response) => {
         const previsaoCidade = res.json();
         this.humidade = previsaoCidade.main.humidity;
         this.temperatura = this.converteParaCelsius(previsaoCidade.main.temp);
         this.maxima = this.converteParaCelsius(previsaoCidade.main.temp_max);
         this.minima = this.converteParaCelsius(previsaoCidade.main.temp_min);
       }
    )
  }

 
  converteParaCelsius(tempFar : number)
  {
    let resultado = 0;
    return resultado = (tempFar - 273.15);
  }
}
 

Neste código estou definindo a URI da API para consulta da previsão do tempo : http://api.openweathermap.org/data/2.5/weather?APPID=__SEU_API_ID___&q=

Nota: Lembrando que você deve informar o seu ID para usar a API.

A seguir declaramos algumas variáveis que iremos usar para obter os valores e definimos o método previsaoTempo() do evento Click do botão de comando.

Neste método usamos o método get do http client passando a URI da API e o nome da cidade que o usuário informou na caixa de texto da view.

Como o resultado é um observable precisamos subscrever o serviço e usar a biblioteca Response para obter a resposta no formato JSON.

Eu criei  um método chamado converteParaCelsius() para converter para Celsius, pois os valores devolvidos pela API estão em Kelvin.

Agora vamos definir no arquivo app.component.html o código para exibir no navegador um input type text, um button, obter o nome da cidade, e, exibir o resultado :


 <h1>Previsão do Tempo</h1>
 <hr>
 <input type="text" [(ngModel)]="cidade" placeholder="Informe o nome da cidade">
 <button (click)=previsaoTempo()>Previsão do tempo</button>

 <hr>

 <div>
 <p>Humidade : {{humidade}} </p>
 <p>Temperatura : {{temperatura}} <p>
 <p>Máxima : {{maxima}} </p>
 <p>Mínima : {{minima}} </p>
 <div>
 

No código usamos o ngModel para realizar o binding e definimos o evento Click do button para chamar o método previsaoTempo().

Finalmente precisamos registrar as bibliotecas FormsModule e HttpModule no arquivo de app.module.ts :


 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';

 
@NgModule({
  declarations: [  AppComponent   ],
  imports: [ BrowserModule, FormsModule, HttpModule ],
  providers: [],
  bootstrap: [AppComponent]
 })
 export class AppModule { }
 

Precisamos do FormsModule para usar o ngModel e do HttpModule para usar o serviço Http.

Executando o projeto e informando o nome de uma cidade válida iremos obter:

Nessa abordagem eu não criei um serviço nem realizei nenhuma validação de dados pois o objetivo é  mostrar o uso Http.get.

Pegue o projeto , sem a pasta node_modules, aqui :   PrevisaoTempoAngular2.zip

O Senhor reinará eterna e perpetuamente; Êxodo 15:18

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti