Bir Portal Sayfasını Parse Edip Tüm Clientlara SignalR ve AngularJs İle Real Time Gösterme

Selamlar;

Bugün http://www.msn.com/tr-tr/ haber portalından aşağıda görülen 4’lü manşet haberleri parse edilip, azure üzerinde bir database’e kaydedilecek. Daha sonra Mvc ve AngularJs ile yazılacak bir web sayfasında gösterilecek. Belli zaman aralıkları ile ilgili portal kontrol edilip, manşet haberlerinde değişiklik olup olmadığına bakılacak. Herhangi bir değişiklik durumunda , yeni gelen haberler database’e kaydedilip signalR ile tüm clientlara ilgili data ile birlikte real time olarak push edilecek. Haberlerin gösterileceği sayfa için, konulduğu yerde iframe basan bir script yazılacak. Böylece isteyen herkez kendi sayfalarında parse edilen haberleri kolaylıkla gösterebilecek. Aynı zamanda yeni haber geldiği zamanda sayfayı refresh edilmeden ilgili haberler signalR ile real time olarak yenilenebilecek.

MsnHeadNews

Öncelikle Interval’ı: 30000 olan bir timer ekleyelim.

timer

Aşağıda timer ile ilgili kodlama gözükmektedir. Belli zaman aralıkları ile GetNews() methodu ile ilgili portal pars edilip manşet haberler çekilmektedir.

Windows Application Form1.cs:

Şimdi istenen siteyi pars etmek için aşağıda görülen Watin package indirilir. Watin’in esas amacı sitelere load test yapmaktır. Explorer bir browser’ı açarak belirlenen işlem adımlarını siteye uygular. Ama amaca yönelik olarak bu örnekde de olduğu gibi pars işlemi içinde kullanılabilir:)

Untitled3

Msn.com.tr’nin aşağıdaki manşet haber kodlarını 30sn’de bir parse eden windows application’ı yazalım.

MsnParseHtml

 

Aşağıda görüldüğü gibi Watin için gerekli setler yapıldıktan sonra  (ListItem)browser.Lists.Filter(Find.ByClass(“flexbox-polyfill”))[0].ListItems[0].NextSibling altındaki sıralı 4 ListItem tek tek alınıp, CodeFirst ile oluşturulmuş tblNews modeli doldurulur ve List<tblNews> dizisine eklenir. tblNews tablosu ve ilgili DbContext aşağıda görüldüğü gibidir.

db

DAL/tblNews.cs&MsnContext.cs:

GetNews() methodu ile çekilen haberler eğer cacheDatas boş ise doldurulur. Değil ise isDataChange() methodu ile haber resimleri karşılaştırılarak yeni gelen haberin olup olmadığına bakılır. Var ise tablo temizlenip yeni haberler kaydedilir. Ve signalR Hub GetNews class’ının ReloadNews() methodu çağrılarak tüm clientlara ilgili data push edilir.

msn2

Windows Application Form1.cs(Devam):

Çekilen haberlerin gösterileceği Mvc projesi için Nuget’den indirilecek packagelar aşağıdaki gibidir.

pacage

HomeController.cs: Mvc projesnin HomeController ve SignalR Hub class’ı kodları aşağıdaki gibidir. Sayfa ilk yüklendiğinde Index() actionına hiç bir model gönderilmemiştir. GetNews Hub class’ınına OnConnected() methodunda client bağlandığı zaman, ilgili haberler databaseden çekilerek kullanıcının getAllNews() function’ına parametre olarak gönderilir. Ayrıca Windows Application, timer sayesinde msn portalını her 30sn de bir parse ederek yeni bir haber girişinin olup olmadığını kontrol eder. Yeni haber girişi olduğunda, ilgili haberleri database’e kaydedip tüm clientlara push etmek için alttaki GetNews Hub class’ına ait ReloadNews() methodu tetiklenir. ReloadNews() methodu da tüm clientlardaki reloadNews() function’ına ilgili datayı push ederek yeni haberlerin real time olarak gözükmesini sağlar.

HomeController.cs:

Şimdi de gelelim haberlerin gösterileceği Index.cshtml sayfasına. MVVM design pattern’ı ile AngularJS javascript kütüphanesi kullanılarak aşağıdaki gibi yazılmıştır. Hub connect olduğu zaman client tarafındaki getAllNews()  function’ı, çekilen haber  datası ile tetiklenir. Toplam kayıt sayısı mod %2’ye göre  dizilip $scope.datas’a 2 li dizi olarak atanır. reloadNews() function’ı msn’de manşet haber değiştiğinde, tüm clientların bundan haberdar olması için tetiklenir. Yeni haber dataları $scope.datas‘a atandıktan sonra ilgili data $scope.$apply() ile yenilenir.

Index.cshtml:

Yukarıda görüldüğü gibi ng-repeat ile table’a ilgili data iç içe 2 döngü ile 2’li sıra şeklinde sıralanır. Table içine haberin başlığı, tıklanınca gidilecek haber detay url’i ve haber resmi konulmaktadır.

Tüm clientlara verilecek, haberleri iframe içine basıcak javascript dosyasının kodları aşağıdaki gibidir.

MsnBanner.js:

Yukarıdaki örnekden de anlaşılacağı gibi web üzerinde çeşitli portallardan istenen karma bilgileri toplamak ve bunları real time olarak clientlarla paylaşmak hem çok kolay hem de çok zevklidir.

Yeni bir makale görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

6 Yanıt

  1. Mesut diyor ki:

    Bora hocam elinize sağlık. Yine güzel ve farklı bir konu ile ilgili paylaşımda bulunmuşsunuz. Paylaşımlarınızın devamını bekliyoruz.

  2. Ceyda diyor ki:

    Selamlar Hocam;
    Çok güzel bir yazı olmuş. Gerçekten hep hayal ederdim siz de yapmışınız:)
    Elinize sağlık. İyi çalışmalar.

  3. Veli diyor ki:

    Selamlar Bora Hocam;
    Tek kelime ile muhteşem bir yazı olmuş..Bu yazı özgün değil ise daha ne özgündür:)
    Umarım birgün ben de sizin gibi yazabilirim….Yarısı yazsam da olur:)

    Gene tebrikler.

    • borsoft diyor ki:

      Teşekkürler Veli.
      Yarısı değil 2 katı yazarsın. Yeter ki araştır. Artık imkanlar 1990’lardaki gibi değil. İstediğin bilgiye istediğin an ulaşabilirsin. Çağ bilgi çağ…

      İyi çalışmalar.

Bir Cevap Yazın

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