Header Ads Widget

Ticker

6/recent/ticker-posts

CRUD de base de datos de Angular 10/9 Firebase / Firestore

 En este tutorial, usará Angular 10/9 con Firebase y la base de datos Firestore para crear una aplicación que implemente las operaciones CRUD comunes.

También puede leer cómo usar su propia base de datos autohospedada con Node y TypeORM .

Veremos paso a paso cómo configurar Firebase en nuestro proyecto Angular 10 y crear un servicio para implementar operaciones de Firebase CRUD utilizando la base de datos en tiempo real de Firestore.

Angular 10 CRUD con Firebase y Firestore Database

Estos son los pasos de nuestro tutorial de Angular 10 Firebase CRUD:

  • Paso 1: creación de su proyecto Angular 10
  • Paso 2: creación de un proyecto de Firebase y una base de datos de Firestore
  • Paso 3: instalar y agregar Firebase a su proyecto de Angular 10.
  • Paso 4: crea un modelo Angular 10
  • Paso 5: creación de un servicio Angular 10
  • Paso 6: creación de un componente para realizar operaciones CRUD

¿Qué es CRUD?

CRUD significa Crear, Leer, Actualizar y Eliminar y se refiere a las operaciones que ejecutamos en una base de datos para crear, recuperar, actualizar y eliminar datos. En este ejemplo, la base de datos es una base de datos de Firestore que existe en la nube.

Nota : este tutorial funciona con Angular 9.

Prerrequisitos

Antes de comenzar este tutorial, primero debe asegurarse de tener:

  • Una versión reciente de Node.js (v10 +) y NPM instalados en su sistema,
  • El último Angular CLI 10 instalado en su sistema.

Si tiene los requisitos previos, ¡está listo para comenzar a crear su proyecto!

Paso 1: creación de su proyecto Angular 10

El primer paso de este tutorial es crear un nuevo proyecto de Angular 10 usando la CLI.

Dirígete a tu terminal y ejecuta el siguiente comando:

$ ng new angular-firebase-crud

La CLI le preguntará si desea agregar enrutamiento a su proyecto (puede elegir cualquier opción que desee) y qué formato de hoja de estilo desea usar (puede seleccionar CSS).

Después de eso, se generarán los archivos de su proyecto y se instalarán las dependencias de su proyecto.

Paso 2: creación de un proyecto de Firebase y una base de datos de Firestore

Ahora que se generó su proyecto, debe continuar con la creación de un proyecto de Firebase y una base de datos de Firestore. Para este asunto, simplemente debe ir a Firebase Console y crear un nuevo proyecto de Firebase.

A continuación, diríjase a la Project Overview >Develop >Databasepágina y cree una nueva base de datos de Firestore. Por ahora, asegúrese de habilitar el modo de prueba para que no necesite ningún permiso para acceder a la base de datos.

Paso 3: instalar y agregar Firebase a su proyecto de Angular 10.

Después de crear el proyecto Firebase y su base de datos Firestore próxima necesidad de instalar el firebase@angular/firelos paquetes de la siguiente manera:

$ cd ./angular-firebase-crud
$ npm install --save firebase @angular/fire

Luego, vaya a la descripción general de su proyecto de Firebase, luego haga clic en la web y copie los datos de configuración .

A continuación, abra el environments/environment.tsarchivo en su proyecto Angular 10 y agregue el firebaseConfigobjeto dentro del environmentobjeto.

export const environment = {
  production: false,
  firebaseConfig : {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
  }
};

Finalmente, debes configurar Firebase en tu proyecto. Abra el src/app/app.module.tsarchivo y actualícelo en consecuencia:

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';

@NgModule({
        // [...]
    imports: [
        // [...]
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFireDatabaseModule
    ],

Simplemente importa AngularFireModuley los AngularFireDatabaseModuleagrega a la importsmatriz del módulo de aplicación principal.

También llama al initializeApp()método de AngularFireModulepara pasar el objeto de configuración que agregó anteriormente al environments/environment.tsarchivo.

Eso es todo, ahora ha agregado Firebase y Firestore a su proyecto de Angular 10.

Paso 4: crea un modelo Angular 10

Después de configurar Firestore en su proyecto, puede continuar con la creación de una clase modelo. En el ejemplo simple, suponemos que está creando una aplicación de seguros donde necesitamos administrar un conjunto de pólizas.

Una solicitud de seguro a menudo contendrá más de un tipo de datos como clientes, empleados y pólizas, etc. En este ejemplo, nos centraremos únicamente en la entidad de póliza.

Creemos un modelo para nuestra entidad de póliza de seguros de la siguiente manera:

$ ng g class policy --type=model

A continuación, abra el src/policy.model.tsarchivo y actualícelo de la siguiente manera:

export class Policy {
    id: string;
    policyNumber: string;
    creationDate: Date;
    effectiveDate: Date;
    expireDate: Date;
    paymentOption: string;
    policyAmount: number;
    extraInfo: string;
}

Este es un ejemplo de una póliza de seguro con muchos campos y las relaciones con otras entidades omitidas en aras de la simplicidad.

Paso 5: creación de un servicio Angular 10

Un servicio Angular le permite encapsular el código que podría repetirse en muchos lugares de su proyecto. Usando la CLI de Angular, ejecute el siguiente comando para generar un servicio:

$ ng g service policy

A continuación, abra el src/policy.service.tsarchivo y actualícelo en consecuencia.

Primero, importe AngularFirestorey el Policymodelo de la siguiente manera:

import { AngularFirestore } from '@angular/fire/firestore';
import { Policy } from 'src/app/policy.model';

A continuación, inyecte AngularFirestoresu servicio a través de su constructor:

export class PolicyService {
  constructor(private firestore: AngularFirestore) { }
}

A continuación, agregue el getPolicies()método para recuperar las políticas disponibles de la colección Firestore:

getPolicies() {
    return this.firestore.collection('policies').snapshotChanges();
}

También debe agregar el createPolicy()método para conservar una póliza de seguro en la base de datos de Firestore:

createPolicy(policy: Policy){
    return this.firestore.collection('policies').add(policy);
}

A continuación, debe agregar el updatePolicy()método para actualizar una póliza de seguro por su identificador:

updatePolicy(policy: Policy){
    delete policy.id;
    this.firestore.doc('policies/' + policy.id).update(policy);
}

Finalmente, puede agregar el deletePolicy()método para eliminar una póliza de seguro por su identificador:

deletePolicy(policyId: string){
    this.firestore.doc('policies/' + policyId).delete();
}

Paso 6: creación de un componente para realizar operaciones CRUD

Después de crear el modelo y el servicio para crear, leer, actualizar y eliminar pólizas de seguro, ahora necesita crear el componente para probar nuestros métodos:

Usando Angular CLI 10, ejecute el siguiente comando para generar un componente:

$ ng g c policy-list

Ahora, abra el src/app/policy-list/policy-list.component.tsarchivo y actualícelo en consecuencia:

import { Component, OnInit } from '@angular/core';
import { PolicyService } from 'src/app/policy.service';
import { Policy } from 'src/app/policy.model';

@Component({
  selector: 'policy-list',
  templateUrl: './policy-list.component.html',
  styleUrls: ['./policy-list.component.css']
})
export class PolicyListComponent implements OnInit {

  policies: Policy[];
  constructor(private policyService: PolicyService) { }

  ngOnInit() {
    this.policyService.getPolicies().subscribe(data => {
      this.policies = data.map(e => {
        return {
          id: e.payload.doc.id,
          ...e.payload.doc.data()
        } as Policy;
      })
    });
  }

  create(policy: Policy){
      this.policyService.createPolicy(policy);
  }

  update(policy: Policy) {
    this.policyService.updatePolicy(policy);
  }

  delete(id: string) {
    this.policyService.deletePolicy(id);
  }
}

Actualización de la plantilla de componentes

Actualicemos ahora la plantilla del componente para mostrar las pólizas de seguro y también mostrar botones que se pueden usar para crear, actualizar y eliminar pólizas:

Abra el src/app/policy-list.component.htmlarchivo y agregue el siguiente marcado HTML:

<table>
  <thead>
    <th>Number</th>
    <th>Created At</th>
    <th>Expire At</th>
    <th>Amount</th>
  </thead>
  <tbody>
    <tr *ngFor="let policy of policies">

      <td>{{policy.policyNumber}}</td>
      <td>{{policy.creationDate}}</td>
      <td>{{policy.expireDate}}</td>
      <td>{{policy.policyAmount}}</td>
      <td>
          <button (click)="delete(policy.id)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

Debajo del <table>marcado, también puede agregar un formulario para crear una póliza de seguro.

Conclusión

En este tutorial, hemos visto por ejemplo cómo agregar operaciones de Firebase CRUD a su proyecto de Angular 10 que le permiten crear, leer, actualizar y eliminar datos de una base de datos de Firestore.


Publicar un comentario

0 Comentarios