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.

Sebelum memulai

  • Instal editor atau IDE pilihan Anda.

  • Buka project JavaScript Anda (web atau Node.js).

  • Login ke Firebase menggunakan Akun Google Anda.

Jika belum memiliki project JavaScript, Anda dapat mendownload salah satu contoh panduan memulai kami untuk mencoba Firebase.

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

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 halaman ringkasan project Firebase console, klik ikon Web (code) untuk meluncurkan alur kerja penyiapan.

    Jika Anda telah menambahkan aplikasi ke project Firebase, klik Tambahkan aplikasi untuk menampilkan opsi platform.

  2. Masukkan nama pengguna aplikasi Anda.

    Nama pengguna ini adalah ID internal untuk memudahkan dan hanya terlihat 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 SDK Firebase dan inisialisasi Firebase

Anda dapat menambahkan produk Firebase yang didukung ke aplikasi Anda.

Cara menambahkan SDK Firebase 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 lebih lanjut tentang menambahkan SDK melalui URL Hosting yang dicadangkan.

Dengan opsi setelan ini, setelah Anda menerapkan ke Firebase, aplikasi Anda secara otomatis menarik objek konfigurasi Firebase dari project Firebase yang telah Anda deploy. 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 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="/__/firebase/6.2.0/firebase-app.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/6.2.0/firebase-auth.js"></script>
      <script src="/__/firebase/6.2.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 hanya menyertakan 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/6.2.0/firebase-app.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/6.2.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
        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 import masing-masing produk Firebase saat membutuhkannya.

  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, lalu simpan ke file package.json Anda dengan menjalankan:

      npm install --save firebase

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

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // 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
    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, lalu 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 require modul dari file JavaScript mana pun:

      Untuk memasukkan 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 import modul:

      Untuk memasukkan 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
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Objek konfigurasi Firebase

Untuk menginisialisasi Firebase di aplikasi, Anda perlu memberikan konfigurasi project Firebase untuk aplikasi Anda.

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

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",
};

Anda bisa mendapatkan objek konfigurasi Firebase Anda kapan pun.

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.

  1. Untuk men-deploy ke Firebase, Anda harus menggunakan Firebase CLI, sebuah fitur command line. Instal atau update CLI ke versi terbarunya.

    Jalankan perintah npm berikut dari mana saja di komputer Anda:

    npm install -g firebase-tools
  2. Login ke Google. Jalankan perintah berikut:

    firebase login

    Perintah ini menghubungkan komputer lokal Anda ke Firebase dan memberikan akses ke project Firebase Anda.

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

    firebase init

    Perintah inisialisasi ini:

    • Menautkan direktori aplikasi lokal dengan Firebase.
    • Membuat file firebase.json (yang diperlukan untuk Firebase Hosting).
    • Meminta Anda menentukan direktori root publik yang berisi file statis publik Anda (HTML, CSS, JS, dll.).

      Nama default untuk direktori yang dicari Firebase adalah "public". Anda juga dapat menetapkan direktori publik nanti dengan mengubah file firebase.json secara langsung.

  4. 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 root 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 saat menyiapkan alur kerja Aplikasi Web konsol atau dari halaman Hosting konsol.

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

      Perhatikan bahwa konfigurasi firebase.json ini mengasumsikan bahwa Anda memiliki repositori terpisah untuk masing-masing situs Anda.

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. Deploy ke situs Anda. Jalankan perintah berikut dari direktori root 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 Firebase JavaScript.

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

Library yang tersedia

Opsi penyiapan tambahan

Menunda pemuatan SDK Firebase (dari CDN)

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

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

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

  1. Instal atau update Firebase CLI. Jalankan perintah npm berikut dari mana saja di komputer Anda:

    npm install -g firebase-tools
  2. Login ke Google. Jalankan perintah berikut:

    firebase login

    Perintah ini menghubungkan komputer lokal Anda ke Firebase dan memberikan akses ke project Firebase Anda.

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

    firebase init

    Perintah inisialisasi ini:

    • Menautkan direktori aplikasi lokal dengan Firebase.
    • Membuat file firebase.json (yang diperlukan untuk Firebase Hosting).
    • Meminta Anda menentukan direktori root publik yang berisi file statis publik Anda (HTML, CSS, JS, dll.).

      Nama default untuk direktori yang dicari Firebase adalah "public". Anda juga dapat menetapkan direktori publik nanti dengan mengubah file firebase.json secara langsung.

  4. 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, seperti: