Protocolo HTTP e APIs RestFull

Prof. Luiz Eduardo C. Leite

WEB
WEB, ou World Wide Web, é um sistema de documentos e recursos interconectados que
podem ser acessados pela internet. Esses documentos geralmente estão em formato HTML
(HyperText Markup Language) e podem incluir texto, imagens, vídeos e links para outros
documentos.

A WEB é composta por três principais tecnologias que formam sua base:

1. HTTP (Hypertext Transfer Protocol): O protocolo que permite a comunicação entre um cliente
(como um navegador) e um servidor para transferir informações na forma de páginas web.

1. HTML (Hypertext Markup Language): A linguagem de marcação usada para criar e estruturar
o conteúdo das páginas web.

2. URLs (Uniform Resource Locators): Os endereços únicos usados para localizar e acessar
recursos na web.

Embora muitas vezes seja confundida com a internet, a WEB é apenas um dos serviços que
operam sobre a internet, sendo projetada especificamente para navegação e acesso a
informações.

A Web foi criada em 1989 por Tim Berners-Lee e se tornou pública em 1991. Desde então,
evoluiu significativamente com tecnologias como JavaScript, CSS, e frameworks que permitem
interatividade e recursos avançados em aplicações web.
Protocolo HTTP
HTTP (Hypertext Transfer Protocol) é o protocolo de
comunicação usado para transferir informações na World Wide
Web. Ele define como as mensagens são formatadas e
transmitidas, e como servidores e navegadores devem agir em
resposta a essas mensagens.

Protocolos de Transporte:
• O HTTP opera sobre protocolos de transporte como o TCP
(Transmission Control Protocol).

• Por padrão, a porta TCP 80 é usada para HTTP e a 443 para

HTTPS (versão segura do HTTP).
Protocolo HTTP
Baseado em Requisições e Respostas:

• O cliente (geralmente um navegador) envia uma Requisição HTTP para o

servidor.
• O servidor processa a requisição e devolve uma Resposta HTTP, que pode incluir
o conteúdo solicitado (como uma página web) ou informações sobre o status do
processamento.

Exemplo de fluxo:

• Cliente requisita GET /index.html.

• Servidor responde com o conteúdo da página index.html

Protocolo Sem Estado (Stateless):

• Cada requisição é independente das anteriores. O servidor não armazena

informações sobre requisições passadas.
• Para manter informações entre requisições, são usados mecanismos como
cookies ou sessões.
Protocolo HTTP
Requisições e Respostas:

• As Requisições e Respostas HTTP são baseadas em texto legível por humanos. Isso foi
projetado para facilitar a depuração e a compreensão do protocolo.

• Cada Requisição HTTP tem um cabeçalho que inclui informações como o Método HTTP, a
URL solicitada e os cabeçalhos adicionais (por exemplo, tipo de conteúdo ou autenticação).

• A Resposta do servidor também inclui cabeçalhos (como o código de status) e um corpo

que contém os dados solicitados (como uma página HTML, por exemplo).

Métodos HTTP:

• Definem diferentes ações para manipulação de recursos:

• GET: Recuperar dados.

• POST: Enviar dados para o servidor.
• PUT: Atualizar dados existentes.
• DELETE: Remover dados.
• HEAD, PATCH, OPTIONS, TRACE, CONNECT: Outros métodos específicos.
Requisições HTTP
Uma requisição HTTP geralmente tem três partes principais:

• Linha de Requisição: Especifica o método HTTP, o recurso solicitado

(caminho) e a versão do protocolo. Exemplo:
GET /index.html HTTP/1.1

• Cabeçalhos da Requisição: Metadados que fornecem informações

adicionais sobre a requisição (Nome-Do-Cabeçalho: Valor). Exemplo:
Host: www.exemplo.com
User-Agent: Mozilla/5.0
Accept: text/html

• Corpo da Requisição (opcional): Usado em métodos como POST ou PUT

para enviar dados ao servidor. Exemplo (JSON enviado em uma
requisição POST):
{ "nome": "João", "idade": 30 }
Requisições HTTP - Exemplo

GET /index.html HTTP/1.1

Host: www.exemplo.com
User-Agent: Mozilla/5.0
Accept: text/html
Respostas HTTP
Uma resposta HTTP também tem três partes principais:

• Linha de Status: Indica a versão do protocolo, o código de status da

resposta e uma mensagem associada. Exemplo:
HTTP/1.1 200 OK

• Cabeçalhos da Resposta: Informações adicionais sobre os dados

retornados ou sobre o servidor (Nome-Do-Cabeçalho: Valor). Exemplo:
Content-Type: text/html
Content-Length: 348
Date: Tue, 11 Nov 2024 10:00:00 GMT

• Corpo da Resposta (opcional): Contém o conteúdo retornado pelo

servidor, como HTML, JSON, imagens, etc. Exemplo (conteúdo HTML)
<!DOCTYPE html>
<html>
<head> <title> Exemplo </title> </head>
<body> <h1>Olá, mundo!</h1> </body>
</html>
Respostas HTTP - Exemplo

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 125

<!DOCTYPE html>
<html>
<head>
<title>Página Inicial</title>
</head>
<body>
<h1>Bem-vindo ao nosso site!</h1>
</body>
</html>
Respostas HTTP
• 1xx (Informativo): A requisição foi recebida e está em
processamento.
• 2xx (Sucesso):
• 200 OK: Requisição bem-sucedida.
• 201 Created: Recurso criado com sucesso.
• 3xx (Redirecionamento):
• 301 Moved Permanently: Recurso movido permanentemente.
• 302 Found: Redirecionamento temporário.
• 4xx (Erro do Cliente):
• 400 Bad Request: Requisição inválida.
• 404 Not Found: Recurso não encontrado.
• 5xx (Erro do Servidor):
• 500 Internal Server Error: Erro interno no servidor.
• 503 Service Unavailable: Serviço indisponível.
HTML
HTML (HyperText Markup Language) é uma linguagem de marcação
usada para criar e estruturar o conteúdo de páginas na Web. Ele define a
organização e o formato de textos, imagens, vídeos, links e outros
elementos em uma página que é exibida no navegador.
• O HTML usa tags para identificar elementos na página.
• Uma tag é escrita entre sinais de menor e maior que ( < > )
<p> Este é um parágrafo. </p>
• As tags são aninhadas e organizadas hierarquicamente, criando uma
estrutura de árvore que organiza o conteúdo.
<div>
<h1>Título</h1>
<p>Este é um parágrafo dentro de uma divisão.</p>
</div>
• O HTML não é uma linguagem de programação, não possuindo lógica,
condições ou loops, sendo focado apenas na marcação e estruturação
do conteúdo.
• O HTML é desenvolvido e mantido pelo World Wide Web Consortium
(W3C) para garantir consistência entre navegadores.
HTML - Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Minha Página</title>
</head>
<body>
<h1>Bem-vindo!</h1>
<p>Este é o conteúdo principal da página.</p>
</body>
</html>
HTML – Algumas Tags Principais
• Tags de Texto:
<h1> a <h6>: Títulos, com tamanhos decrescentes.
<p>: Parágrafos.
<span>: Pequenos trechos de texto.
<strong> e <em>: Negrito e itálico, respectivamente.
• Tags de Mídia:
<img>: Imagens.
<video> e <audio>: Vídeos e áudios.
• Tags de Link e Navegação:
<a>: Links.
<nav>: Seções de navegação.
• Tags de Estruturação:
<div>: Divisões genéricas.
<section> e <article>: Estruturas semânticas para organização.
• Formulários:
<form>: Formulários de entrada.
<input>, <textarea>, <button>: Campos de entrada e botões.
JSON
JSON (JavaScript Object Notation) é um formato de texto leve usado
para armazenar e transportar dados. Ele é amplamente utilizado em
aplicações web para troca de informações entre clientes e servidores
devido à sua simplicidade e legibilidade por humanos.
• É uma estrutura textual, fácil de ler e escrever para humanos e
interpretar por máquinas.
• Pode ser transportado pelo protocolo HTTP.
• Apesar de ser derivado da sintaxe de objetos do JavaScript, o JSON é
independente de linguagem e pode ser usado em praticamente
qualquer tecnologia.
• Dados no JSON são representados em pares de chave-valor e/ou em
listas de valores.
• Comparado a outros formatos como XML, o JSON é mais compacto e
simples, o que reduz o tamanho dos dados transmitidos.
JSON - Estrutura
O JSON usa dois tipos principais de estrutura:

• Objetos (pares de chave-valor): Representam dados organizados em chaves e seus valores

associados.
{
"nome": "João",
"idade": 30,
"profissao": "Engenheiro"
}

• Arrays (listas de valores): Coleções ordenadas de dados.

["maçã", "banana", "laranja"]

• Objetos e Arrays podem ser combinados para criar estruturas complexas.

{
"usuario": {
"nome": "João",
"idade": 30
},
"habilidades": ["programação", "design", "gestão"],
"ativo": true
}
API REST
Uma API REST (Representational State Transfer) é uma interface que permite a
comunicação entre sistemas usando as convenções e princípios do estilo
arquitetural REST. É amplamente utilizada em aplicações web modernas para
permitir que diferentes sistemas troquem informações de forma eficiente e
escalável.

• Os sistemas são organizados em recursos identificados por URLs únicas.

Exemplo:
• Recurso "usuários": /usuarios
• Recurso específico: /usuarios/1 (usuário com ID 1)

• As ações sobre os recursos são realizadas utilizando Métodos HTTP

padronizados
• GET: Recuperar dados.
• POST: Criar um novo recurso.
• PUT: Atualizar um recurso existente.
• DELETE: Remover um recurso.

• Geralmente utiliza JSON para enviar e receber dados devido à sua simplicidade e
compatibilidade, mas também suporta XML, HTML, etc.
API REST
• Baseada em URLs Semânticas: As URLs devem ser claras e
indicativas do recurso que representam.
• Exemplo de URL bem projetada:
• http://127.0.0.1/produtos/123
• Exemplo de URL mal projetada:
• http://127.0.0.1/obterProdutoPorID?id=123

• As respostas utilizam Códigos de Status HTTP para indicar o

resultado da operação:
• 200 OK: Sucesso.
• 201 Created: Recurso criado.
• 404 Not Found: Recurso não encontrado.
• 500 Internal Server Error: Erro no servidor.
API REST - Exemplo
• Requisição para Obter Dados (GET):

• URL: https://api.exemplo.com/usuarios/1
• Método: GET
• Resposta:
{
"id": 1,
"nome": "João",
"email": "[email protected]"
}
API REST - Exemplo
• Requisição para Criar um Novo Usuário (POST):

• URL: https://api.exemplo.com/usuarios
• Método: POST
• Corpo:
{
"nome": “Maria",
"email": “[email protected]"
}
• Resposta:
{
"id": 2,
"nome": “Maria",
"email": “[email protected]"
}
API REST - Exemplo
• Requisição para Atualizar um Usuário (PUT):

• URL: https://api.exemplo.com/usuarios/2
• Método: PUT
• Corpo:
{
"nome": “Maria Silva",
"email": “[email protected]"
}
• Resposta:
{
"id": 2,
"nome": “Maria Silva",
"email": “[email protected]"
}
API REST - Exemplo
• Requisição para Deletar um Usuário (DELETE):

• URL: https://api.exemplo.com/usuarios/2
• Método: DELETE
• Resposta:
{
“mensagem": “Usuário deletado com sucesso."
}
Implementação de APIs REST
• A implementação de uma API REST varia dependendo da
linguagem de programação escolhida, mas o conceito básico
é o mesmo: criar endpoints que respondem a requisições
HTTP e retornam dados em um formato como JSON.

• Na linguagem Python APIs REST podem ser implementadas

com o framework Flask, por exemplo.

• Já na plataforma ESP32, utilizando o framework Arduino, APIs

REST podem ser implementadas através de bibliotecas tais
como ESPAsyncWebServer ou WebServer.
• O ESP32 pode atuar como servidor web, processando requisições
HTTP e retornando respostas, geralmente no formato JSON.