Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Menambahkan Firebase ke project JavaScript

Ikuti panduan ini untuk menggunakan Firebase JavaScript SDK di aplikasi web Anda atau sebagai klien untuk akses pengguna akhir, misalnya di desktop Node.js atau aplikasi IoT.

Langkah 1: Buat project Firebase dan daftarkan aplikasi Anda

Agar dapat menambahkan Firebase ke aplikasi JavaScript, Anda perlu membuat project Firebase dan mendaftarkan aplikasi ke project tersebut. Saat mendaftarkan aplikasi ke Firebase, Anda akan mendapatkan objek konfigurasi Firebase yang akan digunakan untuk menghubungkan aplikasi dengan resource project Firebase.

Buka bagian Memahami Project Firebase untuk mempelajari lebih lanjut project Firebase dan praktik terbaik untuk menambahkan aplikasi ke project.

Jika belum memiliki project JavaScript dan hanya ingin mencoba produk Firebase, Anda dapat mendownload salah satu contoh panduan memulai kami.

Langkah 2: Instal SDK dan inisialisasi Firebase

Halaman ini menjelaskan petunjuk penyiapan untuk Firebase JS SDK versi 9, yang menggunakan format Modul JavaScript.

Alur kerja ini menggunakan npm dan memerlukan bundler modul atau fitur framework JavaScript karena SDK v9 dioptimalkan agar dapat digunakan dengan bundler modul untuk menghapus kode yang tidak digunakan (tree-shaking) dan mengurangi ukuran SDK.

  1. Menginstal Firebase menggunakan npm:

    npm install firebase
  2. Inisialisasi Firebase di aplikasi Anda dan buat objek Aplikasi Firebase:

    import { initializeApp } from 'firebase/app';
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);
    

    Aplikasi Firebase adalah objek mirip container yang menyimpan konfigurasi umum dan membagikan autentikasi di seluruh layanan Firebase. Setelah menginisialisasi objek Aplikasi Firebase dalam kode, Anda dapat menambahkan dan mulai menggunakan layanan Firebase.

Langkah 3: Akses Firebase di aplikasi Anda

Layanan Firebase (seperti Cloud Firestore, Authentication, Realtime Database, Remote Config, dan lainnya) dapat diimpor dalam sub-paket terpisah.

Contoh di bawah menunjukkan cara menggunakan Cloud Firestore Lite SDK untuk mengambil daftar data.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Langkah 4: Gunakan bundler modul (webpack/Rollup) untuk mengurangi ukuran

Firebase Web SDK dirancang agar dapat digunakan dengan bundler modul guna menghapus kode yang tidak digunakan (tree-shaking). Sebaiknya gunakan pendekatan ini untuk aplikasi produksi. Alat seperti Angular CLI, Next.js, Vue CLI, atau Create React App otomatis menangani pembuatan paket modul untuk library yang diinstal melalui npm dan diimpor ke codebase Anda.

Lihat panduan Menggunakan bundler modul dengan Firebase untuk informasi lebih lanjut.

Layanan Firebase yang tersedia untuk web

Setelah siap menggunakan Firebase, Anda dapat mulai menambahkan dan menggunakan salah satu opsi layanan Firebase berikut di aplikasi web.

Langkah berikutnya

Mempelajari Firebase: