Wi-Fi es una tecnología de comunicación que permite la comunicación inalámbrica utilizando las ondas de radiofrecuencia. El alcance es de unos 100-150 metros, y nos permitirá realizar proyectos de IoT.
Comparativa básica Wi-Fi - Bluetooth:
La placa ESP32 STEAMakers incorpora conectividad WiFi sin necesidad de añadir ningún periférico o shield. El mismo microcontrolador implementa el hardware y software compatible con redes WiFi 802.11 b/g/n de 2,4 GHz (soporta WEP/WPA/WPA2/WAPI).
Por tanto, con nuestra tarjeta ESP32 Plus STEAMakers solo nos podemos conectar a redes de 2,4 GHz y no nos podemos conectar a las nuevas redes de 5 GHz.
Nota importante: cuando utilizamos la comunicación WiFi, la placa ESP32 STEAMakers deshabilita internamente el ADC2, por lo cual no funcionan las entradas A0 y A1 como entradas analógicas.
Desde ArduinoBlocks encontramos todos los bloques disponibles dentro de la categoría Comunicaciones, en el apartado de WiFi/IoT.
Ahora veremos los tipos de conexión que podemos realizar utilizando la tecnología wifi.
1. Conexión a una red Wifi como cliente (modo cliente/estación)
1.1. Conexión a través de DHCP (Dynamic Host Configuration Protocol)
Esta opción es la más habitual. Por defecto, una vez conectados a la red obtendremos la configuración de red (IP, puerta de enlace, etc.) de forma automática (suponiendo que hay un router que lo hace de forma correcta en la red). Si todo es correcto, tendremos acceso a nuestra red WLAN y conexión a internet a través del router.
Reto 1.1: Conexión a una red wifi
El primer programa que haremos es un programa sencillo que nos permitirá conectarnos a una red Wifi y comprobar si se ha realizado la conexión enviando por el puerto serie (Consola) la dirección IP asignada.
Podemos observar la dirección IP y, por tanto, que se ha establecido la comunicación:
También podemos ver otra serie de datos de nuestra conexión. Desde el menú desplegable del bloque, podemos obtener los siguientes datos:
● Dirección IP
● Máscara de subred
● Puerta de enlace
● Nombre del host
● Dirección MAC
● WiFi-SSID
● WiFi-RSSI
1.2. Conexión con IP estática
Antes de empezar, hacemos una breve explicación de qué es una dirección IP y sus principales características.
Una dirección IP es una serie de números que se asignan a un determinado dispositivo tipo ordenador, impresora, teléfono móvil, tableta o router, etc. que se conecta a una red. Esta dirección sirve para identificar la identidad y la ubicación de cualquier dispositivo que sea capaz de utilizar una red en concreto, es decir, una especie de dirección virtual en la que enviar y recibir información.
Existen dos tipos de direcciones IP, como IPv4 e IPv6. Las IPv4 constan de cuatro números que van de 0 al 255, separados por puntos, mientras que las IPV6 son de ocho grupos de cuatro dígitos hexadecimales y se representan separados por los dos puntos.
Ejemplo de ipconfig:
Existen dos tipos de IP: públicas y privadas.
● IP pública: aquella que tiene un dispositivo al conectarse a un router y es la misma para todos los que estén en esa misma red.
● IP privada: la que tiene cada dispositivo dentro de una red local y con la que se le puede identificar para saber quién es.
También están las direcciones IP estáticas y dinámicas:
● IP dinámicas: aquellas que se asignan de forma aleatoria a nuestro equipo cada vez que se conecta. Es decir, no siempre tendremos la misma dirección IP, siendo diferentes cada vez que conectamos.
● IP estáticas: es una dirección IP fijada manualmente a un dispositivo, que no cambia con el tiempo, a diferencia de una IP dinámica que se puede modificar.
Por tanto, en algunos casos nos puede interesar que nuestro dispositivo tenga una IP fija dentro de la red y no depender del router (servidor DHCP) para que nos asigne cada vez una IP diferente a cada conexión a la red.
Por ejemplo, en casos en que nuestro dispositivo sea un servidor web y necesitamos conectarnos a otros dispositivos, o para redes donde el servicio DHCP de IP automática no está activado. Para ello utilizamos el bloque de configuración de IP estática que permite asignar al dispositivo una IP y configuración básica de red de forma manual:
Dirección IP: La dirección que queremos dentro de la red a la que nos conectaremos. En un router doméstico uno de los rangos de IP más habituales es 192.168.0.X o 192.168.1.X, siendo la dirección 192.168.0.1 la del router por defecto, y el rango DHCP (las IPs de los dispositivos a los que se les asigna automático) suele empezar en la 192.168.0.100 en adelante (101, 102, …). Por eso, es recomendable, en primer lugar, saber si existen otros dispositivos con IP fija en la red y hacer un listado de dispositivos e IPs para evitar duplicados de IPs (error en la red). Y, por tanto, las IP fijas por seguridad deberían estar fuera del rango del DHCP (menor que la 100). Recomendación en este ejemplo: poner una IP entre la 2 y la 99 para no tener conflicto con la IP del router ni con el rango de IPs asignadas automáticamente a otros dispositivos con el DHCP. También podemos utilizar un IP scanner o el comando ping para saber si la IP da respuesta. Con el comando ipconfig (o ifconfig en GNU/Linux) podemos tener información sobre nuestra red.
Máscara de subred: Separa la parte de la red y los dispositivos dentro de la dirección IP. En el ejemplo hemos dejado la máscara de 24 bits de red y 8 bits de dispositivos por defecto en la mayoría de redes LAN domésticas.
Puerta de enlace: Es la IP mediante la que podemos acceder a otras redes (internet), en nuestro caso debemos poner la IP del router.
DNS: Son dos direcciones IP de servidores DNS en internet para resolver nombres de dominios. Podríamos utilizar la dirección IP del router, aunque en el ejemplo vemos las IPs públicas de los servidores DNS de Google.
Reto 1.2: Conexión a una red wifi con IP estática
Reto de ampliación:
Simular un ipconfig /all por el puerto serie. En el resultado deberían aparecer como mínimo: @MAC, @IP, la máscara y la puerta de enlace, como en el siguiente ejemplo:
En algún caso, si no tenemos una red Wifi donde conectarnos, el ESP32 STEAMakers es capaz de crear su propia red Wifi. Significa que crea un punto de acceso donde nos podemos conectar con otros dispositivos de red (portátil, tableta, móvil, otros ESP32 STEAMakers, etc.).
Hay que tener en cuenta que al crear un punto de acceso Wifi de esta forma, podemos conectar, por ejemplo, nuestro móvil al nuevo Wifi creado, pero no tendrá conexión a internet con esta conexión, simplemente es una forma de enlazar inalámbrica a dos (o más) dispositivos para intercambiar información.
Para crear un punto de acceso Wifi utilizaremos el siguiente blog donde configuraremos:
● SSID: nombre de la nueva red que vamos a crear.
● Clave: clave para conectarse a la nueva red. (Mínimo 8 caracteres, si no no se hará la configuración)
● Dirección IP: dirección de este nuevo punto de acceso (del dispositivo).
● Máscara de red: por defecto 255.255.255.0
● Puerta de enlace: si tenemos conexión con otro dispositivo a la red que nos dé acceso a Internet o a otra red, podemos poner la IP como puerta de enlace, si no dejamos la misma del dispositivo.
Por defecto se pueden conectar 4 dispositivos a la red generada por el ESP32, aunque se puede cambiar el número máximo de estaciones que se pueden conectar de forma simultánea entre 0 a 8 (pero sólo lo podremos hacer con el IDE de Arduino, ¡NO con arduinoblocks!). Cuando el número máximo se ha alcanzado, cualquier otra estación que se quiera conectar se verá forzada a esperar hasta que alguna estación conectada se desconecte.
Reto 2.1: Encontramos la bola del Dragón
Para este reto necesitamos dos placas ESP32 STEAMakers.
Configuración placa 1: Punto de acceso wifi
Esta placa hará de punto de acceso y, por tanto, creará una nueva red wifi:
Configuración placa 2: El radar
Ésta se conecta a la red creada anteriormente y recibe su potencia de señal wifi:
RSSI (Received Signal Strength Indicator) indica la potencia de la señal recibida por un dispositivo en una red inalámbrica. Cuanto más cerca de los 0 dBm más fuerte es la señal, y cuanto más cerca de los -100 dBm más débil es la señal.
Aquí una tabla indicativa de los valores de potencia:
Conectividad WiFi: NTP
1. ¿Qué es NTP?
2. ¿Cómo funciona NTP?NTP es el acrónimo de Network Time Protocol, un protocolo de red que se utiliza para sincronizar los relojes de los ordenadores y dispositivos electrónicos en una red con una fuente horaria precisa, tales como un servidor de tiempo. El objetivo de NTP es garantizar que todos los dispositivos de una red compartan la misma hora, con un margen de error muy pequeño.
1) Fuentes de tiempo: NTP obtiene la información de tiempo de una fuente fiable, tales como:
● Relojes atómicos: Los servidores de tiempo suelen estar sincronizados con relojes atómicos extremadamente precisos.
● Satélites GPS: Los sistemas GPS también proporcionan información horaria precisa.
2) Jerarquía de estratos:
Los servidores NTP se clasifican en estratos, según su proximidad a la fuente horaria original (reloj primario).
● Stratum 0: Son las fuentes de tiempo primarias (relojes atómicos, GPS).
● Stratum 1: Son servidores que reciben la información directamente de fuentes Stratum 0.
● Stratum 2 y superiores: Dispositivos que obtienen el tiempo de servidores Stratum 1 y lo propagan.
3) Sincronización:
3. ¿Por qué es importante NTP?1. El dispositivo (cliente) pide la hora al servidor NTP:
● El dispositivo envía una petición al servidor NTP preguntando qué hora es.
2. El servidor NTP responde:
● El servidor NTP le envía la hora exacta al dispositivo.
3. Corrección de la latencia:
● Debido a que existe un pequeño retraso (latencia) entre el momento en que el servidor envía la respuesta y el momento en que el cliente la recibe, NTP calcula este retraso.● El retraso se calcula midiendo:
○ El tiempo que ha tardado el mensaje de ida (cliente → servidor).
○ El tiempo que ha tardado el mensaje de vuelta (servidor → cliente).
● A partir de esto, NTP ajusta la hora para tener en cuenta este retraso y asegurar que el reloj del dispositivo sea lo más preciso posible.
4. El cliente ajusta su reloj:
● Una vez calculada la hora exacta, el dispositivo ajusta su reloj por sincronizarse con el servidor.
● Coordinación en redes: Muchas aplicaciones necesitan que los dispositivos compartan el mismo tiempo (servidores, bases de datos, sistemas distribuidos, etc.).
● Seguridad: Protocolos como TLS o servicios como el registro de eventos dentro de un sistema dependen de un tiempo sincronizado para validar certificados y controlar los logs.
● Control de procesos: En industrias como la banca, las telecomunicaciones o el comercio electrónico, tener un registro preciso del tiempo es crítico.
Reto 1 - Obtener la fecha y la hora de Internet.
Mostrar por la pantalla Oled cada minuto:
- La fecha
- La hora
- La temperatura
- La humedad
Reto de ampliación:
Semejante a lo anterior pero ahora, hacer un registro cada minuto de la temperatura y la humedad en un archivo CSV que se guardará en la tarjeta uSD.
Después de grabar varios datos, podemos extraer la tarjeta y leerla con algún lector de tarjetas, o bien también podemos hacer un nuevo programa para volcar la información del archivo por el puerto serie:
Conectividad WiFi: Servidor web
0. IntroducciónUn servidor web es un sistema (hardware y software) que escucha peticiones HTTP hechas por cualquier cliente (como navegadores, aplicaciones u otros servidores) y responde enviando recursos como páginas web, archivos o datos, habitualmente a través de los puertos 80 (HTTP) o 443 (HTTPS).
La placa ESP32 STEAMakers permite implementar un servidor web de forma sencilla y potente. Un servidor web permite “escuchar” clientes e intercambiar información mediante el protocolo HTTP. Por defecto un servidor web “escucha” en el puerto 80.
El cliente web por defecto es el navegador web, y en la dirección (url) indicamos el servidor al que nos conectamos. (URL: Uniform Resource Locator)
Formato url (petición http / http request):
Protocolo Servidor (host) Puerto Petición Parámetros http:// www.google.es :80 /search ?client=firefox&q=esp32+steamakers
http://www.google.es/search?client=firefox&q=esp32+steamakers
La respuesta puede ser en cualquier formato:
Ejemplos de respuestas desde el servidor web (lo que nos devuelve el servidor a la petición):
a) Texto plano sin formato
b) HTML: formato estándar para visualizar contenido web en un navegador
c) JPG, PNG, … : formatos de imágenes
d) CSV: formato de datos separados por comas.
Códigos de estado en la respuesta:
● Respuestas informativas (100–199),
● Respuestas satisfactorias (200–299),
● Redirecciones (300–399),
● Errores de los clientes (400–499),
● y errores de los servidores (500–599).
Los más utilizados:
200 OK La solicitud ha tenido éxito. El significado de un éxito varía según el método HTTP.
400 Bad Request Esta respuesta significa que el servidor no ha podido interpretar la solicitud dada una sintaxis inválida.
401 Unauthorized Es necesario autenticar para obtener la respuesta solicitada. Esta es similar a 403, sin embargo, en este caso, la autenticación es posible.
403 Forbidden El cliente no tiene los permisos necesarios para cierto contenido, por lo que el servidor está rechazando otorgar una respuesta apropiada.
404 Not Found El servidor no pudo encontrar el contenido solicitado. Este código de respuesta es uno de los más famosos dada su alta ocurrencia en la web.
500 Internal Server Error El servidor ha encontrado una situación que no sabe cómo manejarla.
1. Configuración inicial de un servidor web
Reto 1.1: Nuestro primer servidor web
Consultamos la IP asignada desde la consola. En este caso la 192.168.1.62:
En un explorador web, indicamos la IP y nos mostrará el mensaje:
En este ejemplo, la respuesta se compone de 3 partes importantes:
Código: 200 - Código de respuesta HTTP OK.
Content-Type: tipo de contenido que se enviará, normalmente texto/html, pero podría ser texto/CSV, texto/xml, etc.
Contenido: el contenido tal y como se envía, para hacerlo bien debería ser texto formateado en HTML. Haciendo un abuso de la capacidad de los navegadores actuales para procesar casi cualquier tipo de contenido “mal formateado” enviamos un sencillo texto de saludo.
Reto 1.2: Damos nombre al servidor
Qué ocurre si no queremos o no podemos configurar una IP de forma estática o, a pesar de configurarla preferimos dar un nombre a nuestro servidor para poder acceder y no haber ¿de recordar la dirección IP? La respuesta es: mDNS
mDNS
mDNS (Multicast DNS) es un protocolo que permite que dispositivos en una misma red local se encuentren y se comuniquen sin necesidad de un servidor DNS central. Es como una "agenda telefónica" automática para redes locales.
Cómo funciona:
Los dispositivos envían peticiones a toda la red (vía multicast) preguntando quién es un dispositivo específico.
Los dispositivos responden diciendo su nombre y dirección IP.
Utilizamos el bloque:
Ejemplo de configuración del nombre proves.local:
Accedemos desde el explorador web, pero esta vez indicando el nombre proves.local:
Cuando la ESP32 se conecta a Internet, puede enviar y recibir información utilizando el protocolo HTTP (HyperText Transfer Protocol). Este protocolo es como el lenguaje que utilizan los dispositivos para comunicarse a través de la red, como cuando un navegador web accede a una página o una aplicación envía datos a un servidor.
Una solicitud HTTP es como una "petición" que un dispositivo hace a otro a través de una red. Funciona así:
1. Un dispositivo (cliente) envía una solicitud al servidor.
2. El servidor procesa la solicitud y responde con datos (por ejemplo, un archivo, un mensaje, o una página web).
Tipos principales de solicitudes HTTP:
GET:
Se utiliza para solicitar datos al servidor.
Ejemplo: Cuando visitas http://example.com, estás haciendo una solicitud GET para obtener la página web.
POST:
Se utiliza para enviar datos al servidor.
Ejemplo: Cuando envías un formulario con un nombre y contraseña.
Las peticiones HTTP las haremos normalmente desde un navegador, poniendo la IP del nuestro dispositivo en la barra de direcciones con el protocolo http.
El formato de la URL que podemos solicitar en nuestra ESP32 STEAMakers es:
http://direccionip/accion?parametros
● La dirección IP es la que tenga el dispositivo, como hemos visto anteriormente en este ejemplo en mi red doméstica la IP es 192.168.1.62 (variará en cada red, y según el DHCP asigne en cada momento o si la ponemos de forma fija). También podemos utilizar el nombre DNS configurado con el protocolo mDNS
● La acción (opcional) será la web u orden que queremos pedir en el servidor. En un servidor web real (éste es real, pero nos referimos a uno tradicional tipo Apache, etc…) sería el documento del servidor que estamos solicitando (ejemplo: index.html, index.php, guardadades.jsp, etc.).
● Los parámetros (en este caso parámetros tipo GET) son datos adicionales que damos al servidor normalmente como información extra a la acción solicitada. Los parámetros GET son opcionales, siempre van después del símbolo “?” y se forman con pares “clave=valor” separados entre ellos por “&”.
Reto 2.1: Solicitamos diferentes acciones en el servidor http
Desde el explorador web, iluminamos de color rojo o azul el led RGB según la acción que solicitemos.
Por otra parte, deberíamos añadir otra respuesta cuando se solicite una acción no válida. Por ejemplo, si pido la acción de arrancar verde cuando sólo tengo implementadas las acciones de arrancar rojo o azul debería indicar un error.
Un posible programa final sería:
Reto 2.2: Envío de acciones con parámetros al servidor http
Basándonos en la idea del ejemplo anterior, haremos uso de los parámetros GET para permitir que nuestro servidor web sea capaz de poner en marcha el led RGB de color rojo o azul pero programado dentro de la misma acción. El parámetro que enviamos indicará de qué color queremos encender el led RGB.
Con los bloques “valor del parámetro” obtenemos parámetros de la URL:
En el ejemplo utilizaremos la versión del bloque que obtiene el parámetro y lo procesa automáticamente como un valor tipo cadena de texto:
La acción poner en marcha RGB quedaría de la siguiente manera:
La petición para poner en marcha el led RGB de color rojo sería:
Reto de ampliación
Con lo aprendido hasta ahora, realizar el control de varios servos vía peticiones HTTP desde un navegador.
Conectamos 2 servos simulando dos ventanas, por ejemplo, una en la planta baja y la otra en la segunda planta. En D3 conectaremos la de la planta baja y en D5 la de la segunda planta.
Definiremos la acción mover en la que introduciremos 2 parámetros:
● servo: para indicar el servo (a cada uno le hemos puesto un nombre)
● grados: para indicar la posición donde mover este servo.
Para mover los servos utilizaremos órdenes del tipo:
3. Contenido HTML
Podemos generar contenido HTML con ArduinoBlocks. Disponemos de una serie de bloques específicos que nos permiten generar texto con formato HTML especialmente pensado para devolver contenido en formato web desde el servidor HTTP de la placa ESP32 Plus STEAMakers.
Cada bloque implementa una (o varias) etiquetas básicas del lenguaje de marcas HTML. Un ejemplo de una web básica de “hola mundo”:
Éste sería el resultado de nuestro fichero escrito en lenguaje html:
Si guardamos el archivo con extensión .html y lo abrimos con un explorador web debemos verlo de la siguiente modo:
En el ejemplo anterior no hemos especificado nada en la etiqueta Script (js). El bloque <script> dentro de un documento HTML sirve para incluir o enlazar código JavaScript. Este código se utiliza para añadir funcionalidades interactivas, manipular elementos de la página, validar formularios, realizar llamadas a servidores, y mucho más.
Un ejemplo muy básico, podría ser que cada vez que solicitamos la página nos aparezca un mensaje emergente de saludo. Añadimos dentro del cuerpo (body) del documento la etiqueta script con su contenido:
Si ejecutamos el archivo html nos aparecerá un mensaje emergente diciendo “¡Hola mundo!”:
Reto 3.1. Hola Mundo en formato html
Todas estas pruebas las estamos realizando en nuestro ordenador local. Ahora vamos a ejecutar esta “página web” de hola mundo pero utilizando el ESP32 STEAMakers como servidor web:
Si hacemos una solicitud al servidor desde el navegador:
Reto 3.2. Creamos enlaces para solicitar acciones
El reto consiste en realizar una funcionalidad similar a los retos del apartado 2 con el LED RGB. Haremos que desde un enlace pongamos en marcha el LED RGB de color azul y desde otro enlace lo pongamos en marcha de color rojo.
Para poder crear enlaces web tenemos el bloque:
Una posible solución:
En el navegador introducimos nuestra IP y aparecerá la página web de inicio:
Reto 3.3. Mostrar información de sensores
La actividad consiste en mostrar la temperatura y la humedad del sensor dht11.
- La página debe refrescarse automáticamente cada 3 segundos
- Nos debe informar si la calidad del aire es buena o estamos en alerta. Seguiremos el criterio de:
- Zona de confort:
- Humedad entre 40% y 65%.
- Temperatura entre 18ºC y 24ºC.
Ejemplo de visualización cuando estamos en la zona de confort:
Ejemplo de visualización cuando estamos fuera de la zona de confort:
Una posible solución del código de programación:
Refrescar la página
Para que la página web se recargue cada cierto tiempo, refrescando los datos de temperatura y humedad, se ha de introducir el siguiente código en la etiqueta Meta del Head. El valor que aparece al final es el que nos indica los segundos que espera antes de refrescar la página. En este caso 4 segundos.
http-equiv="Refresh" content="4"
Este código se lo añadimos al que ya tiene la etiqueta Meta por defecto.
Otro código HTML
En el bloque crear texto también podemos introducir directamente código HTML que interpretará el navegador correctamente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabla con Enlaces</title>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
a {
color: #0066cc;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Enlace</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td><a href="https://www.google.com" target="_blank">Visitar Google</a></td>
<td>Motor de búsqueda</td>
</tr>
<tr>
<td>Wikipedia</td>
<td><a href="https://www.wikipedia.org" target="_blank">Visitar Wikipedia</a></td>
<td>Enciclopedia libre</td>
</tr>
<tr>
<td>GitHub</td>
<td><a href="https://www.github.com" target="_blank">Visitar GitHub</a></td>
<td>Plataforma de desarrollo</td>
</tr>
<tr>
<td>MDN Web Docs</td>
<td><a href="https://developer.mozilla.org" target="_blank">Visitar MDN</a></td>
<td>Documentación web</td>
</tr>
</tbody>
</table>
</body>
</html>
En el navegador ahora se verá tal como se muestra a continuación.
Estas prácticas tienen su origen en los manuales:
Physical Computing. ESP32 Plus STEAMakers, Imagina TDR STEAM, arduinoblocks. Versión 4.0. Fernando Hernández e Innova Didàctic.
GUIA D’USUARI PLACA ESP32 STEAMakers. Innova Didactic.
IoT con ESP32 STEAMakers - Maleta Innovación 4.0 UPV Alcoi. Juanjo Lopez
Connectivitat WiFi: Tipus de connexió. Daniel Soldevila
Connectivitat WiFi: NTP. Daniel Soldevila
Connectivitat WiFi: Servidor web. Daniel Soldevila
No hay comentarios:
Publicar un comentario