Come archiviare, aggiornare, eliminare e recuperare dati da un database Firebase utilizzando Angular

Stabilisci una connessione con un database Firebase di Angular e gestisci i tuoi dati con questa guida.

Firebase è una piattaforma che fornisce una moltitudine di servizi per assistere nella creazione e nel ridimensionamento di un'applicazione. Alcune di queste funzionalità includono servizi di hosting, archiviazione dei dati e la possibilità di tenere traccia dell'analisi dei dati.

Questo tutorial si concentra principalmente su come creare e aggiungere dati a un database Firebase e su come eseguire operazioni di creazione, lettura, scrittura ed eliminazione nel database da un'applicazione Angular locale.

Come creare e aggiungere dati a un database Firebase

Supponendo che tu abbia già un'applicazione Angular configurata e in esecuzione localmente, dovrà essere connessa a un database Firebase per archiviare e accedere ai dati. Se non hai familiarità con Angular, puoi leggere ulteriori informazioni sui concetti, i componenti e la struttura generale di Angular.

Se non disponi già di un database Firebase, puoi utilizzare le credenziali del tuo account Google per accedere a Firebase e seguire le istruzioni. Una volta impostato, crea un progetto:

1. Dalla home page di Firebase, seleziona Vai alla console nell'angolo in alto a destra del sito.
2. Nella sezione "I tuoi progetti Firebase", seleziona Aggiungi progetto

3. Segui le istruzioni per creare un nuovo progetto.

   

4. Una volta completato, il progetto verrà aperto. Sul lato sinistro dello schermo è presente un pannello che elenca le funzionalità offerte da Firebase. Passa il mouse sopra le icone finché non vedi Database Firestore e selezionalo.

   

5. Seleziona Crea database e segui le istruzioni per creare un database.

6. Quando selezioni le regole di sicurezza, seleziona Avvia in modalità test. Questo può essere modificato in seguito per garantire che i dati siano più sicuri. Puoi leggere ulteriori informazioni sulle regole di sicurezza di Firestore seguendo la documentazione di Firebase.

   

7. Una volta completato, il database si aprirà. La struttura del database utilizza le raccolte, che sono essenzialmente lo stesso concetto delle tabelle del database. Ad esempio, se avessi bisogno di due tabelle, una per archiviare le informazioni sull'account e l'altra per archiviare le informazioni sull'utente, creeresti due raccolte denominate Account e Utente.

8. Seleziona Avvia raccolta e aggiungi un ID raccolta denominato "Utente".

   

9. Aggiungi il primo record, con le informazioni su un utente. Fai clic su Aggiungi campo per aggiungere tre nuovi campi: firstName (stringa), lastName (stringa) e vipMember (booleano). L'ID documento può essere generato automaticamente.

   

10. Fai clic su Salva.
11. Per aggiungere più record alla raccolta "Utente", fai clic su Aggiungi documento (aggiungere documento equivale ad aggiungere un nuovo record o utente). Aggiungi altri quattro utenti con gli stessi tre campi.

Il database è ora configurato con alcuni dati di test.

Come integrare Firebase nella tua applicazione Angular

Per accedere a questi dati nella tua applicazione Angular locale, configura prima alcune impostazioni dell'app per connetterti al database Firebase:

1. In Firebase, vai al pannello di sinistra e fai clic su Panoramica del progetto.
2. Seleziona il pulsante Web (indicato da parentesi angolari).

3. Registra la tua app locale aggiungendo il nome dell'app.

   

4. Installa Firebase nella tua applicazione Angular locale.

   npm i firebase
   

5. Firebase visualizzerà quindi alcuni dettagli di configurazione. Salva questi dettagli e fai clic su Continua sulla console.

6. In base ai dettagli forniti nel passaggio precedente, copia il seguente codice in Environment.prod.ts e Environment.ts nell'applicazione Angular.

   export const environment = {
     production: true,
     firebaseConfig: {
       apiKey: "your-api-key",
       authDomain: "your-auth-domain",
       projectId: "your-project-id",
       storageBucket: "your-storage-buckey",
       messagingSenderId: "your-messaging-sender-id",
       appId: "your-api-id",
       measurementId: "your-measurement-id"
     }
   };
   

7. AngularFirestore da @angular/fire/firestore verrà utilizzato per configurare Firebase in Angular. Tieni presente che AngularFirestore non è compatibile con Angular versione 9 e successive. Nell'app Angular locale, esegui:

   npm i @angular/fire
   

8. Aggiungi i moduli Firestore e ambiente alla sezione delle importazioni in app.module.ts.

   import { AngularFireModule } from "@angular/fire";
   import { AngularFirestoreModule } from "@angular/fire/firestore";
   import { environment } from "../environments/environment";
   

9. Anche i moduli Firestore devono essere inclusi nell'array imports in app.module.ts.

   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFirestoreModule,

Come recuperare i dati da Firebase utilizzando un servizio

Di solito è buona norma avere uno o più file services.ts da utilizzare per interagire in modo specifico con il database. Le funzioni aggiunte al file services possono quindi essere richiamate in altri file, pagine o altri componenti TypeScript in tutta l'applicazione.

1. Crea un file chiamato service.ts nella cartella src/app/services.

2. Aggiungi il modulo AngularFirestore alla sezione imports e includilo nel costruttore.

   import { Injectable } from '@angular/core';
   import { AngularFirestore } from '@angular/fire/firestore';
   @Injectable({
     providedIn: 'root'
   })
   export class Service {
     constructor(private db: AngularFirestore) { }
   }
   

3. Aggiungi una funzione che restituisca una promessa contenente un elenco di tutti gli utenti. "this.db.collection('User')" si riferisce alla raccolta "User" nel database.

   getAllUsers() {
       return new Promise<any>((resolve)=> {
         this.db.collection('User').valueChanges({ idField: 'id' }).subscribe(users => resolve(users));
       })
   }
   

4. Per utilizzare questa funzione in un altro file TypeScript, importa il nuovo servizio e aggiungilo al costruttore.

   import { Service } from 'src/app/services/service
   constructor(private service: Service) {}
   

5. Ottieni l'elenco di tutti gli utenti utilizzando la funzione creata nel file services.

   async getUsers() {
      this.allUsers = await this.service.getAllUsers();
      console.log(this.allUsers);
   }
   

Come aggiungere un nuovo record al database Firebase

Aggiungi un nuovo record per un utente nel database Firebase.

1. In services.ts, aggiungi una nuova funzione per creare un nuovo record. Questa funzione accetta l'ID di un nuovo utente e tutti i suoi dettagli. Utilizza la funzione set di Firestore per inviare tali informazioni a Firebase e creare un nuovo record.

   addNewUser(_newId:any, _fName:string, _lName:string, _vip:boolean) {
      this.db.collection("User").doc(_newId).set({firstName:_fName,lastName:_lName,vipMember:_vip});
   }

2. Chiama la funzione addNewUser() in un altro file TypeScript. Non dimenticare di importare il servizio e includerlo nel costruttore, come mostrato in precedenza. Sentiti libero di utilizzare un generatore di ID casuale per creare il nuovo ID per l'utente.

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

Come aggiornare i dati nel database Firebase

Firebase ha molte funzioni che lo rendono uno dei migliori strumenti disponibili. Per aggiornare determinati campi in un particolare record, utilizza la funzione di aggiornamento di Firestore.

1. Nel file service.ts creare una funzione denominata updateUserFirstName(). Questa funzione aggiornerà il nome del record utente scelto. La funzione accetta l'ID del record che deve essere aggiornato e il nuovo valore per il nome dell'utente.

   updateUserFirstName(_id:any, _firstName:string) {
       this.db.doc(`User/${_id}`).update({firstName:_firstName});
   }

2. Per aggiornare più campi per lo stesso record, basta espandere i campi immessi nella funzione di aggiornamento di Firestore. Invece di solo firstName, aggiungi lastName per aggiornare anche quello con un nuovo valore.

   updateUserFullName(_id:any, _firstName:string, _lastName:string) {
       this.db.doc(`User/${_id}`).update({firstName:_firstName,lastName:_lastName});
   }

3. Qualsiasi delle funzioni di cui sopra può essere utilizzata in altri file TypeScript.

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

Come eliminare un record dal database Firebase

Per eliminare un record, utilizzare la funzione di eliminazione di Firestore.

1. Nel file service.ts, crea una funzione chiamata deleteUser(). Questa funzione acquisisce l'ID del record che deve essere eliminato.

   deleteUser(_id:any) {
      this.db.doc(`User/${_id}`).delete();
    }
   

2. La funzione precedente può quindi essere utilizzata in altri file TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Recupera i dati Firebase utilizzando query e filtri

Il filtro "dove" può filtrare i risultati restituiti in base a una condizione specifica.

1. In services.ts, crea una funzione che ottenga tutti gli utenti VIP (questo se il campo vipMember è impostato su true). Ciò è indicato dalla parte "ref.where('vipMember', '==', true)" della chiamata Firebase di seguito.

   getAllVipMembers() {
       return new Promise<any>((resolve)=> {
         this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe(users => resolve(users))
       })
     }

2. Utilizzare questa funzione in un altro file TypseScript.

   async getAllVipMembers() {
      this.vipUsers = await this.service.getAllVipMembers();
      console.log(this.vipUsers);
    }

3. La query può essere modificata per aggiungere altre operazioni come Ordina per, Inizia da o Limite. Modifica la funzione getAllVipMembers() in services.ts per ordinarla in base al cognome. L'operazione Ordina per potrebbe richiedere la creazione di un indice in Firebase. In tal caso, fare clic sul collegamento fornito nel messaggio di errore nella console.

   getAllVipMembers() {
       return new Promise<any>((resolve)=> {
         this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe(users => resolve(users))
       })
     }

4. Modificare la query in modo che restituisca solo i primi tre record. A questo scopo è possibile utilizzare le operazioni Inizia da e Limite. Ciò è utile se è necessario implementare il paging, ovvero quando viene visualizzato un certo numero di record per pagina.

   getAllVipMembers() {
       return new Promise<any>((resolve)=> {
         this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt(0).limit(3)).valueChanges().subscribe(users => resolve(users))
       })
     }

Aggiungi più dati a Firebase e più richieste nell'app Angular

Esistono molte altre combinazioni di query che puoi esplorare quando provi a recuperare dati da un database Firebase. Si spera che ora tu capisca come configurare un semplice database Firebase, come collegarlo a un'applicazione Angular locale e come leggere e scrivere nel database.

Puoi anche saperne di più sugli altri servizi forniti da Firebase. Firebase è una delle tante piattaforme che puoi integrare con Angular e, indipendentemente dal fatto che tu sia a livello principiante o avanzato, c'è sempre molto altro da imparare.