Almacenando y recuperando datos – 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).

Captura de pantalla 2016-04-21 a las 7.48.04 p.m.

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:

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.

abr-21-2016 20-48-38

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.

abr-21-2016 21-44-03

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.

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.

abr-21-2016 23-42-49

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.

  1. Introducción
  2. Almacenando y recuperando datos
  3. Registrando lecturas con photon
  4. Recuperando los datos en Android
  5. Subiendo una Firebase webApp
  6. Mejorando la seguridad

 

 

 

Adrian MB

Me gusta la electrónica, programación y todo lo relacionado. Ing. en Mecatronica de la UPIITA del IPN y estudiante de Diseño Industrial en la UAM. @adrianmtzb http://adrianmb.mx

También te podría gustar...