Angular 2 y FireBase - PARTE 2 - Comenzamos un pequeño chat de ejemplo

     Hoy vamos a ver la segunda parte de nuestro tutorial práctico de Angular 2 y Firebase.  En el anterior artículo vimos como crear una base de datos en Firebase y como instalar y configurar Firebase en un proyecto Angular 2.

      A partir de este artículo abordamos el caso práctico de un chat muy básico, donde veremos las características principales de Firebase. Firebase ante todo es una base de datos documental en tiempo real.

   En este segundo artículo partimos de una pantalla que previamente he diseñado, modificando la vista con la que acabamos en el artículo anterior. La nueva pantalla es la siguiente:

  Abajo se pondrá el Nick y el mensaje que queremos que aparezca en la zona del chat, que obviamente es la zona blanca central, donde irán apareciendo los mensajes.
   En este segundo artículo, partimos también de la base de datos vacía, ya que los diferentes usuarios los va a ir creando dinámicamente la aplicación.

 

Al final de este artículo encontrarás el video de esta segunda parte. Como resumen del video, la idea que hemos aplicado es que los usuarios o nick se van a ir creando de manera dinámica, en el momento en que se escribe y el campo Nick pierde el foco. Es decir, imagínate que escribimos el nick "pepe" y a continuación pasamos al campo de mensaje para escribir un mensaje. En ese momento, lo que hará el código será buscar el nick "pepe" en la base de datos. Esto lo hacemos en la linea: 

if (this.myUser != null && this.myUser.nick != "") {

       var lookUser = this.af.database.list("/usuarios", {

          query: {

             orderByChild: "nick",

             equalTo: this.myUser.nick

          }

       }).subscribe(valor => {

         valor.forEach(v => {

            

            if (v.$key != null && v.$key != "") {

               encontrado = true;

               console.log("El usuario ya se encuentra");

               return;

            }

         });

Es decir, el objeto this.af.database, nos da acceso a toda la base de datos de Firebase y todos sus métodos. Entre esos métodos está el método list, que está implementado como un observer, de tal forma que hay que subscribirse a él para recibir el resultado. Obsérvese que la consulta va a buscar a la tabla usuarios, pero es que incluso la tabla usuarios la primera vez todavía no existe. Esto se puede hacer en Firebase sin problemas.  Y le decimos que busque cualquier registro cuyo campo nick tenga el valor que acabamos de escribir en nuestra caja de texto "nick", cuayo valor lo tenemos en myUser.nick.

   Recibimos la respuesta siempre como un array, de ahí que tengamos que hacer el forEach, y para cada registro que nos devuelve, simplemente verificamos que tiene un identificador de registro key correcto. Aquí lo importante es registrar que ha sido encontrado. Esto lo hacemos con la variable booleana "encontrado".  De tal forma que a a continuación del forEach, ya sabremos si tenemos que crear un nuevo usuario en la base de datos o no.  Esto lo hacemos en la siguientes lineas: 

 if (!encontrado) {

           // al insertar el usuario, recogemos el identificador que nos devuelve firebase.

   this.myUser.key = this.usuarios.push({nick: this.myUser.nick}).key;

   console.log("usuario creado con key " + this.myUser.key);

 }

   

    

   Y vemos como se inserta o crea un nuevo registro en la base de datos de Firebase. Con el método push creamos el nuevo registro, con el único campo que va a tener por el momento, que es el campo nick. Firebase cuando inserta un registro con el método push, automáticamente crea un identificador único para ese registro, que devuelve en el atributo key. Este atributo key también lo guardamos en nuestro objeto myUser.

 Unicamente habría que añadir una pequeña mejora, para que no diferencie entre mayúsculas y minúsculas a la hora de buscar los nicks. De esta manera no se podrían repetir nicks como "Pepe" y "pepe" o "PEPE". 

    Buenos, hasta aquí este artículo. En el siguiente artículo y video veremos como crear y mostrar los diferentes mensajes que cada usuario vaya escribiendo.

  Saludos a todos y hasta la próxima.