Integrando Firebase en React

Todo desarrollador que quiere enriquecer su portafolio se ha preguntado en algún momento de su vida dónde hacer el deploy del back-end de su aplicación sin muchos dolores de cabeza. Generalmente, existen repositorios que ofrecen servicios pagados o limitados y con una burocracia que demanda un tiempo considerable para que aprendas a utilizarlos, de manera que da más trabajo arreglar todo eso que incluso el que tuviste en tu código/aplicación. Pensando en esta problemática, les traigo la solución a todos nuestros problemas: ¡Firebase!

Hoy aprenderemos cómo integrar Firebase con React, construyendo una aplicación con consultas suficientemente útiles para que nunca más olvides cómo utilizar este conjunto de servicios.

Pero al final, ¿qué es Firebase?

Firebase es una aplicación que ofrece diversos servicios computacionales en la nube para el back-end, proporcionados por Google. En ella, es posible integrar diversos lenguajes de programación y aplicaciones (Node.js, Unity, PHP, Javascript, C++, etc.) para servicios de hospedaje de bases de datos, autenticación y mucho más.

¿Qué es React?

React es una biblioteca de Javascript de código abierto utilizada por diversas empresas gigantes, como Facebook, Netflix, Instagram, etc. Enfocada en crear interfaces de usuario de manera mucho más práctica que utilizando Javascript puro, React fue ganando cada vez más espacio por ser de fácil asimilación, comprensión y adaptación.

Primeros Pasos

Llegó la hora de salir un poco del campo de los conceptos y comenzar a poner manos a la obra. Como ya se mencionó, utilizaremos Firebase como back-end para una aplicación React que crearemos. ¿Qué tal un sitio donde sea posible registrar empleados de una determinada empresa? Entonces, crearemos nuestro proyecto React ejecutando el siguiente comando en la terminal:

npx create-react-app employee-register

cd employee-register

npm start

OBS - Se utilizó npm como herramienta de gestión de paquetes, pero siéntete libre de utilizar la que te sea más cómoda. Además, en este ejemplo estamos utilizando comandos que se ejecutan de manera efectiva en la terminal de Linux. Para otros sistemas operativos, consulta la documentación de React.

Si todo sale bien, al final de la ejecución de los comandos anteriores, se abrirá en el browser una página con el símbolo de React:

OBS - Entre los archivos que se crean dentro de la carpeta "src" de nuestro proyecto, solo es necesario mantener los archivos “App.css”, “App.js”, “index.css” y “index.js”, ya que no abordaremos las funcionalidades que involucran los otros archivos. Bórralos, elimina las conexiones que tienen en estos archivos mencionados y limpia el archivo “App.js”:

Creando una base de datos en Firebase

Ahora que tenemos la estructura básica ya construida en React, es hora de dirigir nuestra atención a Firebase. Accede al sitio de la aplicación e inicia sesión con una cuenta de Google de tu preferencia. Después, haz clic en “Ir a la consola”. Por último, haz clic en "Agregar proyecto" y serás dirigido a la página donde configuraremos nuestra primera base de datos.

En esta fase de creación, solo debes ingresar un nombre para tu base de datos (en nuestro caso, utilizaremos “employee-register”), haz clic en continuar, acepta utilizar Google Analytics (no es necesario, pero de gratis hasta las puñaladas, ¿verdad?) y haz clic en "Crear proyecto". Serás dirigido a la página de la Figura 3, o alguna similar:

Conectando Firebase a React

Una vez creado el proyecto que utilizaremos en nuestra aplicación, podemos establecer la conexión entre él y React. En la pantalla de la figura 3, haz clic en la opción “Web” (mostrada en la pantalla con el símbolo “< />”, el tercer botón blanco debajo de “Empieza agregando Firebase a tu aplicación”). Crea un apodo para la app, haz clic en "Registrar App" y, después de eso, se te proporcionará un paso a paso para realizar la integración.

La primera acción es instalar Firebase mediante el siguiente comando:

npm install firebase

Después de eso, copia el código proporcionado en la página en cuestión y pégalo en un documento con extensión javascript. Por cuestiones de organización, crearemos un repositorio llamado "back-end" y, dentro de él, un archivo llamado "connection.js". En él implementamos este código.

Haremos algunas modificaciones en este documento, solo para simplificarlo. Primero, elimina las interacciones que existen con "getAnalytics". No utilizaremos esta funcionalidad en nuestro proyecto. Luego, agregaremos un "export default app" al final del código, para que podamos acceder a esta conexión en otros documentos. Tu código se parecerá al que se muestra en la figura 4, con la diferencia de que los valores serán diferentes para cada cuenta:

Vuelve a Firebase y haz clic en "Continuar para la Consola". Asegúrate de estar en el proyecto "employee-register" y busca la opción "Cloud Firestore". Aparecerá la opción "Crear base de datos", en la cual debes hacer clic. Haz clic en avanzar sin necesidad de cambiar las configuraciones de la página siguiente y, al seleccionar una región para tu base de datos (cuanto más cerca mejor, así que selecciona el servidor de São Paulo), finalmente habremos concluido todas las configuraciones para crear una base de datos en Firebase.

Creando una colección

La base de datos que creamos en Firebase es no relacional, es decir, no utiliza un esquema de tablas, con filas y columnas. Es como si, en lugar de insertar datos en una fila de una tabla con N columnas, crearas un objeto con N claves.

Ante lo explicado, crearemos una colección (lo equivalente a lo que entendemos por tabla en una base de datos relacional) que almacenará cada información del usuario. En el panel de Firebase (en “Firestore Database”, que fue donde nos quedamos), haz clic en "Iniciar Colección" y dale un nombre (en nuestro ejemplo, usaremos “employee”). El id de cada documento contenido en esta colección puede ser generado manualmente, pero si haces clic en "código automático", se insertará un valor aleatorio de caracteres para rellenarlo. Para un primer documento (usuario) dentro de la colección “employee”, crearemos los campos nombre (cadena), RFC (cadena), salario (número) y sector (arreglo de cadenas), conforme a la figura 5:

Ahora, definiremos en Firebase que permitiremos consultas y suscripciones en nuestra base de datos. Haz clic en "Reglas" y, en "Editar Reglas", cambia “false” a “true” (línea 5):

Por parte de Firebase, todo está listo. A partir de ahora, todas las manipulaciones en la colección que creamos se harán dinámicamente vía código.

Creando consultas para Firebase

La idea de nuestro proyecto es crear un CRUD básico utilizando Firebase, es decir, desarrollar la creación, lectura, actualización y eliminación de elementos de nuestra colección “employee”. Dicho esto, caminaremos juntos por cada una de estas funcionalidades en los siguientes pasos.

Lectura

Es necesario crear una función que consultará la información contenida en nuestra colección. Primero, conectaremos nuestra aplicación con la colección “employee”. La función que desempeña este papel es “collection”, que importamos de “firebase/firestore/lite”. Esta función recibe como parámetros la conexión con nuestra base de datos (utilizamos la función getFirestore para esto y pasamos la función que creamos en el archivo connection.js como parámetro) y el nombre de la colección.

Una vez creada la conexión con nuestra colección “employee”, recuperaremos los datos que están contenidos en ella. Para esto, utilizaremos la función “getDocs”, también importada de “firebase/firestore/lite”:

Por último, trataremos estos datos y los almacenaremos en un estado. La sugerencia aquí es que hagas un “print” en “docsEmployee” y entiendas un poco el formato en que vienen los datos. Entenderás mejor lo que haremos a continuación, buscando guardar en el estado un objeto limpio y solo con las claves y valores necesarios para la visualización:

¡Ahora te toca a ti! Personaliza la visualización de estos datos como mejor te convenga. A continuación, dejo el código, una estilización simple en CSS y la visualización, para que te sirvan de ejemplo:

Creación

Para agregar nuevos usuarios a nuestra colección, utilizaremos la función “addDoc”, también importada de “firebase/firestore/lite”. Esta función recibe como parámetro la función “collectionEmployee” que ya utilizamos en el paso anterior, además de un objeto con las claves y valores que se agregarán en el documento creado para la colección. Para esto, creamos inputs que almacenan en estados los valores a agregar y, al hacer clic en “Agregar”, estos datos se enviarán a la base de datos:

Actualización

Para construir una funcionalidad que permita la edición de usuarios ya registrados, comenzaremos creando un botón de edición para cada usuario, que pasará los datos del elemento en cuestión como parámetro al ser clicado:

Después de esto, utilizaremos una de las claves del elemento para realizar una búsqueda dirigida a nuestra colección (en nuestro caso, será el RFC). La función “query” permite esta acción, y pasamos como parámetro de esta la función “collectionEmployee” que ya conocemos, además de una función “where”, que recibe una condición separada por comas en el modelo “campo / condición / elemento”. Después de eso, utilizamos la función getDocs para recolectar los datos de esta consulta y, para que podamos manipular los datos nuevamente, enviamos cada uno de ellos a los estados que ya creamos. De esta forma, los inputs se llenarán con los valores del documento que queremos editar:

Al hacer clic en editar, todos los datos del documento estarán llenando los inputs, pero la función “addEmployee” seguirá solo insertando nuevos datos en lugar de seleccionar uno ya creado para la edición. Esto no es lo que queremos. Nota en la figura 19 que utilizamos un nuevo estado, configurado por “setId”. La intención de crear este estado es que, primero, utilizaremos el id del usuario que queremos editar más adelante. Luego, podemos crear una condición en la función “addEmployee” en la que, si el estado “id” está lleno con algún dato, la acción que realizará esta función será de edición, no de creación. Al final de “addEmployee”, basta con establecer el id en una cadena vacía, y todo permanecerá como esperamos para nuestra aplicación. Finalmente, llamamos la función “getCollection” para actualizar los datos que se manipularon en la base de datos. Mira:

Eliminación

Por último, y no menos importante, concluiremos nuestra jornada creando la función de eliminación de un elemento. Crearemos un botón “Eliminar” tal como lo hicimos para el botón “Editar”:

Para la función “removeItem”, al igual que en la función “editItem”, encontraremos al usuario por su RFC y devolveremos los datos del mismo en una variable, de manera que sea posible recolectar el Id en ese objeto de retorno. Después, utilizaremos la función “deleteDoc”, pasando como parámetro la función “doc”, que a su vez recibe como parámetros la conexión con la base de datos, el nombre de la colección y el id. Finalmente, llamamos la función “getCollection” para actualizar los datos que se manipularon en la base de datos:

Consideraciones Finales

¡Eso es todo, amigos! Firebase es un repositorio increíble que nos ayuda mucho en el almacenamiento de datos y, a partir de ahora, ¡es todo tuyo! Practica lo más que puedas y danos retroalimentación sobre lo que te pareció.

Si te pareció interesante este artículo, te gustaría resolver alguna duda o solo quieres platicar sobre estos y otros temas, también puedes ponerte en contacto conmigo, ya sea por medio del correo electrónico bruno.cabral.silva2018@gmail.com o a través de mi perfil de Linkedin!

¡Te espero con ansias!