Firebase è una piattaforma di sviluppo di Google che è veloce e facile da configurare. In questo tutorial, stiamo per impostare un’applicazione di base che integra Firebase/Firestore e Angular. Useremo un pacchetto chiamato AngularFire-la libreria angolare ufficiale per Firebase-così come l’SDK di Firebase stesso.

L’utilizzo dei servizi cloud sta diventando sempre più popolare, in quanto consente di risparmiare tempo senza dover creare la propria sicurezza, manutenzione, ecc. Con Firebase di Google, creeremo un Firestore gratuito per fungere da nostro database.

Firebase offre anche un database in tempo reale, ma memorizza tutto in un grande albero JSON.

Questo rende per un database più semplice, ma con il cloud Firestore, che è quello che useremo, ci sono documenti flessibili, rendendolo più scalabile per i dati più grandi. Firestore è anche più veloce e nel complesso più intuitivo se non hai familiarità con i database.

Configura la console Firebase

Dovrai iniziare impostando il tuo progetto sulla console Firebase. Per prima cosa, vai qui per trovare la console.

Crea un progetto, dagli un nome e segui i passaggi. Una volta che hai finito, sarai alla panoramica del progetto.

No abbiamo bisogno di aggiungere un app. Dovresti essere nella pagina Panoramica del progetto. Qui vedrai “Inizia aggiungendo Firebase alla tua app”.

Fai questo facendo clic sul pulsante “<>” (questo per aggiungere un’applicazione web). Puoi impostare l’hosting qui, ma non lo copriremo in questo tutorial.

Vai avanti e registrare l’applicazione. Nella pagina successiva, vedrai gli script per impostare l’SDK di Firebase. Questi sono utili, ma vedremo più avanti come ottenere tutto ciò di cui abbiamo bisogno se ti mancano in questa pagina. Vai avanti e continua a consolare.

Inizializza Firestore e crea i primi documenti

Nella console Firebase, nel riquadro di sinistra, in Sviluppo, puoi trovare la scheda Database. Fare clic su di esso, e sarete portati a una pagina in cui è possibile fare clic su “Crea database”. Apparirà una modale in cui è possibile selezionare la modalità di produzione o la modalità di test; vogliamo la modalità di test. È insicuro, ma va bene per i test.

Se continui, ti verrà chiesto di selezionare una posizione. Vai avanti e scegli quello appropriato. Una volta premuto fatto, ci vorranno alcuni minuti per impostare il Firestore.

Al termine, sarai al tuo Firestore. Vai avanti e seleziona “Avvia raccolta”.

Uno screengrab della console per impostare il progetto Firebase.

Uno screengrab della console per impostare il progetto Firebase.

Ti chiederà di creare un ID di raccolta; per il nostro esempio, chiamiamolo semplicemente “testCollection”. Premi avanti e ti porterà al modulo per creare il tuo primo documento.

Lasceremo vuoto l’ID del documento-Firestore lo genererà automaticamente per te. Sotto Campo, basta digitare “campo”. Quindi vedrai “string” come tipo predefinito. Non c’è motivo di cambiare questo per ora, quindi lascialo così com’è. In Valore, digitare “value1”. Fai clic su Salva e vedrai che hai creato il tuo primo documento!

Per il nostro esempio più avanti, creiamo un secondo documento. Nella colonna centrale vedrai ” + Aggiungi documento.”vai avanti e fai clic su questo e sarai riportato al modulo di creazione del documento.

Qui, basta digitare “campo” sotto Campo e “value2” sotto Valore. Fare clic su Salva. Ora abbiamo due documenti.

Avvia un nuovo progetto angolare

Facciamo il nostro progetto frontend con la CLI angolare (command line interface). Aprire la finestra del terminale e installare la CLI angolare a livello globale:

npm install -g @angular/cli

Con questo installato, è possibile eseguire ilng comando.

Nel terminale, digitare quanto segue:

ng new your-app-name

Puoi nominare il tuo progetto come desideri.

Una volta iniziato, la CLI angolare ti guiderà attraverso un paio di opzioni di configurazione.

È possibile aggiungere il routing, quindi scegliere quale formato di foglio di stile si desidera che Angular generi per la propria applicazione.

Dopo di che passerà attraverso il resto e creerà la tua app angolare.

Una volta terminato, vai avanti e cambia la directory del terminale in quella che abbiamo appena creato:

cd your-app-name

Nella directory dell’app Angular, puoi eseguire ng serve costruire e servire la tua app localmente.

Imposta Firebase nell’app Angular

Prendiamo l’SDK di Firebase eseguendo quanto segue nel tuo terminale all’interno della directory del progetto Angular:

npm i --save firebase

Ora Firebase viene aggiunto al tuo progetto.

Vai alla console Firebase. Nel menu a sinistra vedrai “Panoramica del progetto” con un’icona a forma di ingranaggio accanto ad essa. Fare clic sull’icona, quindi Impostazioni progetto nella finestra pop-up. Qui, vai alla scheda Generale e scorri verso il basso.

Sotto “Frammento di SDK Firebase”, fai clic sul fondo radio accanto a CDN (il valore predefinito è Automatico). Qui troverai tutto ciò di cui hai bisogno per connettere la tua app a Firebase. F

ind ilfirebaseConfig variabile – avremo bisogno di copiare queste informazioni in App angolare. Assomiglia a questo (tranne che tutto sarà compilato correttamente):

var firebaseConfig = { apiKey: "************************************", authDomain: "*************.firebaseapp.com", databaseURL: "https://************.firebaseio.com", projectId: "***************", storageBucket: "****************.appspot.com", messagingSenderId: "*************", appId: "********************************", measurementId: "****************",};

All’interno della tua app Angular, vai al file generato app.module.ts (se hai creato il tuo progetto Angular attraverso la CLI: src > app > app.module.ts). In questo file, è possibile incollare l’intera variabile firebaseConfig (appena sotto le importazioni va bene).

Il prossimo ordine del giorno è scaricare il pacchetto npm angular/fire. Con questo pacchetto sarete in grado di interagire con Firebase con facilità.

È possibile installare il pacchetto nel progetto con la seguente riga di codice:

npm i angular/fire

Con questo installato, possiamo aggiungere qui nel app.module.ts file:

import { AngularFireModule } from @angular/fire';

Ora, le importazioni array, inizializzare Firebase nella tua app, aggiungendo la seguente riga di codice:

AngularFireModule.initializeApp(firebaseConfig)

Questa importazione è per Firebase in generale, ma se vogliamo aggiungere determinati servizi, dovrai aggiungerli individualmente.

Per il Firestore, aggiungi questo nella parte superiore del file:

import { AngularFirestoreModule } from '@angular/fire/firestore';

Quindi, nell’array imports vicino al fondo:

AngularFirestoreModule

Implementa nell’app

In questo frangente, potrebbe avere senso creare un componente o due nella nostra applicazione angolare. È possibile creare un nuovo componente nell’applicazione utilizzando la CLI nel progetto.

Creiamo un componente home digitando il comando nel terminale:

ng g c home

Il “g c” sta per “genera componente”. Questo genererà una cartella home con quattro file sotto di essa: un file HTML, un file SCSS (o qualsiasi stile che si sta utilizzando), un file dattiloscritto, e un .file spec.

Se si desidera saltare l’aggiunta del .spec file, propendi questo flag al tuo comando genera:

ng g c home --skipTests=true

Faremo la nostra logica nel nostro componente home, ma non dimentichiamo di aggiungerlo nel nostroapp.component.html file. Puoi sempre aggiungere il componente home al router, ma per semplicità, aggiungiamolo nell’HTML.

Se imposti un componente home proprio come ho fatto io, il selettore sarà “app-home”, quindi puoi aggiungerlo da qualche parte nel fileapp.component.html come questo

<app-home></app-home>

Dopo di che, iniziamo a fare le nostre operazioni nel componente home.

In precedenza abbiamo creato una raccolta nel nostro Firestore denominatatestCollection; al suo interno, ci sono due documenti o oggetti. Diamo prima un’occhiata a “Leggere” questi due documenti dal nostro Firestore.

Leggere

home.component.ts file, è possibile importare il Firestore attraverso il nostro Angolare/incendio pacchetto:

import { AngularFirestore } from "@angular/fire/firestore";

Dopo l’importazione, siamo in grado di inizializzare nel nostro costruttore come questo:

constructor(private firestore: AngularFirestore) {}

Che assegna i nostri importati AngularFirestore l’alias di “Firestore” — dare un nome a piacere.

La funzione ngOnInit è un luogo perfetto per leggere dal Firestore direttamente dal gitgo.

Dai un’occhiata a questo codice:

this.firestore .collection("testCollection") .get() .subscribe((ss) => { ss.docs.forEach((doc) => { this.myArray.push(doc.data()); }); });

Passiamo attraverso questo passo dopo passo: come probabilmente saprai, this.firestoresi riferisce all’alias che abbiamo creato per il nostro AngularFirestore nel nostro costruttore.

Il .collection('testCollection') è il modo in cui ci riferiamo alla collezione che abbiamo creato in precedenza, e il .get() ci sta semplicemente ottenendo l’intera collezione (tratteremo interrogando singoli documenti all’interno della collezione in seguito).

Quando .subscribe al firestore, è essenzialmente in attesa asincrona sull’API per restituire i dati. Tecnicamente, subscribe proviene da RxJS ed è un Osservabile che si aggiornerà quando c’è un cambiamento.

Ora, Firestore restituisce sempre istantanee di dati, motivo per cui gli abbiamo dato l’alias diss. Sotto l’istantanea del nostro database ci sono i documenti, che sono i dati che vogliamo, e possiamo usare il metodo array .forEach, per eseguire il loop sull’array di documenti.

Nell’esempio sopra, abbiamo ottenuto il doc.data() da Firebase Firestore. Questo sarà l’intero documento, che nel nostro caso è un oggetto con una proprietà. Pertanto, quando ci spinge nel nostro array, abbiamo bisogno di inizializzare l’array come il codice riportato di seguito:

myArray: any = 

Questo ci permette di vedere nel nostro HTML, cancella quello che c’è, e sostituirlo con il seguente:

<ul> <li *ngFor='let doc of myArray'> {{doc.field}} </li> </ul

l'elenco completo in HTML con due valori.

Un elenco completo in HTML con due valori.

Grande! Abbiamo letto con successo i dati dal nostro Firestore.

Scrivi

Per prima cosa, aggiungiamo ReactFormsModuleaapp.module.ts, in questo modo:

import { ReactiveFormsModule } from "@Angular/forms";

Inoltre, aggiungereReactiveFormsModule alla matrice di importazione vicino alla parte inferiore.

Nel nostro file home.component.html, aggiungiamo un modulo per acquisire e inviare nuovi dati. Scrivere qualcosa di simile a questo:

<form ="this.form"> <input placeholder="New Value" formControlName="newValue" type="text" class="input-field col s12" /> <button (click)="onSubmit()"> Submit </button></form>

Ora, se si è utilizzato il codice HTML sopra, aggiungere il seguente importa per il nostro home.component.ts file:

import { FormControl, FormGroup } from "@Angular/forms";

Quindi, nella nostra classe, aggiungere:

form = new FormGroup({ newValue: new FormControl('') })`

Questo accetterà dal codice HTML, la forma e l’input che abbiamo fatto, con il formControlName di newValue.

Quindi, otterremo la stringa inserita dall’utente nell’HTML e la invieremo come valore di un nuovo documento nel nostro Firestore. Possiamo farlo utilizzando la funzione riportata di seguito:

onSubmit() { this.firestore.collection('testCollection').add({ field: this.form.value.newValue }) .then(res => { console.log(res); this.form.reset(); }) .catch(e => { console.log(e); }) }

Nello stesso modo in cui leggiamo dal nostro Firestore, ci sarà la scrittura di questo tempo di riferimento per ottenere la nostra collezione:

this.firestore.collection('testCollection')

Questa volta, ci sarà l’aggiunta di un documento con .add. Vogliamo aggiungere l’oggetto con il nostro testo che abbiamo ricevuto:

.add({field: this.form.valule.newValue})

Questo può sembrare strano, ma è perché stiamo ottenendo il valore del Modulo. Lì, otteniamo la proprietà che abbiamo chiamato newValue. Ecco perché è value.newValue.

Il resto della funzione è semplicemente un .then e .catch per gestire la risposta dal Firestore.

Quando si scrive sul Firestore, la risposta (quando ha successo) sarà un oggetto grande e strano.

Poiché non stiamo leggendo nulla, l’unico uso di questi gestori è se vogliamo fare qualcosa immediatamente dopo aver scritto al Firestore (come facciamo quando chiamiamo.reset() per cancellare il modulo).

Se vai avanti ed esegui l’app così com’è (ng serve), noterai che non apparirà sulla nostra lista dopo aver inserito un nuovo valore e averlo inviato a Firebase. È possibile aggiornare la pagina e dovrebbe apparire, se la scrittura ha avuto successo. Perche ‘ mai?

È perché dopo aver scritto al nostro Firestore, non abbiamo letto il nuovo cambiamento. Con il modo in cui è impostata la nostra attuale funzione ngOnInit, non stiamo osservando i cambiamenti.

Per vedere i nuovi dati, dobbiamo cambiare il modo in cui stiamo leggendo i dati:

ngOnInit() { this.docs = ; const collectionRef = this.db.collection('testCollection'); const collectionInstance = collectionRef.valueChanges(); collectionInstance.subscribe(ss => this.myArray = ss); }

Ora abbiamo sottoscritto. Vedrai che dopo aver aggiunto un nuovo documento al database, verrà anche aggiunto all’elenco nella nostra app. La differenza principale è che ora siamo iscritti a .valueChanges().

Query

Aggiungiamo un altro modulo che possiamo usare per interrogare il Firestore in base al valore di un documento:

<form ="this.secondForm"> <input placeholder="value1" formControlName="valueToGet" type="text" class="input-field col s12" /> <button (click)="onQuery()"> Query </button></form>

Per semplicità, è esattamente come il primo modulo, ma con nomi diversi e una funzione diversa. Vai avanti e il nome come ti pare, ma basta fare in modo di utilizzare i nuovi nomi e non quelli che abbiamo usato nel modulo precedente.

Oltre nel dattiloscritto file, assicurarsi di inizializzare il modulo in alto della classe:

secondForm = new FormGroup({ valueToGet: new FormControl('') })

Inoltre, qui dove siamo inizializzare il tutto, aggiungete single: any; come una variabile di mettere la nostra query documento, e message: string; come variabile per i messaggi di errore.

Con questo, iniziamo a costruire la nostra funzione onQuery.

onQuery() { if (!this.secondForm.value.valueToGet) { this.message = 'Cannot be empty'; this.single = null; } else { this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet)).get() .subscribe(ss => { if (ss.docs.length === 0) { this.message = 'Document not found! Try again!'; this.single = null; } else { ss.docs.forEach(doc => { this.message = ''; this.single = doc.data(); }) } }) } }

Per prima cosa, vediamo se l’utente inserisce qualcosa. L’input può essere trovato in this.secondForm.value.valueToGet.

Quindi, se questo è vuoto, vogliamo restituire un messaggio e non inviare una stringa vuota per interrogare Firebase. In questo controllo “if”, mi assicuro anche che la nostra variabile” single ” sia vuota, perché potremmo aver interrogato con successo prima, ma ora vogliamo solo inviare il messaggio che il modulo non può essere vuoto.

Se non è vuoto, andiamo avanti e interroghiamo il nostro Firestore. Noterai qualcosa di nuovo nel parametro “collection” — in Angular facciamo effettivamente la query proprio all’interno di quel parametro. refè un riferimento alla raccolta e .where è il modo più comune per interrogare i documenti in una raccolta Firestore.

Nel metodo .where, diciamo prima a Firebase quale campo interrogare all’interno di ciascun documento. Tutti i nostri campi sono semplicemente “campo”, in modo che lo rende facile.

Quindi, usiamo un comparatore, ==, che è quello di chiedere se il campo isEqual. È inoltre possibile utilizzare altri comparatori come<>=, e così via.

Infine, il terzo parametro sta dicendo a Firebase a cosa confrontare il campo-nel nostro caso, vogliamo inserire il valore di input dall’utente qui e vedere se appare come un valore ovunque nel nostro Firestore.

Una breve nota su una limitazione Firestore: l’interrogazione con il metodo.where è limitata.

Puoi controllare qualcosa che è spento di una lettera, o è minuscolo dove il Firestore lo ha salvato come maiuscolo e non lo restituirà. Puoi fare cose sul frontend per aiutare, come rendere ogni input dell’utente in minuscolo per abbinare il Firestore, ma questo può solo andare così lontano.

Naturalmente, si potrebbe tirare l’intero Firestore nel frontend (come stiamo facendo). Mentre l’interrogazione sarebbe migliore, potrebbe non essere l’ideale se il tuo Firestore è gigantesco. Il modo suggerito per fare una ricerca full-text è usare Algolia.

Lo faremo .get() dal momento che stiamo leggendo il valore, e lo faremo .subscribe come abbiamo fatto durante la lettura dell’intera collezione.

Tuttavia, dopo aver ottenuto l’istantanea dal Firestore, vogliamo inserire un controllo “se”, per vedere se viene restituito qualcosa. Puoiconsole.log lo snapshot e vedere se non sarà vuoto anche se non c’è stata alcuna corrispondenza nel Firestore.

Ma, la proprietàdocs sullo snapshot sarà vuota (un array vuoto per l’esattezza) se non c’è corrispondenza per la nostra query. Questo è il modo in cui possiamo dire se la nostra query corrisponde a qualcosa o meno.

Ancora una volta, rispediremo il messaggio e imposteremo la variabilesingle su null. Se troviamo una corrispondenza, vogliamo fare il contrario, impostando il messaggio su vuoto e impostando la variabile single sui dati restituiti.

Ora che abbiamo i dati, torniamo ahome.component.html. Aggiungiamo un po ‘ di HTML per gestire le nostre variabili” message “e” single”:

<p style="color: red;">{{message || null}}</p><div *ngIf="single"> <h1>{{single.field}}</h1> <button style="background-color: lightblue">Edit</button> <button style="background-color: red">Delete</button></div>

Abbastanza semplice qui. Usiamo la direttiva*ngIf per mostrare solo il documento corrispondente se viene trovato. Come ricorderai, abbiamo impostato “single”su null se non è stato trovato, quindi l’intero *ngIfdiv sarebbe nascosto. Lo stesso con il “messaggio” — se è impostato su una stringa vuota.

Noterai anche che abbiamo aggiunto i pulsanti per la nostra prossima sezione, dal momento che dobbiamo ancora essere in grado di modificare ed eliminare!

Update

Qualcosa che ci aiuterà molto da qui in avanti sta ottenendo ilid del documento che abbiamo interrogato.

Sappiamo che modificheremo o elimineremo solo quel documento interrogato, quindi prendiamo il suo id. Come puoi notare, quando creiamo documenti dalla nostra app, non diamo loro un id.

Inoltre, quando abbiamo creato i nostri documenti in Firestore all’inizio, lasciamo che Firestore generi automaticamenteids; lo stesso accade con quelli che creiamo dalla nostra app. Quindi, come otteniamo id s?

il onQuery funzione, impostare un riferimento al nostro database di query come questa:

const docRef = this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet));

Rompere il .get() e tutto quello che viene dopo, poi, su un’altra linea, utilizzare il nostro punto di riferimento, come questo:

docRef.get().subscribe(ss => ...)

…E così via. È essenzialmente la stessa cosa.

Ora, sotto il metodo subscribe, aggiungiamo un’altra riga per ottenere il documento id:

docRef.snapshotChanges().forEach((changes) => { changes.map((a) => { this.id = a.payload.doc.id; });});

Ovviamente, avremo bisogno di inizializzare this.id in alto: id: string = ''. Ma ora abbiamo l’ID da utilizzare in entrambe le nostre funzioni di modifica ed eliminazione che creeremo.

nel nostro home.component.html file, modificare il pulsante modifica che abbiamo creato in precedenza per i seguenti:

<button style='background-color: lightblue' (click)='openEdit()'>Edit</button>

Con openEdit() funzione, nel nostro Dattiloscritto file, è possibile inizializzare una modifica variabile:

edit: boolean = false

E creare openEdit funzione per attivare:

openEdit() { this.edit = !this.edit};

Ogni volta che la funzione viene chiamata, farà passare la variabile di modifica da false a true, o true a false.

Ora, nel nostro file HTML, aggiungi il seguente modulo. Verrà visualizzato quando edit è true:

<form *ngIf="edit" ="this.editForm"> <input placeholder="{{single.field}}" formControlName="replaceValue" type="text" class="input-field col s12" /> <button (click)="onRename()"> Rename </button></form><p style="color: red;">{{message2 || null}}</p>

Di nuovo, un’altra forma. La cosa importante qui è che non sovrascriveremo l’intero documento — manterremo il id, ma il campo cambierà in qualsiasi cosa inseriamo qui — questo è l’obiettivo.

In home.component.ts, inizializzare la variabile message2 per gestire un input vuoto e inizializzare il modulo come abbiamo fatto con gli altri. Quindi creare una funzioneonRename.

onRename() { if (!this.editForm.value.replaceValue) { this.message2 = "Cannot Be Empty!"; } else { this.firestore.collection('testCollection').doc(this.id).update({ field: this.editForm.value.replaceValue }); this.edit = false; this.message2 = ''; this.single = null; } }

Ci sono un paio di cose nuove da notare qui.

In primo luogo, usiamo .doc metodo e mettere in id abbiamo ottenuto dai passaggi precedenti. Questo ottiene il documento in base a id, non una query.

Successivamente, usiamo il metodo.update. Questo sovrascriverà solo la proprietà che specifichiamo, invece di .set che sovrascrive l’intero documento. In altre parole, se avessimo tre campi nel documento, potremmo sovrascriverne solo uno con il metodo di aggiornamento in questo modo.

Ancora una volta, rileggiamo la nostra lista di documenti dal Firestore. Quindi, possiamo comprimere la singola query,la casella di modifica e tutti i messaggi precedentemente presenti.

Delete

L’eliminazione che faremo è fondamentalmente la stessa del nostro aggiornamento, tranne che useremo il metodo delete.

Per prima cosa, nel nostro html, cambiamo il pulsante Elimina:

<button style='background-color: red' (click)='delete()'>Delete</button>

Ora, tutto ciò che c’è, è creare la funzionedelete.

Potrebbe essere saggio inserire un avviso, prima di consentire all’utente di eliminare l’oggetto. Aggiungi il seguente codice al file TypeScript:

delete() { if (confirm('Delete?')) { this.db.collection('testCollection').doc(this.id).delete(); this.edit = false; this.single = null; } }

Il confirm('Delete') apparirà un avviso che deve essere confermato prima di eliminare — salva solo l’utente dall’eliminazione accidentale di qualcosa involontariamente.

Dopo di che, abbiamo semplicemente ottenere il documento dal id abbiamo memorizzato, e chiamare il metodo delete su di esso. Semplice come quello.

Conclusione

Ora hai creato con successo un’app angolare in grado di creare, leggere, aggiornare ed eliminare i documenti Firestore! Come si può vedere, Firebase Firestore è facile da usare e pronto ad andare. Questo può essere facilmente aggiornato a migliaia di documenti complessi.

Ora che hai una buona idea di Firestore Basics, controlla i documenti ufficiali per argomenti più avanzati.

Sperimenta le tue app angolari esattamente come un utente fa

Il debug delle applicazioni angolari può essere difficile, specialmente quando gli utenti riscontrano problemi difficili da riprodurre. Se sei interessato al monitoraggio e al monitoraggio dello stato angolare e delle azioni per tutti gli utenti in produzione, prova LogRocket. LogRocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket è come un DVR per applicazioni web, registrando letteralmente tutto ciò che accade sul tuo sito tra cui richieste di rete, errori JavaScript, e molto altro ancora. Invece di indovinare perché si verificano problemi, è possibile aggregare e riferire in quale stato si trovava l’applicazione quando si è verificato un problema.

Il plugin LogRocket NgRx registra lo stato angolare e le azioni nella console LogRocket, fornendo un contesto su cosa ha portato a un errore e in quale stato si trovava l’applicazione quando si è verificato un problema.

Modernizza il modo in cui esegui il debug delle tue app Angolari: avvia il monitoraggio gratuitamente.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.