Bir İçeriğin Görüntülenme Sayısını Redis, Signalr ve Bulk DB İşlemleri ile Bulma ve Anlık Raporlama 2

Selamlar,

Bu makalede bir önceki makale olan Bir İçeriğin Görüntülenme Sayısını Redis, Signalr ve Bulk DB İşlemleri ile Bulma ve Anlık Raporlama kısmının anlık raporlama(angularJs ve Bootstrap) ve soceket kısmını (signalr) işleyeceğiz. Ayrıca var olan son dakika datasını Sql’den çekip, admin bir ekranda göstereceğiz.

Öncelikle datanın göstereleceği Admin sayfası yaratılır ve ilgili packagelar Nugetden indirilir.

pacage2

HomeController/Index: Aşağıda görüldüğü gibi ilgili actionda hiçbir işlem yapılmamaktadır. Doğrudan view’a gidilmektedir.

Index.cshtml: Sayfaya aşağıdaki javascript ve css dosyaları yanında bir de signalR magic script’i eklenir.

Counter.js :

  • app : Angular module’ü “app” adında yaratılır.
  • controller :  AngularJs altında app’e ait controller “Controller” adında yaratılır.
  • hubProxy : Backend taraftaki “CounterHub” sınıfına bağlanır.
  • disconnected: Bu durumda client 2sn sonra tekrar connect olmaktadır.
  • GetCounterReport() : İlgili method backend tarafta “OnConnected” durumunda  yani client sayfaya geldiğinde ilgili article, video ve photogallery datası çekilip model olarak geriye dönülür. Geri dönen “result” “$scope.ArticlesCounters, $scope.ImagesCounters ve $scope.VideosCounters” angular propertylerine doldurulur.
  • GetCounterReport ile minute ve second değişkenleri de paramtere olarak alınır. Bu değişkenler de ileride bahsedilecek olan “CountDown()” yani geri sayım function’ı içinde kullanılır.

why-choose-angularjs-for-your-next-app1

CounterHub : Şimdi gelin isterseniz “OnConnected()” durumunda sadece bağlanan Client’ın “GetCounterReport()” function’ını call eden “Hub” sınıfını yaratalım.

  • Last1MinutePeriod : Client’a kalan süreyi belirlemek için 1 dakikalık bir sayaç konulacaktır. Geri sayım için global olarak tutulan bu 1 dakikalık sürenin değeri bu property’de tutulur.
  • oneminsub : 1 dakikalık sürenin tamamlanmasına kalan süreyi temsil eder.
  • CounterViewModel: İlgili client’a gönderilecek olan, içinde Article,Images ve Video propertylerinin bulunduğu modeldir. “GetCountersReport()” methodu ile doldurulur.
  • Son olarak connect olan client’ın “GetCounterReport()” function’ı, bu doldurulan model ve ilgili parametreler ile asenkron olarak SignalR sayesinde trigger edilir. Yani server side’dan ==> client side’a doğru bir push işlemi yapılır.

CounterViewModel: Clientlara gönderilen View model aşağıdaki gibidir.

ViewModel’e geri dönülen “<CounterItemResult>” aşağıdaki gibidir:

Database işlemlerinin yapılacağı “IStatsDao” interface’i aşağıda görülen methodları içermektedir.

Son olarak ilgili Content içeriğine göre (Makale, Video ve Resim) şeklinde “CounterItemResult” tipinde data dönen “sd.GetCountersReport()” methodu aşağıdaki gibidir. Aşağıda kullanılan “_dbConnectionFactory” bir dapper factory sınıfıdır. Bu sınıf, konu dahilinde olmadığı için deyinilmeyecektir. Bu methodda “GetCounterItemsByParams” procedure’ü çağrılmıştır.

GetCounterItemsByParams: Aşağıda görüldüğü gibi ilgili içerik tipine (ContentTypeID), başlığa(title) , id’sine(ContentId), sayfada bulunduğu yere (PageComponentId) ve Url’ine göre guruplanıp, son 1 dakikalık ve en başından beri olan toplam okunma sayıları geri dönülür.

Şu ana kadar Client online olunca signalR ile Hub sınıfına connect olduk. İlgili datayı procedure ile çektik ve ilgili modeli Client’ın “GetCounterReport()” function’ına gönderdik.

Şimdi sıra geldi ilgili datayı angularJs ile ekrana basmaya: Gelin her adımı madde madde incelemeye başlıyalım:

Index.cshtml: Aşağıdaki kodlar bölüm bölüm hemen aşağısında anlatılmaktadır.

  • BÖLÜM 1 :  Bu bölümde 1 dakikadan geriye doğru sayılmaktadır. “countdown” divinin içine aşağıdaki function ile kendisine parametre gelen “dakika ve saniye”‘ye göre timer ile geriye doğru sayılır.  Burada amaç monitoring işlemi  yapan client’a, data yenilemesi yapılmasına daha ne kadar kaldığının gösterilmesidir. Bu süre, admin sayfasına girilen tüm clientlar için geçerli ve aynıdır.

images

  • BÖLÜM 2 : Burada gösterilecek kolon başlıkları ve tıklandığında sıralanması istenen kolonlar tanımlanmaktadır. Sıralama işlenminde “sortType” ile hangi kolona göre sıralanacağını, “sortReverseArticle” ile de sıralama yönü yani “asc,desc” belirlenmiştir.
  • BÖLÜM 3 : “Articles” modeli gezilerek bir table’a basılır. Burada 2 durum söz konusudur.
  1. cisi : “orderBy:sortType:sortReverseArticle” yani sıralama işleminin yapıldığı kısımdır. “orderBy” angularJS sıralama directive’dir.
  2. cisi ÖNEMLİ: “<ng-style=”{‘background-color’: (gallery.PageComponentId | customColor)}“: Burada içeriğin “PageComponentId”‘si yani sayfadaki yerine göre arka renginin angularJS’in Custom Filter’ı ile değiştirilmesidir. İlgili custom filter aşağıdaki gibidir. Geri kalan kolonlara ilgili haberin detayına ve admin ekranına giden linkler angularJS’de “ng-href” directive’i ile tanımlanmıştır. Galeri ve Video tabloları içinde aynı işlemler yapılmıştır. Tek fark “ContentType”‘dır.

Custom Filter[customColor]:

Sıra geldi bir önceki makalede atlanan, eğer gelen içerik 1 dakikalık süreyi doldurmuş ise yapılacak DB’ işleminden sonra çağrılacak olan SignalR adımına:

signalrcomputers1

Amaç 1 dakika süresi dolduğu zaman rediste depolanan tüm 1 dakikalık datayı, monitor eden clientlar’a Push etmektir: Aşağıda görüldüğü gibi yukarıda anlatılan “GetCountersReport()” methodu ile ilgili içerik tipine ait son 1 dakikalık haberler çekilir. Daha sonra oluşturulan bu model

GlobalHost.ConnectionManager.GetHubContext<CounterHub>()

methodu ile ilgili “Hub” sınıfına erişip, o an bağlı olan tüm clientların üzerindeki “GetCounterReport()” function’ını tetikler. Son 1 dakikalık haber datası ve kalan süre dakika ve saniye cinsinden geri dönülür.

hubContext.Clients.All.GetCounterReport(model, countersub.Minutes, countersub.Seconds);

Böylece 1 dakika içinde okunan haberlerin video, photo ve makale tiplerine göre, impression sayılarını redis in memory bir yapıda saydırdık. 1 dakikanın sonunda ilgili “Statistic:*” keyi ile başlıyan tüm haberleri bir data table’da toplayıp, ilgili procedure’e kümülatif bir parametre olarak gönderdik. Toplam okunma sayıları bir tabloya, son 1 dakikalık görüntülenmeleri de bir başka tabloya kaydedilip oluşturulan result set, signalR kullanılarak ilgili tüm clientlara gönderildi. Client Side tarafda angularJs ve bootstarp’in gücü kullanılarak gelen model yapısı, custom filter ve directiveler kullanılarak ekrana basılıp yenilendi. Bu işlem her 1 dakikada bir client tarafda sayılan bir sayaç ile gösterilerek tekrarlandı.

Bu makalede kodların tamamına girmektense, amaca uygun yolları ve mimariyi bir parça olsun size tanıtmak istedim. Böylece hem performans için bir fikir oluşturmuş hem de yenilkçi metodolojiler ile kodlamanın ne kadar kolay olabileceğini göstermiş olduk.

Bir makalenin daha  sonuna geldik. Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir