Menambahkan Firebase ke Project JavaScript

Prasyarat

Sebelum memulai, Anda perlu aplikasi JavaScript (web atau Node.js) yang akan ditambahkan Firebase. Jika belum memiliki aplikasi tersebut, Anda dapat mendownload salah satu contoh quickstart kami.

Jika Anda tertarik untuk menggunakan Node.js di lingkungan istimewa, misalnya backend server atau backend tanpa server, seperti Cloud Functions (bukan klien untuk akses pengguna akhir seperti desktop Node.js atau perangkat IoT), Anda harus mengikuti petunjuk untuk menyiapkan Admin SDK.

Menambahkan Firebase ke aplikasi

Untuk menambahkan Firebase ke aplikasi, Anda memerlukan project dan cuplikan singkat kode inisialisasi yang berisi sejumlah detail mengenai project Anda.

  1. Buat project Firebase di Firebase console.

    • Jika Anda belum memiliki project Firebase, klik Tambahkan project lalu masukkan nama project Google Cloud Platform yang sudah ada atau nama project baru.
    • Jika Anda sudah memiliki project Firebase yang ingin digunakan, pilih project tersebut dari konsol.
  2. Dari halaman ringkasan project di Firebase console, klik Tambahkan Firebase ke aplikasi web. Jika project Anda sudah memiliki aplikasi, pilih Tambahkan Aplikasi dari halaman ringkasan project.

  3. Copy-paste cuplikan kode kustom project Anda di tag <head> halaman, sebelum tag skrip lainnya.

    Berikut adalah contoh cuplikan kode inisialisasi:

Web

Klik Salin, lalu tempel cuplikan kode ke HTML aplikasi Anda. Cuplikan kode tersebut akan terlihat seperti ini:

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

Cuplikan ini berisi informasi inisialisasi untuk mengonfigurasi Firebase JavaScript SDK agar menggunakan Authentication, Cloud Storage, Realtime Database, dan Cloud Firestore. Anda dapat mengurangi jumlah kode yang digunakan aplikasi dengan menyertakan fitur yang Anda butuhkan saja. Komponen yang dapat diinstal secara individual adalah:

  • firebase-app — Klien firebase inti (wajib)
  • firebase-auth — Firebase Authentication (opsional)
  • firebase-database — Firebase Realtime Database (opsional)
  • firebase-firestore — Cloud Firestore (opsional)
  • firebase-storage — Cloud Storage (opsional)
  • firebase-messaging — Firebase Cloud Messaging (opsional)
  • firebase-functions — Cloud Functions for Firebase (opsional)

Dari CDN, sertakan komponen-komponen individual yang Anda butuhkan (sertakan firebase-app terlebih dahulu):

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-functions.js"></script>

<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-storage.js"></script> -->

<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

Jika Anda menggunakan bundler seperti Browserify atau webpack, Anda dapat langsung require() (meminta) komponen yang digunakan:

// Firebase App is always required and must be first
var firebase = require("firebase/app");

// Add additional services that you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Comment out (or don't require) services that you don't want to use
// require("firebase/storage");

var config = {
  // ...
};
firebase.initializeApp(config);

Node.js

Firebase SDK juga tersedia di npm. Jika Anda belum memiliki file package.json, buatlah melalui npm init. Selanjutnya, instal paket npm firebase dan simpan ke package.json Anda:

$ npm install firebase --save

Untuk menggunakan modul di aplikasi, require dari file JavaScript mana pun:

var firebase = require("firebase");

Jika menggunakan ES2015, Anda dapat import modul:

import firebase from "firebase";

Kemudian, inisialisasikan Firebase SDK menggunakan cuplikan kode di atas, yang akan terlihat seperti ini:

// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Menggunakan layanan Firebase

App Firebase dapat menggunakan beberapa layanan Firebase. Setiap layanan dapat diakses melalui namespace firebase:

Lihat masing-masing layanan untuk dokumentasi mengenai penggunaannya.

Menjalankan server web lokal untuk pengembangan

Jika Anda membuat aplikasi web, beberapa bagian Firebase JavaScript SDK mengharuskan aplikasi web Anda disajikan dari server, bukan dari sistem file lokal. Anda dapat menggunakan Firebase CLI untuk menjalankan server lokal seperti ini:

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Menghosting aplikasi web menggunakan Firebase Hosting

Jika Anda membuat aplikasi web dan aplikasi web tersebut berisi konten statis, Anda dapat menerapkannya menggunakan Firebase Hosting.

Firebase Hosting adalah hosting web statis yang berfokus pada developer untuk aplikasi web front-end modern. Dengan Firebase Hosting, Anda dapat menerapkan aplikasi web yang dilengkapi SSL ke domain sendiri pada jaringan penayangan konten (CDN) global menggunakan satu perintah.

Pengimporan SDK dan inisialisasi implisit

Aplikasi web yang dihosting dengan Firebase Hosting dapat memanfaatkan konfigurasi project yang lebih sederhana. Paste cuplikan kode berikut ke dalam HTML aplikasi untuk mengimpor Firebase SDK dan mengonfigurasinya secara otomatis untuk project yang dihosting aplikasi Anda:

    <!-- Firebase App is always required and must be first -->
    <script src="/__/firebase/5.8.4/firebase-app.js"></script>

    <!-- Add additional services that you want to use -->
    <script src="/__/firebase/5.8.4/firebase-auth.js"></script>
    <script src="/__/firebase/5.8.4/firebase-database.js"></script>
    <script src="/__/firebase/5.8.4/firebase-messaging.js"></script>
    <script src="/__/firebase/5.8.4/firebase-functions.js"></script>

    <!-- Comment out (or don't include) services that you don't want to use -->
    <!-- <script src="/__/firebase/5.8.4/firebase-storage.js"></script> -->

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

Menginisialisasi beberapa aplikasi

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

// Initialize the default app
var defaultApp = firebase.initializeApp(defaultAppConfig);

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

// You can retrieve services via the defaultApp variable...
var defaultStorage = defaultApp.storage();
var defaultDatabase = defaultApp.database();

// ... or you can use the equivalent shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

Beberapa kasus penggunaan mengharuskan Anda membuat beberapa aplikasi secara bersamaan. Misalnya, Anda mungkin ingin membaca data dari Realtime Database pada satu project Firebase dan menyimpan file di project lain. Atau, Anda mungkin ingin mengautentikasi satu aplikasi, sementara aplikasi lain dibatalkan autentikasinya. Firebase SDK dapat digunakan untuk membuat beberapa aplikasi secara bersamaan, masing-masing dengan informasi konfigurasinya sendiri.

// Initialize the default app
firebase.initializeApp(defaultAppConfig);

// Initialize another app with a different config
var otherApp = firebase.initializeApp(otherAppConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherApp.name);        // "other"

// Use the shorthand notation to retrieve the default app's services
var defaultStorage = firebase.storage();
var defaultDatabase = firebase.database();

// Use the otherApp variable to retrieve the other app's services
var otherStorage = otherApp.storage();
var otherDatabase = otherApp.database();

Langkah berikutnya

Mempelajari Firebase:

Meambahkan layanan Firebase ke aplikasi Anda:

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.