O Que e uma API
API quer dizer Application Programming Interface (Interface de Programacao de Aplicacoes). Parece complicado, mas a ideia e simples: e um jeito padronizado de um programa pedir coisas para outro programa. Seu site pede "me da a previsao do tempo de hoje" e outro servico responde, sem que seu site precise saber como aquela informacao foi calculada.
🧠 Analogia: O Cardapio e o Garcom do Restaurante
Imagine que voce esta num restaurante. Voce nao entra na cozinha para cozinhar. Voce olha o cardapio (a lista do que da pra pedir), chama o garcom (faz o pedido) e recebe o prato pronto. A cozinha continua escondida.
- •O cardapio = a documentacao da API (o que da pra pedir)
- •O pedido ao garcom = a requisicao (voce pede algo)
- •O prato que chega = a resposta (geralmente em JSON)
- •A cozinha escondida = o servidor (voce nao precisa saber como ele funciona)
💡 Voce ja usa APIs sem perceber
Quando um site mostra "Entrar com o Google", ele esta falando com a API do Google. Quando um app mostra um mapa, esta usando a API do Google Maps. Quando voce ve a cotacao do dolar atualizada, tem uma API por tras. APIs sao a forma como os servicos da internet conversam entre si.
Os Verbos: GET, POST, PUT, DELETE
Toda requisicao tem um verbo que diz a intencao do pedido. Sao quatro principais, e cada um corresponde a uma acao do dia a dia: ler, criar, atualizar e apagar. Quem ja trabalhou com banco de dados conhece como CRUD (Create, Read, Update, Delete).
GET
ler
Busca informacao, sem mudar nada. E o verbo mais comum.
Ex: "me da a lista de usuarios".
POST
criar
Envia dados novos para criar algo.
Ex: "cadastra este novo usuario".
PUT
atualizar
Altera algo que ja existe.
Ex: "muda o email deste usuario".
DELETE
apagar
Remove algo.
Ex: "apaga este usuario".
🧠 Analogia: Um caderno de contatos
Pense numa agenda de contatos no celular. GET e abrir e ler um contato. POST e adicionar um contato novo. PUT e editar o telefone de um contato que ja existe. DELETE e apagar o contato. Sao as quatro coisas que voce faz com qualquer lista de dados.
💡 Dica: GET nao muda nada
Uma regra de ouro: um GET nunca deve alterar dados. So le. Se voce precisa criar, atualizar ou apagar algo, use POST, PUT ou DELETE. Isso evita que um simples clique de "atualizar pagina" cause estragos no servidor.
Testando APIs: curl, Thunder Client e Postman
Antes de escrever uma linha de codigo no seu site, e bom testar a API para ver o que ela responde. Voce tem tres caminhos: o curl (no terminal), o Thunder Client (extensao do VS Code) e o Postman (aplicativo). Os tres fazem a mesma coisa: enviam uma requisicao e mostram a resposta.
curl - testar pelo terminal
O curl ja vem instalado no Mac, no Linux e no Windows moderno. Basta digitar a URL da API:
# Requisicao GET simples
$ curl https://api.exemplo.com/usuarios/1
# A API responde com um JSON:
{"id": 1, "nome": "Ana", "email": "ana@email.com"}
curl com POST e resposta bonita
# Enviar dados com POST (-X define o verbo, -d envia o corpo)
$ curl -X POST https://api.exemplo.com/usuarios \
-H "Content-Type: application/json" \
-d '{"nome": "Bia", "email": "bia@email.com"}'
{"id": 2, "nome": "Bia", "email": "bia@email.com"}
# Deixar o JSON legivel passando por jq
$ curl https://api.exemplo.com/usuarios/1 | jq
{
"id": 1,
"nome": "Ana",
"email": "ana@email.com"
}
👁 O que voce vai ver na tela do Thunder Client
O Thunder Client e uma extensao gratuita do VS Code. A tela tem tres partes:
- •Em cima: um campo para escolher o verbo (GET, POST...) e colar a URL, com um botao Send.
- •No meio: abas para Headers, Body e Auth (quando a API pede senha ou token).
- •Embaixo: a resposta em JSON colorido e o status (ex: 200 OK) com o tempo que levou.
✓ O que FAZER
- ✓Testar a API antes de colocar no codigo
- ✓Salvar as requisicoes que voce usa muito
- ✓Usar
jqpara ler JSON grande
✗ O que NAO fazer
- ✗Colar tokens secretos em prints publicos
- ✗Testar DELETE direto na API de producao
- ✗Ignorar o codigo de status da resposta
Conectando o Frontend a API do Supabase
Agora vamos sair do terminal e fazer a mesma requisicao de dentro do seu site, com JavaScript. A ferramenta para isso e o fetch, que ja vem no navegador. No modulo anterior voce criou um banco no Supabase. Ele expoe uma API REST automatica, entao da pra buscar seus dados direto do frontend.
Monte a URL e os headers
O Supabase da uma URL do projeto e uma chave publica (anon key). Eles vao na requisicao.
// Dados que o painel do Supabase mostra
const URL = "https://seu-projeto.supabase.co";
const CHAVE = "sua-chave-publica-anon";
Faca o GET com fetch
Busca todas as linhas da tabela "tarefas". O await espera a resposta chegar.
const resposta = await fetch(
URL + "/rest/v1/tarefas?select=*",
{ headers: { apikey: CHAVE } }
);
Transforme a resposta em dados
A resposta vem como texto. O .json() converte para um array que voce usa no site.
const tarefas = await resposta.json();
console.log(tarefas);
[{ id: 1, titulo: "Estudar APIs", feito: false }]
O codigo completo, junto
// Busca tarefas do Supabase e mostra na tela
async function carregarTarefas() {
const URL = "https://seu-projeto.supabase.co";
const CHAVE = "sua-chave-publica-anon";
const r = await fetch(URL + "/rest/v1/tarefas?select=*", {
headers: { apikey: CHAVE }
});
const tarefas = await r.json();
tarefas.forEach(t => console.log(t.titulo));
}
carregarTarefas();
⚠️ Erro Comum
Problema: "A requisicao volta vazia ou com erro de CORS / permissao."
Solucao: No Supabase, ative as politicas RLS (Row Level Security) para permitir leitura publica da tabela, e confira se a URL do projeto e a chave anon estao corretas (sem espacos sobrando). A chave anon e segura de usar no frontend; a chave service_role NUNCA deve ir para o navegador.
APIs Publicas Uteis: Clima e CEP
Existem milhares de APIs publicas e gratuitas que voce pode usar agora mesmo. Duas que sao muito praticas no Brasil: a do clima e a de CEP (o ViaCEP). Vamos testar as duas com fetch.
ViaCEP - endereco a partir do CEP
Voce passa o CEP na URL e recebe o endereco completo. Nao precisa de chave nem cadastro. Otimo para preencher formularios de endereco.
# Testando no terminal com curl
$ curl https://viacep.com.br/ws/01001000/json/
{
"cep": "01001-000",
"logradouro": "Praca da Se",
"bairro": "Se",
"localidade": "Sao Paulo",
"uf": "SP"
}
// O mesmo com fetch, no site
const cep = "01001000";
const r = await fetch("https://viacep.com.br/ws/" + cep + "/json/");
const end = await r.json();
console.log(end.localidade); // "Sao Paulo"
Clima - previsao do tempo (Open-Meteo)
O Open-Meteo e gratuito e nao pede chave. Voce passa a latitude e longitude e recebe a temperatura atual.
# Temperatura atual em Sao Paulo
$ curl "https://api.open-meteo.com/v1/forecast?latitude=-23.55&longitude=-46.63¤t=temperature_2m"
{
"current": { "temperature_2m": 24.3 }
}
🧠 Analogia: APIs publicas sao bibliotecas abertas
Uma API publica e como uma biblioteca de bairro: qualquer um entra, consulta um livro e sai, sem pagar. Algumas pedem so um cadastro (uma "carteirinha", que e a chave de API) para controlar quantas consultas voce faz por dia. ViaCEP e Open-Meteo nem carteirinha exigem.
💡 Dica: onde achar mais APIs
Procure por listas de "public APIs" no GitHub. Tem APIs de cotacao de moedas, feriados, frases motivacionais, dados de filmes, Pokemon, e muito mais. Comece pelas que nao pedem chave: e o jeito mais rapido de praticar fetch.
Tratamento de Erros: Status e try/catch
Nem toda requisicao da certo. A internet cai, o servidor falha, o CEP nao existe. Por isso, todo codigo que fala com API precisa tratar erros. Duas ferramentas: ler o codigo de status da resposta e envolver tudo num try/catch.
OK
Deu tudo certo. A resposta veio.
Nao Encontrado
O recurso pedido nao existe.
Erro do Servidor
A culpa e da API, nao sua.
Uma regra simples: status que comecam com 2 sao sucesso, com 4 sao erro seu (voce pediu errado), e com 5 sao erro do servidor.
Tratando erros com try/catch e o status
async function buscarCep(cep) {
try {
const r = await fetch("https://viacep.com.br/ws/" + cep + "/json/");
// r.ok e true quando o status e 200-299
if (!r.ok) {
throw new Error("Servidor respondeu " + r.status);
}
const dados = await r.json();
if (dados.erro) {
alert("CEP nao encontrado. Confira o numero.");
return;
}
console.log(dados.localidade);
} catch (e) {
// Cai aqui se a internet caiu ou o fetch falhou
alert("Nao foi possivel conectar. Tente de novo.");
}
}
✓ O que FAZER
- ✓Checar
r.okour.status - ✓Envolver o fetch num
try/catch - ✓Mostrar mensagem clara ao usuario
✗ O que NAO fazer
- ✗Assumir que a resposta sempre vem
- ✗Mostrar erro tecnico cru ao usuario
- ✗Deixar a tela travada esperando para sempre
⚠️ Erro Comum
Problema: "O fetch nao caiu no catch, mas o site quebrou."
Solucao: O fetch so cai no catch quando a conexao falha. Um status 404 ou 500 e considerado uma resposta valida pelo fetch. Por isso voce PRECISA checar r.ok manualmente, como no exemplo acima. Sem isso, voce tenta ler um JSON que nao existe e o site quebra.
📚 Resumo do Modulo
Proximo Modulo:
2.4 - Variaveis de Ambiente (guardar chaves e segredos fora do codigo, com seguranca)