Covid19 API com Angular 9
Estamos vivendo tempos difíceis com a epidemia do coronavírus. Assim, pode ser uma oportunidade para aprimorar habilidades e avançar nos estudos. #fiqueemcasa
A proposta deste artigo é construir uma aplicação Web em Angular 9 que consume dados da API COVID19.
Abaixo, como ficará a aplicação.
Se preferir, escrevi um tutorial dessa mesma API com Flutter. O tutorial e o código estão aqui.
Passos iniciais
Caso você seja iniciante no framework, recomendo o link para criação do projeto.
Após a construção, vamos importar o módulo HttpClientModule no módulo principal da aplicação.
No arquivo app.module ts, realize o import e a assinatura no array de imports:
Codificando as classes
Vamos criar o modelos que mapeia os dados relacionados as informações gerais da pandemia.
Dentro da pasta app, crie a pasta models e o arquivo mundo.model.ts.
Mapeamos as informações relacionadas aos números de infectados, mortes, quantidade de países afetados e a última atualização.
Vamos criar em seguida o model que representa os casos do país, já que a API traz informações específicas de cada lugar.
Na mesma pasta, crie o arquivo pais.model.ts
Utilizando um pouco de orientação a objetos, na assinatura da criação da interface herdamos a interface Mundo com extends, já que há campos em comum.
Declaramos os atributos específicos do país como o nome, número de mortos do dia, números de pessoas internadas em estado crítico, além de um objeto aninhado, CountryInfo, que retorna uma imagem da bandeira.
Criando o serviço
Vamos criar o serviço que acessa o endpoint da API e métodos.
No terminal, informe o comando:
ng g service services/covidapiVamos editar o arquivo covidapi.service.ts que se encontra na pasta services.
O código será:
Update 20/04
Troque a url para a versão 2 da API:
Definimos o endpoit da API no atributo url.
Fazemos a injeção de HttpClient no método construtor para requisitar chamadas na API. Em seguida, codificamos o método getInfoMundo. Como o operador get, tipando o retorno com a interface criada <Mundo>, informando a url e concatenada com ‘/all’.
Dessa forma, as informações gerais do pandemia.
Na sequência, usamos o método toPromise() e no callback retorno o objeto.
A promise é uma abstração para representar fluxos de ações em códigos assíncronos, processando um único evento quando uma operação assíncrona é concluída ou falha.
Nesse outro artigo aqui, eu invoco também uma api, mas usando Observables.
No método getInfoPais(), escrevo um parâmetro pais e defino um valor padrão brasil, caso nenhum seja informado. A diferença está na chamada da requisição, concatenando com a string ‘/countries/${pais}’, para acessar informações específicas do país informado.
Componente e View principal
Vamos editar o componente principal, mas antes instalaremos a biblioteca sweetalert2.
No terminal informe:
npm install sweetalert2.Abra o arquivo app.component.ts e codifique assim:
Declaramos as interfaces mundo e pais e no construtor, realizamos a injeção de dependência do serviço codificado no passo anterior.
No método ngOnInit, chamamos os métodos com o operador await bindando as interfaces no carregamento inicial no componente.
Finalmente o método trocaPais, apresenta um dialog com um input. Se existir valor, passamos no parâmetro do método getInfoPais.
Não esqueça de apagar todo o conteúdo existente em app.component.html, gerado na construção do projeto.
Abaixo, um trecho inicial do código. O código do template, assim como do projeto está disponível no meu Github, no final do artigo.
Para prevenir-se de erros de renderização, utilizamos uma diretiva estrutural *ngIf para verificar a existência do objeto.
No campo da atualização, eu informo um Pipe para transformar em data, especificando um formato ‘dd/MM/yy HH:mm’.
Se tiver alguma dúvida, deixe no comentários.
Se cuidem, e que Deus nos proteja.
