Angular Fire İle Firebase Backend Entegrasyonu

Adı : Angular Fire İle Firebase Backend Entegrasyonu

Angular, web uygulamaları oluşturmak için kullanılan popüler bir JavaScript frameworküdür. Firebase ise, Google tarafından sağlanan bir bulut tabanlı backend çözümüdür.

Angular uygulamaları, Firebase'i backend olarak kullanarak veri saklama, kimlik doğrulama ve gerçek zamanlı işlevsellik gibi birçok özelliğe sahip olabilir. Bu amaçla AngularFire, Firebase ile entegrasyonu kolaylaştıran bir Angular kütüphanesidir.

Bu yazıda, AngularFire ile Firebase backend entegrasyonunu detaylı bir şekilde ele alacağız ve örneklerle destekleyeceğiz.

AngularFire ile Firebase Entegrasyonu

AngularFire, Firebase bağlantısı için kullanılan bir Angular kütüphanesidir. Bu kütüphane sayesinde, Firebase'i kolayca kullanabilir ve Angular uygulamalarınızda Firebase bağlantısını hızlı bir şekilde yapabilirsiniz.

AngularFire kurulumu

AngularFire kurulumu oldukça basittir. İlk olarak, projemize AngularFire ve Firebase kütüphanelerini eklememiz gerekiyor. Bunun için, projemizin kök klasörüne giderek şu komutu çalıştırabiliriz:

```
npm install firebase @angular/fire
```

Bu komut, projemize AngularFire ve Firebase kütüphanelerini ekler.

Ardından, app.module.ts dosyasını düzenleyerek AngularFireModule'u import etmemiz gerekiyor. Bunun için, şu kodu ekleyebiliriz:

```typescript
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';

@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebaseConfig)
]
})
export class AppModule { }
```

Bu kod içindeki environment.firebaseConfig, projemizin src/environments klasörü altında bulunan environment.ts dosyasında tanımlıdır. Bu dosyaya firebase projemizin ayarlarını ekleyebiliriz. Örneğin:

```typescript
export const environment = {
production: false,
firebaseConfig: {
apiKey: \"API_KEY\",
authDomain: \"APP_NAME.firebaseapp.com\",
databaseURL: \"https://APP_NAME.firebaseio.com\",
projectId: \"PROJECT_ID\",
storageBucket: \"APP_NAME.appspot.com\",
messagingSenderId: \"SENDER_ID\",
appId: \"APP_ID\"
}
};
```

Bu kod bloğunda, API_KEY, APP_NAME, PROJECT_ID, SENDER_ID ve APP_ID kısımlarını firebase projemize özgü bilgilerle değiştirmemiz gerekiyor.

Firebase Firestore Kullanımı

Firebase Firestore, gerçek zamanlı veri saklama ve senkronizasyonunu sağlayan NoSQL bir veritabanıdır. Firebase Firestore'u kullanmak için, AngularFireDatabase kütüphanesini kullanabiliriz.

Örnek olarak, bir to-do uygulaması yapalım. Bu uygulamada, kullanıcılar to-do listesi ekleyebilir ve listelerini güncelleyebilir. İlk olarak, app.component.ts dosyasına Firestore servisi için gerekli importları eklememiz gerekiyor:

```typescript
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
todos: Observable;

constructor(private firestore: AngularFirestore) {}

ngOnInit() {
this.todos = this.firestore.collection('todos').valueChanges({ idField: 'id' });
}
}
```

Bu kod bloğunda, ilk olarak AngularFirestore'u ve Observable'ı import ettik. Ardından, AppComponent sınıfı içinde todos adında bir Observable değişkeni oluşturduk. En sonunda da constructor içinde AngularFirestore servisini aldık ve ngOnInit() metodunda collection ve valueChanges metodlarını kullanarak Firestore veritabanındaki todos collection'ını izliyoruz.

Şimdi, app.component.html dosyasına Firebase Firestore'tan gelen verileri yerleştirmek için şu kod bloğunu ekleyebiliriz:

```html

• 
  {{todo.title}}
  

```

Bu kod bloğunda, todos değişkenimizi ngFor ile gezerek veritabanından gelen title alanlarını listelemiş olduk.

Firebase Authentication Kullanımı

Firebase Authentication, kullanıcı kimlik doğrulama çözümlerini sağlayan Firebase özelliğidir. Firebase Authentication, kullanıcılarımızın uygulamamızda oturum açmalarını, kayıt olmalarını ve parolalarını sıfırlamalarını sağlar.

Firebase Authentication kullanmak için, AngularFireAuth kütüphanesini kullanabiliriz.

Örnek olarak, Firebase Authentication kullanarak bir to-do uygulaması yapalım. Bu uygulamada, kullanıcılar parola ile oturum açabilirler. İlk olarak, app.component.ts dosyasına AuthService için gerekli importları eklememiz gerekiyor:

```typescript
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({
providedIn: 'root'
})
export class AuthService {

constructor(public auth: AngularFireAuth) { }

signIn(email: string, password: string) {
return this.auth.signInWithEmailAndPassword(email, password);
}

signUp(email: string, password: string) {
return this.auth.createUserWithEmailAndPassword(email, password);
}

resetPassword(email: string) {
return this.auth.sendPasswordResetEmail(email);
}

signOut() {
return this.auth.signOut();
}
}
```

Bu kod bloğunda, ilk olarak AngularFireAuth'u import ettik. Ardından, AuthService sınıfı içinde kullanacağımız metodları oluşturduk.

SignIn() metodu ile kullanıcının Firebase Authentication ile oturum açmasını sağlayacağız.

SignUp() metodu ile kullanıcının Firebase Authentication ile kaydolmasını sağlayacağız.

resetPassword() metodu ile kullanıcının Firebase Authentication ile şifre sıfırlamasını sağlayacağız.

signOut() metodu ile kullanıcının Firebase Authentication ile çıkış yapmasını sağlayacağız.

Şimdi, AuthService'i app.component.ts'de kullanacağız. İlk olarak, AuthService'i import edelim:

```typescript
import { AuthService } from './auth.service';
```

Ardından, app.component.ts dosyasında authService'i constructor içinde aldık:

```typescript
constructor(private firestore: AngularFirestore, public authService: AuthService) {}
```

Giriş ve kaydolma işlemlerini gerçekleştirmek için ayrı componentlar oluşturabiliriz. Bunun için, iki yeni component oluşturacağız: SignInComponent ve SignUpComponent.

SignInComponent için kullanıcı adı ve şifre girişi yapılacak bir form oluşturacağız. Forma girilen bilgilerin AuthService'teki signIn() metoduna gönderilmesi sayesinde kullanıcının oturum açması sağlanacak.

İlk olarak, SignInComponent oluşturalım:

```
ng g c sign-in
```

signIn.component.ts dosyasına gerekli importları ekleyelim:

```typescript
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
```

Ardından, signIn() metodunun AuthService'teki signIn() metodunu çağırdığını kontrol edelim:

```typescript
signIn() {
this.authService.signIn(this.email, this.password).then(() => {
this.router.navigate(['dashboard']);
}).catch((error) => {
console.log(error)
})
}
```

Bu kod bloğunda, authService'in signIn() metodunu çağırdık ve promise döndürdük. Kullanıcının başarılı bir şekilde oturum açtığını göstermek için dashboard sayfasına yönlendirme yaptık. Eğer oturum açma sırasında bir hata ile karşılaşırsak, hatayı console'a yazdıracağız.

Şimdi, app.component.html dosyasına SignInComponent'i ekleyelim:

```html

```

Bu kod bloğu, SignInComponent'in router ile yönetilmesini sağlar. SignInComponent'ı yönlendirmek için de app-routing.module.ts dosyasını düzenlememiz gerekiyor:

```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SignInComponent } from './sign-in/sign-in.component';

const routes: Routes = [
{
path: 'signin',
component: SignInComponent