Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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'den nasıl okuyup yazdığından bahsetmeden önce, Realtime Database işlevselliğini prototiplemek ve test etmek için kullanabileceğiniz bir dizi araç tanıtalım: Firebase Local Emulator Suite. Farklı veri modelleri deniyor, güvenlik kurallarınızı optimize ediyor veya arka uçla etkileşim kurmanın en uygun maliyetli yolunu bulmaya çalışıyorsanız, canlı hizmetleri dağıtmadan yerel olarak çalışabilmek harika bir fikir olabilir.

Gerçek Zamanlı Veritabanı öykünücüsü, uygulamanızın öykünülmüş veritabanı içeriğiniz ve yapılandırmanızın yanı sıra isteğe bağlı olarak öykünülmüş proje kaynaklarınızla (işlevler, diğer veritabanları ve güvenlik kuralları) etkileşim kurmasını sağlayan Yerel Öykünücü Paketi'nin bir parçasıdır.

Gerçek Zamanlı Veritabanı öykünücüsünü kullanmak yalnızca birkaç adımı içerir:

  1. Öykünücüye bağlanmak için uygulamanızın test yapılandırmasına bir kod satırı ekleme.
  2. Çalışan yerel proje dizininin kökü itibaren firebase emulators:start .
  3. Her zamanki gibi bir Realtime Database platformu SDK'sını veya Realtime Database REST API'sini kullanarak uygulamanızın prototip kodundan çağrı yapma.

Detaylı bir Gerçek Zamanlı Veritabanı ve Bulut İşlevleri içeren örneklerde mevcuttur. Ayrıca bir göz sahip olmalıdır Yerel Emülatörü Suite giriş .

Bir veritabanı referansı alın

Okuma veya yazma verileri veritabanından, sen bir örneğini ihtiyaç için firebase.database.Reference :

Web sürümü 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web sürümü 8

var database = firebase.database();

Veri yaz

Bu belge, veri almanın temellerini ve Firebase verilerinin nasıl sıralanıp filtreleneceğini kapsar.

Firebase veriler için bir zaman uyumsuz dinleyici takılarak alınan firebase.database.Reference . Dinleyici, verilerin ilk durumu için bir kez ve veriler değiştiğinde yeniden tetiklenir.

Temel yazma işlemleri

Temel yazma işlemleri için, kullanabileceğiniz set() o yolda herhangi mevcut verileri değiştirerek, belirli bir referansa verileri kaydetmek. Örneğin Sosyal blog uygulaması ile bir kullanıcı eklemek olabilir set() aşağıdaki gibi:

Web sürümü 9

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

Web sürümü 8

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

Kullanımı set() , tüm alt düğümler dahil belirtilen yerde verileri yazar.

Verileri oku

Değer olaylarını dinleyin

Kullanmak, bir yolda verileri okumak ve değişiklikler için dinlemek için on() veya once() yöntemlerini firebase.database.Reference olaylarını gözlemlemek.

Etkinlik Tipik kullanım
value Bir yolun tüm içeriğindeki değişiklikleri okuyun ve dinleyin.

Sen kullanabilirsiniz value onlar olayın anda varolan gibi, belirli bir yol üstündeki içindekiler statik anlık okumak için olay. Bu yöntem, dinleyici eklendiğinde bir kez ve çocuklar dahil veriler her değiştiğinde tekrar tetiklenir. Olay geri araması, alt veriler de dahil olmak üzere o konumdaki tüm verileri içeren bir anlık görüntüden geçirilir. Hiçbir veri yoksa, anlık dönecektir false Aradığınızda exists() ve null çağrı val() Üzerinde.

Aşağıdaki örnek, veritabanından bir gönderinin yıldız sayısını alan bir sosyal blog uygulamasını göstermektedir:

Web sürümü 9

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

Web sürümü 8

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

Dinleyici aldığı snapshot etkinliği sırasında veritabanında belirtilen yerde veri içerir. İçeri veri alabilir snapshot ile val() yöntemiyle.

Verileri bir kez oku

get() ile verileri bir kez okuyun

SDK, uygulamanız ister çevrimiçi ister çevrimdışı olsun, veritabanı sunucularıyla etkileşimleri yönetmek için tasarlanmıştır.

Genel olarak, arka uçtan verilerde yapılan güncellemelerden haberdar olmak için verileri okumak için yukarıda açıklanan değer olayı tekniklerini kullanmalısınız. Dinleyici teknikleri, kullanımınızı ve faturalandırmanızı azaltır ve kullanıcılarınıza çevrimiçi ve çevrimdışı olduklarında en iyi deneyimi sunmak için optimize edilmiştir.

Eğer sadece bir kez veri gerekiyorsa, kullanabilirsiniz get() veritabanından verilerin anlık görüntüsünü alır. Herhangi bir nedenle için ise get() sunucu değeri döndürmek edemez, istemci yerel depolama önbelleği soruşturma ve değeri hala bulunmazsa bir hata döndürür.

Gereksiz yere kullanılması get() yukarıda gösterildiği gibi gerçek zamanlı bir dinleyici kullanılarak önlenebilir performans kaybı, bant genişliği ve kurşun kullanımı artırabilir.

Web sürümü 9

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

Web sürümü 8

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

Bir gözlemci ile verileri bir kez okuyun

Bazı durumlarda, sunucuda güncellenmiş bir değer olup olmadığını kontrol etmek yerine yerel önbellekteki değerin hemen döndürülmesini isteyebilirsiniz. Bu gibi durumlarda kullanabileceğiniz once() hemen yerel disk önbellekten veri almak için.

Bu, yalnızca bir kez yüklenmesi gereken ve sık sık değişmesi beklenmeyen veya etkin dinleme gerektirmeyen veriler için kullanışlıdır. Örneğin, önceki örneklerdeki blog uygulaması, yeni bir gönderi yazmaya başladığında bir kullanıcının profilini yüklemek için bu yöntemi kullanır:

Web sürümü 9

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

Web sürümü 8

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

Verileri güncelleme veya silme

Belirli alanları güncelle

Aynı anda kullanmak, diğer alt düğümlerin üzerine yazmadan bir düğümün belirli çocuklarına yazmak için update() yöntemini.

Çağrılırken update() , sen anahtarı için bir yolu belirterek düşük seviyede bir alt değerleri güncelleyebilirsiniz. Veri daha iyi ölçekli birden çok yerde saklanıyorsa, kullandığınız verilerin tüm örneklerini güncelleyebilirsiniz veri fan-out .

Örneğin, bir sosyal blog uygulaması bir gönderi oluşturabilir ve bunu aynı anda aşağıdaki gibi bir kod kullanarak en son etkinlik akışına ve gönderiyi paylaşan kullanıcının etkinlik akışına güncelleyebilir:

Web sürümü 9

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

Web sürümü 8

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

Bu örnek kullanır push() tüm kullanıcılar için mesajları içeren düğümünde bir yayın oluşturma /posts/$postid ve aynı anda anahtarı almak. Anahtar o zaman en Kullanıcı mesajlarının ikinci giriş oluşturmak için kullanılabilir /user-posts/$userid/$postid .

Bu yolları kullanarak, tek bir çağrıyla JSON ağacında birden fazla konuma eşzamanlı güncelleştirmeler gerçekleştirebilen update() böyle bu örnek her iki konumda da yeni yayın oluşturulur nasıl gibi. Bu şekilde yapılan eşzamanlı güncellemeler atomiktir: ya tüm güncellemeler başarılı olur ya da tüm güncellemeler başarısız olur.

Tamamlama Geri Araması Ekle

Verilerinizin ne zaman kaydedildiğini bilmek istiyorsanız, bir tamamlama geri araması ekleyebilirsiniz. Her iki set() ve update() yazma veritabanına taahhüt edilmiştir çağrılan isteğe bağlı bir tamamlama geri arama almak. Çağrı başarısız olursa, geri arama, hatanın neden oluştuğunu belirten bir hata nesnesi iletilir.

Web sürümü 9

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...
});

Web sürümü 8

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

Verileri sil

Silme verilere en basit yolu aramaktır remove() bu verilerin konumun referansı üzerine.

Ayrıca belirterek silebilirsiniz null gibi başka yazma işlemi için değer olarak set() veya update() . Sen ile bu tekniği kullanabilirsiniz update() tek bir API çağrısında birden fazla çocuk silmek için.

Bir alma Promise

Veri Firebase Gerçek zamanlı Veritabanı sunucusuna kararlıdır geldiğinde bir kullanabilirsiniz bilmek için Promise . Her iki set() ve update() bir dönebilirsiniz Promise yazma veritabanına kaydedilmiş haber verilmesini kullanabilirsiniz.

Dinleyicileri ayır

Callbacks arayarak kaldırılır off() sizin Firebase veritabanı Referanstaki yöntemi.

Sen bir parametre olarak ileterek tek dinleyici kaldırabilir off() . Arayan off() argüman olmadan yere bu konumdaki tüm dinleyicileri kaldırır.

Arayan off() otomatik olarak alt düğümler üzerinde kayıtlı dinleyicileri kaldırmaz bir ebeveyn dinleyici üzerinde; off() ayrıca geri arama kaldırmak için herhangi bir çocuk işleyicilerinizde çağrılmalıdır.

Verileri işlem olarak kaydedin

Böyle sayıcı olarak eşzamanlı değişiklikler, tarafından bozulmuş olabilir verilerle çalışırken, bir kullanabilir işlem operasyonu . Bu işleme bir güncelleme işlevi ve isteğe bağlı bir tamamlama geri araması verebilirsiniz. güncelleme işlevi, verilerin mevcut durumunu bir argüman olarak alır ve yazmak istediğiniz yeni istenen durumu döndürür. Yeni değeriniz başarıyla yazılmadan önce başka bir istemci konuma yazarsa, güncelleme işleviniz yeni geçerli değerle tekrar çağrılır ve yazma işlemi yeniden denenir.

Örneğin, örnek sosyal blog uygulamasında, kullanıcıların gönderilere yıldız eklemesine ve yıldızları kaldırmasına ve bir gönderinin kaç yıldız aldığını aşağıdaki gibi takip etmesine izin verebilirsiniz:

Web sürümü 9

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

Web sürümü 8

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

Bir işlemin kullanılması, birden fazla kullanıcının aynı gönderiye aynı anda yıldız vermesi veya istemcinin eski verileri olması durumunda yıldız sayılarının yanlış olmasını önler. İşlem reddedilirse, sunucu, işlemi güncellenen değerle yeniden çalıştıran istemciye mevcut değeri döndürür. Bu, işlem kabul edilene veya siz işlemi iptal edene kadar tekrarlanır.

Atomik sunucu tarafı artışları

Yukarıdaki kullanım durumunda, veritabanına iki değer yazıyoruz: gönderiye yıldız atan/yıldızı kaldıran kullanıcının kimliği ve artan yıldız sayısı. Kullanıcının gönderiye yıldız eklediğini zaten biliyorsak, işlem yerine atomik bir artış işlemi kullanabiliriz.

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

Bu kod bir işlem işlemi kullanmaz, bu nedenle çakışan bir güncelleme varsa otomatik olarak yeniden çalıştırılmaz. Ancak artırma işlemi doğrudan veritabanı sunucusunda gerçekleştiği için çakışma olasılığı yoktur.

Bir kullanıcının daha önce yıldız verdiği bir gönderiye yıldız eklemesi gibi uygulamaya özel çakışmaları algılamak ve reddetmek istiyorsanız, bu kullanım durumu için özel güvenlik kuralları yazmalısınız.

Verilerle çevrimdışı çalışın

Bir istemci ağ bağlantısını kaybederse uygulamanız düzgün şekilde çalışmaya devam eder.

Bir Firebase veritabanına bağlanan her istemci, herhangi bir etkin verinin kendi dahili sürümünü tutar. Veri yazıldığında, önce bu yerel sürüme yazılır. Firebase istemcisi daha sonra bu verileri uzak veritabanı sunucuları ve diğer istemcilerle "en iyi çaba" temelinde senkronize eder.

Sonuç olarak, veritabanına yapılan tüm yazma işlemleri, sunucuya herhangi bir veri yazılmadan hemen önce yerel olayları tetikler. Bu, uygulamanızın ağ gecikmesinden veya bağlantıdan bağımsız olarak yanıt vermeye devam edeceği anlamına gelir.

Bağlantı yeniden kurulduğunda, uygulamanız uygun olay kümesini alır, böylece istemci herhangi bir özel kod yazmak zorunda kalmadan mevcut sunucu durumuyla eşitlenir.

Biz de çevrimdışı davranış hakkında daha fazla konuşacağız daha yaklaşık çevrimiçi ve çevrimdışı yetenekleri öğrenin ..

Sonraki adımlar