¡Crea tu primer chat en tiempo real con Firebase!

En este tutorial aprenderás a crear de manera muy sencilla y rápida un chat en tiempo real para web, utilizando Firebase, la herramienta de Google dedicada al desarrollo de aplicaciones.

¿Qué es Firebase?

Es una herramienta de desarrollo para aplicaciones web y móviles de Google. En ella se encuentran herramientas que facilitan en gran medida el labor de desarrolladores al momento de realizar desde demos hasta aplicaciones robustas.

¿Qué puedo hacer con Firebase?

Muchas cosas WUUUU. Firebase cuenta con un gran número de herramientas poderosas, tales como:

  • Base de datos (no relacional) en tiempo real

  • Autenticación de usuarios por medio de correo electrónico, Facebook, Twitter, Gmail o Github.

  • Capacidad de poder hostear tu aplicación directamente desde la plataforma

  • Notificaciones Push para Android e iOS

  • Un Storage para poder subir imágenes, archivos, etc.

Con todas estas herramientas combinadas es posible emular el backend de una aplicación web (emular MÁS NUNCA SUSTITUIR).

¿Qué necesito para utilizar Firebase?

Al ser propiedad de Google, basta con que tengas una cuenta de Gmail y LISTO. Con ella podrás acceder a todas las herramientas mencionadas anteriormente, además también podrás ver la documentación para utilizarlas.

Ahora que sabemos que es Firebase, sus herramientas y lo necesario para utilizarlo comencemos a crear nuestro chat.

Una vez teniendo nuestra cuenta de Gmail, accederemos a https://firebase.google.com/ e iremos a ACCEDER.

alt

Accederemos como normalmente lo hacemos a los servicios de Google con nuestro correo electrónico y nuestra contraseña.

alt

Muy bien! Ya estamos logueados, ahora daremos click en Ir a la consola.

En la consola podremos ver nuestro proyectos que hemos estado trabajando, en nuestro caso no tenemos ninguno. Así que crearemos uno nuevo CREANDO NUEVO PROYECTO.

Elegiremos un nombre para nuestro proyecto y nuestro país de origen, en nuestro caso serán “ChatFirebase” y “México” a menos que seas extranjero.

Listo! Nuestro proyecto ha sido creado y ya podremos configurarlo a nuestro gusto. Como en nuestro caso haremos el chat para web, seleccionamos el ícono con la leyenda "Añade Firebase a tu aplicación web." Aparecerá un modal y en él se mostrará un código Javascript que añadiremos a nuestro archivo HTML en el siguiente módulo, por lo mientra sólo copia y pega el código.

Maquetando y probando nuestro proyecto

Requisitos

Debido a que escribiremos código HTML además de Javascript, necesitaremos un editor de texto, que puede ser Sublime Text, Visual Studio Code, Atom e inclusive Notepad++. Con estos podremos escribir más rápido código y a su vez poder avanzar más rápido.

Ahora crearemos una carpeta en la ubicación que cada quien guste dentro de su ordenador. Posteriormente abriremos el editor de su gusto y abriremos la carpeta que acabamos de crear en él. En mi caso utilizaré Visual Studio Code y la carpeta la nombraré ChatFirebase

Generaremos un nuevo archivo al que llamaremos index.html y dentro de él escribiremos la estructura básica de un documento HTML5.

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <meta charset="UTF-8">
    <title>Chat Firebase</title>
</head>  
<body>

</body>  
</html>  

Dentro de las etiquetas <body> </body> generaremos un div, un input de tipo text y un botón, de la siguiente manera:

 <div id="chat">
 </div>
 <input type="text" id="message">
 <button id="enviar">Enviar</button>

En el div se mostrarán todos los mensajes que se encuentren en nuestro chat, en el input escribiremos el mensaje que deseemos enviar y con el botón lo enviaremos.

Es hora de añadir el código que nos arrojó Firebase a nuestro archivo. Lo agregaremos casi al final del archivo, justo ANTES de la etiqueta </body>
Todos los scripts se suelen poner en esta parte debido a que si estos son muy pesados y se colocan antes del body, la página tardará más en renderizar.

También nos traeremos jQuery, que es una librería de Javascript que nos simplifica la forma de escribir Javascript en nuestro archivos. Para traerlo, nos vamos a https://code.jquery.com/ y seleccionamos la versión minified de Jquery 3.x.

Copiamos (manualmente, debido a que el botón de jQuery no funciona) y pegamos el <script> justo ANTES de los scripts de Firebase, quedando nuestro archivo así hasta el momento.

¡Ya está todo listo! Pero nos falta un detalle un detalle muy muy importante: Firebase necesita de un servidor local para funcionar correctamente. Es decir, necesitamos correr nuestro proyecto en un servidor local para que funcione.

Para los usuarios Windows y que cuenten con XAMPP, WAMP, AMPPS o alguno otro instalado, servirá metiendo nuestro proyecto en su carpeta htdocs o www.


Para los usuarios MacOS o Linux y que cuenten con python3 instalado podrán correr un servidor local de python con el siguiente comando: python3 -m http.server

Este comando deberán ejecutarlo en la carpeta de su proyecto, justo donde se encuentra su archivo index.html


Y en caso de que no tengan ni una ni otra, hay una alternativa más: Google Chrome nos ofrece una extensión llamada Web Server For Chrome, la buscamos así en el buscador y la instalamos. Posteriormente se abrirá un pequeño panel de administración y listo.

Ahora si ¡A codear!

Base de datos en tiempo real

  • Configurando Firebase

Regresemos a nuestro navegador, y en al sidebar de la izquierda seleccionaremos la pestaña "Database"

Una vez ahí veremos que nos sale una notificación en color azul que cita lo siguiente “Las reglas de seguridad predeterminadas requieren que los usuario estén autenticados”.

¿Qué quiere decir? Que debemos estar autenticados para poder acceder a la base de datos en tiempo real. Pero no lo estamos… así que modificaremos eso.

En las tabs, seleccionaremos REGLAS . una vez ahí modificaremos las líneas que dicen “auth != null” a “auth == null” y con esto podremos utilizarla sin problemas. Damos click en Publicar y listo.

  • ¿Qué clase de SQL es esto?

Como mencionamos anteriormente, la base de datos de Firebase es NO RELACIONAL. Pero, ¿Qué quiere decir esto?.
La base de datos no es como las que utilizamos en MySQL, SQL Server, PostgreSQL, etc. Aquí no hay tablas ni registros. Aquí los datos se almacenan en formato JSON, como se muestra en la siguiente foto:

Las base de datos NoSQL se manejan mediantes ramas, subramas que tienen un padre y distintos atributos que tienen una llave y un valor específico.

Lo que haremos será lo siguiente: con nuestro proyecto, crearemos una rama llamada “mensajes” y dentro de ella colocaremos todos los mensajes que se envíen a nuestro chat, cada mensaje contará en un inicio solo con el texto del mensaje, y puede llevar otros parámetros opcionales como la fecha en que fue enviado.

{
  "mensajes": [
    {
      "mensaje":"hola"
    },
    {
      "mensaje":"como estas"
    },
    {
      "mensaje":"otro"
    }
  ]
}

Observadores en jQuery para botones

¿Recuerdan que añadimos jQuery a nuestro proyecto en pasos anteriores? Pues bueno, es momento de utilizarla!. La magia de jQuery se centra en la simplicidad de escribir Javascript puro. Por ejemplo si quisieramos acceder al valor de un input que tenemos en un formulario con Javascript puro sería de la siguente manera:

var data = document.getElementById('dato').value();  

Pero utilizando jQuery se resume a lo siguiente:

var data = $('#dato').val();  

Más sencillo ¿no?.

Colocaremos un observador a nuestro botón, para que cuando se dé click a él, podamos hacer lo necesario para mandar y recibir datos directamente desde Firebase.
La sintaxis necesaria para hacer esto es:

<script>  
$('#{id}').on('click', function(){
    //Write some code here
});
</script>  

Donde {id} será el id que nosotros colocamos en nuestro botón, que en nuestro caso es enviar y se le añade como prefijo un # debido a que es un id, si fuera una clase utilizaríamos .. Posteriormente le decimos que estamos en espera de un click y cuando esto suceda se disparará una función anónima dónde irá toda la magia. Por el momento para probar que esto funciona, mandaremos un mensaje a consola:

<script>  
$('#{id}').on('click', function(){
    console.log("Funciona!");
});
</script>  

Para comprobar, abrimos nuestro proyecto en el servidor y si es Google Chrome presionamos F12 para abrir las herramientas de desarrollador, nos vamos a Consola y al dar click deberá mandar el mensaje.

Enviando e insertando datos a la DB de Firebase

Una vez que se comprobó que el observador funciona correctamente, es hora de enviar mensajes a la base de datos!

El primer paso y el más importante de todos es en un nuevo script donde igual se encuentra el observador, generar una variable que sea la instancia a todos los métodos de nuestra base de datos. ¿Cómo lo hacemos? De una manera mega sencilla:

<script>  
var db = firebase.database();  
</script>  

Y listo!

El siguiente paso es dentro del observador del botón, extraer lo que traiga el input y POR EL MOMENTO mandarlo a consola para hacer test.

$('#enviar').on('click', function(){
var mensaje = $('#message').val();  
console.log(mensaje);  
});

Quedando los scripts de nuestro archivo de la siguente manera:

ACTUALIZACIÓN:
En la imagen mostrada arriba, tengo un error de sintaxis, ya que tengo

var mensaje = $('message').val();  

Pero de esta manera no funcionará, ya que dentro de los paréntesis y de las comillas faltó colocar el # indicando que es un id, y el id del input es message. La línea corregida queda de la siguiente manera:

var mensaje = $('#message').val();  

Y probando en nuestro navegador, esto es lo que debería de suceder:

Métodos para enviar data a Firebase

Firebase cuenta con varios métodos con los cuales tu puedes enviar data a su base de datos. Uno de ellos es set y es el que ocuparemos en primera instancia.

Antes de todo debemos de decirle a Firebase la referencia donde se almacenará todo lo que mandemos. Es decir, en que rama o subrama nosotros queremos guardar los datos. En nuestro caso utilizaremos un rama llamada "mensajes". La sintaxis para realizar lo anterior es la siguiente:

var db = firebase.database();  
$('#enviar').on('click', function(){
    var mensaje = $('#message').val();
    db.ref('mensajes').set({
        mensaje: mensaje
    });
});

Traducido a castellano, el código anterior lo que hace es al momento de que se le da click al botón, extrae el texto que se escribió en el input, posteriormente se le dice a la base de datos de Firebase que en la rama llamada mensajes va a guardar datos con el método set y entre los paréntesis del método se crea un objeto tipo JSON, dónde nosotros podemos poner todos los atributos que queremos guardar en ese objeto.

En nuestro caso solo tenemos un atributo que es el mensaje, por lo que el primer elemento de esa línea es la clave del atributo y después de los dos puntos es el valor del atributo. Por lo que si nosotros escribimos en el input el texto "hola!", en Firebase se verá como:
mensaje: hola!.

Vamos a probar y ver como funciona. Haremos justamente lo anterior: escribir algo en el input y dar click en el botón, con la diferencia de que en lugar de verlo en consola, lo veremos ya en Firebase, algo así:

Mandemos otro mensaje y ... ¿Qué pasó?

En lugar de guardar el nuevo mensaje, sobresccribió el primero! Esto es debido al metodo set, que lo que hace es simplemente ir actualizando el valor de un registro.

Por suerte Firebase tiene otro método llamado push, cambiemos en el código la palabra 'set' por la parabra 'push' y mandemos nuevamente 2 mensajes o más!

ANTES DE HACERLO, elimina tu rama mensajes que ya tienes en tu base de datos. Si haces hover sobre la rama, aparecerá una tache color rojo, solo presiónala y confirma que la quieres eliminar

Entonces, con el código modificado queda de la siguiente manera:

Y al probar vemos que ahora mensajes se ve así:

¡Bien! Logramos el objetivo, cada mensajes que enviamos se guarda por separado e inclusive Firebase les pone un id único, conocido como uid.

Recuperando datos de Firebase y mostrándolos

Ya casi acabamos! Lo único que nos falta es traernos todos los mensaje que tengamos en nuestra base de datos y mostrarlos en nuestra aplicación.

Recordemos que tenemos un div con un id chat que no hemos utilizado hasta ahora. Justamente este div es en el que nosotros mostraremos todos los mensajes.

Antes de hacerlo hablaré un poco de un método de jQuery llamado ready. Este es un método muy especial en Javascript, y se ejecuta una vez que toda nuestra página este renderizada al 100%. Es decir, automáticamente que nuestra página termine de cargar se lanzará la función asociada al "ready" y todo lo que esté dentro de ella. Para utilizarla es con la siguiente sintaxis:

$(document).ready(function(){
    //Write some code
});

Lo que se desea es que automáticamente que la página termine de cargarse, se manden pedir los datos a Firebase y se muestren automáticamente. Por lo cuál todo nuestro código necesario se colocará dentro de esta función anónima.

Utilizaremos un método de Firebase llamado child_added cuya función es que cada vez que un "hijo" (mensaje) se añada, Firebase añadirá asíncronamente el mensaje a nuestro div, sin necesidad de recargar la página. La forma de utilizarla es la siguiente:

$(document).ready(function(){
    db.ref('mensajes').on('child_added', function(data){
    //Data control
    });
});

Como pueden darse cuenta, en la función anónima pertenciente al método child_added, recibe un argumento llamado data.El argument "data" trae todos los objetos que se encuentren en la rama especificada, en este caso, mensajes.

La mandaremos a consola para ver que es lo que trae.

$(document).ready(function(){
    db.ref('mensajes').on('child_added', function(data){
        console.log(data.val());
    });
});

Podemos observar nuestro mensajes que mandamos en la consola! Solo nos falta mostrarlos como tal en la página.

En lugar de utilizar un console.log, utilizaremos el siguiente código

   db.ref('mensajes').on('child_added', function(data){
        $('#chat').append('<p>'+data.val().mensaje+'</p><br>);
    });

En el código utilizamos un método llamado append que por cada objeto que haya en data, añade un fragmento de código HTML. Las etiquetas que se añaden es simplemente un párrafo donde mandamos el mensaje y un salto de línea.

El código queda de la siguiente manera:

Testeemos el código! Basta con recargar su navegador

Ahora pongamos a prueba el tiempo real de Firebase, mandemos otro mensaje y se supondría que automáticamente Firebase se encargaría de añadirlo sin necesidad de recarga la página

Y ahí está, sin necesidad de recargar TODO ES EN TIEMPO REAL!.

Como parte del UX, cuando enviemos el mensaje, no sería mala idea limpiar el input para que cuando se quiera mandar uno nuevo, no sea necesario borrar el anterior.

Para ello, agregaremos el siguiente código después del método push de firebase:

    $('#message').val('');

Y con ella se limpiará nuestro input.

Los script al final deben quedar de esta manera:

¡Y LISTO! Nuestro chat es completamente funcional.

Obviamente faltaría añadirle estilos con algún framework de estilos CSS (o manualmente que sería lo más óptimo), autenticación con redes sociales para restringir el acceso y saber quien envió tal mensaje, entre otras muchas cosas que poco a poco iremos viendo a través de este blog.

Para concluir

Firebase es una tecnología muy MUY fácil de utilizar, intituiva, gratuita y demás. Puedes hacer desde demos hasta proyectos reales, robustos y demás con ella. Te invitamos a utilizarla más, a jugar con todas las herramientas que ofrece.

Espero te haya salido el chat al 100%, te haya gustado y nos vemos en otro post! ;)