En este artículo te mostraré cómo configurar la tarjeta NodeMCU como punto de acceso, AP o SoftAP para poder conectarte a ella usando WiFi y pode consultar un web server.
Dentro de la tarjeta vamos a “embeber” un servidor web, que no es otra cosa más que responder con HTML a las peticiones, pero podemos modificar ese HTML ya que tenemos el lenguaje C++ en la tarjeta.
De hecho eso hacen todos los lenguajes de programación del lado del servidor: leen peticiones y modifican HTML para mostrarlo.
Esto abre un mundo de posibilidades, pues podremos hacer bastantes cosas, pero comencemos con lo básico y es convertir la tarjeta en un servidor web.
Nota: si tú no quieres crear una red WiFi y solo quieres crear el servidor web para que se conecte a tu red WiFi (de modo que puedas acceder a él en tu red local con su IP), mira este tutorial que a su vez es más fácil.
Lecturas recomendadas
Te recomiendo configurar tu entorno con PlatformIO y después hacer el Hola mundo. Si ya has probado lo básico con esta tarjeta entonces vamos al tutorial.
Configuración de la red y el servidor web
Vamos a crear un softAP. Necesitamos definir la IP, puerta de enlace, máscara de subred, SSID (nombre de la red) y contraseña del punto de acceso.
También vamos a crear un servidor web que escuchará en el puerto 80. Todo eso se define en algunas constantes:
const char *NOMBRE_RED = "Parzibyte",
*CLAVE_RED = "00000000"; // Son 8 ceros
const int PUERTO = 80;
IPAddress ip(192, 168, 1, 1);
IPAddress puertaDeEnlace(192, 168, 1, 1);
IPAddress mascaraDeRed(255, 255, 255, 0);
ESP8266WebServer servidor(PUERTO);Antes de iniciar el punto de acceso necesitamos definir algunas funciones manejadoras.
Funciones del servidor
Podemos hacer que, dependiendo de la ruta que se consulte al wifi de la esp8266 se realice algo. Por ejemplo, si visitan la ruta “encender” se puede encender una bombilla, y si visitan la ruta “apagar” se puede apagar.
Por el momento solo vamos a escuchar a la raíz / y también vamos a manejar las rutas que no se encuentren, es decir, mostrar el error 404.
Si has programado con la web y los enrutadores de la misma, esto se te hará familiar. Tenemos dos funciones:
/*
Definimos funciones que serán invocadas cuando la URL solicitada
cumpla con cierta característica
*/
void rutaRaiz()
{
const char *HtmlRespuesta = "<h1>ESP8266 como servidor web</h1>"
"<p>Podemos tener código HTML</p>"
"<a href='https://parzibyte.me/blog'>By parzibyte</a>";
servidor.send(200, "text/html", HtmlRespuesta);
}
void rutaNoEncontrada()
{
servidor.send(404, "text/plain", "404");
}La más importante es la que maneja la raíz. Creamos una respuesta HTML en una string, misma respuesta puede ser concatenada con variables y ser creada a partir de funciones, comparaciones, etcétera.
Para responder invocamos al método send que recibe el código HTTP (200 porque es de OK, encontrado), el tipo de respuesta (que será html) y finalmente el cuerpo.
También tenemos la función rutaNoEncontrada que envía el texto 404 así como el código HTTP 404.
Encender AP y servidor web
En el método setup vamos a crear el punto de acceso, iniciar el servidor y definir las funciones que se llamarán dependiendo de una ruta.
Fíjate en servidor.on, pues ahí definimos las ruta solicitada y la función. Después, el servidor comienza a “escuchar” con begin.
void setup()
{
// Configurar como un access point
WiFi.softAP(NOMBRE_RED, CLAVE_RED);
WiFi.softAPConfig(ip, puertaDeEnlace, mascaraDeRed);
delay(100);
// Configuramos la ruta y la función que responderá a la solicitud de dicha ruta
servidor.on("/", rutaRaiz);
servidor.onNotFound(rutaNoEncontrada);
// Empezar a escuchar
servidor.begin();
}Ahora, para manejar las peticiones, dentro del loop invocamos a servidor.handleClient y eso es todo:
// En el loop manejamos al cliente conectado y eso es todo ;)
void loop()
{
servidor.handleClient();
}
Código completo
Todo el código queda como se ve a continuación:
/*
Programado por Luis Cabrera Benito
____ _____ _ _ _
| _ \ | __ \ (_) | | |
| |_) |_ _ | |__) |_ _ _ __ _____| |__ _ _| |_ ___
| _ <| | | | | ___/ _` | '__|_ / | '_ \| | | | __/ _ \
| |_) | |_| | | | | (_| | | / /| | |_) | |_| | || __/
|____/ \__, | |_| \__,_|_| /___|_|_.__/ \__, |\__\___|
__/ | __/ |
|___/ |___/
Blog: https://parzibyte.me/blog
Ayuda: https://parzibyte.me/blog/contrataciones-ayuda/
Contacto: https://parzibyte.me/blog/contacto/
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char *NOMBRE_RED = "Parzibyte",
*CLAVE_RED = "00000000"; // Son 8 ceros
const int PUERTO = 80;
IPAddress ip(192, 168, 1, 1);
IPAddress puertaDeEnlace(192, 168, 1, 1);
IPAddress mascaraDeRed(255, 255, 255, 0);
ESP8266WebServer servidor(PUERTO);
/*
Definimos funciones que serán invocadas cuando la URL solicitada
cumpla con cierta característica
*/
void rutaRaiz()
{
const char *HtmlRespuesta = "<h1>ESP8266 como servidor web</h1>"
"<p>Podemos tener código HTML</p>"
"<a href='https://parzibyte.me/blog'>By parzibyte</a>";
servidor.send(200, "text/html", HtmlRespuesta);
}
void rutaNoEncontrada()
{
servidor.send(404, "text/plain", "404");
}
void setup()
{
// Configurar como un access point
WiFi.softAP(NOMBRE_RED, CLAVE_RED);
WiFi.softAPConfig(ip, puertaDeEnlace, mascaraDeRed);
delay(100);
// Configuramos la ruta y la función que responderá a la solicitud de dicha ruta
servidor.on("/", rutaRaiz);
servidor.onNotFound(rutaNoEncontrada);
// Empezar a escuchar
servidor.begin();
}
// En el loop manejamos al cliente conectado y eso es todo ;)
void loop()
{
servidor.handleClient();
}
Conectar al AP y visitar página
Ahora sube el código a la tarjeta, después conecta tu teléfono o computadora a la red recién creada. Debe aparecer como una red WiFi completamente normal.
Abre el navegador y visita la IP configurada previamente que, si no modificaste, es 192.168.1.1; se debe ver lo siguiente:
¡Enhorabuena! tenemos un servidor web embebido en nuestra tarjeta. Con esto podemos hacer miles de cosas.
En próximos tutoriales te mostraré cómo encender y apagar un LED usando este servidor, y también vamos a explorar cómo convertirlo en cliente.
