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.

Image for post
Image for post

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:

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/covidapi

Vamos editar o arquivo covidapi.service.ts que se encontra na pasta services.

O código será:

Troque a url para a versão 2 da API:

https://corona.lmao.ninja/v2

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.

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