Firebase (versión 9)

Configuración en la página web de Firebase

Crear un proyecto de Firebase

  1. Vamos a http://firebase.com/.
  2. Creamos un nuevo proyecto → Le ponemos un nombre.

Crear una base de datos en Firebase

Menu Build → Firestone.

Por hacer un simil con las bases de datos relacionales:

  • Cada collection equivaldría a una tabla.
  • Cada document equivaldría a un registro.
Firebase (versión 9) 1

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

REACT_APP_API_KEY = aqui_vendria_la_clave_api_key_de_firebase
REACT_APP_PROJECT_ID = aqui_vendria_el_project_id_de_firebase

/src/app/firebase.js

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';


const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_PROJECT_ID + '.firebaseapp.com',
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_PROJECT_ID + ".appspot.com",
};

initializeApp(firebaseConfig);
export const db = getFirestore();

Podemos obtener la projectId y el apiKey llendo 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

/src/app/api.js

import { db } from './firebase';
import { collection, getDocs, query, doc, getDoc, addDoc, deleteDoc, updateDoc, setDoc, where } from "firebase/firestore";

const collectionName = 'items';
const itemsCollection = collection(db, collectionName);

// CREATE
export const createItem= (obj) => {
    return addDoc(itemsCollection, obj).id;
}

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

// READ
export const getItems= async ()  => {
    const result = await getDocs(query(itemsCollection));
    return result.docs.map(doc => {
        return { ...doc.data(), id: doc.id };
    }
    );
}

// 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 getItemByName = async (name) => {
    const result = await getDocs(query(itemsCollection, where('name', '==', name)));
    return result.docs[0].data();
}

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

// DELETE
export const deleteItem = async (id) => {
    await deleteDoc(doc(db, collectionName, 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();
};

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.

Firebase (versión 9) 3
Firebase (versión 9) 4
Firebase (versión 9) 5

Ejercicio Hospital

Firebase (versión 9) 6
Firebase (versión 9) 7
Firebase (versión 9) 8
Firebase (versión 9) 9

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.

Firebase (versión 9) 10

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.

Firebase (versión 9) 11

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

Firebase (versión 9) 12

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.

Firebase (versión 9) 13
Firebase (versión 9) 14

Lista de tareas

1. En la Home de esta aplicación de mensajería introduciremos nuestro nombre. Si ese nombre no existía en la base de datos, lo introduciremos. Tanto si el nombre no existía como si existía, recuperaremos su id y lo salvaremos en la memoria global utilizando ContextApi.

Firebase (versión 9) 15

2. En la pantalla de tareas podremos crear nuevas tareas o ver las existentes:

Firebase (versión 9) 16

3. Añade la posibilidad de eliminar tareas existentes.

4. Añade la posiblidad de actualizar tareas existentes. Para ello, tendremos un botón de actualizar que mostrará el texto de la tarea dentro de un input. Pulsando el botón de actualizar realmente, podremos modificar la tarea en la base de datos.

Firebase (versión 9) 17
Firebase (versión 9) 18

Mensajería

En la Home de esta aplicación de mensajería introduciremos nuestro nombre. Si ese nombre no existía en la base de datos, lo introduciremos. Para lograr esto, podemos utilizar el siguiente código:

export const access = async (name) => {
    const result = await getDocs(query(usersCollection, where('name', '==', name)));
    return result.docs.length == 0 ? addDoc(usersCollection, { name }).id : result.docs[0].id;
}

Tanto si el nombre no existía como si existía, recuperaremos su id y lo salvaremos en la memoria global utilizando ContextApi.

Firebase (versión 9) 19

Para gestionar las peticiones tendremos dos ficheros independientes. Uno para gestionar las peticiones referentes a los usuarios y otro para gestionar las peticiones referentes a los mensajes.

Firebase (versión 9) 20

En la pantalla de escribir mensaje escibiremos el mensaje que queremos enviar y marcaremos la check correspondiente a cada uno de los destinatarios.

Firebase (versión 9) 21

En la pantalla de ver mensajes podremos ver los mensajes que nos han enviado.

En la página de write mesage tendremos un estado que contendrá un array con las id’s correspondientes a los usuarios marcados. Para alimentar ese array en función de las checkboxes marcadas, usaremos el siguiente código:

// Cada vez que una checkbox cambia, se actualiza el array de usuarios seleccionados
const onChange = (userId) => {
    if (checkedUsersIds.includes(userId)) {
        setCheckedUsersIds(checkedUsersIds.filter(id => userId != id))
    } else {
        setCheckedUsersIds([...checkedUsersIds, userId]);
    }
}

Cada mensaje tendrá tres propiedades: idRemitente, idUsuario y msg:

Firebase (versión 9) 22
Firebase (versión 9) 23

Foro

En la carpeta services, crearemos dos ficheros: hilos y users. La entidad hilos tendrá en su interior un array de comentarios.

Página de crear un hilo.

Firebase (versión 9) 24

Página de ver hilos.

Firebase (versión 9) 25

Página de ver la información de un hilo.

Firebase (versión 9) 26

Este ejercicio se puede ampliar de muchas formas:

  • Indicando el nombre de la persona que ha escrito el comentario.
  • Indicando la fecha de la publicación.
  • Añadiendo una capa de diseño.
← Testing
Next JS →