Cómo usar Vuetify con ESP8266


Nueva entrada sobre el ESP8266 en la que vamos a ver cómo aplicar estética Material Design a nuestras aplicaciones VueJS servidas al cliente gracias a Vuetify.

Hace dos entradas vimos cómo crear un interface Web para el ESP8266, usando Vanilla Javascript. En la entrada anterior vimos cómo usar VueJS en el ESP8266, como uno framework para sustituir la lógica de nuestra App por una formulación declarativa.

Lamentablemente en el camino, nuestra página volvió a ser fea como ella sola. Y quedamos en que, en esta entrada, nos centraríamos en ver cómo conseguir la misma estética Material Design en nuestra aplicación en VueJS.

Aquí es donde entra en juego Vuetify, un framework que ya vimos en su día, que aporta un montón de componentes para realizar aplicaciones en VueJS con un interface agradable, moderno, y que no te den ganas de arrancarte los ojos cuando lo veas.

Anuncio:

Al igual que la anterior, esta entrada de introducción al framework va a ser muy sencilla. Únicamente nos vamos a centrar en presentarlo, y hacer una pequeña App "hola mundo", y verificar que funciona correctamente.

Por tanto, nuestro programa principal sigue siendo sencillo, e idéntico a la entrada anterior,

Así como la declaración del servidor en el fichero "Server.hpp",

Lo que va a cambiar es el lado del cliente. Así, nuestro fichero 'index.html' queda de la siguiente forma,

¿Mucho más largo que el anterior? Si, como venimos diciendo, es el "precio" de tener una estética mejor, más líneas de código.

Por su parte, la definición de la aplicación en Vue también ha cambiado, para adaptarse a los requisitos de Vuetify, pasando a ser,

Subimos todo al ESP8266 y cargamos la página en el navegador. ¡Bueno! ¡Esto ya es otra cosa! Volvemos a tener un interface con estética Material Design, agradable y bonito, a la vez que mantenemos las ventajas que nos aporta VueJS.

Ya estamos cerca de poder rehacer por completo nuestro interface web de ejemplo para el ESP8266, en VueJs. Pero antes, en la próxima entrada, haremos una "mini pausa" para ver otra de las herramientas que necesitaremos, la librería AXIOS para realizar peticiones AJAX. ¡Nos vemos enseguida!

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 Sensor ambiental con Arduino y BME280
Next Cómo hacer test unitarios de métodos Internal en .NET
1000
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
newest oldest
Carlos Mtz

Excelente tutorial, estaré atento a las demás publicaciones, quiero ver como se hace la comunicación.