Tecnología Informática      Técnico en Instalaciones de Telecomunicaciones About

 Servidor web   con NodeMCU ( ESP8266 )

 

La finalidad de este tutorial es crear un servidor web dentro de la placa NodeMCU, para que sirva de control de algún dispositivo a distancia, como por ejemplo, un invernadero.

Pasaremos a explicar paso a paso, cada una de las etapas más importantes

 Servidor y clienteservidor usando nodemcu esp8266

Como vemos en la imagen,  vamos a preparar nuestra placa para que trabaje en modo servidor. Esto hace que , bajo una petición http que se formule desde un cliente ( tu dispositivo ), el nodeMCU muestre la información que contiene en su código.

En la parte derecha se muestra la información, donde se representa el estado del pin GPIO, la temperatura, humedad y presión.

Para facilitar el aprendizaje , vamos a hacerlo funcionar como dispositivo que encienda y apage un led, para luego incorporar los elementos de medida atmosférica

En el cliente vemos un texto con botones, etc. Esto es gracias a los archivos html y css que tenemos que incluir en la memoria flash del nodeMCU.

En resumidas cuentas

1º El servidor web controla un LED conectado al ESP8266 GPIO 2. Este es el LED del ESP8266  de la placa
2º La página del servidor web muestra dos botones: ON y OFF - para encender y apagar el GPIO 2;
3º La página del servidor web también muestra el estado actual de GPIO;
4º También utilizará un sensor BME280 para mostrar las lecturas del sensor (temperatura, humedad y presión).


1. Instalar la placa ESP8266 en Arduino IDE


Preparamos  el ESP8266 usando el IDE de Arduino, así que debes tener instalado los archivos necesarios para el  ESP8266.  Ya lo hicimos en la anterior práctica. Dejamos el enlace

Instalar la placa ESP8266 en Arduino IDE


2. Plugin para cargar el sistema de archivos


Para subir archivos al Sistema de Archivos Flash ESP8266 SPI (SPIFFS), usaremos el plugin Filesystem Uploader. Instala el plugin en tu IDE de Arduino:

Instalar el cargador del sistema de ficheros ESP8266 en Arduino IDE


3. Instalación de Librerías


Una librería es pequeño programa que contiene  una colección de funciones  para incluir en tu programa (sketch )  y que proporciona una cierta funcionalidad específica.

Una de las formas más fáciles de construir un servidor web usando archivos del sistema de archivos es usando la librería ESPAsyncWebServer, pero vamos a necesitar otras.

3.1 Instalación de la biblioteca ESPAsyncWebServer

A día de hoy, esta librería no está disponible para su descarga a través del gestor de librerías del IDE de Arduino. Lo vamos a hacer de forma manual

 1º Haga clic aquí para descargar la biblioteca de ESPAsyncWebServer.  Es un archivo comprimido que hemos obtenido de sus creadores ( ver ->https://github.com/me-no-dev/ESPAsyncWebServer-< )

2º Encontramos una carpeta zip, que la descomprimimos

3º La carpeta que obtenemos, renombrarla como ESPAsyncWebServer

4º Buscamos dónde está instalado el IDE de ardino, y vamos a la sección libraries ( librerias )

5º Dentro de esa carpeta, añadimos la carpeta renombrada  ESPAsyncWebServer


Otra forma es hacerlo directamente desde Programa ->Librerias -> Añadir libreria zip, pero tenemos que asegurarnos que se sube la librería sin la terminación master

Si salimos del IDE y entramos de nuevo, veremos que ya aparece la librería


3.2 Instalación de ESPAsyncTCP


La librería  ESPAsyncWebServer también necesita la librería ESPAsyncTCP para que pueda funcionar correctamente. Pasos para instalar la biblioteca ESPAsyncTCP:

Haga clic aquí para descargar la biblioteca ESPAsyncTCP.  Al igual que en caso anterior, al descomprimir la carpeta, vemos que acaba en master.

2º Descomprimimos, y llevamos la carpeta de nuevo a la carpeta librerias del IDE

3º Cambiar el nombre de la carpeta de ESPAsyncTCP-master a ESPAsyncTCP

También  se puede hacer como antes usando la herramienta de incluir la librería

Luego volveremos a incluir otras librerías para la estación meteorológica, pero por el momento, con esto es suficiente

4. Subiendo datos

A la hora de mostrar la página del servidor, tenemos dos archivos que son necesarios. El primero es un html donde se muestra la información que vemos en la primera imagen de este tutorial. El segundo archivo es una hoja de estilos css, que da forma a cada elemento del archivo html, por ejemplo, el color de los botones, el tamaño de las fuentes, etc

Una vez creado esos archivos, los tenemos que incluir dentro de una carpeta llamada "data", junto al archivo .ino del proyecto. Ver imagen

composicion archivos proyecto SPIFFS

 

Una vez que tenemos los archivos , los podemos subir utilizando la herramienta antes instalada Filesystem Uploader

Para hacer este paso, dejo el enlace con los dos  archivos ( html y css ) con nodemcu y uso de SPIFFS

Para subirlo, procedemos de la siguiente manera

1º Creamos un proyecto nuevo. No importa que esté vacio.

2º Lo guardamos en algún lugar de nuestro PC

3º Abrimos la carpeta que se ha creado, y bajamos el archivo anterior. descomprimimos y hacemos que la carpeta data esté junto a nuestro proyecto ( ver imagen de arriba )

 upload skecth

4º En la imagen superior se ve la ruta para subir los dos archivos. Nos debe dar un mensaje positivo si se han subido bien

 5º Creando el programa IDE

Por último, vamos a añadir en nuestro proyecto ( abierto antes ) el siguiente código
 

 /*
1º Parte del proyecto del servidor web
Adaptado de  Ruiz Santos (RandomNerdTutorials.com)
*/
// Importamos las librerías
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
// Sustituye los datos de tu red WIFI ( el nombre y la contraseña )
const char* ssid = "Nombre de la red";
const char* password = "Clave de la red WIFI";

// Puesta de LED GPIO
const int ledPin = 2;
// Para guardar el estado del LED
String ledState;

// Creamos el servidor AsyncWebServer en el puerto 80
AsyncWebServer server(80);

// Remplazamos el marcador con el estado del  LED
String processor(const String& var){
Serial.println(var);
if(var == "STATE"){
if(digitalRead(ledPin)){
ledState = "ON";
}
else{
ledState = "OFF";
}
// Imprimimos el estado del led ( por el COM activo )
Serial.print(ledState);
return ledState;
}
}
void setup(){
// Establecemos la velocidad de conexión por el puerto serie
Serial.begin(9200);
// Ponemos a  ledPin  como salida
pinMode(ledPin, OUTPUT);

// Iniciamos  SPIFFS
if(!SPIFFS.begin()){
Serial.println("ha ocurrido un error al montar SPIFFS");
return;
}

// conectamos al Wi-Fi
WiFi.begin(ssid, password);
// Mientras no se conecte, mantenemos un bucle con reintentos sucesivos
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
// Esperamos un segundo
Serial.println("Connecting to WiFi..");
}

Serial.println();
Serial.println(WiFi.SSID());
Serial.print("IP address:\t");
// Imprimimos la ip que le ha dado nuestro router
Serial.println(WiFi.localIP());

// Ruta para cargar el archivo index.html
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html", String(), false, processor);
});

// Ruta para cargar el archivo style.css
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/style.css", "text/css");
});

// Ruta para poner el GPIO alto
server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledPin, HIGH);
request->send(SPIFFS, "/index.html", String(), false, processor);
});

// Ruta para poner el GPIO bajo
server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledPin, LOW);
request->send(SPIFFS, "/index.html", String(), false, processor);
});

// Start server
server.begin();
}

void loop(){

}

A destacar dentro del código tenemos

1º procesador()
La función processor() atribuye un valor a los marcadores de posición que hemos creado en el archivo HTML. Acepta como argumento el marcador de posición y debería devolver una cadena que reemplazará al marcador de posición. La función processor() tiene la siguiente estructura,  donde añadimos  explicaciones ( siempre empezando con // para que no se ejecuten como código ) :

String processor(const String& var){
//Generamos la variable de cadena processor que además será una función
  Serial.println(var);
  //esta función primero verifica si el marcador de posición es el ESTADO que hemos creado en el archivo HTML.
{if(var == "STATE"){
//Si lo está, entonces, de acuerdo con el estado del LED, ponemos la variable ledState en ON u OFF. if(digitalRead(ledPin)){ ledState = "ON"; } else{ ledState = "OFF"; }
//Finalmente, se devuelve la variable ledState. Esto reemplaza el marcador de posición STATE con el valor de cadena ledState. Serial.print(ledState); return ledState; }

Ya funciona ?. Bueno ahora pasaremos a detallar algunas cosas importantes dentro del archivo html

6. Creando el archivo html

HTML requiere un curso aparte y este no es nuestro propósito. Veremos algunas cosas para que los alumnos se hagan una idea de la programación html y pueda modificar según nos interese. En la cabecera tenemos

<link rel="stylesheet" type="text/css" href="style.css">

La etiqueta <link> le indica al archivo HTML que está utilizando una hoja de estilo externa para formatear el aspecto de la página. El atributo rel especifica la naturaleza del archivo. que  en este caso es una hoja de estilo (  CSS ).

El atributo type se establece en "text/css" para indicar que es un archivo CSS .

 El atributo href indica la ubicación del archivo. Como el archivo CSS y  HTML están en la misma carpeta, sólo  se pone el nombre del archivo: style.css. Si style.css estuviese ubicado en otra carpeta como estilos, entonces deberiamos poner

<link rel="stylesheet" type="text/css" href="estilos/style.css">

Las etiquetas html empiezan con <> y acaban con </>, de esta forma , si aparece una p, es relativa a párrafo , o si tenemos una a, se refiere a un enlace. Veremos esta parte

<p>GPIO state<strong> %STATE%</strong></p>
<p>
<a href="/on"><button class="button">ON</button></a>
<a href="/off"><button class="button button2">OFF</button></a>
</p>

La primera línea escribe GPIO state y luego aparece una variable que se toma del programa que hay en el nodeMCU.. La variable %STATE% tomara el valor ON  o OFF

En la siguiente línea hay dos enlaces en dos botones. El primero lleva a la misma página pero con la terminación /on, de forma que si nuestra ip es 192.168.1.139, aparecerá en el navegador 192.168.1.139/on. Lo mismo para el siguiente botón

La siguiente parte consiste en tener acceso a nuestro dispositivo desde fuera de nuestra red. Para ello vamos a ver este

Tutorial para tener acceso a nuestra red local  desde Internet

Práctica. Una vez que tenemos proyecto  operativo, haremos las siguientes mejoras
  1. Bajar el editor de páginas web Nvu  o Kompozer. Editar los archivos index.html para cambiar el texto de Inglés a Español. Añadir en la parte inferior el equipo de trabajo
  2. Veremos que la página no tiene estilos ( No aparece los botones con colores, etc ). Investigar cómo se pone una línea en la cabecera del documento html para "llamar" a la hoja de estilos
  3. Con el manual Tutorial para tener acceso a nuestra red local desde Internet , hacer los cambios oportunos en el router de vuestra casa para tener acceso al nodeMCU desde Internet.
     

Como trabajo final , vamos a hacer un proyecto para desarrollar en casa

Proyecto final.  En grupo de dos y una vez que hemos realizado todas las actividades del NODEMCU, elegimos un trabajo que veamos interesante de aplicación dentro de las redes y domótica. Podemos tomar alguno de Internet, pero tenemos que aportar cambios que hagan ver dominio sobre éste dispositivo. El trabajo debe reunir los siguientes apartados
  1. Proyecto redactado de forma clara, reflejando cada paso que se hace para el desarrollo de nuestro trabajo. Debe ir acompañado por imágenes.
  2. Si  tenemos conexión de Internet ( porque tengamos el puerto abierto en el router de nuestra casa ), tenemos que hacer un video donde demostremos que no se está conectado en red local.
  3. Si no tenemos los sensores y queremos utilizar alguno del departamento, el listado de los que se pueden prestar son:

a) BMP280 modulo sensor presión barométrica

b)  Interruptor Reed switch magnetico abierto N-O

c) MQ135 MQ-135 Sensor calidad del aire

d) HCSR501 Modulo Sensor Detector de movimiento PIR HC-SR501

e) MQ-7 modulo CO sensor detector gas monóxido de carbono

 

Una vez completada esta primera parte, pasamos a incorporar el BME 280 para hacer nuestra estación meteorológica.

Ver -> Estación Meteorológica con NodeMCU

Bibliografia https://randomnerdtutorials.com/esp8266-web-server-spiffs-nodemcu/

Enlaces del  NodeMCU ( ESP 8266 )

  1. Teoría Básica del NodeMCU
  2. Conectarse a tu red local (LAN) desde Internet
  3. Servidor web con NodeMCU ( ESP8266 )
  4. Control temperatura Termo con NodeMcu y sensor DS18B20
  5. Obtener hora y fecha usando un servidor NTC

Diseño PCB Principios básicos de antenas

Ciclo de Grado Medio Instalaciones de Telecomunicaciones. Ies Mare Nostrum. Málaga