Controla um ESP32 através de Wi-Fi

Neste tutorial, vais aprender como implementar um servidor web no microcontrolador ESP32 para o controlares sem fios através de Wi-Fi. Isto permite-te usar o servidor web para ligar ou desligar o LED integrado a partir de uma página web.

O ESP32 é um microcontrolador potente que oferece capacidades Wi-Fi integradas, tornando-o uma escolha ideal para projetos que requerem comunicação sem fios. Ao configurar um servidor web no ESP32, podemos criar uma interface de utilizador acessível a partir de qualquer computador ou telemóvel ligado à mesma rede Wi-Fi.

Controlar dispositivos remotamente através de um servidor web abre um vasto leque de possibilidades para automação doméstica, projetos IoT e até robótica. Imagina poderes ligar ou desligar luzes, eletrodomésticos ou um robô a partir do teu smartphone ou computador.

Vamos começar!

Componentes Necessários

Abaixo encontras os componentes necessários para construir o projeto. Para este projeto, estou a usar uma placa ESP32 mais antiga, que já foi descontinuada, mas que ainda podes encontrar a um preço muito baixo. É essa que está listada abaixo. Existe um modelo sucessor com especificações melhoradas, que podes encontrar here.

Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.

Gosto do ESP32 lite pelo preço baixo e pelo conector de bateria com capacidade de recarregamento. Mas praticamente qualquer outra placa ESP32 deve funcionar neste projeto. Como vamos usar o LED integrado do ESP32, não vais precisar de mais nenhum componente de hardware.

Na próxima secção, vamos dar uma vista de olhos rápida aos conceitos básicos da comunicação Wi-Fi.

Como funciona o Wi-Fi

Wi-Fi, abreviação de Wireless Fidelity, é uma tecnologia que permite que dispositivos se liguem à internet ou comuniquem entre si sem fios.

Compreender o Básico

O Wi-Fi utiliza sinais de radiofrequência para transmitir e receber dados entre dispositivos. Estas ondas de rádio são transmitidas pelo ar e conseguem atravessar paredes e outros obstáculos, permitindo a comunicação sem fios.

Para estabelecer uma ligação Wi-Fi, precisas de dois componentes principais: um dispositivo com Wi-Fi (como o ESP32) e um Wi-Fi router (ver imagem acima). O router funciona como um hub central que permite que os teus dispositivos comuniquem entre si na rede.

Nota que o router também pode ligar o teu dispositivo à internet, mas neste projeto não vamos fazer isso.

O Papel dos SSIDs e Senhas

Quando te ligas a uma rede Wi-Fi, é-te pedido para introduzires o SSID (Service Set Identifier) e a senha da rede. O SSID é um nome único que identifica a rede Wi-Fi (por exemplo, “my_home_wifi”), enquanto a senha garante o acesso seguro à rede. Assim, ninguém sem a senha conseguirá aceder ao servidor web do ESP32 que vamos implementar.

Depois de introduzires o SSID e a senha corretos, o teu dispositivo envia um pedido de ligação ao router Wi-Fi. O router autentica o teu dispositivo e atribui-lhe um IP address, que serve como identificador único na rede.

Endereços IP e Comunicação

Os endereços IP têm um papel crucial na comunicação Wi-Fi. Um endereço IP é um rótulo numérico único, por exemplo 192.0.1.1 ou 192.0.1.2, atribuído a cada dispositivo numa rede. Permite que os dispositivos enviem e recebam dados para dispositivos específicos.

Quando ligas o teu ESP32 a uma rede Wi-Fi, o router atribui-lhe um endereço IP. Este endereço IP permite que outros dispositivos na rede comuniquem com o ESP32. Por exemplo, quando acedes a uma página web alojada no ESP32, o teu dispositivo envia um pedido para o endereço IP do ESP32, e o ESP32 responde servindo a página web solicitada.

Normas e Frequências Wi-Fi

A tecnologia Wi-Fi tem diferentes normas e frequências. As normas Wi-Fi mais comuns são 802.11b, 802.11g, 802.11n e 802.11ac, cada uma oferecendo diferentes velocidades e capacidades.

O Wi-Fi opera em duas bandas de frequência principais: 2,4 GHz e 5 GHz. A banda de 2,4 GHz tem maior alcance, mas pode ser mais suscetível a interferências de outros dispositivos, como micro-ondas e telefones sem fios. A banda de 5 GHz oferece velocidades mais rápidas, mas tem um alcance mais curto.

Os módulos Wi-Fi atuais do ESP32 normalmente usam o padrão 802.11 b/g/n (802.11n até 150 Mbps), 2,4 GHz.

Na próxima secção, vais aprender o que é um servidor web e como pode ser usado para controlar um ESP32 sem fios.

O que é um Servidor Web?

Um Web Server é uma aplicação de software que corre num computador e é responsável por servir páginas web a clientes/dispositivos. Atua como intermediário entre o navegador web do cliente e a página web solicitada. Quando um cliente/dispositivo envia um pedido para uma página web, o servidor web processa o pedido e envia de volta a página web solicitada ao cliente.

No contexto de controlar um ESP32 sem fios via Wi-Fi, um servidor web permite-nos criar uma interface de utilizador que pode ser acedida através de um navegador web num computador. Esta interface pode ser usada para enviar comandos ao ESP32 via router, como ligar ou desligar LEDs.

O servidor web no ESP32 fica à escuta de pedidos recebidos de clientes, como um navegador web, e responde a esses pedidos enviando a página web apropriada ou executando a ação solicitada. No nosso caso, vamos implementar um servidor web no ESP32 que pode receber comandos de uma página web e controlar os LEDs em conformidade.

O servidor web normalmente envia uma página web em formato HTML e a próxima secção vai dar-te uma introdução muito breve ao HTML.

O que é HTML?

HTML significa HyperText Markup Language. É a linguagem padrão usada para criar páginas web e aplicações. Utiliza um conjunto de tags para definir os elementos e as suas propriedades dentro de uma página web.

As tags HTML são colocadas entre sinais de menor e maior (< >) e consistem numa tag de abertura e numa tag de fecho. A tag de abertura indica o início de um elemento, enquanto a tag de fecho indica o fim desse elemento. O conteúdo entre as tags representa a informação associada a esse elemento.

As tags HTML podem ser usadas para definir títulos, parágrafos, listas, imagens, links, tabelas, formulários e muito mais. Estas tags permitem estruturar e organizar o teu conteúdo, facilitando a interpretação e apresentação correta da página web pelos navegadores.

Exemplo de uma página HTML

Aqui está um exemplo da página web HTML simples que vamos usar para controlar o nosso ESP32:

<!DOCTYPE html>
<html>
<head>
  <title>ESP32 Controller</title>
</head>
<body>
  <h1>ESP32 Controller</h1>
  <p>LED:
    <a href="/led/on"><button>ON</button></a>
    <a href="/led/off"><button>OFF</button></a>
  </p>
</body>
</html>

Neste exemplo, temos um documento HTML dentro das tags ” html “. A secção ” head ” contém meta-informação sobre a página web, como o título apresentado na barra de título do navegador.

<head>
  <title>ESP32 Controller</title>
</head>

A ” body ” secção contém o conteúdo visível da página web. Dentro da tag ” body ” , vemos várias outras tags HTML. A tag ” h1 ” representa um título, e a tag ” p ” um parágrafo. Dentro do parágrafo temos dois botões ” a ” que criam hiperligações. Neste caso, os links estão associados a dois botões que ligam ou desligam um LED.

  <h1>ESP32 Controller</h1>
  <p>LED:
    <a href="/led/on"><button>ON</button></a>
    <a href="/led/off"><button>OFF</button></a>
  </p>

Visualizar a página web

Se escreveres este código HTML para um ficheiro (por exemplo, test.html) e o abrires no teu navegador, vais ver a seguinte página web:

Vais reparar que, ao clicares nos botões, nada acontece. Isto porque ainda não estamos a correr o nosso servidor web, que irá reagir a estes botões. Mas é isso que vamos implementar na próxima secção.

Implementar o Servidor Web

O código seguinte mostra a implementação de um servidor web a correr num ESP32 que te permite ligar e desligar o LED integrado do ESP32 através de um clique num botão na página web. Dá uma vista de olhos rápida ao código completo primeiro. Vou explicar as diferentes partes do código nas secções seguintes.

// Switch built-in LED of ESP32 via web server.  Based on
// https://github.com/espressif/arduino-esp32/blob/master/libraries/WiFi/examples/SimpleWiFiServer/SimpleWiFiServer.ino

#include "WiFi.h"

const char* ssid = "*****";
const char* password = "*****";
const int ledPin = LED_BUILTIN;


const char* html = R""""(
HTTP/1.1 200 OK
Content-type:text/html

<!DOCTYPE html>
<html>
<head>
  <title>ESP32 Controller</title>
  <style>
    body { text-align: center; font-family: Arial, sans-serif; }    
    button { background-color: slateblue; color: white; border: none; width: 50px; height: 30px; }
    button:hover { background-color: darkslateblue; }    
    button:active { background-color: mediumslateblue; }    
  </style>  
</head>
<body>
  <h1>ESP32 Controller</h1>
  <p>LED:
    <a href="/led/on"><button>ON</button></a>
    <a href="/led/off"><button>OFF</button></a>
  </p>
</body>
</html>
)"""";

WiFiServer server(80);

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, HIGH);

  delay(10);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  server.begin();
}

void loop() {
  WiFiClient client = server.accept();
  if (client) {
    String currentLine = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        if (c == '\n') {
          if (currentLine.length() == 0) {
            client.println(html);
            break;
          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }

        // Execute commands
        if (currentLine.endsWith("GET /led/on")) {
          digitalWrite(ledPin, LOW);
        }
        if (currentLine.endsWith("GET /led/off")) {
          digitalWrite(ledPin, HIGH);
        }
      }
    }
    client.stop();
  }
}

Nota que precisas de ter o core do ESP32 instalado para usar este código no Arduino IDE. Temos o seguinte tutorial sobre isso, caso precises de ajuda: How to Program ESP32 with Arduino IDE.

Bibliotecas e Constantes

Para começar, incluímos a biblioteca necessária para comunicação Wi-Fi. Faz parte do core do ESP32 e não requer nenhuma instalação especial.

#include "WiFi.h"

De seguida, definimos o SSID e a senha da nossa rede Wi-Fi. Tens de substituir estes valores pelas credenciais da tua rede Wi-Fi. O SSID é o nome da tua rede Wi-Fi, por exemplo “my_home_wifi”, e a senha é a que costumas usar para te ligares a essa rede (com o teu telemóvel ou computador).

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

Também definimos o número do pino para o LED integrado do ESP32. Podes facilmente ligar um LED externo, ou outros dispositivos como relés. Basta adicionares aqui as definições dos pinos relevantes e ligares o hardware.

const int ledPin = LED_BUILTIN;

HTML para a página web

De seguida, escrevemos o código HTML que será enviado para o navegador web. Este código HTML inclui um título, algum CSS estilo, e botões para controlar o LED.

const char* html = R""""(
HTTP/1.1 200 OK
Content-type:text/html

<!DOCTYPE html>
<html>
<head>
  <title>ESP32 Controller</title>
  <style>
    body { text-align: center; font-family: Arial, sans-serif; }    
    button { background-color: slateblue; color: white; border: none; width: 50px; height: 30px; }
    button:hover { background-color: darkslateblue; }    
    button:active { background-color: mediumslateblue; }    
  </style>  
</head>
<body>
  <h1>ESP32 Controller</h1>
  <p>LED:
    <a href="/led/on"><button>ON</button></a>
    <a href="/led/off"><button>OFF</button></a>
  </p>
</body>
</html>
)"""";

É basicamente o mesmo código HTML que te mostrei na secção “O que é HTML?”. Apenas com algum CSS estilo adicional para tornar a página web mais apelativa. Em baixo está uma imagem do que vais ver num navegador (neste caso, o Edge):

Depois disso, criamos um objeto de servidor Wi-Fi na porta 80, na linha seguinte. A porta 80 é a porta normalmente usada para servir páginas web. Podes ler mais sobre ports here.

WiFiServer server(80);

Função setup

Na função setup, inicializamos a comunicação série para efeitos de debugging, configuramos o pino do LED como saída e ligamos o LED.

  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, HIGH);

Depois ligamo-nos à rede Wi-Fi usando o SSID e a senha fornecidos e esperamos por uma ligação bem-sucedida. Verifica o Serial Monitor e, se vires apenas “pontos” a aparecer, algo está errado. Certifica-te de que tens o SSID e a senha corretos.

  delay(10);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

Se conseguirmos ligar à rede Wi-Fi, imprimimos o endereço IP. Faz uma cópia dele, pois vais precisar dele mais tarde para o navegador web.

Assim que a ligação ao Wi-Fi estiver estabelecida, iniciamos o servidor Wi-Fi através de

  server.begin();

Função loop

Na função loop, verificamos se há um cliente ligado ao servidor. O cliente será o navegador web. Se houver, lemos os dados recebidos do cliente e processamo-los.

O código seguinte baseia-se em grande parte no exemplo SimpleWiFiServer fornecido pela WiFi library. Se precisares de mais informações detalhadas ou aplicações, consulta lá.

void loop() {
  WiFiClient client = server.accept();
  if (client) {
    String currentLine = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        if (c == '\n') {
          if (currentLine.length() == 0) {
            client.println(html);
            break;
          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }

        // Execute commands
        if (currentLine.endsWith("GET /led/on")) {
          digitalWrite(ledPin, LOW);
        }
        if (currentLine.endsWith("GET /led/off")) {
          digitalWrite(ledPin, HIGH);
        }
      }
    }
    client.stop();
  }
}

Dentro do loop, lemos cada carácter do cliente e adicionamo-lo à linha atual. Quando encontramos um carácter de nova linha, verificamos se a linha atual está vazia. Se estiver, enviamos o código HTML para o cliente. Se não, limpamos a linha atual.

A parte mais importante é onde verificamos o conteúdo da linha atual. Se encontrarmos que a linha termina com “/led/on” ou “/led/off”, ligamos ou desligamos o LED em conformidade, chamando digitalWrite para o ledPin.

Nota que a lógica para o LED integrado do ESP32 lite (e de algumas outras placas) é invertida. Definimos o ledPin para LOW, se quisermos ligar o LED, e vice-versa. Para LEDs externos, precisamos de definir o ledPin para HIGH para ligar o LED.

        if (currentLine.endsWith("GET /led/on")) {
          digitalWrite(ledPin, LOW);
        }
        if (currentLine.endsWith("GET /led/off")) {
          digitalWrite(ledPin, HIGH);
        }

Caso queiras adicionar comandos adicionais, é aqui que o deves fazer! Por exemplo, podíamos ligar ou desligar um relé, assumindo que um relé está ligado ao relayPin, adicionando as seguintes linhas:

        if (currentLine.endsWith("GET /relay/on")) {
          digitalWrite(relayPin, LOW);
        }
        if (currentLine.endsWith("GET /relay/off")) {
          digitalWrite(relayPin, HIGH);
        }

Lembra-te apenas de adicionar uma constante relayPin e botões adicionais na página web também:

  <p>Relay:
    <a href="/relay/on"><button>ON</button></a>
    <a href="/relay/off"><button>OFF</button></a>
  </p>

Nota que os comandos “led/on”, “led/off”, … usados na página web e no código que executa os comandos têm de coincidir!

Se carregares num botão, vais ver o comando aparecer como um link depois do endereço IP no teu navegador:

Também podes usar estes links para executar comandos em vez de carregar nos botões. E podes ainda usar estes links noutras páginas web, por exemplo, num site de servidor doméstico IoT que corra na tua rede Wi-Fi.

Correr o Servidor Web

Se reiniciares o teu ESP32 e abrires o Serial Monitor, deves ver um texto que mostra o endereço IP do teu ESP32. No meu caso, para o meu ESP32, é 192.168.1.165, por exemplo.

Vais ver um endereço IP diferente; aquele que foi atribuído à tua placa ESP32. Copia esse endereço para a barra de pesquisa do teu navegador. Deves ver a página web que o servidor web do teu ESP32 cria:

Agora, podes carregar nos botões para ligar ou desligar o LED integrado do teu ESP32.

A página web é bastante segura, pois só pode ser acedida dentro da tua rede Wi-Fi local. Não está acessível publicamente a partir da internet! Se quiseres isso, será necessário mais trabalho e medidas de segurança, pois é arriscado abrir a tua rede Wi-Fi à internet!

De resto, é isto!

O código acima dá-te uma base que podes facilmente expandir com botões adicionais, sliders ou outros elementos de interface que permitam controlar lights, servos, stepper motors, relays ou qualquer outra coisa que possas ligar a um ESP32.

Conclusão

Neste tutorial, aprendemos como implementar um servidor web no ESP32 para o controlar sem fios via Wi-Fi. Seguindo os passos deste artigo, já consegues ligar e desligar LEDs a partir de uma página web.

Começámos por perceber o básico do Wi-Fi e como funciona. Depois, explorámos o conceito de servidor web e o seu papel na comunicação entre o ESP32 e a página web. Também falámos da importância do HTML, que nos permite criar a interface de utilizador para controlar os LEDs. Depois de obteres uma base sólida, implementámos o servidor web no ESP32.

Se seguiste este tutorial, deves ter agora um servidor web totalmente funcional a correr no teu ESP32. Já podes aceder à página web a partir de qualquer dispositivo com navegador ligado à mesma rede Wi-Fi.

Sente-te à vontade para expandir a funcionalidade, adicionando mais opções à página web, como controlar outros componentes ou sensores ligados ao ESP32. Se tiveres mais dúvidas ou precisares de ajuda, consulta a secção de Perguntas Frequentes abaixo.

Perguntas Frequentes

Aqui estão algumas perguntas comuns sobre a implementação de um servidor web para controlar o teu ESP32 sem fios via Wi-Fi:

P: Qual é a vantagem de controlar o ESP32 sem fios?

R: Controlar o ESP32 sem fios permite-te operar o teu dispositivo remotamente, sem necessidade de interação física. Isto traz conveniência e flexibilidade, especialmente quando o ESP32 está num local de difícil acesso.

P: Quais são os componentes necessários para este projeto?

R: Para o projeto só precisas de um ESP32 (com Wi-Fi) e do Arduino IDE com o core do ESP32 instalado.

P: Como funciona o Wi-Fi com o ESP32?

R: O ESP32 tem capacidades Wi-Fi integradas, permitindo-lhe ligar-se a uma rede sem fios. Pode funcionar como cliente para se ligar a uma rede Wi-Fi existente ou como ponto de acesso para criar a sua própria rede. Ao ligar-se a uma rede Wi-Fi, o ESP32 pode comunicar com outros dispositivos na rede.

P: Posso usar este código para um ESP8266

R: Sim, podes. Basta substituir a biblioteca WiFi, alterando #include "WiFi.h" para #include "ESP8266WiFi.h".

P: O que é um servidor web?

R: Um servidor web é uma aplicação de software que serve páginas web a clientes através da internet ou de uma rede local. No contexto deste projeto, o ESP32 funciona como um servidor web, servindo uma página web que permite aos utilizadores controlar os LEDs ligados a ele.

P: O que é HTML?

R: HTML (Hypertext Markup Language) é a linguagem de marcação padrão usada para criar páginas web. Fornece a estrutura e formatação para o conteúdo de uma página web. Neste projeto, vamos usar HTML para criar a página web que controla os LEDs.

P: Como posso ligar-me ao servidor web através da internet?

R: Para te ligares ao servidor web através da internet, tens de garantir que o teu ESP32 está ligado a uma rede Wi-Fi com acesso à internet. Depois de o ESP32 estar ligado à internet, podes aceder ao servidor web introduzindo o seu endereço IP num navegador em qualquer dispositivo ligado à internet. Terás de configurar o teu router para permitir ligações de entrada para o endereço IP do ESP32, o que é uma questão de segurança! Tem cuidado!

P: Como crio um ecrã de login para o servidor web?

R: Para criar um ecrã de login para o servidor web, podes usar HTML e CSS para desenhar o formulário de login. Podes adicionar campos de entrada para nome de utilizador e senha, e um botão de submissão para enviar as credenciais para o servidor. No lado do servidor, podes implementar um mecanismo de autenticação de login. O servidor pode então verificar as credenciais e conceder acesso ao servidor web se as credenciais forem válidas.

Se tiveres mais perguntas ou encontrares algum problema ao implementar o servidor web no teu ESP32, sente-te à vontade para perguntar na secção de comentários abaixo.

Ligações

Aqui está uma coleção de links para projetos semelhantes que envolvem o controlo de microcontroladores ESP32 ou ESP8266 via Wi-Fi usando um servidor web.

• ESP32_HTTPS_Server – Arduino Reference
• ESP32 Web Server – Arduino IDE
• ESP32 – Web Server
• ESP32 Relay Module – Control AC Appliances
• In-depth: Create A Simple ESP32 Web Server In Arduino IDE
• WebServer.h – espressif/arduino-esp32