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.

  1. Di Firebase console, klik Add project.

    • Untuk menambahkan resource Firebase ke project Google Cloud yang sudah ada, masukkan nama project-nya atau pilih dari menu dropdown.

    • Untuk membuat project baru, masukkan nama project yang diinginkan. Anda juga dapat mengedit project ID yang ditampilkan di bawah nama project.

  2. Jika diminta, tinjau dan setujui persyaratan Firebase.

  3. Klik Continue.

  4. (Opsional) Siapkan Google Analytics untuk project Anda dan optimalkan penggunaan produk-produk Firebase berikut:

    Pilih akun Google Analytics yang ada atau buat akun baru.

    Jika Anda membuat akun baru, pilih lokasi pelaporan Analytics, lalu setujui setelan berbagi data dan persyaratan Google Analytics untuk project Anda.

  5. Klik Create project (atau Add Firebase, jika Anda menggunakan project Google Cloud yang sudah ada).

Firebase menyediakan resource untuk project Firebase Anda secara otomatis. Begitu selesai, Anda akan dibawa ke halaman ringkasan untuk project Firebase Anda di Firebase console.

Setelah memiliki project Firebase, Anda dapat mendaftarkan aplikasi web Anda ke project tersebut.

  1. Di tengah halaman Project Overview di Firebase console, klik ikon Web () untuk meluncurkan alur kerja penyiapan.

    Jika Anda sudah menambahkan aplikasi ke project Firebase, klik Add app untuk menampilkan opsi platform.

  2. Masukkan nama panggilan aplikasi Anda.
    Nama panggilan ini adalah ID internal yang sederhana, dan hanya dapat dilihat oleh Anda di Firebase console.

  3. Klik Register app.

  4. Ikuti petunjuk di layar untuk menambahkan dan menginisialisasi Firebase SDK di aplikasi Anda.

    Anda juga dapat menemukan petunjuk yang lebih detail untuk menambahkan, menginisialisasi, dan menggunakan Firebase SDK pada langkah berikutnya di halaman memulai ini.

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 lakukan 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 melakukan inisialisasi 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: