Cómo servir y consumir un API REST con ESP8266 y AXIOS


Continuamos con la sección de entradas dedicadas al ESP8266. 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.

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.

Si te ha gustado esta entrada y quieres leer más sobre ESP8266 puedes consultar la sección
tutoriales de ESP8266

Anuncio:

Previous Leer códigos 433Mhz desde ordenador con SDR y RTL_433
Next Mapster, mapeador de clases de alta velocidad para .NET
1000