WiFi manager com ESP8266 na IDE do Arduino

Recentemente um companheiro de um dos grupos de tecnologia procurava por um freela para fazer gerenciamento da conexão WiFi através de uma interface web. Como vi que a necessidade era justamente de uma solução pronta, comecei a procurar aqui no site o link para passar a ele e então me surpreendi ao ver que eu não tinha escrito ainda sobre o uso do WiFi Manager com ESP8266. Então, para complementar meu acervo de artigos, resolvi de imediato escrever a respeito.

Se você ainda não adicionou suporte ao ESP8266 na IDE do Arduino, sugiro esse outro artigo a respeito.

WiFi manager com ESP8266

A configuração inicial é simples demais e você pode implementar suas rotinas posteriormente sobre o próprio sketch de exemplo.

Instalar a biblioteca

A biblioteca que você precisará se chama WiFiManager e já é bastante madura e está disponível para instalação através do menu Sketch -> Include Library -> Manage Libraries. Ao acessar a janela de gerenciamento de bibliotecas, digite na caixa de pesquisa wifimanager.

Abrir o exemplo AutoConnect

Encontrada a biblioteca, clique em Install. A partir de então você já terá o exemplo de uso disponível no menu Files -> Examples -> WiFiManager, onde sugiro que inicialmente experimente o AutoConnect. Esse exemplo contém o seguinte código:

#include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino

//needed for library
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>         //https://github.com/tzapu/WiFiManager


void setup() {
    // 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 wifiManager;
    //reset saved settings
    //wifiManager.resetSettings();
    
    //set custom ip for portal
    //wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));

    //fetches ssid and pass from eeprom and tries to connect
    //if it does not connect it starts an access point with the specified name
    //here  "AutoConnectAP"
    //and goes into a blocking loop awaiting configuration
    wifiManager.autoConnect("AutoConnectAP");
    //or use this for auto generated name ESP + ChipID
    //wifiManager.autoConnect();

    
    //if you get here you have connected to the WiFi
    Serial.println("connected...yeey :)");
}

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

Como você pode ver, existe a opção de configurar o modo AP para um IP de sua escolha. Se não existir uma configuração prévia gravada (e não haverá de imediato), então ele cria a conexão chamada "AutoConnectAP", que você pode mudar para o nome desejado alí na linha wifiManager.autoConnect("AutoConnectAP"). Se você estiver monitorando pela serial, deverá ver o print da última linha antes da função loop().

Conectar ao AP e iniciar a configuração

Por padrão, a rede AP criada utilizará o tradicional IP 192.168.4.1, cujo endereço deverá ser acessado no browser logo após você estabelecer a conexão com seu ESP8266, que deve aparecer na sua lista de redes WiFi disponíveis.

Depois de conectado você poderá digitar no browser o IP 192.168.4.1 e então verá essa tela:

Clicando em Configurar WiFi você obterá a seguinte tela:

Nela, você pode clicar sobre a rede desejada. Isso fará o preenchimento automático do SSID e você deverá digitar apenas a senha. Se for uma rede oculta, então você pode digitar o SSID também (ou se a lista for extensa demais a ponto de você preferir digitar a rede invés de procurá-la na lista). Após, clique em Save e o programa se encarregará de tentar a conexão. Se houver uma falha na tentativa de conexão, não se preocupe, basta reconectar no modo AP. Quando você clicar em Save, a seguinte tela será exibida:

WiFi Manager com ESP32

Até a data de publicação desse artigo ainda não é possível utilizar essa biblioteca com ESP32; até há pouco, sequer o webserver funcionava no ESP32. No estado atual, existem algumas incompatibilidades relacionadas ao servidor DNS, mas parece que tão logo isso esteja resolvido, teremos um porte dessa biblioteca.

Video do processo

Apesar de não ser necessário para você que leu o artigo, fiz um video rápido do processo para quem ainda ficou com dúvidas ou para quem só acompanha a partir do canal Manual do Maker Brasil no Youtube. Veja a logo após as estrelinhas que você pode gentilmente avaliar o artigo:

https://youtu.be/q-d80625ShA

Inscreva-se no nosso canal Manual do Maker no YouTube.

Também estamos no Instagram.