Cómo servir y consumir un Api Rest con ESP8266, Axios y VueJs


Nueva entrada sobre el ESP8266 en la que vamos a ver cómo consumir un API Rest con la librería Axios, desde una aplicación en VueJs servida desde el ESP8266.

En la entrada anterior nos quedamos viendo cómo consumir con un ESP8266 y la librería Axios, usando únicamente Vanilla Javascript. Por otro lado, ya vimos cómo servir una aplicación en VueJs en esta entrada.

Hoy toca dar un pasito más y unir ambos componentes, Axios y VueJS, para hacer una aplicación Web que se comunique con el ESP8266 como backend a través de un API Rest, empleando Axios.

Por supuesto, si aún no habéis visto las entradas anteriores, sería buen momento para echarles un repaso porque vamos a con lo que vimos.

Anuncio:

¡Comencemos! En primer lugar, el backend en este ejemplo es idéntico al de la entrada anterior. Es decir, el código en el ESP8266 no va a cambiar.

Así que para no ser pesado y hacer innecesariamente larga la entrada lo vamos a omitir. Lo tenéis en los ejemplos anteriores de la serie y en el código en Github.

Lo que sí va a cambiar, por supuesto, es el frontend que vamos a servir desde el SPIFFS, que ahora pasa a ser.

Donde vemos que el código de nuestra página ha pasado a estar adornado por las etiquetas propias de una App en VueJs.

La aplicación en VueJS la tenemos definida en el fichero 'app.js'. Es muy sencilla, y básicamente expone una colección de objetos 'items', y los métodos necesarios para llamar a nuestro API del ejemplo.

Subimos nuestra nueva página a la memoria del SPIFFS, y al cargarla en el navegador vemos la misma página que el anterior.

Si interactuamos con los botones comprobamos en la consola de desarrollador del navegador que las acciones se realizan correctamente.

Así como podemos verificar en el terminal del puerto serie del ESP8266 que, efectivamente, las acciones e información se reciben correctamente en el backend.

Que diréis. ¡Pero si es la misma página fea que el ejemplo anterior! Bueno, no, hemos dado un pasito más en la integración para servir e interactuar con Apps complejas desde el ESP8266. Ahora no usamos Javascript 'pelao', si no que incorporamos dos potentes librerías como Axios y VueJS.

En la próxima entrada daremos un pasito más integrando Vuetify, volviendo a conseguir un aspecto Material Design más moderno para nuestra aplicación. ¡Hasta la próxima entrada!

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 Cumplimos 9 añitos
Next Cómo funciona el extrusor de una impresora 3D FFF
1000