Cómo hacer un Api Rest con ESP8266 o ESP32, Axios, VueJs y Vuetify


Continuamos con nuestra sección de tutoriales del ESP8266 y el ESP32 viendo cómo integrar una aplicación que combine VueJs, Vuetify, Axios y se comunique con el ESP8266 a través de un API Rest.

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.

En la entrada anterior de esta serie nos quedamos en que habíamos integrado una aplicación en VueJs, que empleaba la librería Axios para comunicarse a través de un API Rest con el ESP8266 actuando como backend.

Nuestra aplicación podría ser un buen ejemplo de arquitectura pero... reconozcamos que era fea como ella sola. ¡Pero esto está a punto de cambiar! Para ello vamos a incorporar a nuestro coctel Vuetify, que ya vimos en esta entrada.

El objetivo es conseguir una funcionalidad parecida a la anterior, es decir una demo que muestre cómo realizar las distintas acciones a través del API Rest, pero con esta estética más moderna y adecuada.

Anuncio:

¿Tiene mejor pinta verdad? Pues "al tajo". El código del backend, es decir, del ESP8266, es idéntico al de las dos últimas entradas. Así que, nuevamente, me evito copiarlo otra vez y os remito a las entradas anteriores o al código en Github.

Lo que va a cambiar es la página web servida. El fichero index.html pasa a ser.

El fichero JavaScript de la página también debe modificarse para adaptarse al nuevo Framework Vuetify, quedando así.

Subimos nuestros contenidos al SPIFFS como estamos acostumbrados, y pulsamos los distintos botones para comprobar que todo funciona correctamente en la consola de desarrollo del navegador.

Así como que llegan correctamente al ESP8266 como backend, a través del terminal del puerto serie.

¡Y ya hemos terminado con esta serie de tutoriales! Hemos integrado un API Rest, Json, Axios, Vue y Vuetify en una app de demo funcional y bonita. ¡Podéis estar orgullosos! (palmadita en la espalda)

¿Entonces ya hemos terminado? Para nada. En las próximas tres entradas veremos cómo crear un API para el ESP8266 que permita leer entradas analógicas/digitales y realizar acciones, a través de Websocket, empleando también Vue en el frontend. ¡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 Materiales para impresión 3D
Next Cómo instalar Mosquitto, el popular broker MQTT
2 Comments
oldest
newest
Inline Feedbacks
View all comments
rafael
5 hours ago

hola luis, es posible hacer el front con react