Antes de mais nada, hoje vamos aprender como criar uma página Web Server com ESP32. Primeiramente, vale lembrar que a ESP32 faz parte de uma família de microcontroladores que revolucionou o mundo IoT. Essa placa de alta performance conta com um baixo consumo de energia e permite a criação de projetos de acesso remoto, dataloggers e web servers.
Em segundo lugar, temos um Kit ESP32 que com certeza te ajudará nos projetos!
Além disso, se você quiser se aprofundar na programação de microcontroladores, conheça nosso treinamento completo de Arduino através desse link
Sendo assim, é possível acionar lâmpadas, motores, ventiladores de forma remota via WiFi. As possibilidades são inúmeras, você pode acompanhar o status de sensores pela Web ou por Aplicativo do seu celular. Quando você consegue entender a lógica por trás do acionamento de um LED, por exemplo, essa lógica pode ser aplicada também a diferentes dispositivos.
Sumário
Servidor Web
Nesse tutorial você verá como controlar um LED através da web. Tendo isso em mente, podemos definir um servidor web como uma ferramenta que armazena, processa e entrega páginas para clientes Web. Essas páginas podem ser acessadas tanto pelo dispositivo móvel quando pelo computador/notebook.
Dessa forma, a comunicação entre cliente e o servidor é feita através do protocolo HTTP (Hypertext Transfer Protocol). O HTTP é a base da comunicação da Internet, fazendo com que sites possam ser encontrados facilmente. Portanto, quando um usuário digita a URL do site, o navegador gera uma solicitação e envia para o IP colocado na URL.
Assim, vamos usar a URL para solicitar uma página, ou seja, no nosso caso queremos acionar ou desligar um LED. Portanto, você precisará do endereço de IP da sua ESP32, como veremos adiante.
Além disso, vamos usar também em nosso código a linguagem de marcação HTML. Com ela, é possível personalizar sua página Web com os botões de controle do LED e imagens. Em seguida, veja o passo a passo, desde a conexão no circuito, o código e quais as suas principais funções.
MONTANDO O CIRCUITO -Web Server com ESP32
Antes de começar o código, vamos preparar o circuito. Para isso você irá precisar de uma protoboard, um Led, um resistor de 220 Ohms e a placa principal, ESP32. Logo, conecte o LED no pino 27, seguindo o esquema da imagem:
PROGRAMANDO – Web Server com ESP32
Antes de tudo, caso você ainda não saiba como utilizar a ESP com a IDE do Arduino, veja esse tutorial. Assim, podemos prosseguir. Portanto, será preciso a biblioteca WiFi que já vem embutida no Arduino. Entretanto, você precisa instalá-la, para isso siga o passo a passo:
- Na guia do menu do Arduino, clique em Sketch –> Gerenciar Bibliotecas. Procure por WiFi By Arduino e instale a versão 1.2.7 (a mais recente), como mostra a imagem abaixo.
Sendo assim, essa biblioteca possui diversas funções. O objetivo é explicar como cada uma delas vai atuar diante da conexão.
Para facilitar nosso projeto, vamos usar um exemplo pronto a partir da biblioteca. Ainda assim, é preciso fazer algumas alterações no código do exemplo, como colocar a porta que vamos usar (27), além das credenciais de Internet e Senha.
Dessa maneira, no menu da IDE do Arduino clique em:
- Arquivo -> Exemplos -> WiFi -> SimpleWebServerWiFi. Você também pode encontrar esse exemplo com o nome de SimpleWiFiServer. Perceba que irá abrir o código-exemplo.
Estamos quase lá! Você já pode carregar o sketch para a placa ESP32, mas antes, vamos entender melhor como funcionam os comandos do códigos e fazer as mudanças necessárias.
Cabeçalho – Bibliotecas e Variáveis
Sendo assim, nessa parte temos a inclusão das bibliotecas. Além disso, insira o nome da sua rede de internet e a senha no devido espaço (SSID e PASS):
#include <SPI.h>
#include <WiFi.h>
char ssid[] = "yourNetwork";
char pass[] = "secretPassword"; A variável status é reponsável por analisar a conexão junto com o laço condicional if, como veremos mais a frente. Em WiFiServer, é designada a porta que o servidor vai usar, que é a porta 80, nesse caso.
int status = WL_IDLE_STATUS;
WiFiServer server(80);Void Setup ( ) – Inicializando
No setup( ), vamos iniciar o Monitor Serial com a velocidade de 115200 e, também, definir o pino 27 como saída, onde será conectado o LED. Em seguida, a função WiFi.status( ) verifica se a conexão funciona, o Serial informa o status da conexão.
Essa função pode retornar diferentes constantes, dependendo da situação. Nesse código, temos a constante WL_NO_SHIELD, que avisa se a placa está ou não presente na conexão.
void setup() {
Serial.begin(115200);
pinMode(27, OUTPUT);
if (WiFi.status() == WL_NO_SHIELD) {
Serial.println("WiFi shield not present");
while (true);
}Após isso, há uma string que verifica se o firmware está atualizado. Em seguida, o laço while faz com que, enquanto a conexão esteja satisfeita, o Monitor Serial mostre o nome da rede WiFi.
Além disso, dentro do while tem-se ainda a função WiFi.begin( ), responsável pela conexão da placa à rede WiFi. Portanto, através de dois parâmetros passados no início do código, que são o nome e a senha da rede, essa função realiza a conexão.
Antes de continuar, confira o Kit IoT com ESP32!
String fv = WiFi.firmwareVersion();
if (fv != "1.1.0") {
Serial.println("Please upgrade the firmware");
}
// attempt to connect to Wifi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to Network named: ");
Serial.println(ssid);
status = WiFi.begin(ssid, pass);
delay(10000);
}
server.begin();
printWifiStatus();
}
Void Loop ( ) – Verificando o Cliente Conectado
Desta forma, vamos começar com o looping. Veja que, a função WiFiClient inicia uma variável que confere se há algum cliente conectado. Enquanto o cliente continua disponível, armazenam-se os dados na variável. Tal variável é do tipo caracter (c), no fim, o Monitor Serial mostra esses dados.
void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("new client");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
if (c == '\n') { Nessa parte a seguir, a função lenght analisa se não tem mais nenhum dado para receber, e também responde isso ao cliente.
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();Para fazer o design da página Web e dos botões que acende e desliga o LED, temos as duas linhas da função client.print com marcações HTML. Você pode alterar como preferir para personalizar.
Em seguida, a linha em branco denota o final da mensagem, seguido pelo break que desconecta o client.
client.print("Click <a href=\"/H\">here</a> turn the LED on pin 27 on<br>");
client.print("Click <a href=\"/L\">here</a> turn the LED on pin 27 off<br>");
client.println();
break;
Outra estrutura responsável por fazer verificações é o else. Ela confere a mensagem que o cliente recebeu, impedindo a string de estar com espaços em branco. O retorno (\r), indica o começo de uma linha nova.
Dessa forma, na sequência verifica-se a requisição para acender ou desligar o LED. Por fim, finaliza-se a conexão com a função client.stop( ).
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
if (currentLine.endsWith("GET /H")) {
digitalWrite(27, HIGH);
}
if (currentLine.endsWith("GET /L")) {
digitalWrite(27, LOW);
}
}
}
client.stop();
Serial.println("client disonnected");
}
}Além disso, temos também uma função chamada no decorrer do código: void printWiFiStatus. Portanto, ela mostra o nome da rede no Monitor Serial, o endereço de IP e a força do sinal em dBm (decibéis miliwatt).
void printWifiStatus() {
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
IPAddress ip = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ip);
long rssi = WiFi.RSSI();
Serial.print("signal strength (RSSI):");
Serial.print(rssi);
Serial.println(" dBm");
Serial.print("To see this page in action, open a browser to http://");
Serial.println(ip);
}Código Completo
#include <WiFi.h>
char ssid[] = "yourNetwork"; // your network SSID (name)
char pass[] = "secretPassword"; // your network password
int keyIndex = 0; // your network key Index number (needed only for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
void setup() {
Serial.begin(115200); // initialize serial communication
pinMode(27, OUTPUT); // set the LED pin mode
// check for the presence of the shield:
if (WiFi.status() == WL_NO_SHIELD) {
Serial.println("WiFi shield not present");
while (true); // don't continue
}
String fv = WiFi.firmwareVersion();
if (fv != "1.1.0") {
Serial.println("Please upgrade the firmware");
}
// attempt to connect to Wifi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to Network named: ");
Serial.println(ssid); // print the network name (SSID);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// wait 10 seconds for connection:
delay(10000);
}
server.begin(); // start the web server on port 80
printWifiStatus(); // you're connected now, so print out the status
}
void loop() {
WiFiClient client = server.available(); // listen for incoming clients
if (client) { // if you get a client,
Serial.println("new client"); // print a message out the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
// the content of the HTTP response follows the header:
client.print("Click <a href=\"/H\">here</a> turn the LED on pin 27 on<br>");
client.print("Click <a href=\"/L\">here</a> turn the LED on pin 27 off<br>");
// The HTTP response ends with another blank line:
client.println();
// break out of the while loop:
break;
} else { // if you got a newline, then clear currentLine:
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /H")) {
digitalWrite(27, HIGH); // GET /H turns the LED on
}
if (currentLine.endsWith("GET /L")) {
digitalWrite(27, LOW); // GET /L turns the LED off
}
}
}
// close the connection:
client.stop();
Serial.println("client disonnected");
}
}
void printWifiStatus() {
// print the SSID of the network you're attached to:
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
// print your WiFi shield's IP address:
IPAddress ip = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ip);
// print the received signal strength:
long rssi = WiFi.RSSI();
Serial.print("signal strength (RSSI):");
Serial.print(rssi);
Serial.println(" dBm");
// print where to go in a browser:
Serial.print("To see this page in action, open a browser to http://");
Serial.println(ip);
}Finalizando – Web Server com ESP32
Agora sim, carregue o código completo para a placa ESP32. Você verá a seguinte mensagem aparecer no Monitor Serial. Anote o endereço de IP da que aparece na tela, é o que você usará para direcionar para a página online.
Por fim, copie seu endereço de IP e cole na página do web server, ali você vera os dois “botões” para controle do LED.
Para concluir, vale lembrar novamente que você pode realizar muitos projetos a partir do Web Server com a ESP32. Pense que é possível controlar portões, motores, relés e o que mais você imaginar. Além de tudo isso, a ESP32 também pode te levar a lua! Quer saber como? Clique aqui.
Continue vendo mais em nossas redes sociais:
Instagram: @lobodarobotica
Facebook: /lobodarobotica
YouTube: /lobodarobotica
