Introducción a Polymerfire (Firebase con Polymer)

  • Por
Pasos para realizar una aplicación Firebase con Polymer, usando Firebase 3 y los componentes de Polymerfire.

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.

Nota: Doy por hecho que estás familiarizado tanto con Firebase como con Polymer. Si no es así simplemente consulta el Manual de Firebase o el Manual de Polymer.

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

Nota: Obviamente, necesitas tener las herramientas de Firebase instaladas. Lee el artículo de las firebase-tools para más información detallada sobre este proceso.

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.

Nota: Polymerfire es sencillo de usar. Realmente no necesitas más para comenzar, pero lo cierto es que existen muchos otros componentes de Polymer que también se llevan muy bien con Firebase y ofrecen cosas tan interesantes como la posibilidad de mantener en local los datos de tu aplicación, incluso si el ordenador del cliente pierde la conexión a Internet. Esa parte, un poco más avanzada, la podremos ver más adelante.

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.

Nota: Nunca te olvides de hacer el correspondiente "import" de los componentes que quieras usar. Los de Polymerfire estarán en la carpeta "bower_components/polymerfire/".

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.

Nota: Un documento es cualquier información que tienes en la base de datos de Firebase. Sabes que es una base de datos "documental" en la que se usa JSON para guardar información. Cada dato será un objeto JSON con sus propiedades y valores. Eso es un documento.

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.

Nota: Es importante señalar que para el acceso o modificación de los datos de Firebase se tienen en cuenta los permisos definidos en las reglas de seguridad. Ojo al detalle sobre todo en proyectos que iniciamos, porque las bases de datos de Firebase 3 vienen protegidas para que solo se pueda leer o escribir si existe un usuario autenticado. En este artículo no entramos todavía en autenticación de usuarios y tendrías que modificar las reglas para que permitieran acceso al documento para que te funcionen los ejemplos. Este detalle está más detalladamente explicado en el vídeo que encontrarás al final del artículo.

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.

Nota: Fíjate que hacemos el binding con dos llaves, porque queremos que sea en dos direcciones, como antes hemos especificado. Recuerda que en el Manual de Polymer tienes más información sobre el binding.

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>

Nota: Ten en cuenta que los mecanismos de binding en Polymer solo se dan si estás dentro de un componente o bien, si no estás en un componente, usando el "template autobind" aka "template dom-bind":

<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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Edu Gálvez

27/8/2016
Gracias
¡Por fin lo entiendo!
Y funciona
Gracias por tu excelente didáctica
Tienes un seguidor nuevo ;-)