Bir İş Görüşmesinde Detaylı İstenen Proje Bölüm2

Selamlar;

Bugün bir önceki makaleden, bir iş görüşmesinde detaylı istenen bir projedeki geri kalan maddeleri tamamlıyacağız:

  1. Basit bir UI form hazırlayıp gelen “Kur İsmlerini” Türkçeden İngilizceye çevirerek gösteriniz. TUR->ENG. Örnek(ABD DOLAR->USA Dollar  İNGİLİZ STERLİNİ -> Great Britain Pound)
  2. Dataları sürekli Database’den dinleyip güncellenenleri, Jquery kullanarak Mvc bir sayfada gösteriniz.
  3. Dataları sürekli Database’den dinleyip güncellenenleri, SignalR kullanarak Mvc bir sayfada gösteriniz.

İlk projemiz 2.Madde olan Jquery ile timer kullanılıp dataların çekilip ekrana basılmasıdır. Öncelikle “CurrencyRates“yeni bir Empty Mvc Projesi yaratılır.

Views/Home/JqueryCurrency.cshtml(Full): Aşağıda görüldüğü gibi ilgili view bir önceki makalede bahsettiğimiz “CurrencyReport” adında bir @model beklemektedir. “CurrencyRate” id’li div’in içine “CurrencyList” adında partial view ilgili model ile birlikte aşağıdaki gibi basılmaktadır. Son olarak her dakikada bir (60000) “RefreshData()” function’ı çağrılarak “CurrencyList()” methoduna post yapılmakta ve geri dönen PartialView “CurrencyList” div’inin içine sayfa post olmadan basılmaktadır. Böylece güncel data 1/dak bir yenilenerek client’a gösterilmektedir.

HomeController.cs/JqueryCurrency(): Sıra geldi ekrana bastığımız JqueryCurrency View’ına ait Action’a. Aşağıda görüldüğü gibi bir önceki makalede yazılan “CurrencyService” adlı WebApi servisinden, ilgili datalar asenkron olarak çekilmektedir. Öncelikle performance amaçlı “CurrencyData” adlı cache kullanılmış, ilgili datalar “30sn” süre ile ilgili cache’e atılıp çekilmiştir. İlgili cache’in 30sn sonunda null olması durumunda gerekli data WebApi servisinden çekilip ilgili cache tekrardan 30sn süre için doldurulmaktadır. WebApi servisinin yolu her zaman değişebileceği ve dışarıya bağımlı bir durum olduğu için web.config altına “baseApiAddress” ismi ile tanımlanmıştır. Böylece sayfa derlenmeden ilgili yol değiştirilebilmektedir.

Not: Controller kısmında hiçbir bussines işlem yapılmamış ve bu işlem webservisine bırakılmıştır. Böylece hem entityframework gibi sınıflar burada tanımlanmamış hem de bussines’da bir değişiklik olduğu zaman kullanıcıya gösterilen portal durdurulmadan bir başka proje üzerinde derleme işlemi kolaylıkla yapılabilmiştir. Ayrıca bu dağıtık mimari ile farklı projelerde farklı kişilerin kolaylıkla  çalışması sağlanmıştır.

Son olarak çekilen data “JqueryCurrency” view’ı ile birlikte döndürülmektedir.

Web.config: Tanımlanan web.config aşağıdaki gibidir.

JqueryCurrency.cshtml sayfasının görünümü aşağıdaki gibidir.

Jquery

Views/Home/CurrencyList.aspx(Partial View)(Full): Jquery Currency sayfasında ilgili div’in içinde, çekilen kur değerlerinin gösterildiği partial viewdır. Css olarak bootstrap kullanılmıştır. Bu neden ile “bootstrap.min.css” ve “bootstrap.min.js” kütüpahaneleri eklenmiştir. View Engine olarak Razor kullanılmıştır. İlgili “List<DAL.CurrencyReport>” model tek tek gezilip ekrana bir table içinde basılmıştır. Tablo tasarımında bootstrap css’leri(table table-hover table-bordered table-striped table condensed) yukarıda görüldüğü gibi kullanılmıştır.

Not: Buradaki en önemli kısım türkçe gelen datanın custom olarak yazılan “@Html.Translate()” html helper’ı ile ingilizceye çevrilmesidir.

Model/Helper.cs: Aşağıda görüldüğü gibi “Helper” static sınıfının “Translate()” adında yine static bir methodu vardır. “expression” değişekeni çevrilecek kelimeyi temsil etmekte ve parametre olarak alınmaktadır. İlgili kelime karşılığı “key”,”value” pair olarak “switch-case” yapısı ile kontrol edilmekte ve ingilizce karşılığı atanmaktadır.

Sıra geldi 2. sayfamız olan signalR ve anglarjs kullanan SignalrCurrency.cshtml sayfamıza. Öncelikle aşağıdaki paketler Nuget’den indirilir.

package

HomeController.cs/SignalrCurrency(): Aşağıda görüldüğü gibi herhangi bir data gönderilmemiş sadece view dönülmüştür.

Views/Home/SignalrCurrency.cshtml: Sayfanın başlangıcında eklenen script kütüpahaneleri aşağıdaki gibidir.

  • Sayfa içinde AngularJs framework’ünün kullanılabilmesi için “angular.min.js” eklenmiştir.
  • Bu sayfada dil desteği Angularjs ile verilecektir. Bu neden ile “angular-translate.min.js” sayfaya eklenmiştir.
  • signalR” jquery’e ihtiyaç duyduğu için “jquery-2.1.4.min.js” tanımlanmıştır.
  • Sayfada verilerin real time olarak gösterilebilmesi için signalR WebSocket teknolojisi kullanılmıştır. Bu yüzden “jquery.signalR-2.2.0.min.js” kullanılmıştır.
  • SignalR runtime’da kendisi için gerekli ilgili endpointleri oluşturup sayfa içine gömdüğü magic script “signalr/hubs”‘dır. Gerçekte böyle bir script yoktur. Buna “Magic Script” denir.
  • Bootstrap’in sayfada kullanılabilmesi için ilgili css ve script kütüpahaneleri “bootstrap.min.js ve bootstrap.min.css” sayfaya eklenmiştir.
  • Son olarak AngularJS yardımı çoklu dil desteğinin sağlanabilmesi için “key” “value” pair olarak türkçe kelimelerin ingilizce karşılğının ve AngularJS içerisinde ilgili modellerin doldurulup, güncellendiği script “SignalRCurrency.js” sayfaya eklenmiştir.

a) SignalRCurrency.js: Aşağıda görüldüğü gibi SignalrCurrency.cshtml’de signalR ilgili hub sınıfı olan “Currency”‘e bağlanıp connect edilmiştir. Ayrıca “disconnect” durumunda 3sn beklenip tekrar connect işlemi yapılmıştır.

b) SignalRCurrency.js(getAllData): SignalR’ın OnConnected durumunda aşağıdaki “getAllData()” signalR function’ı server side taraftan tetiklenip AngularJS’in “$scope.currencyDatas” property’si doldurulmuştur.

a) HomeController.cs/Currency(OnConnected):Hub : Aşağıda görüldüğü gibi signalR sınıfı “onConnected()” durumunda sadece bağlanan client için bunu “Clients.Caller“‘dan anlayabiliriz, ilgili data önceden yazılan WebApi servisinden asenkron olarak  Json data şeklinde çekilir. Daha sonra client side üzerindeki “getAllData()” function’ı ilgili data ile birlikte tetiklenir. Böylece sayfaya yeni bir client geldiğinde signalR sınıfına bağlanılıp ilgili datalar çekilir ve ekrana basılır.

b) HomeController.cs/Currency(FillData():Hub : Önceki makaleden hatırlayacağınız gibi TCMB’den ilgili kur bilgisini çeken Windows Service eğer database’de hiçbir kayıt yok ise signalR sınıfındaki FillData() methodunu aşağıdaki gibi tetiklemekte ve çekilen tüm data o an bağlı olan tüm clientlara real time olarak gösterilmektedir.

  • Windows Services (Insert): Windows servisden remote olarak Hub sınıfındaki ilgili methodun çağrılması.

  • Currency/FillData(): Aşağıda görüldüğü gibi signalR’ın connected olduğu durumda çağrılan client side tarafdaki “getAllData()” function’ı burda da aynı şekilde çekilen datalar ile birlikte tetiklenir.

c) HomeController.cs/Currency(UpdateData()):Hub : Önceki makaleden hatırlanacağı gibi TCMB ‘den ilgili kur bilgisini çeken Windows Service eğer database’de kayıt var ve sadece bir kısım data güncellenmiş ise ilgili değişikliğin tüm clientlarda real time gözükmesi için Hub sınıfına ait “UpdateData()” methodu değişen datalar ile birlikte tetiklenir.

  • Windows Services (Update): Windows servisden remote olarak Hub sınıfındaki ilgili methodun güncellenen datalar ile birlikte çağrılması.

  • Currency/UpdateData(): Aşağıda görüldüğü gibi windows services’den gönderilen değişmiş datalar(datas), o an connect olan tüm clientlara “UpdateData()” function’ı ile güncellenerek real time olarak gösterilir.

c) SignalRCurrency.js(UpdateData):  “$scope.currencyDatas”‘daki tüm kayıtlar tek tek gezilerek “isUpdate()” function ile değişen datalar içinde olup olmadığına bakılır. Değişen bir data ise ilgili data gelen güncellenmiş data ile değiştirilir.

Views/Home/SignalrCurrency.cshtml(Full): Aşağıda görüldüğü gibi bootstrap bir tabloya AngularJS ile çekilen kurlar bilgisi “$scope.currencyDatas” içinde tek tek “ng-repeat” ile gezilerek ekrana basılmaktadır. Burada dikkat edilecek en önemli kısım “| translate” custom directive’i dir. Türkçe olarak gelen kur isminin “CurrencyName”‘inin key-value pair olarak ingilizce karşılığı ekrana basılır.

SignalRCurrency.cshtml sayfasının görünümü aşağıdaki gibidir.

signalRView

Aşağıda Kur isimlerinin Türkçede=> İngilizce karşılıklarının yazıldığı “$.translateProvider” tanımlanmaktadır.

d) SignalRCurrency.js(app.config)$translateProvider:

Scripts/SignalRCurrency.js(Full):

Controllers/HomeController.cs(Full):

Böylece 2 bölümlük bir iş görüşmesinde istenen bir projeyi kodladık. Bu bölümde 2 farklı sayfa oluşturduk. Biri AngularJS ile dataların ekrana basıldığı ve SignalR WebSocket ile real time olarak güncellendiği bir sayfa. Diğeri Mvc Partial view ile bir div içine Razor engine kullanılarak basılan ve Jquery Timer ile her dakikada bir action’a post yapılıp ilgili son datayı partial view olarak ilgili div içine basan bir view yarattık. Çoklu dil desteği için Partial view sayfası için gene mvc’nin gücü kullanılarak @Html.Helper yazdık. AngularJS sayfası için ise bir çeşit custom directive olan “AngularTranslate” kullandık. Böylece Windows Services ve WebApi servisi kullanan 2 farklı Mvc sayfa yapısının real time data binding üzerine karakteristik davranışını hep beraber inceledik. Tabi tüm bu işlemler için database katmanında EntitiyFramework ve Codefirst kullandık.

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

Source Code: http://www.borakasmer.com/projects/CurrencyRates.rar

CurrencyRates Solution’ın genel yapısı aşağıdaki gibidir:

Currency

 

 

 

 

 

Herkes Görsün:

Sevebilirsin...

4 Yanıt

  1. Mustafa Torun dedi ki:

    Merak ettiğim kırk konu bir arada. ELine sağlık…

  2. Cem dedi ki:

    Yine çok başarılı bir çalışma.
    Emekleriniz için çok teşekkürler…

Bir Cevap Yazın

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