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


Continuamos con nuestra sección de tutoriales del ESP8266 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.

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.

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

Anuncio:

Previous Materiales para impresión 3D
Next Cómo instalar Mosquitto, el popular broker MQTT
1000