Asrofil Vault

7. Connect Ke Firebase (Realtime Database)

3 min read

tech

Table of Content

Install

Silahkan ketik perintah dibawah:

npm install firebase @angular/fire

Config Firebase

  • Klik icon setting di samping Project Overview
  • Pilih Project settings
  • Langsung aja geser kebawah sampai “SDK Setup and Configuration”
  • Pilih Config dan copy paste ke project
  • Letakkan di app/firebase.ts

Setting Firebase

Setelah copas config firebase, saatnya kita setting firebase di project kita.

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { initializeApp } from 'firebase/app'; 
import { provideFirebaseApp } from '@angular/fire/app'; 
import { getAuth, provideAuth } from '@angular/fire/auth'; 
import { getDatabase, provideDatabase } from '@angular/fire/database';
import { firebaseConfig } from './app/firebase'; 
import { routes } from './app/app.routes';
import { provideRouter } from '@angular/router';
 
const appConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideAuth(() => getAuth()), 
    provideDatabase(() => getDatabase()),
    provideRouter(routes)
  ],
};
 
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Penjelasan:

  • bootstrapApplication: Fungsi ini digunakan untuk mem-boot aplikasi Angular. Ini adalah cara baru untuk memulai aplikasi Angular yang diperkenalkan di Angular 15.
  • AppComponent: Ini adalah komponen utama aplikasi Anda. Semua komponen lain akan dirender di dalam komponen ini.
  • initializeApp: Fungsi dari Firebase SDK yang digunakan untuk menginisialisasi aplikasi Firebase dengan konfigurasi yang diberikan.
  • provideFirebaseApp: Fungsi dari AngularFire yang digunakan untuk menyediakan aplikasi Firebase ke dalam konteks Angular.
  • getAuth dan provideAuth: Fungsi dari AngularFire yang digunakan untuk menyediakan layanan autentikasi Firebase.
  • getDatabase dan provideDatabase: Fungsi dari AngularFire yang digunakan untuk menyediakan akses ke Firebase Realtime Database.
  • firebaseConfig: Ini adalah objek yang berisi konfigurasi untuk aplikasi Firebase Anda, seperti apiKey, authDomain, dan lainnya.
  • routes: Ini adalah konfigurasi rute untuk aplikasi Anda, yang mendefinisikan bagaimana navigasi antar komponen akan dilakukan.
  • provideRouter: Fungsi dari Angular Router yang digunakan untuk menyediakan konfigurasi rute ke dalam aplikasi.
  • appConfig: Ini adalah objek konfigurasi untuk aplikasi Angular Anda. Di dalamnya, Anda mendefinisikan penyedia (providers) yang akan digunakan dalam aplikasi.
  • provideFirebaseApp: Menginisialisasi aplikasi Firebase dengan konfigurasi yang diberikan.
  • provideAuth: Menyediakan layanan autentikasi Firebase untuk digunakan di dalam aplikasi.
  • provideDatabase: Menyediakan akses ke Firebase Realtime Database.
  • provideRouter: Menyediakan konfigurasi rute yang telah Anda definisikan sebelumnya.
  • bootstrapApplication: Memulai aplikasi Angular dengan AppComponent sebagai komponen utama. Ini akan merender AppComponent dan semua komponen anak yang didefinisikan dalam rute.
  • .catch((err) => console.error(err)): Menangkap dan mencetak kesalahan yang mungkin terjadi saat mem-boot aplikasi. Ini berguna untuk debugging jika ada masalah saat memulai aplikasi.

src/app/app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideRouter } from '@angular/router';
import { firebaseConfig } from './firebase';
import { routes } from './app.routes';
import { getDatabase, provideDatabase } from '@angular/fire/database';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideDatabase(() => getDatabase()),
  ]
};

Penjelasan:

  • Kode ini adalah konfigurasi untuk aplikasi Angular yang mengintegrasikan Firebase dan Angular Router. Ini mengatur penyedia layanan yang diperlukan untuk deteksi perubahan, rute, dan akses ke Firebase, sehingga aplikasi dapat berfungsi dengan baik dan responsif.

Referensi:

Date: 24-03-2025

Graph View

Recent notes