Servidor web ESP8266 con Arduino IDE

El ESP8266 es una potente placa de desarrollo que ha revolucionado el mundo de la IoT. En este artículo, exploraremos cómo configurar y utilizar un servidor web con el ESP8266 utilizando el Arduino IDE. Descubre cómo aprovechar al máximo esta increíble herramienta para tus proyectos de Internet de las Cosas. ¡No te lo pierdas!

En este proyecto, creará un servidor web independiente con un ESP8266 que puede alternar dos LED utilizando el IDE de Arduino. Este servidor web ESP8266 responde a dispositivos móviles y se puede acceder a él mediante cualquier dispositivo que tenga un navegador en su red local.

Para obtener instrucciones más detalladas sobre cómo crear un servidor web y una explicación del código, consulte esta publicación “Servidor web ESP8266 paso a paso”.

Si desea obtener más información sobre el módulo ESP8266, comience leyendo mi guía de introducción al módulo WiFi ESP8266.

Si te gusta el ESP y quieres hacer más proyectos, puedes leer mi libro electrónico “Home Automation with ESP8266”.

¡Vamos a empezar!

Primero, mira el vídeo tutorial.

Cargando código ESP8266

Después de instalar el complemento ESP8266 para Arduino IDE (Cómo instalar la placa ESP8266 en Arduino IDE), vaya a Herramientas y seleccione “Módulo ESP8266 genérico“.

Copie el siguiente boceto en su IDE de Arduino. Reemplace el SSID y la contraseña con sus propias credenciales de red.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Después de modificar el boceto, cárguelo en su ESP8266 (si no puede cargar el código en su ESP8266, consulte esta guía de solución de problemas).

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

// Load Wi-Fi library
#include <ESP8266WiFi.h>

// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output5, LOW);
  digitalWrite(output4, LOW);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();         
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == 'n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name="viewport" content="width=device-width, initial-scale=1">");
            client.println("<link rel="icon" href="data:,">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 5  
            client.println("<p>GPIO 5 - State " + output5State + "</p>");
            // If the output5State is off, it displays the ON button       
            if (output5State=="off") {
              client.println("<p><a href="/5/on"><button class="button">ON</button></a></p>");
            } else {
              client.println("<p><a href="/5/off"><button class="button button2">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 4  
            client.println("<p>GPIO 4 - State " + output4State + "</p>");
            // If the output4State is off, it displays the ON button       
            if (output4State=="off") {
              client.println("<p><a href="/4/on"><button class="button">ON</button></a></p>");
            } else {
              client.println("<p><a href="/4/off"><button class="button button2">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != 'r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Ver código sin formato

Sube el código a ESP8266-01

Si está utilizando un ESP8266-01, necesitará uno programador FTDI para cargar el código. Conecte el ESP8266 al programador FTDI como se muestra en el siguiente esquema.

Dirección IP ESP8266

Abra el monitor serie Arduino con una velocidad de baudios de 115200.

• Si está utilizando ESP8266-01, conecte GPIO 0 a VCC y reinicie su placa.
• Si usa ESP8266-12E, simplemente presione el botón RESET.

Después de unos segundos, debería aparecer la dirección IP del ESP8266.

Piezas requeridas

Aquí está el hardware que necesita para completar este proyecto:

• ESP8266 – leer Las mejores placas de desarrollo Wi-Fi ESP8266
• 2x LED
• 2 resistencias de 330 ohmios (También funcionan 220 ohmios u otros valores)
• tablero de circuitos
• Cables de puente

Si tienes un ESP8266-01usted necesita uno programador FTDI para cargar el código.

Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!

Circuito final

Siga el siguiente diagrama esquemático para construir el circuito que desea controlar. Un LED conectado a GPIO4(D2) y otro conectado a GPIO5(D1).

Si está utilizando ESP8266-01, use el siguiente diagrama esquemático como referencia, pero necesita cambiar la asignación de GPIO en el código (en GPIO2 Y GPIO 0).

demostración

Para la demostración final, abra cualquier navegador en un dispositivo conectado al mismo enrutador que su ESP8266. Luego ingrese la dirección IP del ESP8266 y haga clic en «Entrar».

Ahora presione los botones en su servidor web para controlar los GPIO ESP8266.

Resumen

Para obtener una explicación detallada de cómo funciona el código del servidor web, consulte este tutorial: Guía paso a paso del servidor web ESP8266

Si le gusta el ESP8266, asegúrese de consultar nuestros proyectos más populares:

• Domótica con ESP8266 (libro electrónico)
• Tutorial del servidor web ESP8266 paso a paso
• Botón WiFi ESP8266: clon DIY del botón Amazon Dash
• Tarea diaria ESP8266: publicar valores de temperatura en ThingSpeak
• ESP8266 pronóstico del tiempo
• Pantalla Nextion con ESP8266: interfaz de usuario con pantalla táctil para Node-RED

Gracias por leer.

PD: Si te quedas atascado en este tutorial, asegúrate de leer «Guía de solución de problemas de ESP8266“

Servidor web ESP8266 con Arduino IDE

En este proyecto, crearás un servidor web independiente con un ESP8266 que puede activar dos LEDs utilizando Arduino IDE. Este servidor web ESP8266 es compatible con dispositivos móviles y se puede acceder desde cualquier dispositivo con un navegador en tu red local.

Preguntas frecuentes:

1. ¿Cómo se puede crear un servidor web con ESP8266 y Arduino IDE?

Para crear un servidor web con ESP8266 y Arduino IDE, primero necesitas tener instalado el complemento ESP8266 para Arduino IDE. Luego, puedes utilizar el código proporcionado en el tutorial mencionado en este enlace para cargar el código en tu ESP8266.

2. ¿Qué se necesita para completar este proyecto?

Los materiales necesarios para completar este proyecto incluyen un módulo ESP8266, dos LEDs, resistencias de 330 Ohm, una protoboard y cables de puente. Si estás utilizando un ESP8266-01, también necesitarás un programador FTDI para cargar el código.

3. ¿Cómo se accede al servidor web creado con ESP8266?

Para acceder al servidor web creado con ESP8266, simplemente abre cualquier navegador desde un dispositivo conectado a la misma red que tu ESP8266. Luego, ingresa la dirección IP del ESP8266 y presiona Enter. Puedes ver más detalles sobre la dirección IP en el tutorial mencionado aquí.

Conclusión

Para obtener una explicación más detallada sobre el funcionamiento del código del servidor web, te recomiendo revisar el tutorial completo en este enlace. Si te interesa seguir realizando proyectos con ESP8266, puedes consultar nuestro eBook sobre Automatización del Hogar utilizando ESP8266.

Referencias Externas:

• Tutorial paso a paso de Servidor web ESP8266
• Guía de inicio para el módulo ESP8266
• eBook sobre Automatización del Hogar con ESP8266