Web'de Veri Okuma ve Yazma

(İsteğe bağlı) Firebase Local Emulator Suite ile prototip oluşturun ve test edin

Uygulamanızın Realtime Database ürününden nasıl okuma ve yazma konusundan bahsetmeden önce, Realtime Database prototipini oluşturmak ve bu araçları test etmek için kullanabileceğiniz bir araç setinden bahsedelim. işlev: Firebase Local Emulator Suite. Farklı verileri deniyorsanız güvenlik kurallarınızı optimize ederek veya makine öğreniminden en iyi şekilde arka uçla etkileşim kurmanın ve yerel olarak çalışabilmenin uygun maliyetli bir yoludur. çok iyi bir fikir olabilir.

Realtime Database emülatörü, Local Emulator Suite ürününün bir parçasıdır. uygulamanızın emüle edilmiş veritabanı içeriğinizle ve yapılandırmanızla etkileşim kurmasına olanak tanır. ve isteğe bağlı olarak emüle edilen proje kaynaklarınızın (işlevler, diğer veritabanları ve güvenlik kuralları) ekleyin.

Realtime Database emülatörünü birkaç adımda kullanabilirsiniz:

  1. Emülatöre bağlanmak için uygulamanızın test yapılandırmasına bir kod satırı ekleme.
  2. Yerel proje dizininizin kök dizininden firebase emulators:start komutunu çalıştırın.
  3. Bir Realtime Database platformu kullanarak uygulamanızın prototip kodundan çağrı yapma SDK'yı her zamanki gibi kullanın veya Realtime Database REST API'yi kullanın.

Realtime Database ve Cloud Functions ile ilgili ayrıntılı bir adım adım açıklamalı kılavuz mevcuttur. Ayrıca Local Emulator Suite tanıtımına da göz atmalısınız.

Veritabanı referansı alma

Veritabanından veri okumak veya yazmak için firebase.database.Reference:

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

Web

var database = firebase.database();
index.js

Verileri yazma

Bu dokümanda, veri almayla ilgili temel bilgiler ile sıralama ve filtreleme açıklanmaktadır. Firebase verileri.

Firebase verileri, firebase.database.Reference Dinleyici, son 30 güne kadar verilerin ilk durumunu ve veriler değiştiğinde tekrar belirtmek isteriz.

Temel yazma işlemleri

Temel yazma işlemleri için verileri belirli bir yere kaydetmek üzere set() kullanabilirsiniz yeni bir referans noktası yaparak bu yoldaki mevcut verilerin yerini alır. Örneğin, sosyal blog yazma uygulaması, aşağıdaki şekilde set() olan bir kullanıcıyı ekleyebilir:

Web

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

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}
rtdb_write_new_user.js

Web

function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}
read-and-write.js

set() kullanıldığında, çocuklar da dahil olmak üzere belirtilen konumdaki verilerin üzerine yazılır düğüm.

Verileri okuma

Değer etkinliklerine göz atın

Bir yoldaki verileri okumak ve değişiklikleri dinlemek için onValue() tuşunu kullanarak gözlemleyin etkinlikler. Bu etkinliği, bir defada içeriğin statik anlık görüntülerini okumak için kullanabilirsiniz. etkinlik anında mevcut olan yollara değinin. Bu yöntem işleyici bir kez eklendiğinde ve alt öğeler dahil olmak üzere veriler her değiştiğinde tekrar tetiklenir. Etkinlik geri çağırması, çocuk verileri de dahil olmak üzere söz konusu konumdaki tüm veriler. Hiç veri yoksa anlık görüntü, exists() çağrısı yaptığınızda false, üzerinde val() çağrısı yaptığınızda ise null değerini döndürür.

Aşağıdaki örnekte, veritabanındaki bir yayının yıldız sayısı:

Web

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

const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId + '/starCount');
onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});
rtdb_social_listen_star_count.js

Web

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});
read-and-write.js

İşleyici, belirtilensnapshot etkinlik sırasında veritabanında bulunan konumu. Verileri geri alabilirsiniz snapshot içinde val() yöntemiyle.

Verileri bir kez oku

get() ile verileri bir kez okuma

SDK, veritabanı sunucularıyla etkileşimleri yönetecek şekilde tasarlanmıştır. Uygulama çevrimiçi veya çevrimdışı.

Genel olarak, şu verileri elde etmek için yukarıda açıklanan değer etkinliği tekniklerini veya arka uçtan veri güncellemelerinin bildirim almasını sağlar. Dinleyici teknikler, kullanımınızı ve faturalandırmanızı azaltır ve şuna göre optimize edilir: kullanıcılarınıza çevrimiçi ve çevrimdışı ortamda en iyi deneyimi sunmanızı sağlar.

Verilere yalnızca bir kez ihtiyaç duyarsanız, raporun anlık görüntüsünü almak için get() kullanabilirsiniz bu verileri kaldırmanızı sağlar. get() herhangi bir nedenle sunucuyu döndüremezse değerine ayarlanırsa istemci, yerel depolama önbelleğini inceler ve değeri bulunamadı.

Gereksiz get() kullanımı, bant genişliği kullanımını artırabilir ve performansın yüksek olması, yukarıda gösterildiği gibi bir gerçek zamanlı işleyici kullanılarak engellenebilir.

Web

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

const dbRef = ref(getDatabase());
get(child(dbRef, `users/${userId}`)).then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});
rtdb_read_once_get.js

Web

const dbRef = firebase.database().ref();
dbRef.child("users").child(userId).get().then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});
read-and-write.js

Verileri bir gözlemciyle bir kez okuma

Bazı durumlarda, yerel önbellek değerinin döndürülmesini isteyebilirsiniz güncel bir değer olup olmadığını kontrol etmek yerine anında rapor oluşturur. O durumlarda, yerel disk önbelleğinden hemen veri almak için once() kullanabilirsiniz.

Bu, yalnızca bir kez yüklenmesi gereken ve yüklenmesi beklenmeyen veriler için yararlıdır. veya aktif dinlemeyi gerektirir. Örneğin blog uygulaması Yukarıdaki örneklerde, kullanıcı bir web sitesine girdiğinde kullanıcının profilini yüklemek için yeni bir yayın yazmaya başlayın:

Web

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

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

const userId = auth.currentUser.uid;
return onValue(ref(db, '/users/' + userId), (snapshot) => {
  const username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
}, {
  onlyOnce: true
});
rtdb_social_single_value_read.js

Web

var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then((snapshot) => {
  var username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
});
read-and-write.js

Verileri güncelleme veya silme

Belirli alanları güncelle

Diğer düğümlerin üzerine yazmadan bir düğümün belirli alt öğelerine aynı anda yazmak için alt düğümler için update() yöntemini kullanın.

update() çağrısı yapılırken alt düzey alt değerleri şu şekilde güncelleyebilirsiniz: anahtar için bir yol belirterek. Veriler ölçeklendirilmek üzere birden fazla konumda depolanıyorsa isterseniz, bu verilerin tüm örneklerini verilerin yayılması.

Örneğin, bir sosyal blog uygulaması bir yayın oluşturup aynı anda bunu en son etkinlik feed'ine ve kod şöyle olur:

Web

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

function writeNewPost(uid, username, picture, title, body) {
  const db = getDatabase();

  // A post entry.
  const postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  const newPostKey = push(child(ref(db), 'posts')).key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  const updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return update(ref(db), updates);
}
rtdb_social_write_fan_out.js

Web

function writeNewPost(uid, username, picture, title, body) {
  // A post entry.
  var postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  var newPostKey = firebase.database().ref().child('posts').push().key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  var updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return firebase.database().ref().update(updates);
}
read-and-write.js

Bu örnekte, push() ile ilgili yayınları içeren düğümde bir yayın oluşturmak için /posts/$postid alanındaki tüm kullanıcılar için geçerlidir ve anahtarı aynı anda alabilir. Bu anahtar daha sonra kullanıcının /user-posts/$userid/$postid itibarıyla yayınları var.

Bu yolları kullanarak, bir bölgedeki birden fazla konumda aynı anda güncelleme yapabilirsiniz. tek bir update() çağrısıyla JSON ağacını oluşturabilirsiniz (örneğin, bu örnekte yeni yayını her iki konumda da oluşturur. Bu şekilde yapılan eş zamanlı güncellemeler çok önemli: ya tüm güncellemeler başarılı olur ya da tüm güncellemeler başarısız olur.

Tamamlama Geri Çağırması Ekle

Verilerinizin ne zaman kaydedildiğini öğrenmek istiyorsanız geri arama tamamlanmasını sağlar. Hem set() hem de update() isteğe bağlı olarak tamamlayabilir geri çağırmayı içerir. Eğer çağrı başarısız olduysa, geri arama hata nesnesi gösterilir.

Web

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

const db = getDatabase();
set(ref(db, 'users/' + userId), {
  username: name,
  email: email,
  profile_picture : imageUrl
})
.then(() => {
  // Data saved successfully!
})
.catch((error) => {
  // The write failed...
});
rtdb_social_completion_callback.js

Web

firebase.database().ref('users/' + userId).set({
  username: name,
  email: email,
  profile_picture : imageUrl
}, (error) => {
  if (error) {
    // The write failed...
  } else {
    // Data saved successfully!
  }
});
read-and-write.js

Verileri silin

Verileri silmenin en basit yolu,remove() söz konusu verilerin konumu.

Başka bir yazma işleminin değeri olarak null değerini belirterek de silebilirsiniz set() veya update() gibi bir işlem. Bu tekniği kullanarak tek bir API çağrısındaki birden çok alt öğeyi silmek için update() ile birlikte kullanın.

Promise alın

Verilerinizin Firebase Realtime Database sunucusuna ne zaman kaydedildiğini öğrenmek için kullanabilir Promise Hem set() hem de update(),Promise veri tabanıyla bağlantılı değildir.

Dinleyicileri ayır

Geri çağırma işlevleri,off() Firebase veritabanı referansı.

Tek bir işleyiciyi off() öğesine parametre olarak ileterek kaldırabilirsiniz. Konumda bağımsız değişken olmadan off() çağrısı yapıldığında, söz konusu konumdaki tüm dinleyiciler kaldırılır konum.

Ebeveyn dinleyicide off() adlı kullanıcıya yapılan arama şunu yapmaz: alt düğümlerine kayıtlı işleyicileri otomatik olarak kaldırmalıdır; off(), tüm çocuk dinleyicilerde de çağrılmalıdır tuşuna basarak geri çağırmayı kaldırın.

Verileri işlem olarak kaydet

Eşzamanlı etkenlere göre bozulabilecek verilerle çalışırken artımlı sayaçlar gibi değişiklikleri yapmak için işlemin işleyiş şekli. Bu işleme bir güncelleme işlevi ve isteğe bağlı bir geri arama tamamlanmasını sağlar. Güncelleme işlevi, verilerin mevcut durumunu bağımsız değişken ve yazmak istediğiniz yeni, istenen durumu döndürür. Eğer Yeni değeriniz başarıyla onaylanmadan önce başka bir istemci konuma yazar yazıldığında, güncelleme fonksiyonunuz yeni geçerli değerle tekrar çağrılır ve yazma yeniden denendi.

Örneğin sosyal blog uygulaması örneğimizde, kullanıcıların yayınlara yıldız ekleyebilir, yayınların yıldızlarını kaldırabilir ve ilgili yayının kaç yıldız aldığını takip edebilirsiniz şu şekilde:

Web

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

function toggleStar(uid) {
  const db = getDatabase();
  const postRef = ref(db, '/posts/foo-bar-123');

  runTransaction(postRef, (post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}
rtdb_social_star_transaction.js

Web

function toggleStar(postRef, uid) {
  postRef.transaction((post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}
read-and-write.js

Bir işlem kullanmak, birden fazla olduğunda yıldız sayısının yanlış olmasını önler kullanıcılar aynı yayına yıldız ekleyebilir veya müşterinin verileri eski olabilir. Öğe işlem reddedildiğinde sunucu, değeri daha sonra müşteriye otomatik olarak güncellenmiş değer. Bu işlem, işlem kabul edilene veya siz iptal edene kadar tekrarlanır takip eder.

Atomik sunucu tarafı artışları

Yukarıdaki kullanım örneğinde veritabanına iki değer yazıyoruz: Yayına yıldız veren/yıldızı kaldıran kullanıcı ve artan yıldız sayısı. Bir kullanıcının yayına yıldız eklediğini bilirsek atomik bir artış kullanabiliriz işlemidir.

Web

function addStar(uid, key) {
  import { getDatabase, increment, ref, update } from "firebase/database";
  const dbRef = ref(getDatabase());

  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = increment(1);
  update(dbRef, updates);
}
rtdb_social_star_increment.js

Web

function addStar(uid, key) {
  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  firebase.database().ref().update(updates);
}
read-and-write.js

Bu kod bir işlem işlemi kullanmadığından otomatik olarak çakışan bir güncelleme varsa yeniden çalıştırın. Ancak, artış işlemi veritabanı sunucusunda gerçekleştiğinden çakışma olasılığı yoktur.

Uygulamaya özel çakışmaları (ör. kullanıcı adı) tespit edip reddetmek istiyorsanız daha önce yıldız eklediğiniz bir yayına yıldız ekleyerek kurallarından bahsedeceğiz.

Verilerle çevrimdışı çalışma

İstemcinin ağ bağlantısı kesilirse uygulamanız çalışmaya devam eder sağlayabilir.

Firebase veritabanına bağlı her istemcinin kendi dahili sürümü bulunur olabilir. Veriler yazıldığında, bu yerel sürüme yazılır. tıklayın. Firebase istemcisi bu verileri uzak veritabanı ile senkronize eder sağlamak için "en iyisini" yaparak .

Sonuç olarak, veritabanına yapılan tüm yazmalar yerel etkinlikleri hemen, sunucuya herhangi bir veri yazıldığından emin olabilirsiniz. Bu, uygulamanızın hızlı bir şekilde yanıt verir.

Bağlantı yeniden kurulduğunda uygulamanız uygun veri kümesini alır Böylece istemcinin, istemcinin bunu gerçekleştirmesine gerek kalmadan mevcut sunucu durumuyla herhangi bir özel kod yazabilirsiniz.

Çevrimdışı davranışlara biraz daha değineceğiz. Online ve çevrimdışı özellikler hakkında daha fazla bilgi edinin.

Sonraki adımlar