Almacenando y recuperando datos en IoT con Firebase
Empezaremos este tutorial definiendo la problemática a resolver, en este caso guardaremos los datos de un sensor (valor del sensor y fecha de lectura) en la base de datos y los mostraremos en una gráfica en el navegador. Por ahora simularemos los datos introduciendo datos aleatorios.
La estructura de nuestra base de datos debe quedar de la siguiente forma (estos datos los borraremos después, solo es para visualizar la estructura).
Debemos crear una carpeta con los archivos de nuestro proyecto y preparamos nuestro editor favorito. Creamos un nuevo archivo de texto y lo guardamos como index.html. Es necesario que tengas a la mano la URL de tu base de datos de firebase. Llego la hora de teclear código:
<!-- Creamos la estructura HTML estándar -->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Agregamos la librería firebase.js desde su repositorio -->
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<!-- Agregamos la librería jquery.js desde su repositorio -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Agregamos nuestra libreria JS personalizada -->
<script src="js/functions.js"></script>
</head>
<body>
<div class="container">
<!-- Contenedor para mostrar los datos leídos -->
<div id="result">
</div>
<!-- Botón para agregar datos simulados -->
<input type="button" id="btn" value="Agregar">
</div>
</body>
<script>
//Accedemos a nuestra base de datos mediante la URL de tu app
var ref = new Firebase("https://<tuApp>.firebaseio.com/");
//Hacemos referencia a nuestro nodo del sensor Temp
var tempRef = ref.child("Temp");
//Usamos JQuery para detectar clic en el botón
$('#btn').click(function(){
//Agregamos un dato nuevo en la base de datos
tempRef.push().set({
//generamos un valor aleatorio
value: Math.floor((Math.random() * 5) + 20),
//generamos un timestamp
timestamp: timeStamp()
});
});
</script>
</html>
Como podemos ver en el código las partes esenciales son agregar las librerías a utilizar, tanto la de firebase para el manejo de la base de datos como de JQuery para manejar los eventos (Callbacks) del botón para añadir datos. también se incluyo la librería personalizada functions.js que es de donde obtuvimos el método timeStamp() (los archivos finales están disponibles para su descarga al final del articulo)
Para agregar datos usaremos el método Push de firebase por lo que se agregara un nuevo nodo con un identificador único (basado en la fecha) dentro de nuestro sensor Temp. Como se puede notar en la siguiente secuencia, si el nodo no existe se creara automáticamente y se irán añadiendo los datos. La interfaz de Firebase nos muestra en color amarillo los nodos modificados y en verde los nodos nuevos.
Al abrir index.html en el navegador nos mostrara un simple botón “Agregar” al cual al dar clic agregamos una nueva entrada en la base de datos.
Ahora es turno de recuperar los datos, para esto haremos uso del método on() de firebase, el cual abre un stream de datos, lo que significa que en cuanto se agregue un dato nuevo (child) en la base de datos se llamara a la función, la cual actualizara los datos en la tabla.
<!-- Creamos la estructura HTML estandar -->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Agregamos la libreria firebase.js desde su repositorio -->
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<!-- Agregamos la libreria jquery.js desde su repositorio -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Agregamos nuestra libreria JS personalizada -->
<script src="js/functions.js"></script>
<!-- Agregamos nuestra hoja de estilos -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- Contenendor para mostrar los datos leidos -->
<div id="result">
<!-- Creamos una tabla para visualizar los datos nuevos -->
<table>
<thead>
<tr>
<th>Fecha</th>
<th>Valor</th>
</tr>
</thead>
<tbody id="tabla">
</tbody>
</table>
</div>
<!-- Boton para agregar datos simulados -->
<input type="button" id="btn" value="Agregar">
</div>
</body>
<script>
//Accedemos a nuestra base de datos mediante la URL de tu app
var ref = new Firebase("https://<tuApp>.firebaseio.com/");
//Hacemos referencia a nuestro nodo del sensor Temp
var tempRef = ref.child("Temp");
//Se ejecuta por cada valor existente en la BD
//y cada que se agrega un valor nuevo a la base de datos
tempRef.on("child_added", function(snapshot, prevChildKey) {
//recuperamos una captura del objeto leido
var t = snapshot.val();
console.log("Value: " + t.value);
console.log("Timestamp: " + t.timestamp);
//Agregamos los datos a la tabla
$('#tabla').append('<tr><td>'+t.timestamp+'</td><td>'+t.value+'</td></tr>');
});
//Usamos JQuery para detectar clic en el botón
$('#btn').click(function(){
//Agregamos un dato nuevo en la base de datos
tempRef.push().set({
//generamos un valor aleatorio
value: Math.floor((Math.random() * 5) + 20),
//generamos un timestamp
timestamp: timeStamp()
});
});
</script>
</html>
Gráfica
Ahora solo nos falta mostrar los datos de una forma mas agradable y esto lo haremos usando librería chart.js V1.0.2. El código final queda de la siguiente forma.
<!-- Creamos la estructura HTML estándar -->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Tutorial Firebase para IoT</title>
<!-- Agregamos la librería Chart.js desde su repositorio -->
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<!-- Agregamos la librería firebase.js desde su repositorio -->
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<!-- Agregamos la librería jquery.js desde su repositorio -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Agregamos nuestra libreria JS personalizada -->
<script src="js/functions.js"></script>
<!-- Agregamos nuestra hoja de estilos -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- Contenedor para mostrar los datos leídos -->
<div style="float: left">
<canvas id="grafica" width="600" height="400"></canvas>
<div>
<!-- Boton para agregar datos simulados -->
<input type="button" id="btn" value="Agregar">
</div>
</div>
<div id="result" >
<!-- Creamos una tabla para visualizar los datos nuevos -->
<table>
<thead>
<tr>
<th>Fecha</th>
<th>Valor</th>
</tr>
</thead>
<tbody id="tabla">
</tbody>
</table>
</div>
</div>
</body>
<script>
//variable para limitar los valores a mostrar en la grafica
puntos=0;
maxPuntos=20;
//Script de la grafica
var canvas = document.getElementById('grafica'),
ctx = canvas.getContext('2d'),
//Datos iniciales vacíos
startingData = {
labels: [0],
datasets: [
{
//Colores de la grafica
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [0]
}
]
}
// Creamos una nueva gráfica y reducimos los pasos de animación para optimizar la velocidad de renderizado
grafica= new Chart(ctx).Line(startingData,{animationSteps: 10});
//Accedemos a nuestra base de datos
var ref = new Firebase("https://<tuApp>.firebaseio.com/");
//Hacemos referencia a nuestro nodo del sensor Temp
var tempRef = ref.child("Temp");
//Se ejecuta por cada valor existente en la BD
//y cada que se agrega un valor nuevo a la base de datos
tempRef.on("child_added", function(snapshot, prevChildKey) {
//recuperamos una captura del objeto leido
var t = snapshot.val();//t corresponderá a cada elemento dentro del nodo Temp
//Mostramos los datos en la consola de javascript
//console.log("Value: " + t.value);
//console.log("Timestamp: " + t.timestamp);
//Agregamos los datos a la tabla
$('#tabla').append('<tr><td>'+t.timestamp+'</td><td>'+t.value+'</td></tr>');
//Agregamos valores a la gráfica
grafica.addData([t.value], t.timestamp);
puntos++;
console.log(puntos);
if(puntos>maxPuntos){
grafica.removeData();
puntos--;
}
});
//Usamos JQuery para detectar clic en el botón
$('#btn').click(function(){
//Agregamos un dato nuevo en la base de datos
tempRef.push().set({
//generamos un valor aleatorio
value: Math.floor((Math.random() * 5) + 20),
//generamos un timestamp
timestamp: timeStamp()
});
});
</script>
</html>
En el código final agregamos la dependencia a la librería chart.js e incrustamos la gráfica por medio de un elemento canvas. Cada ves que firebase se dispara detectando un nuevo “child” en el nodo, agrega un nuevo punto en la gráfica, por ultimo limitamos la gráfica para que muestre solo las 20 nuevas lecturas del sensor.
En el próximo tutorial veremos como agregar datos a firebase desde nuestro microcontrolador con acceso a internet por medio de la REST API de Firebase y si, usaremos un photon (disponible en la tienda) para esta tarea.
Pueden ver el funcionamiento en el siguiente link -> https://iot-test.firebaseapp.com/
Y descargar el proyecto completo en nuestro canal de Github https://github.com/Make-a-tronik/iot-firebase
No te pierdas, aquí esta el indice de esta serie de tutoriales.
- Introducción
- Almacenando y recuperando datos
- Registrando lecturas con photon
- Recuperando los datos en Android
- Subiendo una Firebase webApp
- Mejorando la seguridad