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:
<!DOCTYPE html>
<html>
<head>
<!-- Estándar para las páginas web. NO LO CAMBIES -->
<meta charset="utf-8" />
<!-- Nombre en la pestaña y en la barra del navegador -->
<title>Gráficos en tiempo real</title>
<!--Importar materialize.css y la fuente de iconos de Google-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="materialize.css" rel="stylesheet">
<!-- Nuestra propia hoja de estilos (public/style.css) -->
<link type="text/css" rel="stylesheet" href="style.css" media="screen,projection"/>
<!-- Este sitio está optimizado para móvil -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- Pondremos todo nuestro HTML dentro de main -->
<main>
<!-- Cada section va a ser un gráfico con su explicación -->
<section>
<h1>Temperatura</h1>
<!-- Chart.js usa canvas para renderizar las gráficas -->
<canvas id="temperature"></canvas>
</section>
</main>
<!-- Los archivos de Javascript a cargar -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/socket.io.slim.min.js"></script>
<!-- Nuestra lógica en javascript para el navegador (public/javascript.js) -->
<script src="javascript.js"></script>
</body>
</html>
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).