WiFi Manager em Vuejs para dispositivos IoT com ESP32

Produtos que são utilizados em soluções IoT, muitas vezes possuem diversas informações de configuração variáveis dependendo do ambiente onde são instalados. Essas informações podem ser de redes Wi-Fi, como SSID, senhas, endereços IP, ou informações de um servidor ao qual o dispositivo IoT irá se conectar como URL do servidor, endpoint de API, ID do dispositivo e etc. No estágio de prototipagem de um software de um produto IoT, muitas vezes temos essas diversas informações hardcoded no código simplesmente para testes e validações iniciais. Mas ao decorrer do desenvolvimento, precisamos de uma maneira dinâmica de introduzir tais informações no dispositivo de maneira que seja fácil sua configuração em produção e em campo. Iremos apresentar neste artigo um WiFi Manager em Vuejs para dispositivos IoT com ESP32.

Essas informações podem vir de fábrica, ou podem ser dinamicamente configuradas. Um exemplo são os relés Sonoff, onde os mesmos se conectam a um servidor na nuvem com um endereço provavelmente configurado internamente no firmware. No entanto, a rede Wi-Fi é configurada dinamicamente pelo usuário através de uma interface no smartphone.

Neste artigo iremos mostrar um projeto que visa configurar dinamicamente um módulo ESP32 com informações de rede Wi-Fi. Iremos utilizar diversas tecnologias Web como Vuejs, Websockets, Gulp, Json etc. Chegando ao final teremos uma interface Web responsiva gravada na memória do ESP32 para provisionamento de informações de rede Wi-Fi ao ESP32. 

Todo o projeto do WiFi manager para ESP32, tanto frontend como backend (firmware), foi desenvolvido no VS Code e PlatformIO.

Funções do WiFi Manager

Usando tecnologias Web em no projeto WiFi manager para ESP32

Tecnologias Web avançaram muito nos últimos anos. Várias delas podemos trazer ao âmbito de sistemas embarcados. Neste projeto foi utilizado o Vuejs, HTML, CSS, BootstrapVue, Gulp, Websockets e Json. Algumas delas iremos explicar brevemente abaixo.

O que é o Vuejs?

Vuejs é um framework javascript, lançado em 2014, usado para criação de aplicações Web. Com ele é possível criar páginas Web utilizando o princípio de SPA (Single Page Applications) onde o site não é recarregado a cada mudança de página e sim os elementos vão sendo exibidos de acordo com o estado da aplicação. 

Juntamente com o Vuejs temos outros frameworks como Angular, React e etc. O Vuejs se destaca pela sua facilidade de uso rápida prototipagem.

O que é o BootstrapVue?

BootstrapVue é um componente para estilização de uma aplicação Web no âmbito da UI. É baseado no Bootstrap mas modificado para utilização com Vuejs. Com ele é possível fazer aplicações responsivas que se apresentam bem em dispositivos mobile e desktop.

O que é o Gulp?

Gulp é utilizado para automatização de tarefas de desenvolvimento. Dentre as várias tarefas temos modificação ou remoção de arquivos e pastas, preparação de arquivos para uso em produção, minificação e etc.

Arquitetura do projeto frontend do WiFi manager para ESP32

Já que estamos falando de tecnologias Web, vamos começar explicando um pouco sobre o funcionamento da página Web Vuejs do projeto WiFi Manager em Vuejs para dispositivos IoT com ESP32.

A página Web possui um cliente Websocket que tenta se conectar ao ESP32. O Websocket fica escutando por mensagens e quando uma é recebida, o dado Json é tratado e a ação devida é tomada.

Vamos tomar o exemplo do botão Scan presente na página. Ao pressioná-lo, uma mensagem é enviada ao ESP32, este por sua vez realiza um scan de redes e retorna um array com as redes encontradas.

Escaneando

Função que é executada ao pressionar Scan:

Trecho do código que é executado quando o array de redes ssid é recebido:

Os outros botões funcionam basicamente da mesma maneira. O resto da página é basicamente um controle de estados, exibição de popups de confirmação e avisos, sempre trocando informações através do websocket.

Para estilização utilizamos o BootstrapVue e alguns de seus componentes como b-input-group, b-button, b-spinner, b-form-checkbox e alguns modais para os popups de aviso.

Telas do WiFi Manager

Arquitetura do projeto backend do WiFi manager para ESP32

Indo para o lado do ESP32, que podemos chamar de backend, temos os seguintes elementos:

Hotspot Wi-Fi

Caso o ESP32 ainda não esteja configurado, o mesmo entra em modo AP (Access Point) onde é criada uma rede Wi-Fi. Quando é feita a conexão, podemos acessar o ESP32 através de seu endereço IP em um navegador Web. Para que ele tome ações de acordo com as requisições do navegador, precisaremos de um Webserver. 

Webserver

O ESP32 tem um Webserver responsável por “servir” a nossa página de configuração Wi-Fi. Essa página constitui de apenas um arquivo comprimido chamado index.html.gz que contém todo HTML, script Vuejs e arquivos CSS. Os arquivos foram comprimidos usando o Gulp. O script Gulp está no repositório do GitHub.

O arquivo comprimido index.html.gz é gravado na SPIFFS. Utilizamos a biblioteca SPIFFS.h para acessar o arquivo e servi-lo quando o IP do ESP32 é acessado em um navegador. Abaixo o trecho de código que é executado.

A partir do momento em que o ESP32 envia a página ao navegador, este se torna responsável em descomprimir o arquivo e renderizar seu conteúdo. 

FAT

O arquivo json de configuração fica em uma partição ffat dentro da memória flash do ESP32. Dependendo se este arquivo já estiver sido escrito com as informações corretas de Wi-Fi, o ESP32 já pode se conectar a rede. A biblioteca FFat.h é usada para manipulação deste arquivo.

Websockets

O ESP32 possui um servidor Websocket, que mantem-se na “escuta” por eventos, com o qual a página Web se conecta e realiza a troca de dados. Os dados são em formato Json e para decodificá-los o ESP32 se utiliza da biblioteca ArduinoJson. Veja abaixo o trecho de código onde tratamos os dados Wi-Fi quando pressionamos o botão Save na página Web. 

Ao pressionar o botão Save, um evento websocket com dado Json é enviado ao ESP32, o qual por sua vez decodifica o Json e salva as informações na partição FAT, retornando OK se tudo ocorreu bem. Veja abaixo como o botão de salvar o dados funciona.

Salvando dados

Esquema de partições do ESP32

Para ter a página Web salva na SPIFFS e o arquivo de configuração em uma partição FAT, foi preciso configurar um esquema de partições customizado para o ESP32. Usando o PlatformIO, isso é bem fácil. Basta ter na raiz do projeto um arquivo CSV identificando as partições e uma flag no platformio.ini indicando esse mesmo arquivo CSV.

Adicione ao platformio.ini

Conclusão

Ao final basta fazer upload do firmware na placa, gravar a página na SPIFFS usando Upload filesystem image e pronto! Agora você tem um WiFi Manager para seu produto IoT.

O projeto pode ser expandido adicionando mais campos para informações de API por exemplo. Até mesmo fazer uma transição de páginas utilizando recursos do Vuejs.

O código completo do firmware e a página Web está no GitHub e pode ser clonado e explorado. Caso tenha dúvidas em qualquer trecho do código ficaremos felizes em ajudar.

E se o WiFi Manager em Vuejs para dispositivos IoT com ESP32 for útil no desenvolvimento do seu produto, não deixe de compartilhar sua experiência conosco.

Sem licença

Receba os melhores conteúdos sobre sistemas eletrônicos embarcados, dicas, tutoriais e promoções.

Software » WiFi Manager em Vuejs para dispositivos IoT com ESP32
Comentários:
Notificações
Notificar
guest
2 Comentários
recentes
antigos mais votados
Inline Feedbacks
View all comments
Leandro Martins
Leandro Assad Martins
26/06/2020 10:54

Olá.
Este projeto funciona tbem no NodeMCU ESP-F ?

Talvez você goste:

Nenhum resultado encontrado.

Séries

Menu

WEBINAR
 
Redes Mesh para Monitoramento
e Controle de Sensores

Data: 15/07 às 14:00h Apoio: Artimar| Microchip| Tecsus
 
INSCREVA-SE AGORA »



 
close-link