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).