Criação de um aplicativo utilizando Dados Abertos do Governo com Angular 7 (Parte 2)

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, no terminal de comando, digite:

> 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, vamos consumir um serviço que lista todas licitações, informando uma data como parâmetro.

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

Fig.1 — Detalhes para requisição

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).

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).

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

A 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 parte 3, vamos criar a interface visual para solicitar e exibir os resultados das requisições das licitações.

Repositório no GIT.

Parte 1

Até a próxima.