Angular'da Karmaşık Firebase Sorguları Nasıl Kullanılır?

Firebase'in özelliklerinden biri, bulutta depolanan bir NoSQL veritabanı oluşturabilmenizdir. Ayrıca bu veri tabanını geliştirdiğiniz uygulamalara entegre edebilir, veri tabanı içerisinde veri depolayabilir, güncelleyebilir ve silebilirsiniz.

Firebase veritabanını Angular uygulamanızdan da sorgulayabilirsiniz. Firebase, birden çok alan kullanan bir sorgu için alan kombinasyonlarını endekslemenizi gerektirir. Bu, sorguyu başka bir zamanda aradığınızda Firebase'in bunları kolayca aramasını sağlar.

Angular Uygulamanızı ve Firebase Veritabanınızı Kurun

Firebase sorgularınızı yazmadan önce, Açısal uygulama ve bir Firebase Veritabanı. Veritabanınıza bağlanmak için Angular uygulamanızı da yapılandırmanız gerekecektir.

1. Mevcut bir Angular uygulamanız yoksa, yeni gerekli tüm Angular dosyalarıyla yeni bir proje oluşturma komutu.

   ng yeniyeni-açısal-uygulama

instagram viewer
2. Oluşturmak Angular uygulaması için yeni Firebase Veritabanı Firebase'de oturum açarak ve yeni bir Firebase projesi oluşturmak için talimatları izleyerek.
3. Yeni Cloud Firestore Veritabanınızda, "Ürün" ve "Tedarikçi" için iki koleksiyon (tablo olarak da bilinir) oluşturun. Bir tedarikçi birden fazla ürün tedarik edebilir. Her ürün aynı zamanda "supplierId" alanını kullanarak tedarikçiye bağlanır.
4. Aşağıdaki verileri "Ürün" tablosuna girin. Ad, ürün kimliği ve tedarikçi kimliği alanlarını dize olarak girin. Fiyat ve inStock alanlarını sayı olarak girin.

   Belge kimliği	Alanlar
   ürün1	isim: "Kurdeleler" fiyat: 12.99 Stok: 10 ürün kimliği: "P1" tedarikçi kimliği: "S1"
   ürün2	isim: "Balonlar" fiyat: 1.5 Stok: 2 ürün kimliği: "P2" tedarikçi kimliği: "S1"
   ürün3	isim: "Kağıt" fiyat: 2.99 Stok: 20 ürün kimliği: "P3" tedarikçi kimliği: "S1"
   ürün4	isim: "Tablo" fiyat: 199 Stok girişi: 1 ürün kimliği: "P4" tedarikçi kimliği: "S2"

   Bunun nasıl görünmesi gerektiğini gösteren bir örnek:
5. Aşağıdaki verileri "Tedarikçi" tablosuna girin. Tüm alanları dize olarak girin.

   Belge kimliği	Alanlar
   tedarikçi1	isim: "Sanat ve El Sanatları Tedarikçisi" konum: "Kaliforniya, ABD" tedarikçi kimliği: "S1"
   tedarikçi2	isim: "Muhteşem Tablolar" konum: "Sidney, Avustralya" tedarikçi kimliği: "S2"

   Tedarikçi1 girişi şöyle görünmelidir:
6. Düzenlemek açısal/ateş uygulamanıza girin.

   npm ben @açısal/fire

7. Firebase'de açın Proje ayarları. Firebase'i Angular uygulamanıza eklemek için açılı ayraç logosuna tıklayın.
8. Firebase, Angular uygulamanızı Firebase Veritabanına bağlamak için kullanabileceğiniz yapılandırma ayrıntılarını size sağlayacaktır.
9. İçindekileri değiştir ortamlar/çevre.ts aşağıdaki kod ile. içindeki değerleri değiştirmeniz gerekecektir. firebaseConfig. Bunları, Firebase'in önceki adımda size sağladığı yapılandırmayla eşleşecek şekilde değiştirin.

   ihracatconst çevre = {
    üretme: yanlış,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIANDIM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase sorguları",
    storageBucket: "muo-firebase-queries.appspot.com",
    mesajlaşmaSenderId: "569911365044",
    uygulama kimliği: "1:569911365044:ağ:9557bfef800caa5cdaf6e1"
    }
   };

10. Angular Firebase modülleriyle birlikte ortamı yukarıdan içe aktarın. src/app/app.module.ts.

    içe aktarmak { çevre } itibaren "../ortamlar/ortam";
    içe aktarmak { AngularFireModule } itibaren '@angular/fire/compat';
    içe aktarmak { AngularFirestoreModule } itibaren "@angular/fire/compat/firestore";

11. Firebase modüllerini imports dizisine ekleyin:

    AngularFirestoreModül,
    AngularFireModule.initializeApp(çevre.firebaseConfig)

Hizmetler Dosyasında Karmaşık Bir Firebase Sorgusu Nasıl Yazılır

Bir hizmetler dosyası kullanarak Firebase veritabanınızdaki tabloları sorgulayabilirsiniz.

1. "Hizmetler" adlı yeni bir klasör oluşturun. Klasörün içinde "service.ts" adında yeni bir dosya oluşturun.
2. Dosyaya AngularFirestore içe aktarma, yapıcı ve sınıfı ekleyin.

   içe aktarmak { Enjekte edilebilir } itibaren '@açısal/çekirdek';
   içe aktarmak { AngularFirestore } itibaren '@angular/fire/compat/firestore';
   @Enjekte edilebilir({
    Sağlanan: 'kök'
   })
   ihracatsınıfHizmet{
   yapıcı(özel veritabanı: AngularFirestore) { }
   }

3. Bu sorgu örneğinde, bir Tedarikçinin adına göre ürünleri listeleyin. Ek olarak, listeyi yalnızca en düşük stoğa sahip öğeyi gösterecek şekilde filtreleyin. Firebase rasyonel bir Veritabanı olmadığı için iki ayrı tabloyu birden fazla sorgu kullanarak sorgulamamız gerekecek.
4. Bunu yapmak için, adlı yeni bir işlev oluşturun. getTedarikçi(), ilk sorguyu işlemek için. İşlev, "Tedarikçi" tablosundaki adla eşleşen satırı döndürür.

   getSupplier (ad: dize) {
   dönüşyeniSöz vermek((çöz)=> {
    this.db.collection('Tedarikçi', referans => referans.nerede('isim', '==', ad))).valueChanges().subscribe (tedarikçi => çözmek (tedarikçi))
    })
    }

5. adlı başka bir işlev oluşturun getProductsFromTedarikçi(). Bu sorgu, belirli bir tedarikçiyle ilişkili Ürünler için veritabanını sorgular. Ayrıca, sorgu ayrıca sonuçları "inStock" alanına göre sıralar ve yalnızca listedeki ilk kaydı görüntüler. Başka bir deyişle, ürünü belirli bir tedarikçi için en düşük "Stok" sayısıyla iade edecektir.

   getProductsFromSupplier (supplierId: string) {
   dönüşyeniSöz vermek((çöz)=> {
    this.db.collection('Ürün', referans => referans.nerede('tedarikçi kimliği', '==', tedarikçi kimliği).orderBy('Stokta var'.startAt (0).limit (1)).valueChanges().subscribe (ürün => çözmek (ürün))
    })
    }

6. İçinde src/app/app.component.ts dosyası, hizmeti içe aktarın.

   içe aktarmak { Hizmet } itibaren 'src/app/services/service';

7. AppComponent sınıfının içine bir yapıcı ekleyin ve hizmeti yapıcıya ekleyin.

   yapıcı(özel servis: Servis) { }

8. adlı yeni bir işlev oluşturun. ÜrünStokunu al(). Bu işlev, belirli bir tedarikçinin sağladığı en düşük stoklu ürünü yazdıracaktır. içindeki yeni işlevi çağırdığınızdan emin olun. ngOnInit() işlevi ve sonucu saklamak için bir değişken bildirin.

   ürünler: herhangi biri;
   ngOnInit(): geçersiz {
   Bu.getProductStock();
   }
   zaman uyumsuz getProductStock() {
   }

9. İçinde getProductStock() işlev, hizmetler dosyasındaki iki sorguyu kullanın. Bir tedarikçinin adına göre kaydını almak için ilk sorguyu kullanın. Ardından, o tedarikçiden en düşük stoğa sahip ürünü bulan ikinci sorgu için bir argüman olarak tedarikçi kimliğini kullanın.

   İzin Vermek tedarikçi = beklemekBu.service.getSupplier('Sanat ve El Sanatları Tedarikçisi'); 
   Bu.ürünler = beklemekBu.service.getProductsFromSupplier (tedarikçi[0].tedarikçi kimliği);

10. içindekileri kaldırın src/app/app.component.html dosyasını açın ve aşağıdakiyle değiştirin:

    <h2> En düşük stoklu ürünler "Sanat ve El Sanatları Tedarikçisi"</h2>
    <div *ngFor="ürünlerin ürün izin">
    <p> Ad: {{item.name}} </p>
    <p> Stoktaki sayı: {{item.inStock}} </p>
    <p> Fiyat: ${{item.price}} </p>
    </div>

11. Uygulamayı kullanarak bir web tarayıcısında çalıştırın. hizmet etmek emretmek.

    hizmet etmek

12. Herhangi bir web tarayıcısını kullanarak web sitenizi açın. Varsayılan olarak, Angular uygulamayı şu adreste barındırır: yerel ana bilgisayar: 4200.
13. Verileriniz ekranda doğru şekilde görüntülenmeyecektir. Web sayfasına sağ tıklayın ve tıklayın İncelemek tarayıcınızın geliştirici araçlarını açmak için
14. Şuraya gidin: Konsol sekme. Sorgunun bir dizin gerektireceğini size bildirmek için bir hata görüntülenecektir.

Sorgunuz için Bileşik Dizin Nasıl Oluşturulur

Firebase, birden çok alan içerebilen sorgular için dizinler oluşturur. Göre Firebase belgeleri, bu bir harita görevi görür, böylece Firebase sorguda yer alan alanların konumunu arayabilir.

1. Konsolda, hatanın görüntülediği bağlantıya tıklayın.
2. Firebase hesabınızda oturum açın.
3. Firebase sorgusu için bir dizin oluşturmanızı isteyen bir istem görüntülenecektir. Tıklamak Dizin oluştur.
4. Firebase, sorgunuzun kullandığı alanları dizine ekler. Durum "Bina"dan "Etkin"e değişene kadar birkaç dakika bekleyin.
5. Web tarayıcınızı yenileyin. Sorgu çalışacak ve ana sayfada doğru sonucu döndürecektir. Tarayıcınızın geliştirici araçlarını kullanarak konsol hata ayıklayıcısını açarsanız, hata artık orada olmamalıdır.

Firebase Veritabanınızı Sorgulama

Firebase, bulutta bir NoSQL veritabanı oluşturmanıza olanak tanır. Daha sonra bu veritabanını geliştirmekte olduğunuz Angular uygulamalarına entegre edebilirsiniz. Verileri depolamak, güncellemek veya silmek için farklı türde sorgular oluşturabilirsiniz. Aynı anda birden çok alan kullanan bir sorgu da oluşturabilirsiniz.

Birden çok alan kullanan bir sorgu oluşturduğunuzda, onu çalıştırmaya çalışmak bir hata üretecektir. Firebase'in sorguyu çalıştırdığınızda kolayca bakabilmesi için sorguda kullanılan alan kombinasyonunu dizine eklemeniz gerekir.

Ayrıca MongoDB kullanarak bir veritabanının nasıl kurulacağı gibi bir NoSQL Veritabanı kurmanın diğer yollarını da öğrenebilirsiniz.