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

Trabalhando na View

Finalmente, vamos preparar nossa interface para o usuário informar a data e visualizar as licitações.

Ao fim da publicação, nossa aplicação ficará assim:

Image for post

Vamos fazer uso dos componentes do Material Angular. No terminal de comando, no diretório projeto informe:

> ng add @angular/material

Após o fim do download será solicitado algumas configurações adicionais.

A primeira delas é a escolha do tema. Na frente de cada um há um link para ver a composição das cores. Eu escolhi o primeiro:

Image for post

Os próximos passos são a escolha da biblioteca HammerJS, responsável pelo reconhecimento de gestos, e em seguida, a definição de animações, utilizadas por componentes do Angular Material.

Image for post
Image for post

Finalizados esses passos já podemos importar os módulos de cada componente que serão utilizados no projeto.

Entre as linhas 9 a 15, definimos os módulos dos componentes, entre eles destaco o MatDatepickerModule e o MatCardModule.

Image for post

Entre as linhas 9 a 15, definimos os módulos dos componentes, entre eles destaco o MatDatepickerModule e o MatCardModule.

Image for post

Nas linhas 19 a 24 estão as definições necessárias para configurar e exibir a data de acordo com o padrão dd/MM/yyyy. Registro o provider desses componentes na linha 43.

E finalmente no array do import estão as definições dos módulos. Abaixo, o código completo do app.module.ts

app.module.ts

Na classe app.component.ts vamos escrever um método para busca e dois atributos para receber o resultado e exibir um spinner até a efetivação da requisição.

Na linha 13 injetamos o serviço para requisição da API. O método busca tem um parâmetro para recuperar a data que o usuário informou, porém a API somente no formato dd/MM/yyyy.

Dessa forma, as linhas 18 e 19 justamente formatam a data no padrão.

No método getLicitacoes() invocamos um subscribe que retorna um objeto do tipo RetornoLicitacao (linha 21), e como o método foi finalizado, encerramos a visualização do spinner (linha 22).

app.component.ts

O próximo passo é modificarmos nosso template html. Limpe o arquivo app.component.html e deixe-o assim:

app.component.html

Comentando o código

Definimos uma tag de spinner do material (linha 17) com a diretiva *ngIf para contralar a exibição do componente.

Na linha 20 fazemos um loop usando a diretiva *ngFor para exibir os cards para cada licitação. Note que acessamos o atributo listaLicitacoes do objeto licitacoes.

Fazemos o mesmo processo na linha 30 para recuperar os lotes de cada licitacao.

Já é possível executar para ver como ficou. No terminal digite:

> ng serve -o

É possível que você tenha problemas com o CORS, para contornar essa situação instale esse plugin do Chrome.

Image for post
CORS

Para ficar exatamente como a figura inicial você deve copiar os estilos para app.component.css.

Image for post
Image for post

Todo o código do projeto está no GIT.

Em caso de dúvidas, entre em contato.

PARTE 1

PARTE 2

Até :)

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store