Firebase la simplicidad y agilidad de implementación Paso a Paso #SupportService

En este artículo vamos a implementar de forma muy elemental y simple un ejemplo basado en #Firebase sobre un modelo de soporte para comentarios aplicable a cualquier enfoque tradicional de #supportservice.

Vamos a crear un simple #html con la integración Firebase y a escribir un poquito de #JS para la funcionalidad.

<head>
   <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
   </script>
</head>


Luego vamos a utilizar una región para mostrar los mensajes y dos elementos para ingresar nombre y el mensaje de la interacción de soporte.


<div id='mensajesDiv'></div>

<input type='text' id='nombreInput' placeholder='Nombre'>
<input type='text' id='mensajeInput' placeholder='Mensaje'>

Ahora los datos desde #Firebase [recuerden que para implementarlo deben crear el soporte de datos]

var datos = new Firebase('https://***.firebaseio.com/');

Luego la rutina de detección para las pulsaciones, recolección de datos y el push a #Firebase.

$('#mensajeInput').keypress(function (e) {

           if (e.keyCode == 13) {

               var nombre = $('#nombreInput').val();

               var mensaje = $('#mensajeInput').val();
               datos.push({nombre: nombre, mensaje: mensaje});
               $('#mensajeInput').val('');
           }
       });

También vamos a codificar el callback:

datos.on('child_added', function(snapshot) {

     var mensaje = snapshot.val();

           mostrarSoporte(mensaje.nombre, mensaje.mensaje);

});


Y finalmente el detalle de la función de visualización:

function mostrarSoporte(nombre, mensaje) {

           $('<div/>').text(mensaje).prepend($('<em/>').text(nombre+': ')).appendTo($('#mensajesDiv'));

           $('#mensajesDiv')[0].scrollTop = $('#mensajesDiv')[0].scrollHeight;
     };

Muy simple y agile!


Les dejo la implementación completa

Licencia Creative Commons
Firebase la simplicidad y agilidad de implementación Paso a Paso #SupportService por Nicolas Bortolotti se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.

Entradas más populares de este blog

7 arquetipos #Polymer 1.0 puntos esenciales prácticos

El potencial de la nube en 5 pasos desde Buenos Aires y junto al ecosistema regional

El potencial de la nube en 5 pasos, Evento en The Pool Mexico DF