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:
Vamos fazer uso dos componentes do Material Angular. No terminal de comando, no diretório projeto informe:
> ng add @angular/materialApó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:
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.
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.
Entre as linhas 9 a 15, definimos os módulos dos componentes, entre eles destaco o MatDatepickerModule e o MatCardModule.
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
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).
O próximo passo é modificarmos nosso template html. Limpe o arquivo app.component.html e deixe-o assim:
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.
Para ficar exatamente como a figura inicial você deve copiar os estilos para app.component.css.
Todo o código do projeto está no GIT.
Em caso de dúvidas, entre em contato.
PARTE 1
PARTE 2
Até :)
