Desenvolvimento de Web Frontend
Interação com APIs e Desenvolvimento de
Aplicações
HTTP & REST CRUD & Métodos Axios & Requests
Professor: F. Laurindo Costa Jr
Fundamentos de APIs - Definição e Arquitetura
Arquitetura Cliente-Servidor
O que é uma API?
Conjunto de definições e protocolos para construir e integrar software de
aplicação. Permite que sistemas se comuniquem e troquem dados de
forma padronizada.
Cliente-Servidor Recursos
Arquitetura base da interação com Em APIs RESTful, tudo é tratado
APIs. O cliente faz requisições a como um recurso - uma abstração
um servidor que processa e de informação que pode ser
retorna respostas. nomeada (usuários, produtos,
Detalhes da Arquitetura:
pedidos). • APIs como Contratos: Definem como os desenvolvedores
podem solicitar serviços ou dados de outro software.
• Independência: Permite que o cliente e o servidor evoluam
URI (Identificador de Recurso Uniforme)
independentemente, desde que o contrato (API) seja mantido.
Identifica um recurso específico na web. Em APIs REST, as URIs são usadas
para localizar os recursos com os quais se deseja interagir.
• Padronização: Facilita a integração entre sistemas diferentes,
Exemplo: [Link]
proporcionando uma interface comum.
Protocolo HTTP e Métodos CRUD
Mapeamento CRUD para HTTP
Protocolo HTTP
HyperText Transfer Protocol (HTTP) é o protocolo subjacente para C Create R Read
a World Wide Web e define como as mensagens são formatadas e Método: POST Método: GET
Ação: Criar novo recurso Ação: Recuperar recurso(s)
transmitidas.
Define quais ações os servidores web e navegadores devem tomar em
resposta a vários comandos
U Update D Delete
Base para interação com APIs RESTful
Métodos: PUT/PATCH Método: DELETE
Define estados e ciclos de vida de requisições
Ação: Atualizar recurso existente Ação: Remover recurso existente
Contexto nas Aplicações
A interação com APIs RESTful é predominantemente baseada em HTTP. Os
métodos HTTP são mapeados para operações CRUD, proporcionando uma
interface uniforme para diferentes sistemas.
Mapeamento Completo CRUD para HTTP
As operações CRUD (Create, Read, Update, Delete) são mapeadas para métodos HTTP específicos, estabelecendo um contrato para interação com
recursos na web.
Operação CRUD Método HTTP Descrição Exemplo
POST Criação de um novo recurso no servidor. POST /usuarios
Create
GET /usuarios/123
Read GET Leitura de recursos do servidor.
PUT /usuarios/123
Update PUT Atualização completa de um recurso existente.
DELETE /usuarios/123
Delete DELETE Remoção de um recurso existente.
Arquitetura REST - Princípios Fundamentais
Stateless Interface Uniforme Sistema em Camadas
Cada requisição deve conter todas as Recursos identificados uniformemente através Hierarquia de servidores que podem ser
informações necessárias para processá-la. O de URIs e manipulados através de organizados em camadas, permitindo que
servidor não deve armazenar estado entre representações comuns (JSON, XML). intermediários (proxy, gateway) processem a
requisições. requisição.
Benefício: Escalabilidade e simplicidade. Benefício: Interoperabilidade e padronização. Benefício: Segurança e escalabilidade.
Cacheable Código sob Demanda Cliente-Servidor
Respostas devem ser explicitamente marcadas Os recursos podem incluir código executável Separação entre interface do usuário (cliente) e
como cacheáveis ou não, reduzindo a latência e que é baixado e executado em clientes provedor de dados (servidor), permitindo
melhorando o desempenho. compatíveis. evolução independente.
Benefício: Eficiência e redução de carga. Benefício: Extensibilidade funcional. Benefício: Independência e portabilidade.
Estados HTTP e Códigos de Resposta
Os códigos de status HTTP comunicam o resultado das requisições feitas aos servidores. Eles são organizados em categorias e são fundamentais para o
desenvolvimento de APIs robustas.
1xx Informacional 2xx Sucesso 3xx 4xx Erro do Cliente 5xx Erro do Servidor
Requisição processada com Redirecionamento
Requisição recebida, sucesso Ação adicional necessária para Requisição inválida ou Falha no servidor ao processar a
processamento continuará • 200 OK concluir a requisição malformada requisição
• 201 Created
• 100 Continue • 301 Moved Permanently • 400 Bad Request • 500 Internal Server Error
• 204 No Content
• 101 Switching Protocols • 302 Found • 401 Unauthorized • 502 Bad Gateway
• 304 Not Modified • 403 Forbidden • 503 Service Unavailable
• 404 Not Found • 504 Gateway Timeout
Faixa de Códigos de Status HTTP
Biblioteca Axios - Introdução e Configuração
O que é Axios? Vantagens do Axios
Axios é uma biblioteca JavaScript baseada em promises para fazer
Promises Interceptadores
requisições HTTP de forma simplificada, suportando navegadores e baseada em promises para Permite interceptar requisições e
[Link]. tratamento de requisições respostas para processamento.
Instalação assíncronas.
npm yarn Cancelamento Progresso
npm install axios yarn add axios Possibilidade de cancelar requisições Suporte para monitoramento de
pendentes. progresso de upload/download.
Importação Exemplo Básico
import axios from 'axios'; // Requisição GET
[Link]('[Link] .then(response
=> { [Link]([Link]); }) .catch(error => {
[Link](error); });
Configuração Avançada do Axios
Instâncias Customizadas Interceptadores de Requisição e Resposta
Cria instâncias do Axios com configurações específicas para diferentes contextos. Funções executadas antes de uma requisição ser enviada ou após uma resposta
ser recebida.
const apiClient = [Link]({
"baseURL": "[Link] Interceptadores de Requisição
"timeout": 5000
const requestInterceptor = [Link](async (config) => {
});
[Link] = `Bearer ${token}`;
return config;
});
Configurações de Timeout
Define o tempo limite para requisições HTTP, evitando bloqueios indeterminados.
Interceptadores de Resposta
const config = {
const responseInterceptor = [Link](async (response) =>
"timeout": 10000, // 10 segundos
{
"timeoutErrorMessage": "Tempo limite excedido"
return [Link];
};
}, async (error) => {
if ([Link] === 401) {
handleLogout();
}
return [Link](error);
});
Implementação de Requisições POST
Configuração de Content-Type
Enviando Dados JSON // Para JSON (padrão)
const data = { await [Link]("/usuarios", data, {
"nome": "João", headers: {"Content-Type": "application/json"}
"email": "joao@[Link]" }));
}; // Para FormData
await [Link]("/usuarios", data); await [Link]("/usuarios", formData, {
headers: {"Content-Type": "multipart/form-data"}
}));
Validação de Payload
Valide os dados antes de enviar:
• Verifique tipos de dados
• Valide formatos (email, CPF)
Enviando FormData • Confirme campos obrigatórios
const formData = new FormData(); const schema = [Link]().shape({
[Link]("nome", "João"); nome: [Link]().required(),
[Link]("foto", [Link][0]); email: [Link]().email().required()
await [Link]("/usuarios", formData); });
try {
await [Link](data);
} catch (err) {
// Tratar erros de validação
}
Tratamento de Erros - Estratégias Avançadas
Interceptadores de Erro Logging Detalhado de Falhas
Middleware que captura e processa erros em requisições HTTP. Permite Registro completo de erros com contexto, permitindo diagnóstico rápido e
tratamento centralizado de exceções, logging consistente e respostas análise de padrões de falha.
padronizadas.
Campos Essenciais Níveis de Log
• Código de erro • Debug
• Timestamp • Info
Retry Automático
• Contexto da requisição • Warn
Implementação de lógica de retry com backoff exponencial para operações • Stack trace • Error
falhas. Configuração de máximas tentativas, condições de retry e delays entre
tentativas.
[Link]('/api/data')
.retry(3, 1000)
.catch(handleError);
Estados de Carregamento - UX e Performance
Por que Estados de Carregamento são Exemplos de Estados de Carregamento
Importantes?
Skeleton Screen
• Evita que o usuário pense que a aplicação travou
• Fornece feedback visual sobre o progresso
• Melhora a percepção de performance
Implementação Prática
Gerenciamento: Estados claros para carregamento, sucesso e erro
Progress Indicators
Priorização: Mostre os carregamentos mais importantes primeiro
Spinner Indeterminate Determinate
Considerações de Performance
Transições entre Estados
• Evite sobrecarga de elementos de carregamento
• Implemente lazy loading para conteúdos não essenciais
• Use skeletons screens para melhorar a percepção
Autenticação e Autorização em APIs
Autenticação vs. Autorização
Práticas Seguras de Implementação
Autenticação Autorização Uso de HTTPS: Sempre utilize conexões seguras para transmitir tokens.
Verifica "quem" você é. Confirma a Determina "o que" você pode fazer. Storage seguro: Armazene tokens em localidades seguras (HttpOnly cookies, não no
identidade do usuário através de Estabelecе quais recursos e ações o localStorage).
credenciais. usuário tem permissão. Validação rigorosa: Valide todos os tokens no servidor antes de conceder acesso.
Tempos de expiração: Configure tempos limitados para tokens de acesso e use
JWT (JSON Web Tokens) refresh tokens.
Token aberto que permite a verificação de identidade de forma segura entre parties. Escopos limitados: Conceda apenas as permissões necessárias no payload do token.
Composto por cabeçalho, payload e assinatura.
OAuth 2.0
Protocolo de autorização que permite a aplicativos obterem acesso limitado a recursos de
uma API em nome do proprietário.
Refresh Tokens
Mecanismo de segurança que permite a renovação de tokens expirados sem necessidade
de novo login do usuário.
Validação e Sanitização de Dados
Por que validar e sanatizar dados?
Em APIs, a validação e sanitização garantem a integridade, segurança e
consistência dos dados. Processos inadequados podem levar a vulnerabilidades e Schemas de Validação
falhas de funcionamento. Estruturas que definem a forma e os tipos esperados dos dados, como contrato
entre cliente e servidor.
Validação Client-Side
Benefícios:
• Documentação automática
• Realizada no lado do cliente
• Validação consistente
• Melhora a UX com feedback imediato
• Facilita a detecção de erros
• Usada para validações básicas
Sanitização de Inputs
Validação Server-Side Processo de remoção de caracteres potencialmente maliciosos de inputs do
usuário.
• Realizada no lado do servidor
Práticas recomendadas:
• É sempre executada
• Validação rigorosa de tipos
• Protege contra dados maliciosos
• Limitação de comprimento
• Uso de whitelists
Validação e Sanitização de Dados
Cache e Performance - Otimizações
Estratégias de Cache
HTTP Caching
• Cache Headers: Utilize Cache-Control e ETag.
• Freshness: Defina tempo de validade para recursos.
Client-Side Storage
localStorage sessionStorage
• Persistente entre sessões • Válido apenas na sessão
• Armazenamento limitado • Mais rápido que localStorage
Cache e Performance - Otimizações
Ciclo de Vida do Cache
Fonte: [Link]
Modularização e Arquitetura de Código
Separação de Arquitetura Modular
Camada de Services
Responsabilidades
Dividir o código em módulos com Abstrai a lógica de negócios da
responsabilidades bem definidas. interface e das requisições. Facilita
Cada módulo deve ter uma única testes e manutenção.
razão para existir.
Repository Pattern
Camada de abstração que permite o gerenciamento de dados. Isola os
detalhes de implementação do acesso aos dados.
Organização de Código Escalável
• Padrões de nomenclatura consistentes
• Estruturação por feature/área de negócio
• Documentação e comentários
Testing e Debugging de APIs
Abordagens de Testing Debugging e Monitoramento
Unit Tests Ferramentas de Debugging
Testes isolados que verificam o funcionamento individual de cada unidade de
• DevTools: Ferramentas integradas aos navegadores para inspeção e
código. Permite identificar problemas rapidamente.
depuração.
• Postman: Ambiente de teste de APIs com capacidades de debugging.
Integration Tests
• curl/httpie: Ferramentas de linha de comando para testar requisições.
Testes que verificam a integração entre diferentes módulos ou serviços. Garante
que os componentes trabalhem juntos corretamente.
Mocking de APIs Monitoramento
Técnicas para simular respostas de APIs durante os testes, permitindo testar o • Log Aggregation: Coleta e análise de logs para identificar problemas.
comportamento do sistema sem depender de serviços externos.
• APM: Ferramentas que monitoram métricas de performance em tempo
real.
• Error Tracking: Soluções que capturam e relatam exceções em produção.
Boas Práticas e Padrões de Desenvolvimento
Code Review Versionamento Segurança em Produção
• Práticas de revisão em equipe • API Versioning • Autenticação
• Checklist de qualidade • Depreciação • Autorização
• Padrões de codificação • Compatibilidade • Proteção contra ataques
Principais Considerações
Documentação Rate Limiting
Boas práticas e padrões de desenvolvimento
• OpenAPI Specification • Limites de requisição são fundamentais para a manutenção e
• Exemplos de uso • Throttling evolução de APIs. Eles garantem qualidade,
• Descrições claras • Excesso de carga segurança e consistência no código.
Casos de Uso Avançados
Upload de Arquivos Streaming de Dados WebSockets
Transferência de arquivos entre cliente e servidor, Transferência contínua de dados para Conexões bidirecionais persistentes para
com tratamento para grandes arquivos. processamento em tempo real. comunicação em tempo real.
Multipart form data para envio Server-Sent Events (SSE) Long polling e keep-alive
Progresso do upload com barra Chunked transfer encoding Message framing e compression
Validação de tipo e tamanho Backpressure handling Reconnection strategies
Integração com APIs de Dicas de Implementação
GraphQL
Terceiros
Linguagem de consulta declarativa para APIs, Conexões com serviços externos, gerenciando Melhores práticas para implementação de casos de
solicitando apenas os dados necessários. autenticações e protocolos. uso avançados.
Single endpoint com query language OAuth 2.0 e API keys Implementação modular
Typesafe resolvers e validation Rate limiting e circuit breakers Tratamento de erros e exceções
Real-time data com subscriptions Adapters para normalização Documentação completa
Deployment e Monitoramento
Processo de Deployment Monitoramento
CI/CD Métricas de Performance
Integração contínua e entrega contínua automatizam o processo de Monitoramento de tempos de resposta, throughput, uso de CPU e
build, testes e deploy, reduzindo erros e acelerando o tempo de memória, além de métricas business-specific.
release.
Logging
Ambientação Implementação de logs estruturados com níveis adequados (error,
Configuração adequada de variáveis de ambiente, secrets e warn, info, debug) e centralização para facilitar a análise.
serviços dependentes para cada stage (desenvolvimento,
homologação, produção).
Alertas
Deploy Progressivo Sistemas de alerta baseados em métricas com regras bem
Strategias de deploy que minimizam o impacto em produção, como definidas, evitando alertas falsos positivos e garantindo resposta
blue-green deployment e canary releases. rápida a problemas.
