Reto 2 de Backend

Para este reto las nuevas herramientas a entender son:

-Uso de update() y remove() con firebase.

-Uso de underscore.js

Entrega del Reto 2

La entrega de este reto será una aplicación que funcione como phonebook que nos permita listar, registrar, actualizar y eliminar contactos que estén almacenados en nuestro firebase , el reto implica conocimientos de frontend para construir el css, sugerimos utilizar bootstrap, pero el css y la manera como construyas la app dependerá de ti, la idea principal es utilizar javascript y firebase.

El formato a enviar es un comprimido (.zip o .rar) con los archivos que impliquen tu api, se evaluará funcionalidad, más allá del css que se utilice.

Crea tu Firebase

Si aún no lo has hecho, registrate para obtener una cuenta. Luego de haberlo hecho agrega el url de tu firebase a tu app como ya te lo explicamos.

var myFirebase = new Firebase('https://miFirebaseUrl.firebaseio.com/');

Crea tu estructura de datos

En lenguaje javascript definiremos la estructura que se almacenará en formato JSON en nuestro firebase, ya que se trata de un phonebook, los datos primordiales serían el nombre, direccion, celular y el correo del contacto. Como se observa cada atributo de item a excepción del id tiene asociado a un valor de un elemento html que nosotros escribiremos a la hora de hacer la vista html de nuestra app.

var contacto = { 
          id: ran(),
          nombre: $("#nombre").val(), 
          direccion: $("#direccion").val(),  
          celular: $("#celular").val(),
          correo: $("#correo").val()
        };
var ran = function () {
				  return '_' + Math.random().toString(33).substr(3, 10);
				};

Uso de update() y remove() con firebase

Ya sabemos como almacenar datos en nuestra base de datos en firebase. Ahora para poder actualizar y eliminar datos utilizamos update() y remove(), por ejemplo de la siguiente manera:

//actualizamos un elemento con un respectivo id
actualizar: function(item){
        myFireBase.child("contacto").child(item.Id).update(item);
    }
//eliminamos un elemento con un respectivo id
eliminar: function(id){
        myFireBase.child("contacto").child(id).remove();
    }

Control de errores

Dentro de nuestros métodos de actualizar y eliminar es recomendable incluir otro metodo que maneje errores al momento de conectarse y modificar elementos en la base de datos.

var onComplete = function(error) {
          if (error)
            alert('Error en la modificación/eliminación.');
          else
            alert('Item modificado/eliminado.');
        }

Renderizar un html para poder actualizar los datos en tiempo real

Ya que necesitamos mostrar los datos en tiempo real (actuales) que se encuentran almacenados en nuestra base de datos, utilizaremos un html renderizado, esto quiere decir que el html se construirá como texto y luego gracias a javascript se incrustara en el documento html. Para ello utilizaremos el método que ya conocemos en jquery, html().

$("elemento al que se le inserta el html").html("<p>HTML a insertar</p>");

Por ejemplo, si tenemos un tabla estática en html:

<table id="Tabla">
	<thead>
	  <tr>
	    <th>Nombre</th>
	    <th>Dirección</th>
	    <th>Celular</th>
	    <th>Correo</th>
	  </tr>
	</thead>
        <tbody>
	<!-- tbody llenado con js --> 
	</tbody>
</table>

Podemos agregar un html de la siguiente manera:

renderHtml: function(){
        var html="";
        myFirebase.on('value', function(data) {
            var contactos = data.val();
            //A continuacion explicaremos el use de _.each
            _.each(contactos['contacto'], function(contacto){
                html+="<tr id='"+contacto.id+"' data-id='"+v.id+"'>";
                    html+="<td>"+contacto.nombre+"</td>";
                    html+="<td>"+contacto.direccion+"</td>";
                    html+="<td>"+contacto.celular+"</td>";
                    html+="<td>"+contacto.correo+"</td>";
                html+="</tr>";                
            });
            $('#Tabla > tbody').html(html);
            //Para esto no olvidar incluir la libreria de jquery
        });

    },

Utilizando underscore.js

Utilizando la librería underscore.js y su método each(), nos permite repetir una funcion en una lista de elementos, iterando con cada uno. Puedes descargar la librería aquí.

Primero incluimos la librería en nuestro html.

<script src="http://underscorejs.org/underscore-min.js">

Luego podemos utilizar su método each.

_.each(lista, funcion(input))

hackspaceperu / reto-2-backend