Neste tutorial vamos criar um web server com NodeMCU (ESP8266) e acessá-lo a partir de uma aplicação WEB (HTML5 + Bootstrap + Ajax) hospedada em um servidor na rede local.
Na Internet encontramos vários exemplos de como criar um web server com NodeMCU. No entanto, na maioria dos casos, a página HTML é gerada pelo próprio microcontrolador.
Neste post, vamos mostrar como criar um web server ESP8266 e acessá-lo de uma página hospedada em um servidor externo (Apache ou IIS) pela rede local.
Essa abordagem oferece muitas vantagens:
- Economizamos a memória do ESP, pois a página WEB ficará em um servidor mais robusto.
- Nossa aplicação WEB fica mais sofisticada, pois podemos agregar todos os recursos disponíveis ao ambiente que estamos utilizando como MVC, Banco de Dados, frameworks, etc.
O projeto com NodeMCU
Para variar, o nosso experimento consiste em ligar/desligar um LED do ESP8266 via Wifi através de uma página hospedada em um servidor Apache.
Ok, eu sei que você está cansado de ver aplicações acendedoras de LED, mas este exemplo pode ser facilmente adaptado para qualquer outro tipo de dispositivo que quiser, como relés, motores, sensores, etc.
Vejamos uma imagem da aplicação em execução:
Recursos necessários
Para realizar essa experiência vamos precisar dos seguintes componentes:
Lado do Microcontrolador:
- Placa NodeMCU ou equivalente (WEMOS, WiFiMCU, SparkFun Thing, etc.);
- IDE Arduino
Lado do servidor:
- Servidor WEB (Apache, NGINX, IIS, etc.). Sugiro o uWamp, servidor Apache/PHP/MySQL
- Bootstrap para a apresentação. No nosso caso, vamos acessar via CDN.
Criando Web Server ESP8266
Para programar a NodeMCU, vamos usar a própria linguagem e IDE do Arduino. Caso não esteja familiarizado com essa técnica, veja aqui um tutorial.
Nosso sketch vai realizar as seguintes operações:
- Conectar-se à rede wi-fi local;
- Criar um web server
- Aguardar as requisições de um cliente externo;
- Se a requisição contiver o parâmetro ONOFF, ligar o LED interno da placa;
- Gerar em HTML uma resposta padrão à requisição
- Voltar ao passo 3
Veja abaixo o código-fonte comentado:
#include <ESP8266WiFi.h>
// Preencha com os dados de autenticação do seu WiFi
const char* ssid = "login";
const char* password = "senha";
WiFiServer server(80);
void setup() {
delay(1000);
pinMode(LED_BUILTIN, OUTPUT); //Led interno da placa.
Serial.begin(9600); // Vamos usar para debug
// Conectando à rede WiFi
Serial.println();
Serial.println();
Serial.print("Conectando com: ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi conectado com sucesso");
// Startando o servidor
server.begin();
Serial.print("Servidor startado em ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
// Aguardando requisições do cliente
WiFiClient client = server.available();
if (!client) {
return;
}
// Leitura da requisição
Serial.print("Mensagem do cliente: ");
while(!client.available()) {
delay(1);
}
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Muda situação do LED, caso o parâmetro seja detectado
if (request.indexOf("ONOFF") != -1) {
digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));
}
//Resposta padrão
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("");
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><title>ESP8266 Web Server Exemplo</title></head>");
client.println("<body>ESP8266 Web Server Exemplo</body>");
client.println("</html>");
delay(1);
}
Criando a página WEB com Ajax
Nossa página web será formatada com Bootstrap e apresentará um botão que, quando clicado, irá disparar uma requisição Ajax.
A requisição Ajax vai chamar o endereço do nosso servidor NodeMCU passando o parâmetro para ligar/desligar o LED.
Código-fonte:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Acessando Web Server NodeMCU com Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function OnOff() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://192.168.0.31/LED=ONOFF");
xmlhttp.send();
}
</script>
</head>
<body>
<br/>
<div class="container" style="text-align: center;">
<div class="well">
<h2>Acessando Web Server NodeMCU com Ajax</h2>
<br/>
<a href="#" style="background-color: chartreuse"class="btn btn-default" role="button" onclick="OnOff();"><strong>Ligar/Desligar LED</strong></a>
</div>
</div>
</body>
</html>
Executando a aplicação:
Para executar a aplicação faça o seguinte:
- Copie o arquivo HTML para a pasta do seu servidor web. No meu caso é a pasta www.
- Suba o servidor Apache
- Suba o servidor do NodeMCU
- No browser, digite o endereço da nossa página html. No meu caso: http://localhost:8080/nodemcu_php.html
Conclusão
Isso é tudo. No próximo artigo veremos como enviar dados de sensores pelo ESP8266 para um banco de dados MySQL através de uma aplicação PHP.
Até lá!
Referências
https://hackaday.io/project/5150-arduino-ide-for-esp8266-quickstart-guide
http://www.instructables.com/id/Quick-Start-to-Nodemcu-ESP8266-on-Arduino-IDE/
Cara estava com a mesma ideia e tava me matando a dias, muito obrigado, isto vai me ajudar muito, eu gostaria de saber c vc fez o post sobre mandar dados do esp para um banco de dados, também to com a mesma ideia, c vc puder explicar toda a parte do lado banco de dados e php e também do lado do nodemcu desde já agradeço muito!!!
Olá Vidal!
Estou preparando um tutorial sobre envio de dados para o esp.
Os sensores que vou usar são de temperatura, corrente e tensão e o banco é o mysql.Logo, logo estará aqui no blog…
Me esclarece uma duvida?? eu sou fraco em html e nunca usei ajax, eu ja tenho uma pagina q sofri muito pra criar e nela pra ligar o rele eu chamo a pagina usando um popup so q tem o incomodo de aparecer o popup!! com o seu metodo :
function OnOff() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(“GET”, “http://192.168.0.31/LED=ONOFF”);
xmlhttp.send();
}
ele faz igual o popup abre uma pagina e mostra ,ou nao so manda a requisição sem mostrar a pagina?? caso nao mostre, como eu faria pra incorporar seu codigo na minha pagina ela eh .php ,
mais uma vez te agradeço pela atenção!!
Olá Vidal,
Esse código não chama outra página. Ele executa o comando e permanece na mesma página.
Para incorporar na sua página, use JavaScript.
Por exemplo, coloque um botão na sua página e capture o o evento onclick chamando essa função.
No código tem o exemplo de como fazer isso.
Abraço,
José Cintra
Boa tarde José.
Parabéns pelos seus artigos/projetos.
Você fez o artigo referido “envio de dados para o esp”?
Olá Leomar!
Pretendo escrever uma série de artigos sobre o NodeMCU. Mas só posso publicar quando estiverem bem testados.
Agora em Janeiro devem sair mais alguns tutoriais…
Olá veja se artigo te ajuda: https://josecintra.com/blog/esp8266-bancos-dados-requisicoes-http/
Bom dia… cara showw isso… fizemos isso na empresa pra abrir a porta…
Estou brincando agora com o sensor de tensão pra saber se a lampada está acesa ou não… pois estou fazendo ligação paralela…
Ai me surgiu uma dúvida, como eu faço pra “mandar” pra minha pagina web que a lâmpada está acesa?
NO caso do meu teste ele altera um json, o nodemcu le esse json e ve se está ON ou OFF…
Queria fazer exibir na web se a lâmpada está acesa ou apagada, porem não estou sabendo como fazer o nodemcu mandar pro meu servidor esse status…
Estava pensando em passar um get para meu servidor externo e nele receber o get e salvar o parâmetro no json assim vou saber…
O que sugere ???
Vlwww
Olá Rafael, Estou fazendo a mesma coisa que você, mas ainda não concluí o projeto.
No meu caso é monitorar um ar condicionado, mas estou usando uma lâmpada na fase de testes.
Acho que você está no caminho certo.
Assim que tiver progredido no projeto, te envio mais detalhes
Entrei para fazer a mesma pergunta do Rafael…
O que pensei não usar o .json e sim um banco de dados mesmo…
EX: crio uma tabela de Aparelhos
dentro dela tenho
LampadaSala
LampadaCozinha
Lampada…qlqcoisa (ou aparelho)….
Tenho tbm o sensor de tensão que o Rafael disse e já está funcionando me dizendo …. 0 = apagada e 1 = acesa
mais no meu mysql teria os campos
Status / Acao /
tipo dai quero pelo NodeMCU fazer assim
mando o status atual
0 é igual a Acao ? se for mantem o que ta feito
se não vc altera e execulta
a acao seria tbm 1 e 0 onde 0 é apagar e 1 acender
o nodeMCU ficaria lendo em um while somente o campo ACAO e fazendo o que ta nele …
será esse o caminho ?
mais não sei como mandar esses dados
Olá Paulo.
Assim que terminar o projeto que estou construindo, vou postar o código aqui.
Ele faz mais ou menos o que você quer. Estou usando PHP e MySQL.
Enquanto isso, vou te indicar um artigo que pode te ajudar com o código de envio dos dados pela Internet:
https://www.hackster.io/leoribg/using-nodemcu-board-to-send-data-to-devicehub-iot-platform-dccc3f
perfeito …. conseguiu fazer… tive que parar e não consigo usar uma logica =/
Olá José!
Meu caro, encontrei o seu blog procurando exatamente o que será o teu proximo artigo, acho. Mas de antemão gostaria de saber se tu me indicaria algum outro artigo que me ajudasse, tenho que enviar dados do para o NodeMCU, os dados estam no banco de dados e foram informados pelo usuario.
Desde já agradeço
Hugo, poderia informar qual BD está usando e qual linguagem? Seria PHP + MySQL?
boa tarde José!
compilei o codigo no mcu, ja esta com um ip na rede.
abre a pagina de exemplo,
criei a pagina em html no meu note com wamp,
alterei o codigo na parte do ip na função do get,
mas ele nao funcionou, o que poderia ser?
abraço
Lucas, poderia me passar mais detalhes? Ocorreu algum erro? Tentou digitar o endereço do servidor do Node direto no browser?
se eu entro no endereço do nodemcu ele aparece a msg configurada no código…porém se eu entro na página que criei e clico no botão chamando a função onoff como descrito nas instruções ele não faz nada…não altera o Led…
e parece que depois que eu clico no botão do php…o webserver do mcu para de responder no navegador…mas continua pingando
ja tinha escrito parece que nao publicou…
quando acesso o link do node ele fala que o servidor de exemplo esta ok, quando eu acesso a minha pagina php, ele nao faz nada..lembrando que alterei o codigo da pagina no lugar do IP, e mesmo assim ele nao reage ao comando Onoff
Olá lucas!
A sua página PHP está rodando no computador num servidor no localhost. Você precisa testar se esse servidor está no ar e o php funcionando. Outra coisa que precisa verificar qual é o pino do led interno, pois varia de modelo para modelo. Outra causa de erro é o Javascript.Se estiver uma vírgula faltando, não vai funcionar.
Você precisa testar separadamente. Faça pequenos programas específicos para esses testes.
Qualquer coisa fala aí…
como eu faço para fazer este procedimento acionando qualquer outra porta do ESP?
no arduino tem uma linha para declarar quem é quem ex;
// PROGRAMAÇÃO PADRÃO DO SISTEMA
const int rele1 = 22; // Rele 1 PA0
const int rele2 = 23; // Rele 2 PA1
no ESP não faz assim?
obrigado
abraço
Olá Lucas!
Sim, quando você programa o ESP pela IDE do Arduino, o estilo é o mesmo.
A diferença é que o ESP possui menos portas e os números são um pouco diferentes.
Veja aqui a configuração das portas: https://iotbytes.wordpress.com/nodemcu-pinout/
a proposito fiz o teste com a pagina acionando o arduino de um amigo e deu certo!!
Olá, minha placa ESP8266 NodeMCU não cabe na minha protoboard de 830 furos. Fica no limite dos furos de barramento, não sobrando espaço para trabalhar. Eu posso usar uma protoboard de 1660 furos, colocando a ESP8266 NodeMCU no meio da protoboard e usando os barramentos externos para alimentar? Estou iniciando agora na eletrônica e desde já agradeço pela atenção.
Ola Eliel.
Deve ser a NodeMCU V3.
Eu tenho uma dessas também. Não tem jeito. Ela não é “Breadboard Friendly”.
Eu deixo ela fora da protoboard e ligo os fios VCC e GND dela na protoboard nos barramentos laterais.
eu comprei um adaptador …
para ela não ficar jogada …
não passo o link aqui pq vai que o josé pensa que é propaganda
rsrsrsrs
mais se quiser te passo onde comprei
Paulo. Fique a vontade para divulgar produtos.
Pode ser útil para todos que estão aprendendo…
Eliel , com permissão do José Cintra
segue onde comprei
https://www.masterwalkershop.com.br/base-adaptador-para-nodemcu-v3
Paulo, valeu pela dica.
Muito boa essa base. Vou encomendar uma também…
José Cintra, muito obrigado pela grande ajuda, este post foi o mais direto e objetivo, obrigado.
Você conseguiu fazer o projeto de gravar os status no banco mysql, pois estou querendo aprender a desenvolver isto também?
Fico no aguardo
Olá Luiz. Grato. Pretendo publicar ainda este mês.
José Cintra, estou aguardando ansiosamente! hahaha 😀
Veja este artigo se ajuda: https://josecintra.com/blog/esp8266-bancos-dados-requisicoes-http/
Veja se este artigo te ajuda: https://josecintra.com/blog/esp8266-bancos-dados-requisicoes-http/
Irei olhar agora, muito obrigado pela atenção.
NOTA 10! Me salvou de um embrólio há umas boas semanas sem solução..Que Deus o conserve com esse espírito colaborador. Obrigado!
Boa noite jose cintra,
Ótimo explicação.
Gostaria de saber se é possível, o ESP chamar uma página em PHP, onde ela irá buscar (Pensei em fazer um onload no body e chamar a função do ajax) um dado no banco de dados, e o PHP ou o AJAX, retornar essa variável do banco para o ESP.
No caso o ESP irá atuar como Cliente e Servidor
Ola, muito bom o projeto !
liguei ele em uma porta do nodemcu D5 ligda em um rele e um pisca pisca e funcionou de inicio mas quando fica ligado algum tempo, algo em torno de 20 min , tento apertar o botao na pagina mas nao acende nem apaga e no serial monitor aparece: mensagem do cliente: (vazio)
e nao funciona mais, so volta a funcionar quando eu troco o nome da pagina que está em um servidor em um site meu, alguem sabe porque isso acontece?
Olá Juan, pode ser que a conexão expirou.
Se você pressionar F5, a página volta a funcionar?
Olá José, parabéns pelo artigo!!! Você conseguiu o retorno da requisição feita para o NodMCU?? estou apanhando pra ter o retorno do readyState == 4 e status ==200. Estou rodando a pagina com o XAMPP em localhost.