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" >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/