Cómo usar VueJs con ESP8266


Volvemos a la carga con la sección sobre el ESP8266, viendo cómo integrar el framework VueJS en un cliente web servido desde el ESP8266.

En la entrada anterior vimos un ejemplo bastante completo viendo cómo montar un interface web para controlar las entradas, salidas, y ejecutar acciones en el ESP8266.

Ya comentamos que, hasta el momento, hemos usado vanilla Javascript, sin ninguna librería, para realizar todas las acciones en el cliente. Que, en general, es una muy buena costumbre y mucho mejor que usar el viejo y obsoleto jQuery (que no os vea usándolo ¿eh?).

Pero la programación moderna tiende a ser declarativa, en lugar a imperativa. Es decir, definir asociaciones entre el UI y la lógica del programa, en lugar de "ir y hacer acciones". Para eso hay muchos framework, como Angular o Vue.

Anuncio:

En esta entrada vamos a comenzar con esta aproximación declarativa de la programación del cliente, mediante el framework VueJS. Es un framework muy popular para desarrollo Web, ligero pero potente, y que encaja perfectamente en el ESP8266.

Y vamos a comenzar por un ejemplo básico, nuestro "hola mundo" de VueJS que ya vimos en esta entrada, pero funcionando desde el ESP8266. Es decir, en esta entrada básicamente pretendemos conseguir montarlo y que funcione.

Tranquilos, a estas alturas ya no os va a ser especialmente difícil. Empezando, nuestro programa principal queda sencillo a más no poder.

Nuestro fichero 'Server.hpp', también muy sencillo.

En la parte del cliente, el fichero 'index.html' contiene lo mínimo necesario para garantizar que nuestra App de Vue funciona. Únicamente destacar que incluimos la librería de VueJS, bien desde la memoria del ESP866, o (la línea comentada) desde CDN.

Finalmente, el fichero 'app.js' que contiene la mini-aplicación en VueJS, con una lista de "tareas pendientes".

Subimos todo al ESP8266 y nos metemos en la página web. Si todo ha salido correctamente, veremos un listado de tres "tareas", con un checkbox. Y si hacemos click en el checkbox, aparecerá el campo "hidden" de la línea correspondiente.

Hasta aquí, así de fácil. Simplemente hemos cargado una mini aplicación "hola mundo" de VueJS y comprobado que, por supuesto, funciona sin problemas cuando es servida desde el ESP8266.

Lamentablemente, nuestra página vuelve a ser fea como ella sola. Pero, aquí es donde entra en juego Vuetify, un framework que aporta estética Material Design a aplicaciónes en VueJS.

Veremos Vuetify en el ESP8266 en la próxima entrada y, por supuesto, en las próximas terminaremos rehaciendo el interface web de la entrada anterior para que sea declarativo (en nuestro caso, a.k.a. VueJS) ¡Queda sección para rato! Hasta la próxima.

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 Qucs, simulador de circuitos electrónicos Open Source
Next Cómo se fabrica una PCB
1000