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

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();

Daftar bacaan dan tulisan

Tambahkan ke daftar data

Gunakan metode push() untuk menambahkan data ke daftar dalam aplikasi multipengguna. Metode push() menghasilkan kunci unik setiap kali anak baru ditambahkan ke referensi Firebase yang ditentukan. Dengan menggunakan kunci yang dihasilkan 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 anak yang dibuat secara otomatis atau set data untuk anak tersebut. Properti .key dari referensi push() berisi kunci yang dihasilkan secara otomatis.

Anda dapat menggunakan kunci yang dihasilkan secara otomatis ini untuk menyederhanakan perataan struktur data Anda. Untuk informasi selengkapnya, 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 node dari operasi seperti anak baru yang ditambahkan melalui metode push() atau anak yang diperbarui melalui metode update() .

Peristiwa Penggunaan tipikal
child_added Ambil daftar item atau dengarkan penambahan ke daftar item. Acara ini dipicu sekali untuk setiap anak yang ada dan dipicu lagi setiap kali anak baru ditambahkan ke jalur yang ditentukan. Pendengar diberikan snapshot yang berisi data anak baru.
child_changed Dengarkan perubahan pada item dalam daftar. Acara ini dipicu setiap kali simpul anak dimodifikasi. Ini termasuk modifikasi apa pun pada keturunan simpul anak. Cuplikan yang diteruskan ke pendengar acara berisi data yang diperbarui untuk anak tersebut.
child_removed Dengarkan item yang dihapus dari daftar. Peristiwa ini dipicu saat anak langsung dihapus. Snapshot yang diteruskan ke blok callback berisi data untuk anak yang dihapus.
child_moved Dengarkan perubahan pada urutan item dalam daftar yang diurutkan. 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 pada node tertentu dalam database. Misalnya, aplikasi blogging 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 peristiwa nilai

Meskipun mendengarkan peristiwa anak adalah cara yang disarankan untuk membaca daftar data, ada beberapa 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.

Meskipun hanya ada satu kecocokan untuk kueri, snapshot tetap berupa daftar; itu hanya berisi satu item. Untuk mengakses item, Anda perlu mengulangi 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 acara tambahan 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.

Sortir data

Untuk mengambil data yang diurutkan, mulailah dengan menentukan salah satu metode urutkan demi untuk menentukan bagaimana hasil diurutkan:

metode Penggunaan
orderByChild() Urutkan hasil berdasarkan nilai kunci anak tertentu atau jalur anak bersarang.
orderByKey() Urutan hasil dengan kunci anak.
orderByValue() Urutkan hasil berdasarkan nilai anak.

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 postingan teratas pengguna yang diurutkan berdasarkan jumlah bintangnya:

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 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() menentukan kunci anak untuk mengurutkan hasil. Dalam hal ini, postingan diurutkan berdasarkan nilai anak "starCount" masing-masing. Kueri juga dapat diurutkan berdasarkan 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 berdasarkan nilai yang bersarang di bawah kunci metrics dengan menentukan jalur relatif ke anak 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 cara pengurutan tipe data lainnya, lihat Cara pengurutan data kueri .

Menyaring data

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

metode Penggunaan
limitToFirst() Menetapkan jumlah item maksimum yang akan dikembalikan dari awal daftar hasil yang diurutkan.
limitToLast() Menetapkan jumlah item maksimum yang akan dikembalikan dari akhir daftar hasil yang diurutkan.
startAt() Mengembalikan item yang lebih besar atau sama dengan kunci atau nilai yang ditentukan, bergantung pada metode urutkan menurut yang dipilih.
startAfter() Mengembalikan item yang lebih besar dari kunci atau nilai yang ditentukan bergantung pada metode urutkan menurut yang dipilih.
endAt() Mengembalikan item yang kurang dari atau sama dengan kunci atau nilai yang ditentukan, bergantung pada metode urutkan menurut yang dipilih.
endBefore() Mengembalikan item kurang dari kunci atau nilai yang ditentukan bergantung pada metode urutkan menurut yang dipilih.
equalTo() Mengembalikan item yang sama dengan kunci atau nilai yang ditentukan, bergantung pada metode urutkan menurut 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 menetapkan 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 yang child_added . Jika Anda memiliki kurang dari 100 item yang disimpan di database Firebase, peristiwa child_added anak akan diaktifkan untuk setiap item.

Saat item berubah, Anda menerima event child_added untuk item yang memasukkan kueri dan event child_removed untuk item yang keluar sehingga jumlah totalnya tetap 100.

Contoh berikut menunjukkan bagaimana contoh aplikasi blogging menentukan kueri untuk mengambil daftar 100 postingan 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, diperlukan pendengar terlampir.

Filter berdasarkan kunci atau nilai

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

Bagaimana data kueri diurutkan

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

orderByChild

Saat menggunakan orderByChild() , data yang berisi kunci anak tertentu 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 muncul berikutnya. Jika beberapa anak memiliki nilai false , mereka diurutkan secara leksikografis berdasarkan kunci.
  3. Anak-anak dengan nilai true untuk kunci anak yang ditentukan muncul 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 akan diurutkan berdasarkan kunci.
  5. String muncul setelah angka dan diurutkan secara leksikografis dalam urutan menaik. Jika beberapa turunan memiliki nilai yang sama untuk simpul turunan tertentu, mereka diurutkan secara leksikografis berdasarkan kunci.
  6. Objek datang terakhir dan diurutkan secara leksikografis dengan 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 diurai sebagai bilangan bulat 32-bit didahulukan, diurutkan dalam urutan menaik.
  2. Anak-anak dengan nilai string sebagai kuncinya muncul berikutnya, diurutkan secara leksikografis dalam urutan menaik.

orderByValue

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

Pisahkan pendengar

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

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

Memanggil off() pada pendengar induk tidak secara otomatis menghapus pendengar yang terdaftar pada node anaknya; off() juga harus dipanggil pada setiap anak pendengar untuk menghapus callback.

Langkah selanjutnya