Como configurar o WiFi no ESP32?

O WiFi desempenha um papel fundamental nos projetos com ESP32, permitindo conectividade e comunicação sem fio. Essa capacidade é essencial para uma variedade de aplicações, como IoT, automação residencial e monitoramento remoto, oferecendo eficiência e conectividade à internet.

Em muitos exemplos disponíveis na internet, vemos a configuração do SSID e da senha feita diretamente no firmware do ESP32. Isso faz com que seja necessário modificar o código para cada projeto ou rede à qual o dispositivo será conectado.

Mas já pensou em desenvolver um dispositivo que permita configurar a conexão com a rede WiFi diretamente no próprio equipamento, sem a necessidade de alterações no código?

Neste blog, veremos como configurar a rede WiFi (SSID e senha) no ESP32 e ESP8266 de forma fácil e intuitiva por meio de uma página da web. Isso proporciona uma maneira conveniente de personalizar as configurações de rede do dispositivo, tornando-o mais versátil e prático de usar em diferentes contextos e redes WiFi.

Sumário

1. Como instalar a biblioteca WiFiManager na IDE do Arduino

2. Conectando o ESP32 à rede WiFi

3. Exemplo de aplicação do WiFiManager no ESP32

1. Como instalar a biblioteca WiFiManager na IDE do Arduino

O primeiro passo para instalar a biblioteca WiFiManager na IDE do arduino é acessar o gerenciador de bibliotecas. Para isso vá em Ferramentas e depois em Gerenciar Bibliotecas, como mostrado na figura a seguir.

Na janela que irá abrir pesquise por WiFiManager, dessa até a biblioteca mostrada na figura a seguir e clique em instalar.

Agora podemos utilizar os exemplos que serão base para o desenvolvimento deste blog.

2. Conectando o ESP32 à rede WiFi

Primeiro, vamos abrir o exemplo que usaremos como base. Para fazer isso, vá em "Arquivo", depois "Exemplos", depois "WiFiManager" e selecione "Basic". Este exemplo pode ser carregado no ESP32, mas antes de testar seu funcionamento, vamos entender alguns dos principais pontos dele e fazer uma pequena alteração.

Quando a rede WiFi não estiver configurada no ESP32, ele se comporta como um roteador. A função "wm.autoConnect" é utilizada para definir o SSID e a senha da rede que será criada pelo ESP32. A seguir, podemos ver como ela é utilizada no código.

wm.autoConnect("AutoConnectAP","password");

Dessa forma, o ESP32 se comportará como um roteador, criando uma rede com o nome "AutoConnectAP" e a senha "password" quando não estiver configurado para se conectar a uma rede WiFi.

No entanto, se o seu ESP32 já foi conectado a outra rede WiFi em algum código anterior, o ESP32 ainda retém essas informações, então tentará se conectar a essa rede. Para evitar isso, você pode usar a função "wm.resetSettings" para resetar as configurações remanescentes de conexões anteriores do ESP32.

A seguir, você pode ver o código que deve ser carregado no ESP32 para realizar essa ação.

#include <WiFiManager.h> // https://github.com/tzapu/WiFiManager

void setup() {
   // WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP
   // it is a good practice to make sure your code sets wifi mode how you want it.

   // put your setup code here, to run once:
   Serial.begin(115200);
   
   //WiFiManager, Local intialization. Once its business is done, there is no need to keep it around
   WiFiManager wm;

   // reset settings - wipe stored credentials for testing
   // these are stored by the esp library
     wm.resetSettings();

   // Automatically connect using saved credentials,
   // if connection fails, it starts an access point with the specified name ( "AutoConnectAP"),
   // if empty will auto generate SSID, if password is blank it will be anonymous AP (wm.autoConnect())
   // then goes into a blocking loop awaiting configuration and will return success result

   bool res;
   // res = wm.autoConnect(); // auto generated AP name from chipid
   // res = wm.autoConnect("AutoConnectAP"); // anonymous ap
   res = wm.autoConnect("AutoConnectAP","password"); // password protected ap

   if(!res) {
        Serial.println("Failed to connect");
        // ESP.restart();
   } 
   else {
        //if you get here you have connected to the WiFi    
        Serial.println("connected...yeey :)");
   }

}

void loop() {
   // put your main code here, to run repeatedly:   
}

O resultado exibido no monitor serial deve ser similar ao mostrado na figura a seguir.

Agora que já redefinimos as credenciais de rede no ESP32, podemos comentar a função "wm.resetSettings" e carregar o código novamente no ESP32. Agora vamos configurar o ESP32 para se conectar à nossa rede WiFi.

O primeiro passo é conectar-se à rede criada pelo ESP32. O nome da rede é "AutoConnectAP" e a senha é "password", como mostrado na figura a seguir.

Após a conexão com a rede criada pelo ESP32, a página para configuração do WiFi será aberta automaticamente. Se a página não abrir, você pode acessá-la através da interface de conexão WiFi do seu celular, como mostrado na figura a seguir.

A figura a seguir mostra a aba do navegador onde podemos configurar a conexão do ESP32 com a rede WiFi.

Clicando em "Configure WiFi", a tela mostrada na figura a seguir será exibida. Nela, devemos inserir as credenciais da rede à qual o ESP32 deverá se conectar e, em seguida, clicar em "Save".

Se a conexão do ESP32 com a rede WiFi for estabelecida com sucesso, a seguinte mensagem será exibida.

O seguinte resultado será exibido no monitor serial, indicando que a conexão do ESP32 com a rede WiFi foi estabelecida com sucesso.

A partir de agora, as credenciais da rede estão armazenadas na memória do ESP32. Portanto, podemos reiniciá-lo ou desligá-lo à vontade, que ele se conectará automaticamente à rede WiFi.

3. Exemplo de aplicação do WiFiManager no ESP32

Para demonstrar o funcionamento da biblioteca WiFiManager no ESP32, fizemos modificações no exemplo SimpleWiFiServer. Adicionamos as funções da biblioteca e outras alterações que podem ser vistas no código a seguir.

#include <WiFiManager.h> // https://github.com/tzapu/WiFiManager

WiFiServer server(80);
void setup() {
 // WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP
 // it is a good practice to make sure your code sets wifi mode how you want it.
 pinMode(2,OUTPUT);
 // put your setup code here, to run once:
 Serial.begin(115200);
 
 //WiFiManager, Local intialization. Once its business is done, there is no need to keep it around
 WiFiManager wm;

 // reset settings - wipe stored credentials for testing
 // these are stored by the esp library
 //wm.resetSettings();

 // Automatically connect using saved credentials,
 // if connection fails, it starts an access point with the specified name ( "AutoConnectAP"),
 // if empty will auto generate SSID, if password is blank it will be anonymous AP (wm.autoConnect())
 // then goes into a blocking loop awaiting configuration and will return success result

 bool res;
 // res = wm.autoConnect(); // auto generated AP name from chipid
 // res = wm.autoConnect("AutoConnectAP"); // anonymous ap
 res = wm.autoConnect("AutoConnectAP", "password"); // password protected ap


 if (!res) {
   Serial.println("Failed to connect");
   // ESP.restart();
 }
 else {
   //if you get here you have connected to the WiFi
   Serial.println("connected...yeey :)");
 }
 server.begin();
}

void loop() {
 WiFiClient client = server.available();  // listen for incoming clients

 if (client) {                            // if you get a client,
   Serial.println("New Client.");           // print a message out the serial port
   String currentLine = "";                // make a String to hold incoming data from the client
   while (client.connected()) {           // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
           client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("Click <a href=\"/H\">here</a> to turn the LED on pin 5 on.<br>");
            client.print("Click <a href=\"/L\">here</a> to turn the LED on pin 5 off.<br>");
            client.print("Click <a href=\"/R\">here</a> to reset WiFi connection.<br>");

            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {    // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          digitalWrite(2,LOW);      
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(2,HIGH);   
        }
        if (currentLine.endsWith("GET /R")) {
          WiFiManager wm;
          wm.resetSettings();
          ESP.restart();   
        }
      }
   }
   // close the connection:
   client.stop();
   Serial.println("Client Disconnected.");
 }
}

Ao carregar esse código no ESP32, você notará que o microcontrolador se conectará automaticamente à rede WiFi, conforme mencionado anteriormente. Basta inserir o IP do ESP32 (que pode ser obtido através do monitor serial) no navegador para acessar a seguinte página.

Através da página, é possível controlar o estado do LED conectado ao pino 2 do ESP32. Além disso, também é possível redefinir a configuração da rede WiFi. Ao clicar na opção destacada, você deverá obter o seguinte resultado no monitor serial.

Isso indica que o ESP32 não conseguiu se conectar a nenhuma rede WiFi. Portanto, ele está novamente agindo como um roteador, aguardando receber a configuração para se conectar à rede. Repetindo os passos descritos no item anterior, você pode reconectar o ESP32 à rede WiFi e retomar o controle do estado do LED, sem a necessidade de alterar o firmware carregado no ESP32.

Se você deseja aprender mais sobre esse tópico, confira este vídeo em nosso canal. No vídeo, apresentamos mais detalhes sobre como utilizar a biblioteca e configurar a rede WiFi.

Autor: Thales Ferreira