En este artículo explicamos cómo escribir datos en la base de datos en tiempo real que te ofrece Firebase. Cubriremos tanto el modo de trabajo con Firebase 2, como con Firebase 3 (la nueva versión publicada en 2016). El motivo es que este artículo se escribió originalmente con Firebase 2 y ahora lo estamos actualizando para Firebase 3. Ambos procedimientos están divididos en bloques diferentes del artículo, para no mezclar conceptos, aunque la mayoría de las cosas son comunes en una y otra versión.

Debes estudiarlo después de haber leído la parte de introducción a Firebase, que hemos publicado en el artículo Introducción a Firebase 3. Comenzaremos explicando la parte de escritura de datos con Firebase 3 y resumiremos la información bastante, para ser breves. Aunque, como esta operativa es similar a la que veníamos realizando en Firebase 2, puedes leer todo el artículo si necesitas afianzar más el conocimiento.

Instalar Firebase 3

Esta parte ya la hemos comentado en el artículo de introducción a Firebase 3, por lo que no repetiremos el asunto, ya que se trata simplemente de copiar y pegar un snippet que tienes en la consola de tu app Firebase.

Solo como alternativa decir que puedes usar Bower, u otros gestores de paquetes, para alojar el script de Firebase en tu proyecto.

bower install --save firebase

Luego colocaremos el script de Firebase en nuestra página, de la descarga realizada con Bower:

<script src="bower_components/firebase/firebase.js"></script>

Aunque ahora no entramos en ello, no te olvides a continuación, ya en un script tuyo, de realizar la inicialización de la aplicación Firebase con el snippet que encuentras en la consola. Insisto, todo esto está explicado en el artículo de introducción a Firebase 3.

Escribir datos en Firebase con Firebase 3

Como hemos explicado ya, el acceso al API para manejo de la base de datos de Firebase se consigue a través del servicio "database".

var databaseService = firebase.database();

A partir de este servicio tendré todas las funcionalidades que me permite el API de Firebase para el acceso a la base de datos en tiempo real.

Ahora se trata de obtener una referencia al lugar donde deseamos escribir datos.

var referencia = databaseService.ref('testRef');

Para escribir datos con Firebase usas los métodos set() o update() sobre una referencia. Así escribes justamente dentro de esa referencia aquella información que quieres que esté allí.

// escribo en esa referencia
referencia.set({
  campoTest: 'valor del test',
  ahora: new Date().getTime()
});

La diferencia entre set() y update() es que set() sustituye cualquier dato que haya en una referencia anteriormente, mientras que update() lo actualiza. Dicho de otra manera, set() hace que se borre cualquier información contenida en la referencia, poniendo la información nueva que se está seteando. Por su parte update() hace lo que conocemos como un "merge", es decir, cualquier información existente se actualiza a la información que se le está entregando y cualquier información que ya hubiera (y no se esté actualizando en el update), se mantiene.

Trabajo con promesas de Firebase 3

En Firebase 3 se hace uso intensivo de los mecanismos que conocemos como promesas, que nos permiten ejecutar código como respuesta a diversas situaciones. Las promesas forma parte del estándar de ES6, pero Firebase ya las implementan porque favorecen bastante la escritura y mantenimiento del código, así que si ya las conoces funcionan igual.

En el caso de una escritura de un dato en la base de datos las promesas nos sirven para escribir código que se ejecutará posteriormente al intento de escritura, pudiendo diferenciar entre un caso exitoso y un posible error.

En concreto, el método set() o update() nos devuelven una promesa, sobre la que podemos invocar tanto un método then() como un método catch(). A then() le pasamos la función que tiene el código que deseamos ejecutar cuando la escritura se ejecutó correctamente. A catch() le pasamos la función que se ejecutará si esa escritura produjo un error.

Todo eso en código se resume de la siguiente manera:

referencia.set({
    campoTest: 'Otro valor del test',
    ahora: new Date().getTime()
})
        .then(function() {
            console.log('dato almacenado correctamente');
        })
        .catch(function(error) {
            console.log('detectado un error', error);
        });

Breves notas sobre el uso de referencias

Recuerda que los datos de la base de datos de Firebase se organizan en un árbol, algo parecido a lo que conocemos como JSON. Así, cuando estás trabajando con datos, unos pueden estar dentro de otros y otros dentro de otros, para conseguir cualquier estructura de almacenamiento que necesites. Lo importante ahora es que, a nivel de referencias, todos esos niveles de anidación se separan mediante el carácter barra "/".

Por ejemplo, si tienes una lista de usuarios y cada uno tiene un identificador y una serie de datos como su nombre o email, tendríamos una estructura como esta:

users: {
  iduser1: {
    nombre: 'Miguel Angel Alvarez',
    email: 'malvarez@desarrolloweb.com'
  },
  iduser2: {
    nombre: 'Alvaro Martínez',
    email: 'alvaro@escuela.it'
  }
}

Si mediante Firebase necesito acceder a la lista de usuarios usaré una referencia como esta:

var referencia = databaseService.ref('users');

Si ahora quiero acceder al primer usuario de la lista, entonces podré construir mi referencia expresando los niveles de anidación con la "/".

var referencia = databaseService.ref('users/iduser1');

Si quiero acceder únicamente al nombre del usuario primero, entonces mi referencia quedaría así:

var referencia = databaseService.ref('users/iduser1/nombre');

Como alternativa, puedes navegar entre referencias por medio del método child() del API de Firebase:

var referencia = databaseService.ref('users').child('iduser1').child('nombre');
referencia.set('Miguel Angel Alvarez Sánchez');

En el siguiente código puedes ver un ejemplo completo de uso de Firebase para escribir datos en la base de datos en tiempo real.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Firebase Cliente Web</title>
</head>
<body>
    <h1>Test con Firebase</h1>    

    <script src="bower_components/firebase/firebase.js"></script>
    <script>
    // Inicializo Firebase
    var config = {
        apiKey: "AIzaSyAK6ZTPi-aPUoJhTggEtTW2csVzU9I371Y",
        authDomain: "nuevo-firebase.firebaseapp.com",
        databaseURL: "https://nuevo-firebase.firebaseio.com",
        storageBucket: "nuevo-firebase.appspot.com",
    };
    firebase.initializeApp(config);

    // accedo al servicio de trabajo con la base de datos en tiempo real
    var databaseService = firebase.database();

    // obtengo una referencia
    var referencia = databaseService.ref('testRef');

    // escribo en esa referencia
    referencia.set({
        campoTest: 'valor del test',
        ahora: new Date().getTime()
    });

    // realizo uso de las promesas
    referencia.set({
        campoTest: 'Otro valor del test',
        ahora: new Date().getTime()
    })
            .then(function() {
                console.log('dato almacenado correctamente');
            })
            .catch(function(error) {
                console.log('detectado un error', error);
            });

    
    // obtengo una referencia
    var referencia = databaseService.ref('users').child('iduser1').child('nombre');

    // escribo en esa referencia
    referencia.set('Miguel Angel Alvarez Sánchez');

    </script>
</body>
</html>

Escribir datos en Firebase 2 y conceptos adicionales de interés para desarrolladores Firebase

En esta segunda parte del artículo vamos a conocer el uso de dos métodos del API de Firebase 2 para escribir datos en la base de datos que nos ofrece el servicio. Serán los métodos set() y update() que poseen los objetos referencia.

Para entender lo que vamos a realizar es especialmente recomendable que comiences la lectura por el artículo de iniciación a Firebase, porque hay varios conceptos que vamos a dar por sabidos en esta ocasión.

A lo largo de este texto te explicaremos a introducir un objeto, con diferentes propiedades y valores, en Firebase y luego cómo se puede actualizar para cambiar el estado de sus propiedades o insertar otras nuevas.

Obtener una referencia

Como debes saber, el primer paso para conectar con Firebase desde Javascript es obtener una referencia, aparte de incluir el propio script de Firebase como se mencionó en el artículo anterior. Para ello creamos un nuevo objeto referencia ayudados por la función Firebase().

var ref = new Firebase("https://ejemplo.firebaseio.com/appData");

Esta operación es siempre igual cuando se trabaja con Firebase, solo cambiará la URL de nuestra app y el dato en concreto que quieras acceder con la referencia.

En tu base de datos crearás cierto orden y en la jerarquía que tengas de elementos en el JSON tus datos se encontrarán en un lugar u otro. En esta ocasión estamos accediendo a un documento que cuelga de la raíz llamado "appData".

Podrás apreciar que esta referencia nos lleva a un documento que no existe todavía dentro de tu aplicación Firebase. Esto no es problema, no va a producir ningún error, ya que a Firebase no le importa que la referencia te lleve a una dirección que está vacía. Además dentro de poco insertaremos datos ahí.

Método set() para asignar un objeto a una referencia

Dada nuestra referencia, con el método set() podemos asignarle un valor. Podría ser una simple cadena o un número, pero también un objeto todo lo complejo que deseemos. Simplemente indicamos aquella información que queremos asignar a la referencia como parámetro a set().

var obj ={
      name: "Juegos de Mesa",
      company: "EscuelaIT",
      email: "contacto@escuela.it"
};
ref.set(obj);

En este código primero hemos creado un objeto por medio de un literal de objeto Javascript y luego lo hemos asignado a la referencia. Si lo ejecutas sobre tu aplicación Firebase verás que se crea el juego de datos sobre la referencia "appData".

Por si algo no queda claro, te proporcionamos el código entero del .html con el que podrías ejecutar esta escritura de datos sobre la base de datos de Firebase.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Crear registros en Firebase</title>
  <script src="bower_components/firebase/firebase.js"></script>
  <script>
    var ref = new Firebase("https://juegosdemesa.firebaseio.com/appData");
    var obj ={
      name: "Juegos de Mesa",
      company: "EscuelaIT",
      email: "contacto@escuela.it"
    };
    ref.set(obj);
  </script>
</head>
<body>
  <h1>Ejemplo para escribir datos en Firebase</h1>
</body>
</html>

El método set() siempre sobrescribe

Una cosa que debemos ser conscientes y que es fuente de errores común cuando estamos iniciando en Firebase es que set() sobreescribe cualquier cosa que haya en una referencia.

Por ejemplo, si mi aplicación tiene datos en una referencia como los que se asignaron en el paso anterior:

appData: {
      name: "Juegos de Mesa",
      company: "EscuelaIT",
      email: "contacto@escuela.it"
}

Y sobre esta referencia cargo ahora otro objeto:

var obj2 ={
      email: "info@escuela.it",
      language: "es"
};
ref.set(obj2);

El nuevo valor enviado con set() machacará por completo el objeto appData anterior. Por tanto después de la operación el estado será:

appData: {
      email: "info@escuela.it",
      language: "es"
}

Ni rastro de las propiedades antiguas "name" o "company".

Actualizar datos con update()

Si lo que queremos es que nuestro objeto no machaque al anterior, sino que lo actualice, usaremos el método update().

var obj2 ={
      email: "info@escuela.it",
      language: "es"
};
ref.update(obj2);

El método update(), a diferencia de set(), no machaca lo que hubiera anteriormente en una referencia, sino que hace un merge (fusión) de la información nueva con la vieja. Si en la referencia anteriormente había un dato que se está mencionando en el update (como "email" en este anterior código), lo sobreescribe. Si el atributo no se encontraba antes, simplemente lo crea con el valor dado.

Por tanto, update() lo usaremos tanto cuando necesitemos actualizar el valor de una propiedad de un objeto, como cuando queramos crear nuevas propiedades de un objeto dejando intactas las anteriores.

En futuros artículos explicaremos otro método interesante, llamado push(), que nos permite enviar elementos, generalmente para crear colecciones de datos, a Firebase.

Vídeo explicativo de la escritura de datos en Firebase

Puedes experimentar estos dos métodos en tu propia aplicación Firebase para ir entendiéndolos mejor. A pesar de estar haciendo cosas sencillas es normal que todavía se te presenten algunas dudas al tratarse de un nuevo sistema. Si es tu caso hemos preparado el siguiente vídeo.

En este videotutorial verás cómo creamos un objeto usando set() y cómo se actualiza nuestro juego de datos en Firebase. Luego mostramos la diferencia entre hacer una operación de update y una de set.

Por último mostramos cómo se puede acceder a los datos de Firebase desde otra página web, que estará suscrita a los eventos producidos cuando se cambie el valor de un dato, para actualizarlo en la página automáticamente.