Aprenda a configurar a rede WiFi do ESP32 pelo smartphone 2

Neste tutorial você verá como é possível configurar a rede WiFi do ESP32 pelo smartphone,  sem alterar seu código. Para isso utilizaremos a biblioteca “WiFiManager”.

Figura 1 – Circuito completo

Atualmente no mundo maker diversos projetos são desenvolvidos envolvendo a conexão WiFi. Por meio deles podemos comunicar o hardware com algum servidor na web permitindo o envio e a recepção de dados, e isso é possível através do ESP32. 

Agora, imagine que você tenha feito um projeto no ESP32 que utilize a comunicação WiFi e nele você definiu por meio do código o “SSID” e a “Senha da rede. Esses dados ficarão salvos para que o ESP32 se conecte à rede WiFi definida por você, porém se posteriormente for necessário levar o seu projeto para outro lugar, como você faria para conectá-lo em outra rede? Provavelmente mudaria seu código trocando o “SSID” e a “Senha” e aplicaria o novo código no ESP32, não é mesmo?

Aqui você vai aprender a configurar a rede WiFi do seu ESP32 de maneira mais prática, usando ele e um smartphone. Ficou curioso? Então continue lendo! 

Material necessário

Para fazer o projeto você precisará dos seguintes componentes:

Funcionamento do circuito

O circuito é composto basicamente por dois LEDs, um na cor azul e outro na cor vermelha. Quando o LED na cor vermelha estiver piscando significa que a placa não está conectada na rede. Caso o botão tenha sido pressionado, o LED vermelho ficará aceso indicando que o ESP32 entrou no modo de configuração do “SSID” e da “Senha” da rede. Após configurado os parâmetros  válidos de conexão do ESP32, o LED azul acenderá indicando sucesso na conexão. 

Obs.: Na programação existe uma função que faz com que o ESP32 se reconecte na rede automaticamente assim que estiver próximo da rede a qual foi configurada. Quanto a questão de configuração, os parâmetros do WiFi ficam salvos no ESP32 permanentemente, ou seja, caso o ESP seja desligado assim que ele for ligado novamente continuará com os mesmos parâmetros do wi-fi salvo anteriormente a menos que seja pressionado o botão novamente para alterá-los.

Montagem do circuito

Com todos os componentes em mãos vamos à montagem do circuito. Abaixo temos o esquemático eletrônico montado em uma protoboard.

Esquemático do projeto
Figura 3 – Esquemático eletrônico

Biblioteca WiFiManager

Esta biblioteca permite gerenciar a conexão wi-fi. A partir dela é possível configurar ponto de acesso e/ou modo estação. 

O modo Estação será configurado através de um portal no navegador, onde nós enviaremos para o ESP os dados da rede wi-fi no qual o ESP se conectará.

O que é o Modo Estação (Station Mode) e o Modo AP (Access Point Mode)? Basicamente serão utilizados os dois parâmetros na conexão do ESP. No modo AP o dispositivo se comporta como um roteador wi-fi gerando uma rede com “SSID” e “Senha”, já no modo Estação o dispositivo se comporta como um “cliente sem fio” se conectando a um roteador wireless.

Neste tutorial utilizaremos o modo Estação para receber os dados de conexão wi-fi e depois o ESP entrará no modo AP para se conectar no roteador como cliente.

Bibliotecas e gerenciador de placas

Após a montagem do circuito vamos as configurações e adição de bibliotecas necessárias para o funcionamento do código. Serão necessárias utilizar as bibliotecas WiFiManager, WebServer e DNSServer. Todas as bibliotecas estão disponíveis neste link.

Após o download descompacte os arquivos e cole na pasta de Bibliotecas do Arduino no endereço C:/Arquivos de Programas (x86)/Arduino/libraries

Obs.: Caso você já tenha instalado o ESP 32 na IDE do Arduino, pule esta etapa.

Na Arduino IDE vá em Arquivos > Preferências e adicione o link abaixo em “URLs Adicionais para Gerenciadores de Placas” e clique em OK.

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

Depois vá em Ferramentas > Placas > Gerenciador de Placas… e pesquise ESP32 e clique em instalar.

Figura 4 – Gerenciador de Placas Arduino

Após instalado a placa vá em Ferramentas > Placa e selecione a placa ESP32 Dev Module.

Figura 5 – Selecionando placa

Código

Com o circuito montado vamos a parte do código que será carregado no ESP32.

//Bibliotecas
#include <HTTPClient.h>
#include <DNSServer.h> 
#include <WebServer.h>
#include <WiFiManager.h>

WiFiManager wifiManager;//Objeto de manipulação do wi-fi

void setup(){
  
  Serial.begin(115200);
  Serial.println();

  //Definição dos pinos
  pinMode(13,INPUT);
  pinMode(26,OUTPUT); 
  pinMode(32,OUTPUT);

  //LEDs apagados
  digitalWrite(26,LOW);
  digitalWrite(32,LOW);
  
  //callback para quando entra em modo de configuração AP
  wifiManager.setAPCallback(configModeCallback); 
  //callback para quando se conecta em uma rede, ou seja, quando passa a trabalhar em modo estação
  wifiManager.setSaveConfigCallback(saveConfigCallback); 

}

void loop() {

   //Se o botão for pressionado
   if (digitalRead(13) == LOW) {
      Serial.println("Abertura Portal"); //Abre o portal
      digitalWrite(26,HIGH); //Acende LED Vermelho
      digitalWrite(32,LOW);
      wifiManager.resetSettings();       //Apaga rede salva anteriormente
      if(!wifiManager.startConfigPortal("ESP32-CONFIG", "12345678") ){ //Nome da Rede e Senha gerada pela ESP
        Serial.println("Falha ao conectar"); //Se caso não conectar na rede mostra mensagem de falha
        delay(2000);
        ESP.restart(); //Reinicia ESP após não conseguir conexão na rede
      }
      else{       //Se caso conectar 
        Serial.println("Conectado na Rede!!!");
        ESP.restart(); //Reinicia ESP após conseguir conexão na rede 
      }
   }

   if(WiFi.status()== WL_CONNECTED){ //Se conectado na rede
      digitalWrite(32,HIGH); //Acende LED AZUL
   }
   else{ //se não conectado na rede
      digitalWrite(32,LOW); //Apaga LED AZUL
      //Pisca LED Vermelho
      digitalWrite(26,HIGH);
      delay(500);
      digitalWrite(26,LOW);
      delay(500);
      wifiManager.autoConnect();//Função para se autoconectar na rede
   }  
}

//callback que indica que o ESP entrou no modo AP
void configModeCallback (WiFiManager *myWiFiManager) {  
  Serial.println("Entrou no modo de configuração");
  Serial.println(WiFi.softAPIP()); //imprime o IP do AP
  Serial.println(myWiFiManager->getConfigPortalSSID()); //imprime o SSID criado da rede
}

//Callback que indica que salvamos uma nova rede para se conectar (modo estação)
void saveConfigCallback () {
  Serial.println("Configuração salva");
}

Configuração da rede WiFi pelo smartphone 

Após carregado o código no seu ESP32 verifique se o LED vermelho está piscando. Se estiver, significa que não está conectado na rede como descrito no tópico funcionamento do circuito. 

Para iniciar a configuração pressione e segure o botão, após pressionado será habilitado o modo de configuração e o LED vermelho ficará acesso. 

Em seu smartphone procure a rede “ESP32-CONFIG” e entre com a senha 12345678. 

Rede ESP32-CONFIG no smartphone
Figura 6 – Selecionando ESP32-CONFIG

Ao conectar o smartphone na rede gerada pelo ESP32 você deverá clicar na notificação “Conecte-se à rede Wi-fi” como mostra a imagem abaixo.

Figura 7 – Notificação da rede

Ao clicar na notificação você será redirecionado para uma página e deverá clicar em “Configure WiFi”.

Figura 8 – Página Web Server

Após clicar em “Configure WiFi” selecione a rede na qual deseja se conectar clicando na rede sublinhada em azul, logo abaixo ela aparecerá num campo onde você só precisará informar a senha da rede escolhida e clicar em “Save”.

Escolhendo a rede para configurar o ESP32
Figura 9 – Selecionando a rede a ser conectada
Configurando rede do esp32 no smartphone
Figura 10 – Inserindo senha da rede selecionada

Pronto agora aguarde o LED azul acender, se caso acender significa que está conectado a rede.

Conclusão

É possível também fazer esse processo no ESP8266, porém com algumas particularidades. Para realizar este procedimento no ESP8266 é necessário utilizar as bibliotecas WiFiManager, WebServer e DNSServer próprias para ele, já que a que utilizamos neste tutorial é própria para o ESP32. 

No código seriam estas bibliotecas.

#include <ESP8266WiFi.h> 
#include <ESP8266WebServer.h>
#include <DNSServer.h>
#include <WiFiManager.h>

Obs.: Se caso utilizar o ESP8266 não esqueça de alterar os pinos dos LEDs e do botão, uma vez que, o que utilizamos neste tutorial é baseado na pinagem do ESP32.

Bom agora só implementar o código a seus futuros projetos para melhorá-lo dando mais facilidade para você conectar seu projeto em outras redes wi-fi. 

Gostou de aprender a configurar a rede WiFI do ESP32 pelo celular? Deixe seu comentário logo abaixo. Para saber mais sobre o mundo maker, arduino entre outros dispositivos acesse o blog. Em caso de dúvidas, caso queira trocar uma ideia, ou até mesmo dividir seu projeto, acesse nosso Fórum!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

2 Comentários

  1. Olá Felipe, muito legal essa biblioteca WiFiManager!

    Eu desenvolvi um WiFiManager em Vuejs e BootstrapVue. Apesar de ainda não ser como uma biblioteca, ele tem algumas funcionalidades a mais bem interessantes como status de conexão com o device, visualização do endereço MAC e opção de utilizar endereço IP fixo.

    Tente utilizar e me diga o que achou!

    https://github.com/giobauermeister/esp32-wifi-manager-vuejs

    Giovanni Bauermeister