Cómo usar VueJs con ESP32

3 min
Intermedio

VueJS es un framework JavaScript declarativo para construir interfaces web reactivas, y también podemos usarlo en una página servida desde un ESP32 o ESP8266.

El ejemplo está orientado a ESP32. En muchos casos también puede adaptarse a ESP8266 cambiando librerías y algunos detalles de pines.

Hasta ahora hemos usado vanilla JavaScript, sin ninguna librería, para realizar las acciones en el cliente. En general es una muy buena costumbre y mucho mejor que usar el viejo y obsoleto jQuery (que no os vea usándolo, ¿eh?).

En aplicaciones web un poco más grandes, la programación declarativa suele ser más cómoda que ir modificando el DOM a mano. Es decir, definimos asociaciones entre la interfaz y la lógica del programa, y dejamos que el framework actualice la vista.

En este artículo 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 proyectos servidos desde una placa ESP.

Vamos a comenzar por un ejemplo básico, nuestro “hola mundo” de VueJS, pero funcionando desde el ESP32. Es decir, 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.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>

#include "config.h"  // Sustituir con datos de vuestra red
#include "Server.hpp"
#include "ESP32_Utils.hpp"

void setup(void)
{
  Serial.begin(115200);
  SPIFFS.begin();
  
  ConnectWiFi_STA();
  
  InitServer();
}

void loop(void)
{
}

Copied!

Nuestro fichero ‘Server.hpp’, también muy sencillo.

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");
}

Copied!

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.

<!doctype html>
<html lang="">
 
<head>
  <title>ESP32 VueJS</title>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
  <div id="app">
    <ol>
      <!-- Usamos el componente que hemos definido en Vue.JS -->
      <todo-item v-for="item in myList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
  </div>
 
  <!-- Desde CDN -->
  <!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>-->
  <!-- Desde el ESp8266 -->
  <script type="text/javascript" src="vendor/vue.min.js"></script>

  <!-- Cargamos el fichero que contiene nuestra App en Vue.JS -->
  <script type="text/javascript" src="js/app.js"></script>
</body>
 
</html>

Copied!

El fichero ‘app.js’ que contiene la mini-aplicación en VueJS, con una lista de “tareas pendientes”.

// Definicion de un componente
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li> {{ todo.text }} \
            <input type="checkbox" id="checkbox" v-model="todo.value"> \
            <span v-if="todo.value">{{ todo.hidden }}</span> \
            </li>'
})
 
// 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' }
    ]
  }
})

Copied!

Resultado

Subimos todo al ESP32 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.

esp8266-vue-js-resultado

Simplemente hemos cargado una mini aplicación “hola mundo” de VueJS y comprobado que funciona sin problemas cuando es servida desde el ESP32.

La página es muy sencilla, pero ya tenemos lo importante: una aplicación VueJS servida desde el propio dispositivo. A partir de aquí podemos añadir estilos, componentes visuales o comunicación con el backend del ESP32.