En este artículo vamos a dar unos primeros pasos con "polymerfire" que son un conjunto de componentes Polymer para el trabajo con los servicios de Firebase. Polymerfire usa la nueva versión de Firebase, es decir, Firebase 3.x, por lo que es la librería de componentes adecuada para desarrollar nuevas aplicaciones con el servicio de Google.

Ten en cuenta que, en el momento de escribir este artículo Polymerfire está en versión 0.9.3, por lo que todavía irán agregando nuevas cosas. A día de hoy permite trabajar con la base de datos en tiempo real, pero es de suponer que irán agregando componentes para trabajar con otros servicios disponibles dentro de Firebase.

Polymerfire simplifica mucha operativa del trabajo con Firebase, pudiendo desarrollar a alto nivel, simplemente declarando mediante componentes las cosas que éstos deben realizar. Por debajo los componentes se encargarán de usar el SDK estándar de Javascript y realizar aquellas cosas para las que los hayamos configurado. En resumen, sin una línea de Javascript podrías trabajar con Firebase. Pero no te lleves a engaño, para una aplicación real será importante que conozcas cómo es el API de Javascript de Firebase, porque los componentes no serán capaces de hacer absolutamente todas las cosas que puedas llegar a necesitar.

Inicializar una aplicación Firebase

Ya que estamos trabajando con Firebase, vamos a tomarnos la molestia de inicializar la aplicación. Esto, aunque no es un requisito imprescindible, nos permitirá dos cosas:

1. Usar el servidor web integrado con Firebase, sin que se tenga que quejar de no haber inicializado la aplicación previamente.
2. Publicar luego nuestro ejemplo en el hosting gratuito de Firebase.

Esto lo haces con el comando:

firebase init

Instalar Polymerfire

Ahora instalarás Polymerfire en la carpeta del proyecto donde estás trabajando. Previamente habrás inciado Bower con el comando "bower init", que es algo en lo que no vamos a entrar porque está explicado previamente y porque tienes un completo artículo sobre Bower.

bower install --save polymerfire

Esto te instalará de una vez los componentes de Polymerfire y también todas sus dependencias, entre las que encuentras varias, como el SDK de Firebase para Javascript, el propio Polymer y otras.

Componente firebase-app

El trabajo con los componentes de Polymer para Firebase se divide entre varios custom elements de Polymer. El primero que debes conocer es "firebase-app". Este componente hace la función de configurar tu aplicación y mantiene la configuración disponible para cualquier otro componente que la quiera usar.

Para usarlo puedes partir de este código:

<firebase-app
      name="nombreApp"
      api-key="PON AQUÍ TU API-KEY"
      auth-domain="PON AQUÍ TU AUTH-DOMAIN"
      database-url="PON AQUÍ TU DATABASE-URL">
</firebase-app>

Los valores con los que configurarás ese elemento están en la consola de Firebase. En el artículo de introducción a la nueva versión de Firebase ya te explicamos cómo obtenerlos.

Mención especial merece el valor "name", que es el nombre de la aplicación que tendrás para esta configuración. Nosotros hemos colocado como valor "nombreApp" en este ejemplo, pero tú colocarás cualquier cosa. No es necesario que se llame igual que la app de Firebase que has creado en la consola. Es solo un nombre interno que se usará dentro de tu desarrollo con Polymer.

Componente firebase-document

Definida tu aplicación, ya estás en la posibilidad de usar otros componentes de Polymerfire para ir haciendo cosas interesantes. Creemos que lo más sencillo es comenzar por el componente "firebase-document" que sirve para acceder a un documento de la base de datos en tiempo real y mantenerlo sincronizado.

La sincronización que implementa "firebase-document" se produce a dos direcciones:

• Si cambia el dato en la base de datos remota, Firebase se encargará de hacernos llegar ese dato a nuestro firebase-document, sin que tengamos que hacer nada.
• Si modificamos nosotros el objeto que nos brinda "firebase-document", asignando cualquier nuevo valor, ese dato viajará automáticamente a la base de datos de Firebase, que a su vez sincronizaría el dato con cualquier otro cliente que lo esté consumiendo.

Usarás una sintaxis como esta para implementar este componente:

<firebase-document
    app-name="nombreApp"
    path="/objeto"
    data="{{misdatos}}"
></firebase-document>

Lo primero que ves es el atributo "app-name". Este debe tener el valor que se haya colocado anteriormente en el "name" del componente "firebase-app". Así le estás diciendo a firebase-document qué configuración de app debe usar. Es muy importante este campo, porque sin él no te funcionará.

luego encuentras el atributo "path". En él colocas el camino al documento que quieres acceder de la base de datos de Firebase.

Por último tienes "data", al que le estamos asignando un valor por binding: {{misdatos}}. Ese valor es importante porque será donde dentro del componente tendrás acceso a los datos que te traiga el firebase-document.

Mostrar datos que te expone firebase-document

Seguro que si ya estás familiarizado con Polymer no tendrás mucha dificultad para ahora mostrar todos los datos que necesites, de aquellos a los que has accedido con el elemento firebase-document.

Esos datos los tienes todos en el objeto que has bindeado a la propiedad "data", que en nuestro caso se llamaba "misdatos".

Ahora solo te quedaría mostrar en el template de tu componente aquellos datos que quieres visualizar. Vamos a suponer que el documento que te has traído tiene una propiedad llamada "mipropiedad" y que la quieres meter dentro de un párrafo.

<p>Este es el dato que quiero mostrar [[misdatos.mipropiedad]]</p>

<template is="dom-bind">
    Aquí sí se produce binding!!
</template>

Vídeo de los primeros pasos con Polymerfire

Este primer ejercicio con Polymerfire no tiene mucho más. No hemos visto el código completo, porque estamos seguros que con tus conocimientos en Polymer serás capaz de unir las piezas. Si no es así, simplemente mira este vídeo en el que verás mucha información que te aclarará diversos puntos que puedan estar poco claros para ti.