Angular Kullanarak Firebase Veritabanından Veri Nasıl Depolanır, Güncellenir, Silinir ve Alınır

Firebase, bir uygulama oluşturmaya ve ölçeklendirmeye yardımcı olmak için size çok sayıda hizmet sağlayan bir platformdur. Bu özelliklerden bazıları, barındırma hizmetleri, veri depolama ve veri analitiğini izleme yeteneğini içerir.

Bu eğitim, temel olarak bir Firebase veritabanına nasıl veri oluşturulacağına ve veri ekleneceğine ve yerel bir Angular uygulamasından veritabanına oluşturma, okuma, yazma ve silme işlemlerinin nasıl gerçekleştirileceğine odaklanır.

Firebase Veritabanına Nasıl Veri Oluşturulur ve Eklenir

Halihazırda yerel olarak kurulmuş ve çalışan bir Angular uygulamanız olduğunu varsayarsak, verileri depolamak ve bunlara erişmek için bir Firebase veritabanına bağlı olması gerekir. Angular'a aşina değilseniz, hakkında daha fazla bilgi edinebilirsiniz. Açısal kavramlar, bileşenler ve bir Angular projesinin genel yapısı.

Halihazırda bir Firebase Veritabanınız yoksa, Firebase'de oturum açmak ve istemleri takip etmek için Google hesabı kimlik bilgilerinizi kullanabilirsiniz. Bu ayarlandıktan sonra bir proje oluşturun:

1. İtibaren Firebase'in ana sayfası, Seçme Konsola Git sitenin sağ üst köşesinde.
2. "Firebase projeleriniz" altında, Proje Ekle.
3. Yeni bir proje oluşturmak için istemleri izleyin.
4. Proje tamamlandıktan sonra açılacaktır. Ekranın sol tarafında Firebase'in sağladığı özellikleri listeleyen bir panel var. görene kadar simgelerin üzerine gelin Firestore Veritabanıöğesini seçin ve seçin.
5. Seçme Veritabanı yarat, ve bir veritabanı oluşturmak için istemleri izleyin.
6. Güvenlik kurallarını seçerken, Test modunda başla. Bu, verilerin daha güvenli olmasını sağlamak için daha sonra değiştirilebilir. Aşağıdaki Firestore güvenlik kuralları hakkında daha fazla bilgi edinebilirsiniz. Firebase Belgeleri.
7. Tamamlandığında, veritabanı açılacaktır. Veritabanı yapısı, temelde veritabanı tablolarıyla aynı kavram olan Koleksiyonları kullanır. Örneğin, biri hesap bilgilerini depolamak için diğeri kullanıcı bilgilerini depolamak için iki tabloya ihtiyacınız varsa, Hesap ve Kullanıcı adlı iki koleksiyon oluşturursunuz.
8. Seçme Koleksiyona başla ve "Kullanıcı" adlı bir Koleksiyon Kimliği ekleyin.
9. Bir kullanıcı hakkında bilgi içeren ilk kaydı ekleyin. Tıklamak Alan ekle üç yeni alan eklemek için: firstName (string), lastName (string) ve vipMember (boolean). Belge Kimliği otomatik olarak oluşturulabilir.
10. Tıklamak Kayıt etmek.
11. "Kullanıcı" koleksiyonuna daha fazla kayıt eklemek için Belge ekle (belge ekle, yeni bir kayıt veya kullanıcı eklemeye eşdeğerdir). Aynı üç alana sahip dört kullanıcı daha ekleyin.

Veritabanı şimdi bazı test verileriyle ayarlandı.

Firebase'i Angular Uygulamanıza Nasıl Entegre Edersiniz?

Bu verilere yerel Angular uygulamanızda erişmek için, önce Firebase veritabanına bağlanmak için bazı uygulama ayarlarını yapılandırın:

1. Firebase'de soldaki panele gidin ve Projeye Genel Bakış.
2. seçin ağ düğmesi (Açılı ayraçlarla gösterilir).
3. Uygulamanın adını ekleyerek yerel uygulamanızı kaydedin.
4. Firebase'i yerel Angular uygulamanıza yükleyin.

   npm ve firebase
   

5. Firebase daha sonra bazı yapılandırma ayrıntılarını görüntüler. Bu ayrıntıları kaydedin ve tıklayın Konsola Devam Et.
6. Önceki adımda sağlanan ayrıntılara göre, aşağıdaki kodu Angular uygulamasında çevre.prod.ts ve ortam.ts'ye kopyalayın.

   dışa aktarma const ortamı = {
    üretim: doğru,
    firebaseConfig: {
    apiKey: "api-anahtarınız",
    authDomain: "auth-domain",
    proje Kimliği: "proje-kimliğiniz",
    depolamaBucket: "depolama-kovanız",
    mesajlaşmaSenderId: "mesajlaşma-gönderen-kimliğiniz",
    appId: "api-kimliğiniz",
    MeasurementId: "ölçüm-kimliğiniz"
    }
   };
   

7. AngularFirestore'dan @angular/yangın/firestore Firebase'i Angular'da yapılandırmak için kullanılacaktır. AngularFirestore'un Angular Sürüm 9 ve üzeri ile uyumlu olmadığını unutmayın. Yerel Angular uygulamasında şunu çalıştırın:

   npm i @açısal/ateş
   

8. Firestore ve ortam modüllerini app.module.ts içindeki içe aktarmalar bölümüne ekleyin.

   { AngularFireModule } öğesini "@angular/fire" öğesinden içe aktarın;
   { AngularFirestoreModule } öğesini "@angular/fire/firestore" öğesinden içe aktarın;
   "../environments/environment" konumundan { çevre } içe aktar;
   

9. Firestore modüllerinin de app.module.ts içindeki imports dizisine dahil edilmesi gerekir.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModül,

Bir Hizmet Kullanarak Firebase'den Veri Alma

Bir veya daha fazlasına sahip olmak genellikle iyi bir uygulamadır. servisler.ts özellikle veritabanıyla etkileşim kurmak için kullandığınız dosyalar. Hizmetler dosyasına eklediğiniz işlevler daha sonra diğer TypeScript dosyalarında, sayfalarında veya uygulama genelindeki diğer bileşenlerde çağrılabilir.

1. içinde service.ts adlı bir dosya oluşturun. kaynak/uygulama/hizmetler dosya.
2. AngularFirestore modülünü içe aktarma bölümüne ekleyin ve yapıcıya dahil edin.

   { Enjekte edilebilir } '@angular/core'dan içe aktarın;
   { AngularFirestore } dosyasını '@angular/fire/firestore'dan içe aktarın;
   @Enjekte edilebilir({
    sağlananIn: 'kök'
   })
   ihracat sınıfı Hizmet {
    yapıcı (özel db: AngularFirestore) { }
   }
   

3. Tüm kullanıcıların listesini içeren bir söz veren bir işlev ekleyin. "this.db.collection('Kullanıcı')", veritabanındaki "Kullanıcı" koleksiyonuna atıfta bulunuyor.

   getAllUsers() {
    yeni söz ver((çöz)=> {
    this.db.collection('Kullanıcı').valueChanges({ idField: 'id' }).subscribe (kullanıcılar => çözümle (kullanıcılar));
    })
   }
   

4. Bu işlevi başka bir TypeScript dosyasında kullanmak için yeni hizmeti içe aktarın ve yapıcıya ekleyin.

   { Service } dosyasını 'src/app/services/service'den içe aktarın
   yapıcı (özel hizmet: Hizmet) {}
   

5. Services dosyasında oluşturulan işlevi kullanan tüm kullanıcıların listesini alın.

   zaman uyumsuz getUsers() {
    this.allUsers = this.service.getAllUsers() bekleyin;
    konsol.log (this.allUsers);
   }
   

Firebase Veritabanına Yeni Kayıt Nasıl Eklenir

Firebase Veritabanına bir kullanıcı için yeni bir kayıt ekleyin.

1. Services.ts'de, yeni bir kayıt oluşturmak için yeni bir işlev ekleyin. Bu işlev, yeni bir kullanıcının kimliğini ve tüm ayrıntılarını alır. Bu bilgileri Firebase'e göndermek ve yeni bir kayıt oluşturmak için Firestore'un set işlevini kullanır.

   addNewUser (_newId: herhangi biri, _fName: dize, _lName: dize, _vip: boolean) {
    this.db.collection("Kullanıcı").doc (_newId).set({firstName: _fName, lastName: _lName, vipMember: _vip});
   }

2. Başka bir TypeScript dosyasında addNewUser() işlevini çağırın. Hizmeti içe aktarmayı ve daha önce gösterildiği gibi yapıcıya eklemeyi unutmayın. Kullanıcı için yeni kimliği oluşturmak için rastgele bir kimlik oluşturucu kullanmaktan çekinmeyin.

   this.service.addNewUser("62289836", "Jane", "Doe", doğru);
   

Firebase Veritabanındaki Veriler Nasıl Güncellenir?

Firebase'in birçok işlevi vardır. onu mevcut en iyi araçlardan biri yap. Belirli bir kayıttaki belirli alanları güncellemek için Firestore'un güncelleme işlevini kullanın.

1. service.ts dosyasında updateUserFirstName() adlı bir işlev oluşturun. Bu işlev, seçilen bir kullanıcı kaydının ilk adını güncelleyecektir. İşlev, güncellenmesi gereken kaydın kimliğini ve kullanıcının ilk adının yeni değerini alır.

   updateUserFirstName (_id: herhangi biri, _firstName: dize) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName});
   }

2. Aynı kayıt için birden çok alanı güncellemek için Firestore'un güncelleme işlevine girilen alanları genişletmeniz yeterlidir. Bunu da yeni bir değerle güncellemek için sadece firstName yerine lastName ekleyin.

   updateUserFullName (_id: herhangi biri, _firstName: string, _lastName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Yukarıdaki işlevlerden herhangi biri diğer TypeScript dosyalarında kullanılabilir.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

Firebase Veritabanından Bir Kayıt Nasıl Silinir

Bir kaydı silmek için Firestore'un silme işlevini kullanın.

1. service.ts dosyasında, deleteUser() adlı bir işlev oluşturun. Bu işlev, silinmesi gereken kaydın kimliğini alır.

   deleteUser (_id: herhangi biri) {
    this.db.doc(`Kullanıcı/${_id}`).delete();
    }
   

2. Yukarıdaki işlev daha sonra diğer TypeScript dosyalarında kullanılabilir.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Sorguları ve Filtreleri Kullanarak Firebase Verilerini Alın

"Nerede" filtresi, belirli bir koşula göre döndürülen sonuçları filtreleyebilir.

1. services.ts'de, tüm VIP kullanıcılarını alan bir işlev oluşturun (bu, vipMember alanı true olarak ayarlanmışsa geçerlidir). Bu, aşağıdaki Firebase çağrısının "ref.where('vipMember', '==', true)" bölümü ile belirtilir.

   getAllVipMembers() {
    yeni söz ver((çöz)=> {
    this.db.collection('Kullanıcı', ref => ref.where('vipMember', '==', true))).valueChanges().subscribe (kullanıcılar => çözümle (kullanıcılar))
    })
    }

2. Bu işlevi başka bir TypeseScript dosyasında kullanın.

   zaman uyumsuz getAllVipMembers() {
    this.vipUsers = this.service.getAllVipMembers() bekleyin;
    konsol.log (this.vipUsers);
    }

3. Sorgu, Sıralama Ölçütü, Başlangıç ​​Noktası veya Sınırlama gibi diğer işlemleri eklemek için değiştirilebilir. Services.ts'deki getAllVipMembers() işlevini soyadına göre sıralayacak şekilde değiştirin. Order By işlemi, Firebase'de bir dizin oluşturulmasını gerektirebilir. Bu durumda, konsoldaki hata mesajında ​​verilen bağlantıya tıklayın.

   getAllVipMembers() {
    yeni söz ver((çöz)=> {
    this.db.collection('Kullanıcı', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (kullanıcılar => çözümle (kullanıcılar) )
    })
    }

4. Sorguyu yalnızca ilk üç kaydı döndürecek şekilde değiştirin. Bunun için Start At ve Limit işlemleri kullanılabilir. Bu, sayfa başına belirli sayıda kayıt gösterildiğinde sayfalama uygulamanız gerekiyorsa kullanışlıdır.

   getAllVipMembers() {
    yeni söz ver((çöz)=> {
    this.db.collection('Kullanıcı', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .abone ol (kullanıcılar => çöz (kullanıcılar))
    })
    }

Angular Uygulamasında Firebase'e Daha Fazla Veri ve Daha Fazla İstek Ekleyin

Bir Firebase veritabanından veri almaya çalışırken keşfedebileceğiniz birçok başka sorgu kombinasyonu vardır. Umarım şimdi basit bir Firebase veritabanını nasıl kuracağınızı, onu yerel bir Angular uygulamasına nasıl bağlayacağınızı ve veritabanına nasıl okuyup yazacağınızı anlamışsınızdır.

Firebase'in sağladığı diğer hizmetler hakkında da daha fazla bilgi edinebilirsiniz. Firebase, Angular ile entegre edebileceğiniz birçok platformdan biridir ve ister başlangıç ​​seviyesinde ister ileri seviyede olun, her zaman öğrenecek çok şey vardır.

Yeni Başlayanlar ve İleri Düzey Kullanıcılar için En İyi 8 Angular Kurs

Sonrakini Oku

Yazar hakkında