FireBase

Gist:

Az Angular és a Firebase közötti integráció érdekében gyakran használják az AngularFire2 könyvtárat. Az alábbiakban bemutatom, hogyan használhatod az AngularFire2 könyvtárat az Angular alkalmazásban a Firebase Realtime Database vagy Firestore segítségével az adatok tárolásához:

1. Telepítsd az AngularFire2-t és a Firebase-t:

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:

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 { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

   @NgModule({
     imports: [
       AngularFireModule.initializeApp(environment.firebaseConfig),
       AngularFireDatabaseModule,
     ],
     declarations: [...],
     bootstrap: [AppComponent]
   })
   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!