Öncelikle sizlere biraz Firebase deki kavramlardan bahsedeyim. Firebase, datanın ilk geldiği andan itibaren ve yapılan değişikliklerde, bizi haberdar etmek için Event-Driven Model'i kullanır. Eğer daha önceden Node.js kullandıysanız, evented programming size aşina gelebilir ama en çok kullanılan klasik istek-yanıt(request-reply) uygulama modelinden önemli ölçüde farklılık gösterdiği için tekrardan gözden geçireceğiz.

İstek-yanı modelinde, sizin uygulamanız server'a data yollar, serverınız muhtemelen istenen datayı, cliente yollamadan önce, SQL (veya NoSQL) veritanı ile ve external API'lerle etkileşimde olacaktır. Yanıt bir kere geldiğinde, alış-veriş biter. Client uygulamanız her zaman yeni data (boş da dönmesi aynıdır) alacağını bilir çünkü herhangi bir data gelmeden önce her zaman explicitly olarak istekte bulunmak zorundadır.

Datayı elde etmek için event'leri kullandığımızda, handler'larımız, server cevapladıktan sonra sadece bir kereliğine çağrılmaz. Bunun yerine, birçok kez çağırabilir.  Bu çağırma durumları ilk olarak bize datayı yolladığı anda ve datamızda bir değişiklik olduğu zamanlardır. Şimdi ileride bahsdeceğim uygulamadan basitleştirilmiş bir bölümü inceleyelim

function logVisitorCount (snapshot) {
  console.log('There are currently ', snapshot.val(), ' visitors on the site');
}
totalVisitors.on('value', logVisitorCount);

totalVisitors bizim Firebase referansımız. Yakında bunun nasıl oluşturulacağını kavrayacağız. Burada "value" eventi için bir listener ekliyoruz ve callback olarak logVisitorCount'u geçiriyoruz. Firebase JavaScript API, totalVisitors da gerçekleşen her değişiklik için logVisitorCount fonksiyonunu çağıracak. İlk istekte veya eski datayı yenilemede, explicitly olarak data isteğinde bulunmak yerine, Firebase bize senin yeni data bu diyor ve böylece bizde ekrandaki içeriği güncelleyebiliriz.

Modellerden sonra bir diğer kavramda Schema. Temelinde Firebase database büyük bir JSON objesidir. Herhangi bir tablo bulunmamaktadır. Datanızı istediğiniz gibi organize edebilir, schemanızı (şemanızı) herhangi bir zamanda değiştirebilir ve objelerinizi ve değerlerini istediğiniz gibi oluşturabilirsiniz. Burada uygulamamız da kullancağımız analiz için örnek bir data var:

{
  "totalVisitors": 5,
  "activeVisitors": {
    "-IKo28nwJLH0Nc5XeFmj": {
      "path": "/",
      "arrivedAt": 1413392152630,
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36"
    }
  },
  "pastVisitors": {
    "-INOQPH-aV_psbk3ZXEX": {
      "path": "/",
      "arrivedAt": 1413392151219,
      "leftAt": 1413392155419,
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36"
    }
  }

Burada activeVisitors ve pastVisitors'ün uzun bir rastgele isme sahip olduğuna dikkat ediniz. Bunun nedeni Firebase alışıldık key ile array'in datasına ulaşmayı kullanmıyor veya collision a izin vermiyor. Bir örnek ile anlatacak olursak:

// ref = ['foo'];
ref.push('bar');

aynı anda başka bir client ise

ref.push('baz');

ile eklemeye çalışıyor. Ne olurdu? Eğer alışıldık JavaScript numeric arraylerini kullanıyorsanız, iki client de ref[1] e yazmayı dener. Herkim server'a en son ulaşırsa, ilk gelen datayı overwrite edecek. Böyle bir durum olmasını kesinlikle istemeyiz hele ki real-time uygulamalarda ! Array kullanmak yerine,F '-IKo28nwJLH0Nc5XeFmj' gibi otomatik üretilmiş bir nesne anahtarı ile ulaşılabilir. Bu anahtarlar eşsiz(unique) client idsi ve timestamp'in birlikte encode edilmesiyle otomatik olarak oluşturulur. Bu durumda birden çok client aynı anda data yazabilirler ve herhangi bir collision meydana gelmez ve sıralı bir şekilde tutulur.

Firebae hiyerarşik bir yapıda olduğundan, URL path ile ulaşmanız mümkün. Firabase veritabanının rootu https://yusufcakmakdeneme.firebaseio.com olarak çağrılır. pastVisitors'a direk olarak erişmek için, https://yusufcakmakdeneme.firebaseio.com  'u değiştirmemiz lazım.

Şimdi bu kadar teorik bilgiden sonra azıcık uygulamaya koyulalım. İki tane ana bileşenimiz olacak: analiz datalarımızı Firebase'e göndreceğimiz kod ve datamızı okumak için basit bir dashboard. Projemizin yapısı şu şekilde olacak:

analytics.js
dashboard.js
dashboard.html
sample-page/
 index.html

İlk olarak analytics üzerinde çalışacağız ve bütün datalarımızı Firebase'e yazacağız.

Bir sonraki makalede görüşmek üzere!