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

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 di più su Concetti angolari, componenti e struttura complessiva di un progetto 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 questo, crea un progetto:

1. Da Pagina iniziale di Firebase, Selezionare Vai a Console nell'angolo in alto a destra del sito.
2. In "I tuoi progetti Firebase", seleziona Aggiungi progetto.
3. Segui le istruzioni per creare un nuovo progetto.
4. Una volta completato, il progetto si aprirà. Sul lato sinistro dello schermo, c'è un pannello che elenca le funzionalità fornite da Firebase. Passa il mouse sopra le icone finché non vedi Database Firestoree selezionalo.
5. Selezionare Crea database, e segui le istruzioni per creare un database.
6. Quando si selezionano le regole di sicurezza, selezionare Inizia in modalità di prova. Questo può essere modificato in seguito per garantire che i dati siano più sicuri. Puoi leggere di più sulle regole di sicurezza di Firestore seguendo il Documentazione Firebase.
7. Una volta completato, il database si aprirà. La struttura del database utilizza Raccolte, che è essenzialmente lo stesso concetto delle tabelle del database. Ad esempio, se sono necessarie due tabelle, una per memorizzare le informazioni sull'account e l'altra per archiviare le informazioni sull'utente, è necessario creare due raccolte denominate Account e Utente.
8. Selezionare Inizia la raccolta e aggiungi un ID raccolta chiamato "Utente".
9. Aggiungi il primo record, con informazioni su un utente. Clicca su Aggiungi campo per aggiungere tre nuovi campi: firstName (stringa), lastName (stringa) e vipMember (boolean). L'ID documento può essere generato automaticamente.
10. Clic Salva.
11. Per aggiungere più record alla raccolta "Utente", fare 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 angolare

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

1. In Firebase, vai al pannello di sinistra e fai clic su Panoramica del progetto.
2. Seleziona il ragnatela pulsante (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 Continua su Console.
6. In base ai dettagli forniti nel passaggio precedente, copiare il codice seguente in environment.prod.ts e environment.ts nell'applicazione Angular.

   esportazione const ambiente = {
    produzione: vero,
    firebaseConfig: {
    apiKey: "la tua chiave API",
    authDomain: "tuo-dominio-auth",
    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. Si noti 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 } da "@angular/fire";
   importa { AngularFirestoreModule } da "@angular/fire/firestore";
   import { ambiente } da "../environments/environment";
   

9. I moduli Firestore devono anche essere inclusi nell'array imports in app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   Modulo Angular Firestore,

Come recuperare i dati da Firebase utilizzando un servizio

Di solito è buona norma averne uno o più servizi.ts file utilizzati per interagire in modo specifico con il database. Le funzioni aggiunte al file dei servizi possono quindi essere richiamate in altri file, pagine o altri componenti TypeScript nell'applicazione.

1. Crea un file chiamato service.ts nel file src/app/servizi cartella.
2. Aggiungi il modulo AngularFirestore alla sezione delle importazioni e includilo nel costruttore.

   importa {Injectable} da '@angular/core';
   importa { AngularFirestore } da '@angular/fire/firestore';
   @Iniettabile({
    fornitoIn: 'radice'
   })
   classe di esportazione Servizio {
    costruttore (db privato: AngularFirestore) { }
   }
   

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

   getAllUsers() {
    restituire una nuova promessa((risolvere) => {
    this.db.collection('Utente').valueChanges({ idField: 'id' }).subscribe (utenti => risolve (utenti));
    })
   }
   

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

   importa { Servizio } da 'src/app/services/service
   costruttore (servizio privato: servizio) {}
   

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

   asincrono getUsers() {
    this.allUsers = attendi this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Come aggiungere un nuovo record al database di Firebase

Aggiungi un nuovo record per un utente nel database di 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 di impostazione di Firestore per inviare tali informazioni a Firebase e creare un nuovo record.

   addNewUser (_newId: qualsiasi, _fName: stringa, _lName: stringa, _vip: booleano) {
    this.db.collection("Utente").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 casuali per creare il nuovo ID per l'utente.

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

Come aggiornare i dati nel database di Firebase

Firebase ha molte funzioni che renderlo 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, crea una funzione chiamata updateUserFirstName(). Questa funzione aggiornerà il nome di un 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: qualsiasi, _firstName: stringa) {
    this.db.doc(`Utente/${_id}`).update({nome: _nome});
   }

2. Per aggiornare più campi per lo stesso record, basta espandere i campi inseriti all'interno della funzione di aggiornamento di Firestore. Invece di solo firstName, aggiungi lastName per aggiornarlo anche con un nuovo valore.

   updateUserFullName (_id: qualsiasi, _firstName: stringa, _lastName: stringa) {
    this.db.doc(`Utente/${_id}`).update({nome: _nome, cognome: _cognome});
   }

3. Qualsiasi delle funzioni precedenti può essere utilizzata in altri file TypeScript.

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

Come eliminare un record dal database di Firebase

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

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

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

2. La funzione di cui sopra può quindi essere utilizzata in altri file TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Recupera i dati di 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() {
    restituire una nuova promessa((risolvere) => {
    this.db.collection('Utente', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (utenti => risolve (utenti))
    })
    }

2. Utilizzare questa funzione in un altro file TypseScript.

   asincrono getAllVipMembers() {
    this.vipUsers = attendi this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

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

   getAllVipMembers() {
    restituire una nuova promessa((risolvere) => {
    this.db.collection('Utente', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (utenti => risolvere (utenti) )
    })
    }

4. Modificare la query per restituire solo i primi tre record. Le operazioni Start At e Limit possono essere utilizzate per questo. Ciò è utile se è necessario implementare il paging, ovvero quando viene visualizzato un certo numero di record per pagina.

   getAllVipMembers() {
    restituire una nuova promessa((risolvere) => {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (utenti => risolvere (utenti))
    })
    }

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

Ci sono molte altre combinazioni di query che puoi esplorare quando provi a recuperare i 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 un livello principiante o avanzato, c'è sempre molto altro da imparare.

I migliori 8 corsi angolari per principianti e utenti avanzati

Leggi Avanti

Circa l'autore