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ü kullanmanın birkaç adımı vardır:

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:

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

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 ve veriler her değiştiğinde bir değişiklik yapıyoruz.

Temel yazma işlemleri

Temel yazma işlemleri için, verileri belirtilen bir referansa kaydetmek ve bu yoldaki mevcut verileri değiştirmek üzere set()'ü kullanabilirsiniz. Örneğin, sosyal blog yazma uygulaması, aşağıdaki şekilde set() olan bir kullanıcıyı ekleyebilir:

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

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, alt düğümler dahil olmak üzere belirtilen konumdaki verilerin üzerine yazılır.

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. Belirli bir yoldaki içeriklerin, etkinlik sırasındaki halleriyle statik anlık görüntülerini okumak için bu etkinliği kullanabilirsiniz. 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ğırma işlevine, alt veriler dahil olmak üzere bu konumdaki tüm verileri içeren bir anlık görüntü iletilir. 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ı:

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

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 okuma

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 teknikleri, kullanımınızı ve faturalandırmanızı azaltır ve kullanıcılarınıza internete bağlanırken ve internete bağlanmazken en iyi deneyimi sunmak için optimize edilir.

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.

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

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:

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

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:

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

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, kullanıcının /user-posts/$userid/$postid adresindeki yayınlarında ikinci bir giriş oluşturmak için kullanılabilir.

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(), yazma işlemi veritabanına bağlandığında çağrılan isteğe bağlı bir tamamlama geri çağırma işlevi alır. Arama başarısız olursa geri çağırma işlevine, hatanın nedenini belirten bir hata nesnesi iletilir.

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

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 dinleyiciyi off() parametresi 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

Artımlı sayaçlar gibi eşzamanlı değişiklikler nedeniyle bozulabilen verilerle çalışırken işlem işlemi kullanabilirsiniz. Bu işleme bir güncelleme işlevi ve isteğe bağlı bir tamamlama geri çağırma işlevi verebilirsiniz. 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:

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

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 alanında, veritabanına iki değer yazıyoruz: Gönderiye yıldız ekleyen/yıldız işaretini kaldıran kullanıcının kimliği 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.

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

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, çakışan bir güncelleme varsa otomatik olarak yeniden çalıştırılmaz. 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 daha sonra 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ılır. Bu, uygulamanızın tüm ağ gecikmeleri veya bağlantılarından bağımsız şekilde yanıt verebilir.

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.

Online ve çevrimdışı özellikler hakkında daha fazla bilgi başlıklı makalede çevrimdışı davranış hakkında daha fazla bilgi vereceğiz.

Sonraki adımlar

• Veri listeleriyle çalışma
• Verileri nasıl yapılandıracağınızı öğrenin.
• Online ve çevrimdışı özellikler hakkında daha fazla bilgi edinin.