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 --save

Ahora creamos un nuevo proyecto en Firebase

Elegimos un nombre, una región y aceptamos los términos.

Seleccionamos la opción de Añadir Firebase a tu aplicación web y debería mostrarnos algo como esto:

Configuración Firebase

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:

Imports angularfire

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 patients

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

Creación de documento manualmente

Después de crear nuestro documento, nuestra app se debería ver así:

Vista de nuestra app Electron ya integrada con Angular y Firebase

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.

--

--

--

光 — Nobody said it would be easy, mijo.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Andrey Bueno Solano

Kevin Andrey Bueno Solano

光 — Nobody said it would be easy, mijo.

More from Medium

How to translate in Ionic 5 Vue Capacitor app — Internationalization and Localization

How to load Spotify Web Playback SDK inside an Angular App?

Gitpod: Firebase & Angular online development

Angular + Firebase (CRUD) Products Page.