Consumir servicios de una API Firebase con React

Introducción

Firebase es una plataforma en la nube de Google para el desarrollo de aplicaciones web y móvil. Posee múltiples herramientas y funciones para facilitar el desarrollo de aplicaciones, procurando optimizarlas sin renunciar en ningún momento a la calidad.

Firestore: Es una base de datos NoSQL flexible, escalable y en la nube con el fin de almacenar y sincronizar datos en tiempo real para la programación tanto en el lado del cliente como en el del servidor.

Creación de la base de datos

En primer lugar crearemos un nuevo proyecto Firebase desde  https://firebase.google.com/  

*Para la realización del proyecto no necesitaremos Google Analytics y por ello no marcaremos esa opción.
Una vez hemos creado el proyecto, nos iremos al tipo de aplicación que vamos a crear para enlazarla con firebase, en nuestro caso a web:

Introduciremos el nombre que queremos dar a nuestra aplicación y nos generara un SDK que añadiremos posteriormente en el archivo firebase.js que crearemos para conectar nuestra aplicación con firebase.

Una vez tenemos el proyecto correctamente creado, pasaremos a crear la base de datos que consumiremos, la cual se realizara mediante firestore:

En primer lugar, elegiremos el modo en el que vamos a usar esta base de datos, en nuestro caso será el modo prueba, y posteriormente la ubicación donde se alojará:

Realizados estos pasos, ya podemos empezar a crear nuestra base de datos.

Le daremos un nombre a la colección que contendrá todos los documentos con los que iremos jugando en nuestra aplicación y crearemos el primer documento el cual podremos modificar posteriormente:

*El id del documento se genera automáticamente si no le especificamos ningún valor.

Y con esto ya tendríamos iniciada nuestra base de datos para consumir en cualquier momento, ya sea desde nuestra aplicación o desde la propia plataforma firebase.

Creación de la aplicación React

Para la creación de nuestra aplicación React utilizaremos el CMD, el cual nos generara el proyecto y las importaciones que necesitaremos introduciendo un par de comandos:

En primer lugar, nos situaremos en la carpeta donde queremos crear el proyecto e introduciremos el comando: npx create-react-app “nombre”. El cual nos creara un proyecto React con todo lo básico para empezar a trabajar:

Una vez creado, añadiremos todas las importaciones externas que deseemos añadir:
Bootstrap y jQuery:

React Router:

Firebase:

Una vez se han instalado correctamente estas importaciones, ya tendremos todo lo necesario para desarrollar nuestra aplicación web React que consumirá datos de Firebase-Firestore.

Desarrollo de la aplicación

En primer lugar, una vez hemos entrado para desarrollar la aplicación, crearemos las siguientes carpetas y componentes, así dejaremos su estructura preparada para poder introducir todo el código necesario con el fin de obtener el resultado final deseado:

Antes de explicar detalladamente el código de cada archivo, conoceremos que función desempeñaran los nuevos archivos que hemos añadido:

Firebase.js: Es el medio de conexión con el proyecto Firebase.

Services/videojuegosService.js: Interactúa con Firestore para realizar las operaciones CRUD.

Components/addVideojuego.js: Crea un nuevo Videojuego y lo añade a la BBDD.

Components/detailVideojuego.js: Muestra la información de un videojuego.

Components/listVideojuego.js: Contiene toda la lista de videojuegos de la BBDD.

• Firebase.js

En este archivo situaremos la configuración que nos facilitó Firebase para conectarnos al proyecto que habíamos creado que contiene la BBDD que consumiremos.

• service/videojuegosService.js

Gracias a este servicio podremos realizar las operaciones CRUD fácilmente al hacer métodos que nos retornan las llamadas a la API de Firebase.

• index.js

• App.js

Importaremos Bootstrap, React, Route, Switch, Link y los componentes AddVideojuego y ListVideojuego.

Sera el contenedor raíz de nuestra aplicación, la cual contiene un NavBar y un Switch con varios Route que cada uno apunta a un componente React.

• components/addVideojuego.ts

• components/detailVideojuego.ts

• components/listVideojuego.ts

Resultado final

Como resultado nos queda una aplicación simple pero completa en la cual hacemos uso de las operaciones CRUD que podemos hacer a la base de datos Firestore del servicio Firebase.

Autor/a: Javier Ruano Manzanares

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2020-2021

Código / recursos utilizados / Otros datos de interés:
https://github.com/JaviRM17/ReactFirebaseCRUD