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
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
Comments