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

Yazar: borsoft · 22 Eylül 2014

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:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.1.1.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script>
        function Controller($scope) {
            var hubProxy = $.connection.productHub;
            $scope.addProduct = function ()
            {
                hubProxy.server.addProduct($scope.add_product);
                $scope.add_product.ProductName = "";
                $scope.add_product.Price = "";
            }
            $scope.delete = function (product)
            {
                hubProxy.server.deleteProduct(product);
            }
            hubProxy.client.getAllProducts = function (productList) {
                console.log("client.getAllProducts " + JSON.stringify(productList));
                $scope.Products = productList;
                $scope.$apply();
            }
            hubProxy.client.addProduct = function (product)
            {
                console.log("client.addProduct " + JSON.stringify(product));
                $scope.Products.push(product);
                $scope.$apply();
            }
            hubProxy.client.removeProduct = function (product)
            {
                console.log("client.removeProduct " + JSON.stringify(product));
                removeItemByID(product.ID, $scope.Products);
                $scope.$apply();
            }
            $.connection.hub.logging = true;
            $.connection.hub.start()
            .done(function () {
                console.log("hub.start.done")
            })
            .fail(function (error) {
                console.log(error)
            });
        }
        function removeItemByID(ID, Array)
        {
            for (var index = 0; index < Array.length; index++)
            {
                if (ID === Array[index].ID)
                {
                    Array.splice(index, 1);
                }
            }
        }
    </script>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div ng-app="" ng-controller="Controller">
        <table>
            <tr>
                <th><a href="" ng-click="orderColomun='ID'">ID</a></th>
                <th><a href="" ng-click="orderColomun='ProductName'">Product Name</a></th>
                <th><a href="" ng-click="orderColomun='Price'">Price</a></th>
            </tr>
            <tr ng-repeat="product in Products | orderBy:orderColomun">
                <td><button ng-click="delete(product)">Delete</button></td>
                <td>{{ product.ID }}</td>
                <td>{{ product.ProductName }}</td>
                <td>{{ product.Price }}</td>
            </tr>
            <tr>
                <td>
                    <button ng-click="addProduct()">Add</button>
                </td>
                <td><input type="text" ng-model="add_product.ProductName"/></td>
                <td><input type="text" ng-model="add_product.Price"/></td>
            </tr>
        </table>
    </div>
</body>
</html>

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

function Controller($scope) {

var hubProxy = $.connection.productHub;

$scope.addProduct = function ()

{

hubProxy.server.addProduct($scope.add_product);

$scope.add_product.ProductName = "";

$scope.add_product.Price = "";

}

$scope.delete = function (product)

{

hubProxy.server.deleteProduct(product);

}

hubProxy.client.getAllProducts = function (productList) {

console.log("client.getAllProducts " + JSON.stringify(productList));

$scope.Products = productList;

$scope.$apply();

}

hubProxy.client.addProduct = function (product)

{

console.log("client.addProduct " + JSON.stringify(product));

$scope.Products.push(product);

$scope.$apply();

}

hubProxy.client.removeProduct = function (product)

{

console.log("client.removeProduct " + JSON.stringify(product));

removeItemByID(product.ID, $scope.Products);

$scope.$apply();

}

$.connection.hub.logging = true;

$.connection.hub.start()

.done(function () {

console.log("hub.start.done")

})

.fail(function (error) {

console.log(error)

});

}

function removeItemByID(ID, Array)

{

for (var index = 0; index < Array.length; index++)

{

if (ID === Array[index].ID)

{

Array.splice(index, 1);

}

</script>

<title>Index</title>

</head>

<body>

<table>

<tr>

<th><a href="" ng-click="orderColomun='ProductName'">Product Name</a></th>

<th><a href="" ng-click="orderColomun='Price'">Price</a></th>

</tr>

<td><button ng-click="delete(product)">Delete</button></td>

<td>{{ product.ID }}</td>

<td>{{ product.ProductName }}</td>

<td>{{ product.Price }}</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

</body>

</html>

HomeController.cs:

using Microsoft.AspNet.SignalR;
using System;
using System.Collections.Generic;
using System.Collections.Concurrent;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DAL;

namespace Signalr_AngularJs.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}
public class ProductHub : Hub
{
    public static HepsioradaContext db = new HepsioradaContext();
    public override async System.Threading.Tasks.Task OnConnected()
    {
        //Products product = new Products();
        //product.ProductName = "PS3";
        //product.Price = 550;
        //product.CreatedDate = DateTime.Now;

        //Products product1 = new Products();
        //product1.ProductName = "XBOX";
        //product1.Price = 700;
        //product1.CreatedDate = DateTime.Now;

        //Products product2 = new Products();
        //product2.ProductName = "PS4";
        //product2.Price = 1100;
        //product2.CreatedDate = DateTime.Now;

        //Products product3 = new Products();
        //product3.ProductName = "XBOX-ONE";
        //product3.Price = 1650;
        //product3.CreatedDate = DateTime.Now;

        //db.Products.AddRange(new Products[] { product, product1, product2, product3 });
        //db.SaveChanges();

        var productList = from prod in db.Products orderby prod.ProductName select prod;
        await Clients.Caller.getAllProducts(productList);
    }
    public void addProduct(Products prod)
    {
        db.Products.Add(prod);
        db.SaveChanges();
        Clients.All.addProduct(prod);
    }
    public void DeleteProduct(Products prod)
    {
        var deletedProduct = db.Products.SingleOrDefault(prd => prd.ID == prod.ID);
        db.Products.Remove(deletedProduct);
        db.SaveChanges();
        Clients.All.removeProduct(prod);
    }
}

using Microsoft.AspNet.SignalR;

using System;

using System.Collections.Generic;

using System.Collections.Concurrent;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using DAL;

namespace Signalr_AngularJs.Controllers

{

public class HomeController : Controller

{

// GET: Home

public ActionResult Index()

{

return View();

}

public class ProductHub : Hub

{

public static HepsioradaContext db = new HepsioradaContext();

public override async System.Threading.Tasks.Task OnConnected()

{

//Products product = new Products();

//product.ProductName = "PS3";

//product.Price = 550;

//product.CreatedDate = DateTime.Now;

//Products product1 = new Products();

//product1.ProductName = "XBOX";

//product1.Price = 700;

//product1.CreatedDate = DateTime.Now;

//Products product2 = new Products();

//product2.ProductName = "PS4";

//product2.Price = 1100;

//product2.CreatedDate = DateTime.Now;

//Products product3 = new Products();

//product3.ProductName = "XBOX-ONE";

//product3.Price = 1650;

//product3.CreatedDate = DateTime.Now;

//db.Products.AddRange(new Products[] { product, product1, product2, product3 });

//db.SaveChanges();

var productList = from prod in db.Products orderby prod.ProductName select prod;

await Clients.Caller.getAllProducts(productList);

}

public void addProduct(Products prod)

{

db.Products.Add(prod);

db.SaveChanges();

Clients.All.addProduct(prod);

}

public void DeleteProduct(Products prod)

{

var deletedProduct = db.Products.SingleOrDefault(prd => prd.ID == prod.ID);

db.Products.Remove(deletedProduct);

db.SaveChanges();

Clients.All.removeProduct(prod);

}

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

Etiketler: angularjs code first entity framework mvc signalR

Bunlar da hoşunuza gidebilir...

Cemil dedi ki:

18 Ekim 2014, 13:47

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

Cevapla
- borsoft dedi ki:
  
  18 Ekim 2014, 23:44
  
  Teşekkür ederim. Herzaman devam..
  
  Cevapla
Ali dedi ki:

20 Ekim 2014, 11:00

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?

Cevapla
- Ali dedi ki:
  
  20 Ekim 2014, 11:00
  
  Cevapla
  - borsoft dedi ki:
    
    20 Ekim 2014, 12:04
    
    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
    
    Cevapla
- borsoft dedi ki:
  
  20 Ekim 2014, 11:58
  
  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.
  
  Cevapla
  - Ali dedi ki:
    
    20 Ekim 2014, 17:24
    
    Ö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)
    
    Cevapla
    - Ali dedi ki:
      
      20 Ekim 2014, 17:32
      
      SingelR yüklenirken NewtonJson u kaldırıyor.
      
      Cevapla
      - borsoft dedi ki:
        
        20 Ekim 2014, 20:19
        
        Şö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 dedi ki:
        
        20 Ekim 2014, 20:31
        
        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 dedi ki:
        
        20 Ekim 2014, 20:33
        
        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 dedi ki:
        
        20 Ekim 2014, 22:00
        
        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.
Ali dedi ki:

21 Ekim 2014, 09:18

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}}

Cevapla
- Bora dedi ki:
  
  30 Eylül 2015, 20:43
  
  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…
  
  Cevapla
gökhan dedi ki:

20 Kasım 2014, 01:38

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.

Cevapla
- borsoft dedi ki:
  
  21 Kasım 2014, 16:36
  
  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..
  
  Cevapla
Yiğit dedi ki:

28 Kasım 2014, 10:24

Eline sağlık hocam.

Cevapla
- borsoft dedi ki:
  
  28 Kasım 2014, 20:55
  
  Teşekkür ederim Yiğit..
  
  Cevapla

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

Bunlar da hoşunuza gidebilir...

18 Cevaplar

Ali için bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

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

Bunlar da hoşunuza gidebilir...

NodeJs Üzerinde Swagger Entegrasyonu

TypeScript’e Giriş

Istanbul Üniversitesi Bilfest 18

18 Cevaplar

Ali için bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler