Firebase este o platformă de dezvoltare de Google, care este rapid și ușor de configurat. În acest tutorial, vom configura o aplicație de bază care integrează Firebase / Firestore și Angular. Vom folosi un pachet numit AngularFire — Biblioteca oficială Angular pentru Firebase-precum și Firebase SDK în sine.

utilizarea serviciilor cloud devine din ce în ce mai populară, deoarece economisește timp fără a fi nevoie să vă creați propria securitate, întreținere etc. Cu Firebase Google, vom crea un magazin de pompieri gratuit pentru a acționa ca baza noastră de date.Firebase oferă, de asemenea, o bază de date în timp real, dar stochează totul într-un copac JSON mare.

Acest lucru face pentru o bază de date mai simplă, dar cu nor Firestore, care este ceea ce vom folosi, există documente flexibile, ceea ce face mai scalabil pentru date mai mari. Firestore este, de asemenea, mai rapid și, în general, mai intuitiv dacă nu sunteți familiarizați cu bazele de date.

Configurarea consolei Firebase

va trebui să începeți prin configurarea proiectului pe consola Firebase. Mai întâi, mergeți aici pentru a găsi consola.

creați un proiect, Dați-i un nume și parcurgeți pașii. Odată ce ați terminat, veți fi la prezentarea generală a proiectului.

nu avem nevoie pentru a adăuga o aplicație. Ar trebui să fiți pe pagina de prezentare a proiectului. Aici veți vedea „începeți prin adăugarea Firebase la aplicația dvs.”.

faceți acest lucru făcând clic pe butonul „<>” (aceasta este pentru a adăuga o aplicație web). Puteți configura găzduirea aici, dar nu vom acoperi acest lucru în acest tutorial.

mergeți mai departe și înregistrați aplicația. În pagina următoare, veți vedea scripturi pentru configurarea SDK-ului Firebase. Acestea sunt utile, dar vom vedea mai târziu cum să obținem tot ce avem nevoie dacă le pierdeți pe această pagină. Mergeți mai departe și continuați să consolați.

inițializați Firestore și creați primele documente

în consola Firebase, în panoul din stânga, sub dezvoltare, puteți găsi fila bază de date. Faceți clic pe acesta și veți fi adus la o pagină unde puteți face clic pe „Creați baza de date”. Va apărea un modal în care puteți selecta modul de producție sau modul de testare; dorim modul de testare. Este nesigur, dar bine pentru testare.

dacă continuați, vi se va cere să selectați o locație. Du-te și alege-l pe cel potrivit. După ce apăsați terminat, va dura câteva minute configurarea magazinului de pompieri.

când veți termina, veți fi la magazinul dvs. de pompieri. Mergeți mai departe și selectați”Start collection”.

un screengrab al consolei pentru configurarea proiectului Firebase.

un screengrab al consolei pentru configurarea proiectului Firebase.

vă va cere să creați un ID de colecție; pentru exemplul nostru, să-l numim doar „testCollection”. Apăsați Următorul și vă va aduce la formularul pentru crearea primului document.

vom lăsa ID — ul documentului necompletat-Firestore va genera automat acest lucru pentru dvs. Sub câmp, trebuie doar să tastați „câmp”. Apoi veți vedea” șir ” ca tip implicit. Nu există niciun motiv pentru a schimba acest lucru deocamdată, așa că lăsați-l așa cum este. Sub valoare, tastați „valoare1”. Faceți clic pe Salvare și veți vedea că ați creat primul document!

pentru exemplul nostru mai târziu, să creăm un al doilea document. În coloana din mijloc veți vedea ” + adăugați Document.”mergeți mai departe și faceți clic pe acesta și veți fi readus la formularul de creare a documentelor.

aici, trebuie doar să tastați „câmp” sub câmp și „value2” sub valoare. Faceți clic pe Salvare. Acum avem două documente.

începeți un nou proiect unghiular

să facem proiectul nostru frontend cu CLI unghiular (interfața liniei de comandă). Deschideți fereastra terminalului și instalați CLI unghiular la nivel global:

npm install -g @angular/cli

cu această instalare, puteți rula comandang.

în terminal, tastați următoarele:

ng new your-app-name

puteți numi proiectul dvs. orice doriți.

odată ce ați început, CLI unghiular vă va conduce printr-o serie de opțiuni de configurare.

puteți adăuga rutare, apoi alegeți ce format de foaie de stil doriți să generați Angular pentru aplicația dvs.

după aceea va trece prin restul și va crea aplicația dvs. unghiulară.

după ce ați terminat, mergeți mai departe și schimbați directorul terminal cu cel pe care tocmai l-am făcut:

cd your-app-name

în directorul aplicației Angular, puteți rulang serve construiți și serviți aplicația local.

configurați Firebase în aplicația Angular

să obținem SDK-ul Firebase rulând următoarele în terminalul dvs. din directorul Proiectului Angular:

npm i --save firebase

acum Firebase este adăugat la proiectul dvs.

du-te la consola Firebase. În meniul din stânga veți vedea” prezentare generală a proiectului ” cu o pictogramă roată lângă ea. Faceți clic pe pictogramă, apoi pe Setări proiect în fereastra pop-up. Aici, accesați fila General și derulați în partea de jos.

sub „Firebase SDK fragment”, faceți clic pe partea de jos de radio de lângă CDN (este implicit este pe automat). Aici, veți găsi tot ce aveți nevoie pentru a vă conecta aplicația la Firebase. F

indfirebaseConfig variabilă — va trebui să copiem aceste informații în aplicația unghiulară. Arată astfel (cu excepția faptului că totul va fi completat corect):

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

în interiorul aplicației dvs. angulare, navigați la fișierul generat app.module.ts (dacă ați creat proiectul dvs. Angular prin CLI: src > app > app.module.ts). În acest fișier, puteți lipi întreaga firebaseConfig variabilă (doar sub importurile este bine).

următoarea ordine de afaceri este descărcarea pachetului npmangular/fire. Cu acest pachet veți putea interacționa cu Firebase cu ușurință.

puteți instala pachetul în proiectul dvs. cu următoarea linie de cod:

npm i angular/fire

cu acest instalat, îl putem adăuga aici în app.module.ts fișier:

import { AngularFireModule } from @angular/fire';

acum, în matricea de importuri, inițializați Firebase în aplicația dvs. adăugând următoarea linie de cod:

AngularFireModule.initializeApp(firebaseConfig)

acest import este pentru Firebase în general, dar dacă dorim să adăugăm anumite servicii, va trebui să le adăugați individual.

pentru magazinul de pompieri, adăugați acest lucru în partea de sus a fișierului:

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

apoi, în matricea de importuri din partea de jos:

AngularFirestoreModule

implementați în aplicație

În acest moment, ar putea avea sens să creați o componentă sau două în aplicația noastră unghiulară. Puteți crea o componentă nouă în aplicația dvs. utilizând CLI-ul din proiectul dvs.

să facem o componentă acasă tastând comanda în terminal:

ng g c home

„g c” înseamnă „generare componentă”. Aceasta va genera un folder de acasă cu patru fișiere sub el: un fișier HTML, un fișier SCSS (sau orice stil pe care îl utilizați), un fișier TypeScript și un .fișier spec.

Dacă doriți să săriți adăugarea .fișier spec, propend acest pavilion pentru a genera comanda:

ng g c home --skipTests=true

vom face logica noastră în componenta noastră de origine, dar să nu uităm să-l adăugați în nostru app.component.html fișier. Ai putea adăuga întotdeauna componenta acasă la router, dar pentru simplitate, hai să-l adăugați în HTML.

dacă configurați o componentă de acasă la fel cum am făcut-o, selectorul va fi „app-home”, astfel încât să îl puteți adăuga undeva în fișierulapp.component.html ca acesta

<app-home></app-home>

după aceea, să trecem la operațiunile noastre în componenta de acasă.

anterior am creat o colecție în magazinul nostru de pompieri numitătestCollection; în cadrul acesteia, există două documente sau obiecte. Să analizăm mai întâi „citirea” acestor două documente din magazinul nostru de pompieri.

Citește

înhome.component.ts fișier, putem importa magazinul de pompieri prin pachetul nostru Angular/fire:

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

după import, îl putem inițializa în constructorul nostru astfel:

constructor(private firestore: AngularFirestore) {}

care este atribuirea importatAngularFirestore alias de „Firestore” — da orice nume doriți.

ngOnInit funcția este un loc perfect pentru a citi de la magazin chiar de pe gitgo.

uitați-vă la acest cod:

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

să parcurgem acest pas cu pas: după cum probabil știți, this.firestore se referă la Aliasul pe care l-am creat pentru AngularFirestore în constructorul nostru.

.collection('testCollection') este modul în care ne referim la colecția pe care am creat-o mai devreme, iar.get() ne aduce pur și simplu întreaga colecție (vom acoperi interogarea documentelor unice din colecție mai târziu).

când.subscribe la magazin, este în esență asincron de așteptare pe API pentru a reveni date. Din punct de vedere tehnic, abonarea vine de la RxJS și este o observație care se va actualiza atunci când există o schimbare.

acum, magazinul de pompieri returnează întotdeauna instantanee de date, motiv pentru care i-am dat aliasulss. Sub instantaneu al bazei noastre de date este docs, care este datele pe care le dorim, și putem folosi .forEach metoda matrice, la bucla peste matrice de docs.

în exemplul de mai sus, am obținutdoc.data() de la Firebase Firestore. Acesta va fi întregul document, care în cazul nostru este un obiect cu o singură proprietate. Prin urmare, atunci când îl împingem în matricea noastră, va trebui să inițializăm matricea noastră ca următorul cod:

myArray: any = 

Acest lucru ne permite să îl vedem în HTML-ul nostru, să ștergem ceea ce există și să îl înlocuim cu următoarele:

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

două valori.

o listă completă în HTML cu două valori.

grozav! Am citit cu succes datele din magazinul nostru de pompieri.

scrie

în primul rând, să adăugăm ReactFormsModule la app.module.ts, ca aceasta:

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

de asemenea, adăugațiReactiveFormsModule la matricea de import din partea de jos.

în fișierul nostruhome.component.html, să adăugăm un formular pentru a captura și trimite date noi. Scrieți ceva de genul:

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

acum, dacă ați folosit codul HTML de mai sus, adăugați următorul import la home.component.ts fișier:

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

apoi, în clasa noastră, adăugați:

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

aceasta va accepta din HTML, formularul și intrarea pe care am făcut-o, cu formControlName de newValue.

Deci, vom primi șirul introdus de utilizator în HTML și îl vom trimite să fie valoarea unui nou document în magazinul nostru de pompieri. Putem face asta folosind următoarea funcție:

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

în același mod în care citim din magazinul nostru de pompieri, vom scrie de data aceasta folosind aceeași referință pentru a obține colecția noastră:

this.firestore.collection('testCollection')

de data aceasta, vom adăuga un document cu .add. Vrem să adăugăm obiectul cu textul pe care l-am primit:

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

Acest lucru poate părea ciudat, dar este pentru că obținem valoarea formei. Acolo, obținem proprietatea pe care am numit-o newValue. De aceea este value.newValue.

restul funcției este pur și simplu un.then și.catch pentru a gestiona răspunsul de la magazin.

când scrieți la magazin, răspunsul (când va avea succes) va fi un obiect mare, ciudat.

Din moment ce nu citim nimic, singura utilizare a acestor Handlere este dacă vrem să facem ceva imediat după ce am scris la magazin (așa cum facem atunci când sunăm.reset() pentru a șterge formularul).

dacă mergeți mai departe și rulați aplicația așa cum este (ng serve), veți observa că nu va apărea pe lista noastră după introducerea unei noi valori și trimiterea acesteia la Firebase. Puteți reîmprospăta pagina și ar trebui să apară, dacă scrierea a avut succes. De ce este asta?

este pentru că după ce am scris la magazinul nostru de pompieri, nu am citit noua schimbare. Cu modul în care funcția noastră curentă ngOnInit este configurată, nu observăm modificări.

pentru a vedea noile date, trebuie să schimbăm modul în care citim datele:

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

acum ne-am abonat. Veți vedea că după adăugarea unui nou document în baza de date, acesta va fi adăugat și în lista din aplicația noastră. Principala diferență este că acum suntem abonați la .valueChanges().

interogare

să adăugăm un alt formular pe care îl putem folosi pentru a interoga magazinul de pompieri pe baza valorii unui document:

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

pentru simplitate, este exact ca prima formă, dar cu nume diferite și o funcție diferită. Mergeți mai departe și denumiți-l după cum doriți, dar asigurați-vă că utilizați noile nume și nu cele pe care le-am folosit în formularul anterior.

peste în fișierul typescript, asigurați-vă că inițializați formularul din partea de sus a clasei:

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

De asemenea, aici unde inițializăm totul, adăugați single: any; ca variabilă pentru a pune documentul nostru interogat și message: string; ca variabilă pentru a pune documentul nostru interogat și message: string;

cu asta, să începem să construim funcțiaonQuery.

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(); }) } }) } }

În primul rând, vom vedea dacă utilizatorul nimic de intrare, la toate. Intrarea poate fi găsită în this.secondForm.value.valueToGet.

deci, dacă este gol, vrem să returnăm un mesaj și să nu trimitem un șir gol pentru a interoga Firebase. În această verificare „dacă”, mă asigur, de asemenea, că variabila noastră” unică ” este goală, deoarece s-ar putea să fi interogat cu succes înainte, dar acum vrem să trimitem doar mesajul că formularul nu poate fi gol.

dacă nu este gol, mergem mai departe și interogăm magazinul nostru de pompieri. Veți observa ceva nou în parametrul” colecție ” — în Angular facem de fapt interogarea chiar în interiorul acelui parametru. refeste o referință la colecție, iar.where este cel mai comun mod de a interoga documentele dintr-o colecție de pompieri.

în metoda.where, spunem mai întâi Firebase ce câmp să interogăm în fiecare document. Toate câmpurile noastre sunt pur și simplu „câmp”, astfel încât este ușor.

apoi, vom folosi un comparator,==, care este de a întreba dacă câmpulisEqual. Puteți utiliza și alte comparatoare precum<>= și așa mai departe.

în cele din urmă, al treilea parametru îi spune Firebase cu ce să compare câmpul — în cazul nostru, vrem să punem valoarea de intrare de la utilizator aici și să vedem dacă apare ca valoare oriunde în magazinul nostru de pompieri.

o notă rapidă pe o limitare Firestore: interogarea cu.where metoda este limitată.

puteți verifica pentru ceva care este oprit de o literă, sau este minusculă în cazul în care Firestore a salvat ca o majusculă, și nu se va returna. Puteți face lucruri pe frontend pentru a vă ajuta, cum ar fi să introduceți fiecare utilizator cu litere mici pentru a se potrivi cu magazinul de pompieri, dar acest lucru poate merge doar până acum.

desigur, ai putea trage întreaga Magazin de pompieri în frontend (așa cum facem noi). În timp ce interogarea ar fi mai bună, s-ar putea să nu fie ideală dacă magazinul dvs. de Pompieri este gigantic. Modul sugerat de a face o căutare full-text este de a utiliza Algolia.

vom.get() din moment ce citim valoarea și vom.subscribe așa cum am făcut când am citit întreaga colecție.

cu toate acestea, după ce obținem instantaneul din Magazin, vrem să punem o verificare „dacă”, pentru a vedea dacă ceva este returnat. Putețiconsole.log instantaneul și puteți vedea dacă nu va fi gol chiar dacă nu a existat nicio potrivire în magazin.

dar,docs proprietatea de pe instantaneu va fi goală (o matrice goală pentru a fi exactă) dacă nu există nicio potrivire pentru interogarea noastră. Acesta este modul în care putem spune dacă interogarea noastră se potrivește cu ceva sau nu.

Din nou, vom trimite înapoi mesajul și vom seta variabilasingle la null. Dacă găsim o potrivire, atunci vrem să facem contrariul, setând mesajul la gol și setând variabila single la datele returnate.

acum că avem datele, să ne întoarcem lahome.component.html. Să adăugăm câteva HTML pentru a gestiona variabilele noastre „mesaj” și „unice”:

<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>

destul de simplu aici. Folosim Directiva*ngIf pentru a afișa documentul potrivit numai dacă este găsit. După cum vă amintiți, am setat „single” la null dacă nu a fost găsit, astfel întregul *ngIfdiv ar fi ascuns. La fel și cu „mesajul” — dacă este setat la un șir gol.

veți observa, de asemenea, că am adăugat butoane pentru următoarea noastră secțiune, deoarece trebuie să putem edita și șterge!

actualizare

ceva care ne va ajuta foarte mult de aici încolo este obținereaid a documentului pe care l-am interogat.

știm că vom edita sau șterge doar acel document interogat, așa că să-i obținemid. După cum puteți observa, atunci când creăm documente din aplicația noastră, nu le oferim un id.

în plus, când am creat documentele noastre în magazin la început, lăsăm Magazinul să genereze automatids; la fel se întâmplă și cu cele pe care le creăm din aplicația noastră. Deci, cum obținem ids?

în funcția noastră onQuery, să setăm o referință la interogarea bazei noastre de date astfel:

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

întrerupeți .get() și totul după aceasta, apoi, pe o altă linie, folosiți referința noastră, astfel:

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

…și așa mai departe. Este în esență același lucru.

acum, sub metoda abonare, să adăugăm o altă linie pentru a obține documentul id:

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

evident, va trebui să inițializăm this.id în partea de sus: id: string = ''. Dar, acum avem id-ul de utilizat atât în funcțiile noastre de editare, cât și de ștergere pe care le vom crea.

înapoi în fișierul home.component.html, schimbați butonul de editare pe care l-am creat anterior cu următorul text:

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

cu această funcție openEdit(), în fișierul nostru TypeScript, putem inițializa o variabilă de editare:

edit: boolean = false

și de a crea openEdit funcția pentru a comuta:

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

de fiecare dată când funcția este apelată, va face variabila de editare să treacă de la fals la Adevărat sau adevărat la fals.

acum, în fișierul nostru HTML, adăugați următorul formular. Va apărea când editarea este adevărată:

<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>

Din nou, o altă formă. Important este că nu vom suprascrie întregul doc — vom păstra id, dar câmpul se va schimba la orice am introdus aici — acesta este scopul.

înhome.component.ts, inițializați variabilamessage2 pentru a gestiona o intrare goală și a inițializa formularul așa cum am făcut cu celelalte. Apoi creați o funcție onRename.

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; } }

există câteva lucruri noi de observat aici.

în primul rând, vom folosi.doc metoda și a pus înid am primit de la pașii anteriori. Care devine documentul bazat pe id, nu o interogare.

în continuare, folosim metoda.update. Aceasta va suprascrie numai proprietatea pe care o specificăm, în loc de .set care suprascrie întregul document. Cu alte cuvinte, dacă am avea trei câmpuri în document, am putea suprascrie doar unul cu metoda de actualizare așa.

din nou, am recitit lista noastră de documente din Magazin. Apoi, putem zip până interogare unică, caseta de editare, precum și orice mesaje anterior acolo.

șterge

ștergerea pe care o vom face este practic aceeași cu actualizarea noastră, cu excepția faptului că vom folosi metoda de ștergere.

În primul rând, în html nostru, să schimbăm butonul de ștergere:

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

acum, tot ce există este să creați funcțiadelete.

ar putea fi înțelept pentru a pune într-un avertisment, înainte de a permite utilizatorului pentru a șterge obiectul. Adăugați următorul cod în fișierul TypeScript:

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

confirm('Delete') va afișa o alertă care trebuie confirmată înainte de ștergere — doar salvează utilizatorul de ștergerea accidentală a ceva neintenționat.

după aceea, pur și simplu obținem documentul prinid pe care l-am stocat și apelăm la metoda de ștergere. Simplu ca asta.

concluzie

acum ați creat cu succes o aplicație unghiulară care poate crea, citi, actualiza și șterge documente Firestore! După cum puteți vedea, Firebase Firestore este ușor de utilizat și gata de plecare. Acest lucru poate fi ușor upscaled la mii de documente complexe.

acum, că aveți o idee bună despre elementele de bază ale pompierilor, consultați documentele oficiale pentru subiecte mai avansate.

experimentați aplicațiile unghiulare exact cum face un utilizator

depanarea aplicațiilor unghiulare poate fi dificilă, mai ales atunci când utilizatorii întâmpină probleme dificil de reprodus. Dacă sunteți interesat să monitorizați și să urmăriți starea unghiulară și acțiunile pentru toți utilizatorii dvs. în producție, încercați LogRocket. Logrocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket este ca un DVR pentru aplicații web, înregistrând literalmente tot ce se întâmplă pe site-ul dvs., inclusiv solicitări de rețea, erori JavaScript și multe altele. În loc să ghiciți de ce se întâmplă probleme, puteți agrega și raporta în ce stare se afla aplicația dvs. atunci când a apărut o problemă.

pluginul LogRocket ngrx înregistrează starea unghiulară și acțiunile către consola LogRocket, oferindu-vă context în jurul a ceea ce a dus la o eroare și în ce stare se afla aplicația atunci când a apărut o problemă.

modernizați modul în care depanați aplicațiile unghiulare – începeți monitorizarea gratuit.

Lasă un răspuns

Adresa ta de email nu va fi publicată.