Como criar um WebServer com Esp32 e utilizá-lo junto ao BMP280

Introdução

Ao analisar as capacidades do Arduino, é possível notar diversos pontos que poderiam ser melhores, e a sua conectividade com a internet é um deles. Para solucionar este problema, existem módulos e shields Wi-Fi e Ethernet, entretanto, estes não compactuam com o caráter compacto do projeto. Por isso que, atualmente, existem placas microcontroladoras e de prototipagem como o Esp32.

Ao longo deste post serão explicadas as principais diferenças entre o Arduino e o Esp32, assim como as principais vantagens e desvantagens de sua utilização. Será explicado como funciona o Wi-Fi e como implementá-lo juntamente ao Esp32.

Por fim, vamos desenvolver um sistema que recolherá os dados coletados por um sensor BMP280 e enviá-los para um web server criado por nós em HTML e que será acessado por um endereço de IP fornecido após o Esp32 se conectar na rede WI-Fi local.

Vantagens do Esp32

O Arduino é, com certeza, uma das melhores opções de plataformas para controlar o seu projeto, entretanto, ele não é tão poderoso quando comparado a outras opções já existentes no mercado atual.

Ao analisar o modelo de Arduino mais utilizado, o Uno, nota-se entre suas principais características:

• Processador de 8 bit
• Frequência de operação de 16 MHz
• 32 Kb de memória flash

Porém, o Esp32 já vem com um processador de 32 bit, 240 MHz de frequência de operação e 4Mb de memória flash, valores muito maiores que os do Arduino. Além disso, vale ressaltar que, já integrados à placa, existem um módulo bluetooth e um módulo Wi-Fi. Ao mesmo tempo, o consumo de energia do Arduino ainda é maior que o do Esp32, mas esta é apenas uma entre várias e importantes vantagens do Esp32 perante o Arduino.

Por que o Wi-Fi?

Uma das formas de comunicação mais utilizadas atualmente é a Internet, veiculada via Wi-Fi, sendo este utilizado para funções desde o envio de dados até o entretenimento. Neste momento conheceremos um pouco mais sobre como funciona tal tecnologia e suas principais características e vantagens.

O termo é uma abreviação da expressão Wireless Fidelity, e também faz referência ao “Hi-Fi”. O Wi-Fi funciona através de ondas de rádio, as quais são enviadas, captadas e decodificadas pela antena do roteador. Quanto maior a frequência, maior a capacidade de transmissão de dados. As duas frequências para essa troca de informações são 2.4GHz e 5GHz.

Atualmente esta tecnologia está inserida em quase todos os ramos. Dentro das casas, em aparelhos IoT (Internet of Things, Internet das coisas), em eletrodomésticos e até em vestimentas, dentro dos chamados “Wearables”. 

Inserir a tecnologia do Wi-Fi em seu projeto irá agregar muito valor a este, tornando a visualização de dados deste compatível a praticamente todos os aparelhos que possuem suporte ao Wi-Fi. Na nossa demonstração deste artigo iremos conectar o Esp32 à nossa própria rede Wi-FI, entretanto outras possibilidades estão disponíveis, a exemplo da criação de uma rede própria do Esp32, possibilitando a utilização do projeto em outros locais sem ser necessária nenhuma alteração no código.

Se ainda você ainda não possui a biblioteca WebServer, baixe-a diretamente do GitHub do desenvolvedor

Nosso projeto

 Para demonstrar a tecnologia do Wi-Fi funcionando juntamente com o Esp32, criaremos um projeto que recolherá dados dos sensores e iremos enviá-los para um Web Server conectado à nossa rede local. 

O foco dos dados será nas condições ambientes, e entre eles vamos recolher informações relacionadas à temperatura e pressão atmosférica. A temperatura e a pressão será medida por um módulo BMP280, que também é capaz de medir a altitude aproximada, entretanto, estes dados não serão utilizados.

Os dados coletados serão processados pelo Esp32 que os armazenará em variáveis dos tipos int e float. Dentro do código existirá uma variável do tipo String que será responsável por armazenar o código HTML, cujo comportamento será analisado mais à frente.

Assim que o projeto for ligado, todas as suas funções iniciarão e um endereço de IP será fornecido. Com este endereço será possível visualizar a nossa página HTML em todos os dispositivos conectados à mesma rede Wi-Fi do Esp32.

Para desenvolver o código da interface será utilizado o “Microsoft Visual Studio Code”, que além de funcionar como um editor de código, é uma importante ferramenta a ser utilizada não só com o HTML, mas com todas as outras linguagens. Veja o passo-a-passo da instalação do VS Code abaixo.

Como instalar o Visual Studio Code

Primeiramente, acesse seu navegador e pesquise por “vs code” ou algo que remonte ao editor. Ao fim da pesquisa, clique no link oficial do VS Code, assim como está indicado na imagem.

Ao entrar na página, selecione o botão de “Download” para instalar a versão mais recente e estável para Windows. Se este não for o seu sistema operacional, vá para as outras opções de download e selecione a sua plataforma. 

Ao clicar em “Download”, você será redirecionado para a documentação do VS Code e o download do instalador será iniciado.

Ao abrir o instalador, será apresentado o documento que contém os “Termos de Serviço”, ao aceitá-los, poderá seguir com o processo. 

Neste momento, escolha quais ações você deseja que sejam tomadas, entretanto, a opção para adicionar o VS Code ao PATH deve estar marcada.

Por fim, confira se tudo está de acordo e finalize a instalação.

Conhecendo o BMP280

O BMP280 é um dos melhores, mais úteis e mais práticos sensores para serem utilizados em aplicações IoT. Este sensor é capaz de medir a temperatura, a pressão atmosférica e a altitude aproximada em relação ao nível do mar. 

Este sensor, como já citado, é muito prático e tem diversas aplicações, a exemplo de estações meteorológicas, termostatos, além de poder ser utilizado em projetos mais ambiciosos como foguetes (destinados ao foguetemodelismo) e CubeSats.

A inclusão do BMP280 no código é extremamente simples, e no nosso caso só serão utilizados dois comandos, “readTemperature” e “readPressure”, destinados à leitura da temperatura e pressão atmosférica, respectivamente. Para implementar este sensor em seus projetos é necessária uma biblioteca, que pode ser instalada diretamente da IDE do Arduino, basta buscar por BMP280, no gerenciador de bibliotecas, e clicar na que foi desenvolvida pela Adafruit. Veja a demonstração abaixo:

1- Na sua IDE, pressione Ctrl + Shift + i para abrir o gerenciador de bibliotecas.

2- Pesquise por BMP280

3- Instale a biblioteca da Adafruit, conforme a imagem abaixo.

Materiais

Os materiais abaixo foram utilizados no projeto. Além destes, apenas jumpers e uma protoboard para o encaixe do sensor.

• Esp32
• BMP280
• Protoboard
• Jumpers

Esquemático

O nosso projeto final seguirá o esquemático abaixo.

Página HTML

A interface do projeto será produzida por meio de um simples código feito em HTML. Nesta interface o foco será a facilidade na leitura dos dados, por isso estes estarão centralizados no centro da página, com suas respectivas legendas em negrito. Todo este processo permitirá uma boa leitura a partir de um computador, quanto de um celular.

Para desenvolver seu arquivo, crie-o em uma pasta de seu desejo e coloque seu nome como “index.html”. Uma das grandes vantagens do VS Code é sua praticidade, portanto, com apenas um atalho, parte da sua estrutura já será produzida. Portanto, ao digitar uma exclamação (“!”), e clicar no “Tab”, o código abaixo já será produzido automaticamente.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Neste momento iremos iniciar o desenvolvimento da interface. Primeiramente, troque a língua (“lang”) por “pt-br” e adicione um título ao documento.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dados dos sensores</title>
</head>
<body>
    
</body>
</html>

Agora, iremos dar uma leve customizada na interface, substituindo a fonte padrão por “Helvetica”, além de centralizar as informações, por isso, utilizaremos a tag “<style>”, logo abaixo do título. O pedaço de código que iremos adicionar está indicado abaixo.

<style>
    html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}
    body{margin-top: 50px;} 
    h1 {color: #444444; margin: 50px auto 30px;}
    p {font-size: 24px; color: #444444; margin-bottom: 10px;}
</style>

Dentro da tag “body” será construído o corpo, ou seja, o conteúdo, da nossa interface. Primeiramente, criaremos uma “div”, com o “id” = webpage. Dentro dela haverá um título (tag “h1”), e três parágrafos que irão conter os dados. Um deles será o de temperatura, o outro da pressão atmosférica.

<body>
    <div id="webpage">
        <h1>Dados dos sensores</h1>
        <p>Temperatura: 27°C</p>
        <p>Pressão Atmosférica: 1 atm</p>
    </div>
</body>

Note que foram colocados apenas dados abstratos no momento, logo, sempre que aberta a nossa página, os dados sempre serão iguais. O script completo pode ser conferido abaixo.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no\">

    <title>Dados dos sensores</title>

    <style>
        html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}
        body{margin-top: 50px;} 
        h1 {color: #444444; margin: 50px auto 30px;}
        p {font-size: 24px; color: #444444; margin-bottom: 10px;}
    </style>

</head>
<body>
    <div id="webpage">
        <h1>Dados dos sensores</h1>
        <p>Temperatura: 27°C</p>
        <p>Pressão Atmosférica: 1 atm</p>
    </div>
</body>
</html>

Código para o Esp32

O código para o Esp32 será bem simples, entretanto, serão criadas, além do “void setup()” e do “void loop()” outras 3 sub-rotinas. Uma delas será, na verdade, uma variável, na qual estará armazenado o nosso código HTML. As outras duas serão destinadas ao servidor, uma delas caso ele esteja conectado, e a outra caso o servidor não seja encontrado.

A sub-rotina do código HTML estará estruturada da seguinte forma:

String html(float temperatura, float pressao) {                                   //Variável que armazenará o script HTML
  String cd = "<!DOCTYPE html>\n";
  cd += "<html lang=\"pt-br\">\n";
  cd += "<head>\n";
  cd += "<meta charset=\"UTF-8\">\n";
  cd += "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n";
  cd += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";

  cd += "<title>Dados dos sensores</title>\n";

  cd += "<style>\n";
  cd += "html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  cd += "body{margin-top: 50px;} \n";
  cd += "h1 {color: #444444; margin: 50px auto 30px;}\n";
  cd += "p {font-size: 24px; color: #444444; margin-bottom: 10px;}\n";
  cd += "</style>\n";

  cd += "</head>\n";
  cd += "<body>\n";
  cd += "<div id=\"webpage\">\n";
  cd += "<h1>Dados dos sensores</h1>\n";
  cd += "<p>Temperatura: ";
  cd += (int)temperatura;
  cd += " *C</p>\n";
  cd += "<p>Pressão Atmosférica: ";
  cd += (int)pressao / 101325;
  cd += " atm</p>\n";
  cd += "</div>\n";
  cd += "</body>\n";  
  cd += "</html>\n";

  return cd;                                                                      //Retorna o script                                             
}

Note que sempre que existirem aspas dentro do nosso código HTML, será adicionada uma “\” antes. Isso proporciona uma leitura da string de forma literal, evitando erros durante a interpretação. Perceba, também, que os dados fictícios de temperatura e pressão foram removidos, dando lugar aos captados pelo sensor, já convertidos para “int”.

Agora, será  a vez das sub-rotinas de conexão bem-sucedida e de erro. A primeira será chamada caso nada de errado ocorra com o servidor, e dentro dela será executado o nosso script HTML, juntamente com a leitura e envio dos dados dos sensores. Confira o código abaixo.

void conectado() {                                                                //Sub-rotina para caso o servidor fique online
  sv.send(200, "text/html", html(bmp.readTemperature(), bmp.readPressure()));     //Envia ao servidor, em formato HTML, o nosso script, com os parâmetros de pressão e temperatura
}

Já a segunda será bem simples, retornando uma página de texto com uma mensagem de erro caso algo de errado aconteça no nosso projeto. Confira a sub-rotina abaixo.

void nao_encontrado() {                                                           //Sub-rotina para caso seja retornado um erro
  sv.send(404, "text/plain", "Não encontrado");                                   //Retorna a mensagem de erro em caso de um retorno 404
}

O código na íntegra pode ser conferido abaixo.

#include <WiFi.h>                                                                 //Inclusão das bibliotecas
#include <WebServer.h>
#include <Wire.h>
#include <Adafruit_BMP280.h>

#define BMP_SDA 21                                                                //Definição dos pinos I2C
#define BMP_SCL 22
 
Adafruit_BMP280 bmp;                                                              //Inicia o objeto do sensor

WebServer sv(80);
  
const char* ssid= "nome da sua rede";                                             //Dados da sua rede Wi-Fi                                                
const char* senha = "senha da sua rede";

void conectado() {                                                                //Sub-rotina para caso o servidor fique online
  sv.send(200, "text/html", html(bmp.readTemperature(), bmp.readPressure()));     //Envia ao servidor, em formato HTML, o nosso script, com os parâmetros de pressão e temperatura
}

void nao_encontrado() {                                                           //Sub-rotina para caso seja retornado um erro
  sv.send(404, "text/plain", "Não encontrado");                                   //Retorna a mensagem de erro em caso de um retorno 404
}

String html(float temperatura, float pressao) {                                   //Variável que armazenará o script HTML
  String cd = "<!DOCTYPE html>\n";
  cd += "<html lang=\"pt-br\">\n";
  cd += "<head>\n";
  cd += "<meta charset=\"UTF-8\">\n";
  cd += "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n";
  cd += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";

  cd += "<title>Dados dos sensores</title>\n";

  cd += "<style>\n";
  cd += "html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  cd += "body{margin-top: 50px;} \n";
  cd += "h1 {color: #444444; margin: 50px auto 30px;}\n";
  cd += "p {font-size: 24px; color: #444444; margin-bottom: 10px;}\n";
  cd += "</style>\n";

  cd += "</head>\n";
  cd += "<body>\n";
  cd += "<div id=\"webpage\">\n";
  cd += "<h1>Dados dos sensores</h1>\n";
  cd += "<p>Temperatura: ";
  cd += (int)temperatura;
  cd += " *C</p>\n";
  cd += "<p>Umidade: 65%</p>\n";
  cd += "<p>Pressão Atmosférica: ";
  cd += (int)pressao / 101325;
  cd += " atm</p>\n";
  cd += "</div>\n";
  cd += "</body>\n";  
  cd += "</html>\n";

  return cd;                                                                      //Retorna o script                                             
} 

void setup() {
  Serial.begin(115200);                                                           //Inicia o monitor serial
  delay(100);

  if (!bmp.begin(0x76)) {                                                         //Tenta iniciar o sensor
    Serial.println("Sensor não encontrado");
    while(1);
  }

  Serial.print("Se conectando a: ");
  Serial.println(ssid);

  WiFi.begin(ssid, senha);                                                        //Se conecta ao Wi-Fi

  while (WiFi.status() != WL_CONNECTED) {                                         //Verifica se a conexão foi bem-sucedida
    delay(1000);
    Serial.print(".");
  }

  Serial.println("\nConectado");
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());                                                 //Imprime o endereço de IP

  sv.on("/", conectado);
  sv.onNotFound(nao_encontrado);
  sv.begin();                                                                     //Inicia o servidor

  Serial.println("Servidor Online");
}

void loop() { 
  sv.handleClient();                                                           //Executa as ações do servidor
}

Resultado Final

Confira abaixo como nosso projeto ficou.

Conclusão

Com este artigo foi possível entender um pouco mais da tecnologia Wi-Fi e do Esp32, bem como o passo a passo para a construção do seu próprio WebServer na rede local com este microcontrolador. Hoje também aprendemos um pouco mais sobre o sensor BMP280 e suas diversas práticas na nossa vida cotidiana. 

Por fim, se desejar aprimorar o projeto, recomenda-se uma maior customização da página, tornando algo ainda mais agradável ao leitor. Recomenda-se, também, a utilização de novos recursos, como sensores e uma rede Wi-Fi própria para o Esp32. Se tiver alguma dúvida, deixe nos comentários.

Sobre o Autor

Miguel Sena @arduuno Estudante e hobbista na parte de eletrônica e programação. Gosto de desenvolver projetos no Arduino e ESP-32 voltados á robótica e automação residencial, e de desenvolver projetos em Python, assim como a integração dele com o Arduino.