Firebase / Firestore

Angular Firebase Documentation

Install Firebase tools globally

npm install -g firebase-tools

Install @angular/fire and firebase packages

npm install @angular/fire@latest firebase@latest --save

Authorize your project

firebase login --reauth

Add Firebase to your project

ng add @angular/fire

Manuális beállítás

npm install @angular/fire firebase --save

2. Konfiguráld a Firebase projektet: Ha még nincs Firebase projekted, akkor készíts egyet a Firebase Console segítségével. Miután elkészült, készíts egy új alkalmazást, és vedd fel a webalkalmazás konfigurációs adatait, amelyek így néznek ki:

export interface IEnvironment {
  readonly production: boolean;
  readonly type: EnvironmentType;
  readonly apiUrl?: string | IEnvironmentApiUrl;
  readonly httpReqTimeout: number;
  readonly firebaseConfig: IFireStore;
}

export interface IFireStore {
  readonly apiKey: string;
  readonly authDomain: string;
  readonly projectId: string;
  readonly storageBucket: string;
  readonly messagingSenderId: string;
  readonly appId: string;
}

export interface IRealtTimeDb {
  readonly apiKey: string;
  readonly authDomain: string;
  readonly databaseURL: string;
  readonly projectId: string;
  readonly storageBucket: string;
  readonly messagingSenderId: string;
  readonly appId: string;
  readonly measurementId: string;
}

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

3. Konfiguráld az AngularFire2-t az Angular modulodban:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { AddStudentComponent } from './components/add-student/add-student.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    AddStudentComponent,
    NgbModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

import 'firebase/firestore';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';

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

4. Használd a Firebase adatbázist a szolgáltatásban:

   import { AngularFireDatabase } from '@angular/fire/database'; // Realtime Database-hez
   // import { AngularFirestore } from '@angular/fire/firestore'; // Firestore-hoz

   @Injectable({
     providedIn: 'root'
   })
   export class ShoppingListService {
     itemsRef: any;

     constructor(private db: AngularFireDatabase) { // Realtime Database-hez
     // constructor(private firestore: AngularFirestore) { // Firestore esetén
       this.itemsRef = this.db.list('items'); // Realtime Database esetén
       // this.itemsRef = this.firestore.collection('items'); // Firestore esetén
     }

     getItems() {
       return this.itemsRef.snapshotChanges();
     }

     addItem(item) {
       this.itemsRef.push(item);
     }

     // ... többi metódus ...
   }

5. Frissítsd a komponenst az új adatszerkezet használatával: Mivel a Firebase aszinkron módon működik, az adatokat Observable-ként kapod vissza, tehát a komponensben is ezt kell kezelned:

   export class ShoppingListComponent implements OnInit {
     items: Observable<any[]>;

     constructor(private slService: ShoppingListService) { }

     ngOnInit() {
       this.items = this.slService.getItems();
       this.items.subscribe(data => {
         // itt dolgozd fel az adatokat ahogy szükséges
       });
     }

     // ... többi metódus ...
   }

6. Kezeld az adatokat a sablonban: Használhatsz egy async csőt (pipe) az Observable adatok megjelenítéséhez:

   <ul>
     <li *ngFor="let item of items | async">
       {{ item.name }}
     </li>
   </ul>

Ez csak egy alap bevezetés volt az AngularFire2 használatába. Az igazi erő a reaktív programozásban rejlik, ahol az adatok változásait azonnal leképezheted a felhasználói felületre.

Mielőtt élesben használnád, olvasd el a dokumentációt és tanulmányozd a biztonsági beállításokat, valamint a Firebase adatbázis szabályait!