Conexión a Firebase DB con JS

Firebase es una plataforma que ofrece servicios de desarrollo para aplicaciones web y móviles como: Autenticación de usuarios mediante varias redes sociales (Google, Facebook, Twitter, Github, E-mail y Teléfono), una Data Base (Real Time) y Storage que se pueden acceder muy fácilmente desde la aplicación, Hosting gratuito hasta cierto límite para almacenar y probar vuestras aplicaciones, entre otras funcionalidades que están orientadas a aplicaciones móviles.

Desde la consola de Firebase se pueden crear nuevos proyectos o acceder a los proyectos que hayan creado. Una vez dentro del proyecto tendrán 3 enlaces para la conexión de su aplicación a su proyecto Firebase y a sus servicios:

Como deben imaginar, el primer script va en el <head> del archivo html y la variable de configuración del segundo script va en el código de JS, puede ser individual como conexion.js o ir junto al demás código.

En la documentación inicial para proyectos Web se encuentran los CDN de los servicios de Firebase, dependiendo cuál vayamos a ocupar lo pegamos en el <head> del html junto al anterior script:

<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-app.js"></script> (Obligatorio)
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-auth.js">
</script>
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-database.js">
</script>
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-storage.js">
</script>
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-messaging.js">
</script>

Con esto tendremos lo siguiente:

<head>
<title>Conexión a Firebase DB</title>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-database.js"></script>
</head>
<body>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBqP9ZKzhib0h951MXx_tttZzt8dNvLRS4",
authDomain: "dbfirebase-645d3.firebaseapp.com",
databaseURL: "https://dbfirebase-645d3.firebaseio.com",
projectId: "dbfirebase-645d3",
storageBucket: "dbfirebase-645d3.appspot.com",
messagingSenderId: "985119827797"
};
firebase.initializeApp(config);
</script>
</body>

Para hacer una prueba de envío de datos a la Base de Datos, crearé un formulario con 3 campos:

<form action="" method="post">
<input id="name" class="input" type="text" placeholder="Nombre" required /><br />
<input id="email" class="input" type="text" placeholder="Correo" required /><br />
<input id="phone" class="input" type="number" maxlength="10" placeholder="Teléfono" required /><br />
<button id="submit_button" type="submit">Enviar Datos</button>
</form>
<script src="js/conexion.js"></script>

En el archivo conexion.js tomamos los valores del formulario, damos un nombre a la referencia en la Base de datos y creamos una función para enviarlos.

// Initialize Firebase
var config = {
apiKey: "AIzaSyBqP9ZKzhib0h951MXx_tttZzt8dNvLRS4",
authDomain: "dbfirebase-645d3.firebaseapp.com",
databaseURL: "https://dbfirebase-645d3.firebaseio.com",
projectId: "dbfirebase-645d3",
storageBucket: "dbfirebase-645d3.appspot.com",
messagingSenderId: "985119827797"
};
firebase.initializeApp(config);
// Se asigna a una variable cada elemento input con su ID
var nombre = document.getElementById('name');
var correo = document.getElementById('email');
var telefono = document.getElementById('phone');
var enviarData = document.getElementById('submit_button');
// Se conecta con la base de datos de Firebase
var dataDB = firebase.database().ref('Datos').push();
// Le agregamos un evento click al botón de enviar enviarData.addEventListener('click', enviar);
function enviar () {
// Se envía los valores de cada input
dataDB.set({
nombre: nombre.value,
correo: correo.value,
telefono: telefono.value,
});
}

El método .set() envía a la base de datos todo lo que contenga, en este caso el objeto con los valores de cada input. Y en la base de datos de Firebase los recibe de esta manera:

La referencia da el nombre ‘Datos’, Firebase designa una clave única a cada elemento nuevo.

La base de datos de Firebase tiene reglas de seguridad inicialmente, nadie que no esté autentificado en la aplicación web puede escribir o leer datos de la base de datos.

Usando el simulador que nos facilita Firebase comprobamos que no se puede escribir en la DB.
Pero, si su valor cambia a true. Cualquiera que tenga los datos de la variable de configuración podrá hacerlo.

Creé una muestra en Codepen.io del formulario:

Se llena cada uno de los campos con los valores a enviar.
Una vez enviado los datos esto es lo que se recibe en la base de datos.

De esta manera se puede registrar toda clase de datos en las bases de datos de Firebase que uno requiera.

Para poder sacar los datos de Firebase DB, se debe poner la regla de ‘.read’ con un valor de true.

Con el método .on(‘value’, ) de Firebase se puede obtener el valor de la base de datos. Hice un ejemplo en codepen, en el que recojo los datos de la base de datos y los organizo en una tabla. A su vez hice una función para poder descargar esta tabla en un archivo Excel.

Con el dato del ejemplo que subí, se organiza el nombre, correo y teléfono
Puse la opción de nombrar como se desee al archivo excel antes de descargarlo
Cuando se realiza la descarga del archivo excel
Los datos que se encontraban en la tabla de la página, ahora los tenemos en excel

Y bueno, aunque inicialmente pensé en crear una pequeña App Web con ReactJS, vi que no era necesario ya que el cliente no lo necesitaba. Por eso, me tocó leer un poco e investigar de cómo lograr todo esto con JS “vainilla”.

Disculpen la extensión, quería explicarlo todo. Dejaré el acceso a la base de datos abierta. Pueden usar los dos enlaces que puse en codepen para poder enviar sus datos a la DB y verlos en la tabla. No puse validaciones así que si envían algún campo vacío se creará una key con datos vacíos.

Espero les sea de utilidad, y si les interesa Firebase tienen una gran documentación por leer.

Show your support

Clapping shows how much you appreciated Cristopher Solis’s story.