Google - Cloud Firestore WEB v.9
Tags: javascript, firebase, react, tutorial
Published: 2021-10-21 15:40:51

Asumiendo que ya has configurado tu proyecto con la versión [web 9](https://firebase.google.com/docs/firestore), vamos a explicar brevemente **como trabajar con esta versión**, que para mi opinión personal, se hace más fácil y más rápida a la hora de trabajar con ella.

Esta versión tiene infinidad de métodos, pero solo hablaremos de los más usados y útiles.

### Para comenzar
Necesitas importar e instanciar tu base de datos.
Y en nuestro caso lo propagaremos por nuestro proyecto en react.

```javascript
import { initializeApp } from "firebase/app";
import { getStorage, ref } from "firebase/storage";
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;
```

Siempre debemos utilizar en esta nueva versión **initializeApp** con la configuración que obtuviste de tu proyecto.

### Perfecto
Ya tenemos nuestra **db** lista para importar desde donde la necesitemos sin tener que volverla a iniciar.

## Subamos datos
En tu archivo JS, donde necesites crear y subir los datos, utilizaremos los métodos que verás a continuación:

```javascript
import db from "../middleware/firebase";
import { collection, addDoc } from "firebase/firestore";

const subirPelicula = (pelicula) => async {
  try {
     await addDoc(collection(db, "peliculas"), {
        ...pelicula
     });
  } catch(err) => { console.error(err) };
}
```
Como puedes ver **addDoc** añadiría un nuevo documento a tu colección llamada **"películas"**, de la instancia de tu **db** base de datos. 

**Nota** si no añadimos ninguna id o referencia **addDoc** la añadirá por ti. 
Se trata de una key alfanumérica como esta `2FW02pxkfsiHgNCdUnnfs`

## Obtengamos datos
En algún momento necesitaremos obtener nuestros datos para mostrarlos en algún sitio, pues vamos a ello.

### Solo una película
```javascript
import db from "../middleware/firebase";
import { doc, getDoc, getDocs } from "firebase/firestore";

const obtenerPelicula = (id_pelicula) => async {
  try {
     const docRef = doc(db, "peliculas", id_pelicula);
     const docSnap = await getDoc(docRef);
     if (docSnap.exists()) {
        //Si existe, tendremos nuestra pelicula en docSnap.data()
        peliculas.push(docSnap.data());
     } else {
        console.log("No existe");
     }
  } catch(err) => { console.error(err) };
}
```
Si en cualquier caso queremos obtener toda la **colección** de películas... como verás utilizamos el método en plural 🤯 facil no?

```javascript
import db from "../middleware/firebase";
import { collection, getDocs } from "firebase/firestore";

const obtenerPeliculas = () => async {
  try {
     const querySnapshot = await getDocs(collection(db, "peliculas"));
     querySnapshot.forEach((doc) => {
        peliculas = doc.data();
     });
  } catch(err) => { console.error(err) };
}
```

## Modificar
Si sabes el path o la id que quieres modificar sería tan sencillo como esto, utilizando el **setDoc** aunque valdría igual **addDoc**, pero os recomiendo siempre usar la primera para evitar liarse.

```javascript
import { doc, setDoc } from "firebase/firestore";

await setDoc(doc(db, "peliculas", "id_de_la_pelicula"), {
  enCines: true,
});
```

## Borrar
Al igual que **modificar** necesitaremos saber la id o path de lo que queremos borrar.

```javascript
import { doc, deleteDoc } from "firebase/firestore";

await deleteDoc(doc(db, "peliculas", "id_de_la_pelicula"));
```

Y por último, si lo que queremos es borrar solo un campo.

```javascript
import { doc, updateDoc, deleteField } from "firebase/firestore";

const peliculaRef= doc(db, "pelicula", "id_de_la_pelicula");

await updateDoc(peliculaRef, {
    campoAEliminar: deleteField()
});
```

¡Eso es todo!
Os recomiendo usar esta nueva versión, aunque al principio parezca más difícil.

Recordad que todo tiene una curva de aprendizaje, paciencia y práctica.

Si quieren ampliar más, toda la documentación esta muy bien detallada.

[Documentación Firestore ES](https://firebase.google.com/docs/firestore)