fcbk
Conéctate con TwitterConéctate con Facebook
0

Manejo de datos en tiempo real con Polymer y Firebase

1909Puntos

hace 2 años

Polymer nos ofrece muchas ventajas en el desarrollo de aplicaciones web modernas. En este artículo vamos a aprender lo fácil que resulta unir datos directamente desde el front-end. La ventaja es que sólo debemos colocar el nombre de la variable entre corchetes para mostrarlos directamente en el DOM. Por ejemplo, {{nombre}}. Además, también aprenderemos a mantener los datos sincronizados en tiempo real usando el poder de Firebase. Si aún no conoces esta tecnología o no sabes cómo empezar con tu configuración, te recomiendo leer este artículo que te enseñará el manejo básico del Polymer Starter Kit con un ejemplo en Github al que hoy agregaremos real-time-data-binding. Empecemos por instalar los componentes adicionales en nuestra copia local usando bower.

  • < paper-input >
    • bower install --save PolymerElements/paper-input
  • < firebase-collection >
    • bower install --save GoogleWebComponents/firebase-element

Ahora que están instalados, debemos colocar las rutas a los archivos principales en la lista de Polymer Elements de nuestra aplicación. Estos importarán todo lo necesario usando HTML Imports.

No te preocupes por la compatibilidad, Polymer se encarga de implementar los Polyfills necesarios para que puedas usarlos sin problemas. app/elements/elements.html

<linkrel="import"href="../bower_components/paper-input/paper-input.html"><linkrel="import"href="../bower_components/firebase-element/firebase-document.html">

Para permitir al usuario ingresar datos, usaremos el componente paper-input-container. Este nos creará una entrada de texto, que incluye animaciones y diseño en Material Design. Dentro de paper-input-container colocaremos una etiqueta label para declarar el texto que deseamos mostrarle al usuario. Además, agregaremos una etiqueta input para la entrada de datos. Ahí también es necesario agregar el parámetro is = “iron-input”. Éste nos activará las funciones para cuadros de texto en Polymer y el parámetro bind-value = " {{nombre}}", que indica el nombre de la variable a la que vayamos a asociar la entrada de texto. index.html

<paper-input-container> <label>¿Como te llamas?</label> <input is="iron-input" bind-value="{{nombre}}" autofocus=""> </paper-input-container> <paper-input-container> <label>¿Cual es tu apellido?</label> <input is="iron-input" bind-value="{{apellido}}"> </paper-input-container> ¡ Hola {{nombre}}{{apellido}} !

Sincronizando datos en tiempo real con Firebase

El componente firebase-element incluye todo lo necesario para integrar Firebase en Polymer y nos hace muy sencillo mantener sincronizados los datos de todos los usuarios. Para nuestro ejemplo usaremosfirebase-document, que nos permite mantener sincronizado en tiempo real un objeto JSON entre todos los usuarios conectados a la aplicación. Configurarlo es tan sencillo como declarar la ruta hasta el objeto en Firebase con la propiedad location y asignarle una variable local con la propiedad data.

<firebase-documentlocation="https://TU-APP.firebaseio.com/globalMessage"data="{{globalMessage}}"></firebase-document>

Ahora podemos usar el objeto JSON almacenado en la variable directamente en otras partes de nuestra aplicación. Y los cambios son actualizados en tiempo real de forma automática.

<paper-input-container><label>Mensaje en tiempo real</label><inputis="iron-input"bind-value="{{globalMessage.content}}"></paper-input-container>

{{globalMessage.content}

Para probar esta función sin problemas, nuestro ejemplo en Github ya viene conectado a una base de datos de pruebas para Firebase con capacidad de 50 conexiones. Una cuenta de paga no tiene límite en el número de conexiones que puede manejar. Y si quieres descubrir más acerca de las diferentes capacidades de la librería de Google y convertirte en un profesional del desarrollo usando Web Components, te invito a registrarte al curso de Polymer de Platzi.

Cesar
Cesar
@reicek

1909Puntos

hace 2 años

Todas sus entradas