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 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.


Creé una muestra en Codepen.io del formulario:


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.




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.
