Criando o serviço

A primeira providência que tomaremos será importar o módulo HttpClientModule no módulo principal da aplicação.

No arquivo app/app.module.ts, realize o import e a assinatura no array de imports:

[..]
import { AppComponent } from ‘./app.component’;
import { HttpClientModule} from ‘@angular/common/http’;
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule,
 HttpClientModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Para iniciar a codificação do serviço, digite o comando abaixo no terminal:

> ng g service licitacao

Dois arquivos serão criados: licitacao.service.ts e licitacao.service.spec.ts.

O arquivo licitacao.service será responsável pela requisição com a API Rest, e como já informado, consumiremos um serviço que lista todas as licitações, informando uma data como parâmetro.

A figura 1 detalha os dados para a requisição da API.

A resposta da requisição retorna um JSON com uma quantidade grande de atributos e arrays. Achei interessante criar interfaces para mapear esses campos, já que não vamos exibir todas as informações.

No arquivo licitacao.service.ts, entre as linhas 5 e 34, definimos as interfaces com os campos que mostraremos da consulta.

A primeira interface mapeia o objeto principal. Note que criamos um array de licitações (linha 8).

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


export interface RetornoLicitacao {
  mensagem: string;
  quantidade: number;
  listaLicitacoes: Licitacao[];
}

export interface Licitacao {
  data_abertura: string;
  modalidade: string;
  orgao_responsavel: string;
  criterio_julgamento: string;
  local_disputa: string;
  num_ano_edital: string;
  valor_maximo_inicial: string;
  objetivo: string;
  composicao_processo: Processo[]
}
export interface Processo {
  valor_maximo_inicial_lote: string;
  numero_lote: string;
  situacao_lote: string;
  valor_finalizado: string;
  valor_maximo_inicial: string;
  caracteristica_lote: string;
  lista_item: Item[];
}

export interface Item{
  item: string;
  quantidade: number;
  valor_unitario_maximo_inicial: string;

}

@Injectable({
  providedIn: 'root'
})
export class LicitacaoService {

  urlLicitacao = 'http://www.transparencia.pr.gov.br/pte/ws/licitacoes/listarlicitacoes?datapublicacao='

  constructor(private  http:  HttpClient) { }


  getLicitacoes(data: string){
    return this.http.get<RetornoLicitacao>(this.urlLicitacao + data)
  }
}

Na linha 41 definimos o endereço do serviço e no método construtor injetamos a classe HttpClient, responsável pelas requisições http (linha 43).

No método getLicitacoes (linha 46), informamos um campo data (que será tratada posteriormente a formatação).

Na implementação do método, invocamos o get de http, tipando o retorno com a interface criada <RetornoLicitacao>, informando a url e o parâmetro.

Na próxima parte criaremos a interface visual para solicitar e exibir os resultados das requisições das licitações.

• Repositório no GIT
• Criação de um aplicativo utilizando dados abertos do governo com Angular 7 – Parte 01

Até a próxima!