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.
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.
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
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.
Comentarios
Publicar un comentario