Implementando Formulários Web no ESP32 para Automação

Introdução🔗

O ESP32 é uma poderosa plataforma que combina conectividade Wi-Fi e Bluetooth com um microcontrolador de alto desempenho. Isso o torna ideal para uma variedade de projetos de IoT e automação residencialIntrodução à Automação Residencial com ESP32Introdução à Automação Residencial com ESP32Descubra como o ESP32 transforma sua casa em um lar inteligente com dicas práticas de configuração, programação e automação residencial.. Uma das funcionalidades mais interessantes do ESP32 é a capacidade de hospedar um servidor web, permitindo que você controle e monitore dispositivos remotamente através de uma interface web.

Neste artigo, vamos explorar como implementar formulários web no ESP32 para controlar dispositivos. Vamos construir um servidor webIntrodução ao Desenvolvimento de um Web Server com ESP32Introdução ao Desenvolvimento de um Web Server com ESP32Desenvolva seu web server com ESP32 e gerencie dispositivos IoT com controle remoto. Siga o tutorial passo a passo e garanta segurança e eficiência. que apresenta um formulário ao usuário, processa os dados enviados e executa ações com base nesses dados.

Por que Utilizar Formulários Web no ESP32?🔗

Formulários web são uma forma intuitiva e acessível de interagir com sistemas eletrônicos. Ao implementar formulários no ESP32O que é o ESP32: Introdução e Conceitos BásicosO que é o ESP32: Introdução e Conceitos BásicosDescubra como o ESP32 revoluciona a automação e IoT com dicas práticas e projetos que transformam sua casa conectada. Domine a tecnologia!, você pode:

Utilizar formulários web elimina a necessidade de aplicações📞 Interfone IP com Vídeo Chamada📞 Interfone IP com Vídeo ChamadaDescubra como integrar interfone IP com vídeo chamada utilizando ESP32 para segurança residencial e corporativa, com streaming e criptografia avançada. móveis ou interfaces físicas complicadas. Tudo o que você precisa é de um navegador web, tornando o acesso ao seu dispositivo simples e universal.

Preparando o Ambiente🔗

Antes de começarmos, certifique-se de ter o seguinte:

Configurando o Arduino IDE

Se você ainda não configurou o ESP32 na Arduino IDEInstalando o Arduino IDE para ESP32 no WindowsInstalando o Arduino IDE para ESP32 no WindowsEste tutorial passo a passo ensina como instalar o Arduino IDE e configurar o ESP32 no Windows, garantindo um ambiente ideal para IoT., siga estes passos:

1. Abra a Arduino IDEInstalando o Arduino IDE para ESP32 no WindowsInstalando o Arduino IDE para ESP32 no WindowsEste tutorial passo a passo ensina como instalar o Arduino IDE e configurar o ESP32 no Windows, garantindo um ambiente ideal para IoT..

2. Vá em Arquivo > Preferências.

3. No campo URLs Adicionais para Gerenciadores de PlacasInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns., adicione:

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

4. Clique em OK.

5. Vá em Ferramentas > Placa > Gerenciador de PlacasInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns..

6. Pesquise por ESP32O que é o ESP32: Introdução e Conceitos BásicosO que é o ESP32: Introdução e Conceitos BásicosDescubra como o ESP32 revoluciona a automação e IoT com dicas práticas e projetos que transformam sua casa conectada. Domine a tecnologia! e instale a opção "esp32O que é o ESP32: Introdução e Conceitos BásicosO que é o ESP32: Introdução e Conceitos BásicosDescubra como o ESP32 revoluciona a automação e IoT com dicas práticas e projetos que transformam sua casa conectada. Domine a tecnologia!" by Espressif Systems.

Conectando o ESP32 à Rede Wi-Fi🔗

Para que o ESP32 possa hospedar um servidor webIntrodução ao Desenvolvimento de um Web Server com ESP32Introdução ao Desenvolvimento de um Web Server com ESP32Desenvolva seu web server com ESP32 e gerencie dispositivos IoT com controle remoto. Siga o tutorial passo a passo e garanta segurança e eficiência. acessível pela rede, ele precisa estar conectado ao Wi-Fi.

#include <WiFi.h>
const char* ssid = "NOME_DA_SUA_REDE";
const char* password = "SENHA_DA_SUA_REDE";
void setup()
{
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.print("Conectando ao Wi-Fi");
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConectado com sucesso!");
  Serial.print("Endereço IP: ");
  Serial.println(WiFi.localIP());
}
void loop()
{
  // Código principal
}

Explicação:

Criando um Servidor Web Simples🔗

Vamos agora configurar um servidor webIntrodução ao Desenvolvimento de um Web Server com ESP32Introdução ao Desenvolvimento de um Web Server com ESP32Desenvolva seu web server com ESP32 e gerencie dispositivos IoT com controle remoto. Siga o tutorial passo a passo e garanta segurança e eficiência. básico que servirá uma página ao ser acessado.

#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "NOME_DA_SUA_REDE";
const char* password = "SENHA_DA_SUA_REDE";
WebServer server(80);
void setup()
{
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  // Aguarda conexão
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConectado ao Wi-Fi.");
  Serial.print("Endereço IP: ");
  Serial.println(WiFi.localIP());
  // Define a rota raiz
  server.on("/", handleRoot);
  // Inicia o servidor
  server.begin();
  Serial.println("Servidor HTTP iniciado.");
}
void loop()
{
  server.handleClient();
}
void handleRoot()
{
  server.send(200, "text/plain", "Bem-vindo ao servidor web do ESP32!");
}

Explicação:

Implementando um Formulário Web🔗

Agora, vamos criar um formulário web que permita ao usuário controlar um LED conectado ao ESP32O que é o ESP32: Introdução e Conceitos BásicosO que é o ESP32: Introdução e Conceitos BásicosDescubra como o ESP32 revoluciona a automação e IoT com dicas práticas e projetos que transformam sua casa conectada. Domine a tecnologia!.

Montagem do Circuito

Para este exemplo, usaremos o LED embutido da placa (geralmente no pino GPIO 2). Se a sua placa não tiver um LED embutido, você pode conectar um LED externo ao GPIODesafios Práticos: Experimentando com Múltiplos LEDsDesafios Práticos: Experimentando com Múltiplos LEDsAprenda a controlar múltiplos LEDs com ESP32 em projetos IoT. Descubra desafios práticos, montagem de circuitos, programação e efeitos visuais incríveis! 2 através de um resistor de 220Ω.

Atualizando o Código

Variáveis Globais e Configuração

const int ledPin = 2; // Pino do LED
void setup()
{
  // ... código anterior ...
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW); // Inicialmente desligado
  // Define as rotas
  server.on("/", handleRoot);
  server.on("/led", HTTP_POST, handleLED);
  // Inicia o servidor
  server.begin();
}

Função handleRoot()

Vamos servir uma página HTML com um formulário.

void handleRoot()
{
  String html = "<!DOCTYPE html><html>";
  html += "<head><title>Controle de LED</title></head>";
  html += "<body>";
  html += "<h1>Controle de LED</h1>";
  html += "<form action=\"/led\" method=\"POST\">";
  html += "<label for=\"estado\">Estado do LED:</label><br><br>";
  html += "<input type=\"radio\" id=\"ligar\" name=\"estado\" value=\"ligar\">";
  html += "<label for=\"ligar\">Ligar</label><br>";
  html += "<input type=\"radio\" id=\"desligar\" name=\"estado\" value=\"desligar\">";
  html += "<label for=\"desligar\">Desligar</label><br><br>";
  html += "<input type=\"submit\" value=\"Enviar\">";
  html += "</form>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

Explicação:

Função handleLED()

Esta função processa os dados enviados pelo formulário.

void handleLED()
{
  if (server.hasArg("estado"))
  {
    String estado = server.arg("estado");
    if (estado == "ligar")
    {
      digitalWrite(ledPin, HIGH);
    }
    else if (estado == "desligar")
    {
      digitalWrite(ledPin, LOW);
    }
  }
  // Redireciona de volta para a página inicial
  server.sendHeader("Location", "/");
  server.send(303);
}

Explicação:

Testando a Aplicação🔗

1. Carregue o códigoDesafios Práticos: Experimentando com Múltiplos LEDsDesafios Práticos: Experimentando com Múltiplos LEDsAprenda a controlar múltiplos LEDs com ESP32 em projetos IoT. Descubra desafios práticos, montagem de circuitos, programação e efeitos visuais incríveis! no ESP32.

2. Abra o Monitor SerialConfigurando a Conexão Wi-Fi no ESP32: Guia Passo a PassoConfigurando a Conexão Wi-Fi no ESP32: Guia Passo a PassoAprenda passo a passo a conectar seu ESP32 à rede Wi-Fi com segurança e estabilidade. Descubra dicas práticas e estratégias de otimização. para verificar o endereço IP atribuído.

3. Acesse o endereço IP do ESP32O que é o ESP32: Introdução e Conceitos BásicosO que é o ESP32: Introdução e Conceitos BásicosDescubra como o ESP32 revoluciona a automação e IoT com dicas práticas e projetos que transformam sua casa conectada. Domine a tecnologia! pelo navegador (por exemplo, httpProtocolos Nativos: Wi-Fi (2.4 GHz), Bluetooth Classic e BLEProtocolos Nativos: Wi-Fi (2.4 GHz), Bluetooth Classic e BLEDescubra como utilizar os protocolos Wi-Fi, Bluetooth Classic e BLE no ESP32, com exemplos práticos e dicas para projetos IoT inovadores.://192.168.1.100).

4. Utilize o formulário para ligar ou desligar o LEDDesafios Práticos: Experimentando com Múltiplos LEDsDesafios Práticos: Experimentando com Múltiplos LEDsAprenda a controlar múltiplos LEDs com ESP32 em projetos IoT. Descubra desafios práticos, montagem de circuitos, programação e efeitos visuais incríveis!.

Aprimorando a Interface Web🔗

Vamos melhorar a experiência do usuário exibindo o estado atual do LEDDesafios Práticos: Experimentando com Múltiplos LEDsDesafios Práticos: Experimentando com Múltiplos LEDsAprenda a controlar múltiplos LEDs com ESP32 em projetos IoT. Descubra desafios práticos, montagem de circuitos, programação e efeitos visuais incríveis! na página.

Atualizando handleRoot()

void handleRoot()
{
  String estadoLED = digitalRead(ledPin) ? "Ligado" : "Desligado";
  String html = "<!DOCTYPE html><html>";
  html += "<head><title>Controle de LED</title></head>";
  html += "<body>";
  html += "<h1>Controle de LED</h1>";
  html += "<p>O LED está atualmente: <strong>" + estadoLED + "</strong></p>";
  html += "<form action=\"/led\" method=\"POST\">";
  html += "<label for=\"estado\">Alterar estado:</label><br><br>";
  html += "<input type=\"radio\" id=\"ligar\" name=\"estado\" value=\"ligar\">";
  html += "<label for=\"ligar\">Ligar</label><br>";
  html += "<input type=\"radio\" id=\"desligar\" name=\"estado\" value=\"desligar\">";
  html += "<label for=\"desligar\">Desligar</label><br><br>";
  html += "<input type=\"submit\" value=\"Enviar\">";
  html += "</form>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

Explicação:

Implementando Validação no Formulário🔗

É importante validar os dados enviados pelo usuário para evitar comportamentos inesperados.

Atualizando handleLED()

void handleLED()
{
  if (server.hasArg("estado"))
  {
    String estado = server.arg("estado");
    if (estado == "ligar")
    {
      digitalWrite(ledPin, HIGH);
    }
    else if (estado == "desligar")
    {
      digitalWrite(ledPin, LOW);
    }
    else
    {
      server.send(400, "text/plain", "Valor inválido.");
      return;
    }
  }
  else
  {
    server.send(400, "text/plain", "Parâmetro 'estado' não encontrado.");
    return;
  }
  // Redireciona de volta para a página inicial
  server.sendHeader("Location", "/");
  server.send(303);
}

Explicação:

Melhorando a Segurança🔗

Para evitar que qualquer pessoa na rede controle o seu dispositivo, podemos adicionar uma autenticação simplesSegurança em MQTT: Autenticação e Criptografia no ESP32Segurança em MQTT: Autenticação e Criptografia no ESP32Descubra como proteger conexões MQTT em aplicações IoT com ESP32, implementando autenticação e criptografia TLS para segurança máxima..

Adicionando um Campo de Senha

Atualize o formulário para incluir um campo de senhaConfigurando a Conexão Wi-Fi no ESP32: Guia Passo a PassoConfigurando a Conexão Wi-Fi no ESP32: Guia Passo a PassoAprenda passo a passo a conectar seu ESP32 à rede Wi-Fi com segurança e estabilidade. Descubra dicas práticas e estratégias de otimização..

void handleRoot()
{
  // ... código anterior ...
  html += "<label for=\"senha\">Senha:</label><br>";
  html += "<input type=\"password\" id=\"senha\" name=\"senha\"><br><br>";
  html += "<input type=\"submit\" value=\"Enviar\">";
  html += "</form>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

Atualizando handleLED()

const String senhaCorreta = "123456";
void handleLED()
{
  if (server.hasArg("senha"))
  {
    String senha = server.arg("senha");
    if (senha != senhaCorreta)
    {
      server.send(401, "text/plain", "Senha incorreta.");
      return;
    }
  }
  else
  {
    server.send(400, "text/plain", "Parâmetro 'senha' não encontrado.");
    return;
  }
  // ... código anterior de validação e controle do LED ...
  // Redireciona de volta para a página inicial
  server.sendHeader("Location", "/");
  server.send(303);
}

Explicação:

Estilos CSS para Melhorar a Aparência🔗

Vamos adicionar estilos simples para tornar a página mais agradável.

void handleRoot()
{
  // ... código anterior ...
  String html = "<!DOCTYPE html><html>";
  html += "<head>";
  html += "<title>Controle de LED</title>";
  html += "<style>";
  html += "body { font-family: Arial, sans-serif; text-align: center; }";
  html += "h1 { color: #333; }";
  html += "form { display: inline-block; margin-top: 20px; }";
  html += "input[type=submit] { padding: 10px 20px; }";
  html += "</style>";
  html += "</head>";
  // ... restante do código ...
}

Explicação:

  • Estilos embutidos: Utilizamos a tag &lt;style&gt; para adicionar CSS diretamente no HTML.
  • Melhoria visual: Ajustamos fontes, cores e espaçamentos.

Expandindo o Projeto para Controlar Múltiplos Dispositivos🔗

Você pode adaptar este exemplo para controlar vários dispositivos, como múltiplos LEDs ou relésControle de LEDs e Relés através do Web Server do ESP32Controle de LEDs e Relés através do Web Server do ESP32Aprenda a controlar LEDs e relés usando um Web Server no ESP32. Este tutorial completo ensina montagem, configuração e programação para automação IoT..

Atualizando o Código

Variáveis e Configuração

const int ledPin1 = 2; // Primeiro LED
const int ledPin2 = 4; // Segundo LED
void setup()
{
  // ... código anterior ...
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
  digitalWrite(ledPin1, LOW);
  digitalWrite(ledPin2, LOW);
}

Atualizando o Formulário

void handleRoot()
{
  // ... código anterior ...
  html += "<h2>LED 1</h2>";
  html += "<input type=\"checkbox\" id=\"led1\" name=\"led1\"";
  if (digitalRead(ledPin1)) html += " checked";
  html += ">";
  html += "<label for=\"led1\">Ligar</label><br><br>";
  html += "<h2>LED 2</h2>";
  html += "<input type=\"checkbox\" id=\"led2\" name=\"led2\"";
  if (digitalRead(ledPin2)) html += " checked";
  html += ">";
  html += "<label for=\"led2\">Ligar</label><br><br>";
  // ... campo de senha e botão enviar ...
}

Atualizando handleLED()

void handleLED()
{
  // ... verificação de senha ...
  // Controle do LED 1
  if (server.hasArg("led1"))
  {
    digitalWrite(ledPin1, HIGH);
  }
  else
  {
    digitalWrite(ledPin1, LOW);
  }
  // Controle do LED 2
  if (server.hasArg("led2"))
  {
    digitalWrite(ledPin2, HIGH);
  }
  else
  {
    digitalWrite(ledPin2, LOW);
  }
  // Redireciona de volta para a página inicial
  server.sendHeader("Location", "/");
  server.send(303);
}

Explicação:

Considerações de Segurança🔗

Embora tenhamos adicionado uma senhaConfigurando a Conexão Wi-Fi no ESP32: Guia Passo a PassoConfigurando a Conexão Wi-Fi no ESP32: Guia Passo a PassoAprenda passo a passo a conectar seu ESP32 à rede Wi-Fi com segurança e estabilidade. Descubra dicas práticas e estratégias de otimização., é importante notar que:

Para projetos onde a segurança é essencial, considere implementar métodos de autenticaçãoSegurança na Rede: Protegendo a Conexão Wi-Fi do ESP32Segurança na Rede: Protegendo a Conexão Wi-Fi do ESP32Proteja a conexão Wi-Fi do ESP32 com dicas de criptografia, senhas fortes e monitoramento, garantindo segurança e integridade dos dados. mais robustos ou utilizar uma rede isolada.

Salvando Configurações com SPIFFS🔗

Para que as configuraçõesInstalando o Arduino IDE para ESP32 no macOSInstalando o Arduino IDE para ESP32 no macOSAprenda passo a passo a instalar e configurar o Arduino IDE no macOS para programar o ESP32. Siga dicas essenciais para solucionar problemas comuns. persistam após reinicializações, você pode armazenar os dados em memória flash usando SPIFFS ou LittleFS.

Introdução ao SPIFFS

SPIFFS (SPI Flash File SystemUtilizando SPIFFS para Armazenamento de Arquivos WebUtilizando SPIFFS para Armazenamento de Arquivos WebAprenda a usar SPIFFS para armazenar arquivos web no ESP32, otimizando o desempenho e facilitando a criação de interfaces IoT com segurança e eficiência.) permite que você armazene arquivos na memória flash do ESP32, semelhante a um sistema de arquivos.

Exemplo de Uso:

Implementação Básica

Devido à complexidade e ao foco deste artigo, não entraremos em detalhes, mas você pode explorar essa funcionalidade em projetos futuros.

Conclusão🔗

Neste artigo, exploramos como implementar formulários web para controle no ESP32. Começamos com um servidor webIntrodução ao Desenvolvimento de um Web Server com ESP32Introdução ao Desenvolvimento de um Web Server com ESP32Desenvolva seu web server com ESP32 e gerencie dispositivos IoT com controle remoto. Siga o tutorial passo a passo e garanta segurança e eficiência. básico e avançamos até uma interface interativa que permite o controle de múltiplos dispositivos. Apesar da simplicidade do exemplo, os conceitos apresentados são poderosos e podem ser expandidos para criar aplicações complexas de IoT e automação.

Principais aprendizados:

Próximos Passos🔗

A prática é fundamental. Experimente modificar o código, adicionar novas funcionalidades e adaptar os conceitos apresentados aos seus projetos pessoais. O ESP32 é uma plataforma versátil e, com criatividade, você pode desenvolver soluções🌀 Escultura Cinética Controlada por Voz🌀 Escultura Cinética Controlada por VozDescubra como integrar hardware, TensorFlow Lite e controle de motores para criar uma escultura cinética interativa e cheia de inovações tecnológicas. inovadoras para o mundo real.


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

Referências🔗

Compartilhar artigo

Artigos Relacionados