Memahami Firebase untuk Web

Saat mengembangkan aplikasi Web menggunakan Firebase, Anda mungkin menemukan konsep yang tidak dikenal, atau topik yang informasinya Anda butuhkan untuk membuat keputusan yang tepat bagi project. Halaman ini bertujuan menjawab pertanyaan-pertanyaan tersebut atau mengarahkan Anda ke berbagai referensi untuk mempelajarinya lebih lanjut.

Jika ada pertanyaan terkait topik yang tidak dibahas di halaman ini, kunjungi salah satu komunitas online kami. Kami juga akan memperbarui halaman ini dengan topik baru secara berkala. Jadi, periksa kembali untuk melihat apakah kami telah menambahkan topik yang ingin Anda pelajari.

Versi SDK: dengan namespace dan modular

Firebase menyediakan dua platform API untuk aplikasi Web:

  • JavaScript - dengan namespace. Ini adalah antarmuka JavaScript yang dikelola Firebase selama bertahun-tahun dan tidak asing lagi bagi developer Web yang mengerjakan aplikasi Firebase lama. Karena API dengan namespace tidak dapat memanfaatkan dukungan fitur baru yang berkelanjutan, sebagian besar aplikasi baru sebaiknya mengadopsi API modular saja.
  • JavaScript - modular. SDK ini didasarkan pada pendekatan modular yang memberikan SDK dengan ukuran yang lebih kecil dan efisiensi yang lebih besar dengan alat build JavaScript modern seperti webpack atau Rollup.

API modular terintegrasi dengan baik dengan alat build yang menghapus kode yang tidak terpakai di aplikasi Anda. Proses ini dikenal sebagai "tree-shaking". Aplikasi yang dibangun dengan SDK ini memiliki kelebihan berupa jejak ukuran yang jauh lebih kecil. Meskipun tersedia sebagai modul, API dengan namespace tidak memiliki struktur yang benar-benar modular dan tidak memberikan tingkat pengurangan ukuran yang sama.

Meskipun sebagian besar API modular mengikuti pola yang sama seperti API dengan namespace, organisasi kodenya berbeda. Umumnya, API dengan namespace berorientasi pada namespace dan pola layanan, sedangkan API modular berorientasi pada fungsi terpisah. Misalnya, dot-chaining dalam API dengan namespace, seperti firebaseApp.auth(), diganti di API modular dengan fungsi getAuth() tunggal yang menggunakan firebaseApp dan menampilkan instance Authentication.

Artinya, aplikasi Web yang dibuat menggunakan API dengan namespace memerlukan pemfaktoran ulang agar dapat memanfaatkan desain aplikasi modular. Lihat panduan upgrade untuk mengetahui detail lebih lanjut.

JavaScript - API modular untuk aplikasi baru

Jika memulai integrasi baru dengan Firebase, Anda dapat menggunakan API modular saat menambahkan dan menginisialisasi SDK.

Saat Anda mengembangkan aplikasi, perlu diingat bahwa kode Anda akan diatur terutama di sekitar fungsi. Dalam API modular, layanan diteruskan sebagai argumen pertama. Selanjutnya, fungsi menggunakan detail layanan untuk mengerjakan sisanya. Contoh:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Untuk mengetahui contoh dan detail lebih lanjut, baca panduan untuk setiap area produk serta dokumentasi referensi API modular.

Cara menambahkan Web SDK ke aplikasi

Firebase menyediakan library JavaScript untuk sebagian besar produk Firebase, termasuk Remote Config, FCM, dan lainnya. Cara menambahkan Firebase SDK ke aplikasi Web bergantung pada alat yang Anda gunakan dengan aplikasi (seperti pemaket modul).

Anda dapat menambahkan library yang tersedia ke aplikasi melalui salah satu metode yang didukung:

  • npm (untuk pemaket modul)
  • CDN (jaringan penayangan konten)

Guna mengetahui petunjuk penyiapan mendetail, lihat Menambahkan Firebase ke Aplikasi JavaScript. Bagian selanjutnya dalam panduan ini berisi informasi yang membantu Anda memilih dari opsi yang tersedia.

npm

Dengan mendownload paket npm Firebase (yang mencakup paket browser dan Node.js), Anda mendapatkan salinan lokal Firebase SDK, yang mungkin diperlukan untuk aplikasi non-browser, seperti aplikasi Node.js, React Native, atau Electron. Download ini mencakup paket Node.js dan React Native sebagai opsi paket yang dapat dipilih. Paket Node.js diperlukan untuk langkah rendering sisi server (SSR) pada framework SSR.

Penggunaan npm dengan pemaket modul, seperti webpack atau Rollup, menyediakan opsi pengoptimalan untuk menghapus kode yang tidak digunakan dengan cara "tree shaking", dan menerapkan polyfill yang ditargetkan yang dapat mengurangi jejak ukuran aplikasi secara signifikan. Implementasi fitur ini dapat menambah kompleksitas pada konfigurasi dan rantai build, tetapi berbagai alat CLI populer dapat membantu memitigasinya. Alat ini mencakup Angular, React, Vue, Next, dan lainnya.

Rangkuman:

  • Bermanfaat untuk pengoptimalan ukuran aplikasi
  • Ada berbagai alat untuk mengelola modul
  • Diperlukan untuk SSR dengan Node.js

CDN (jaringan penayangan konten)

Menambahkan library yang disimpan di CDN Firebase adalah metode penyiapan SDK sederhana yang mungkin tidak asing bagi banyak developer. Dengan menggunakan CDN untuk menambahkan SDK, Anda tidak memerlukan alat build, dan rantai build Anda mungkin cenderung lebih sederhana dan lebih mudah digunakan daripada pemaket modul. Jika Anda tidak terlalu mementingkan ukuran aplikasi yang diinstal dan tidak memiliki persyaratan khusus seperti melakukan transpilasi dari TypeScript, CDN bisa menjadi pilihan yang bagus.

Rangkuman:

  • Tidak asing dan sederhana
  • Cocok jika ukuran aplikasi bukan masalah utama
  • Cocok jika situs tidak menggunakan alat build.

Varian Firebase Web SDK

Web SDK Firebase dapat digunakan di aplikasi Node dan browser. Namun, beberapa produk tidak tersedia di lingkungan Node. Lihat daftar lingkungan yang didukung.

Beberapa SDK produk menyediakan varian browser dan Node terpisah, yang masing-masing disediakan dalam format ESM dan CJS, dan beberapa SDK produk bahkan menyediakan varian Cordova atau React Native. Web SDK dikonfigurasi untuk memberikan varian yang benar berdasarkan konfigurasi alat atau lingkungan Anda dan tidak boleh mewajibkan pemilihan manual di sebagian besar kasus. Semua varian SDK dirancang untuk membantu membangun aplikasi web atau aplikasi klien untuk akses pengguna akhir, seperti di aplikasi desktop Node.js atau IoT. Jika sasaran Anda adalah menyiapkan akses administratif dari lingkungan dengan hak istimewa (seperti server), gunakan Firebase Admin SDK.

Deteksi lingkungan dengan bundler dan framework

Saat Anda menginstal Firebase Web SDK menggunakan npm, versi JavaScript dan Node.js akan diinstal. Paket ini menyediakan deteksi lingkungan yang mendetail untuk mengaktifkan paket yang tepat bagi aplikasi Anda.

Jika kode Anda menggunakan pernyataan require Node.js, SDK akan menemukan paket khusus Node. Jika tidak, setelan pemaket harus dikonfigurasi dengan benar untuk mendeteksi kolom titik entri yang tepat di file package.json (misalnya, main, browser, atau module). Jika Anda mengalami error runtime dengan SDK, periksa untuk memastikan pemaket dikonfigurasi guna memprioritaskan jenis paket yang tepat bagi lingkungan Anda.

Mempelajari objek konfigurasi Firebase

Untuk melakukan inisialisasi Firebase di aplikasi, Anda harus memberikan konfigurasi project Firebase aplikasi Anda. Anda bisa mendapatkan objek konfigurasi Firebase kapan saja.

  • Kami tidak merekomendasikan pengeditan objek konfigurasi Anda secara manual, terutama "opsi Firebase" wajib berikut: apiKey, projectId, dan appID. Jika Anda melakukan inisialisasi aplikasi dengan nilai yang tidak valid atau tidak ada untuk "opsi Firebase" wajib yang disebutkan, pengguna aplikasi Anda mungkin akan mengalami masalah yang serius. Pengecualian untuk hal ini adalah authDomain, yang dapat diperbarui dengan mengikuti Praktik terbaik untuk menggunakan signInWithRedirect.

  • Jika Anda mengaktifkan Google Analytics di project Firebase, objek konfigurasi Anda akan berisi kolom measurementId. Pelajari kolom ini lebih lanjut di panduan memulai Analytics.

  • Jika Anda mengaktifkan Google Analytics atau Realtime Database setelah membuat Aplikasi Web Firebase, pastikan bahwa objek konfigurasi Firebase yang Anda gunakan di aplikasi Anda diupdate dengan nilai konfigurasi terkait (measurementId dan databaseURL). Anda bisa mendapatkan objek konfigurasi Firebase kapan saja.

Berikut adalah format objek konfigurasi dengan semua layanan yang diaktifkan (nilai ini diisikan secara otomatis):

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Library yang tersedia

Opsi penyiapan tambahan

Menunda pemuatan Firebase SDK (dari CDN)

Anda dapat menunda penyertaan Firebase SDK hingga seluruh halaman selesai dimuat. Jika Anda menggunakan skrip CDN API modular dengan <script type="module">, ini adalah perilaku default. Jika Anda menggunakan skrip CDN dengan namespace sebagai modul, selesaikan langkah-langkah ini untuk menunda pemuatan:

  1. Tambahkan flag defer ke setiap tag script untuk Firebase SDK, lalu tunda inisialisasi Firebase menggunakan skrip kedua, misalnya:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. Buat file init-firebase.js, lalu sertakan baris berikut dalam file:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Menggunakan beberapa project Firebase dalam satu aplikasi

Pada umumnya, Anda hanya perlu melakukan inisialisasi Firebase dalam satu aplikasi default. Anda dapat mengakses Firebase dari aplikasi tersebut dengan dua cara yang setara:

Web

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

Web

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

Namun, terkadang Anda perlu mengakses beberapa project Firebase sekaligus. Misalnya, Anda mungkin ingin membaca data dari database satu project Firebase, tetapi menyimpan file dalam project Firebase yang berbeda. Atau, Anda mungkin ingin mengautentikasi satu project tanpa mengautentikasi project lainnya.

Dengan Firebase JavaScript SDK, Anda dapat melakukan inisialisasi dan menggunakan beberapa project Firebase dalam satu aplikasi sekaligus, dengan setiap project menggunakan informasi konfigurasi Firebase-nya sendiri.

Web

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

Web

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

Menjalankan server web lokal untuk pengembangan

Jika Anda membangun aplikasi web, beberapa bagian Firebase JavaScript SDK mengharuskan Anda menyajikan aplikasi web dari server, bukan dari sistem file lokal. Anda dapat menggunakan Firebase CLI untuk menjalankan server lokal.

Jika sudah menyiapkan Firebase Hosting untuk aplikasi, Anda mungkin sudah menyelesaikan sebagian langkah di bawah.

Untuk menyajikan aplikasi web, Anda harus menggunakan alat command line, yaitu Firebase CLI.

  1. Baca dokumentasi Firebase CLI untuk mempelajari cara menginstal CLI atau mengupdatenya ke versi terbaru.

  2. Inisialisasi project Firebase Anda. Jalankan perintah berikut dari root direktori aplikasi lokal Anda:

    firebase init

  3. Mulai server lokal untuk pengembangan. Jalankan perintah berikut dari root direktori aplikasi lokal Anda:

    firebase serve

Referensi open source untuk Firebase JavaScript SDK

Firebase mendukung pengembangan open source, dan kami mengundang kontribusi dan masukan dari komunitas.

Firebase JavaScript SDK

Sebagian besar Firebase JavaScript SDK dikembangkan sebagai library open source di repositori GitHub Firebase publik kami.

Contoh panduan memulai

Firebase mengelola kumpulan contoh panduan memulai untuk sebagian besar Firebase API di Web. Temukan panduan memulai ini di repositori panduan memulai GitHub Firebase publik kami. Anda dapat menggunakan panduan memulai ini sebagai kode contoh untuk menggunakan Firebase SDK.