Olá, como estão? Nos recentemente abordamos a ideia de utilizar um ESP32 juntamente com uma conexão wireless para poder fazer um web server, caso queira ver clique aqui. Hoje cada vez mais os aparelhos IoT (Internet das Coisas) vem crescendo, por esse motivo muitos deles precisão de uma “central” um servidor que permite processar essas informações e se comunicar através de um padrão de troca de dados simples com outros dispositivos ou servidores. O padrão mais utilizado que temos hoje em dia é o JSON. Para realizar a integração aplicativo com o ESP32 iremos utilizar o JSON.
Componentes Utilizados
O Que é JSON?
JSON (JavaScript Object Notation) é um padrão de troca de dados simples para nós humanos compreender e para as máquinas interpretar, apesar de no seu nome estar escrito JavaScript esse padrão é compatível com quase qualquer linguagem de programação. O JSON é o padrão mais utilizado quando o assunto é desenvolver API ou integrações, mas existe diferentes outros padrões entre eles estão o XML e o YAML. A estrutura (sintaxe) dele é da seguinte forma:
- {x} – Delimita um objeto;
- [x] – Delimita um array;
- : – Separa chaves (atributos) de valores;
- , – separa os atributos chave/valor;
Segue abaixo o exemplo de um JSON:
{
"image":{
"width": 800,
"height": 600,
"title": "JSONlogo",
"thumbnail": {
"url": "http://www.json.org/img/json160.gif",
"height": 160,
"width": 160
},
"animated": false,
"IDs": [116, 943, 234]
}
}Funcionamento do Projeto Aplicativo com ESP32
O projeto baseia-se no ESP32 recebendo informações dos sensores, e enviando as informações para o web server no formato JSON. Para assim conseguirmos realizar uma integração com essas informações em um aplicativo.
Montagem do Circuito do Projeto Aplicativo com ESP32
Logo após compra dos componentes na WJ Componentes, vamos à montagem! Para começar a montagem iremos primeiro ter que saber as pinagens do DHT11, sabendo que o pino 1 é Vdd e ele trabalhar com a tensão de 3-5V e corrente 200uA a 500mA não precisaremos de resistor, e o LDR para que funcione como queremos iremos precisar colocar um resistor de 10kΩ e lembrando que o LDR não possui pinagem, pois o LDR é um resistor dependente de luz.
Sabendo disso podemos realizar a montagem do projeto, iremos colocar os componentes na protoboard. Como DHT11 e o LDR são “sensores” iremos utilizar saídas analógicas do ESP32, para esse projeto escolhemos utilizar os pinos 4 ou GPIO4 para o DHT11 e o pino 35 ou GPIO35 para o LDR.
Contudo segue abaixo uma imagem que demonstrando a montagem do circuito.
Código-fonte do Projeto Aplicativo com ESP32
Em seguida segue abaixo o código-fonte completo do projeto.
//Biblioteca -----------------------------------------------------------------------------------------
#include <DHT.h> // Responsável pelo Sensor DHT
#include <DHT_U.h> // Responsável pelo Sensor DHT
#include <WiFi.h> // Responsável pelo WiFi
//WiFi -----------------------------------------------------------------------------------------------
const char* ssid = "<NOME-DA-REDE>"; // Nome da rede WiFi
const char* password = "<SENHA-DA-REDE>"; // Senha do WiFi
WiFiServer server(80); // Declaração do servidor e porta
//Variável Global ------------------------------------------------------------------------------------
String header;
//LDR - Sensor ---------------------------------------------------------------------------------------
#define LDR 35 // Define pino do LDR
//DHT11 - Sensor -------------------------------------------------------------------------------------
#define DHTPIN 4 // Define o pino DHT11
#define DHTTYPE DHT11 // Define tipo do DHT11
DHT dht(DHTPIN,DHTTYPE); // Declara objeto DHT
//Setup ----------------------------------------------------------------------------------------------
void setup() {
Serial.begin(115200); // Inicializa Serial
pinMode(LDR, INPUT); // Configura pino do LDR como INPUT
dht.begin(); // Inicializa o DHT11
//Configurações de WiFi
WiFi.begin(ssid, password); // Tenta se conectar no WiFi
Serial.print("Conectando no WiFi: "); // Imprime na Serial
Serial.println(ssid); // Imprime ssid na Serial
while (WiFi.status() != WL_CONNECTED) { // Verifica se a Conexão foi realizada
Serial.print("."); // Se não imprime na Serial
delay(500); // Espera 0,5s
}
Serial.println("\nWifi Conectado"); // Imprime na Serial
Serial.print("IP address: "); // Imprime na Serial
Serial.println(WiFi.localIP()); // Imprime IP do ESP32 na Serial
server.begin(); // Inicializa o Servidor
Serial.println("Servidor Iniciado na porta 80"); // Imprime na Serial
}
//Loop -----------------------------------------------------------------------------------------------
void loop() {
float temp,umid; // Declara Variáveis
int luz,i; // Declara Variáveis
WiFiClient cliente = server.available(); // Atribui modificação no servidor
if(cliente){ // Verifica cliente
Serial.println("Novo Cliente"); // Se tiver cliente imprime na Serial
String currentLine=""; // Declara variável vazia
while(cliente.connected()){ // Loop enquanto estiver conectado
if(cliente.available()){ // Verifica se tem algum dado do cliente
char c = cliente.read(); // Atribui a C as informações do cliente
header += c; // Incrementa o header com C
if(c == '\n'){ // Verifica se c = quebra de linha
if(currentLine.length() == 0){ // Se o tamanho de currentLine = 0
cliente.println("HTTP/1.1 200 OK"); // Retorna ao Cliente que deu certo
cliente.println("Content-type:application/json"); // Configura para JSON
cliente.println("Connection: close"); // Fecha conexão
cliente.print("\n["); // Imprime no cliente
for(i=0;i<=3;i++){ // Loop de 3 vezes
temp = dht.readTemperature(); // Obtém a temperatura do DHT11
umid = dht.readHumidity(); // Obtém a Humidade do DHT11
luz = analogRead(LDR); // Obtém a Luminosidade do LDR
cliente.print("{\"Luminosidade\":\""); // Imprime para o cliente
cliente.print(luz); // Imprime para o cliente
cliente.print("\",\"Temperatura\":\""); // Imprime para o cliente
cliente.print(temp); // Imprime para o cliente
cliente.print("\",\"Umidade\":\""); // Imprime para o cliente
cliente.print(umid); // Imprime para o cliente
if(i<3){ // Verifica se i = 3
cliente.println("\"},"); // Se for Imprime para o cliente
} else{ // Se não
cliente.println("\"}]"); // Imprime para o cliente
}
}
break; // Força saída do Loop
} else{ // Se não
currentLine = ""; // Limpa a variável
}
} else if(c != '\r'){ // Verifica se C é diferente de '\r'
currentLine += c; // Incrementa currentLine o valor de C
}
}
}
header = ""; // Limpa a variável
cliente.stop(); // Desconecta do Servidor
Serial.println("Cliente Desconectou.\n"); // Imprime na Serial
}
delay(100); // Espera 0,1s
}Vamos dar uma olhada mais de perto no código:
Incluindo Bibliotecas
Primeiramente temos que incluir as bibliotecas que usamos em nosso projeto.
//Biblioteca -----------------------------------------------------------------------------------------
#include <DHT.h> // Responsável pelo Sensor DHT
#include <DHT_U.h> // Responsável pelo Sensor DHT
#include <WiFi.h> // Responsável pelo WiFiDeclarações do WiFi
Então declaramos 2 constantes 1 objeto para o WiFi sendo elas ssid (nome da rede WiFi), senha da rede e server.
//WiFi -----------------------------------------------------------------------------------------------
const char* ssid = "<NOME-DA-REDE>"; // Nome da rede WiFi
const char* senha = "<SENHA-DA-REDE>"; // Senha da rede WiFi
WiFiServer server(80); // Declaração do servidor e portaVariáveis Globais
Logo após declaramos 1 variável global chamada header do tipo String.
//Variável Global ------------------------------------------------------------------------------------
String header;Declaração do LDR
Então declaramos os pino utilizado no LDR.
//LDR - Sensor ---------------------------------------------------------------------------------------
#define LDR 35 // Define pino do LDRDeclaração do DHT11
Em seguida declaramos 9 funções auxiliares, para que dessa forma possamos dividir nosso código.
//DHT11 - Sensor -------------------------------------------------------------------------------------
#define DHTPIN 4 // Define o pino DHT11
#define DHTTYPE DHT11 // Define tipo do DHT11
DHT dht(DHTPIN,DHTTYPE); // Declara objeto DHTFunções Setup
Logo após na função setup, será onde iremos inicializar a Serial, DHT, WiFi e o servidor. Então iremos configurar o pino do LDR para INPUT.
//Setup ----------------------------------------------------------------------------------------------
void setup() {
Serial.begin(115200); // Inicializa Serial
pinMode(LDR, INPUT); // Configura pino do LDR como INPUT
dht.begin(); // Inicializa o DHT11
//Configurações de WiFi
WiFi.begin(ssid, password); // Tenta se conectar no WiFi
Serial.print("Conectando no WiFi: "); // Imprime na Serial
Serial.println(ssid); // Imprime ssid na Serial
while (WiFi.status() != WL_CONNECTED) { // Verifica se a Conexão foi realizada
Serial.print("."); // Se não imprime na Serial
delay(500); // Espera 0,5s
}
Serial.println("\nWifi Conectado"); // Imprime na Serial
Serial.print("IP address: "); // Imprime na Serial
Serial.println(WiFi.localIP()); // Imprime IP do ESP32 na Serial
server.begin(); // Inicializa o Servidor
Serial.println("Servidor Iniciado na porta 80"); // Imprime na Serial
}Funções Loop
Em seguida na função loop, onde iremos declarar mais algumas variáveis para armazenar os valores lidos pelos sensores. Assim que os valores forem armazenados ele irá imprimir na tela do cliente um JSON que nós mesmo iremos estruturar.
//Loop -----------------------------------------------------------------------------------------------
void loop() {
float temp,umid; // Declara Variáveis
int luz,i; // Declara Variáveis
WiFiClient cliente = server.available(); // Atribui modificação no servidor
if(cliente){ // Verifica cliente
Serial.println("Novo Cliente"); // Se tiver cliente imprime na Serial
String currentLine=""; // Declara variável vazia
while(cliente.connected()){ // Loop enquanto estiver conectado
if(cliente.available()){ // Verifica se tem algum dado do cliente
char c = cliente.read(); // Atribui a C as informações do cliente
header += c; // Incrementa o header com C
if(c == '\n'){ // Verifica se c = quebra de linha
if(currentLine.length() == 0){ // Se o tamanho de currentLine = 0
cliente.println("HTTP/1.1 200 OK"); // Retorna ao Cliente que deu certo
cliente.println("Content-type:application/json"); // Configura para JSON
cliente.println("Connection: close"); // Fecha conexão
cliente.print("\n["); // Imprime no cliente
for(i=0;i<=3;i++){ // Loop de 3 vezes
temp = dht.readTemperature(); // Obtém a temperatura do DHT11
umid = dht.readHumidity(); // Obtém a Humidade do DHT11
luz = analogRead(LDR); // Obtém a Luminozidade do LDR
cliente.print("{\"Luminosidade\":\""); // Imprime para o cliente
cliente.print(luz); // Imprime para o cliente
cliente.print("\",\"Temperatura\":\""); // Imprime para o cliente
cliente.print(temp); // Imprime para o cliente
cliente.print("\",\"Umidade\":\""); // Imprime para o cliente
cliente.print(umid); // Imprime para o cliente
if(i<3){ // Verifica se i = 3
cliente.println("\"},"); // Se for Imprime para o cliente
} else{ // Se não
cliente.println("\"}]"); // Imprime para o cliente
}
}
break; // Força saída do Loop
} else{ // Se não
currentLine = ""; // Limpa a variável
}
} else if(c != '\r'){ // Verifica se C é diferente de '\r'
currentLine += c; // Incrementa currentLine o valor de C
}
}
}
header = ""; // Limpa a variável
cliente.stop(); // Desconecta do Servidor
Serial.println("Cliente Desconectou.\n"); // Imprime na Serial
}
delay(100); // Espera 0,1s
}Obs.: Caso não saiba se o seu JSON está com a sintaxe ou estrutura correta, você pode utilizar o site JSONformatter para validar a formatação.
Aplicativo do Projeto Aplicativo com ESP32
Para desenvolver um aplicativo iremos utilizar um site chamado App Inventor para isso basta clicar em Create Apps e criar uma conta.
Após isso iremos colocar uma imagem, um título e um botão e depois mais 6 textos para que quando o botão for clicado ele exiba as informações, esses 6 textos não deixaremos visíveis e colocaremos o componente web.
Agora é hora de programar o aplicativo! Para isso clicamos no canto superior direito em blocos. Já na tela de programar iremos colocar uma variável global chamada JSON, após isso iremos colocar um evento que quando clicar no botão ele irá ajustar a URL da web para o IP do ESP32 e colocar todos os textos como visível, depois ele irá entrar em outro evento que é quando a web recebe texto, ele irá armazenar o JSON do ESP32 na nossa variável e depois só irá navegar dentro dela ajustando os textos.
Resultado do Projeto
Por fim esse foi o resultado obtido com nosso projeto.
Agradecemos sua Presença
Por fim, espero que tenham gostado e aprendido. Compartilhe com seus colegas e deixe um comentário de qual projeto deveria ser o próximo aqui no Blog da WJ Componentes!!
Enfim estarei deixando os arquivos do código-fonte e Fritzing, software e sites utilizados e deixarei também o GitHub da biblioteca utilizada.
Fique à vontade para tirar suas dúvidas nos comentários.
Software e Sites Utilizados
GitHub das Bibliotecas Utilizadas
Post Relacionados
Posts mais Recentes
- Acionando motor DC por meio do pino “Touch” do ESP-32Neste projeto, vamos explorar uma aplicação ainda mais dinâmica e… Leia mais: Acionando motor DC por meio do pino “Touch” do ESP-32
- Acendendo led RGB por meio do pino “Touch” do ESP-32No último post, exploramos o fascinante mundo dos pinos touch… Leia mais: Acendendo led RGB por meio do pino “Touch” do ESP-32
- Utilizando os Pinos touch do ESP32
Nesse projeto Vamos aprender a usar os pinos touch´s do… Leia mais: Utilizando os Pinos touch do ESP32 - Como Programar e Localizar o Endereço de uma Tela OLED I2C com Arduinoeste guia, vou levá-lo através dos passos para programar uma… Leia mais: Como Programar e Localizar o Endereço de uma Tela OLED I2C com Arduino
- GPS com ArduínoOlá, como estão? Você está com dificuldade com o seu… Leia mais: GPS com Arduíno
Julio Cesar Bonow Manoel
Cursando Engenharia da Computação pelo Centro Universitário Facens e atua no desenvolvimento de projetos na WJ Componentes. Participante da equipe de robótica Omegabotz.
Deixe um comentário