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
6 Comentários
recentes
antigos mais votados
Inline Feedbacks
View all comments
ALEXANDRE NUERNBERG
Alexandre
18/08/2020 18:43

Boa noite Giovanni, Gostei da sua interface, e estou testando ela aqui. Testei em um ESP32 Dev kit e funcionou sem problemas! Com essa placa funciona: Microcontroller ESP32 Frequency 240MHz Flash 4MB RAM 320KB Vendor DOIT platformio.ini: [env:esp32doit-devkit-v1] platform = espressif32 board = esp32doit-devkit-v1 Depois tentei rodar em um ESP32-CAM e não rodou, apesar de liberar a página de acesso. Tentando acessá-la da erro que não consegue montar o SPIFFS. Estou achando que deve ser algo com a tabela de partições partitions_custom.csv que estou usando igual a sua. O que não consigo entender é que tanto o ESP32 Dev kit… Leia mais »

Giovanni Bauermeister
Giovanni Bauermeister
Reply to  Alexandre
20/08/2020 10:09

Olá Alexandre, legal que já andou testanto o projeto!
Eu tive um pouco de dificuldade com os valores que vão no arquivo partitions_custom.csv. Se não estivessem corretos, não conseguia montar a partição da SPIFFS. Mas para o Devkit cheguei nesses valores que funcionaram.
Eu tenho uma plaquinha dessa igual a sua ESP32-CAM, vou ver se consigo testar também.
Tem uma discussão sobre a spiffs aqui: https://github.com/espressif/arduino-esp32/issues/638

Welklin Ribeiro
Welklin Ribeiro
15/07/2020 13:26

Parabéns pelo artigo Giovanni!
Sobre o source code, o platformio tem o recurso de dependência de bibliotecas que pode ser adicionado no arquivo ".ini". Ajuda muito quando você precisa clonar o repositório no github.
Você saberia como abrir a página, logo após a conexão wi-fi, como um captive portal?

Last edited 2 meses atrás by Welklin Ribeiro
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
 
Debugging
em Linux embarcado

 

Data: 30/09 às 19:30h - Apoio: Mouser Elecctronics
 
INSCREVA-SE AGORA »



 
close-link