Azure Cloud Service Worker Role ile Sql Db’den Kurlara Göre TL Karşılığını Bulma Part2

Selamlar;

Bir önceki makalede bir şirketin  farklı kurlardaki ürün kayıtlarına, azure cloud service kullanarak belirli bir zaman aralığı ile baktık. Eğer işlem yapılmamış kayıt var ise o an ki güncel kur değerlerini bulup ilgili fiyat ile çarptık. Böylece ürünlerin TL karşılıklarını bulduk. Bugün ilgili ürün giriş ekranını, listelenmesini ve kaydedilmesini Mvc6.0, AngularJS  ve Code First kullanarak yapacağız. Daha sonra güncellenen ürünleri tüm clientlara signalR websocet teknolojisini kullanarak göndereceğiz.

entity

Öncelikle var olan solution’a boş bir mvc web projesi ekliyoruz. HomeController.cs ve Index.cshtml :

Untitled

Angular.js’i nuget’den projemize ekliyoruz. Ben AngularJS v1.3.8 versiyonunu indirdim.

Öncelikle ExportProductDetail database tablomuzun View Model karşılığını AngularJS’de $scope.Product olarak yaratıyoruz. $scope.ProductList[] ise kaydettiğimiz her bir product’ı ekleyeceğimiz liste. İlerde bu ProductList[]’i sıralayarak ürün listesini göstereceğiz.

Aşağıda ürün giriş kısmının yazıldığı html kodlamayı görmektesiniz. Veri girişi yapılan Input alanlar ng-model ile ilgili ViewModel’in propertylerine bağlanmaktadır. Kur tipleri için yine <select> html elementi ViewModel’de ilgili olan Product.ExchangeType’a bağlanmıştır. Ve en sona Save button’u konmuştur.

Enter

Save Button’u click işleminde ng-click=”Save(Product)” function’ı girilen yeni product’ı parametre olarak göndererek $scope.ProductList = []‘e aşağıdaki gibi eklemektedir. Daha sonra Product model null’a atanıp yeni kayıt girişi için ProductName’e class’ı ile erişilip odaklanılır.

Şimdi sıra geldi girilen ürünlerin sıralanmasına. Aşağıda table içine ilgili ExportProductDetail tablosunun kolonları başlık olarak konmuştur. Tüm liste ProductList’den tek tek ng-repeat directive ile alınıp prod’a atılmakta ve tüm kolonlar sayfaya basılmaktadır. Önemli bir konu ExchangeType kolonu için ‘prod.ExchangeType | moneyType’ custom filter’ı kullanılmıştır. Amaç 1,2,3 şekilinde gelen döviz tiplerini ‘$’,’€’,’£’ şeklinde göstermektir. İlgili kodlar aşağıdadır.

[moneyType] Custom Filter:

Örnek ekran görüntüsü aşağıdadır.

List

Save All Product button’una basılınca ng-click=”SaveAll(ProductList)” function’ı çalıştırılır. Eklenmiş olan tüm productlar Controller.cs’in SaveProduct methoduna gönderilir.

Yeni eklenen tüm productlar database’e önceki makalede hazırlanan CodeFirst ile AddRange() methodu kullanılarak eklenir ve kaydedilir.

Bundan sonra  önceki makalede Azure Cloud Service ile yazılan uygulama her 30sn de bir database’i kontrol edip, yeni eklenen ürünlerin TL karşılıklarını bulacaktır. Database’e eklenen ürünlerin sorgu sonucu aşağıdadır.

sql

Service çalıştıktan sonraki kayıt durumu:

sqlResult

Şimdi sıra geldi TL karşılıkları bulunan bu dataların o an bağlı olan tüm clientlara bildirmesine. Burda signalR websocket kullanılacaktır.

SignalR-8

Öncelikle nuget’den aşağıdaki paketler indirilir.

signalR

SignalR’ın çalışması için Startup.cs’e alttaki kodlar konur:

Client’ın product sayfasına gelince, var olan kayıtlı ürünlerin listelenmesi için ilgili data db’den çekilip sadece gelen client’a signalR ile basılır. İlgili kodlar aşağıdaki gibi dir. Ürünler code first ile çekildikten sonra product list’e doldurulur. Daha sonra ilgili product list o an bağlanan client’ın sayfasındaki getAllProducts() functionına parametre olarak gönderilir.

Şimdi sıra geldi client side Index.cstml’de ilgili productları listelemeye. Öncelikle aşağıdaki scriptler sayfaya eklenir.

Client side tarafındaki getAllProducts()  sayesinde sayfa ilk yüklendiğinde yani client signalR’a connect olduğunda databasedeki tüm ürünler aşağıda görülen function ile listelenir. $.connection.getProducts, server side’daki Hub classındaki GetProducts’a karşılık gelmektedir. Tüm çekilen liste önceki makalede bahsedilen $scope.ProductList’e eklenir. Böylece bunu kullanan table ilgili ürünleri listeler. $scope.$apply() kodunun eklenmesi bu modeli kullanan nesnelerin rebind’ı için önemlidir. $scope.Show, gizlenen table’ın yeni data gelmesinden dolayı gösterilmesini sağlar.

Client side’da signalR class’ına aşağıdaki gibi bağlanılır.

Şimdi yeni ürün ekleme işlemi tamamlandığı zaman yani Save All Product buttonuna basılıp tüm yeni eklenen ürünler kaydedildiği zaman bunu diğer clientlarada bildirmeye geldi. Server side tarafında GetProducts Hub class’ı altına aşağıdaki gibi ReloadProducts() adında bir method yaratılır. Amaç tüm dataları tekrardan çekip clientlara push etmektir.

Yukarıdaki örnekde görüldüğü gibi tüm data çekildikten sonra client side tarafındaki reloadProducts() function’ı çekilen tüm productlar ile birlikte server side tarafından tetiklenmiştir. Sıra geldi client side tarafındaki bu signalR function’ını aşağıdaki gibi kodlamaya:

Save All Product buttonuna basılıp girilen tüm datalar kaydedilmek istenince HomeControl.cs’deki  SaveProduct() methoduna gidilir. Kaydetme işlemi bitince datanın son halini tüm clientlara push etmek için yukarıda belirtilen GetProducts Hub class’ı altında yazılan ReloadProducts() methodu tetiklenir. İlgili kod aşağıdaki gibi değiştirilir. Kodda da görüldüğü gibi  kaydedilen en az bir yeni kayıt var ise tetikleme işlemi gerçekleşmektedir.

Yukarıdaki //Triger SignalR kısmındaki kod önceki makalede Azure Cloud Services olarak yazılan WorkerRole1 projesinde de kullanılıp, ilgli ürünlerin TL karşılıkları bulunduğu zaman buna bağlı datanın son hali tüm clientlara bildirilmelidir. İlgili kod aşağıdaki gibi değiştirilir ve //Triger SignalR altındaki kısm eklenir.

Yukarıdaki kodun //Triger SignalR kısmının Cloud Services’de çalışılabilmesi için Nuget’den Microsoft.AspNet.SignalR.Client‘ın indirilmesi gerekmektedir.

Client

WorkerRoler1/WorkerRole.cs(Tümü):

ProductList/HomeController.cs(Tümü)

 ProductList/Index.cshtml(Tümü):

Yukarıdaki örnekde Azure Cloud Service, Mvc , AngularJS, Entity Framework (Code First), SignalR(Websocket)  teknolojileri birlikte kullanılmıştır. Görüldüğü gibi farklı teknolojiler birlikte çok güzel çalışabilmektedirler. Azure çok geniş kapsamlı ve sürekli gelişen günümüzün en popüler teknolojilerinden biridir. Örneğin az önce Azure search özelliği gelmiştir. AngularJS javascript frameworkleri arasında en populer olanlarından biridir. Gene az önce gördüğüm bir habere göre Microsoft & Google iş birliği ile AngularJS 2.0 TypeScript üzerinde geliştirilmeye başlanmıştır. SignalR sürekli gelişen daha çok yeni bir teknolojidir. Kısaca gelişimin sonu yoktur. Klasik sorunlarımıza yenilikçi çözümler getirmek ve bunları sizinle paylaşmak benim en büyük gayemdir.

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

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

Herkes Görsün:

Sevebilirsin...

1 Yanıt

  1. Mehmet dedi ki:

    Selamlar Hocam;
    Çok güzel bir makale olmuş. Çok yararlı ve faydalı. Elinize sağlık.

    İyi çalışmalar.

Bir Cevap Yazın

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