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.

Popüler Bloglar

Link tl reklam geçme

Link.Tl reklamı beklemeden geçmek! Link.tl de reklamlarla uğraşmadan javascript kod ile reklamı beklemeden bypass edip geçebilirsiniz. javascript : ciftklik = "http://link.tl/i" ; + document .location.pathname; window .location.href = ciftklik; Kodu Kopyala Tek yapmanız gereken yukarıdaki kodu yer imlerine eklemek. Daha sonra geçmek istediğiniz reklam da çalıştırmak. Link Geçme sitesi   online Videolu anlatım  Etiket bulutu: link tl atlama, link tl çevirici, link tl çeviri, link tl çözücü, link tl çalışan bot, link tl engelleme, link tl geçme, link tl geçici, link tl geçme sitesi, link tl hile, link tl hack, link tl hileleri, link tl link kısaltma, link tl link açma, link tl link çevirici, link tl script,link tl geçme, link tl geçici, link tl geçme sitesi, link tl geçilmiyor, link tl geçmiyor, link.tl geçemiyorum, link tl geç, link tl geçme 2017, link tl nasıl geçilir, link.tl otomatik geçme,link tl geçme 2018

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

Sesiniz Taklit Edilebilir : Google Dublex, Lyrebird

Text To Speech Teknolojisi  Google Dublex, Lyrebird, VoCo Google I/O etkinliği sırasında Google Assistant 'ın yeni özelliği Duplex tanıtıldı. Yapay zeka tabanlı konuşma teknolojisi ile sesinizi taklit ettirebilir. Telefon görüşmelerinizi,randevularınızı ona yaptırabilirsiniz. Belkide ilerde şarkı söyletebilir, şiir okutabilirsiniz. Aklınıza ne gelirse.