Datos de IoT en tiempo real

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.

Por último instalaremos las dependencias que necesitamos para el proyecto:

npm install server mongoose mz --save

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>

    <!-- Librerías externas 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).