Angular 7 & Firebase Entegrasyonu

Merhaba,

Önümüzdeki yazılarda Firebase Authentication, Firebase Realtime Database, Firebase Storage ve Firebase Hosting hizmetlerini nasıl kullanacağımızı anlatmaya çalışacağım. Bu sebeple Angular 7 projemize Firebase entegrasyonunu nasıl yapacağımız konusuna kısa bir giriş yapmak istiyorum.

1. Adım

Firebase Console adresine gidip bir proje oluşturuyoruz ve uygulama ekleden Web için bizim projemize özel olan ayar bilgilerini alacağız.

  var config = {
    apiKey: "xxxxxxxxx",
    authDomain: "testt-xxxxxxxxxxx.firebaseapp.com",
    databaseURL: "xxxxxxxxxx",
    projectId: "xxxxxxxxx",
    storageBucket: "xxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxx"
  };

— Bu bilgi projemize Firebase Entegrasyonu yaparken işimize yarayacak. —

2. Adım

Yeni bir Angular 7 projesi oluşturuyoruz ve Firebase kütüphanesini ekliyoruz

npm install firebase @angular/fire --save

3. Adım

Angular projemide src klasörünün altında bulunan environments klasörünün altındaki environment.ts ve environment.prod.ts dosyalarına Firebase ayarlarını ekliyoruz.

// environment.ts
// Öncesi
export const environment = {
    production = false;
}
// Sonrası
export const environment = {
    production = false;
    var config = {
        apiKey: "xxxxxxxxx",
        authDomain: "testt-xxxxxxxxxxx.firebaseapp.com",
        databaseURL: "xxxxxxxxxx",
        projectId: "xxxxxxxxx",
        storageBucket: "xxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxxxx"
    };
}
// environment.prod.ts
// Öncesi
export const environment = {
    production = true;
}
// Sonrası
export const environment = {
    production = true;
    var config = {
        apiKey: "xxxxxxxxx",
        authDomain: "testt-xxxxxxxxxxx.firebaseapp.com",
        databaseURL: "xxxxxxxxxx",
        projectId: "xxxxxxxxx",
        storageBucket: "xxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxxxx"
    };
}

4. Adım (Son Adım)

// app.module.ts
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
export const MODULES = [
    ...
    AngularFireModule.initializeApp(environment.firebase)
    ...
];

Angular 7 projemize Firebase Entegrasyonu tamamlandı. Sonraki yazılarımda bu yazımı referans alarak devam edeceğim.