Ana içeriğe atla

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


Yorumlar

  1. GERÇEK TEN ADAMSIN <3 https://www.youtube.com/channel/UCtgXFPhcmomQmiBtAY7FSXA?view_as=subscriber

    YanıtlaSil
  2. daha ayrıntılı anlatırmısınız

    YanıtlaSil
  3. Firebase'in kendi dokümantasyon'undan daha fazla bilgiye ulaşabilirsiniz.

    YanıtlaSil
  4. Firebase'e başlamamda yardımcı oldu. Teşekkürler

    YanıtlaSil

Yorum Gönder

Okuyup geçme yorum yap lütfen :)

Yorumunuz cevaplandığında bildirim almak için Beni bilgilendir'i işaretleyin.

Bu blogdaki popüler yayınlar

WhatsApp Şaka Virüsü

Whatsapp Şaka virüsü ile internetten anlamayan arkadaşlarınıza link atarak eğlenebilirsiniz. Sosyal mühendisliğiniz ne kadar iyiyse inandırıcılıkta artar. Hem android hem ios kullanıcılarında çalışır. Baştan söyleyelim bu virüs değildir. Yine siz bilirsiniz. Bu aralar hacklenmedik sistem kalmadı :D CiftKlik.Net olarak sorumluluk kabul etmiyoruz. Whatsapp api'ları ile ekrana istediğimiz yazıyı yazarak sosyal mühendislik yapıyoruz.

Bütün yazılım dillerinde "Merhaba Dünya" kodları

1)  ASSEMBLY // Ekrana “Merhaba!” yazan örnek program kodu: mov ax,cs mov ds,ax mov ah,9 mov dx, offset Git int 21h xor ax,ax int 21h Git: db "Merhaba!",13,10,"$" 2)  ALGOL (ALGOrithmic Language) // ALGOL 68'e ait, örnek “Merhaba!” kodu: begin print(( "Merhaba!" , newline)) end

İnönü Üniversitesi Bilgisayar Mühendisliği

Mezun oldum İnönü Üniversitesi Bilgisayar Mühendisliğinden yeni mezun olmuş birisi olarak Mühendislik Fakültesi hakkında soru cevap olarak bölüm hakkında bilgi vermiş olacağım. Bilgisayarın bitinden, mimarisine, algoritmasından her şeyine bir fikir sahibi, bu fikirle kodlama yapabilecek seviyeye geldim. Gurbeti yaşadım. Evsiz barksız kalmanın yaşattığı hüznü anladım. Bir selamcık dost kavramını öğrendim. Farklı şehirlerden, farklı kültürden, farklı dilleri konuşan arkadaşlarım oldu.  Dost dediklerimden daha hatır bilen kişilere abilik yaptım, yol gösterecek abiler edindim. Yazılım dünyasından pek çevre yapamasam da güzel insanlar karşıma çıktı. Sınav saatine kadar dışarıda kaldığım zor günler yaşadım. Herkesin kaldığı sınavdan gözü kapalı geçtiğim ;) soru/cevap olmasına rağmen kaldığım sınavlar da oldu. Büyük şirketlerin açıklarını buldum, hala kapatılmadı.