Curso de React | Firebase (versión 9)

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Configuración en la página web de Firebase

Crear una base de datos en Firebase

Para configurarla:

1. Previamente tendremos que haber activado el módulo Build → Authentification.

2. Si queremos poder acceder a firebase desde cualquier sitio que no sea localhost, debemos dar de alta el dominio desde el que vamos a acceder. Para ello, iremos a Menu Build → Authentification → Settings → Dominios autorizados → Agregar dominio.

3. Accederemos a Menu Build → Firestone para crear la base de datos.

Por hacer un simil con las bases de datos relacionales:

• Cada collection equivaldría a una tabla.
• Cada document equivaldría a un registro.

Cuando estructuramos una base de datos usando firebase, debemos tener en cuenta que las colecciones tendrán documentos y que esta relación será jerárquica. Debemos evitar en la medida de lo posible que una colección se relacione con tra colección de un modo no jerárquico como ocurría en las bases de datos relacionales tradicionales.

Tendremos que configurar una regla para permitir la edición y consulta. Para ello iremos a Firestore → Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Características de los datos almacenados en Firestore

• A la entidad que los contiene se la llama Documento.
• A una agrupación de datos se la llama Colección.
• Un Documento puede a su vez tener Colecciones.
• Tanto los documentos como las colecciones tienen un tamaño máximo de 1Mb.
• Podemos tener hasta 100 niveles de sub-colecciones.
• Son almacenados siguiendo una estructura clave-valor.
• No pueden ocupar más de 1MB.
• Los datos pueden ser de los siguientes tipos: string, number, boolean, map, array, null, timestamp, geopoint.

Configuración en el código de React

npm i firebase

Configuramos las credenciales necesarias:

/.env Copy

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

/src/services/firebase.js

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Podemos obtener la projectId y el apiKey yendo a engranaje que esta al lado de Project Settings → General. Para que la API Key se visualiza tengo que haber inicializado la autentificación ( Firebase → Authentification → Get Started).

El authDomain será {ProjectId}.firebaseapp.com

CRUD en Firebase Copy

./src/services/api.js

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Batch Update

Nos permitirá realizar múltiples operaciones de manera atómica, o todas o ninguna.

Un ejemplo de uso puede ser cuando hacer una transacción bancaria, en la que sacas dinero de una cuenta y lo metes en otra, en este caso quieres que se realicen ambas operaciones o que en el peor de los casos no se realice ninguna.

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Consultar los documents de una colección a partir de su id

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Juntar los datos de dos documents diferentes

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Ejercicios Firebase

Ejercicio CRUD

Hacer el ejercicio del enlace, que cuenta con las funcionalidades de alta, baja, modificación y consulta de nombres de personas.

Descargar código

Ver ejemplo

Ejercicio Lista de invitados

Hacer una página web para una lista de invitados con 3 secciones. Una para consultar los invitados, otra para dar de alta un nuevo invitado y otra para darlo de baja.

Cada uno de los siguientes pantallazos corresponde a una url diferente, por lo que usaremos react router dom.

Ejercicio Hospital

La siguiente aplicación estará compuesta de cuatro páginas indpendientes, cuya ruta gestionaremos con React Router:

• Home → con el menú principal.
• Create → para dar de alta un nuevo paciente.
• Read → muestra un listado con los pacientes del hospital. Al pulsar sobre la id de alguno de ellos, seremos redirigidos a la página de update y delete, en la que podremos actualizar y borrar un registro.
• Update y Delete → esta página se rellenará con los datos del usuario seleccionado en la página Read. Desde aquí podremos modificar el registro introduciendo nuevos datos, o eliminarlo.

Ejercicio Libros

1. Creamos una tabla con una sola fila. En esta fila, habrá dos inputs. En uno de ellos introduciremos el título del libro y en la otra el precio.

Cuando pulsemos el botón de añadir, el libro quedará almacenado en Firebase.

2. Consultamos los libros que han en la base de datos mostrando un registro correspondiente a cada libro. Cuando introduzcamos un nuevo libro, el listado debe actualizarse.

3. Añadimos la posibilidad de borrar un libro pulsando el botón Remove.

4. Vamos ahora a hacer la actualización. Para poder actualizar los datos de cada fila de manera independiente, haremos un componente llamado Tr (table row) que tendrá toda la presentación y la lógica necesaria.

Subir una imagen al servidor

<input type="file" onChange={e => setFile(e.target.files[0])} />
<button onClick={() => uploadImage(file, user.uid) >Subir imagen</button> 

services/api.js

export const uploadImage = async (file, uid) => {
  const storageRef = ref(storage, `/files/${uid}/${file.name}`);
  const uploadTask = uploadBytes(storageRef, file);
  uploadTask.then(async (data) => {
    const url = await getDownloadURL(data.ref);
    const colRef = collection(db, "users");
    await setDoc(doc(colRef, uid), { uploadedPicture: url });
  });
};