AngularJS Altında SignalR Çalıştırma Webinar Etkinliği Bölüm 1

Selamlar ;

Öncelikle webinar’a katılan tüm arkadaşlara teşekkür ederim. Umarım sizin için faydalı olmuştur.

Güncel hayattaki karşılaşabileceğimiz sorunlara, AngularJs ve SignalR’ın kompozit yapısı ile yenilikçi çözümler getirmeye çalışacağız.

Örneğin bir e-ticaret sitesi düşünün. Çeşitli ürün girişlerinin anlık olarak yapıldığını varsayalım. Yazacağımız bu ekranı yüzlerce kişinin kullandığını hayal edelim. Girilen her yeni ürün ya da güncellenen her ürün, diğer kullanıcılara anlık olarak bildirilmeli. Yani Real Time Web. Aynı zamanda güncellenen ürünlerin diğer kullanıcılar tarafından değiştirilememesi için kilitlenmesi gerekir ki iki kullanıcı aynı ürün üzerinde çalışamasın. Ayrıca user interface, kullanıcı hareketlerine göre çeşitli davranışlarda bulunulmalı. Yani ürünlerin belli kolonlara göre sıralanması, edit butonuna basılınca sil butonunun kaybolup güncelle butonunun gelmesi ve editlenecek ürünün diğer kolon bilgilerinin textboxlarının çıkıp label’larının kaybolması gibi. İşte buna benzer durumların tamamında kod kalabalığından mümkün olduğunca uzakta durup; uzun uzadıya klasik yöntemlerle çözüm getirmek yerine angularJs, singleR ve Code First kullanarak Mvc ortamında yepyeni yaklaşımlar ile çok daha pratik çözümler arayacağız.

 

Aşağıda Index.cshtml’de görüldüğü gibi öncelikle signalR’da client side ile server side arasında connection kurulmuştur. OnConnected durumunda data db’den codefirst yardımı ile çekilmiştir. Çekilen bu datalar, angularJs javascript kütüpahanesi kullanılarak ilgili Product model’e doldurulmuş ve bu modele bağlı tablo da bundan etkilenerek ilgili kayıtları ekrana listelemiştir. Yine listelenen bu datalar angularJs’de tanımlanan orderColomun propertysine göre sort edilmektedir. Daha sonra tablonun son satırına Add buttonu eklenmiştir. Click durumunda signalR kütüpahanesi kullanılarak server side tarafındaki ilgili method çağrılıp eklenecek product database’e kaydedilmiştir. Daha sonra bu değişimden tüm clientları haberdar etmek amacı ile, signalR teknolojisi kullanılarak tüm clientlardaki addProduct function’ı eklenecek data ile birlikte tetiklenmiştir. Client side tarafında yeni product angularJs’de belirlediğimiz Products modeline eklenmiş ve bu modele bağlı tablo bundan etkilenerek yeni ürünü tüm clientlara basmıştır. Bu işlemin benzeri delete işlemi de, gene ilgili product’ın database’den silinmesi ve tüm clientlarda ki deleteProduct function’ı tetiklenerek ilgili product’ın angularJs’de tanımlı olan Products modelinden çıkarılması ile son bulmaktadır. Tabi gene Products modeline bağlı tablo bu durumda trigger olup ilgili ürünü tüm clientların ekranından kaldırmaktadır.

Görüldüğü gibi mvvm design patterın işleri çok kolaylaştırmaktadır. Nesneleri model’e bağlamak ve kullanıcı hareketleri ile modelde değişikliklere gitmek, ekstra başka hiçbir code yazmadan buna bağlı tüm nesnelerde oluşan değişiklikleri izlemek; bu yeni javascript kütüpahanelerinin ne kadar vazgeçilmez olacağının bir göstergesidir. Tabi db’de oluşan değişikliklerin server side’dan o an bağlı olan tüm clientların javascriptlerini ilgili parametreler ile tetiklemek SignalR’ın gücünü bize bir daha göstermektedir. Real Web olarak adlandırılan bu teknoloji tabi ki daha kendinden bize çok bahsettirecek.

Index.cshtml:

 

 HomeController.cs:

Bir sonraki Webinar’da product’ları editlemeye çalışacağız. Tabi bu sırada diğer clientların editlenecek product’ı değiştirmemesi için ilgili ürün locklanacak. Ama product’ı değiştiricek user için farklı bir davranış sergilenerek edit textboxları ve update buttonları gösterilecek. Böylece user’a göre signalR’da nasıl farklı işlemlar yapıcağımızı görüceğiz. Bunun haricinde angularJs’in diğer birkaç özelliğinden faydalanabileceğimiz ilginize çekebilecek örnekler yapıcağız. Bunlardan biri olarak ürün listesinin bir mobil uygulamaya Json formatında servis olarak verilmesi konusunu tartışacağız.

Webinar’ın 2. bölümünde görüşmek üzere hoşçakalın…

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

 

Herkes Görsün:

Sevebilirsin...

18 Yanıt

  1. Cemil diyor ki:

    Bora bey ağzınıza sağlık. Derslerinizin devamını bekliyorum:)

  2. Ali diyor ki:

    Bora bey merhaba,
    asp.net mvc de angularjs i kullanmaya çalıştığımda şu hatayı alıyorum.
    Error: [ng:areq] Argument ‘MyController’ is not a function, got undefined
    Referanslarım şu şekilde ,

    @Scripts.Render(“~/bundles/jquery”)

    Kod şu şekilde,

    Yardımcı olur musunuz?

      • borsoft diyor ki:

        Ayrıca referanslarıda alttaki sıra ile ekleyebilirsin.
        /Scripts/angular.min.js
        /Scripts/jquery-2.1.1.min.js
        /Scripts/jquery.signalR-2.1.1.min.js

    • borsoft diyor ki:

      Selamlar Ali;
      Öncelikle install için angularJS’ın bir önceki versiyonunu kullan.Son versiyonda sorun var.Belli bir zaman sonra düzeltirler..
      Nuget console’dan: Install-Package angularjs -Version 1.2.26

      Aynı işlemi signalR içinde yap. Yani bir önceki verisyonu yükle.
      Nuget console’dan: Install-Package Microsoft.AspNet.SignalR -Version 2.1.1

      İyi çalışmalar.

      • Ali diyor ki:

        Önce Angularjs in 1.2.26 versiyonunu yükledim. Ardından Install-Package Microsoft.AspNet.SignalR -Version 2.1.1 bunu yükledim. Projem .net framework 4.5. Hata şunu veriyor :
        Additional information: Could not load file or assembly ‘Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed’ or one of its dependencies. The located assembly’s manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

        • Ali diyor ki:

          SingelR yüklenirken NewtonJson u kaldırıyor.

          • borsoft diyor ki:

            Şöyle yapalım. 0 dan bir empty WebApplication yarat. Type’ını mvc seç. Sonra signalR ve AngularJS’i yükle tabii. Codefirst kullanıyorsan entity framwork’ü bir de startUp.cs’i yaratman lazım App.start altında.
            WebConfig’e connection string’i tanımla. Bir bakalım. Çalışması lazım. Şimdi denedim oluyor..

          • Ali diyor ki:

            Bora bey başka bir pc den cevap yazıyorum.
            AngularJs yüklendikten sonra proje derleniyor. Ancak signalR yüklenirken şöyle bir bilgi paylaşıyor output da.
            Successfully added ‘Microsoft.AspNet.SignalR 2.1.1’ to MvcApplication2.
            Uninstalling ‘Newtonsoft.Json 4.5.11’.
            Successfully uninstalled ‘Newtonsoft.Json 4.5.11’.

          • Ali diyor ki:

            Niye signalR projedeki Newtonsoft.Json ı kaldırıyor anlamadım?

            Successfully added ‘Microsoft.AspNet.SignalR.JS 2.1.2’ to MvcApplication2.
            Removing ‘Newtonsoft.Json 4.5.11’ from MvcApplication2.
            Successfully removed ‘Newtonsoft.Json 4.5.11’ from MvcApplication2.
            Adding ‘Newtonsoft.Json 6.0.5’ to MvcApplication2.
            Successfully added ‘Newtonsoft.Json 6.0.5’ to MvcApplication2.

          • borsoft diyor ki:

            Aslında yazılan mesaja göre kaldırmadan ziyade upgrade etmişe benziyor.4.5.11’den 6.0.5’e yükseltiyor. Ben bu söylediğiniz case ile karşılaşmadım. Belki bende visual studioyomdan dolayı günceldir.
            Sonuçta hata yok ise kodlamaya devam edebilirsiniz.

  3. Ali diyor ki:

    Bora bey küçük bir örnek yapmak istiyorum. Ekranımda bir tane buton var. Bu butona bastığımda verilerin getirilip tablo da gösterilmesini istiyorum.Ancak butona ilk tıkladığımda veriler script e geliyor binding olmuyor. İkinci tıklamada binding oluyor. Neden 2.tıklama da binding olduğunu sormak istiyorum. Script kodlarım şu şekilde,

    var myApp = angular.module(‘myApp’, []);
    myApp.controller(‘MyController’, [‘$scope’, function ($scope) {
    $scope.Getir = function () {
    $.get(‘@Url.Action(“GetAllProduct”,”Home”)’, function (data) {
    $scope.products = data;
    });
    }
    }]);

    View kodlarım,

    Ürünleri Getir

    ID

    Name

    Price

    {{product.Id}}
    {{product.Name}}
    {{product.Price}}

    • Bora diyor ki:

      Selamlar Ali;
      1 yıl sonraki cevap. Neden ise sorunuzu görmemişim. Bunun için özürdilerim.

      Scriptleri document.read(function(){ [Senin Scriptlerin] }); içine koy..

      Umarım işe yarar..
      Hoşçakalın…

  4. gökhan diyor ki:

    Merhaba ,paylaşım için teşekkürler birkaç sorum olacak bilgilendirirseniz çok sevinirim

    -Şimdi biz SignalR’ı kullanarak ASP.NET MVC’nin Controllerını aradan çıkarmış mı olduk ? yada MVC’nin Controller’ı artık Hub(SignalR) mı olmuş oldu ?
    -AngularJS’i sadece CRUD işlemleri yaptığım bir MVC projesinde kullanmalımıyım ? Yoksa Controller da yazdığım Action metodlara AJAX ile post etmem mi daha mantıklı .Gerçekten kafam karışmış durumda .AngularJs li bir MVC uygulamasıyla AngularJS siz MVC uygulamasının artılarını ve eksilerini görebileceğimiz bir webinar veya makale paylaşabilirseniz gerçekten çok sevinirim teşekkürler.

    • borsoft diyor ki:

      Selmalar Gökhan;
      -Öncelikle SignalR kullanarak controller’ı aradan çıkarmadık. En azından ilk sayfaya gelindiğinde HomeController’daki Index action’ı gerekmektedir. Yani controller kesinlikle Hub olmadı. 2 si tamamen farklı konular. Ama geri kalan ajax post işlemleri için SignalR’ı kullandık. Bu konuda haklısınız. Ama burda amaç signalR kullanılarak o an aktif olan tüm clientlar için senkron bir şekilde viewlar’ı değiştirmektir. Yani controller’daki gibi sadece o user için değil; O an connect olan tüm clientlar için sayfadaki ilgili değişiklikleri yaptık. İşte buna real time web diyoruz.
      -AngularJS’i daha çok sayfada user etkileşiminin çok olduğu durumlarda kullanmanızı tavsiye ederim. İşnizi çok kısaltır.
      -Controller’da ajax post ile yaptığınız işlemler sadece o client için geçerli olurken Hub class’ını kullanarak yaptığınız işlemler o sayfayı kullanan tüm clientlar için geçerli olur. Yani bir kaydı controller ile değiştirirseniz sadece o client değişikliği görürken; Hub Class’ı sayesinde ilgili değişikliği tüm clientlar görürü.
      -AngularJs’in faydaları ile ilgili bir webinar ileri zaman için planlıyıcam.

      İyi çalışmalar. Gökhan bey..

  5. Yiğit diyor ki:

    Eline sağlık hocam.

Bir Cevap Yazın

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