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.

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

VITE_PROJECT_ID=aqui_vendria_el_project_id_de_firebase
VITE_API_KEY=aqui_vendria_la_clave_api_key_de_firebase

./src/app/firebase.js

import { initializeApp } from 'firebase/app';
import { getAuth, setPersistence, browserLocalPersistence } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';


export { collection, doc, getDoc, setDoc, getDocs, query, updateDoc, deleteDoc, addDoc, where, onSnapshot } from "firebase/firestore";
export { signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, GoogleAuthProvider, signInWithPopup, sendPasswordResetEmail, fetchSignInMethodsForEmail, sendEmailVerification } from "firebase/auth";

const firebaseConfig = {
    apiKey: import.meta.env.VITE_API_KEY,
    authDomain: import.meta.env.VITE_PROJECT_ID + '.firebaseapp.com',
    projectId: import.meta.env.VITE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_PROJECT_ID + ".appspot.com",
};

const firebaseApp = initializeApp(firebaseConfig);
export const db = getFirestore();
export const auth = getAuth(firebaseApp);
export const storage = getStorage(firebaseApp);

// Si descomentas la siguiente línea, cuando mientras que el usuario no se desloguee expresamente o cierre el navegador, permanecerá logueado y podremos acceder a su id desde cualquier página
setPersistence(auth, browserLocalPersistence);

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/app/api.js

import { auth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, GoogleAuthProvider, signInWithPopup, sendPasswordResetEmail, fetchSignInMethodsForEmail, sendEmailVerification, db, doc, getDoc, getDocs, collection, setDoc, updateDoc, deleteDoc, addDoc, query, where, onSnapshot } from "./firebase";

const collectionName = 'items';

// CREATE
export const createItem = async(obj) => {
    const colRef = collection(db, collectionName);
    const data = await addDoc(colRef, obj);
    return data.id;
}

// UPDATE
export const updateItem = async (id, obj) => {
    const docRef = doc(db, collectionName, id);
    await updateDoc(docRef, obj)
}

// READ
export const getItems= async ()  => {
    const colRef = collection(db, collectionName);
    const result = await getDocs(query(colRef));
    return getArrayFromCollection(result);
}

// READ WITH WHERE
// Tener en cuenta que el tipo de dato de la condición debe coincidir con el tipo de dato que hay en Firebase o no obtendré un dato de respuesta
export const getItemsByCondition = async (value) => {
    const colRef = collection(db, collectionName);
    const result = await getDocs(query(colRef, where('age', '==', value)));
    return getArrayFromCollection(result);
}

export const getItemById = async (id) => {
    const docRef = doc(db, collectionName, id);
    const result = await getDoc(docRef);
    return result.data();
}

// DELETE
export const deleteItem = async (id) => {
    const docRef = doc(db, collectionName, id);
    await deleteDoc(docRef);
}

const getArrayFromCollection = (collection) => {
    return collection.docs.map(doc => {
        return { ...doc.data(), id: doc.id };
    });
}

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.

export const batchOperation = async (id) => {
    const batch = writeBatch(db)

    batch.update(doc(db, 'persons', id), { name: 'test' });
    batch.update(doc(db, 'persons', id), { price: 89 });
    batch.commit();
};

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

const result = await getDocs(query(studentsBaseRef, where(documentId(), 'in', students.map(student => student.id))));

Juntar los datos de dos documents diferentes

const mergedData = students.map(student => {
    const studentInClassroom= studentsInClassroom.find(({ id }) => student.id === id);
    return { ...student, ...studentInClassroom};
});

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.

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.