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 aplikasi desktop Node.js atau IoT.

Langkah 1: Buat project Firebase dan daftarkan aplikasi

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 API modular Firebase JS SDK, yang menggunakan format Modul JavaScript.

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

  1. Instal 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 berbagai layanan Firebase. Setelah menginisialisasi objek Aplikasi Firebase dalam kode, Anda dapat menambahkan dan mulai menggunakan layanan Firebase.

    Jika aplikasi Anda menyertakan fitur dinamis berdasarkan rendering sisi server (SSR), Anda harus melakukan beberapa langkah tambahan untuk memastikan konfigurasi Anda tetap ada di seluruh rendering server dan rendering klien. Di logika server, terapkan antarmuka FirebaseServerApp untuk mengoptimalkan pengelolaan sesi aplikasi Anda dengan service worker.

Langkah 3: Akses Firebase di aplikasi

Layanan Firebase (seperti Cloud Firestore, Authentication, Realtime Database, Remote Config, dan lainnya) dapat diimpor dalam subpaket 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 pemaket modul (webpack/Rollup) untuk mengurangi ukuran

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

Lihat panduan Menggunakan pemaket modul dengan Firebase untuk mendapatkan 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.

Perintah berikut menunjukkan cara mengimpor library Firebase yang diinstal secara lokal dengan npm. Untuk opsi impor alternatif, lihat dokumentasi library yang tersedia.

Langkah berikutnya

Mempelajari Firebase: