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

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 desktop Node.js atau aplikasi IoT.

Prasyarat

  • Instal editor atau IDE pilihan Anda.

  • Login ke Firebase menggunakan Akun Google Anda.

Jika belum memiliki project JavaScript dan hanya ingin mencoba produk Firebase, Anda dapat mendownload salah satu contoh panduan memulai kami.

Langkah 1: Buat project Firebase

Agar dapat menambahkan Firebase ke aplikasi JavaScript, Anda perlu membuat project Firebase untuk terhubung ke aplikasi Android.

Buka bagian Memahami Project Firebase untuk mempelajari lebih lanjut project Firebase dan praktik terbaik untuk menambahkan aplikasi ke project.

Langkah 2: Daftarkan aplikasi Anda ke Firebase

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

Buka bagian Memahami Project Firebase untuk mempelajari lebih lanjut praktik terbaik dan pertimbangan untuk menambahkan aplikasi ke project Firebase.

  1. Di tengah halaman ringkasan project Firebase console, klik ikon Web () untuk meluncurkan alur kerja penyiapan.

    Jika Anda telah menambahkan aplikasi ke project Firebase, klik Tambahkan aplikasi 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. (Opsional) Siapkan Firebase Hosting untuk aplikasi web Anda.

    • Anda dapat menyiapkan Firebase Hosting sekarang atau nanti. Anda juga dapat menautkan Aplikasi Web Firebase Anda ke situs Hosting kapan saja di Setelan project Anda.

    • Jika Anda memilih untuk menyiapkan Hosting sekarang, pilih situs dari daftar drop-down untuk menautkannya ke Aplikasi Web Firebase.

      • Daftar ini menampilkan situs Hosting default project Anda dan situs lain apa pun yang telah Anda siapkan di project Anda.

      • Situs apa pun yang telah Anda tautkan ke Aplikasi Web Firebase tidak tersedia untuk penautan tambahan. Setiap situs Hosting hanya dapat ditautkan ke satu Aplikasi Web Firebase.

  4. Klik Daftarkan aplikasi.

Langkah 3: Tambahkan Firebase SDK dan inisialisasi Firebase

Anda dapat menambahkan produk Firebase yang didukung ke aplikasi Anda.

Cara menambahkan Firebase SDK ke aplikasi bergantung pada apakah Firebase Hosting digunakan untuk aplikasi Anda, tooling apa yang digunakan dengan aplikasi Anda (seperti bundler), atau apakah Anda sedang mengonfigurasi aplikasi Node.js.

Dari URL Hosting

Saat Anda menggunakan Firebase Hosting, Anda bisa mengonfigurasi aplikasi Anda untuk memuat library Firebase JavaScript SDK secara dinamis dari URL yang dicadangkan. Pelajari cara menambahkan SDK lebih lanjut melalui URL Hosting yang dicadangkan.

Dengan opsi setelan ini, setelah Anda men-deploy ke Firebase, aplikasi Anda akan otomatis menarik objek konfigurasi Firebase dari project Firebase yang telah Anda jadikan tujuan deployment. Anda dapat men-deploy codebase yang sama ke beberapa project Firebase, tetapi Anda tidak perlu melacak konfigurasi Firebase yang digunakan untuk firebase.initializeApp().

Opsi penyiapan ini juga berfungsi untuk menguji aplikasi web Anda secara lokal.

  1. Untuk hanya menyertakan produk Firebase tertentu (misalnya, Analytics, Authentication, atau Cloud Firestore), tambahkan skrip berikut ke bagian bawah tag <body>, tetapi sebelum Anda menggunakan layanan Firebase apa pun:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/7.23.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/7.23.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/7.23.0/firebase-auth.js"></script>
      <script src="/__/firebase/7.23.0/firebase-firestore.js"></script>
    </body>
    


  2. Inisialisasi Firebase di aplikasi Anda (tidak perlu menyertakan objek konfigurasi Firebase Anda saat menggunakan URL Hosting yang dicadangkan):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

Dari CDN

Anda dapat mengonfigurasi sebagian impor Firebase JavaScript SDK dan hanya memuat produk Firebase yang dibutuhkan. Firebase menyimpan setiap library Firebase JavaScript SDK di CDN (jaringan penayangan konten) global kami.

  1. Untuk menyertakan hanya produk Firebase tertentu (misalnya, Authentication dan Cloud Firestore), tambahkan skrip berikut ke bagian bawah tag <body>, tetapi sebelum Anda menggunakan layanan Firebase apa pun:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
    </body>
    


  2. Inisialisasi Firebase di aplikasi Anda:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

Menggunakan bundler modul

Anda dapat mengonfigurasi sebagian impor Firebase JavaScript SDK dan hanya memuat produk Firebase yang dibutuhkan. Jika menggunakan bundler (seperti Browserify atau webpack), Anda dapat menerapkan import pada setiap produk Firebase saat membutuhkannya.

  1. Instal Firebase JavaScript SDK:

    1. Jika Anda belum memiliki file package.json, buatlah dengan menjalankan perintah berikut dari root project JavaScript Anda:

      npm init

    2. Instal paket npm firebase dan simpan ke file package.json Anda dengan menjalankan:

      npm install --save firebase

  2. Untuk menyertakan produk Firebase tertentu saja (seperti Authentication dan Cloud Firestore), terapkan import pada modul Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. Inisialisasi Firebase di aplikasi Anda:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Aplikasi Node.js

  1. Instal Firebase JavaScript SDK:

    1. Jika Anda belum memiliki file package.json, buat dengan menjalankan perintah berikut dari root project JavaScript Anda:

      npm init
    2. Instal paket npm firebase dan simpan ke file package.json Anda dengan menjalankan:

      npm install --save firebase
  2. Pilih salah satu opsi berikut untuk menggunakan modul Firebase di aplikasi Anda:

    • Anda dapat menerapkan require pada modul dari file JavaScript mana pun

      Untuk menyertakan hanya produk Firebase tertentu (seperti Authentication dan Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • Anda dapat menggunakan ES2015 untuk menerapkan import pada modul

      Untuk menyertakan hanya produk Firebase tertentu (seperti Authentication dan Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import * as firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. Inisialisasi Firebase di aplikasi Anda:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Mempelajari objek konfigurasi Firebase

Untuk menginisialisasi Firebase di aplikasi, Anda perlu memberikan konfigurasi project Firebase untuk aplikasi Anda. Anda dapat mendapatkan objek konfigurasi Firebase kapan saja.

  • Jika Anda menggunakan URL Hosting yang dicadangkan, konfigurasi Firebase akan otomatis ditarik dari project Firebase, sehingga Anda tidak perlu menyediakan objek konfigurasi secara eksplisit dalam kode.

  • Kami tidak merekomendasikan pengeditan objek konfigurasi Anda secara manual, terutama "opsi Firebase" yang diperlukan berikut: apiKey, projectId, dan appID. Jika Anda menginisialisasi aplikasi dengan nilai yang tidak valid atau tidak ada untuk "opsi Firebase" wajib ini, 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.

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

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

Berikut adalah objek konfigurasi dengan nilai contoh:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

Langkah 4: (Opsional) Instal CLI dan deploy ke Firebase Hosting

Jika menautkan Aplikasi Web Firebase ke situs Firebase Hosting, Anda dapat men-deploy konten dan konfigurasi situs sekarang (saat menyiapkan Aplikasi Web) atau kapan saja.

Untuk men-deploy ke Firebase, Anda harus menggunakan Firebase CLI, yakni sebuah alat command line.

  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. Deploy konfigurasi konten dan hosting Anda ke Firebase Hosting.

    Situs Hosting default

    Secara default, setiap project Firebase memiliki subdomain gratis di domain web.app dan firebaseapp.com (project-id.web.app dan project-id.firebaseapp.com).

    1. Deploy ke situs Anda. Jalankan perintah berikut dari direktori utama aplikasi Anda:

      firebase deploy
    2. Lihat situs Anda di salah satu situs default:

      • project-id.web.app
      • project-id.firebaseapp.com

    Situs Hosting non-default

    Project Firebase mendukung banyak situs (yang dianggap sebagai situs non-default Anda). Anda dapat menambahkan situs lainnya ke project Anda baik saat alur kerja penyiapan Aplikasi Web konsol atau dari halaman Hosting konsol.

    1. Tambahkan situs Anda ke file firebase.json (yang dibuat selama firebase init).

      Perlu diperhatikan bahwa konfigurasi firebase.json ini mengasumsikan bahwa Anda memiliki repositori terpisah untuk setiap situs.

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. Deploy ke situs Anda. Jalankan perintah berikut dari direktori utama aplikasi Anda:

      firebase deploy --only hosting:site-name
    3. Lihat situs Anda di:

      • site-name.web.app
      • site-name.firebaseapp.com

Langkah 5: Akses Firebase di aplikasi Anda

Firebase JavaScript SDK mendukung produk Firebase berikut. Setiap produk bersifat opsional dan dapat diakses dari namespace firebase.

Pelajari metode yang tersedia di bagian dokumentasi referensi JavaScript Firebase.

Produk Firebase Namespace Web Node.js
Analytics firebase.analytics()
Authentication firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions for Firebase Client SDK firebase.functions()
Cloud Messaging firebase.messaging()
Cloud Storage firebase.storage()
Performance Monitoring (rilis beta) firebase.performance()
Realtime Database firebase.database()
Remote Config (rilis beta) firebase.remoteConfig()

Library yang tersedia

Opsi penyiapan tambahan

Menunda pemuatan Firebase SDK (dari CDN)

Anda dapat menunda penyertaan Firebase SDK hingga seluruh halaman selesai dimuat.

  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/7.23.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Buat file init-firebase.js, lalu sertakan hal 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

Dalam sebagian besar kasus, Anda hanya perlu menginisialisasi Firebase dalam satu aplikasi default. Anda dapat mengakses Firebase dari aplikasi tersebut dengan dua cara yang setara:

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

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

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

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

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 sebuah project tanpa mengautentikasi project lainnya.

Dengan Firebase JavaScript SDK, Anda dapat menginisialisasi dan menggunakan beberapa project Firebase dalam satu aplikasi sekaligus, dengan setiap project menggunakan informasi konfigurasinya sendiri.

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

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

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

Menjalankan server web lokal untuk pengembangan

Jika Anda membuat 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 menayangkan aplikasi web Anda, gunakan Firebase CLI, yakni sebuah alat command line.

  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

Langkah berikutnya

Mempelajari Firebase:

Menambahkan layanan Firebase ke aplikasi Anda: