Realizar operaciones CRUD sobre firestore a través de una app en VUE
En este post vamos a ver como enlazar firebase con una aplicación VUE y realizar operaciones CRUD simples sobre firestore.
Para ello vamos a utilizar:
- Firebase
- VUE
- Firestore
Primero debemos crear nuestro proyecto de firebase accediendo a la siguiente URLL
https://console.firebase.google.com/
Esta es la consola de firebase y va a ser el lugar donde estará nuestra base de datos de firestore. Una vez dentro debemos crear nuestro proyecto de firebase haciendo clic sobre «Agregar proyecto».
Una vez dentro nos pedirá un nombre para el proyecto de firebase, en mi caso lo llamaré vue-firebase-crud, le damos a continuar.
Firebase nos da la posibilidad de habilitar Google Analytics, pero en nuestro caso las deshabilitaremos puesto que no las vamos a utilizar pero es una herramienta que os puede servir de ayuda si quieres recoger datos de uso de tu aplicación.
Ya tendremos creado nuestro proyecto firebase, una vez dentro podremos observar la siguiente pantalla:
Aquí dentro tendremos todas las herramientas que el propio firebase nos proporciona, desde módulos de autenticación, hosting o machine learning hasta bases de datos a tiempo real como Realtime Database o Firestore, esta ultima es la que vamos a utilizar en el proyecto. Antes de empezar a configurar Firestore debemos de crear en Firebase un proyecto web haciendo clic en el siguiente icono:
Una vez dentro nos pedirá un nombre para la app web, también nos data la opción de agregar un hosting de Firebase para nuestra app pero en nuestro caso no la utilizaremos.
Registramos la app y ahora tendremos todos los datos necesarios para enlazar nuestra app con firebase, de aquí nos guardaremos la información almacenada en el objeto firebaseConfig, los cuales, vamos a utilizar mas tarde:
Estos datos son los que se encargan de comunicar nuestra aplicación con nuestro proyecto de firebase. Ahora volveremos a la consola para seguir con el siguiente paso: crear la base de datos Firestore.
Para agregar Firestore a nuestro proyecto iremos a «Firestore Database», una vez dentro haremos clic sobre «Crear base de datos». Una vez dentro nos dará la opción de elegir entre 2 reglas por defecto:
- Modo de produccion
- Modo de prueba
Como no vamos a poner en producción nuestra app seleccionamos el modo de prueba, este es el mas común cuando la aplicación está en desarrollo.
Ahora tendremos que elegir la ubicación de nuestra base de datos Firestore, seleccionaremos eur3 (europe.west) y pulsaremos en «Habilitar»:
Ya tenemos todo listo para poder trabajar con Firestore. Esta es nuestra base de datos, su estructura es la siguiente:
- Colecciones: estas funcionan como las tablas en una base de datos normal y corriente.
- Documentos: estos estarán dentro de las colecciones, por así decirlo son objetos JSON.
- Propiedades: estas están dentro de cada documento y son sus propiedades, es decir, sus datos.
Para mi ejemplo utilizaré una lista de la compra normal y corriente la cual tendrá la siguiente estructura:
Ya tenemos todo preparado para empezar a programar nuestra app en vue, ahora nos abriremos una consola de comando y nos colocamos sobre la raíz de nuestro proyecto vue. Si queremos trabajar con firebase en vue debemos instalar los paquetes necesarios puesto que no están instalados por defecto, para ello, ejecutaremos el siguiente comando:
- npm install firebase@8.10.0
Este comando nos instalará todas las dependencias necesarias para trabajar con firebase. Una vez que lo tengamos instalado abriremos nuestro proyecto con un editor de código.
El primer paso para enlazar nuestro proyecto vue a firebase es crear un fichero con extensión js que contendrá la información del SDK (La misma información que estaba dentro dle objeto firebaseConfig) guardada anteriormente, este fichero estará dentro de la carpeta src. El primer paso es crear un objeto que almacenará toda la información del SDK la cual conectará nuestra app con Firebase:
let config = {
apiKey: «x»,
authDomain: «x»,
projectId: «x»,
storageBucket: «x»,
messagingSenderId: «x»,
appId: «x»
};
Para inicializar la app necesitaremos un método que esta incluido en la librería de firebase previamente instalada, primero tendremos que importarla de este modo:
import firebase from «firebase/app»;
Ahora para terminar de enlazarla llamaremos al método initializeApp(), el cual, llevara como parámetro el objeto config y automáticamente este lo conectara con firebase:
firebase.initializeApp(config);
Este archivo también exportará una instancia de Firestore, la cual, usaremos mas adelante para trabajar sobre la base de datos Firestore. Primero importamos firestore:
import «firebase/firestore»;
Y con esto ya podemos exportar una instancia de Firestore con el método firetore():
export default firebase.firestore();
firebase.js
Antes de utilizar esta clase vamos a crear un componente para generar la interfaz encargada de hacer el CRUD sobre Firestore, este componente estará ubicado en la carpeta components y se llamará CRUDFirebase.vue. Añadiremos el componente nuevo a nuestra App para poder visualizarlo.
Para poder trabajar con Firebase debemos de importar nuestro archivo firebase.js a nuestro componente:
import firebase from «../firebase.js»;
Una vez importado nos crearemos una constante llamada db la cual almacenará la coleccion a la que queremos acceder:
const db = firebase.collection(«listaCompra»);
Llamamos al archivo firebase.js y este nos devuelve la instancia de firestore, esta instancia tiene un método que nos permite recuperar la colección que pasamos como parametro, en mi caso, listaCompra.
LECTURA DE DATOS
Primero empezaremos con la lectura, para ello nos creamos un array que almacenará todos los datos que nos devuelva la consulta, este array estará dentro de data:
data() {
return {
productos : [],
}
}
A continuación crearemos un método getAll() que se encargará de recibir todos los productos y posteriormente guardarlos en el array productos. Este método irá dentro de methods y será llamado cuando se monte el componente.
Este método accederá a la colección listaCompra, recuperará con el método get() todos los documentos y con una promesa obtendremos un querySnapshot el cual será guardado en el array productos, con este querySnapshot también podremos acceder a cada uno de los documentos y por ende a cada una de las propiedades:
methods : {
getAll() {
db.get().then(querySnapshot => {
this.productos = querySnapshot.docs;
});
}
} , mounted() {
this.getAll()
}
Una vez que tenemos todos los productos almacenados correctamente en el array vamos a mostrarlos en el html a través de una tabla:
<table>
<thead>
<tr>
<th>PRODUCTO</th>
<th>CANTIDAD</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<tbody>
<tr v-for=»(producto,index) in productos» :key=»index»>
<td>{{producto.data().nombre}}</td>
<td>{{producto.data().cantidad}}</td>
</tr>
</tbody>
Con v-for nos recorremos el array de productos y pintamos tantos td como ítems tenga el array, por cada ítem llamamos al método data(), el cual, nos envía todas y cada una de las propiedades del documento.
Ya deberíamos ver todos los datos en la tabla:
INSERTADO DE DATOS
Para insertar nuevos datos en Firestore primero tendremos que crear en la interfaz un formulario que se encargara de comunicarse con la lógica y subir los datos a la base de datos:
<label>Producto: </label>
<input type=»text» v-model=»cajaProducto»/>
<br/>
<label>Cantidad: </label>
<input type=»number» v-model=»cajaCantidad»/>
<br />
<button @click=»insertarProducto» style=»margin-top: 2em;»>
Insertar producto
</button>
Cada etiqueta label está enlazada con una variable situada en data():
data() {
return {
productos : [],
cajaProducto : «» ,
cajaCantidad : 0 ,
}
}
Cuando pulsamos sobre el botón este llama a un método llamado insertarProducto(), el cual se encarga de insertar un nuevo producto a Firestore. Para insertar, firestore tiene un método doc() donde indicas el nombre del documento, después, llamaremos al método set() sobre doc(), este recibe como parámetro un objeto json con todas las propiedades del documento. Después de realizar la transacción de insertar llamamos al método getAll() para volver a cargar todos los datos de nuevo:
insertarProducto() {
db.doc(this.cajaProducto).set({
nombre : this.cajaProducto ,
cantidad : this.cajaCantidad
});
this.getAll();
}
MODIFICACION DE DATOS
Para realizar la modificación primero agregaremos una columna a la tabla donde estará el botón para modificar, este botón cargará los datos del producto seleccionado en el formulario de arriba a través de un método cargarDatos():
<table>
<thead>
<tr>
<th>PRODUCTO</th>
<th>CANTIDAD</th>
<th>MODIFICAR</th>
</tr>
</thead>
<tbody>
<tr v-for=»(producto,index) in productos» :key=»index»>
<td>{{producto.data().nombre}}</td>
<td>{{producto.data().cantidad}}</td>
<td>
<button @click=»cargarDatos(producto.data().nombre, producto.data().cantidad)»>
Modificar
</button>
</td>
</tr>
</tbody>
</table>
El método recibe los datos del producto y los carga en las variables asociadas a los input del formulario:
cargarDatos(producto, cantidad) {
this.cajaProducto = producto;
this.cajaCantidad = cantidad;
}
Una vez que ya tenemos el método que carga los datos en el formulario, vamos a crear otro botón debajo del formulario que su función será la de llamar al método que modifica el producto:
<button @click=»modificarProducto»>
Modificar
</button>
El método de modificarProducto() se encarga de acceder al documento con el nombre indicado en el input del formulario y llama al método update(), el cual, al igual que el método set() visto anteriormente recibe como parámetro un objeto json con todas las propiedades del documento que queramos modificar:
modificarProducto() {
db.doc(this.cajaProducto).update({
cantidad : this.cajaCantidad
});
this.getAll();
}
Para ver los cambios en el documento llamo al final al metodo getAll() para volver a cargar todos los datos en la tabla
BORRADO DE DATOS
Por ultimo para la eliminación de datos insertamos otra fila en la tabla la cual tendrá en su interior un botón eliminar:
<table>
<thead>
<tr>
<th>PRODUCTO</th>
<th>CANTIDAD</th>
<th>MODIFICAR</th>
<th>ELIMINAR</th>
</tr>
</thead>
<tbody>
<tr v-for=»(producto,index) in productos» :key=»index»>
<td>{{producto.data().nombre}}</td>
<td>{{producto.data().cantidad}}</td>
<td>
<button @click=»cargarDatos(producto.data().nombre, producto.data().cantidad)»>
Modificar
</button>
</td>
<td>
<button @click=»eliminarProducto(producto.data().nombre)»>
Eliminar
</button>
</td>
</tr>
</tbody>
</table>
El botón llama a un método eliminarProducto(), este recibe como parámetro el nombre del documento, es este caso es el nombre del producto. El método que nos ayudara a realizar esta operación es delete() y este se ejecuta sobre un documento:
eliminarProducto(producto) {
db.doc(producto).delete();
this.getAll();
}
Como es de costumbre, al acabar la transacción llamamos al método getAll() para cargar los datos de nuevo en la tabla. Este seria el aspecto final de nuestra app:
Cuando trabajamos con firestore también hay que tener en cuenta que las operaciones sobre la base de datos son asíncronas.
Con esto ya podríamos hacer operaciones CRUD simples sobre firestore, pero hay muchas mas herramientas que nos podrían ser útiles y que podemos encontrar en la documentación oficial.
Autor/a: Esteban Martínez Quintanar
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código / recursos utilizados / Otros datos de interés: https://github.com/Estebanmq/vuefirebasecrud