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:
- Consumo de APIs externas no React
- Como usar Hooks na prática
- 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:
|
1 |
create-react-app weather-location |
2 – Entre no Projeto e abra seu editor de textos:
|
1 |
cd weather-location |
3 – Instale o Axios no seu projeto (para fazer as chamadas a API) rodando:
|
1 |
yarn add axios |
3 – No arquivo App.js substitua o conteúdo por:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, { Fragment } from 'react'; import axios from 'axios'; function App() { return ( <Fragment> <h3>Clima nas suas Coordenadas (Exemplo)</h3> <hr /> <ul> <li>Temperatura atual: x°</li> <li>Temperatura máxima: x°</li> <li>Temperatura minima: x°</li> <li>Pressão: x hpa</li> <li>Umidade: x%</li> </ul> </Fragment> ); } export default App; |
- Incluímos o axios na linha 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:
|
1 |
const [location, setLocation] = useState(false); |
2 – Também dentro da sua Function App, inclua o hook useEffect:
|
1 2 3 4 5 6 |
useEffect(()=> { navigator.geolocation.getCurrentPosition((position)=> { console.log(position.coords.latitude, position.coords.longitude); setLocation(true) }) }, []) |
3 – Na inclusão do React (linha 1), atualize para incluir o useEffect e o useState;
|
1 |
import React, { Fragment, useEffect, useState } from 'react'; |
3 – No return da function (onde exibimos o template básico) substitua por:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
if(location == false){ return ( <Fragment> Você precisa habilitar a localização no browser o/ </Fragment> ) } else{ return ( <Fragment> <h3>Clima nas suas Coordenadas (Exemplo)</h3> <hr /> <ul> <li>Temperatura atual: x°</li> <li>Temperatura máxima: x°</li> <li>Temperatura minima: x°</li> <li>Pressão: x hpa</li> <li>Umidade: x%</li> </ul> </Fragment> ); } |
Chamando a API
1 – Crie na raiz do seu projeto um arquivo chamado .env e coloque nele:
|
1 |
REACT_APP_OPEN_WHEATHER_KEY=<sua credencial do open wheater map> |
2 – Dentro da sua function APP inclua o hook do state weather:
|
1 |
const [weather, setWeather] = useState(false); |
3 – Também dentro da sua function APP, inclua a seguinte ‘function expression’:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let getWeather = async (lat, long) => { let res = await axios.get("http://api.openweathermap.org/data/2.5/weather", { params: { lat: lat, lon: long, appid: process.env.REACT_APP_OPEN_WHEATHER_KEY, lang: 'pt', units: 'metric' } }); setWeather(res.data); } |
4 – Atualize o useEffect colocando:
|
1 2 3 4 5 6 |
useEffect(()=> { navigator.geolocation.getCurrentPosition((position)=> { getWeather(position.coords.latitude, position.coords.longitude); setLocation(true) }) }, []) |
Usando as informações da API na página
1 – Atualize o return com o nosso template:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
if (location == false) { return ( <Fragment> Você precisa habilitar a localização no browser o/ </Fragment> ) } else if (weather == false) { return ( <Fragment> Carregando o clima... </Fragment> ) } else { return ( <Fragment> <h3>Clima nas suas Coordenadas ({weather['weather'][0]['description']})</h3> <hr/> <ul> <li>Temperatura atual: {weather['main']['temp']}°</li> <li>Temperatura máxima: {weather['main']['temp_max']}°</li> <li>Temperatura minima: {weather['main']['temp_min']}°</li> <li>Pressão: {weather['main']['pressure']} hpa</li> <li>Humidade: {weather['main']['humidity']}%</li> </ul> </Fragment> ); } |
2 – Suba o projeto rodando:
|
1 |
yarn start |
3 – No browser, ele vai solicitar o uso da localização:
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
Leonardo Scorza
Quer se tornar um Programador Full Stack Javascript em 8 semanas? 😀
Nós desenvolvemos um treinamento completo onde você vai aprender desde a base da Web (HTML5, CSS, Bulma,
Javascript e Es6+) até React e ExpressJs totalmente do zero!
Nele você também vai desenvolver um projeto do inicio até o Deploy (clone do Evernote) e irá
aprender como conseguir as melhores vagas no módulo carreira de Programador.
Se você não quer mais perder oportunidades, clique aqui e saiba mais 💪
olá, gostaria de aprender mais sobre api’s
Consegui fazer a aplicação! Achei muito massa. Porém não consegui fazer rodar no navegador firefox, somente no chromium alguém sabe pq acontece isso?
agora consegui kkk
OLha…de 3 anos pra ca posso dizer que aprendi muito. Ainda nao sei case nada, mas em relação ao que era e minhas perspectivas …. outra pessoas! MAs feliz e claro, mas realizada profissionalmente! E vcs OneBitcode, e Agora Escola JavaScript fizeram parte de tudo isso ! Parabens pra vcs.
Hoje implementei esse projeto sugerido e aprendi varias coisas …
agora tenho minha aplicação de ver o clima muito legal!
Vlw galera Escola JavaScript!