Firebase je vývojová platforma společnosti Google, která se rychle a snadno nastavuje. V tomto tutoriálu nastavíme základní aplikaci integrující Firebase/Firestore a Angular. Budeme používat Balíček s názvem AngularFire-oficiální úhlová Knihovna pro Firebase – stejně jako samotnou Firebase SDK.

používání cloudových služeb je stále populárnější, protože šetří čas, aniž byste museli vytvářet vlastní zabezpečení, údržbu atd. S Firebase společnosti Google vytvoříme bezplatný Firestore, který bude fungovat jako naše databáze.

Firebase také nabízí databázi v reálném čase, ale ukládá vše do jednoho velkého stromu JSON.

To je pro jednodušší databáze, ale s cloud Firestore, což je to, co budeme používat, jsou flexibilní dokumentů, což je více škálovatelný pro větší data. Firestore je také rychlejší a celkově intuitivnější, pokud nejste obeznámeni s databázemi.

Nastavení konzoly Firebase

budete muset začít nastavením projektu na konzole Firebase. Nejprve přejděte sem a najděte konzolu.

vytvořte projekt, pojmenujte jej a projděte kroky. Po dokončení budete v přehledu projektu.

ne musíme přidat aplikaci. Měli byste být na stránce s přehledem projektu. Zde uvidíte „začněte přidáním Firebase do aplikace“.

klepnutím na „<>“ tlačítko (to je přidat webové aplikace). Zde můžete nastavit hosting, ale v tomto tutoriálu to nebudeme pokrývat.

pokračujte a zaregistrujte aplikaci. Na další stránce uvidíte skripty pro nastavení sady Firebase SDK. Jsou užitečné, ale uvidíme později, jak získat vše, co potřebujeme, pokud vám na této stránce chybí. Pokračujte a pokračujte v konzoli.

inicializujte Firestore a vytvořte první dokumenty

v konzole Firebase v levém podokně pod Develop najdete kartu databáze. Klikněte na něj a dostanete se na stránku, kde můžete kliknout na „Vytvořit databázi“. Objeví se Modální,kde si můžete vybrat režim výroby nebo testovací režim; chceme testovací režim. Je to nejisté, ale v pořádku pro testování.

Pokud budete pokračovat, budete vyzváni k výběru místa. Jděte do toho a vyberte vhodnou. Jakmile stisknete tlačítko Hotovo, nastavení Firestore bude trvat několik minut.

po dokončení budete ve svém Firestore. Pokračujte a vyberte „Spustit sbírku“.

obrazovka konzoly pro nastavení vašeho projektu Firebase.

obrazovka konzoly pro nastavení vašeho projektu Firebase.

požádá vás o vytvoření ID kolekce; pro náš příklad to pojmenujme „testCollection“. Hit další a to vás přivede do formuláře pro vytvoření prvního dokumentu.

necháme ID dokumentu prázdné-Firestore to automaticky vygeneruje za vás. Do pole zadejte „pole“. Pak uvidíte „řetězec“ jako výchozí typ. Zatím není důvod to měnit, takže to nechte tak, jak je. V části Hodnota zadejte „value1“. Klikněte na Uložit a uvidíte, že jste vytvořili svůj první dokument!

pro náš příklad později vytvoříme druhý dokument. Ve středním sloupci uvidíte “ + Přidat dokument. „pokračujte a klikněte na to a dostanete se zpět do formuláře pro vytvoření dokumentu.

zde stačí zadat „pole“ do pole a „value2“ do hodnoty. Klikněte na Uložit. Nyní máme dva dokumenty.

spusťte nový projekt Angular

udělejme náš projekt frontend s úhlovou CLI (rozhraní příkazového řádku). Otevřete okno terminálu a nainstalovat Úhlové CLI po celém světě:

npm install -g @angular/cli

S tímto nainstalován, můžete spustit ng příkaz.

do terminálu zadejte následující:

ng new your-app-name

svůj projekt můžete pojmenovat podle svého přání.

jakmile začnete, úhlová CLI vás provede několika možnostmi konfigurace.

můžete přidat směrování a poté zvolit, jaký formát stylů chcete pro vaši aplikaci vygenerovat.

poté projde zbytek a vytvoří vaši úhlovou aplikaci.

Jakmile to bude hotové, jděte do toho a změnit terminálu adresář, ke které jsme teď vytvořili,

cd your-app-name

V Úhlové app adresáře, můžete spustit ng serve budovat a sloužit vaší aplikace lokálně.

Nastavit Firebase v Úhlové aplikace

Pojďme Firebase SDK spuštěním následujícího v terminálu ve vašem Úhlové projektu adresář:

npm i --save firebase

Nyní Firebase je přidán do projektu.

přejděte na konzolu Firebase. V levém menu uvidíte „přehled projektu“ s ikonou ozubeného kola vedle něj. V rozbalovacím okně klikněte na ikonu a poté na Nastavení projektu. Zde přejděte na kartu Obecné a přejděte dolů.

v části „fragment Firebase SDK“ klikněte na spodní část rádia vedle CDN (výchozí je automatické). Zde najdete vše, co potřebujete pro připojení aplikace k Firebase. F

Ind firebaseConfig proměnná – budeme muset zkopírovat tyto informace do Úhlové aplikace. Vypadá to (až bude vše vyplněno správně):

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

Uvnitř Hranaté aplikace, přejděte do vytvořeného souboru app.module.ts (pokud jste vytvořili vaše Úhlové projektu přes CLI: src > app > app.module.ts). V tomto souboru můžete vložit celou proměnnou firebaseConfig (těsně pod importem je v pořádku).

dalším cílem podnikání je stažení balíčku npm angular/fire. S tímto balíčkem budete moci snadno komunikovat s Firebase.

můžete nainstalovat balíček v projektu s následující řádek kódu:

npm i angular/fire

S tímto nainstalován, můžeme jej přidat do app.module.ts file:

import { AngularFireModule } from @angular/fire';

Nyní, v dovozu pole, inicializovat Firebase v aplikaci přidáním následujících řádek kódu:

AngularFireModule.initializeApp(firebaseConfig)

Tento import je pro Firebase obecně, ale chceme-li přidat určité služby, budete muset přidat těm, individuálně.

Pro Firestore, přidejte tento horní části souboru:

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

Pak, v dovozu pole v blízkosti spodní části:

AngularFirestoreModule

Implementovat do aplikace

V této situaci, to dává smysl vytvořit složku nebo dva v naší Úhlové aplikace. Novou komponentu můžete vytvořit ve své aplikaci pomocí CLI ve vašem projektu.

udělejme domácí komponentu zadáním příkazu do terminálu:

ng g c home

„g c“ znamená „generovat komponentu“. Tím se vygeneruje domovská složka se čtyřmi soubory pod ní: soubor HTML, soubor SCSS (nebo jakýkoli styl, který používáte), soubor TypeScript a .spec soubor.

Chcete-li přeskočit přidání .

ng g c home --skipTests=true

budeme dělat naši logiku v naší domácí komponentě, ale nezapomeňte ji přidat do našeho app.component.html soubor. Do routeru můžete vždy přidat domácí komponentu, ale pro jednoduchost ji prostě přidejte do HTML.

Pokud jste nastavili domovské složky, stejně jako já, volič bude „app-home“, takže můžete přidat to někde v app.component.html souboru, jako je tento,

<app-home></app-home>

Po tom, pojďme dělat naši činnost v domovské složky.

dříve jsme vytvořili kolekci v našem Firestore s názvem testCollection; uvnitř jsou dva dokumenty nebo objekty. Podívejme se nejprve na „čtení“ těchto dvou dokumentů z našeho Firestore.

Číst

V home.component.ts soubor, můžeme importovat Firestore přes naše Úhlové/oheň balíček:

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

Po importu, můžeme inicializovat v našem konstruktoru takto:

constructor(private firestore: AngularFirestore) {}

To je přiřazení naše dovážené AngularFirestore alias „Firestore“ — dát to, co se vám líbí jméno.

funkce ngOnInit je ideálním místem pro čtení z Firestore přímo z gitgo.

podívejte se na tento kód:

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

Pojďme si projít krok za krokem: jak asi víte, this.firestore odkazuje na alias, který jsme vytvořili pro naše AngularFirestore v našem konstruktoru.

.collection('testCollection') je, jak jsme se odkazovat na kolekci jsme vytvořili dříve, a .get() jednoduše se nám, že celou sbírku (budeme pokrývat dotazování jednotlivých dokumentech v rámci kolekce později).

Když jsme .subscribe firestore, to je v podstatě asynchronně čeká na API vrátit data. Technicky, předplatit pochází z RxJS a je pozorovatelný, který se aktualizuje, když dojde ke změně.

nyní Firestore vždy vrací snímky dat, a proto jsme mu dali alias ss. Pod snímkem naší databáze jsou dokumenty, což jsou data, která chceme, a můžeme použít metodu .forEach array, pro smyčku přes pole dokumentů.

ve výše uvedeném příkladu jsme dostali doc.data() od Firebase Firestore. Bude to celý dokument, který je v našem případě objektem s jednou vlastností. Proto, když jsme se tlačit do našeho pole, budeme muset inicializovat naše pole jako následující kód:

myArray: any = 

To nám umožňuje vidět v naší HTML, vymazat to, co je tam, a nahradit ji následující:

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

kompletní seznam ve formátu HTML s dvěma hodnotami.

kompletní seznam v HTML se dvěma hodnotami.

skvělé! Úspěšně jsme přečetli data z našeho Firestore.

napište

nejprve přidejte ReactFormsModule do app.module.ts, takhle:

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

také přidejte ReactiveFormsModule do importního pole v dolní části.

v našem souboru home.component.html přidáme formulář pro zachycení a odeslání nových dat. Napsat něco jako toto:

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

Nyní, pokud jste použili HTML výše, přidejte následující dovoz na naše home.component.ts file:

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

Pak, v naší třídě, přidat:

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

Tento bude akceptovat z HTML, formuláře a vstupního jsme udělali, formControlNamenewValue.

takže dostaneme řetězec zadaný od uživatele v HTML a odešleme jej jako hodnotu nového dokumentu v našem Firestore. To můžeme udělat pomocí následující funkce:

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

V stejným způsobem, četli jsme si z našich Firestore, jsme bude psát tentokrát s použitím stejného referenčního aby se naše kolekce:

this.firestore.collection('testCollection')

Tento čas, budeme přidávat dokumentu .add. Chceme přidat objekt s naším textem, který jsme obdrželi:

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

to může vypadat divně, ale je to proto, že získáváme hodnotu formuláře. Tam dostaneme vlastnost, kterou jsme pojmenovali newValue. Proto je value.newValue.

zbytek funkce je prostě .then.catch zpracovat odpověď od Firestore.

při zápisu do Firestore bude odpověď (pokud bude úspěšná) velkým podivným objektem.

Vzhledem k tomu, že nejsme nic číst, používat pouze tyto manipulátory je, pokud chceme něco udělat okamžitě po zápisu do Firestore (jako my při volání .reset() vymazat formulář).

pokud pokračujete a spustíte aplikaci tak, jak je (ng serve), všimnete si, že se po zadání nové hodnoty a odeslání do Firebase nezobrazí na našem seznamu. Stránku můžete obnovit a měla by se zobrazit, pokud byl zápis úspěšný. Proč?

je to proto, že poté, co jsme napsali do našeho Firestore, jsme nečetli novou změnu. Vzhledem k tomu, jak je nastavena naše aktuální funkce ngOnInit, nepozorujeme změny.

aby bylo vidět nová data, musíme změnit způsob, jakým čteme údaje:

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

Nyní jsme se přihlásili. Uvidíte, že po přidání nového dokumentu do databáze bude také přidán do seznamu v naší aplikaci. Hlavní rozdíl je v tom, že jsme nyní přihlášeni k odběru .valueChanges().

dotaz

přidejte další formulář, který můžeme použít k dotazu Firestore na základě hodnoty dokumentu:

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

pro jednoduchost je to přesně jako první formulář, ale s různými názvy a jinou funkcí. Pokračujte a pojmenujte jej, jak chcete, ale nezapomeňte použít nová jména a ne ta, která jsme použili v předchozím formuláři.

v strojopis souboru, ujistěte se, že inicializovat formulář v horní části třídy:

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

Také, a to až tady, kde jsme inicializovat všechno, přidejte single: any; jako proměnnou, aby naše dotazovány dokumentu, a message: string; jako proměnnou pro chybové zprávy.

s tím začneme budovat naši onQuery funkci.

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

nejprve uvidíme, zda uživatel vůbec něco zadá. Vstup lze nalézt v this.secondForm.value.valueToGet.

Pokud je tedy prázdný, chceme vrátit zprávu a neposlat prázdný řetězec dotazu Firebase. V této kontrole “ if „se také ujistím, že naše“ jediná “ proměnná je prázdná, protože jsme se mohli úspěšně dotazovat dříve, ale nyní chceme odeslat pouze zprávu, že formulář nemůže být prázdný.

Pokud není prázdný, pokračujeme a dotazujeme se na náš Firestore. V parametru „kolekce“ si všimnete něčeho nového-v Angular skutečně provedeme dotaz přímo uvnitř tohoto parametru. ref je odkaz na sbírky, a .where je nejčastější způsob, jak dotaz dokumentů v Firestore kolekce.

v metodě .where nejprve řekneme Firebase, jaké pole se má dotazovat v každém dokumentu. Všechna naše pole jsou jednoduše „pole“, takže to usnadňuje.

Pak použijeme komparátor, ==, který je zeptat se, zda pole isEqual. Můžete také použít jiné komparátory jako <>= a tak dále.

a Konečně, třetí parametr říká, Firebase, co chcete porovnat pole — v našem případě chceme, aby vstupní hodnoty od uživatele, tady a uvidíme, zda se objeví jako hodnota kdekoliv v naší Firestore.

rychlá poznámka k omezení Firestore: dotazování pomocí metody .where je omezené.

můžete zkontrolovat něco, co je vypnuté jedním písmenem, nebo je malá písmena, kde je Firestore uložen jako velká písmena a nevrátí jej. Na frontendu můžete dělat věci, které vám pomohou, jako je to, že každý uživatel zadává malá písmena tak, aby odpovídala Firestore, ale to může jít jen tak daleko.

samozřejmě můžete vytáhnout celý Firestore do frontendu (jak to děláme). Zatímco dotazování by bylo lepší, nemusí být ideální, pokud je váš krb obrovský. Navrhovaný způsob, jak provést fulltextové vyhledávání, je použít Algolia.

budeme .get() protože čteme hodnotu, a budeme .subscribe stejně jako při čtení celé kolekce.

po získání snímku z Firestore však chceme provést kontrolu „if“, abychom zjistili, zda je něco vráceno. Můžete console.log snímek a zjistit, zda nebude prázdný, i když v Firestore nebyla žádná shoda.

ale vlastnost docs na snímku bude prázdná (přesné prázdné pole), pokud pro náš dotaz neexistuje shoda. Takto můžeme zjistit, zda náš dotaz odpovídá něčemu nebo ne.

znovu odešleme zprávu a nastavíme proměnnou single na null. Pokud najdeme shodu, chceme udělat opak, nastavit zprávu na prázdnou a nastavit proměnnou single na vrácená data.

Nyní, když máme data, vraťme se zpět na home.component.html. Pojďme přidat nějaké HTML zpracovat naše“ zpráva „a“ single „proměnné:

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

docela jednoduché zde. Používáme direktivu *ngIf, abychom zobrazili odpovídající dokument, pouze pokud je nalezen. Jak si vzpomínáte, nastavili jsme „single“ na null, pokud nebyl nalezen, takže celý *ngIfdiv by byl skrytý. Totéž s „zprávou“ – pokud je nastavena na prázdný řetězec.

také si všimnete, že jsme přidali tlačítka pro naši další sekci, protože stále musíme být schopni upravovat a mazat!

aktualizace

něco, co nám odtud velmi pomůže, je získání id dokumentu, který jsme dotazovali.

víme, že tento dotazovaný dokument pouze upravíme nebo odstraníme, takže pojďme získat jeho id. Jak si můžete všimnout, když vytváříme dokumenty z naší aplikace, nedáváme jim id.

a když jsme vytvořili naše dokumenty v Firestore na začátku, nechali jsme Firestore automaticky generovat ids; totéž se děje s těmi, které jsme vytvořili z naší aplikaci. Jak tedy získáme ids?

V onQuery funkce, pojďme nastavit odkaz do naší databáze dotaz, jako je tento:

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

přerušit .get() a vše, co po ní, pak na další řádek, použijte náš odkaz, jako je tento:

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

…A tak dále. Je to v podstatě totéž.

Nyní, pod přihlásit metoda, pojďme přidat další řádky dokumentu id:

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

je Zřejmé, že budeme muset inicializovat this.id v horní: id: string = ''. Nyní však máme id, které můžeme použít v našich funkcích úprav a mazání, které vytvoříme.

v home.component.html soubor, změnit na tlačítko upravit již dříve jsme vytvořili následující:

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

tento openEdit() funkce, v našem Stroji souboru, můžeme inicializovat upravit proměnné:

edit: boolean = false

A vytvoří openEdit funkce přepínání to:

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

Pokaždé, když je funkce nazývá, bude to dělat editaci proměnné jít z false na true nebo true na false.

nyní v našem souboru HTML přidejte následující formulář. Objeví se, když je editace pravdivá:

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

znovu, jiný formulář. Důležité zde je, že nebudeme přepisovat celý doc — budeme mít id, ale pole se bude měnit, co jsme vstupní tady — to je cíl.

V home.component.ts inicializujte proměnnou message2 pro zpracování prázdného vstupu a inicializaci formuláře jako u ostatních. Poté vytvořte funkci 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; } }

zde je třeba si všimnout několika nových věcí.

nejprve použijeme metodu .doc a vložíme id, kterou jsme získali z předchozích kroků. Tím se dokument získá na základě id, nikoli dotazu.

dále použijeme metodu .update. Tím se přepíše pouze vlastnost, kterou určíme, namísto .set, která přepíše celý dokument. Jinými slovy, pokud bychom měli v dokumentu tři pole, mohli bychom přepsat pouze jedno pomocí metody aktualizace.

znovu jsme si přečetli seznam dokumentů z Firestore. Pak, můžeme zip nahoru jeden dotaz, upravit pole, a všechny zprávy dříve tam.

Smazat

odstranění, které provedeme, je v podstatě stejné jako naše aktualizace, kromě toho, že použijeme metodu odstranění.

nejprve v našem html změníme tlačítko Odstranit:

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

nyní existuje pouze vytvoření funkce delete.

mohlo by být moudré dát varování, než umožní uživateli odstranit objekt. Přidejte následující kód do Strojopisu souboru:

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

confirm('Delete') bude pop-up upozornění, která musí být potvrzena před odstraněním — to prostě zachrání uživatele před nechtěným smazáním něco neúmyslně.

poté jednoduše získáme dokument pomocí id, který jsme uložili, a zavoláme na něj metodu delete. Je to tak jednoduché.

závěr

Nyní jste úspěšně vytvořili úhlovou aplikaci, která dokáže vytvářet, číst, aktualizovat a mazat dokumenty Firestore! Jak můžete vidět, Firebase Firestore je snadno ovladatelný a připraven jít. To lze snadno zvětšit na tisíce složitých dokumentů.

Nyní, když máte dobrou představu o základech Firestore, podívejte se na oficiální dokumenty pro pokročilejší témata.

vaše Zkušenosti Úhlové aplikace přesně tak, jak uživatel

Ladění Úhlové aplikací může být obtížné, zejména, když uživatelé zaznamenat problémy, které jsou obtížné reprodukovat. Pokud máte zájem o sledování a sledování úhlového stavu a akcí pro všechny vaše uživatele ve výrobě, zkuste LogRocket. LogRocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket je jako DVR pro webové aplikace, nahrávání doslova vše, co se děje na vašem webu, včetně síťové požadavky, chyby jazyka JavaScript, a ještě mnohem více. Místo hádání, proč k problémům dochází, můžete agregovat a podat zprávu o tom, v jakém stavu byla vaše aplikace, když došlo k problému.

LogRocket NgRx plugin zaznamenává Úhlové státu a opatření k LogRocket konzole, která vám kontextu kolem, co vedlo k chybě, a v jakém stavu byla žádost, když došlo k problému.

modernizujte způsob ladění úhlových aplikací-začněte sledovat zdarma.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.