Header Ads Widget

Ticker

6/recent/ticker-posts

Cree una aplicación Ionic 5 / Angular CRUD con Firestore y AngularFire2

 En este tutorial usaremos la nueva base de datos Firestore de Google para crear una aplicación móvil simple Ionic 5 / Angular con métodos CRUD (Crear, Leer, Actualizar y Eliminar) usando Angularfire2. Comenzaremos presentando la base de datos de Firestore y sus características frente a la antigua base de datos en tiempo real de Firebase, luego crearemos un nuevo proyecto Ionic 5 / Angular, configuraremos nuestra cuenta de Firebase y habilitaremos la base de datos de Firestore y luego integraremos la nueva base de datos. con nuestra aplicación Ionic y cree los métodos CRUD que se pueden usar para crear, leer, actualizar y eliminar documentos de productos simples de una colección en la base de datos, ¡así que comencemos!

Cloud Firestore de Google es la nueva base de datos orientada a documentos basada en NoSQL que se puede usar con las otras herramientas de infraestructura de base de fuego para crear un back-end para sus aplicaciones móviles y web.

A diferencia de las bases de datos basadas en SQL, NoSQL Cloud Firestore permite a los desarrolladores usar documentos (contenedor de pares clave-valor) organizados en colecciones para almacenar sus datos en lugar de tablas, filas y columnas o también los objetos JSON (formando un árbol JSON plano) usados por la base de datos en tiempo real de Firebase.

Esto significa que es un producto completamente administrado, construido desde cero para escalar automáticamente. Cloud Firestore es una base de datos replicada de varias regiones que garantiza que una vez que los datos se comprometen, sean duraderos incluso ante desastres inesperados. No solo eso, sino que a pesar de ser una base de datos distribuida, también es muy consistente, eliminando casos complicados para facilitar la creación de aplicaciones independientemente de la escala. Fuente

A lo largo de este tutorial, aprenderá cómo integrar Cloud Firestore de Google en su aplicación Ionic 5 / Angular usando AngularFire 5 construyendo una aplicación móvil CRUD (Crear, Leer, Actualizar y Eliminar) de ejemplo desde cero.

Funciones de Cloud Firestore frente a Firebase Realtime Database

Cloud Firestore de Google ofrece muchas funciones sobre la base de datos en tiempo real de Firebase ya existente. Facilita las cosas cuando crea aplicaciones con requisitos de base de datos complejos utilizando una variedad de conceptos NoSQL como colecciones, subcolecciones y documentos donde puede almacenar pares clave-valor.

Cloud Firestore es una nueva generación de la base de datos en tiempo real de Firebase tradicional que ofrece consultas de datos más potentes y encadenadas, sincronización en tiempo real, soporte de persistencia fuera de línea (usando los SDK del cliente) y escalado automático (gracias a la integración con la nube de Google plataforma).

También está bien integrado con la infraestructura de base de fuego existente y la plataforma Google Cloud.

Primeros pasos y requisitos

Deberá crear o iniciar sesión en su cuenta de Firebase , para habilitar la nueva base de datos, luego siga estos pasos:

Vaya a firebase console y cree un nuevo proyecto.

Haga clic en Bases de datos en el lado izquierdo y luego seleccione la base de datos de Firestore.

A continuación, deberá configurar las reglas de seguridad para comenzar en modo de prueba.

Para esta demostración simple, usaremos la autenticación anónima de Firebase y el acceso público a la base de datos, por lo que desde el lado izquierdo de su consola de Firebase, elija Autenticación, luego vaya a la pestaña Método de inicio de sesión y habilite Anónimo.

Opcionalmente, también puede agregar una colección a su base de datos de Firestore. Esto también se puede crear automáticamente, una vez que hace referencia a una colección que no existe, a partir de su código.

A continuación, deberá configurar un entorno de desarrollo para trabajar con Ionic. Puede comenzar a desarrollar aplicaciones Ionic con el mínimo de requisitos. Primero instale Node.js y npm si aún no están instalados en su máquina desde el sitio web oficial , luego instale Ionic CLI usando npm.

npm install -g @ionic/cli

Es posible que deba agregar sudo antes de este comando.

Ahora puede crear una nueva aplicación Ionic 5 / Angular ejecutando el siguiente comando:

ionic start ionic-firestore-crud blank --type=angular

Esto creará una aplicación Ionic basada en la plantilla en blanco.

A continuación, estos son los pasos que debe seguir en pocas palabras:

  • primero navegue a la carpeta del proyecto recién creado
  • a continuación, instale la biblioteca de JavaScript de firebase, angularfire2 y promise-polyfill de npm (la promesa-polyfill solo se requiere cuando se implementa su aplicación en dispositivos iOS o Android para evitar errores de promesa al usar Firebase)
  • luego agregue código para interactuar con su base de datos de Firestore a su componente.

Así que comencemos con el primer paso.

Integrando Cloud Firestore con Ionic

Usaremos Angularfire2 para integrar Cloud Firestore con Ionic 5 / Angular y, dado que este es un producto nuevo, necesita la última versión del SDK de Firebase JavaScript y AngularFire2 instalados, así que regrese a su terminal o símbolo del sistema y ejecute el siguiente comando:

npm install firebase@latest angularfire2@latest promise-polyfill --save

Ya configuramos nuestra nueva base de datos de Firestore y habilitamos la autenticación anónima. Ahora necesitaremos agregar nuestras credenciales a la aplicación Ionic 5 / Angular. Así que continúe y obtenga las credenciales requeridas haciendo clic en el elemento del menú Descripción general del proyecto de su consola Firebase , luego haga clic en Agregar Firebase a su aplicación web .

Debería poder ver y copiar las credenciales de su base de datos en su portapapeles.

Ahora regrese a su proyecto Ionic y luego cree un archivo que se usará para almacenar por separado las credenciales de configuración (puede nombrarlo así config.ts:) luego copie sus credenciales allí:

touch config.ts

Así es como debería verse el objeto credentails, pero por supuesto con sus propios valores:

export const credentials = {
    firebase: {      
        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>'    
    }  
};

A continuación, deberá conectar Firebase y Firestore a su módulo principal Ionic 5 / Angular. Simplemente necesita importar los módulos AngularFireModule , AngularFirestoreModule y AngularFireAuthModule y agregarlos a la matriz de importaciones . Asegúrese también de importar las credenciales de y config.jsluego pasar el objeto credentials.firebase al método initializeApp () de AngularFireModule :

/* ... */
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { credentails } from './config';


/* ... */ 

  imports: [
    /* ... */
    AngularFireModule.initializeApp(credentials.firebase),
    AngularFirestoreModule.enablePersistence(),
    AngularFireAuthModule,
    AngularFireDatabaseModule
  ],
  providers: [],

Opcionalmente, puede llamar al método enablePersistence () en el módulo AngularFirestoreModule que habilita el soporte sin conexión en los navegadores web para que los usuarios aún puedan acceder a la aplicación cuando se desconectan.

Ahora, para poder trabajar con Firestore, debe inyectar el servicio AngularFirestore en el constructor de su (s) componente (s).

import { AngularFirestore } from 'angularfire2/firestore';
import { AngularFirestoreCollection } from 'angularfire2/firestore';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';

interface Product {
  name: string,  
  description: string,
  quantity: number
}

products: Observable<Product[]>;
productsCollectionRef: AngularFirestoreCollection<Product>;

constructor(public afAuth: AngularFireAuth, afs: AngularFirestore) {
    this.afAuth.auth.signInAnonymously();
    this.productsCollectionRef = this.afs.collection('products'); 
    this.products = this.productsCollectionRef.valueChanges();
  }
}

Primero importamos las dependencias requeridas y luego inyectamos AngularFireAuth como afAuth y AngularFirestore como afs . En el constructor, estamos llamando this.afAuth.auth.signInAnonymously()para que los usuarios inicien sesión con la opción Firebase Anonymous.

A continuación, creamos una referencia a la colección de productos que contiene los documentos del producto . Tenga en cuenta que crear una referencia a una colección en realidad no envía ninguna solicitud, por lo que también puede crear referencias a colecciones que aún no se han creado (en este caso, la colección se creará automáticamente).

A continuación, llamamos al método .valueChanges () en la referencia de la colección que devuelve un Observable que escucha cualquier cambio en la colección.

Al crear aplicaciones CRUD, necesitará los identificadores de los documentos que está recuperando para poder actualizarlos y eliminarlos, por lo que deberá usar .snapshotChanges () en lugar de .valueChanges () en la mayoría de los casos, ya que devuelve el id entre otros. información de los documentos.

Recuperar o consultar documentos

Ahora mostremos los productos en la plantilla con algo como:

<ion-list>
  <ion-list-header>
    Products
  </ion-list-header>
  <ion-item  *ngFor="let product of products | async">
    <h1></h1>
    <p></p> 
    <p></p>
  </ion-item>
</ion-list>

async es una canalización incorporada que le permite suscribirse fácilmente a Observables sin llamar manualmente al método .subscribe () en la clase del componente.

Entonces, en la plantilla, nos suscribimos a los productos observables, luego recorremos el resultado y mostramos el nombre, la descripción y la cantidad usando un <ion-list>.

Crear o agregar documentos

Puede agregar un nuevo documento usando el .add()método de la referencia de la colección: Agregue un método createProduct () a su componente:

createProduct(name: string, description: string, quantity: number) {

    this.productsCollectionRef.add({ name: name, description: description, quantity: quantity });

}

Actualización de documentos

También puede actualizar usando el método .update () en el documento recuperado por el método .doc (id) que toma la identificación del documento que desea actualizar.

updateProduct(product: Product) {
  this.productsCollectionRef.doc(product.id).update({ name: 'NEW_NAME', description : 'NEW_DESC' , quantity : product.quantity + 100 /*NEW QUANTITY*/ });
}

Eliminar documentos

Eliminar un documento funciona de la misma manera que actualizar, simplemente tome una referencia al documento que desea eliminar llamando al método .doc (id) en la colección y luego llame al método .delete () .

deleteProduct(product: Product) {
  this.productsCollectionRef.doc(product.id).delete();
}

Eso es todo, hemos creado los cuatro métodos necesarios para cualquier aplicación CRUD.

Conclusión

En este tutorial hemos visto cómo construir una aplicación CRUD simple con Ionic 5 / Angular y la nueva base de datos Cloud Firestore de Google usando AngularFire2 .

Publicar un comentario

0 Comentarios