Creando una App de escritorio con Angular, Electron y Firebase Parte 2: CRUD firestore
Qué es un CRUD?
Un CRUD es un termino utilizado en las bases de datos para referirnos a las cuatro funciones básicas que podemos usar en una base de datos.
Create (Crear registros)
Read (Leer registros)
Update (Actualizar registros)
Delete (Borrar registros)
Y Firestore?
Es una nueva base de datos NoSQL flexible dentro del servicio de Firebase que nos permite mantener nuestros datos sincronizados de una manera mas eficiente y rápida. Cloud Firestore nos ofrece más funciones y más potencia a diferencia de Realtime Database.
…
Una vez entendido esto, comenzamos instalando Firebase y AngularFire en nuestro proyecto.
npm install angularfire2 firebase --saveAhora creamos un nuevo proyecto en Firebase
Seleccionamos la opción de Añadir Firebase a tu aplicación web y debería mostrarnos algo como esto:
Abrimos en nuestro proyecto el archivo environment.ts en la siguiente ruta src/environments/environment.ts y agregamos los datos de configuración.
Teniendo la configuración en angular, ahora vamos a crear una base de datos en la consola de Firebase, seleccionando Database, Cloud Firestore y Empezar en modo prueba.
Advertencia: Firestore está en modo Beta, lo elegí porque pienso que es el futuro de Firebase.
Retomamos nuestro proyecto y abrimos el app.module.ts e importamos lo siguiente:
Ahora procedemos a a a creación del servicio donde crearemos los métodos CRUD.
ng g s services/crud --module=app.module
Con esto se importa automáticamente en nuestro app.module.ts. En nuestro servicio debemos crear los siguientes métodos.
import { Injectable } from '@angular/core';// Importamos angular firestore y angular collectionimport { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';@Injectable()export class CrudService {// Creamos un alias para el AngularFirestore, en este caso se llamará AFSconstructor( private afs: AngularFirestore ) {// Esta impresion es opcional, la agrego para confirmar que el servicio funcione correctamenteconsole.log('Service CRUD On');}// C.R.U.D en esta parte es donde vamos a crear cada una de las operaciones basicas
// Crear, Leer, Actualizar y Eliminar// Crea un nuevo pacientepublic createPatient(data: {
nombre: string,
documento: string,
ciudad: string,
url: string}) {return this.afs.collection('patients').add(data);}// Obtiene un pacientepublic getPatient(documentId: string) {return this.afs.collection('patients').doc(documentId).snapshotChanges();}// Obtiene todos los pacientespublic getPatients() {return this.afs.collection('patients').snapshotChanges();}// Actualiza un pacientepublic updatePatient(documentId: string, data: {
nombre?: string,
documento?: string,
ciudad?: string,
url?: string}) {return this.afs.collection('patients').doc(documentId).set(data);}// Borrar un pacientepublic deletePatient(documentId: string) {return this.afs.collection('patients').doc(documentId).delete();}}
Estamos listos para crear nuestro componente patients
ng g component patientsEn el archivo patients.component. ts vamos a escribir la siguiente lógica:
Guardamos y abrimos el patients.component.html para agregar lo siguiente:
La parte importante es la directiva *ngFor que iterará en todos nuestros documentos.
Ahora como parte divertida después de tanto trabajo, crearemos una colección llamada patients y un documento en nuestra base de datos para así poder saber si nuestro CRUD funciona.
Después de crear nuestro documento, nuestra app se debería ver así:
Hasta ahora parece ser que el CRUD funciona, pero la idea es crear nuestros documentos directamente desde nuestra app y no desde la consola de firebase, pero esto lo trataremos en un nuevo post para no hacer este tan extenso.
No soy un experto en ninguna de estas tecnologías, por lo que cualquier error o recomendación será bienvenida, el motivo del post es compartir conocimientos y tratar de recibir Feedback de la comunidad para seguir mejorando.
