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

Tambahkan Firebase ke proyek JavaScript Anda

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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 proyek Firebase dan daftarkan aplikasi Anda

Sebelum Anda dapat menambahkan Firebase ke aplikasi JavaScript, Anda perlu membuat proyek Firebase dan mendaftarkan aplikasi Anda ke proyek tersebut. Saat mendaftarkan aplikasi dengan Firebase, Anda akan mendapatkan objek konfigurasi Firebase yang akan digunakan untuk menghubungkan aplikasi dengan sumber daya proyek Firebase.

Kunjungi Memahami Proyek Firebase untuk mempelajari lebih lanjut tentang proyek Firebase dan praktik terbaik untuk menambahkan aplikasi ke proyek.

Jika Anda belum memiliki proyek JavaScript dan hanya ingin mencoba produk Firebase, Anda dapat mengunduh 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 membutuhkan modul bundler atau tooling framework JavaScript karena v9 SDK dioptimalkan untuk bekerja dengan modul bundler untuk menghilangkan 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 seperti wadah yang menyimpan konfigurasi umum dan berbagi autentikasi di seluruh layanan Firebase. Setelah Anda menginisialisasi objek Aplikasi Firebase dalam kode Anda, 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) tersedia untuk diimpor dalam sub-paket individual.

Contoh di bawah ini menunjukkan bagaimana Anda dapat 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 pengurangan ukuran

Firebase Web SDK dirancang untuk bekerja dengan bundler modul untuk menghapus kode yang tidak digunakan (tree-shaking). Kami sangat menyarankan menggunakan pendekatan ini untuk aplikasi produksi. Alat seperti Angular CLI , Next.js , Vue CLI , atau Create React App secara otomatis menangani bundling modul untuk pustaka yang diinstal melalui npm dan diimpor ke basis kode Anda.

Lihat panduan kami Menggunakan bundler modul dengan Firebase untuk informasi selengkapnya.

Layanan Firebase yang tersedia untuk web

Sekarang setelah Anda siap untuk menggunakan Firebase, Anda dapat mulai menambahkan dan menggunakan salah satu layanan Firebase berikut yang tersedia di aplikasi web Anda.

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

Langkah selanjutnya

Pelajari tentang Firebase: