Firebase on Googlen kehitysalusta, joka on nopea ja helppo asentaa. Tässä opetusohjelmassa aiomme perustaa perussovelluksen integroimalla Firebase/Firestore ja Angular. Tulemme käyttämään AngularFire — nimistä pakettia — Firebasen virallista Kulmakirjastoa-sekä itse Firebase SDK: ta.

pilvipalveluiden käyttö on yhä suositumpaa, sillä se säästää aikaa, kun ei tarvitse luoda omaa tietoturvaa, ylläpitoa jne. Googlen Firebase – palvelun avulla perustamme ilmaisen Firestoren, joka toimii tietokantanamme.

Firebase tarjoaa myös reaaliaikaisen tietokannan, mutta se tallentaa kaiken yhteen suureen JSON-puuhun.

tämä tekee tietokannasta yksinkertaisemman, mutta cloud Firestore, jota tulemme käyttämään, sisältää joustavia dokumentteja, mikä tekee siitä skaalautuvamman suuremmalle datalle. Firestore on myös nopeampi ja kaiken kaikkiaan intuitiivisempi, jos et tunne tietokantoja.

Aseta Firebase-konsoli

sinun täytyy aloittaa asettamalla projektisi Firebase-konsoliin. Ensin, mene tästä löytää konsoli.

Luo projekti, anna sille nimi ja käy vaiheet läpi. Kun olet valmis, olet projektin yleiskatsaus.

Ei meidän täytyy lisätä sovellus. Sinun pitäisi olla projektin Yleiskatsaussivulla. Täältä näet ”Aloita lisäämällä Firebase sovellukseesi”.

tee tämä klikkaamalla ”<>” – painiketta (tämä on web-sovelluksen lisääminen). Voit perustaa hosting täällä, mutta emme kata sitä tässä opetusohjelma.

Käy rekisteröimässä sovellus. Seuraavalla sivulla, näet skriptejä perustaa Firebase SDK. Nämä ovat hyödyllisiä, mutta näemme myöhemmin, miten saat kaiken tarvitsemamme, jos kaipaat niitä tällä sivulla. Jatka lohduttamista.

alustaa Firestore ja luo ensimmäiset dokumentit

Firebase-konsolissa, vasemmassa ruudussa kohdassa Develop, löydät tietokanta-välilehden. Klikkaa sitä, ja sinut tuodaan sivulle, jossa voit klikata ”Luo tietokanta”. Näytölle ilmestyy modaali, jossa voit valita tuotantotilan tai Testitilan; haluamme Testitilan. Se on epävarma, mutta hyvä testattavaksi.

Jos jatkat, sinua pyydetään valitsemaan paikka. Valitse sopiva. Kun painat valmis, se vie muutaman minuutin perustamiseen Firecore.

kun olet valmis, olet Firestoressa. Mene eteenpäin ja valitse ”Aloita kokoelma”.

se pyytää sinua luomaan Kokoelmatunnuksen; esimerkiksi, annetaan sille nimeksi ”testCollection”. Osuma Seuraava ja se vie sinut lomakkeen luomiseen ensimmäinen asiakirja.

jätämme Asiakirjatunnuksen tyhjäksi — Firestore luo tämän automaattisesti sinulle. Kirjoita kentän alle ”kenttä”. Sitten näet” merkkijono ” oletustyyppinä. Ei ole mitään syytä muuttaa tätä nyt, joten anna olla. Kirjoita arvo-kohtaan ”arvo1”. Napsauta Tallenna ja näet, että olet luonut ensimmäisen asiakirjan!

esimerkkinä myöhemmin, luodaanpa toinen dokumentti. Keskellä sarakkeessa näet ”+ lisää asiakirja.”klikkaa sitä ja sinut tuodaan takaisin dokumentin luomislomakkeeseen.

kirjoita tähän vain ”kenttä” kentän alle ja ”arvo2” arvon alle. Valitse Tallenna. Nyt meillä on kaksi asiakirjaa.

Aloita uusi Angular-projekti

tehdään frontend-projekti Angular CLI: llä (komentoriviliitäntä). Avaa pääteikkuna ja asenna Angular CLI globaalisti:

npm install -g @angular/cli

tämän asennettuna voit suorittaa ng komennon.

Kirjoita päätteeseen seuraava:

ng new your-app-name

voit nimetä projektisi miten haluat.

kun saat sen käyntiin, Kulmikas CLI johdattaa sinut parin asetusvaihtoehdon läpi.

voit lisätä reitityksen, minkä tyylisivumuodon haluat Angularyn tuottavan sovelluksellesi.

sen jälkeen se käy loput läpi ja luo Kulmasovelluksesi.

kun se on valmis, vaihda päätehakemisto juuri tekemäämme:

cd your-app-name

Kulmasovelluksen hakemistossa voit ajaa ng serve Rakenna ja palvele sovellustasi paikallisesti.

Aseta Firebase Angular-sovellukseen

Hanki Firebase SDK ajamalla päätteessäsi Seuraava Angular-projektihakemistosi sisällä:

npm i --save firebase

nyt Firebase on lisätty projektiisi.

mene Firebase-konsolille. Vasemmassa valikossa näkyy ”Project Overview”, jonka vieressä on vaihdekuvake. Napsauta kuvaketta ja sitten projektin asetukset ponnahdusikkunassa. Siirry General-välilehteen ja selaa pohjaan.

kohdassa ”Firebase SDK snippet” klikkaa radioalusta CDN: n vieressä (sen oletusarvo on automaattinen). Täältä löydät kaiken mitä tarvitset liittääksesi sovelluksesi Firebaseen. F

ind firebaseConfig muuttuja — joudumme kopioimaan nämä tiedot Kulmasovellukseen. Näyttää tältä (paitsi että kaikki täytetään oikein):

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

Kulmasovelluksesi sisällä, siirry generoituun tiedostoon app.module.ts (jos loit Kulmaprojektisi CLI: n kautta: src > app > app.module.ts). Tähän tiedostoon voi liittää koko firebaseConfig muuttujan (juuri alle tuonti on hieno).

seuraavana vuorossa on npm-paketin lataaminen angular/fire. Tämän paketin avulla voit olla helposti vuorovaikutuksessa Firebasen kanssa.

voit asentaa paketin projektiisi seuraavalla koodirivillä:

npm i angular/fire

tämän asennettuna, voimme lisätä sen tänne app.module.ts tiedosto:

import { AngularFireModule } from @angular/fire';

nyt alas tuontiryhmään, alustaa Firebase sovelluksessa lisäämällä seuraava rivi koodia:

AngularFireModule.initializeApp(firebaseConfig)

tämä tuonti koskee Firebasea yleensä, mutta jos haluamme lisätä tiettyjä palveluita, ne on lisättävä erikseen.

Firestorelle lisää tämä tiedoston alkuun:

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

sitten tuontirivistössä lähellä pohjaa:

AngularFirestoreModule

toteuta sovelluksessa

tässä vaiheessa voisi olla järkevää luoda komponentti tai kaksi Kulmasovellukseemme. Voit luoda uuden komponentin sovellukseesi projektisi CLI: n avulla.

tehdään kotikomponentti kirjoittamalla komento päätteeseen:

ng g c home

”g c” tulee sanoista ”generate component”. Tämä luo kotikansion, jossa on neljä tiedostoa: HTML-tiedosto, SCSS-tiedosto (tai mitä tahansa muotoilua käytät), TypeScript-tiedosto ja a .spec-tiedosto.

Jos haluat ohittaa lisäyksen.spec file, propend this flag to your generate command:

ng g c home --skipTests=true

teemme logiikkamme kotikomponentissamme, mutta älkäämme unohtako lisätä sitä app.component.html file. Voit aina lisätä kotiin komponentti reitittimeen, mutta yksinkertaisuuden vuoksi, Let ’ s just add it in the HTML.

Jos määrität kotikomponentin aivan kuten minä, valitsin ”app-home”, joten voit lisätä sen jonnekin app.component.html tiedosto näin

<app-home></app-home>

tämän jälkeen, aloitetaan toimintamme kotikomponentissa.

aiemmin loimme Tulikaupassamme kokoelman nimeltä testCollection; sen sisällä on kaksi asiakirjaa tai esinettä. Katsotaanpa ensin ”lukeminen” nämä kaksi asiakirjaa meidän Firestore.

Read

In home.component.ts file, we can import the Firestore through our Angular/fire package:

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

tuonnin jälkeen, we can initialize it in our constructor like this:

constructor(private firestore: AngularFirestore) {}

that is assigning Our imported AngularFirestore the alias of ”firestore” — give it whatever name you like.

ngOnInit funktio on oiva paikka lukea Tulikaupasta aivan gitgon edustalla.

katso tätä koodia:

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

käydään tämä vaihe vaiheelta läpi: kuten varmaan tiedätte, this.firestore viittaa aliakseen, jonka loimme AngularFirestore konstruktorissamme.

.collection('testCollection') tarkoittaa sitä, miten viittaamme aiemmin luomaamme kokoelmaan, ja .get() yksinkertaisesti tuo meille koko kokoelman (käymme läpi kyselevät yksittäiset asiakirjat kokoelman sisällä myöhemmin).

kun me .subscribe tulikauppaan, se on käytännössä asynkronisesti odottamassa API: ta datan palauttamiseen. Teknisesti, subscribe tulee rxjs ja on havaittavissa, joka päivittää, kun on muutos.

nyt Tulikauppa palauttaa aina tilannekuvia datasta, minkä vuoksi annoimme sille peitenimen ss. Tietokantamme tilannekuvan alla on docs, joka on haluamamme data, ja voimme käyttää .forEach array-menetelmää, jotta voimme silmukoida Docs-array.

yllä olevassa esimerkissä saimme doc.data() Firebase Firestoresta. Tämä on koko asiakirja, joka meidän tapauksessamme on esine, jolla on yksi ominaisuus. Siksi, kun työnnämme sen array, meidän täytyy alustaa meidän array seuraavasti koodi:

myArray: any = 

näin voimme nähdä sen meidän HTML, poistaa mitä siellä on, ja korvata sen seuraavasti:

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

hienoa! Olemme lukeneet tiedot Firestoresta.

Kirjoita

ensin lisätään ReactFormsModuleapp.module.ts näin:

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

lisää myös ReactiveFormsModule pohjan lähellä olevaan tuontiryhmään.

meidän home.component.html tiedosto, lisätään lomake kaapata ja lähettää uutta tietoa. Kirjoita jotain tällaista:

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

nyt, jos käytit yllä olevaa HTML: ää, lisää seuraava tuonti meidän home.component.ts file:

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

sitten meidän luokassamme lisää:

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

tämä hyväksyy HTML: stä tekemämme muodon ja syötön, jossa formControlName of newValue.

niin, saamme merkkijono syötetään käyttäjältä HTML ja lähettää sen olevan arvo uuden asiakirjan meidän Firestore. Sen voi tehdä seuraavalla funktiolla:

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

samalla tavalla kuin Palokunnastamme luemme, kirjoitamme tällä kertaa samalla viittauksella kokoelmaamme:

this.firestore.collection('testCollection')

tällä kertaa lisäämme dokumentin .add. Haluamme lisätä objektin tekstimme saimme:

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

Tämä saattaa näyttää oudolta, mutta se johtuu siitä, että saamme muodon arvon. Sinne saamme nimetyn kiinteistön newValue. Siksi se on value.newValue.

loput funktiosta on yksinkertaisesti .then ja .catch hoitamaan palokunnan vastausta.

kirjoitettaessa Tulikauppaan vastaus (onnistuessaan) on suuri, outo esine.

koska emme lue mitään, näiden käsittelijöiden ainoa käyttötarkoitus on, jos haluamme tehdä jotain heti Tulikauppaan kirjoittamisen jälkeen (kuten teemme soittaessamme .reset() tyhjentääksemme lomakkeen).

Jos käytät sovellusta sellaisenaan (ng serve), huomaat, ettei se näy listallamme syötettyäsi uuden arvon ja lähetettyäsi sen Firebaseen. Voit päivittää sivun ja sen pitäisi näkyä, jos kirjoitus onnistui. Miksi?

se johtuu siitä, että kun kirjoitimme Palokuntaamme, emme lukeneet uutta muutosta. Kun nykyinen ngOnInit funktio on perustettu, emme havaitse muutoksia.

uusien tietojen näkemiseksi on muutettava, miten tietoja luetaan:

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

nyt on tilattu. Näet, että kun olet lisännyt uuden asiakirjan tietokantaan, se lisätään myös luetteloon sovelluksessamme. Suurin ero on se, että nyt merkitään .valueChanges().

kysely

lisätään vielä yksi lomake, jolla voidaan tiedustella tulikauppaa dokumentin arvon perusteella:

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

yksinkertaisuuden vuoksi se on aivan kuin ensimmäinen muoto, mutta eri nimillä ja eri funktiolla. Anna tulla ja nimeä se haluamallasi tavalla, mutta varmista vain käyttää uusia nimiä eikä niitä, joita käytimme edellisessä muodossa.

TypeScript-tiedostossa varmista, että alustat lomakkeen luokan yläreunassa:

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

myös täällä, missä alustamme kaiken, lisää single: any; muuttujaksi laittaaksemme kysytyn dokumenttimme, ja message: string; muuttuja virheilmoituksille.

sillä lähdetään rakentamaan onQuery funktiota.

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

ensin katsotaan, syöttääkö käyttäjä mitään. Syöte löytyy this.secondForm.value.valueToGet.

joten, jos tämä on tyhjä, haluamme palauttaa viestin emmekä lähettää tyhjää merkkijonoa kyselyyn Firebase. Tässä ” jos ”- tarkistuksessa varmistan myös, että” single ” – muuttujamme on tyhjä, koska olemme saattaneet tehdä kyselyjä aiemmin, mutta nyt haluamme vain lähettää viestin, että lomake ei voi olla tyhjä.

Jos se ei ole tyhjä, lähdemme kyselemään Tulikaupastamme. Huomaat jotain uutta” collection ” — parametrissa-Kulmikkaassa me itse asiassa teemme kyselyn tämän parametrin sisällä. ref on viittaus kokoelmaan, ja on yleisin tapa tiedustella asiakirjoja Firestore-kokoelmasta.

– menetelmässä kerrotaan ensin Firebaselle, mitä kenttää kunkin dokumentin sisällä pitää kysellä. Kaikki meidän kentät ovat yksinkertaisesti ”kenttä”, joten se tekee siitä helppoa.

silloin käytetään vertailukohtaa, ==, eli kysytään, onko kenttä isEqual. Voit käyttää myös muita verrokkeja, kuten <>= ja niin edelleen.

lopuksi kolmas parametri kertoo Firebaselle, mihin kenttää kannattaa verrata — meidän tapauksessamme haluamme laittaa käyttäjän antaman syötearvon tähän ja nähdä, näkyykö se arvona missään Firestoressa.

nopea huomautus Tulikaupan rajoituksesta: kyselyä – menetelmällä on rajoitettu.

voit tarkistaa, onko se yhdellä kirjaimella pois, tai onko se pieni, jos Tulikauppa on tallentanut sen isona, eikä se palauta sitä. Voit tehdä asioita frontend auttaa, kuten tehdä jokainen käyttäjä syöttää pieniä kirjaimia vastaamaan Firestore, mutta se voi mennä vain niin pitkälle.

tietysti voisi vetää koko Firestoren keulaan (kuten me teemme). Vaikka kyseleminen olisi parempi, se ei ehkä ole ihanteellinen, jos Tulikauppa on jättimäinen. Ehdotettu tapa tehdä kokotekstihaku on käyttää Algoliaa.

me .get() koska luemme arvoa, ja .subscribe kuten koko kokoelmaa lukiessamme.

kuitenkin, kun saamme kuvan Tulikaupasta, haluamme laittaa ”jos” – tarkistuksen, jotta näemme, onko mitään palautettu. Voit console.log tilannekuvan ja katsoa, eikö se jää tyhjäksi, vaikka tulitikkua ei tulisikaan.

mutta, docs tilannevedoksen ominaisuus on tyhjä (tyhjä array tarkalleen ottaen), jos kyselyllemme ei löydy vastaavuutta. Näin voimme tietää, vastaako kyselymme mitään vai ei.

taas lähetämme viestin takaisin ja asetamme single muuttujan nollaan. Jos löydämme vastaavuuden, haluamme tehdä päinvastoin, asettamalla viestin tyhjäksi ja asettamalla single muuttujan palautettuun dataan.

nyt kun meillä on TIEDOT, palataan home.component.html. Lisätään hieman HTML: ää ”viestin” ja ”yhden” muuttujien käsittelemiseksi:

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

melko yksinkertaista täällä. Käytämme *ngIf direktiiviä näyttääksemme sovitun asiakirjan vain, jos se löytyy. Kuten muistatte, asetimme ”singlen”nollaksi, jos sitä ei löydy, jolloin koko *ngIfdiv jäisi piiloon. Sama ”viestin” kanssa — jos se on asetettu tyhjään merkkijonoon.

huomaat myös, että lisäsimme painikkeita seuraavaan osioomme, koska meidän on vielä kyettävä muokkaamaan ja poistamaan!

päivitys

jotain, joka suuresti auttaa meitä tästä eteenpäin, on id kysymästämme dokumentista.

tiedämme vain muokkaavamme tai poistavamme kyseisen tiedustellun dokumentin, joten saadaan sen id. Kuten saatat huomata, Kun luomme dokumentteja sovelluksestamme, emme anna niille id.

Plus, kun loimme dokumenttimme Firestoressa alussa, annoimme Firestoren automaattisesti luoda ids; sama tapahtuu sovelluksestamme luomiemme kanssa. Miten siis saadaan

s?

meidän onQuery funktio, asetetaanpa viittaus tietokantakyselyymme näin:

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

katkaise .get() ja kaikki sen jälkeen, niin toisella rivillä, käytä referenssiämme näin:

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

…ja niin edelleen. Se on pohjimmiltaan sama asia.

lisätään nyt tilaustavan alle toinen rivi, jotta saadaan dokumentti id:

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

ilmeisesti joudutaan alustamaan this.id alkuun: id: string = ''. Mutta, nyt meillä on id käyttää sekä muokata ja poistaa toimintoja luomme.

Back in our home.component.html file, change the edit button we prevented to the following:

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

tällä openEdit() function, in our TypeScript file, we can initialize an edit variable:

edit: boolean = false

ja luodaan openEdit funktio, jolla se vaihdetaan:

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

joka kerta kun funktiota kutsutaan, edit-muuttuja muuttuu epätosesta todeksi tai todesta epätoseksi.

nyt HTML-tiedostoomme lisätään seuraava muoto. Se tulee esiin, kun edit on totta:

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

taas, toisessa muodossa. Tärkeää tässä on, että emme aio korvata koko doc — pidämme id, mutta kenttä muuttuu mitä ikinä syötämme täällä-se on tavoite.

In home.component.ts, alustaa message2 muuttuja käsittelemään tyhjää syöttöä ja alustaa muoto kuten teimme muiden kanssa. Luo sitten onRename funktio.

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

tässä on pari uutta huomioitavaa.

ensin käytetään .doc menetelmää ja laitetaan id saimme edellisistä vaiheista. Joka saa asiakirjan id, ei kyselyä.

seuraavaksi käytetään .update – menetelmää. Tämä korvaa vain määrittämämme ominaisuuden, eikä .set, joka korvaa koko asiakirjan. Toisin sanoen, jos meillä olisi kolme kenttää asiakirjassa, voisimme korvata vain yhden päivitysmenetelmällä näin.

taas luemme uusiksi Tulikaupan dokumenttilistan. Sitten, voimme zip ylös yhden kyselyn, muokata ruutuun, ja kaikki viestit aiemmin siellä.

Poista

tekemämme poisto on periaatteessa sama kuin päivityksemme, paitsi että käytämme delete-menetelmää.

ensin meidän html: ssä vaihdetaan delete-painiketta:

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

nyt on vain luotava delete funktio.

voi olla viisasta laittaa varoitus, ennen kuin käyttäjä voi poistaa objektin. Lisää seuraava koodi Konekirjoitustiedostoon:

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

confirm('Delete') ponnahtaa esiin hälytys, joka on vahvistettava ennen poistamista — se vain pelastaa käyttäjän vahingossa poistamasta jotain tahattomasti.

tämän jälkeen saamme dokumentin yksinkertaisesti id tallensimme, ja kutsumme siihen delete-menetelmän. Niin yksinkertaista.

johtopäätös

olet nyt onnistunut luomaan kulmikkaan sovelluksen, jolla voi luoda, lukea, päivittää ja poistaa Firestore-dokumentteja! Kuten näette, Firebase Firestore on helppokäyttöinen ja valmis. Tämä voidaan helposti laajentaa tuhansiin monimutkaisiin asiakirjoihin.

nyt kun sinulla on hyvä käsitys Firestoren perusasioista, tutustu virallisiin dokumentteihin edistyneemmistä aiheista.