Firebase es una plataforma de desarrollo de Google que es rápida y fácil de configurar. En este tutorial, vamos a configurar una aplicación básica que integre Firebase/Firestore y Angular. Usaremos un paquete llamado AngularFire, la biblioteca angular oficial de Firebase, así como el SDK de Firebase en sí.

El uso de servicios en la nube es cada vez más popular, ya que ahorra tiempo al no tener que crear su propia seguridad, mantenimiento, etc. Con Firebase de Google, configuraremos una tienda de fuego gratuita para que actúe como nuestra base de datos.

Firebase también ofrece una base de datos en tiempo real, pero almacena todo en un árbol JSON grande.

Esto hace que sea una base de datos más simple, pero con cloud Firestore, que es lo que usaremos, hay documentos flexibles, lo que lo hace más escalable para datos más grandes. Firestore también es más rápido y, en general, más intuitivo si no está familiarizado con las bases de datos.

Configurar la consola Firebase

Deberá comenzar configurando su proyecto en la consola Firebase. Primero, ve aquí para encontrar la consola.

Crea un proyecto, dale un nombre y sigue los pasos. Una vez que haya terminado, estará en la Descripción General del proyecto.

No necesitamos agregar una aplicación. Deberías estar en la página de Resumen del proyecto. Aquí verás «Comienza agregando Firebase a tu aplicación».

Hacer esto haciendo clic en el «<>» botón (esto es para agregar una aplicación web). Puede configurar el alojamiento aquí, pero no lo cubriremos en este tutorial.

Sigue adelante y registra la aplicación. En la siguiente página, verá scripts para configurar el SDK de Firebase. Estos son útiles, pero veremos más adelante cómo obtener todo lo que necesitamos si los echa de menos en esta página. Sigue adelante y continúa consolando.

Inicialice Firestore y cree los primeros documentos

En la consola de Firebase, en el panel izquierdo, en Desarrollo, puede encontrar la pestaña Base de datos. Haga clic en él y se le llevará a una página donde puede hacer clic en «Crear base de datos». Aparecerá un modal donde puede seleccionar el modo de producción o el modo de prueba; queremos el modo de prueba. Es inseguro, pero está bien para pruebas.

Si continúas, se te pedirá que selecciones una ubicación. Adelante, elige el apropiado. Una vez que pulses listo, tardarás unos minutos en configurar la tienda de bomberos.

Cuando termine, estará en su tienda de bomberos. Siga adelante y seleccione «Iniciar colección».

Una captura de pantalla de la consola para configurar su proyecto Firebase.

Una pantalla de la consola para configurar su proyecto Firebase.

Te pedirá que crees un ID de colección; para nuestro ejemplo, vamos a llamarlo «testCollection». Pulsa siguiente y te llevará al formulario para crear tu primer documento.

Dejaremos el ID del documento en blanco-Firestore lo generará automáticamente para usted. En Campo, simplemente escriba «campo». A continuación, verá «cadena» como el tipo predeterminado. No hay razón para cambiar esto por ahora, así que déjalo como está. En Valor, escriba «valor1». Haga clic en guardar y verá que ha creado su primer documento.

Para nuestro ejemplo más adelante, vamos a crear un segundo documento. En la columna central verá » + Añadir documento.»siga adelante y haga clic en eso y volverá al formulario de creación de documentos.

Aquí, simplemente escriba «campo» en Campo y «valor2» en Valor. Haz clic en Guardar. Ahora tenemos dos documentos.

Iniciar un nuevo proyecto Angular

Hagamos nuestro proyecto frontend con la CLI Angular (interfaz de línea de comandos). Abra la ventana del terminal e instale la CLI angular globalmente:

npm install -g @angular/cli

Con esto instalado, puede ejecutar el comando ng.

En el terminal, escriba lo siguiente:

ng new your-app-name

Puede nombrar su proyecto como desee.

Una vez que lo inicie, la CLI Angular lo guiará a través de un par de opciones de configuración.

Puede agregar enrutamiento y, a continuación, elegir el formato de hoja de estilos que desea que Angular genere para su aplicación.

Después de eso, pasará por el resto y creará su aplicación Angular.

Una vez que haya terminado, continúe y cambie el directorio de terminal al que acabamos de crear:

cd your-app-name

En el directorio de la aplicación Angular, puede ejecutar ng serve compilar y servir su aplicación localmente.

Configurar Firebase en la aplicación Angular

Obtengamos el SDK de Firebase ejecutando lo siguiente en su terminal dentro del directorio de su proyecto Angular:

npm i --save firebase

Ahora Firebase se agrega a su proyecto.

Ve a la consola de Firebase. En el menú de la izquierda verá «Descripción general del proyecto» con un icono de engranaje al lado. Haga clic en el icono y, a continuación, en Configuración del proyecto en la ventana emergente. Aquí, vaya a la pestaña General y desplácese hasta la parte inferior.

En «Fragmento de SDK de Firebase», haga clic en la parte inferior de la radio junto a CDN (el valor predeterminado es Automático). Aquí encontrará todo lo que necesita para conectar su aplicación a Firebase. F

ind la variable firebaseConfig – tendremos que copiar esta información en la aplicación Angular. Se ve así (excepto que todo se completará correctamente):

var firebaseConfig = { apiKey: "************************************", authDomain: "*************.firebaseapp.com", databaseURL: "https://************.firebaseio.com", projectId: "***************", storageBucket: "****************.appspot.com", messagingSenderId: "*************", appId: "********************************", measurementId: "****************",};

Dentro de su aplicación Angular, navegue hasta el archivo generado app.module.ts (si creó su proyecto Angular a través de la CLI: src > app > app.module.ts). En este archivo, puede pegar la totalidad de la variable firebaseConfig (justo debajo de las importaciones está bien).

El siguiente punto es descargar el paquete npm angular/fire. Con este paquete podrás interactuar con Firebase con facilidad.

Puede instalar el paquete en su proyecto con la siguiente línea de código:

npm i angular/fire

Con esto instalado, podemos agregarlo aquí en el archivo app.module.ts:

import { AngularFireModule } from @angular/fire';

Ahora, en la matriz de importaciones, inicialice Firebase en su aplicación agregando la siguiente línea de código:

AngularFireModule.initializeApp(firebaseConfig)

Esta importación es para Firebase en general, pero si queremos agregar ciertos servicios, deberá agregarlos individualmente.

Para Firestore, agregue esto en la parte superior del archivo:

import { AngularFirestoreModule } from '@angular/fire/firestore';

Luego, en la matriz de importaciones cerca de la parte inferior:

AngularFirestoreModule

Implementar en la aplicación

En esta coyuntura, podría tener sentido crear uno o dos componentes en nuestra aplicación Angular. Puede crear un nuevo componente en su aplicación mediante la CLI de su proyecto.

Vamos a hacer una casa componente escribiendo el comando en el terminal:

ng g c home

La «g c» significa «generar componente». Esto generará una carpeta de inicio con cuatro archivos debajo: un archivo HTML, un archivo SCSS (o cualquier estilo que esté utilizando), un archivo TypeScript y un .archivo spec.

Si desea omitir la adición del .archivo de especificaciones, propende esta bandera a tu comando generar:

ng g c home --skipTests=true

Haremos nuestra lógica en nuestro componente home, pero no olvidemos agregarla en nuestro archivo app.component.html. Siempre puede agregar el componente home al enrutador, pero para simplificar, agregémoslo en el HTML.

Si configura un componente doméstico tal y como lo hice yo, el selector será «app-home», por lo que puede agregarlo en algún lugar del archivo app.component.html como este

<app-home></app-home>

Después de eso, comencemos a hacer nuestras operaciones en el componente doméstico.

Anteriormente creamos una colección en nuestra tienda de bomberos llamada testCollection; dentro de ella, hay dos documentos u objetos. Primero echemos un vistazo a «Leer» estos dos documentos de nuestra tienda de bomberos.

Leer

En home.component.ts archivo, podemos importar el Firestore a través de nuestro paquete Angular/fire:

import { AngularFirestore } from "@angular/fire/firestore";

Después de importarlo, podemos inicializarlo en nuestro constructor de la siguiente manera:

constructor(private firestore: AngularFirestore) {}

Que está asignando a nuestro AngularFirestoreimportadoel alias de «Firestore» — dale el nombre que quieras.

La funciónngOnInit es un lugar perfecto para leer desde la tienda de bomberos justo al lado del gitgo.

echa un vistazo a este código:

this.firestore .collection("testCollection") .get() .subscribe((ss) => { ss.docs.forEach((doc) => { this.myArray.push(doc.data()); }); });

Repasemos este paso a paso: como probablemente sabrás, this.firestore se refiere al alias que creamos para nuestro AngularFirestore en nuestro constructor.

El .collection('testCollection') es la forma en que nos referimos a la colección que creamos anteriormente, y el .get() simplemente nos está obteniendo esa colección completa (cubriremos la consulta de documentos individuales dentro de la colección más adelante).

Cuando .subscribe a la tienda de bomberos, esencialmente está esperando asincrónicamente en la API para devolver datos. Técnicamente, subscribe viene de RxJS y es un Observable que se actualizará cuando haya un cambio.

Ahora, el Firestore siempre devuelve instantáneas de datos, por lo que le dimos el alias de ss. Bajo la instantánea de nuestra base de datos se encuentran los documentos, que son los datos que queremos, y podemos usar el método array .forEach para recorrer el array de documentos.

En el ejemplo anterior, obtuvimos el doc.data() de Firebase Firestore. Este será el documento completo, que en nuestro caso es un objeto con una propiedad. Por lo tanto, cuando nos empujan a nuestra matriz, tendremos que inicializar nuestra matriz como el código siguiente:

myArray: any = 

Esto nos permite ver en nuestro HTML, borrar lo que hay, y reemplazarla con la siguiente:

<ul> <li *ngFor='let doc of myArray'> {{doc.field}} </li> </ul
Una lista completa en HTML con dos valores.

Una lista completa en HTML con dos valores.

Genial! Hemos leído con éxito los datos de nuestra tienda de bomberos.

Escriba

Primero, agreguemos ReactFormsModule a app.module.ts, de esta manera:

import { ReactiveFormsModule } from "@Angular/forms";

Además, agregue ReactiveFormsModule a la matriz de importación cerca de la parte inferior.

En nuestro archivo home.component.html, agreguemos un formulario para capturar y enviar nuevos datos. Escriba algo como esto:

<form ="this.form"> <input placeholder="New Value" formControlName="newValue" type="text" class="input-field col s12" /> <button (click)="onSubmit()"> Submit </button></form>

Ahora, si usó el HTML anterior, agregue la siguiente importación a nuestro archivo home.component.ts:

import { FormControl, FormGroup } from "@Angular/forms";

Luego, en nuestra clase, agregue:

form = new FormGroup({ newValue: new FormControl('') })`

Esto aceptará desde el HTML, el formulario y la entrada que hicimos, con el formControlName de newValue.

Por lo tanto, obtendremos la cadena introducida por el usuario en el HTML y la enviaremos como el valor de un nuevo documento en nuestra tienda de fuego. Podemos hacerlo mediante la siguiente función:

onSubmit() { this.firestore.collection('testCollection').add({ field: this.form.value.newValue }) .then(res => { console.log(res); this.form.reset(); }) .catch(e => { console.log(e); }) }

De la misma manera que leemos en nuestro Firestore, vamos a escribir esta vez usando la misma referencia para obtener nuestra colección:

this.firestore.collection('testCollection')

Esta vez, vamos a añadir un documento con la etiqueta .add. Queremos añadir el objeto con el texto que hemos recibido:

.add({field: this.form.valule.newValue})

Esto puede parecer extraño, pero es porque estamos obteniendo el valor de la Forma. Allí, obtenemos la propiedad que llamamos newValue. Por eso es value.newValue.

el resto de La función es simplemente un .then y .catch para controlar la respuesta de la Firestore.

Cuando se escribe en la tienda de fuego, la respuesta (cuando tiene éxito) será un objeto grande y extraño.

Dado que no estamos leyendo nada, el único uso de estos controladores es si queremos hacer algo inmediatamente después de escribir en Firestore (como hacemos cuando llamamos a .reset() para borrar el formulario).

Si sigue adelante y ejecuta la aplicación tal como está (ng serve), notará que no aparecerá en nuestra lista después de ingresar un nuevo valor y enviarlo a Firebase. Puede actualizar la página y debería aparecer, si la escritura fue exitosa. ¿Por qué es eso?

Es porque después de que nos escribió nuestro Firestore, no llegamos a leer el nuevo cambio. Con la forma en que está configurada nuestra función actual ngOnInit, no estamos observando cambios.

Para ver los nuevos datos, necesitamos cambiar cómo leemos los datos:

ngOnInit() { this.docs = ; const collectionRef = this.db.collection('testCollection'); const collectionInstance = collectionRef.valueChanges(); collectionInstance.subscribe(ss => this.myArray = ss); }

Ahora que nos hemos suscrito. Verás que después de agregar un nuevo documento a la base de datos, también se agregará a la lista en nuestra aplicación. La principal diferencia es que ahora estamos suscritos a .valueChanges().

Query

Agreguemos otro formulario que podamos usar para consultar el Firestore basado en el valor de un documento:

<form ="this.secondForm"> <input placeholder="value1" formControlName="valueToGet" type="text" class="input-field col s12" /> <button (click)="onQuery()"> Query </button></form>

Para simplificar, es exactamente igual que la primera forma, pero con diferentes nombres y una función diferente. Sigue adelante y nómbralo como quieras, pero asegúrate de usar los nuevos nombres y no los que usamos en el formulario anterior.

En el archivo typescript, asegúrese de inicializar el formulario en la parte superior de la clase:

secondForm = new FormGroup({ valueToGet: new FormControl('') })

También, aquí arriba donde inicializamos todo, agregue single: any; como una variable para poner nuestro documento consultado, y message: string; como una variable para mensajes de error.

Con eso, comencemos a construir nuestra función onQuery.

onQuery() { if (!this.secondForm.value.valueToGet) { this.message = 'Cannot be empty'; this.single = null; } else { this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet)).get() .subscribe(ss => { if (ss.docs.length === 0) { this.message = 'Document not found! Try again!'; this.single = null; } else { ss.docs.forEach(doc => { this.message = ''; this.single = doc.data(); }) } }) } }

En primer lugar, vemos si el usuario introduce algo. La entrada se puede encontrar en this.secondForm.value.valueToGet.

Por lo tanto, si está vacío, queremos devolver un mensaje y no enviar una cadena vacía a query Firebase. En esta comprobación «si», también me aseguro de que nuestra variable «única» esté vacía, porque es posible que hayamos consultado con éxito antes, pero ahora solo queremos enviar el mensaje de que el formulario no puede estar vacío.

Si no está vacío, seguimos adelante y consultamos nuestra tienda de bomberos. Notará algo nuevo en el parámetro» colección»: en Angular realmente hacemos la consulta dentro de ese parámetro. ref es una referencia a la colección, y .where es la forma más común de consultar documentos en una colección de Firestore.

En el método .where, primero le indicamos a Firebase qué campo consultar dentro de cada documento. Todos nuestros campos son simplemente «campo», por lo que es fácil.

a Continuación, se utiliza un comparador, ==, que es preguntar si el campo isEqual. También puede utilizar otros comparadores como <>=, y así sucesivamente.

Finalmente, el tercer parámetro le dice a Firebase con qué comparar el campo: en nuestro caso, queremos poner el valor de entrada del usuario aquí y ver si aparece como un valor en cualquier lugar de nuestra tienda de fuego.

Una nota rápida sobre una limitación de Firestore: las consultas con el método .where son limitadas.

Usted puede buscar algo que fuera una carta, o minúsculas donde el Firestore ha guardado como una mayúscula, y no va a volver. Puedes hacer cosas en el frontend para ayudar, como hacer que cada entrada de usuario en minúsculas coincida con la tienda de fuego, pero eso solo puede ir hasta cierto punto.

Por supuesto, puedes tirar de todo el Firestore al frontend (como estamos haciendo). Si bien consultar sería mejor, podría no ser ideal si su tienda de bomberos es gigantesca. La forma sugerida de hacer una búsqueda de texto completo es usar Algolia.

.get() ya que estamos leyendo el valor, y .subscribe como lo hicimos al leer toda la colección.

Sin embargo, después de obtener la instantánea de la Tienda de bomberos, queremos poner una verificación «if», para ver si se devuelve algo. Puede console.log la instantánea y ver si no estará vacía aunque no haya coincidencias en el almacén de fuego.

Pero, la propiedad docs en la instantánea estará vacía (una matriz vacía para ser exactos) si no hay coincidencia para nuestra consulta. Así es como podemos saber si nuestra consulta coincide con algo o no.

De nuevo, devolveremos el mensaje y estableceremos la variable single en null. Si encontramos una coincidencia, entonces queremos hacer lo contrario, establecer el mensaje en vacío y establecer la variable single a los datos devueltos.

Ahora que tenemos los datos, volvamos a home.component.html. Agreguemos algo de HTML para manejar nuestras variables «mensaje» y «individual»:

<p style="color: red;">{{message || null}}</p><div *ngIf="single"> <h1>{{single.field}}</h1> <button style="background-color: lightblue">Edit</button> <button style="background-color: red">Delete</button></div>

Bastante simple aquí. Usamos la directiva *ngIf para mostrar solo el documento coincidente si se encuentra. Como recordará, configuramos «single»a null si no se encontró, por lo que todo el *ngIfdiv estaría oculto. Lo mismo con el «mensaje», si está configurado en una cadena vacía.

También notará que agregamos botones para nuestra siguiente sección, ¡ya que aún necesitamos poder editar y eliminar!

Actualizar

Algo que nos ayudará mucho de aquí en adelante es obtener el id del documento que hemos consultado.

Sabemos que solo editaremos o eliminaremos ese documento consultado, así que obtengamos su id. Como puede notar, cuando creamos documentos desde nuestra aplicación, no les damos un id.

Además, cuando creamos nuestros documentos en la Tienda de fuego al principio, dejamos que la tienda de fuego genere automáticamente los ids; lo mismo sucede con los que creamos desde nuestra aplicación. Entonces, ¿cómo obtenemos el ids?

En nuestra función onQuery, vamos a establecer una referencia a nuestra consulta de base de datos como esta:

const docRef = this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet));

Romper la .get() y todo lo que siga, luego, en otra línea, use nuestra referencia, como esta:

docRef.get().subscribe(ss => ...)

And Y así sucesivamente. Es esencialmente lo mismo.

Ahora, debajo de las suscribirse método, vamos a agregar otra línea para obtener el documento id:

docRef.snapshotChanges().forEach((changes) => { changes.map((a) => { this.id = a.payload.doc.id; });});

Obviamente, tendremos que inicializar this.id en la parte superior: id: string = ''. Pero, ahora tenemos el id para usar en nuestras funciones de edición y eliminación que crearemos.

de Vuelta en nuestro home.component.html archivo, cambiar el botón editar anteriormente hemos creado el siguiente:

<button style='background-color: lightblue' (click)='openEdit()'>Edit</button>

Con este openEdit() función, en nuestro archivo de Transcripción, podemos inicializar una edición variable:

edit: boolean = false

Y crear el openEdit función para alternar:

openEdit() { this.edit = !this.edit};

Cada vez que se llame a la función, hará que la variable de edición pase de falso a verdadero, o de verdadero a falso.

Ahora, en nuestro archivo HTML, agregue el siguiente formulario. Aparecerá cuando edit sea true:

<form *ngIf="edit" ="this.editForm"> <input placeholder="{{single.field}}" formControlName="replaceValue" type="text" class="input-field col s12" /> <button (click)="onRename()"> Rename </button></form><p style="color: red;">{{message2 || null}}</p>

De nuevo, otro formulario. Lo importante aquí es que no vamos a sobrescribir todo el documento, mantendremos el id, pero el campo cambiará a lo que introduzcamos aquí, ese es el objetivo.

En home.component.ts, inicialice la variable message2 para manejar una entrada vacía e inicialice el formulario como hicimos con los otros. A continuación, cree una función onRename.

onRename() { if (!this.editForm.value.replaceValue) { this.message2 = "Cannot Be Empty!"; } else { this.firestore.collection('testCollection').doc(this.id).update({ field: this.editForm.value.replaceValue }); this.edit = false; this.message2 = ''; this.single = null; } }

Hay un par de cosas nuevas para aviso aquí.

Primero, usamos el método.doc y colocamos elid que obtuvimos de los pasos anteriores. Que obtiene el documento basado en id, no en una consulta.

A continuación, utilizamos el método .update. Esto solo sobrescribirá la propiedad que especifiquemos, en lugar de .set que sobrescribe todo el documento. En otras palabras, si tuviéramos tres campos en el documento, podríamos sobrescribir solo uno con el método update de esta manera.

de Nuevo, nos releer nuestra lista de documentos de la Firestore. Luego, podemos comprimir la consulta única, el cuadro de edición y cualquier mensaje que haya anteriormente.

Eliminar

La eliminación que haremos es básicamente la misma que nuestra actualización, excepto que usaremos el método eliminar.

Primero, en nuestro html, cambiemos el botón eliminar:

<button style='background-color: red' (click)='delete()'>Delete</button>

Ahora, todo lo que hay, es para crear el delete función.

Podría ser prudente poner una advertencia, antes de permitir que el usuario elimine el objeto. Agregue el siguiente código al archivo TypeScript:

delete() { if (confirm('Delete?')) { this.db.collection('testCollection').doc(this.id).delete(); this.edit = false; this.single = null; } }

El confirm('Delete') aparecerá una alerta que debe confirmarse antes de eliminarla, simplemente guarda al usuario para que no elimine accidentalmente algo sin querer.

Después de eso, simplemente obtenemos el documento por el id que almacenamos, y llamamos al método de eliminación en él. Así de simple.

Conclusión

Ahora ha creado con éxito una aplicación Angular que puede Crear, Leer, Actualizar y Eliminar documentos de Firestore. Como puede ver, Firebase Firestore es fácil de usar y está listo para usar. Esto se puede ampliar fácilmente a miles de documentos complejos.

Ahora que tiene una buena idea de los conceptos básicos de Firestore, consulte los documentos oficiales para obtener temas más avanzados.

Experimente sus aplicaciones de Angular exactamente como lo hace un usuario

Depurar aplicaciones de Angular puede ser difícil, especialmente cuando los usuarios experimentan problemas que son difíciles de reproducir. Si está interesado en monitorear y rastrear el estado angular y las acciones de todos sus usuarios en producción, pruebe LogRocket. Banner de prueba gratuita del panel de Control de LogRockethttps://logrocket.com/signup/

LogRocket es como un DVR para aplicaciones web, que graba literalmente todo lo que sucede en su sitio, incluidas solicitudes de red, errores de JavaScript y mucho más. En lugar de adivinar por qué ocurren los problemas, puede agregar e informar sobre el estado en el que se encontraba su solicitud cuando se produjo un problema.

El complemento LogRocket NgRx registra el estado angular y las acciones en la consola LogRocket, lo que le da contexto sobre qué provocó un error y en qué estado se encontraba la aplicación cuando se produjo un problema.

Modernice la forma de depurar sus aplicaciones de Angular: comience a monitorear de forma gratuita.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.