Guia do Dev Iniciante – Consumindo APIs
Seja para consumir dados do seu próprio projeto, integrar com uma plataforma de pagamentos, usar geolocalização… Ou descobrir qual a população da cidade-planeta imperial de Coruscant (spoiler: é mais de 1 trilhão), você irá precisar consumir uma API uma hora ou outra.
It’s dangerous to go alone
Antes de mais nada, o que é uma API e por que você precisa de uma?
A princípio, APIs são as aplicações responsáveis por gerenciar as informações do seu sistema, é ela que comunica-se com o banco, trata e envia os dados necessários para o front. Do mesmo modo que um projeto pode ter diversos front-ends (Web, Android, iOS, etc), é ideal que as regras de negócios fiquem mantidas em um único lugar, a API.
Também existem APIs públicas, mantidas pela comunidade, que provém uma maneira de consumir dados, dos mais diversos tipos, facilmente. Por exemplo, a API da NASA possui diversos módulos contendo dado sobre estrelas, exoplanetas; banco de imagem do Hubble, etc. Entretanto, se a sua praia for planetas fictícios, a SWAPI (Star Wars API) pode fornecer dados sobre as areias quentes de Tatooine.
Agora partindo para tipos de APIs que podem te ajudar no desenvolvimento, existem algumas como a Jsonplaceholder, Adorable Avatars, cataas, entre muitas outras que podem facilitar o consumo de dados/imagens e evitar aquelas files de ‘./assets/img1.png’ ou os famosos “lorem Ipsum” na hora de mostrar um parágrafo. Ou suponha que seu app precise traçar uma rota da posição atual do seu usuário até a banca de jornal mais próxima, provavelmente você irá querer usar a API do Google Maps, ao em vez de fazer todos os cálculos e interpolações das posições na mão.
To infinity and beyond
Okay, ponto feito, APIs são úteis. Agora bora codar um pouco!
Vamos criar uma SPA em React que mostre alguns dados sobre planetas de Star Wars!
Algumas notas antes de começarmos:
- Os passos podem ser seguidos em qualquer framework em Node;
- O projeto foi iniciado com npx create-react-app meu-app;
- Os updates foram salvos no repositório do GitHub.
Afinal, por que Star Wars API? Primeiramente, STAR WARS!!! Segundo, diferente da API da NASA, que necessita login e uma certa configuração, a SWAPI é super simples e pode ser usada até pela web.
Começando do começo
Voltando para o projeto, nosso Componente de Planetas vai começar a sua vida assim:
import React, {useEffect, useState} from “react”
export const PlanetComponent = () => {
const [planet, setPlanet] = useState(“”)
useEffect(() => {
setPlanet(“Marte”)
})
return (
<div>
<h2> Você está em {planet}! </h2>
</div>
)
}
PlannetComponent é apenas um componente básico que, ao ser renderizado, set a variável planet igual a “Marte” e mostra a mensagem “Você está em Marte!”.
Mas marte é apenas o nosso vizinho, vamos explorar alguns mundos fantasiosos com a ajuda do Axios!
Axi o quê?
Axios é um pacote node que facilita a criação de requests e aceita promises nativamente, vamos instalá-lo e testar a API de Star Wars
- Rode o comando npm install –save axios dentro do seu projeto;
- Ótimo! Agora vamos testar buscando os dados do primeiro planeta cadastrado na SWAPI com o comando:
axios.get(‘http://swapi.dev/api/planets/1/’).then((data) => {
console.log(data)
})
- Agora vamos ver os logs e descobrir o que recebemos:
data: {
climate: “arid”
created: “2014-12-09T13:50:49.641000Z”
diameter: “10465”
edited: “2014-12-20T20:58:18.411000Z”
films: […]
gravity: “1 standard”
name: “Tatooine”
orbital_period: “304”
population: “200000”
residents: […]
rotation_period: “23”
surface_water: “1”
terrain: “desert”
url: “http://swapi.dev/api/planets/1/”
}
Bingo Bongo
Agora que já sabemos o que é Axios, e os dados que recebemos da SWAPI, podemos setar o nome do nosso planeta:
import React, {useEffect, useState} from “react”
import axios from “axios”
export const PlanetComponent = () => {
const [planet, setPlanet] = useState(“”)
useEffect(() => {
axios.get(‘http://swapi.dev/api/planets/1/’).then((res) => {
setPlanet(res.data.name)
})
}, [])
return (
<div>
<h2> Você está em {planet}! </h2>
</div>
)
}
Se tudo deu certo, a mensagem deve aparecer como “Você está em Tatooine!”, não é muuuito diferente de Marte, mas agora estamos no universo certo!
Spicing it up
Mas por que parar em apenas o nome do planeta? Agora que estamos consumindo a API, podemos mostrar muito mais informações na nossa view!
Por isso, vamos salvar todo o objeto data que recemos em planet, ao em vez de apenas data.name:
export const PlanetComponent = () => {
const [planet, setPlanet] = useState({})
useEffect(() => {
axios.get(‘http://swapi.dev/api/planets/1/’).then((res) => {
setPlanet(res.data)
})
}, [])
return (
<div>
<h2> Você está em {planet.name}! </h2>
<div> População: {planet.population}</div>
<div> Duração do dia: {planet.rotation_period}</div>
<div> Duração do ano: {planet.orbital_period}</div>
</div>
)
}
Perfeito! Agora nós estamos consumindo uma API e ainda temos mais informações do que quando começamos, o que poderia estar errado?
I’ve got a bad feeling about it
Resposta curta: Muita coisa.
Antes de mais nada, o que irá acontecer se precisarmos desses dados em outro componente? Iríamos ter múltiplas requests iguais e código repetido em diversos arquivos diferentes.
Principais problemas:
- Separar a lógica de requests das views;
- Criar um código que possa ser reutilizável;
- Como usar múltiplas APIs no mesmo projeto?
Então, vamos desenvolver algo melhor utilizando boas práticas e bom senso.
Primeiro, vamos criar uma pasta chamada /api na raiz do diretório. É aqui que vamos salvar as funções encarregadas de caçar os dados vindos de APIs. Dentro dela, criaremos um arquivo chamado uma pasta para a swapi e um arquivo planets.swapi.js que deve parecer assim:
import axios from “axios”
const PlanetsSwapi = {
get(id) {
return axios.get(`http://swapi.dev/api/planets/${id}`)
}
}
export default PlanetsSwapi
Importando nossa função no PlanetComponent nós temos:
import React, {useEffect, useState} from “react”
import PlanetsSwapi from “../../api/swapi/planets.swapi.js”
export const PlanetComponent = () => {
const [planet, setPlanet] = useState({})
useEffect(() => {
PlanetsSwapi.get(1).then((res) => setPlanet(res.data))
}, [])
return (
<div>
<h2> Você está em {planet.name}! </h2>
<div> População: {planet.population}</div>
<div> Duração do dia: {planet.rotation_period}</div>
<div> Duração do ano: {planet.orbital_period}</div>
</div>
)
Com essa pequena mudança, podemos reutilizar a função em qualquer component para buscar dados de planetas da swapi. Entretanto, como podemos pegar dados de outra rota ou outra API? Copiar o código de /api/swapi/planets.swapi.js e trocar os parâmetros do Axios funcionaria, mas ainda estaríamos repetindo código…
Um jeito simples de solucionar esses problemas é com um arquivo base, /api/baseApi.js , que encapsula os métodos do Axios e é consumido pelas demais APIs. A própria lib do Axios tem alguns métodos interessantes para manter seus códigos o mais DRY possível.
He’s starting to believe
Agora você já sabe o que é uma API, mais importante ainda, como fazer ao consumir uma API. Blz… E agora?
Se ainda estiver com aquela vontade de codar ainda, crie uma API você mesmo! E se seu usuário quiser salvar qual planeta ele estava? O clássico é fazer uma API que permita usar usuários na sua aplicação, existem ótimos tutoriais para isso que podem te salvar dos pitfalls.
Que linguagem usar?
Em termos de backend, possibilidade é o que não falta. Eu recomendaria começar com algo em node, caso não queria aprender uma linguagem nova, ou Ruby on Rails. Caso seja um aventureiro, existem algumas opções diferenciadas para escolher.
Em python, existem ótimos frameworks para web, Django é capaz de criar sistemas inteiros utilizando uma estrutura MVC por padrão, caso isso seja too much também existe o Flask, um framework web leve para APIs. Go lang também possui algumas ferramentas para criar APIs, se o seu lance é viver no bleeding edge da tecnologia, vale a pena dar uma olhada.
No fundo a linguagem não importa muito, desde que aprenda os fundamentos, migrar de uma linguagem para outra não vai ser grande problema. Desde que não seja PHP, por favor tudo menos PHP.
Espero que você tenha gostado, confira os outros textos do Guia do Dev Iniciante, Introdução ao Git e Componentização usando Vue.js. Qualquer dúvida entre em contato com a Jera.
Texto: Gabriel Kukiel Moura