Conectividad WiFi: Cliente web
1. Introducción
Podemos realizar peticiones HTTP desde nuestra placa para actuar en servicios remotos HTTP (API: Interfaz de programación de aplicaciones) y si es necesario también leer la respuesta.
Ejemplo: esta petición nos devuelve nuestra IP pública (IP asignada por nuestro ISP)
Ejemplo para mostrar en la pantalla OLED y por el puerto serie la IP pública de nuestra conexión a Internet:
Esto es lo que se verá en la consola del puerto serie:
Reto - Peticiones como cliente en un servidor esp32
Hacer una petición desde una ESP32 STEAMakers que actúa como cliente en el servidor web alojado en otra esp32 STEAMakers y que permite poner en marcha el led RGB de color azul y rojo.
Cliente web (HTPP)
Desde un cliente HTTP podemos hacer básicamente lo que hace el navegador web cuando hacemos una petición web. En un dispositivo como el ESP32 STEAMakers la funcionalidad de cliente HTTP puede tener principalmente los siguientes usos:
1. Realizar peticiones a un servicio web para actuar sobre el servidor ejecutando acciones remotas
Siguiendo el ejemplo del servidor web para encender o apagar un LED, desde otro dispositivo ESP32 STEAMakers podríamos actuar conectando con el cliente HTTP:
Si nos interesa la respuesta del servidor podemos utilizar el bloque de programación que usamos para obtener la cadena de texto con la respuesta (normalmente HTML, JSON, CSV, …).
Ejemplo: carga en la placa 1 (servidor) un programa que permita encender y apagar un led.
Carga en la placa 2 (cliente) el siguiente programa, que encenderá y apagará el LED conectado a la placa 1 en intervalos de 3 segundos:
2. Obtener información de servicios web remotos (API)
API (Interfaz de programación de aplicaciones)
En Internet existen muchos servidores web que proporcionan acceso a datos que nos puede interesar consultar sin tener que acceder desde un navegador, como datos meteorológicos, deportivos, musicales…y podemos hacerlo gracias a las API.
Ejemplo: obtener la IP pública de tu red
Ejemplo: obtener información meteorológica en forma de texto para unas coordenadas en concreto.
https://www.7timer.info/bin/api.pl?lon=2&lat=41&product=meteo&output=json
↑ Cambia los valores de lon y de lat por los de la longitud y latitud del sitio que quieras consultar. Los puedes obtener en formato decimal en https://www.latlong.net/convert-address-to-lat-long.html
Ejemplo: geolocalizar nuestra conexión a Internet
Regístrate en https://geo.ipify.org/ para obtener tu clave de acceso a su API.
Pulsa en
y copia el enlace proporcionado en Making requests:
Abre el enlace en una pestaña del navegador. Deberías ver algo parecido a esto:
Si ves esto otro:
{"ip":"8.8.8.8","location":{"country":"US","region":"California","city":"Mountain View","lato":32.69922,"lng":-117.11281,"postalCode":"","timezone":"-07:00","geonam eId":5375481},"domains":["007515.com","01122023.win","01afacan.xyz","020110.xyz", "027pc.net"],"as": "asn":15169,"name":"GOOGLE","route":"8.8.8.0/24","domain":"https:\/\/about.google\/intl\/en\/","type":"Contento"},"isp":"Google LLC"}
es porque estás utilizando un navegador que NO es Firefox!
Muestra Mountain View - California - US porque al final del enlace hay &ipAddress=8.8.8.8, que es una IP pública de Google.
Vuelve a abrir el enlace después de eliminar esta parte. ¡La cosa cambia!
Ahora deberías ver el nombre de tu ciudad/municipio/pueblo y tu IP pública. Si no es así es ¡porque tu proveedor de Internet tiene registrada tu IP pública en otro sitio!
Vamos a mostrar la IP pública y la ciudad en la consola de arduinoblocks conectando el ESP32 STEAMakers al enlace como cliente web. Utilizaremos los bloques de gestión de los datos en JSON.
Sube el programa a la placa, abre la consola, cambia la velocidad a 115200 baudios, conéctala a la placa, reinicia la placa, limpia (rápidamente) la consola y… verás algo como:
3. Registro de datos (data logging) remoto, enviando los datos como parámetros a páginas web que las recogen y almacenan en una base de datos (aplicaciones PHP, …).
4. Ciertos servicios como IFTTT, ThingSpeak, … nos permiten enviar o ejecutar acciones a través de peticiones HTTP, por lo que utilizaríamos el cliente HTTP para poder hacerlo.
Conectividad WiFi: Telegram Bot
1. Introducción
Telegram es una plataforma de mensajería y VOIP, desarrollada por los hermanos Nikolái y Pável Dúrov. La aplicación está enfocada a la mensajería instantánea, el envío de varios archivos y la comunicación en masa. Telegram es por ahora una de las grandes alternativas a WhatsApp, una auténtica navaja suiza que ofrece todo tipo de opciones que van más allá de las que suelen dar la mayoría de aplicaciones de este tipo.
Telegram es una aplicación que podemos instalar en cualquier dispositivo móvil, y posee una plataforma web desde la que podrás acceder desde tu ordenador.
El envío y la recepción de mensajes cuenta con un protocolo de seguridad que cifra cada texto y asegura tus mensajes.
Un bot de telegram es una aplicación que permite interactuar a través de la aplicación Telegram con usuarios o grupos de forma automática.
2. Creación de un bot en Telegram
Para crear un Bot en Telegram lo hacemos desde el mismo Telegram (app o versión web, como más te guste).
Vía web: https://web.telegram.org
Debemos “chatear” con el bot de los bots… @botfather
Una vez iniciada la conversación con @botfather, si le enviamos el comando /start nos aparece información sobre las órdenes disponibles para crear el nuevo Bot y poder configurarlo:
El comando para crear un nuevo Bot es /newbot y seguidamente nos pregunta el nombre del nuevo Bot y del usuario:
¡Ya lo tenemos! @botfather ha creado el nuevo Bot y nos da un Token para conectar con la API de Telegram (Para introducir en el bloque Iniciar Telegram Bot en ArduinoBlocks).
El Token para la API es muy importante, debes guardarlo en un sitio seguro porque nos permitirá tener el control total de nuestro Bot.
Si queremos modificar o completar la información de nuestro Bot, lo más sencillo es mediante el comando /mybots y seguir las opciones que nos muestra en forma de menú y botones para ir completando la información.
3. Bloques Telegram-Bot en ArduinoBlocks
● Iniciar Telegram Bot: permite iniciar el sistema Telegram en el ESP32, debemos indicar el Token obtenido para la API al crear el bot (con @botfather)
● Enviar un mensaje: permite enviar mensajes a cualquier chat de telegram directamente
○ Chat-ID: puede ser el ID de una conversación privada a un usuario en concreto, de un grupo o de un canal).
○ Texto del mensaje: el texto con el mensaje que se quiere enviar
○ Formato: Se pueden indicar tres tipos de formato para aplicar estilos al mensaje (negrita, títulos, etc.). Formato: Markdown, MarkdownV2 o HTML
● Evento a realizar cuando se recibe un nuevo mensaje desde Telegram:
○ Dentro de este bloque procesaremos el mensaje recibido, pudiendo acceder al texto del mensaje, al remitente (nombre) y al Chat-ID de donde procede el mensaje.
○ Aquí responderemos o actuaremos según el mensaje que nos llegue.
● Mensaje recibido: Este bloque sólo tiene sentido utilizarlo dentro del evento de "nuevo mensaje recibido", si se usa fuera, el contenido estará vacío.
○ Texto: texto del mensaje recibido
○ Chat ID: ID del chat de donde procede el mensaje. Muy útil para responder a este mismo chat (pueden llegar mensajes de diferentes chats, grupos, etc. por el Chat ID identificamos el origen y nos sirve para responder al chat correcto.
○ Remitente: El nombre del usuario remitente del mensaje.
○ Remitente ID: El ID del remitente del mensaje.
4. ESP32 responde a peticiones desde Telegram
Reto 1 - Bot informativo de la temperatura y humedad
El Bot responderá con la temperatura y la humedad de un sensor DHT-11 conectado al ESP32 STEAMakers.
No se han de enviar caracteres especiales como acentos, ç, etc… ya que no recibiremos respuesta del bot.
Desde telegramo “chateamos” con el Bot del ESP32 STEAMakers y obtenemos la temperatura y humedad del sensor en tiempo real.
En un chatbot de Telegram, los comandos se envían con el formato /comando para diferenciarlos de los mensajes normales y porque es más fácil de reconocer y gestionar por su API.
El bot puede ser programado para reconocer comandos sin /, pero esto implica procesar manualmente cada mensaje y decidir si es un comando o no. Sin embargo, podemos utilizar el bloque comparativo de texto “contiene en el texto” para hacer más “natural” la conversación con el bot:
Podríamos tener una conversación como ésta:
Reto 2 - Situar un servo en la posición enviada desde Telegram
El programa podría ser este:
Y esta sería la conversación:
5. ESP32 inicia conversación en chat de Telegram
Si queremos que nuestro Bot pueda enviar mensajes a un chat directamente (para responder no haría falta), necesitamos el ID del Chat en cuestión. Para obtener el Chat-ID podemos preguntarlo a otros bots.
● Obtener el ID de mi chat privado (para que mi Bot envíe mensajes a mi usuario de Telegram directamente):
Busco a Bot @myidbot en Telegram y le pregunto mi ID:
Debemos ejecutar el comando /getid
También podemos obtener la ID de un chat de grupo haciendo lo siguiente:
Obtener el ID de un grupo
· Entra en el grupo y añade @myidbot como participante
· Envía /getgroupid@myidbot
· Te dará un número negativo. Anótalo.
· Elimina @myidbot del grupo
Reto 3 - ¿Quién entra en casa?
Con el lector RFID. Si el código leído es correcto, la esp32 nos enviará un mensaje a Telegram informando de quién ha entrado. Si alguien está intentando acceder con un código incorrecto, nos informará de un posible intruso. Este es el programa:
Chat de Telegram:
Reto final
Control del acceso a casa desde Telegram.
- En una lista guardaremos las ID válidas para el acceso RFID a casa
- Desde Telegram podemos:
- bloquear el acceso para todo el mundo enviando /bloquear
- desbloquear el acceso a los usuarios correctos enviando /desbloquear
- Si el acceso está bloqueado:
- Si un usuario quiere entrar, deberá informar por pantalla (oled) que el acceso está bloqueado.
- Se envía un mensaje a Telegram diciendo que el usuario quiere entrar
- Si el acceso está desbloqueado:
- Cuando el usuario quiere entrar:
- Debe abrir y cerrar la puerta (servomotor)
- Debe informar por pantalla (oled) que se está abriendo/cerrando la puerta
- Debe informar vía Telegram que el usuario ha accedido dentro.
- Si un usuario no está en la lista:
- Debe informar por pantalla Oled que no es bienvenido
- Debe informar vía Telegram que un intruso ha querido entrar.
Este podría ser el programa:
Análisis básico de datos en formato JSON
Introducción
JSON (JavaScript Object Notation) es un formato basado en texto estándar para representar datos estructurados en la sintaxis de objetos de JavaScript. Es comúnmente utilizado para transmitir datos en aplicaciones web (por ejemplo, enviar algunos datos desde el servidor al cliente, así estos datos pueden ser mostrados en páginas web, o viceversa).
Un texto en formato JSON es una cadena cuyo formato recuerda al de los objetos literales JavaScript. Es posible incluir los mismos tipos de datos básicos dentro de un JSON que en un objeto estándar de JavaScript - cadenas, números, arreglos, booleanos y otros literales de objeto. Esto permite construir una jerarquía de datos como, por ejemplo, ésta:
Ejemplo de datos en formato JSON:
{"id": 124,"micro": "esp32",“tipo”: “temperatura”,“localitzacio”: “menjador”,"valor": 22.5,"permisos": {“lectura”:true,“escriptura”:false}“autoritzats”: [”neus”,“jordi”,”arnau”,”toni”],“historic”: [22.5, 21.3, 23.4, 19.5],“actiu”: true}
Referencia: https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/JSON
Podemos crear una estructura en formato JSON de ilimitados niveles, incluyendo dentro de cada elemento nuevas ramificaciones.
En ArduinoBlocks se ha buscado implementar los bloques de la forma más sencilla, lo que no optimiza el uso interno de la memoria y la librería en pro de la sencillez y facilidad de uso. Se plantea su uso en casos no muy complejos, ya que todo es puramente con fines didácticos.
Bloque para cargar e interpretar datos de texto en formato JSON
Acceso a los datosInternamente analiza el texto en formato JSON y crea una estructura para que podamos acceder fácilmente a los datos.
Básicamente tenemos 2 tipos de estructuras:
1. Listado de datos clave/valor (diccionario)
{ “clau1” : ”valor1”, “clau2”:”valor2”, “clau3”: valor3 , …. }
Para acceder a un valor lo haremos con el nombre de la clave correspondiente. En el ejemplo, si queremos obtener el campo “id” como valor numérico:
Lo podemos guardar directamente en una variable numérica o trabajar con el valor como número:
De la misma forma podemos acceder a datos de tipo texto o booleanos:
Como caso especial, cuando obtengamos el valor de un campo a través de su clave y este campo tenga un subobjeto JSON como su valor, obtendremos en forma de texto toda la cadena JSON de su interior. Normalmente, para volver a procesar (parsear).
En el ejemplo:
la variable permisos contendrá el valor:
{
“lectura”:true,
“escriptura”:false
}
Y podemos volver a procesar para obtener fácilmente los valores:
Así, podemos ir analizando los diferentes niveles internos de la estructura JSON del documento.
ATENCIÓN: En el momento en que volvemos a “parsear” un nuevo texto en formato JSON perdemos la información anterior, por lo que debemos recuperar los valores que nos interese del nivel de análisis correspondiente e ir recorriendo el interior de la estructura reanalizando los subniveles para acceder a sus valores.
2. Listado de datos en forma de vector (array)
[ valor1, valor2, valor3, …]
Para acceder a un valor lo haremos con el índice de posición dentro del vector (numérico).
En el ejemplo, con
obtenemos el valor
[”neus”,“jordi”,”arnau”,”toni”]
Y podemos acceder a cada valor por su posición:
0 → “neus”
1 → “jordi”
2 → “arnau”
3 → “toni”
En la mayoría de casos el número de elementos en el vector será variable, por lo que podemos obtener su tamaño y recorrer los valores con un sencillo bucle.
En el ejemplo:
En algunos casos debemos comprobar si una determinada clave se encuentra en el documento JSON o no.
Para ello podemos utilizar el bloque:
En algunos casos podemos necesitar recorrer los pares clave/valor del objeto JSON sin saber a priori sus nombres.
Por eso está el bloque para recorrer la lista clave/valor y el bloqu para obtener el nombre de la clave en cada iteración (el bloque de obtener la clave sólo tendrá un valor válido si lo utilizamos dentro del bucle de iteración):
En este caso necesitaremos averiguar el tipo de dato y poder acceder al valor según el tipo:
Ejemplo: recorre cada clave/valor y lo muestra por la consola según el tipo de dato
1. Archivo de configuración en SD
En la tarjeta microSD insertada en la ranura de la placa ESP32 STEAMakers tendremos un archivo llamado “config.json” con datos en formato JSON de parámetros para nuestra aplicación:
{"missatgeinicial" : "Apli de control 1.0","indicador": true,"servo": {"actiu": true,"posició": 120}}
2. Intercambio de datos entre placas ESP32 STEAMakers mediante MQTT
Formato de los datos en JSON:
{
"temp": xx,
"hum": yy,
"ID": id
}
a) Placa emisora:
b) Placa receptora:
3. Analizar respuesta desde una API obtenida con cliente HTTP
a) Obtener un chiste aleatorio desde la API → https://official-joke-api.appspot.com/random_joke
Ejemplo de formato JSON:
{"type":"programming","setup":"There are 10 types of people in this world...","punchline":"Those who understand binary and those who don't","id":28}
{
"type":"programming",
"setup":"There are 10 types of people in this world...",
"punchline":"Those who understand binary and those who don't",
"id":28
}
En la consola del puerto serie se puede ver lo siguiente:
b) Obtener datos meteorológicos desde OpenWeather
Debemos registrarnos en la web y obtener una API KEY: https://openweathermap.org/api
También es interesante obtener las coordenadas GPS en formato decimal del sitio de donde queremos consultar los datos meteorológicos: https://www.latlong.net/convert-address-to-lat-long.html
Ejemplo (Instituto de Terrassa): lat: 41.568182 , long: 2.004753
Un ejemplo de petición para obtener datos básicos:
https://api.openweathermap.org/data/2.5/weather?lat=41.568182&lon=2.004753&units=metric&appid=APIKEY
Sustituye APIKEY por la tuya (la encontrarás en https://home.openweathermap.org/api_keys)
Ejemplo de datos obtenidos (en el navegador):
{"coord":{"lon":2.0048,"lat":41.5682},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}],"base":"stations","main":{"temp":14.5,"feels_like":13.49,"temp_min":13.07,"temp_max":15.27,"pressure":1003,"humidity":57,"sea_level":1003,"grnd_level":968},"visibility":10000,"wind":{"speed":4.12,"deg":250},"clouds":{"all":20},"dt":1742661369,"sys":{"type":2,"id":50471,"country":"ES","sunrise":1742622713,"sunset":1742666743},"timezone":3600,"id":3108286,"name":"Terrassa","cod":200}
El programa con bloques sería el que se muestra a acontinuación:
Este es el resultado que se puede ver en la consola del puerto serie:
Anexo
Listado de APIs con datos en formato JSON:
https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/JSON
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 y Innova Didàctic.
IoT con ESP32 STEAMakers - Maleta Innovación 4.0 UPV Alcoi. Juanjo Lopez
Connectivitat WiFi: Client web, Daniel Soldevila
Connectivitat WiFi: Telegram Bot, Daniel Soldevila
Client web (HTPP), Toni Hortal
No hay comentarios:
Publicar un comentario