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 Anda mendaftarkan aplikasi Anda ke Firebase, Anda akan mendapatkan objek konfigurasi Firebase yang akan Anda gunakan untuk menghubungkan aplikasi Anda dengan sumber daya proyek Firebase Anda.

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 mendownload salah satu contoh quickstart 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 alat framework JavaScript karena SDK v9 dioptimalkan untuk bekerja dengan bundler modul guna 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 mirip wadah yang menyimpan konfigurasi umum dan berbagi 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) tersedia untuk diimpor dalam sub-paket individual.

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 pengurangan ukuran

Firebase Web SDK dirancang untuk bekerja dengan bundler modul untuk menghapus kode yang tidak terpakai (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 pemaketan modul untuk pustaka yang diinstal melalui npm dan diimpor ke basis kode Anda.

Lihat panduan kami Menggunakan pemaket modul dengan Firebase untuk informasi lebih lanjut.

Layanan Firebase yang tersedia untuk web

Sekarang setelah Anda siap 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 dipasang secara lokal dengan npm . Untuk opsi impor alternatif, lihat dokumentasi perpustakaan yang tersedia .

Langkah selanjutnya

Pelajari tentang Firebase: