Firebase (versión 9)

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

  1. 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

Conexión con la estructura recien creada

npm i firebase

Configuramos las credenciales necesarias:

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

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
    apiKey: '********************',
    authDomain: '***.firebaseapp.com',
    projectId: '***',
    storageBucket: "***.appspot.com",
};

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

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

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;
    }
  }
}

CRUD en Firebase

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

// ALTA
addDoc(collection(db, 'persons'), { name });

// CONSULTA
const result = await getDocs(query(collection(db, 'persons')));

// REMOVE
await deleteDoc(doc(db, 'persons', id));

// UPDATE
await updateDoc(doc(db, 'persons', id), {name})

Para recorrer los datos consultados desde la vista:

{
   persons && persons.map(person => <p>{person.id} - {person.data().name}</p>)
}

Ejercicio CRUD

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

← Compilar (build o publicar) una aplicación de React
Next JS →

Aviso Legal | Política de privacidad