Buka konsol

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

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 sampel quickstart kami jika Anda hanya ingin 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: Dapatkan objek konfigurasi Firebase Anda

Setiap langkah konfigurasi dalam panduan ini mengharuskan Anda menginisialisasi dengan objek konfigurasi Firebase.

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

Anda bisa mendapatkan objek konfigurasi Firebase Anda kapan pun.

Langkah 3: Konfigurasi aplikasi Anda untuk menggunakan Firebase

Anda dapat mengonfigurasi aplikasi web atau aplikasi Node.js untuk menggunakan Firebase.

WEB NODE.JS

Mengonfigurasi aplikasi web

Gunakan salah satu opsi berikut untuk mengonfigurasi aplikasi web JavaScript Anda agar dapat menggunakan Firebase:

Opsi 1: Tambahkan SDK tertentu secara implisit dari CDN

Anda dapat mengonfigurasi sebagian impor Firebase JavaScript SDK — hanya muat produk Firebase yang Anda butuhkan.

Firebase menyimpan setiap library Firebase JavaScript SDK di CDN (jaringan penayangan konten) global kami.

Misalnya, untuk menyertakan hanya Authentication dan Realtime Database, gunakan tag script berikut dalam tag body untuk aplikasi Anda:

<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/5.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
<body>


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

Pertama, tambahkan tanda defer ke setiap tag script untuk Firebase SDK, kemudian tunda inisialisasi Firebase menggunakan skrip kedua, misalnya:

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

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

// ...

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

Selanjutnya, buat file init-firebase.js, kemudian sertakan pernyataan berikut dalam file:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
Firebase SDK yang tersedia untuk aplikasi JavaScript (secara implisit dari CDN)
Produk Firebase Referensi library
Firebase core
(wajib)

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

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-functions.js"></script>
Cloud Messaging

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-storage.js"></script>
Realtime Database

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

Opsi 2: Paketkan atau muat SDK tertentu secara dinamis

Anda dapat mengonfigurasi sebagian impor Firebase JavaScript SDK — hanya muat produk Firebase yang Anda butuhkan.

Jika menggunakan bundler (seperti Browserify atau webpack), Anda dapat import setiap produk Firebase yang ingin digunakan saat Anda 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. Gunakan modul Firebase di aplikasi Anda. Misalnya, untuk memuat Authentication dan Realtime Database saja, gunakan pernyataan import berikut:

    // 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/database";
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
Firebase SDK yang tersedia untuk aplikasi JavaScript (modul import)
Produk Firebase Referensi library
Firebase core (wajib) import "firebase/app";
Authentication import "firebase/auth";
Cloud Firestore import "firebase/firestore";
Cloud Functions for Firebase Client SDK import "firebase/functions";
Cloud Messaging import "firebase/messaging";
Cloud Storage import "firebase/storage";
Realtime Database import "firebase/database";

Opsi 3: Tambahkan seluruh Firebase JavaScript SDK

Untuk memuat seluruh Firebase JavaScript SDK, gunakan tag script berikut dalam tag body di aplikasi Anda:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Loads the entire Firebase JavaScript SDK -->
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>

  <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
  </script>
</body>

Mengonfigurasi 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. Gunakan modul Firebase di aplikasi Anda. Gunakan salah satu opsi berikut:

    • Anda dapat require modul dari file JavaScript mana pun:

      • Untuk hanya menyertakan produk Firebase yang ingin Anda gunakan (seperti Authentication dan Realtime Database):

        // 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/database");
        
      • Untuk menyertakan seluruh Firebase JavaScript SDK:

        var firebase = require("firebase");
    • Anda dapat menggunakan ES2015 untuk modul import:

      • Untuk hanya menyertakan produk Firebase yang ingin Anda gunakan (seperti Authentication dan Realtime Database):

        // 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/database";
        
      • Untuk menyertakan seluruh Firebase JavaScript SDK:

        import firebase from "firebase";
  3. Inisialisasi Firebase di aplikasi Anda:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
Firebase SDK yang tersedia untuk aplikasi JavaScript (modul untuk Node.js)
Produk Firebase Modul library
Firebase core (wajib) "firebase/app"
Authentication "firebase/auth"
Cloud Firestore "firebase/firestore"
Cloud Functions for Firebase Client SDK "firebase/functions"
Realtime Database "firebase/database"

Langkah 4: 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()
Cloud Functions for Firebase Client SDK firebase.functions()
Cloud Messaging firebase.messaging()
Cloud Storage firebase.storage()
Realtime Database firebase.database()

Opsi penyiapan tambahan

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 defaultDatabase = defaultProject.database();

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

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 defaultDatabase = firebase.database();

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

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.

  1. Instal Firebase CLI.

    Jalankan perintah berikut dari mana saja di komputer Anda:

    npm install -g firebase-tools
  2. Tautkan direktori aplikasi lokal Anda dengan Firebase dan buat file firebase.json (diperlukan untuk Firebase Hosting).

    Jalankan perintah berikut dari root direktori aplikasi lokal Anda:

    firebase init

    Selama inisialisasi, Anda diminta untuk menentukan direktori yang berisi file statis publik (direktori root publik Anda). Nama default untuk direktori yang dicari Firebase adalah "publik". Anda juga dapat menetapkan direktori publik nanti dengan mengubah file firebase.json secara langsung.

  3. Mulai server lokal untuk pengembangan.

    Jalankan perintah berikut dari root direktori aplikasi lokal Anda:

    firebase serve

Memuat SDK dari URL yang dipesan

Jika menghosting aplikasi web dengan Firebase Hosting, Anda dapat mengonfigurasi aplikasi untuk memuat library Firebase JavaScript SDK secara dinamis dari URL yang dipesan.

Dengan opsi penyiapan ini, setelah menerapkan ke Firebase, aplikasi Anda secara otomatis menarik objek konfigurasi Firebase dari project Firebase yang telah Anda gunakan. Anda dapat menerapkan codebase yang sama ke beberapa project Firebase, tetapi Anda tidak harus melacak konfigurasi Firebase yang digunakan untuk firebase.initializeApp().

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

Misalnya, untuk menyertakan hanya Authentication dan Realtime Database, gunakan tag script berikut dalam tag body untuk aplikasi Anda:

<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/5.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/5.10.1/firebase-auth.js"></script>
  <script src="/__/firebase/5.10.1/firebase-database.js"></script>

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>
Firebase SDK yang tersedia untuk aplikasi JavaScript (URL yang dipesan)
Produk Firebase Referensi library (URL yang dipesan)
Firebase core
(wajib)

<script src="/__/firebase/5.10.1/firebase-app.js"></script>
Authentication

<script src="/__/firebase/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="/__/firebase/5.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK

<script src="/__/firebase/5.10.1/firebase-functions.js"></script>
Cloud Messaging

<script src="/__/firebase/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="/__/firebase/5.10.1/firebase-storage.js"></script>
Realtime Database

<script src="/__/firebase/5.10.1/firebase-database.js"></script>
Firebase JavaScript SDK
(seluruh SDK)

<script src="/__/firebase/5.10.1/firebase.js"></script>

Pelajari lebih lanjut opsi penyiapan ini di bagian Dokumentasi hosting.

Langkah berikutnya

Mempelajari Firebase:

Menambahkan layanan Firebase ke aplikasi Anda, seperti: