Cómo almacenar, actualizar, eliminar y recuperar datos de una base de datos de Firebase usando Angular

Firebase es una plataforma que le brinda una multitud de servicios para ayudarlo a crear y escalar una aplicación. Algunas de estas características incluyen servicios de alojamiento, almacenamiento de datos y la capacidad de realizar un seguimiento del análisis de datos.

Este tutorial se enfoca principalmente en cómo crear y agregar datos a una base de datos de Firebase, y cómo realizar operaciones de creación, lectura, escritura y eliminación en la base de datos desde una aplicación Angular local.

Cómo crear y agregar datos a una base de datos de Firebase

Suponiendo que ya tiene una aplicación Angular configurada y ejecutándose localmente, deberá estar conectada a una base de datos de Firebase para almacenar y acceder a los datos. Si no está familiarizado con Angular, puede leer más sobre Conceptos angulares, componentes y la estructura general de un proyecto angular.

Si aún no tiene una base de datos de Firebase, puede usar las credenciales de su cuenta de Google para iniciar sesión en Firebase y seguir las indicaciones. Una vez que esto esté configurado, cree un proyecto:

1. Desde Página de inicio de Firebase, Seleccione Ir a Consola en la esquina superior derecha del sitio.
2. En "Tus proyectos de Firebase", selecciona Agregar Proyecto.
3. Siga las indicaciones para crear un nuevo proyecto.
4. Una vez completado, se abrirá el proyecto. En el lado izquierdo de la pantalla, hay un panel que enumera las funciones que ofrece Firebase. Pase el cursor sobre los iconos hasta que vea Base de datos de Firestorey selecciónelo.
5. Seleccione Crear base de datos, y siga las indicaciones para crear una base de datos.
6. Al seleccionar las reglas de seguridad, seleccione Empezar en modo de prueba. Esto se puede cambiar más adelante para garantizar que los datos estén más seguros. Puede leer más sobre las reglas de seguridad de Firestore siguiendo las Documentación de base de fuego.
7. Una vez completado, se abrirá la base de datos. La estructura de la base de datos usa Colecciones, que es esencialmente el mismo concepto que las tablas de la base de datos. Por ejemplo, si necesitara dos tablas, una para almacenar la información de la cuenta y otra para almacenar la información del usuario, crearía dos colecciones denominadas Cuenta y Usuario.
8. Seleccione Iniciar colección y agregue un ID de colección llamado "Usuario".
9. Agregue el primer registro, con información sobre un usuario. Haga clic en Agregue campo para agregar tres nuevos campos: firstName (cadena), lastName (cadena) y vipMember (booleano). El ID del documento se puede generar automáticamente.
10. Hacer clic Salvar.
11. Para agregar más registros a la colección "Usuario", haga clic en Agregar documento (añadir documento es el equivalente a añadir un nuevo registro o usuario). Agregue cuatro usuarios más con los mismos tres campos.

La base de datos ahora está configurada con algunos datos de prueba.

Cómo integrar Firebase en su aplicación angular

Para acceder a estos datos en su aplicación Angular local, primero configure algunos ajustes de la aplicación para conectarse a la base de datos de Firebase:

1. En Firebase, ve al panel de la izquierda y haz clic en Descripción del proyecto.
2. Selecciona el Web botón (indicado entre paréntesis angulares).
3. Registre su aplicación local agregando el nombre de la aplicación.
4. Instale Firebase en su aplicación Angular local.

   npm i base de fuego
   

5. Firebase luego mostrará algunos detalles de configuración. Guarde estos detalles y haga clic en Continuar a la consola.
6. Según los detalles proporcionados en el paso anterior, copie el siguiente código en environment.prod.ts y environment.ts en la aplicación Angular.

   exportar entorno const = {
    producción: cierto,
    firebaseConfig: {
    apiKey: "tu-clave-api",
    authDomain: "su-auth-dominio",
    projectId: "tu-proyecto-id",
    storageBucket: "su-storage-buckey",
    messengerSenderId: "su-identificación-del-remitente-de-mensajería",
    appId: "tu-api-id",
    id de medida: "tu-id-de-medida"
    }
   };
   

7. AngularFirestore de @angular/fuego/fuego se usará para configurar Firebase en Angular. Tenga en cuenta que AngularFirestore no es compatible con Angular versión 9 y superior. En la aplicación Angular local, ejecute:

   npm i @angular/fuego
   

8. Agregue los módulos Firestore y de entorno a la sección de importaciones en app.module.ts.

   importar {AngularFireModule} desde "@angular/fire";
   importar {AngularFirestoreModule} desde "@angular/fire/firestore";
   import {entorno} desde "../entornos/entorno";
   

9. Los módulos de Firestore también deben incluirse en la matriz de importaciones en app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   Módulo AngularFirestore,

Cómo recuperar datos de Firebase usando un servicio

Por lo general, es una buena práctica tener uno o varios servicios.ts archivos que utiliza para interactuar específicamente con la base de datos. Las funciones que agrega al archivo de servicios se pueden llamar en otros archivos, páginas u otros componentes de TypeScript en toda la aplicación.

1. Cree un archivo llamado service.ts en el src/aplicación/servicios carpeta.
2. Agregue el módulo AngularFirestore a la sección de importaciones e inclúyalo en el constructor.

   importar { Inyectable } desde '@angular/core';
   importar {AngularFirestore} desde '@angular/fire/firestore';
   @Inyectable({
    proporcionado en: 'raíz'
   })
   Servicio de clase de exportación {
    constructor (base de datos privada: AngularFirestore) { }
   }
   

3. Agregue una función que devuelva una promesa que contenga una lista de todos los usuarios. "this.db.collection('Usuario')" se refiere a la colección "Usuario" en la base de datos.

   obtenerTodosLosUsuarios() {
    volver nueva promesa((resolver)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (usuarios => resolver (usuarios));
    })
   }
   

4. Para usar esta función en otro archivo TypeScript, importe el nuevo servicio y agréguelo al constructor.

   importar {Servicio} desde 'src/app/services/service
   constructor (servicio privado: Servicio) {}
   

5. Obtenga la lista de todos los usuarios que utilizan la función creada en el archivo de servicios.

   getUsers asincrónicos() {
    this.allUsers = esperar this.service.getAllUsers();
    consola.log (esto.todos los usuarios);
   }
   

Cómo agregar un nuevo registro a la base de datos de Firebase

Agregue un nuevo registro para un usuario en la base de datos de Firebase.

1. En services.ts, agregue una nueva función para crear un nuevo registro. Esta función toma la ID de un nuevo usuario y todos sus detalles. Utiliza la función de configuración de Firestore para enviar esa información a Firebase y crear un nuevo registro.

   addNewUser (_newId: cualquiera, _fName: cadena, _lName: cadena, _vip: booleano) {
    this.db.collection("Usuario").doc (_newId).set({firstName: _fName, lastName: _lName, vipMember: _vip});
   }

2. Llame a la función addNewUser() en otro archivo de TypeScript. No olvide importar el servicio e incluirlo en el constructor, como se mostró anteriormente. Siéntase libre de usar un generador de ID aleatorio para crear la nueva ID para el usuario.

   this.service.addNewUser("62289836", "Jane", "Doe", true);
   

Cómo actualizar datos en la base de datos de Firebase

Firebase tiene muchas funciones que convertirlo en una de las mejores herramientas disponibles. Para actualizar ciertos campos en un registro en particular, use la función de actualización de Firestore.

1. En el archivo service.ts, cree una función llamada updateUserFirstName(). Esta función actualizará el nombre de un registro de usuario elegido. La función toma el ID del registro que debe actualizarse y el nuevo valor para el nombre del usuario.

   updateUserFirstName (_id: cualquiera, _firstName: cadena) {
    this.db.doc(`Usuario/${_id}`).update({firstName: _firstName});
   }

2. Para actualizar varios campos para el mismo registro, simplemente expanda los campos que se ingresan dentro de la función de actualización de Firestore. En lugar de solo firstName, agregue lastName para actualizar eso con un nuevo valor también.

   updateUserFullName (_id: cualquiera, _firstName: cadena, _lastName: cadena) {
    this.db.doc(`Usuario/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Cualquiera de las funciones anteriores se puede utilizar en otros archivos de TypeScript.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

Cómo eliminar un registro de la base de datos de Firebase

Para eliminar un registro, use la función de eliminación de Firestore.

1. En el archivo service.ts, cree una función llamada deleteUser(). Esta función toma el ID del registro que debe eliminarse.

   eliminarUsuario (_id: cualquiera) {
    this.db.doc(`Usuario/${_id}`).delete();
    }
   

2. La función anterior se puede usar en otros archivos de TypeScript.

   este.servicio.deleteUser("vLBnSegFl1pD7XQ42TBv");

Recuperar datos de Firebase mediante consultas y filtros

El filtro "dónde" puede filtrar los resultados que se devuelven en función de una condición específica.

1. En services.ts, cree una función que obtenga todos los usuarios VIP (esto es si el campo vipMember está establecido en verdadero). Esto se indica mediante la parte "ref.where('vipMember', '==', true)" de la siguiente llamada de Firebase.

   getAllVipMembers() {
    volver nueva promesa((resolver)=> {
    this.db.collection('Usuario', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (usuarios => resolver (usuarios))
    })
    }

2. Utilice esta función en otro archivo TypseScript.

   asíncrono getAllVipMembers() {
    this.vipUsers = esperar this.service.getAllVipMembers();
    consola.log (this.vipUsers);
    }

3. La consulta se puede modificar para agregar otras operaciones como Ordenar por, Comenzar en o Límite. Modifique la función getAllVipMembers() en services.ts para ordenar por apellido. La operación Ordenar por puede requerir la creación de un índice en Firebase. Si este es el caso, haga clic en el enlace proporcionado en el mensaje de error en la consola.

   getAllVipMembers() {
    volver nueva promesa((resolver)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (usuarios => resolver (usuarios) )
    })
    }

4. Modifique la consulta para que solo devuelva los tres primeros registros. Para esto se pueden usar las operaciones Comenzar en y Límite. Esto es útil si necesita implementar la paginación, que es cuando se muestra una cierta cantidad de registros por página.

   getAllVipMembers() {
    volver nueva promesa((resolver)=> {
    this.db.collection('Usuario', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (usuarios => resolver (usuarios))
    })
    }

Agregue más datos a Firebase y más solicitudes en la aplicación Angular

Hay muchas otras combinaciones de consultas que puede explorar al intentar recuperar datos de una base de datos de Firebase. Esperamos que ahora comprenda cómo configurar una base de datos Firebase simple, cómo conectarla a una aplicación Angular local y cómo leer y escribir en la base de datos.

También puede obtener más información sobre los otros servicios que ofrece Firebase. Firebase es una de las muchas plataformas que puede integrar con Angular, e independientemente de si tiene un nivel principiante o avanzado, siempre hay mucho más que aprender.

Los 8 mejores cursos de Angular para principiantes y usuarios avanzados

Leer siguiente

Sobre el Autor