Cómo usar VueJs con ESP8266 Deja un comentario
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
#include
#include
#include
#include “config.h” // Sustituir con datos de vuestra red
#include “Server.hpp”
#include “ESP8266_Utils.hpp”
void setup(void)
{
Serial.begin(115200);
SPIFFS.begin();
ConnectWiFi_STA();
InitServer();
}
void loop(void)
{
}
|
Nuestro fichero ‘Server.hpp’, también muy sencillo.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
AsyncWebServer server(80);
void InitServer()
{
server.serveStatic(“/”, SPIFFS, “/”).setDefaultFile(“index.html”);
server.onNotFound([](AsyncWebServerRequest *request) {
request->send(400, “text/plain”, “Not found”);
});
server.begin();
Serial.println(“HTTP server started”);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
lang=“”>
charset=“utf-8”>
http-equiv=“x-ua-compatible” content=“ie=edge”>
name=“description” content=“”>
name=“viewport” content=“width=device-width, initial-scale=1”>
id=“app”>
|
Finalmente, el fichero ‘app.js’ que contiene la mini-aplicación en VueJS, con una lista de “tareas pendientes”.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// Definicion de un componente
Vue.component(‘todo-item’, {
props: [‘todo’],
template: ‘
{{ todo.hidden }}
‘ })
// Definicion de nuestra app de ejemplo
var app = new Vue({
el: ‘#app’,
data: {
myList: [
{ id: 0, text: ‘Item1’, hidden: ‘Hidden1’ },
{ id: 1, text: ‘Item2’, hidden: ‘Hidden2’ },
{ id: 2, text: ‘Item3’, hidden: ‘Hidden3’ }
]
}
})
|
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.
tutoriales de ESP8266
Anuncio:
