Angular & Firestore Kullanımı (Adım Adım Proje Oluşturma)

Bu yazıda yeni bir Angular projesi oluşturup, adım adım Firestore’in nasıl ekleneceğini inceleyeceğiz. Ardından Firestore ile Document listeleme örneği yapacağız. Eğer Firestore hakkında bilgi sahibi değilseniz öncelikle Google Cloud Firestore Nedir? okumanızı öneririm.

1- Öncelikle bir Angular projesi oluşturalım ve Angularfire2 paketini ekleyelim. Bunun içinNode.js terminale aşağıdaki komutları yazıyoruz. (Node.js kurulu değilse buradan indirip kurabilirsiniz)

ng new AngularFirestore //Yeni Angular projesi oluşturuyoruz

cd AngularFirestore //Proje dosyasını aç

npm i firebase angularfire2//Angular için firebase paketini kur

npm i @angular-devkit/core //Bu paket için uyarı görürseniz bunu da kurun. Yoksa kurmanıza gerek yok.

ng serve//web browserde çalıştır

 

2- Firebase bağlantı kurmak için config bilgilerine ihtiyacımız var. Bu sayede Firebase doğrulama yaparak veri okuma yazma izni verebilir. Config bilgilerinize Firebase Console’den   authentication sekmesinden sağ üstte web kurulumu düğmesine tıklayarak ulaşabilirsiniz. Daha sonra environment.js dosyasına aşağıdaki gibi config bilgilerini ekliyelim.

 

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: 'XYZ',
    authDomain: 'XYZ.firebaseapp.com',
    databaseURL: 'https://XYZ.firebaseio.com',
    storageBucket: 'XYZ.appspot.com',
    projectId: 'XYZ' // <--- make sure project ID is here 
  }
};

3- Şimdi Firestore’i modüle tanımlıyalım. Bunun için app.module.ts dosyasını açalım. Aşağıdaki gibi kodları ekleyelim.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';

import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4- Şimdi verileri listeleyelim. app.component.html dosyasına aşağıdaki kodu ekliyelim. Ben Firestore panelimden comments adında bir collection tanımladım. İçine birkaç test verisi girdim.

<ul> 
  <li *ngFor="let comment of comments | async">
    {{ comment | json }}
  </li>
</ul>

5- App.component.ts dosyasına aşağıdaki kodları ekleyerek veri listeleme işlemlerini yapıyoruz.

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public commentsCollection: AngularFirestoreCollection<any>;
  public comments: Observable<any>;
  constructor(private db: AngularFirestore) {

    this.commentsCollection = db.collection('comments', ref => {
      return ref.where('userName', '==', 'yunus');
    });
    this.comments = this.commentsCollection.valueChanges();

  }
}

Daha sonra ng serve ile çalıştırıp web browserde görüntülerseniz verilerin listelendiğini görebilirsiniz.