Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

Consumindo APIs externas no React (Exibindo o clima local)

Consumir APIs externas é algo fundamental para a maior parte dos APPs, por isto, neste artigo você vai aprender como criar um APP React que consome uma API de previsão do tempo de forma fácil e rápida.

O APP que iremos construir vai solicitar ao usuário a permissão para saber a localização dele pelo browser, depois com essas coordenadas nós vamos chamar a API do Open Wheater Map para pegar a previsão do clima para aquele local e por fim exibiremos essas informações na tela para o usuário.

 

Pontos que vamos aprender:

  1. Consumo de APIs externas no React
  2. Como pegar a localização do usuário
  3. Como usar Hooks na prática
  4. Como utilizar variáveis de ambiente

 

 

Criando as credenciais do Open Wheater

Visite o site https://openweathermap.org e crie sua conta, depois acesse sua API Key (nessa URL), ela será necessária para nos conectarmos ao Open Wheather Map.
Após criar a API Key você deve esperar alguns minutos para que ela seja ativada (para mim demorou 15 minutos), após isso você já pode utiliza-la 😁

 

Preparando o projeto

1 – Crie um projeto usando o “create-react-app” rodando:

2 – Entre no Projeto e abra seu editor de textos:

3 – Instale o Axios no seu projeto (para fazer as chamadas a API) rodando:

3 – No arquivo App.js substitua o conteúdo por:

  1. Incluímos o axios na linha 2
  2. Criamos um template básico para mostrar as informações do clima

 

Pegando a localização do usuário

1 – Inclua dentro da sua Function App o hook do state location:

2 – Também dentro da sua Function App, inclua o hook useEffect:

3 – Na inclusão do React (linha 1), atualize para incluir o useEffect e o useState;

3 – No return da function (onde exibimos o template básico) substitua por:

 

Chamando a API

1 – Crie na raiz do seu projeto um arquivo chamado .env e coloque nele:

2 – Dentro da sua function APP inclua o hook do state weather:

3 – Também dentro da sua function APP, inclua a seguinte ‘function expression’:

4 – Atualize o useEffect colocando:

 

Usando as informações da API na página

1 – Atualize o return com o nosso template:

2 – Suba o projeto rodando:

3 – No browser, ele vai solicitar o uso da localização:

react axios

4 – Depois de aceito, ele vai mostrar os resultados:

5 – Pronto o/

 

Conclusão

Consumir APIs externas no React é uma tarefa realmente simples, neste tutorial você aprendeu como fazer isso e também como acessar a localização do usuário pelo browser, como criar variáveis de ambiente e como usar na prática os Hooks do React.

Se você quiser aprender mais sobre os Hooks, assista nosso Screencast: Dominando os Hooks Facilmente

Para acessar o código completo do projeto clique aqui.

 

Caso você tenha gostado desse tutorial e queira incentivar o nosso trabalho, deixe um comentário a baixo e compartilhe o link desse artigo com outros programadores (cada compartilhamento faz a diferença) 💪😁

 

Muito obrigado por estar com a gente, Grande abraço

Leonaro Scorza

Deixe um comentário

avatar
  Subscribe  
Notify of