Firebase’in özelliklerinden biri, bulutta saklanan bir NoSQL veritabanı oluşturabilmenizdir. Bu veri tabanını kendi geliştirdiğiniz uygulamalara da entegre edebilir, veri tabanı içerisinde veri saklayabilir, güncelleyebilir ve silebilirsiniz.

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

Açısal Uygulamanızı ve Firebase Veritabanınızı Kurun

Firebase sorgularınızı yazmadan önce, bir Angular uygulaması ve bir Firebase Veritabanı oluşturmanız gerekecektir . Veritabanınıza bağlanmak için Angular uygulamanızı da yapılandırmanız gerekecektir.

Mevcut bir Angular uygulamanız yoksa , gerekli tüm Angular dosyalarıyla yeni bir proje oluşturmak için ng new komutunu kullanabilirsiniz.

ng new new-angular-app

Firebase’de oturum açarak ve yeni bir Firebase projesi oluşturmak için istemleri izleyerek Angular uygulaması için yeni bir Firebase Veritabanı oluşturun.

Yeni Cloud Firestore Veritabanınızda, bir “Ürün” ve bir “Tedarikçi” için iki koleksiyon (tablo olarak da bilinir) oluşturun. Bir tedarikçi birden fazla ürün tedarik edebilir. Her ürün ayrıca “supplierId” alanı kullanılarak tedarikçiye bağlanır.

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 Stokta var alanlarını rakam olarak giriniz.

Belge Kimliği alanlar

ürün1

isim: “Kurdeleler”

fiyat: 12.99

stokta: 10

ürün kimliği: “P1”

tedarikçi kimliği: “S1”

ürün2

isim: “Balonlar”

fiyat: 1.5

stokta: 2

ürün kimliği: “P2”

tedarikçi kimliği: “S1”

ürün3

isim: “Kağıt”

fiyat: 2,99

stokta: 20

ürün kimliği: “P3”

tedarikçi kimliği: “S1”

ürün4

isim: “Masa”

fiyat: 199

stokta: 1

ürün kimliği: “P4”

tedarikçi kimliği: “S2”

İşte bunun nasıl görünmesi gerektiğini gösteren bir örnek:

Bir Firebase veritabanındaki Ürün Tablosu

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”

yer: “Kaliforniya, ABD”

tedarikçi kimliği: “S1”

tedarikçi2

isim: “İnanılmaz Tablolar”

yer: “Sidney, Avustralya”

tedarikçi kimliği: “S2”

Supplier1 girişi şu şekilde görünmelidir:

Firebase veritabanındaki Tedarikçi Tablosu

Uygulamanıza angular/fire yükleyin .

npm i @angular/fire

Firebase’de Proje ayarlarını açın . Firebase’i Angular uygulamanıza eklemek için köşeli ayraçlar logosuna tıklayın.

Yapılandırma için açılı ayraçları gösteren proje ayarları

Firebase size, Angular uygulamanızı Firebase Veritabanına bağlamak için kullanabileceğiniz yapılandırma ayrıntılarını sağlayacaktır.

Uygulamaya bağlanmak için Firebase Config

Environments/environment.ts içindeki içeriği aşağıdaki kodla değiştirin. firebaseConfig içindeki değerleri değiştirmeniz gerekecek . Bunları, önceki adımda Firebase’in size sağladığı yapılandırmayla eşleşecek şekilde değiştirin.

export const environment = {

production: false,

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”

}

};

Ortamı, Angular Firebase modülleriyle birlikte yukarıdan src/app/app.module.ts içine aktarın .

import { environment } from “../environments/environment”;

import { AngularFireModule } from ‘@angular/fire/compat’;

import { AngularFirestoreModule } from “@angular/fire/compat/firestore”;

Firebase modüllerini import dizisine ekleyin:

AngularFirestoreModule,

AngularFireModule.initializeApp(environment.firebaseConfig)

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

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

“Hizmetler” adlı yeni bir klasör oluşturun. Klasörün içinde “service.ts” adlı yeni bir dosya oluşturun.

Açısal yeni hizmetler dosyası

AngularFirestore içe aktarma, oluşturucu ve sınıfı dosyaya ekleyin.

import { Injectable } from ‘@angular/core’;

import { AngularFirestore } from ‘@angular/fire/compat/firestore’;

@Injectable({

providedIn: ‘root’

})

export class Service {

constructor(private db: AngularFirestore) { }

}

Bu sorgu örneğinde, ürünleri bir Tedarikçinin adına göre listeleyin. Ek olarak, listeyi yalnızca en düşük stoğa sahip ürünü gösterecek şekilde filtreleyin. Firebase rasyonel bir Database olmadığı için iki ayrı tabloyu birden fazla sorgu kullanarak sorgulamamız gerekecek.

Bunu yapmak için, ilk sorguyu işlemek üzere getSupplier() adlı yeni bir işlev oluşturun . İşlev, “Tedarikçi” tablosunda adla eşleşen satırı döndürür.

getSupplier(name: string) {

return new Promise<any>((resolve)=> {

this.db.collection(‘Supplier’, ref => ref.where(‘name’, ‘==’, name)).valueChanges().subscribe(supplier => resolve(supplier))

})

}

getProductsFromSupplier() adlı başka bir işlev oluşturun . Bu sorgu, belirli bir tedarikçiyle ilişkili Ürünler için veri tabanını sorgular. Ayrıca sorgu, sonuçları “Stokta” alanına göre de sıralar ve yalnızca listedeki ilk kaydı görüntüler. Başka bir deyişle, belirli bir tedarikçi için ürünü en düşük “Stokta” sayısına sahip olarak iade edecektir.

getProductsFromSupplier(supplierId: string) {

return new Promise<any>((resolve)=> {

this.db.collection(‘Product’, ref => ref.where(‘supplierId’, ‘==’, supplierId).orderBy(‘inStock’).startAt(0).limit(1)).valueChanges().subscribe(product => resolve(product))

})

}

src/app/app.component.ts dosyasında hizmeti içe aktarın.

import { Service } from ‘src/app/services/service’;

AppComponent sınıfının içine bir oluşturucu ekleyin ve hizmeti oluşturucuya ekleyin.

constructor(private service: Service) { }

getProductStock () adlı yeni bir işlev oluşturun . Bu işlev, ürünü belirli bir tedarikçinin sağladığı en düşük stokla yazdırır. ngOnInit() işlevinde yeni işlevi çağırdığınızdan ve sonucu depolamak için bir değişken bildirdiğinizden emin olun.

products: any;

ngOnInit(): void {

this.getProductStock();

}

async getProductStock() {

}

getProductStock () işlevinin içinde, services dosyasındaki iki sorguyu kullanın. Ada dayalı bir tedarikçinin kaydını almak için ilk sorguyu kullanın. Ardından, o tedarikçinin en düşük stoklu ürününü bulan ikinci sorgu için bir bağımsız değişken olarak tedarikçi kimliği kullanın.

let supplier = await this.service.getSupplier(‘Arts and Crafts Supplier’);

this.products = await this.service.getProductsFromSupplier(supplier[0].supplierId);

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

<h2> Products with lowest stock from “Arts and Crafts Supplier” </h2>

<div *ngFor=”let item of products”>

<p> Name: {{item.name}} </p>

<p> Number in stock: {{item.inStock}} </p>

<p> Price: ${{item.price}} </p>

</div>

Uygulamayı bir web tarayıcısında ng serve komutunu kullanarak çalıştırın.

ng serve

Herhangi bir web tarayıcısını kullanarak web sitenizi açın. Varsayılan olarak Angular, uygulamayı localhost:4200 adresinde barındırır .

Verileriniz ekranda doğru şekilde görüntülenmeyecektir. Web sayfasına sağ tıklayın ve tarayıcınızın geliştirici araçlarını açmak için İncele’ye tıklayın.

İncele seçeneğiyle Chrome tarayıcıda sağ tıklayın

Konsol sekmesine gidin . Sorgunun bir dizin gerektireceğini bildirmek için bir hata görüntülenecektir.

Sorguları dizine eklemenizi isteyen Chrome geliştirici konsolunda hata

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

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

Konsolda, hatanın görüntülediği bağlantıya tıklayın.

Firebase hesabınızda oturum açın.

Firebase sorgusu için bir dizin oluşturmanızı isteyen bir bilgi istemi görüntülenecektir. Dizin oluştur’a tıklayın .

Firebase’de bileşik dizin oluşturma

Firebase, sorgunuzun kullandığı alanları dizine ekler. Durum “Bina”dan “Etkin”e değişene kadar birkaç dakika bekleyin.

Firebase’deki bileşik dizinlerin listesi

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.

En düşük stoğa sahip öğe için verileri görüntüleyen Chrome web sayfası

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ı sorgu türleri 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 hata verir. Sorguda kullanılan alan birleşimini dizine eklemeniz gerekecek, böylece sorguyu her çalıştırdığınızda Firebase kolayca arayabilecektir.

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