History: Datos de IoT en tiempo real

Revision made 7 years ago by Francisco Presencia. Go to the last revision.

Leer y mostrar datos de un módulo de IoT en tiempo real con gráficos. La idea es que podáis montaros vuestro propio proyecto de IoT y con este taller podáis montar la plataforma para leer y mostrar los datos.

Si habéis seguido las instrucciones de Introducción y preparación ya deberíais de tener todo preparado para poder seguir este taller.

Partes del sistema

Explicación y clasificación de las diferentes partes del sistema según varios criterios.

Partes del sistema

Primero que nada vamos a explicar en qué consiste este taller y cómo se conectan las piezas del mismo. Vamos a disponer principalmente de 3 componentes:

  • Hardware. Puede ser un Arduino, una Raspberry Pi, un ESP8266 o cualquier otro con el que estéis trabajando. Este lo ponéis vosotros y va a tener que comunicarse con internet ya sea mediante wifi, ethernet u otros medios.
  • Plataforma web. El código que está en un hosting que conecta las diferentes partes. Recibirá los datos del hardware, los procesa si hace falta y los muestra donde haga falta.
  • Navegador web. Con él podréis acceder a las gráficas e informes que produce la plataforma web.

Plataforma web

Vamos a ver cómo haremos la plataforma web y de qué partes se compone la misma:

  • Back-end: nombre que se le da al código que se está ejecutando en el servidor. Para este taller usaremos el lenguaje Javascript con Node.js y las librerías server y mongoose.
  • API: conjunto de llamadas y procesos accesibles desde fuera que usaremos para comunicarnos tanto con el hardware como con la página web.
  • Front-end: el código que se ejecuta en el navegador web. Usaremos la librería Chart.js para mostrar los gráficos y el protocolo de transmisión websockets.

Estructura de archivos

Vamos a crear la plataforma web. Al final del taller nos tiene que quedar esta estructura de archivos:

  • public/
    • javascript.js
    • style.css
  • .gitignore
  • index.html
  • index.js
  • package.json

Init

Primero que nada, cuando nuestra carpeta todavía está vacía, procedemos a crear el proyecto con Git y con NPM. Git es un sistema de control de versiones que nos permitirá subir nuestros archivos al hosting, y NPM es el que se encarga de que todas las librerías son correctas.

git init npm init --yes   # Evitamos todas las preguntas

Una vez hecho esto, tendremos la carpeta .git (oculta) y el archivo package.json creados en nuestra carpeta.

Creamos un archivo que se llame ".gitignore" y escribimos dentro lo siguiente:

# .gitignore node_modules npm-debug.log*

Esto hará que no subamos ciertos archivos al servidor tanto por seguridad como para mejorar la velocidad de carga.

Mostrar la web

Una vez ya tenemos esto, procedemos a crear el archivo principal que por ahora sólo mostrará la página web inicial. Sólo vamos a usar una vista y el resto de datos los cargaremos a través de la API, así que por ahora hacemos:

// index.js // Crear las variables que vamos a usar después const server = require('server'); const { get, post, socket } = server.router; const fs = require('mz/fs');

// Enviar el index.html de forma asíncrona const sendIndex = async ctx => {   const index = await fs.readFile(__dirname + '/index.html', 'utf8');   ctx.res.send(index); };

// Definimos nuestras rutas (sólo una por ahora) const routes = [   get('*', sendIndex) ];

// Lanzar el servidor con las opciones por defecto server(routes);

Lo que hace este código es que, cuando un navegador o cualquier otro servicio hace una petición a cualquier página vamos a mostrar el index.html.

Ahora definamos nuestro html dentro de este index.html:

TODO: copy/paste here

Estamos referenciando un par de archivos que todavía no existen y que veremos en el próximo capítulo, style.css (en public/style.css) y javascript.js (en public/javascript.js).