Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

Bekerja dengan Daftar Data di Web

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Dapatkan referensi basis data

Untuk membaca atau menulis data dari database, Anda memerlukan instance firebase.database.Reference :

Web version 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web version 8

var database = firebase.database();

Membaca dan menulis daftar

Tambahkan ke daftar data

Gunakan metode push() untuk menambahkan data ke daftar di aplikasi multipengguna. Metode push() menghasilkan kunci unik setiap kali anak baru ditambahkan ke referensi Firebase yang ditentukan. Dengan menggunakan kunci yang dibuat secara otomatis ini untuk setiap elemen baru dalam daftar, beberapa klien dapat menambahkan turunan ke lokasi yang sama pada waktu yang sama tanpa konflik penulisan. Kunci unik yang dihasilkan oleh push() didasarkan pada stempel waktu, sehingga item daftar secara otomatis diurutkan secara kronologis.

Anda dapat menggunakan referensi ke data baru yang dikembalikan oleh metode push() untuk mendapatkan nilai kunci yang dibuat secara otomatis dari turunan atau menyetel data untuk turunan. Properti .key dari referensi push() berisi kunci yang dibuat secara otomatis.

Anda dapat menggunakan kunci yang dibuat secara otomatis ini untuk menyederhanakan perataan struktur data Anda. Untuk informasi lebih lanjut, lihat contoh penyebaran data .

Misalnya, push() dapat digunakan untuk menambahkan postingan baru ke daftar postingan di aplikasi sosial:

Web version 9

import { getDatabase, ref, push, set } from "firebase/database";

// Create a new post reference with an auto-generated id
const db = getDatabase();
const postListRef = ref(db, 'posts');
const newPostRef = push(postListRef);
set(newPostRef, {
    // ...
});

Web version 8

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});

Dengarkan acara anak

Peristiwa anak dipicu sebagai respons terhadap operasi tertentu yang terjadi pada anak-anak simpul dari operasi seperti anak baru yang ditambahkan melalui metode push() atau anak yang diperbarui melalui metode update() .

Peristiwa Penggunaan umum
child_added Ambil daftar item atau dengarkan penambahan ke daftar item. Peristiwa ini dipicu sekali untuk setiap turunan yang ada dan dipicu lagi setiap kali turunan baru ditambahkan ke jalur yang ditentukan. Listener diberikan snapshot yang berisi data anak baru.
child_changed Dengarkan perubahan pada item dalam daftar. Peristiwa ini dipicu setiap kali simpul anak dimodifikasi. Ini termasuk modifikasi apa pun pada turunan dari simpul anak. Cuplikan yang diteruskan ke event listener berisi data yang diperbarui untuk turunan.
child_removed Dengarkan item yang dihapus dari daftar. Peristiwa ini dipicu saat turunan langsung dihapus. Snapshot yang diteruskan ke blok panggilan balik berisi data untuk turunan yang dihapus.
child_moved Dengarkan perubahan urutan item dalam daftar yang dipesan. event child_moved selalu mengikuti event child_changed yang menyebabkan urutan item berubah (berdasarkan metode order-by Anda saat ini).

Masing-masing bersama-sama dapat berguna untuk mendengarkan perubahan ke node tertentu dalam database. Misalnya, aplikasi blog sosial mungkin menggunakan metode ini bersama-sama untuk memantau aktivitas di komentar postingan, seperti yang ditunjukkan di bawah ini:

Web version 9

import { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } from "firebase/database";

const db = getDatabase();
const commentsRef = ref(db, 'post-comments/' + postId);
onChildAdded(commentsRef, (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

onChildChanged(commentsRef, (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

onChildRemoved(commentsRef, (data) => {
  deleteComment(postElement, data.key);
});

Web version 8

var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_changed', (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_removed', (data) => {
  deleteComment(postElement, data.key);
});

Dengarkan acara nilai

Meskipun mendengarkan peristiwa anak adalah cara yang disarankan untuk membaca daftar data, ada situasi mendengarkan peristiwa nilai pada referensi daftar berguna.

Melampirkan pengamat value ke daftar data akan mengembalikan seluruh daftar data sebagai snapshot tunggal yang kemudian dapat Anda ulangi untuk mengakses masing-masing anak.

Bahkan ketika hanya ada satu kecocokan untuk kueri, snapshot masih berupa daftar; itu hanya berisi satu item. Untuk mengakses item, Anda perlu mengulang hasilnya:

Web version 9

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const dbRef = ref(db, '/a/b/c');

onValue(dbRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    // ...
  });
}, {
  onlyOnce: true
});

Web version 8

ref.once('value', (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    // ...
  });
});

Pola ini dapat berguna saat Anda ingin mengambil semua turunan dari daftar dalam satu operasi, daripada mendengarkan peristiwa tambahan yang ditambahkan turunan.

Menyortir dan memfilter data

Anda dapat menggunakan kelas Realtime Database Query untuk mengambil data yang diurutkan berdasarkan kunci, nilai, atau nilai turunan. Anda juga dapat memfilter hasil yang diurutkan ke sejumlah hasil tertentu atau rentang kunci atau nilai.

Urutkan data

Untuk mengambil data yang diurutkan, mulailah dengan menentukan salah satu metode order-by untuk menentukan bagaimana hasil diurutkan:

metode Penggunaan
orderByChild() Urutan hasil menurut nilai kunci turunan yang ditentukan atau jalur turunan bersarang.
orderByKey() Urutan hasil dengan kunci anak.
orderByValue() Urutan hasil berdasarkan nilai turunan.

Anda hanya dapat menggunakan satu metode order-by pada satu waktu. Memanggil metode order-by beberapa kali dalam kueri yang sama akan menimbulkan kesalahan.

Contoh berikut menunjukkan bagaimana Anda dapat mengambil daftar posting teratas pengguna yang diurutkan berdasarkan jumlah bintang mereka:

Web version 9

import { getDatabase, ref, query, orderByChild } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const myUserId = auth.currentUser.uid;
const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));

Web version 8

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount');

Ini mendefinisikan kueri yang bila digabungkan dengan pendengar anak akan menyinkronkan klien dengan kiriman pengguna dari jalur di database berdasarkan ID pengguna mereka, diurutkan berdasarkan jumlah bintang yang diterima setiap kiriman. Teknik menggunakan ID sebagai kunci indeks ini disebut data fan out, Anda dapat membacanya lebih lanjut di Structure Your Database .

Panggilan ke metode orderByChild() menetapkan kunci turunan untuk mengurutkan hasil. Dalam hal ini, postingan diurutkan berdasarkan nilai "starCount" masing-masing. Kueri juga dapat dipesan oleh turunan bersarang, jika Anda memiliki data yang terlihat seperti ini:

"posts": {
  "ts-functions": {
    "metrics": {
      "views" : 1200000,
      "likes" : 251000,
      "shares": 1200,
    },
    "title" : "Why you should use TypeScript for writing Cloud Functions",
    "author": "Doug",
  },
  "android-arch-3": {
    "metrics": {
      "views" : 900000,
      "likes" : 117000,
      "shares": 144,
    },
    "title" : "Using Android Architecture Components with Firebase Realtime Database (Part 3)",
    "author": "Doug",
  }
},

Dalam hal ini, kita dapat mengurutkan elemen daftar menurut nilai yang disarangkan di bawah kunci metrics dengan menentukan jalur relatif ke turunan bersarang dalam panggilan orderByChild() kita.

Web version 9

import { getDatabase, ref, query, orderByChild } from "firebase/database";

const db = getDatabase();
const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));

Web version 8

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');

Untuk informasi selengkapnya tentang bagaimana tipe data lain diurutkan, lihat Bagaimana data kueri diurutkan .

Memfilter data

Untuk memfilter data, Anda bisa menggabungkan salah satu metode batas atau rentang dengan metode urutkan menurut saat membuat kueri.

metode Penggunaan
limitToFirst() Menetapkan jumlah maksimum item yang akan dikembalikan dari awal daftar hasil yang diurutkan.
limitToLast() Menetapkan jumlah maksimum item yang akan dikembalikan dari akhir daftar hasil yang diurutkan.
startAt() Kembalikan item yang lebih besar dari atau sama dengan kunci atau nilai yang ditentukan, bergantung pada metode urutkan berdasarkan yang dipilih.
startAfter() Kembalikan item yang lebih besar dari kunci atau nilai yang ditentukan tergantung pada metode urutkan berdasarkan yang dipilih.
endAt() Kembalikan item kurang dari atau sama dengan kunci atau nilai yang ditentukan, bergantung pada metode urutkan berdasarkan yang dipilih.
endBefore() Mengembalikan item kurang dari kunci atau nilai yang ditentukan tergantung pada metode urutkan berdasarkan yang dipilih.
equalTo() Kembalikan item yang sama dengan kunci atau nilai yang ditentukan, tergantung pada metode urutkan berdasarkan yang dipilih.

Berbeda dengan metode order-by, Anda dapat menggabungkan beberapa fungsi limit atau range. Misalnya, Anda dapat menggabungkan metode startAt() dan endAt() untuk membatasi hasil ke rentang nilai tertentu.

Batasi jumlah hasil

Anda dapat menggunakan metode limitToFirst() dan limitToLast() untuk menyetel jumlah maksimum turunan yang akan disinkronkan untuk peristiwa tertentu. Misalnya, jika Anda menggunakan limitToFirst() untuk menetapkan batas 100, awalnya Anda hanya menerima hingga 100 peristiwa child_added . Jika Anda memiliki kurang dari 100 item yang disimpan di database Firebase, peristiwa yang child_added untuk setiap item.

Saat item berubah, Anda menerima peristiwa child_added untuk item yang masuk ke kueri dan peristiwa child_removed untuk item yang keluar darinya sehingga jumlah totalnya tetap 100.

Contoh berikut menunjukkan bagaimana contoh aplikasi blog mendefinisikan kueri untuk mengambil daftar 100 posting terbaru oleh semua pengguna:

Web version 9

import { getDatabase, ref, query, limitToLast } from "firebase/database";

const db = getDatabase();
const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));

Web version 8

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);

Contoh ini hanya mendefinisikan kueri, untuk benar-benar menyinkronkan data perlu memiliki listener terlampir.

Filter menurut kunci atau nilai

Anda dapat menggunakan startAt() , startAfter() , endAt() , endBefore() , dan equalTo() untuk memilih titik awal, akhir, dan ekivalensi yang arbitrer untuk kueri. Ini dapat berguna untuk membuat paginasi data atau menemukan item dengan turunan yang memiliki nilai tertentu.

Bagaimana data kueri dipesan

Bagian ini menjelaskan bagaimana data diurutkan menurut masing-masing metode urutkan menurut di kelas Query .

orderByChild

Saat menggunakan orderByChild() , data yang berisi kunci anak yang ditentukan akan diurutkan sebagai berikut:

  1. Anak-anak dengan nilai null untuk kunci anak yang ditentukan didahulukan.
  2. Anak-anak dengan nilai false untuk kunci anak yang ditentukan datang berikutnya. Jika beberapa anak memiliki nilai false , mereka diurutkan secara leksikografis berdasarkan kunci.
  3. Anak-anak dengan nilai true untuk kunci anak yang ditentukan datang berikutnya. Jika beberapa anak memiliki nilai true , mereka diurutkan secara leksikografis berdasarkan kunci.
  4. Anak-anak dengan nilai numerik datang berikutnya, diurutkan dalam urutan menaik. Jika beberapa anak memiliki nilai numerik yang sama untuk simpul anak yang ditentukan, mereka diurutkan berdasarkan kunci.
  5. String datang setelah angka dan diurutkan secara leksikografis dalam urutan menaik. Jika beberapa anak memiliki nilai yang sama untuk simpul anak yang ditentukan, mereka diurutkan secara leksikografis berdasarkan kunci.
  6. Objek datang terakhir dan diurutkan secara leksikografis berdasarkan kunci dalam urutan menaik.

orderByKey

Saat menggunakan orderByKey() untuk mengurutkan data Anda, data dikembalikan dalam urutan menaik berdasarkan kunci.

  1. Anak-anak dengan kunci yang dapat diuraikan sebagai bilangan bulat 32-bit didahulukan, diurutkan dalam urutan menaik.
  2. Anak-anak dengan nilai string sebagai kunci mereka datang berikutnya, diurutkan secara leksikografis dalam urutan menaik.

orderByValue

Saat menggunakan orderByValue() , anak-anak diurutkan berdasarkan nilainya. Kriteria pengurutan sama seperti di orderByChild() , kecuali nilai simpul yang digunakan sebagai ganti nilai kunci anak yang ditentukan.

Lepaskan pendengar

Callback dihapus dengan memanggil metode off() pada referensi database Firebase Anda.

Anda dapat menghapus satu pendengar dengan meneruskannya sebagai parameter ke off() . Memanggil off() di lokasi tanpa argumen menghapus semua pendengar di lokasi itu.

Memanggil off() pada listener induk tidak secara otomatis menghapus listener yang terdaftar pada node turunannya; off() juga harus dipanggil pada pendengar anak mana pun untuk menghapus panggilan balik.

Langkah selanjutnya