Cómo servir y consumir un Api Rest con ESP8266 o ESP32 y Axios


Continuamos con la sección de entradas dedicadas al ESP8266 y el ESP32. En esta ocasión nos toca ver cómo integrar la popular librería AXIOS para realizar peticiones AJAX desde un cliente web a un API REST servido desde el ESP8266.

Haremos referencia al ESP8266, pero el mismo código es compatible para el ESP32, ajustando el nombre de las librerías. Al final tenéis el código tanto para el ESP8266 como para el ESP32.

Hace varias entradas que vimos cómo servir un API REST desde el ESP8266. Por su parte, en las dos últimas entradas hemos hecho un pequeño "paron" para ver los framework VueJS y Vuetify.

Por supuesto, el objetivo de las próximas entradas es integrar todos estos componentes para servir una aplicación en VueJS/Vuetify que comunique con un API REST servida desde el ESP8266. Así que en esta entrada veremos cómo realizar esta comunicación a través del API REST.

Para ello vamos a ver otro componente, la librería AXIOS, una popular librería en Javascript para realizar peticiones. AXIOS nos va a permitir hacer las peticiones AJAX en el cliente de una forma más "limpia".

Anuncio:

Para ver su uso vamos a basarnos en la entrada en la que serviamos nuestro API REST de ejemplo, correctamente formateado, y vamos a adaptarla para ilustrar la comunicación con el cliente usando AXIOS. Lógicamente, el cambio respecto a esta entrada afecta principalmente al cliente, por lo que toda la parte backend no va a tener cambios.

Es decir, el programa principal del ESP8266 sigue siendo.

Así como la definición del servidor en el fichero 'Server.hpp'.

Y del API REST servido que tenemos definido en el fichero 'API.hpp'.

Ahora vamos con el cliente, donde sí vamos a tener cambios importantes. El fichero 'index.html' cambia para incluir la librería AXIOS bien desde CDN (comentada) o desde la memoria del ESP8266.

Por otro lado, hemos externalizado todas las funciones de llamada a nuestro API REST en el fichero 'API.js', que contiene las funciones de ejemplo para las respectivas llamadas realizadas empleando la librería AXIOS.

Si cargamos todo en el ESP8266, y accedemos a la página web servida, veremos nuestra sencilla (y sí, feísima otra vez) interface para probar que conectamos correctamente con el API REST.

Si pulsamos en los distintos botones podremos comprobar como, efectivamente, el backend en el ES8266 recibe correctamente las peticiones y muestra los datos oportunos en la consola de comandos.

Como vemos, es muy sencillo integrar AXIOS en el ESP8266. Esta pequeña librería nos va a simplificar mucho el trabajo en nuestros proyectos, en especial al trabajar con API REST, haciendo nuestro código más sencillo y mantenible.

Por supuesto, es sólo un ejemplo para ilustrar la comunicación. En un proyecto real habría que definir el API REST, hacer el interface web completo, y hacer las acciones que queramos en el backend. Pero el ejemplo contiene todo el código necesario para hacer las peticiones CRUD (get/post/update/delete) tanto en backend como en frontend.

En las próximas dos entradas continuaremos mejorando este ejemplo, sobre todo la parte del interface web, añadiendo la integración del API REST y AXIOS a nuestras soluciones junto con VueJS y Vuetify ¡Hasta pronto! 

Descarga el código

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

Versión para el ESP8266: https://github.com/luisllamasbinaburo/ESP8266-Examples

Versión para el ESP32: https://github.com/luisllamasbinaburo/ESP32-Examples

Si te ha gustado esta entrada y quieres leer más sobre ESP8266 o el ESP32 puedes consultar la sección tutoriales de ESP8266/32
0 0 vote
Article Rating

Anuncio:

Previous Leer códigos 433Mhz desde ordenador con SDR y RTL_433
Next Mapster, mapeador de clases de alta velocidad para .NET
0 Comments
Inline Feedbacks
View all comments