Se pretende explicar el proceso realizado para implementar los servicios de
bases de datos de Firebase en el proyecto
Se explicarán los pasos seguidos y los requisitos implicados en el proceso
de inicializar Firebase en el repositorio.
- Tenemos que instalar nuestro editor o IDE preferido (Visual Studio Code, Atom...).
- Abrimos nuestro proyecto de JavaScript (web o Node.js).
- Accedemos a Firebase con nuestra cuenta.
Antes de que podamos agregar Firebase a nuestra app de JavaScript, debemos crear un proyecto de Firebase y conectarlo a la app.
Cuando tengamos un proyecto de Firebase, podremos agregarle nuestra aplicación web.
-
En la página de descripción general del proyecto en Firebase console, hacemos clic en el ícono de Web (<>) para iniciar el flujo de trabajo de configuración.
-
Ingresamos el nombre de nuestra app.
-
Configuramos Firebase Hosting para nuestra aplicación web.
- Seleccionamos un sitio de la lista desplegable para vincularlo a nuestra aplicación web de Firebase. Esta lista muestra el sitio de Hosting predeterminado de nuestro proyecto y cualquier otro sitio que hayamos configurado en él.
Podemos agregar cualquiera de los productos que tiene Firebase en nuestra app.
Como usamos Firebase Hosting, podemos configurar nuestra app para cargar las bibliotecas del SDK de Firebase JavaScript de manera dinámica desde las URL reservadas. Esta opción de configuración también funciona para probar nuestra aplicación web localmente.
-
Para implementar Firebase, debemos usar Firebase CLI. Esto es una herramienta de línea de comandos. Deberemos ejecutar el siguiente comando npm en la terminal.
npm install -g firebase-tools -
Conectamos nuestra máquina local a Firebase y le otorgamos acceso a nuestros proyectos de Firebase:
firebase login -
Inicializamos el proyecto de firebase. Consulta más información en este enlace.
firebase init -
Implementamos la configuración de hosting y el contenido en Firebase Hosting.
-
Realizamos la implemenRegistrotación con el comando:
firebase deploy
-
Se explicará los cambios en la web y las configuraciones realizadas para
implementar esta parte de la base de datos. (Login, sign up y logout)
El primer paso para poder realizar cambios en la web y emplear las bases de datos es poder manejar la autenticación de los usuarios.
Para poder manejar el estado de las sesiones de usuarios necesitamos instanciar una variable que contenga los métodos necesarios. Debemos entonces añadir la siguiente linea tras el script de configuración:
const auth = firebase.auth();Por otro lado se prepararán varios formularios html bajo algunos ID que nos permitirán capturar sus valores a posteriori en un programa JavaScript.
Por ejemplo:
<form id="signIn"class="col s12 m6 ">
···
</form>El código se escribirá en el fichero firebase-auth.js que se incluye
en el <head> del fichero principal.
Para capturar los formularios usamos:
const signupForm = document.querySelector('#signUp');Para llevar a cabo el registro el formulario captura los siguientes valores:
- Nombre de Usuario
- Contraseña
- Confirmación de contraseña
Usa las querySelectors para capturar el formulario, donde podremos volcar cada uno de los valores en variables tras hacer el submit.
Para ejecutar bajo el submit usamos:
signupForm.addEventListener('submit', (e)=> {
···
}El si ambas contraseñas coinciden, el email y la contraseña son añadidos a la base de datos de firebase por medio de la orden:
auth.createUserWithEmailAndPassword(email, password).then(cred => {
const modal = document.querySelector('#loginModal')
M.Modal.getInstance(modal).close();
signupForm.reset();
})Con el then lo que indicamos es que solo ejecute lo que contiene si la solicitud se ha cumplido con éxito.
El proceso para manejar el inicio de sesión en la página es similar al registro. Sin embargo en esta ocasión estamos capturando únicamente el email y la contraseña en el formulario.
Cabe destacar que usa valores ID distintos en este formulario.
En este caso debemos sencillamente enviar los valores capturados a la orden de firebase:
auth.signInWithEmailAndPassword(email, password).then( cred => {
...
}Lo cual en caso de ser correcto capturará el estado activo del usuario. De no ser así informará del error concreto.
El cierre de sesión del usuario se procesa por medio de la interacción del botón. Cuando el usuario lo pulsa ejecuta la orden para reflejar este cambio en Firebase. La orden es la siguiente:
logOut.addEventListener('click', (e) => {
···
}- Todos los formularios son cerrados y limpiados ante un input correcto.
- Todos los formularios están dentro de un modal que se activa al pulsar el botón.
- Todos los campos de email usan la validación del campo por defecto.
A continuación se puede apreciar como se guardan los usuarios en firebase tras la consulta de registro:
Esta consola informa de:
- Identificador (email)
- Proveedor (email + contraseña)
- Fecha
- UID
Se procede a indicar los pasos seguidos en la implementación de la base de datos
así como el registro de entradas desde la aplicación web.
Antes de comenzar, aclarar que para la realización de este apartado hemos hecho uso de las consultas a tiempo real que nos proporciona Firebase, y se trata de Cloud Firestore. Realiza actualizaciones en tiempo real, consultas poderosas y ajuste de escala automático.
En primer lugar, para poder llevar a cabo el Registro de entradas en la Base de Datos del Servidor Firebase desde nuestra web, procederemos a establecer una "colección". Dentro del apartado de Database de nuestro Servidor Firebase, se nos permitirá crear una colección con los diferentes datos que queramos añadir de forma manual a nuestra Base de Datos. El procedimiento se muestra a continuación:
Como podemos ver en la imagen que se muestra con anterioridad, se nos habilita un espacio donde introducir un ID para nuestra nueva colección. Procederemos a crearla y se nos mostrará a continuación la siguiente ventana, donde rellenaremos los datos correspondiendes a la nueva colección.
Comentar que, además se nos proporciona la posibilidad de establecer unas normas referente a los usuarios. En este caso, no hemos cambiado las líneas de código más allá de modificar la línea para habilitar los permisos de escritura y lectura para todos los usuarios. Esta es una mala práctica, debido a que cualquier usuario que acceda a nuestra web, tendría acceso a la lectura y escritura de la base de datos.
Este apartado se ocupará de explicar con detalle el código utilizado para llevar a cabo la práctica. En primer lugar, explicaremos la parte de código con la que mostramos lso datos contenidos en la Base de Datos en Tiempo Real. Para hacer esto posible, se ha creado un fichero JS llamado contacto-database.js, que ha sido asociado al documento HTML contacts-page.html.
El fichero JavaScript se encuentra dividido en dos funciones principales. En la primera se lleva a cabo una solicitud a la base de datos del servidor de Firebase.
document.addEventListener("DOMContentLoaded", event => {
const contacto1 = database.collection("contactos").doc("contacto1");
contacto1.onSnapshot(doc => {
const data = doc.data();
const list = document.querySelector("#contactList");
list.innerHTML = "";
list.innerHTML = `<a href="#!" class="collection-item text-grey center-align">` + data.nombre + data.Apellidos + `</a>`;
console.log(data);
});
});Como vemos en el código que se encuentra con anterioridad, creamos una constante que almacenara el dato requerido de la Base de Datos de la Colección "Contactos". Ahora bien, con la constante "data", almacenamos los datos pertinentes, que serán posteriormente mostrados en la web, tanto el nombre como los apellidos del contacto. Por último, se realiza una impresión por consola para una mejor visualización de los mismos.
Por otro lado, hemos intentado realizar una inserción de datos desde nuestra página web. No nos ha sido posible del todo realizar esta tarea, ya que no se ve reflejado como tal en la Base de Datos, pero, fijándonos en la consola de la web, los datos si cambian. El código que realiza esto se encuentra a continuación.
const formulario = document.querySelector("#addContact");
formulario.addEventListener("submit", (e) => {
const database = firebase.firestore();
const name = formulario["nameToAdd"].value;
const contacto1 = database.collection("contactos").doc("contacto1");
contacto1.update({nombre: name});
});Por último, se mostrará una imagen detallando lo conseguido con este código sobre nuestra web. Se muestra la página referente a contactos:
Se aprecia en la imagen anterior que se ha impreso por la consola del navegador, la informacion referente al "contacto1".
En la imagen anterior podemos ver que, tenemos un formulario para introducir nuevos datos. Con anterioridad, en este documento se ha detallado que no nos ha sido posible modificar desde la web los datos, pero estos si son reflejados en la consola del navegador. Podemos ver esto a continuación:
