como controlar un esp8266 con api rest ajax y json 5e396d4d7ef08 - Electrogeek

Cómo controlar un ESP8266 con API Rest, Ajax y Json Deja un comentario

esp8266 json - Electrogeek

Seguimos con nuestra sección del ESP8266 viendo cómo recibir datos y ejecutar acciones a través de peticiones AJAX con la información codificada en JSON.

En entradas anteriores ya habíamos llegado a ver cómo servir un API REST que reciba y devuelva información en JSON. Para ello, habíamos usado nuestro API Rest de ejemplo, formulado como vimos en esta entrada sobre NodeJs.

Ahora nos toca “bajar a tierra” todos estos conocimientos, y convertirlo en algo más concreto y aplicable al ESP8266, que nos permita interactuar con él, leyendo información, o realizando acciones.

Por tanto ¡tranquilos!. Esta entrada va a ser más sencilla que la anterior, así que si entendisteis la entrada del API REST, esta debería ser coser y cantar.

Supongamos que quisiéramos activar o desactivar una entrada digital en el ESP8266. Por otro lado, también queremos obtener información, por ejemplo del estado de un pin, o de una variable, o la lectura de un sensor (o lo que fuera).

¿Cómo hacemos un API Rest funcional, que reciba peticiones AJAX con información en Json? Venga, manos a la obra.

Nuestro programa principal es bastante sencillo, e idéntico al que vimos en la entrada del API Rest.

Por otro lado, nuestro fichero ‘Server.hpp’ que contiene la definición del servidor, sí ha cambiado, pasando a ser el siguiente,

Donde hemos definido dos endpoint a la URI ‘/LED’ para peticiones GET y POST respectivamente, y hemos asociado las funciones de callback correspondientes.

Estás están definidas en nuestro fichero ‘API.hpp’ que, ahora sí, es mucho más sencillo que en la entrada anterior sobre el API Rest genérico.

Como vemos, tenemos únicamente dos funciones de callback, ‘getData’ y ‘setData’. En la función ‘getData’ devolvemos una cierta información en JSON con Id y Status. En el ejemplo usamos un número aleatorio pero en nuestro proyecto real leeríamos el estado de un pin, un sensor (o lo que fuera).

Por otro lado, la función ‘setData’ realiza acciones sobre el ESP8266. También recibe un JSON con Id y Status. En el ejemplo, simplemente lo mostramos por pantalla pero, nuevamente, en un ejemplo real actuaríamos sobre una salida digital, un actuador (o lo que quisiéramos).

Por su parte, nuestra página web ‘index.html’ es muy sencilla para este ejemplo,

esp8266 json ajax html - Electrogeek

Donde únicamente tenemos un textbox para introducir el número de pin sobre el que queremos actuar (simulado), y un radio button para elegir el estado ON/OFF. Por otro lado, un botón para solicitar información al ESP8266, y un label para el texto recibido.

Y para que todo funcione, necesitamos un pequeño fichero Javascript ‘main.js’ que contiene lo siguiente,

Donde estamos usando un poco de Vanilla Javascript (Javascript “a pelo”, sin librerías) para enviar y recibir la información al ESP8266.

Ahora subimos todo a nuestro ESP8266 y ejecutamos. Al pulsar en los botones veremos que, efectivamente, en el puerto serie el ESP8266 parsea correctamente la información recibida, y muestra las variables en el puerto serie.

esp8266 json ajax serial - Electrogeek

Por otro lado, si pulsamos en el botón, veremos en la consola del desarrollador del navegador que recibimos y parseamos correctamente la información, y que se actualiza el label oportuno en la página web.

esp8266 json ajax cliente - Electrogeek

Esta es la “forma correcta” y limpia de encender un LED a través de Web en el ESP8266. Nada de peticiones GET con parámetros /?LED=ON ni cosas de esas sucias.

¿Complicado? Bueno, espero que si habéis seguido la serie hasta aquí, no lo haya sido tanto. ¡Pero aún podemos mejorarlo! En la próxima entrada veremos cómo hacer algo parecido a través de websockets. ¡Hasta pronto!

Descarga el código

Todo el código de esta entrada está disponible para su descarga en GitHub.

github logo - Electrogeek

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

0
    0
    Tu Carrito
    Tu carrito esta vacíoVolver a la tienda
    Enviar Whatsapp
    Hola 👋
    ¿En qué podemos ayudarte?