Monimutkaisten Firebase-kyselyjen käyttäminen Angularissa

Yksi Firebasen ominaisuuksista on, että voit luoda pilveen tallennetun NoSQL-tietokannan. Voit myös integroida tämän tietokannan kehittämiisi sovelluksiin ja tallentaa, päivittää ja poistaa tietoja tietokannan sisällä.

Voit myös tehdä kyselyitä Firebase-tietokannasta Angular-sovelluksestasi. Firebase edellyttää kenttäyhdistelmien indeksointia kyselylle, joka käyttää useita kenttiä. Näin Firebase voi etsiä ne helposti, kun soitat kyselyyn toisessa vaiheessa.

Määritä Angular-sovellus ja Firebase-tietokanta

Ennen kuin kirjoitat Firebase-kyselyjä, sinun on luotava kulmikas sovellus ja Firebase-tietokanta. Sinun on myös määritettävä Angular-sovellus muodostaaksesi yhteyden tietokantaasi.

1. Jos sinulla ei ole olemassa olevaa Angular-sovellusta, voit käyttää uutta -komento luodaksesi uuden projektin, jossa on kaikki tarvittavat Angular-tiedostot.

   ng UusiUusi-kulma-sovellus

instagram viewer
2. Luo uusi Firebase-tietokanta Angular-sovellukselle kirjautumalla Firebaseen ja luomalla uusi Firebase-projekti ohjeiden mukaan.
3. Luo uudessa Cloud Firestore -tietokannassa kaksi kokoelmaa (tunnetaan myös taulukoina) "Tuotteelle" ja "Toimittajalle". Toimittaja voi toimittaa useita tuotteita. Jokainen tuote yhdistetään myös toimittajaan "supplierId"-kentän avulla.
4. Syötä seuraavat tiedot "Tuote" -taulukkoon. Kirjoita nimi-, productId- ja SupplierId-kentät merkkijonoina. Syötä hinta- ja InStock-kentät numeroina.

   Asiakirjan tunnus	Kentät
   tuote1	nimi: "Nauhat" hinta: 12,99 Varastossa: 10 tuotetunnus: "P1" ToimittajaId: "S1"
   tuote 2	nimi: "Balloons" hinta: 1.5 Varastossa: 2 tuotetunnus: "P2" ToimittajaId: "S1"
   tuote 3	nimi: "paperi" hinta: 2,99 Varastossa: 20 tuotetunnus: "P3" ToimittajaId: "S1"
   tuote 4	nimi: "pöytä" hinta: 199 Varastossa: 1 tuotetunnus: "P4" ToimittajaId: "S2"

   Tässä on esimerkki siitä, miltä tämän pitäisi näyttää:
5. Syötä seuraavat tiedot "Toimittaja"-taulukkoon. Kirjoita kaikki kentät merkkijonoina.

   Asiakirjan tunnus	Kentät
   toimittaja1	nimi: "Taide- ja käsityötoimittaja" sijainti: "Kalifornia, USA" ToimittajaId: "S1"
   toimittaja2	nimi: "Amazing Tables" sijainti: "Sydney, Australia" ToimittajaId: "S2"

   Tältä toimittaja1-merkinnän pitäisi näyttää:
6. Asentaa kulma/tuli sovellukseesi.

   npm i @kulmikas/fire

7. Avaa Firebasessa Projektin asetukset. Lisää Firebase Angular-sovellukseesi napsauttamalla kulmakiinnikkeiden logoa.
8. Firebase tarjoaa sinulle määritystiedot, joiden avulla voit yhdistää Angular-sovelluksesi Firebase-tietokantaan.
9. Vaihda sisältö sisään ympäristöt/environment.ts seuraavalla koodilla. Sinun on muutettava sisällä olevia arvoja firebaseConfig. Muuta ne vastaamaan Firebasen edellisessä vaiheessa antamia määrityksiä.

   viedäkonst ympäristö = {
    tuotanto: väärä,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-queries",
    storageBucket: "muo-firebase-queries.appspot.com",
    messagingSenderId: "569911365044",
    appId: "1:569911365044:web:9557bfef800caa5cdaf6e1"
    }
   };

10. Tuo ympäristö ylhäältä ja Angular Firebase -moduulit sisään src/app/app.module.ts.

    tuonti { ympäristö } alkaen "../environments/environment";
    tuonti { AngularFireModule } alkaen '@kulma/fire/compat';
    tuonti { AngularFirestoreModule } alkaen "@angular/fire/compat/firestore";

11. Lisää Firebase-moduulit tuontitaulukkoon:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(ympäristöön.firebaseConfig)

Monimutkaisen Firebase-kyselyn kirjoittaminen Services-tiedostoon

Voit tehdä kyselyitä Firebase-tietokannassasi olevista taulukoista käyttämällä palvelutiedostoa.

1. Luo uusi kansio nimeltä "palvelut". Luo kansioon uusi tiedosto nimeltä "service.ts".
2. Lisää tiedostoon AngularFirestore-tuonti, -konstruktori ja -luokka.

   tuonti { Injektoitava } alkaen '@kulma/ydin';
   tuonti { AngularFirestore } alkaen '@angular/fire/compat/firestore';
   @Injektoitava({
    tarjotaan: 'juuri'
   })
   viedäluokkaaPalvelu{
   rakentaja(yksityinen tietokanta: AngularFirestore) { }
   }

3. Lista tässä kyselyesimerkissä tuotteet toimittajan nimen perusteella. Lisäksi suodata luettelo niin, että näet vain tuotteen, jonka varastossa on vähiten. Koska Firebase ei ole rationaalinen tietokanta, meidän on tehtävä kysely kahdesta erillisestä taulukosta useammalla kuin yhdellä kyselyllä.
4. Voit tehdä tämän luomalla uuden funktion nimeltä getSupplier(), käsitelläksesi ensimmäisen kyselyn. Funktio palauttaa "Toimittaja"-taulukon rivin, joka vastaa nimeä.

   getSupplier (nimi: merkkijono) {
   palataUusiLupaus((ratkaise)=> {
    this.db.collection('Toimittaja', viite => ref.where('nimi', '==', nimi)).valueChanges().subscribe (toimittaja => ratkaista (toimittaja))
    })
    }

5. Luo toinen funktio nimeltä getProductsFromSupplier(). Tämä kysely hakee tietokannasta tiettyyn toimittajaan liittyviä tuotteita. Lisäksi kysely järjestää tulokset myös "inStock"-kentän mukaan ja näyttää vain luettelon ensimmäisen tietueen. Toisin sanoen se palauttaa tuotteen tietylle toimittajalle, jonka "inStock" -määrä on pienin.

   getProductsFromSupplier (supplierId: string) {
   palataUusiLupaus((ratkaise)=> {
    this.db.collection('Tuote', viite => ref.where('ToimittajaId', '==', SupplierId).orderBy('varastossa').startAt (0).limit (1)).valueChanges().subscribe (tuote => ratkaista (tuote))
    })
    }

6. Vuonna src/app/app.component.ts tiedosto, tuo palvelu.

   tuonti { Palvelu } alkaen 'src/app/services/service';

7. Lisää konstruktori AppComponent-luokkaan ja lisää palvelu rakentajaan.

   rakentaja(yksityinen palvelu: Palvelu) { }

8. Luo uusi funktio nimeltä getProductStock(). Tämä toiminto tulostaa tuotteen vähiten tietyn toimittajan tarjoaman varaston. Muista kutsua uusi toiminto ngOnInit() funktio ja ilmoittaa muuttuja tuloksen tallentamiseksi.

   tuotteet: mikä tahansa;
   ngOnInit(): mitätön {
   Tämä.getProductStock();
   }
   asynk getProductStock() {
   }

9. Sisällä getProductStock() toiminto, käytä kahta kyselyä palvelutiedostosta. Käytä ensimmäistä kyselyä saadaksesi tietueen toimittajasta nimen perusteella. Käytä sitten toimittajatunnusta argumenttina toiselle kyselylle, joka löytää kyseisen toimittajan tuotteen, jolla on pienin varasto.

   päästää toimittaja = odottaaTämä.service.getSupplier('Taide- ja käsityötoimittaja'); 
   Tämä.tuotteet = odottaaTämä.service.getProductsFromSupplier (supplier[0].supplierId);

10. Poista sisältö src/app/app.component.html tiedosto ja korvaa se seuraavalla:

    <h2> Tuotteet vähiten varastossa alkaen "Taide- ja käsityötoimittaja"</h2>
    <div *ngFor="anna tuote">
    <s> Nimi: {{tuote.nimi}} </s>
    <s> Varastonumero: {{item.inStock}} </s>
    <s> Hinta: ${{item.price}} </s>
    </div>

11. Suorita sovellus verkkoselaimessa käyttämällä palvella komento.

    palvella

12. Avaa verkkosivustosi millä tahansa verkkoselaimella. Oletuksena Angular isännöi sovellusta osoitteessa paikallinen isäntä: 4200.
13. Tietosi eivät näy näytöllä oikein. Napsauta verkkosivua hiiren kakkospainikkeella ja napsauta Tarkastaa avataksesi selaimesi kehittäjätyökalut.
14. Navigoi kohtaan Konsoli -välilehti. Näyttöön tulee virheilmoitus, joka ilmoittaa, että kysely vaatii indeksin.

Kuinka luoda yhdistelmäindeksi kyselyllesi

Firebase luo indeksejä kyselyille, jotka voivat sisältää useita kenttiä. Mukaan Firebase-dokumentaatio, tämä toimii karttana, joten Firebase voi etsiä kyselyn sisältämien kenttien sijainnin.

1. Napsauta konsolissa linkkiä, joka näyttää virheilmoituksen.
2. Kirjaudu Firebase-tilillesi.
3. Näyttöön tulee kehote, jossa sinua pyydetään luomaan hakemisto Firebase-kyselylle. Klikkaa Luo hakemisto.
4. Firebase indeksoi kyselysi käyttämät kentät. Odota muutama minuutti, kunnes tila muuttuu "Rakennus" -tilasta "Käytössä".
5. Päivitä verkkoselaimesi. Kysely suoritetaan ja palauttaa oikean tuloksen etusivulle. Jos avaat konsolin debuggerin selaimesi kehittäjätyökaluilla, virheen ei pitäisi enää olla olemassa.

Kyselyt Firebase-tietokannasta

Firebasen avulla voit luoda NoSQL-tietokannan pilveen. Voit sitten integroida tietokannan kehittämiisi Angular-sovelluksiin. Voit luoda erilaisia ​​kyselyitä tietojen tallentamista, päivittämistä tai poistamista varten. Voit myös luoda kyselyn, joka käyttää useita kenttiä kerralla.

Kun luot useita kenttiä käyttävän kyselyn, sen suorittaminen tuottaa virheen. Sinun on indeksoitava kyselyssä käytetty kenttäyhdistelmä, jotta Firebase voi helposti etsiä sen aina, kun suoritat kyselyn.

Voit myös oppia muista tavoista määrittää NoSQL-tietokanta, kuten tietokannan määrittämisestä MongoDB: n avulla.