Mempelajari Web dan Firebase lebih lanjut

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 mempelajari 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.

SDK versi 8 dan 9

Firebase menyediakan dua versi SDK untuk aplikasi Web:

  • Versi 8. Ini adalah antarmuka JavaScript yang telah dikelola Firebase selama beberapa tahun dan tidak asing lagi bagi developer Web yang mengerjakan aplikasi Firebase. Karena Firebase akan menghapus dukungan untuk versi ini setelah satu siklus rilis utama, aplikasi baru harus menerapkan versi 9 sebagai gantinya.
  • Modular versi 9. SDK ini memperkenalkan pendekatan modular yang memberikan SDK berukuran lebih kecil dan efisiensi yang lebih besar dengan alat build JavaScript modern seperti webpack atau Rollup.

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

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

Artinya, aplikasi Web yang dibuat dengan versi 8 atau yang lebih lama memerlukan pemfaktoran ulang agar dapat memanfaatkan pendekatan modular versi 9. Firebase menyediakan library compat untuk memudahkan transisi tersebut. Baca panduan upgrade untuk mengetahui detail lebih lanjut.

Apa yang didukung?

Meskipun versi 8 dan versi 9 memiliki gaya kode yang berbeda, keduanya memberikan dukungan yang sangat mirip untuk fitur dan opsi Firebase. Seperti yang akan kami jelaskan secara mendetail dalam panduan ini, kedua versi SDK mendukung varian JavaScript dan Node.js beserta beberapa opsi untuk menambahkan/menginstal SDK.

Menambahkan SDK dengan 8.0 (Dengan namespace) 9.0 (Modular)
npm
  • Untuk JavaScript
  • Untuk Node.js
  • Untuk JavaScript
  • Untuk Node.js
CDN (Jaringan Penayangan Konten)
  • Untuk JavaScript
  • Untuk JavaScript
URL Hosting
  • Untuk JavaScript
  • Untuk Node.js

Untuk mengetahui informasi selengkapnya, baca Cara menambahkan Web SDK ke aplikasi dan Varian Firebase Web SDK nanti di halaman ini juga.

Versi 9 untuk aplikasi baru

Jika memulai integrasi baru dengan Firebase, Anda dapat menggunakan SDK versi 9 saat menambahkan dan melakukan inisialisasi SDK.

Saat mengembangkan aplikasi, ingat bahwa kode akan diatur terutama berdasarkan fungsi. Pada versi 9, 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 versi 9-nya.

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 bundler modul), atau apakah aplikasi dijalankan di lingkungan non-browser seperti Node.js.

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

  • npm (untuk pemaket modul dan Node.js)
  • 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 baik.

Rangkuman:

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

Varian Firebase Web SDK

Saat ini, Firebase menyediakan dua varian Web SDK:

  • Paket JavaScript yang mendukung semua fitur Firebase untuk digunakan di browser.
  • Paket Node.js sisi klien yang mendukung banyak, tetapi tidak semua, fitur Firebase. Lihat daftar lingkungan yang didukung.

Kedua varian SDK ini 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 admin 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 bahwa pemaket dikonfigurasi untuk memprioritaskan jenis paket yang tepat untuk 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.

  • Jika Anda mengaktifkan Google Analytics di project Firebase, objek konfigurasi Anda akan berisi kolom measurementId. Pelajari kolom ini lebih lanjut di halaman 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 diupdate dengan nilai konfigurasi yang 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 versi 9 dengan <script type="module">, ini adalah perilaku default. Jika Anda menggunakan skrip CDN versi 8 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 version 9

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 version 8

// 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 version 9

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 version 8

// 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 menyalurkan 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 menyalurkan 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. Lakukan inisialisasi project Firebase. 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.