Firebase (JS) ile Gerçek Zamanlı Veri Tabanı

Javascript Firebase Web Kullanımı

Bu yazı, web uygulamaları arasındaki iletişim için Firebase'in Javascript ile Gerçek Zamanlı Veritabanını (Real Time Database) anlatan Türkçe dökümantasyondur. 
Gerçek Zamanlı Veritabanı, istemciler ve sunucu arasındaki iletişim için Websockets kullanır.

Firebase Nedir , Özellikleri?

JSON formatı ile verilerimizi  gerçek zamanlı olarak depolayabildiğimiz, anlık olarak değişiklikleri görebildiğimiz websocket apisidir. Cloud Firestore, Cloud Functions,Authentication, Hosting, Cloud Storage ,Realtime Database...

WebSocket ve Real time Nedir?

WebSocket, tek bir TCP bağlantısı üzerinden iki yönlü iletişim kanalı sağlayan bir iletişim protokolüdür. WebSocket protokolü, sunucuya ve sunucudan gerçek zamanlı veri aktarımını sağlayarak, tarayıcı ile web sunucusu arasında etkileşimi sağlamaktadır. Bu, sunucunun istemci istemeden tarayıcıya içerik gönderebileceği ve bağlantıyı açık tutarak istediği zaman mesaj alabilmesini veya gönderebilmesini sağlayan standart bir yöntem ile sağlanmaktadır. Bu şekilde, tarayıcı ile sunucu arasında iki yönlü devam eden bir iletişim gerçekleşebilir. [1]

Giriş

İhtiyacımız olan ilk şey Firebase'de bir hesap almak ve bir proje oluşturmak. Burdan konsola gidiyoruz.

Proje ismini belirleyip kendimize bir yeni proje açıyoruz.

Bu aşamaları geçtikten sonra artık web projelerimizde kullanmak için config ayarlarımızı aşağıdan alabiliriz. Web olanı seçiyoruz.

Aşağıdaki kodu kendinize göre düzenleyebilir yada yukardan kendiniz de hazır halini kopyalayabilirsiniz.

// Firebase Javascript Kodları
// Firebase Config
var config = {
    apiKey: "[api key]",
    authDomain: "[auth domain]",
    databaseURL: "[database url]",
    storageBucket: "[storage bucket]",
    messagingSenderId: "[messaging sender id]"
};
app = firebase.initializeApp(config);

var inited = false;
var user;
app.auth().onAuthStateChanged(function(user) {
    if (user) {
        // Anonim giriş 
        window.user = user;
        console.log("User:", user.uid);
        if (!inited) {
            inited = true;
            init();
        }
    } else {
        app.auth().signInAnonymously().catch(function(error) {
            console.log(error);
        });
    }
});

// Firebase hazir oldugunda calisacak fonksiyon
function init() {
    var db = app.database();

}
 

Veritabanına veri yazma

Veritabanına veri yazmak için anahtar kelime ile referans belirleyip veriyi set ediyoruz.

var db = app.database();
db.ref("anahtarKelime").set("Cift Klik");

//Gönderdiğimiz veriler nesne object de olabilir.

db.ref("user").set({username: "Mustafa", email:"info@ciftklik.net"});

Push fonksiyonu

Ayrıca verileri eklerken set etmek yerine push fonksiyonu ile veri koleksiyonu oluşturabiliriz. Push edilen verilerden gelen referans ile değişiklik yapabiliriz.

//push fonksiyonu ile veri yazdık. Verinin referansını bir değişkene aktardık.
var pushedRef = db.ref("log").push({data:"örnek data", time:"22/07/2018"});

pushedRef.set({data:"Bir hata bulundu", time:"22/07/2018"});
//referansını aldığımız nesneyi güncelledik.

Güncelleme ve Silme

Herhangi bir veriyi güncellemek ve silmek istersek

//user'ın altında username'i güncelle
db.ref("user").child("username").set("demozart"); 
// yada böyle yapabiliriz.
db.ref("user/username").set("demozart");
//veriyi silmek için
db.ref("anahtarKelime").set(null);
//db.ref("anahtarKelime").remove();

Veri Değişikliklerini Dinleme

Verileri anlık olarak güncellediğinde haberdar olmak için on() fonksiyonu ve value olayını kullanıyoruz.

db.ref("username").on("value", function(snapshot) {
    console.log("username degisti: ", snapshot.val());
});
//Cocuk nesneleri dinlemek için
db.ref("log").on("child_added", function(snapshot) {
    console.log(snapshot.val());
});

Kodunuzu birkaç kez çalıştırırsanız, birkaç kez on("child_added")çağrıldığını görürsünüz .
Bunun nedeni, olayın koleksiyondaki tüm mevcut öğeler için tetiklenmesidir. limitToLast(n) Fonksiyon kullanılarak senkronize edilecek çocuk sayısını sınırlayabiliriz :

//Bu, başlangıçta yalnızca iki etkinliği tetikler
// ve sonra her yeni eklenen çocuk için tetikler.
db.ref("log").limitToLast(2).on("child_added", function(snapshot) {
    console.log(snapshot.val());
});

OnDisconnect

Belirli bir kullanıcının bağlantısı kesildiğinde (tarayıcı penceresini kapatarak, ağ bağlantısının kesilmesiyle), istediğimiz işi yaptırabiliriz.

var userRef = db.ref("username").push({username:"demozart"});
userRef.onDisconnect().remove();
//kullanicinin baglantisi koptugu zaman username'i sil

Yararlandığım kaynaklar

[1]  https://tr.wikipedia.org/wiki/WebSocket
[2]  https://codepen.io/jorgecardoso/post/lesson-websockets-with-firebase
[3]  https://firebase.google.com/docs/web/setup?authuser=0