Criando seu Primeiro Web Server no ESP32 Passo a Passo

Marcelo V. Souza 1s 226ms

O ESP32 é um microcontrolador poderoso e versátil, amplamente utilizado em projetos de Internet das Coisas (IoT). Uma de suas funcionalidades mais atraentes é a capacidade de hospedar um servidor web, permitindo interações em tempo real através de uma interface amigável. Neste guia, vamos construir juntos um web server simples usando o ESP32, permitindo que você controle dispositivos e monitore sensores diretamente do seu navegador.

Introdução🔗

Imagine acender uma lâmpada ou ler a temperatura ambiente com apenas um clique no seu smartphone ou computador. Com o ESP32, isso é possível e mais simples do que parece. Vamos explorar os conceitos fundamentais e mergulhar na prática para que você possa implementar isso em seus próprios projetos.

Materiais Necessários🔗

ESP32 DevKit ou módulo equivalente
Cabo USB para programação
Computador com Arduino IDE instalado
Acesso à rede Wi-Fi
LED e resistor de 220Ω (opcional, para testes práticos)

Configurando o Ambiente🔗

Antes de começarmos a codificação, é essencial garantir que o ambiente de desenvolvimento esteja configurado corretamente.

Instalando o Suporte ao ESP32 no Arduino IDE

1. Abra o Arduino IDE.

2. Vá em Arquivo > Preferências.

3. No campo URL's Adicionais para Gerenciadores de Placas, adicione:

https://dl.espressif.com/dl/package_esp32_index.json

4. Clique em OK.

5. Em seguida, vá em Ferramentas > Placa > Gerenciador de Placas.

6. Pesquise por ESP32 e instale o pacote "esp32" da Espressif Systems.

Selecionando a Placa e Porta Correta

Em Ferramentas > Placa, selecione o modelo do seu ESP32, como "ESP32 Dev Module".
Conecte o ESP32 ao computador via USB.
Em Ferramentas > Porta, selecione a porta correspondente ao seu dispositivo.

Escrevendo o Código do Web Server🔗

Agora que o ambiente está pronto, vamos começar a escrever o código necessário para criar nosso web server.

Importando Bibliotecas Necessárias

No início do código, precisamos incluir as bibliotecas que permitirão ao ESP32 conectar-se à rede Wi-Fi e criar o servidor web.

#include <WiFi.h>

Definindo as Credenciais Wi-Fi

Substitua "SEU_SSID" e "SUA_SENHA" pelo nome e senha da sua rede Wi-Fi.

const char* ssid = "SEU_SSID";
const char* password = "SUA_SENHA";

Criando um Objeto WiFiServer

Defina a porta na qual o servidor irá operar, geralmente a porta 80 para HTTP.

WiFiServer server(80);

Configurando o Setup()

Na função setup(), vamos inicializar a comunicação serial, conectar à rede Wi-Fi e iniciar o servidor.

void setup()
{
  Serial.begin(115200);
  delay(10);
  // Conectando ao Wi-Fi
  Serial.println("Conectando ao WiFi...");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(1000);
    Serial.println("Tentando conectar...");
  }
  Serial.println("Conectado!");
  Serial.print("Endereço IP: ");
  Serial.println(WiFi.localIP());
  // Iniciando o servidor
  server.begin();
}

Desenvolvendo a Função Loop()

Na função loop(), o ESP32 irá aguardar por conexões de clientes e responder às requisições HTTP.

void loop()
{
  WiFiClient client = server.available();
  if (client)
  {
    Serial.println("Cliente conectado.");
    String request = "";
    while (client.connected())
    {
      if (client.available())
      {
        char c = client.read();
        request += c;
        if (c == '\n')
        {
          // Requisição completa recebida
          Serial.print("Requisição: ");
          Serial.println(request);
          // Resposta HTTP
          client.println("HTTP/1.1 200 OK");
          client.println("Content-type:text/html");
          client.println();
          // Corpo da página
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("<h1>Olá, Mundo!</h1>");
          client.println("</html>");
          break;
        }
      }
    }
    delay(1);
    client.stop();
    Serial.println("Cliente desconectado.");
  }
}

Entendendo o Código🔗

Vamos dissecar as partes mais importantes do código para entender seu funcionamento.

Conexão Wi-Fi

A função WiFi.begin(ssid, password); inicia a conexão com a rede Wi-Fi. O loop while (WiFi.status() != WL_CONNECTED) mantém o ESP32 tentando conectar até obter sucesso.

Iniciando o Servidor

server.begin(); inicia o servidor na porta definida (porta 80). O ESP32 agora está pronto para aceitar conexões de clientes.

Aceitando Conexões de Clientes

Dentro do loop principal, server.available(); verifica se há clientes tentando se conectar. Se houver, cria-se um objeto WiFiClient para interagir com o cliente.

Lendo a Requisição HTTP

O código lê os dados enviados pelo cliente caractere por caractere e monta a requisição HTTP.

Respondendo ao Cliente

Após receber a requisição completa, o ESP32 envia uma resposta HTTP, incluindo os cabeçalhos e o corpo da página que será exibida no navegador.

Testando o Web Server🔗

Obtendo o Endereço IP

Ao conectar-se ao Wi-Fi, o ESP32 imprime no monitor serial o endereço IP que recebeu. Por exemplo:

Endereço IP: 192.168.0.10

Acessando pelo Navegador

Abra um navegador web no seu computador ou smartphone conectado à mesma rede e digite o endereço IP do ESP32 na barra de endereços:

http://192.168.0.10/

Você deve ver uma página com a mensagem "Olá, Mundo!".

Adicionando Interatividade🔗

Vamos aprimorar nosso web server permitindo que o usuário interaja com o ESP32. Por exemplo, podemos controlar um LED conectado a um dos pinos GPIO.

Configurando o Hardware

Conecte o ânodo do LED (perna longa) ao pino GPIO 2 do ESP32 através de um resistor de 220Ω.
Conecte o cátodo (perna curta) ao GND.

Atualizando o Código

Primeiro, definimos o pino como saída no setup():

const int ledPin = 2;
void setup()
{
  // ... código anterior ...
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
}

Alteramos a função loop() para interpretar comandos da URL:

void loop()
{
  WiFiClient client = server.available();
  if (client)
  {
    Serial.println("Cliente conectado.");
    String request = "";
    while (client.connected())
    {
      if (client.available())
      {
        char c = client.read();
        request += c;
        if (c == '\n')
        {
          // Processando a requisição
          if (request.indexOf("/LED=ON") != -1)
          {
            digitalWrite(ledPin, HIGH);
            Serial.println("LED ligado.");
          }
          if (request.indexOf("/LED=OFF") != -1)
          {
            digitalWrite(ledPin, LOW);
            Serial.println("LED desligado.");
          }
          // Resposta HTTP
          client.println("HTTP/1.1 200 OK");
          client.println("Content-type:text/html");
          client.println();
          // Página HTML com links para controlar o LED
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("<h1>Controle do LED</h1>");
          client.println("<p><a href=\"/LED=ON\"><button>Ligar</button></a></p>");
          client.println("<p><a href=\"/LED=OFF\"><button>Desligar</button></a></p>");
          client.println("</html>");
          break;
        }
      }
    }
    delay(1);
    client.stop();
    Serial.println("Cliente desconectado.");
  }
}

Explicando as Modificações

Análise da Requisição: Utilizamos request.indexOf("/LED=ON") para verificar se o usuário clicou no link para ligar o LED.
Controle do LED: digitalWrite(ledPin, HIGH); liga o LED, enquanto digitalWrite(ledPin, LOW); o desliga.
Interface Web: Adicionamos botões na página HTML que fazem requisições para /LED=ON e /LED=OFF.

Testando o Controle do LED🔗

1. Abra o navegador e acesse o endereço IP do ESP32.

2. A página exibirá dois botões: Ligar e Desligar.

3. Clique em Ligar para acender o LED.

4. Clique em Desligar para apagar o LED.

Melhorando a Interface🔗

Vamos aprimorar a página para torná-la mais amigável utilizando um pouco de CSS inline.

client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<meta charset=\"UTF-8\">");
client.println("<title>Controle do LED</title>");
client.println("<style>");
client.println("button {");
client.println("  padding: 15px 25px;");
client.println("  font-size: 24px;");
client.println("  margin: 5px;");
client.println("}");
client.println("</style>");
client.println("</head>");
client.println("<body>");
client.println("<h1>Controle do LED</h1>");
client.println("<p>");
client.println("<a href=\"/LED=ON\"><button style=\"background-color: green; color: white;\">Ligar</button></a>");
client.println("<a href=\"/LED=OFF\"><button style=\"background-color: red; color: white;\">Desligar</button></a>");
client.println("</p>");
client.println("</body>");
client.println("</html>");

Considerações sobre Segurança🔗

Embora estejamos construindo um servidor web básico, é importante estar ciente das questões de segurança:

Acesso Restrito: O web server está disponível para qualquer dispositivo na mesma rede. Considere implementar autenticação se necessário.
Exposição Externa: Evite expor o ESP32 diretamente na internet sem as devidas proteções.
Criptografia: Para projetos que demandem segurança, explore o uso de HTTPS com certificados SSL.

Próximos Passos🔗

Agora que você criou um web server simples e interativo, pode expandir o projeto para:

Monitorar Sensores: Exibir leituras de sensores em tempo real na página web.
Controle de Múltiplos Dispositivos: Gerenciar vários LEDs, relés ou outros atuadores.
Design Responsivo: Adaptar a interface para ser amigável em dispositivos móveis.

Dicas e Boas Práticas🔗

Organização do Código: Conforme o projeto cresce, organize o código em funções para melhor legibilidade.
Tratamento de Erros: Adicione verificações para lidar com possíveis falhas na conexão Wi-Fi ou no servidor.
Logs Informativos: Utilize o monitor serial para depurar e entender o comportamento do programa.

Conclusão🔗

Construir um web server com o ESP32 abre um mundo de possibilidades para projetos de automação e IoT. Com este guia, você deu o primeiro passo para controlar e monitorar dispositivos de forma remota e em tempo real. Continue explorando e aprimorando suas habilidades para criar soluções cada vez mais complexas e eficientes.

Próximo Artigo

Servindo Páginas HTML Simples com o ESP32

Aprenda a servir páginas HTML com ESP32, criando servidores web para monitorar sensores e controlar dispositivos via interface web. Explore configurações e exemplos práticos.

Autor: Marcelo V. Souza - Engenheiro de Sistemas e Entusiasta em IoT e Desenvolvimento de Software, com foco em inovação tecnológica.

Referências🔗

Arduino IDE Official Website arduino.cc
Documentação da Espressif docs.espressif.com
Documentação de Apresentação do ESP32 espressif.com/en/products/socs/esp32
Documentação do ESP32 Arduino Core docs.espressif.com/projects/arduino-esp32