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

Firebase menyediakan library JavaScript untuk sebagian besar produk Firebase, termasuk Remote Config, FCM, dan lainnya. Anda dapat menambahkan library yang tersedia ke aplikasi Anda.

Cara menambahkan Firebase SDK ke aplikasi Web bergantung pada apakah Anda telah memilih untuk menggunakan Firebase Hosting untuk aplikasi, alat yang digunakan dengan aplikasi (seperti bundler modul), atau apakah Anda mengonfigurasi aplikasi Node.js. Untuk mendapatkan bantuan lainnya saat memilih di antara alternatif ini, lihat Cara menambahkan Web SDK ke aplikasi Anda.

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 firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // 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);
    

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/8.3.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.3.1/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>
    

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 cara menambahkan SDK melalui URL Hosting yang dicadangkan.

Dengan opsi penyiapan 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/8.3.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.3.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.3.1/firebase-auth.js"></script>
      <script src="/__/firebase/8.3.1/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>
    

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 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 melakukan inisialisasi Firebase di aplikasi, Anda perlu memberikan konfigurasi project Firebase untuk aplikasi Anda. Anda bisa 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 melakukan inisialisasi 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_ID",
          "public": "public",
      
          // ...
        }
      }
      
    2. Deploy ke situs Anda. Jalankan perintah berikut dari direktori utama aplikasi Anda:

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

      • SITE_ID.web.app
      • SITE_ID.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

Langkah berikutnya

Mempelajari Firebase:

Menambahkan layanan Firebase ke aplikasi Anda: