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.

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.

Estamos listos para crear nuestro componente 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.