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:

1. Conectar-se à rede wi-fi local;
2. Criar um web server
3. Aguardar as requisições de um cliente externo;
4. Se a requisição contiver o parâmetro ONOFF, ligar o LED interno da placa;
5. Gerar em HTML uma resposta padrão à requisição
6. Voltar ao passo 3

Veja abaixo o código-fonte comentado:

#include 
// Preencha com os dados de autenticação do seu WiFi 
const char* ssid = "ivan"; 
const char* password = "48804880";
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("");
  client.println("");
  client.println("");  
  client.println("ESP8266 Web Server Exemplo");
  client.println("");
    
  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:

  
    

			

				
Acessando Web Server NodeMCU com Ajax
				
Ligar/Desligar LED
			
		
	

Executando a aplicação:

Para executar a aplicação faça o seguinte:

1. Copie o arquivo HTML para a pasta do seu servidor web. No meu caso é a pasta www.
2. Suba o servidor Apache
3. Suba o servidor do NodeMCU
4. 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/

O post ESP8266 – Acessando Web Server Nodemcu com Ajax apareceu primeiro em BlogDoJoséCintra.