Tutorial de Web Server ESP32: CSS, JavaScript e IoT

O ESP32 é uma poderosa ferramenta para projetos de automação e IoT, permitindo não apenas o controle de dispositivosControle de Dispositivos com ESP32 via BluetoothDescubra como controlar dispositivos com ESP32 via Bluetooth em projetos IoT. Aprenda a configurar circuitos e programar funcionalidades de automação., mas também a criação de interfaces web para interagir com eles. Ao desenvolver um servidor web no ESP32, é possível enriquecer a experiência do usuário utilizando CSS e JavaScript para aprimorar o design e a interatividade das páginas. Neste artigo, exploraremos como integrar CSS e JavaScript em seu web server do ESP32, proporcionando interfaces mais atraentes e funcionais.

Por que usar CSS e JavaScript no ESP32?🔗

Antes de mergulharmos nos detalhes técnicos📜 Quadro Digital com Tela E-Ink de 32 PolegadasDescubra como combinar eficiência energética, tecnologia E-Ink e ESP32 para criar quadros digitais, dashboards interativos e arte generativa com soluções IoT., é importante compreender os benefícios de incorporar CSS e JavaScript em seu servidor web:

Estética aprimorada: O CSSImplementando Formulários Web para Controle no ESP32Descubra como utilizar formulários web no ESP32 para controlar dispositivos e automatizar seu ambiente de forma simples e eficaz. permite estilizar suas páginas, tornando-as visualmente mais agradáveis.
Interatividade: O JavaScript adiciona dinamismo às páginas, permitindo respostas a eventos do usuário sem a necessidade de recarregar a página.
Melhor usabilidade: Interfaces mais intuitivas e responsivas melhoram a experiência do usuário ao interagir com seu dispositivo.

Preparando o Ambiente🔗

Para começar, certifique-se de que você tem o ambiente configurado para programar o ESP32O 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!:

1. Arduino IDEInstalando 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. instalado: Baixe e instale a versão mais recente do Arduino IDEInstalando 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. BibliotecasHospedando Múltiplas Páginas Web no ESP32Descubra como hospedar múltiplas páginas web no ESP32 com um guia passo a passo. Aprenda a configurar rotas e interagir via HTTP. do ESP32: Adicione o suporte ao ESP32O 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! seguindo as instruções em Espressif Arduino CoreSeguranç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..

Criando um Web Server Básico🔗

Vamos começar criando um servidor webIntroduçã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. simples que servirá como base para incorporar CSS e JavaScript.

#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "SEU_SSID";
const char* password = "SUA_SENHA";
WebServer server(80);
void setup()
{
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.print("Conectando-se a ");
  Serial.println(ssid);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi conectado.");
  Serial.println("Endereço IP: ");
  Serial.println(WiFi.localIP());
  server.on("/", handleRoot);
  server.begin();
  Serial.println("Servidor HTTP iniciado.");
}
void loop()
{
  server.handleClient();
}
void handleRoot()
{
  String html = "<!DOCTYPE html><html><head><title>ESP32 Web Server</title></head><body><h1>Olá, mundo!</h1></body></html>";
  server.send(200, "text/html", html);
}

Neste código, configuramos o ESP32 para conectar-se a uma rede Wi-Fi e iniciar um servidor HTTPCriando seu Primeiro Web Server no ESP32 Passo a PassoAprenda a criar um web server simples no ESP32 com este tutorial completo, passo a passo, devolvendo controle interativo de LED e sensores. na porta 80. A função handleRootHospedando Múltiplas Páginas Web no ESP32Descubra como hospedar múltiplas páginas web no ESP32 com um guia passo a passo. Aprenda a configurar rotas e interagir via HTTP.() é responsável por enviar uma página HTML simplesServindo Páginas HTML Simples com o ESP32Aprenda como servir páginas HTML simples com ESP32, integrando Wi-Fi, controlando LED e interagindo via interface web intuitiva. quando a raiz (/) é acessada.

Adicionando Estilos com CSS🔗

Para melhorar a aparência da página, podemos incorporar CSS diretamente no arquivo HTMLImplementando Formulários Web para Controle no ESP32Descubra como utilizar formulários web no ESP32 para controlar dispositivos e automatizar seu ambiente de forma simples e eficaz. ou servi-lo como um arquivo separado. Vamos começar adicionando estilos embutidos.

CSS Embutido

void handleRoot()
{
  String html = "<!DOCTYPE html><html><head><title>ESP32 Web Server</title>";
  html += "<style>";
  html += "body { font-family: Arial, sans-serif; background-color: #f0f0f0; text-align: center; padding-top: 50px; }";
  html += "h1 { color: #333; }";
  html += "</style></head><body><h1>Olá, mundo!</h1></body></html>";
  server.send(200, "text/html", html);
}

Agora, a página terá um fundo cinza claro, texto centralizado e uma fonte mais agradável.

Servindo CSS Externo

Para uma abordagem mais organizada, é recomendável servir o CSSImplementando Formulários Web para Controle no ESP32Descubra como utilizar formulários web no ESP32 para controlar dispositivos e automatizar seu ambiente de forma simples e eficaz. como um arquivo externo.

Armazenando o CSS no Código

Uma maneira simplificada é armazenar o CSS como uma string no códigoDesafios 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! C++:

const char* css = "body { font-family: Arial, sans-serif; background-color: #f0f0f0; text-align: center; padding-top: 50px; } h1 { color: #333; }";
void handleCss()
{
  server.send(200, "text/css", css);
}
void setup()
{
  // Código anterior...
  server.on("/style.css", handleCss);
  // Código posterior...
}

Modifique a função handleRootHospedando Múltiplas Páginas Web no ESP32Descubra como hospedar múltiplas páginas web no ESP32 com um guia passo a passo. Aprenda a configurar rotas e interagir via HTTP.() para referenciar o arquivo CSSImplementando Formulários Web para Controle no ESP32Descubra como utilizar formulários web no ESP32 para controlar dispositivos e automatizar seu ambiente de forma simples e eficaz.:

void handleRoot()
{
  String html = "<!DOCTYPE html><html><head><title>ESP32 Web Server</title>";
  html += "<link rel=\"stylesheet\" type=\"text/css\" href=\"/style.css\">";
  html += "</head><body><h1>Olá, mundo!</h1></body></html>";
  server.send(200, "text/html", html);
}

Dessa forma, o navegador irá solicitar o arquivo /style.css, e o ESP32O 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! responderá com o conteúdo CSS armazenado em cssImplementando Formulários Web para Controle no ESP32Descubra como utilizar formulários web no ESP32 para controlar dispositivos e automatizar seu ambiente de forma simples e eficaz..

Utilizando SPIFFS para Armazenar o CSS

Para projetos maiores, é eficiente armazenar arquivos CSS e JavaScript no sistema de arquivos SPIFFSUtilizando 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. do ESP32.

Passo 1: Habilitar o SPIFFSUtilizando 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.

No Arduino IDEInstalando 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., instale o plugin ESP32 SPIFFSUtilizando 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. para fazer upload de arquivos ao sistema de arquivos.

Passo 2: Preparar os Arquivos

Crie uma pasta chamada data no mesmo diretório do seu sketch. Dentro dela, crie o arquivo style.css com o seguinte conteúdo:

body {
  font-family: Arial, sans-serif; 
  background-color: #f0f0f0; 
  text-align: center; 
  padding-top: 50px;
}
h1 {
  color: #333;
}

Passo 3: Modificar o CódigoDesafios 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! para Servir Arquivos do SPIFFS

Inclua as bibliotecasHospedando Múltiplas Páginas Web no ESP32Descubra como hospedar múltiplas páginas web no ESP32 com um guia passo a passo. Aprenda a configurar rotas e interagir via HTTP. necessárias e monte o sistema de arquivos:

#include <SPIFFS.h>
void setup()
{
  // Código anterior...
  if(!SPIFFS.begin(true))
  {
    Serial.println("Falha ao montar o sistema de arquivos");
    return;
  }
  server.on("/", handleRoot);
  server.on("/style.css", handleCss);
  server.begin();
  // Código posterior...
}
void handleCss()
{
  File file = SPIFFS.open("/style.css", "r");
  if (!file)
  {
    server.send(404, "text/plain", "Arquivo não encontrado");
    return;
  }
  server.streamFile(file, "text/css");
  file.close();
}

Atualize a função handleRootHospedando Múltiplas Páginas Web no ESP32Descubra como hospedar múltiplas páginas web no ESP32 com um guia passo a passo. Aprenda a configurar rotas e interagir via HTTP.() se necessário. Agora, quando o navegador solicitar /style.css, o ESP32 servirá o arquivo diretamente do SPIFFSUtilizando 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..

Passo 4: Fazer Upload dos Arquivos para o SPIFFSUtilizando 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.

No Arduino IDEInstalando 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., vá em Ferramentas -> ESP32O 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! Sketch Data Upload. Isso fará o upload dosSeguranç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. arquivos da pasta data para o sistema de arquivos do ESP32O 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!.

Adicionando Interatividade com JavaScript🔗

O JavaScript permite que sua página responda a ações do usuário sem a necessidade de recarregar a página. Vamos adicionar um botão que, quando clicado, faz uma requisição ao ESP32O 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! para acender um LED conectado a um pino.

Configurando o Hardware

Conecte um LED ao pino GPIOInteração com GPIOs via Interface Web no ESP32Aprenda a configurar e controlar os GPIOs do ESP32 por meio de uma interface web dinâmica realizando automação, monitoramento e interação remota com facilidade. 2 do ESP32, com um resistor limitador de corrente.

Atualizando o Código do Servidor

Controlando o LED

No códigoDesafios 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!, configure o pino do LED e crie uma função para manipulá-lo:

#define LED_PIN 2
void setup()
{
  // Código anterior...
  pinMode(LED_PIN, OUTPUT);
  server.on("/led_on", handleLedOn);
  server.on("/led_off", handleLedOff);
  // Código posterior...
}
void handleLedOn()
{
  digitalWrite(LED_PIN, HIGH);
  server.send(200, "text/plain", "LED ligado");
}
void handleLedOff()
{
  digitalWrite(LED_PIN, LOW);
  server.send(200, "text/plain", "LED desligado");
}

Servindo o JavaScript

Crie um arquivo script.js na pasta data:

function toggleLED(state) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", state ? "/led_on" : "/led_off", true);
  xhttp.send();
}

void handleRoot()
{
  File file = SPIFFS.open("/index.html", "r");
  if (!file)
  {
    server.send(404, "text/plain", "Arquivo não encontrado");
    return;
  }
  server.streamFile(file, "text/html");
  file.close();
}

Crie um arquivo index.html na pasta data com o seguinte conteúdo:

<!DOCTYPE html>
<html>
<head>
  <title>Controle de LED com ESP32</title>
  <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
  <h1>Controle de LED</h1>
  <button onclick="toggleLED(true)">Ligar LED</button>
  <button onclick="toggleLED(false)">Desligar LED</button>
  <script src="/script.js"></script>
</body>
</html>

Finalmente, adicione o manipulador para o script.js:

void handleScript()
{
  File file = SPIFFS.open("/script.js", "r");
  if (!file)
  {
    server.send(404, "text/plain", "Arquivo não encontrado");
    return;
  }
  server.streamFile(file, "application/javascript");
  file.close();
}
// No setup(), registre o manipulador
server.on("/script.js", handleScript);

Faça o upload dos arquivos para o SPIFFSUtilizando 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. novamente usando o ESP32O 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! Sketch Data Upload.

Funcionamento do JavaScript

O script script.js define a função toggleLED(state), que cria uma requisição assíncrona ao servidor:

Se state for true, envia uma requisição a /led_on.
Se state for false, envia uma requisição a /led_off.

Isso aciona as funções correspondentes no ESP32O 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!, que ligam ou desligam o LED.

Atualizando Dados em Tempo Real🔗

Podemos usar JavaScript para obter dados do ESP32 em tempo realExibindo Dados no Monitor Serial com ESP32Aprenda a configurar e exibir dados no Monitor Serial com ESP32, utilizando exemplos práticos e técnicas de depuração para otimizar seus projetos IoT., como a leitura de um sensor.

Leitura de um Sensor

Suponha que temos um sensor de temperaturaIntrodução aos Sensores de Temperatura e Umidade com ESP32Descubra como integrar sensores de temperatura e umidade ao ESP32 em projetos IoT. Tutorial prático com dicas, conexões e código para soluções inteligentes. conectado ao ESP32. Vamos simular essa leitura.

Código no ESP32

Adicione uma função que retorna um valor de temperatura🦠 Analisador de Qualidade da Água PortátilConfira o tutorial completo que integra sensores IoT e ESP32 para monitorar pH, turbidez, condutividade e temperatura em tempo real com relatórios PDF.:

void handleTemperature()
{
  float temperature = random(20, 30) + random(0, 99) / 100.0;
  String temp = String(temperature);
  server.send(200, "text/plain", temp);
}
void setup()
{
  // Código anterior...
  server.on("/temperature", handleTemperature);
  // Código posterior...
}

Atualizando o JavaScript

No script.js, adicione uma função para atualizar a temperatura🦠 Analisador de Qualidade da Água PortátilConfira o tutorial completo que integra sensores IoT e ESP32 para monitorar pH, turbidez, condutividade e temperatura em tempo real com relatórios PDF.:

function getTemperature() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temp").innerHTML = this.responseText + " °C";
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}
setInterval(function() {
  getTemperature();
}, 5000); // Atualiza a cada 5 segundos

Atualizando o HTML

No index.html, adicione um elemento para exibir a temperatura🦠 Analisador de Qualidade da Água PortátilConfira o tutorial completo que integra sensores IoT e ESP32 para monitorar pH, turbidez, condutividade e temperatura em tempo real com relatórios PDF.:

<h2>Temperatura Atual: <span id="temp">--</span></h2>

Com isso, a página irá atualizar a temperatura🦠 Analisador de Qualidade da Água PortátilConfira o tutorial completo que integra sensores IoT e ESP32 para monitorar pH, turbidez, condutividade e temperatura em tempo real com relatórios PDF. automaticamente a cada 5 segundos, sem que o usuário precise recarregar a página.

Considerações sobre Desempenho🔗

Ao servir páginas com CSSImplementando Formulários Web para Controle no ESP32Descubra como utilizar formulários web no ESP32 para controlar dispositivos e automatizar seu ambiente de forma simples e eficaz. e JavaScript, é importante considerar:

Tamanho dosSeguranç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. arquivos: O ESP32O 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! possui recursos limitados. Otimize seus arquivos para serem o menor possível.
Armazenamento: Utilize o SPIFFS para armazenar arquivos estáticos, liberando espaço na memóriaArquitetura do ESP32: Entendendo Seus Componentes InternosDescubra como otimizar o desempenho dos seus projetos IoT com nosso guia detalhado sobre a arquitetura interna e gerenciamento de recursos do ESP32. do programa.
Cache: Configure cabeçalhos HTTP para permitir que o navegador cache arquivos estáticos, reduzindo a carga no ESP32O 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!.

Segurança Básica🔗

Embora o foco deste artigo não seja segurançaSeguranç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., é importante lembrar:

ValidaçãoAplicações Práticas e Boas PráticasDescubra como implementar com segurança e eficiência aplicações práticas com o ESP32 em projetos de IoT, seguindo boas práticas. de Entrada: Sempre verifique e valide as requisições recebidas para evitar comportamentos indesejados.
AutenticaçãoSeguranç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.: Para aplicações sensíveis, implemente métodos de autenticaçãoSeguranç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. para restringir o acesso.

Conclusão🔗

Integrar CSS e JavaScript em seu web serverIntroduçã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. do ESP32 permite criar interfaces web ricas e interativas, melhorando significativamente a experiência do usuário. Neste artigo, exploramos como estilizar páginas com CSS, adicionar interatividade com JavaScript e servir arquivos estáticos utilizando o SPIFFS. Com essas ferramentas, você pode desenvolver aplicações web completas diretamente no ESP32, abrindo um leque de possibilidades para projetos de automação e IoT.

Próximos Passos: