En el pasado artículo explicamos qué es Polymerfire y nos introdujimos en el inicio de un proyecto Firebase + Polymer usando este paquete de Custom Elements basados en Polymer. En resumen nos permiten realizar operativas de acceso a la base de datos en tiempo real de Firebase de una manera declarativa, simplemente usando elementos de HTML que configuramos mediante sus propiedades.

Ahora, sobre esa base de conocimiento, vamos a seguir aprendiendo acerca de Firebase, acercándonos al trabajo con colecciones de elementos, que nos traeremos vía firebase-query. Este componente te permite no solamente acceder a datos de Firebase, sino mantenerlos sincronizados con todos los usuarios que puedan estar conectados a la misma fuente de datos.

Usaremos la nueva versión de Firebase, la 3.x, que tiene un nuevo SDK y nuevos componentes de Polymer para el acceso a los servicios de Firebase.

Colección Vs arrays en Polymerfire

Comenzaremos aclarando qué es una colección de elementos, que vendría a ser lo mismo que un array. Ten en cuenta que en Firebase no hay arrays y lo que tenemos son colecciones porque realmente se crean por medio de objetos en los que tenemos "n" elementos, cada uno de ellos bajo una propiedad de objeto, que generalmente tendrá un identificador creado por Firebase al insertarlos. Este detalle es muy importante y no lo vamos a comentar más porque fue ampliamente explicado en el artículo Trabajo con colecciones en Firebase y Javascript.

Lo que pasa es que, para la construcción de estructuras de repetición con Polymer usamos el template dom-repeat y éste necesita de un array para iterar, por lo que nuestros componentes firebase-query están preparados para convertir en un array lo que en Firebase se almacena como una colección.

Componente firebase-query

El componente firebase-query se encarga de hacer todo el trabajo de ir hasta Firebase para recoger un conjunto de datos, proporcionarlos en una aplicación Polymer y mantenerlos sincronizados con la base de datos remota. En caso que se modifiquen los datos en local los expone en la base de datos de Firebase y, por su puesto, si se modifican en Firebase se actualizan en la parte de Polymer.

Para ello, de manera declarativa, configuramos el componente indicando la aplicación que vamos a usar, así como el lugar donde está la colección de elementos dentro de la base de datos de Firebase. Una vez recibidos los datos, el componente nos los ofrecerá en una de sus propiedades.

<firebase-query
    app-name="testpf"
    path="/contactos"
    data="{{contactos}}">
</firebase-query>

Esta es la descripción de los atributos configurados en el componente, esenciales para su funcionamiento.

• app-name: sirve para indicar el nombre de la aplicación que usamos como servicio. Atención a este valor, porque lo tendrás que definir mediante el componente firebase-app que fue un asunto ya tratado en la introducción a Polymerfire.
• path: la ruta al lugar de la base de datos donde está la colección que necesitamos acceder.
• data: es la propiedad donde firebase-query colocará el array resultado de acceder a la colección.

Es importante pararse en el atributo data="{{contactos}}". Aquí se produce un bindeo de la información que hay en Firebase a una propiedad llamada "contactos" dentro del componente que se está programando. Ese binding debe de ser, generalmente, a dos bandas (notación dobles llaves) para que se produzca la deseada sincronización con la base de datos en tiempo real.

Recorrido a los datos de la colección

Esto ya es una parte que depende directamente de Polymer, ya que los recorridos se realizan con un template de repetición que está definido en la propia librería de web components.

Básicamente el código será como el siguiente:

<template is="dom-repeat" items="[[contactos]]" as="contacto">
  <p>
    Nombre: [[contacto.name]], email: [[contacto.email]]
  </p>
</template>

Básicamente tenemos el array "contactos" que es el que se usa como fuente para generar la repetición. Dentro del template, que se repetirá para cada contacto del array, conoceremos al elemento actual con la variable "contacto". No vamos a entrar mucho más en este tipo de estructuras ya que son materia del Manual de Polymer.

Sincronización con la base de datos en tiempo real

Como hemos mencionado ya, la gracia de usar la database de Firebase es que los datos se mantienen sincronizados. Al mostrar el array no nos tenemos que preocupar en nada sobre esta sincronización pero si queremos modificar el array sí que es importante tener en cuenta algunos detalles. En concreto:

1. Si un dato cambia en el origen, Polymer y los componentes Polymerfire se encargarán de todo para que los datos mostrados sean los actuales. En otras palabras, la actualización del template se realizará de manera transparente para el desarrollador.
2. Pero para modificar el array debemos tener en cuenta diversos detalles, puesto que el enlace hacia Firebase está sujeto a la necesidad de usar funciones del SDK de Firebase.

En este artículo queremos mostrarte cómo agregarías un elemento al array. Como decimos, no lo agregarás con la función push() nativa de Javascript, sino con push() de la librería de Firebase.

Imagina que tienes un objeto que quieres agregar en una variable:

var nuevocontacto = {
  name: 'Miguel Angel Alvarez',
  email: 'miguel@desarrolloweb.com'
}

Ese objeto lo agregarás a través de la función push(), que depende de una referencia a la base de datos de Firebase. Tal referencia la puedes obtener a partir del componente, por su propiedad "ref".

Lo más cómodo es que coloques un identificador al componente, para luego poder acceder al componente para cualquier operación:

<firebase-query
  id="firebaseq"
  app-name="testpf"
  path="/contactos"
  data="{{contactos}}">
</firebase-query>

Ahora, dentro de un método de Polymer podrás acceder al componente a través de this.$.firebaseq y a continuación a su referencia en la propiedad "ref", sobre la cual realizaremos el correspondiente push(). El código sería parecido a este:

this.$.firebaseq.ref.push(nuevocontacto);