Asp.Net Core ile OSX Ortamda Monitor Ekranı Hazırlama

Selamlar,

Bugün OsX işletim sisteminde, Visual Studio Code kullanarak MVC ile bir monitör ekranı hazırlayacağız.

Çalışma Ortamının Hazılanması :

Öncelikle (Mac) makinamızda kurulu değil ise Homebrew‘in indirilmesi gerekmektedir. Daha sonra terminal’den aşağıdaki komutlar çalıştırılır.

Daha sonra .NET Core SDKilgili sitesinden indirilir. Eğer sizde de bende olduğu gibi terminalde dotnet komutu çalışmaz ise aşağıdaki komut çalıştırılmalıdır.

Sonraki adım olarak makinanızda kurulu değil ise node.js kurmanızı tavsiye ederim. Böylece terminalde “npm” komutu çalışacaktır. 

Daha sonra aynı Visual Studio’da olduğu gibi terminalden belirlediğimiz tipte bir proje template’i oluşturmak için, aşağıdaki komut ile AspNet Generator kurulur.

Son olarak eğer makinada yok ise Yeoman kurulur.

Projenin Oluşturulması :

Şimdi sıra geldi Mvc projenin oluşturulması : Aşağıdaki komut yazılıp, “Web Application Basic” seçilir. Hangi UI frameworkün’de çalışılacağı seçilir. Ben Boostrap(3.3.6) seçtim. Son olarak ismi tanımlanıp enter’a basılır. Ben proje adını “Exchange” tanımladım.

Ben OSX ortamında ide olarak Visual Studio Code ile çalıştım. Aşağıdaki komut yazılarak, yeni yaratılan Exchange Mvc projesinin Visual Studio Code’a açılması sağlanır.

Öncelikle gelin işelem yapacağımız data modelini oluşturalım. “Services” klasörü altında, aşağıdaki sınıflar oluşturulur.

DataModel.cs:

Şimdi sıra geldi ilgili datayı sağlayacak “Services.cs”  sınıfının oluşturulmasına.

Services.cs: Burada çeşitli borsa bilgilerinin verildiği, bir data kümesi oluşturulmuştur. “FillData()” methodu ile ilgili oluşturulan List of DataModel geri dönülmektedir.

Şimdi sıra geldi Asp.Net Core üzerinde bu datanın verildiği WebApi servisinin oluşturulmasına. Aşağıdaki komut yazılarak “yo generator” ile oluşturulabilecek proje templatelerinin listesini alabilirsiniz.

1

WebApi klasörü açılıp ilgili “DataControl” WebApi servisi aşağıdaki komut ile oluşturulur.

DataControl.cs: Aşağıda görüldüğü gibi “Get()” ile tüm data ve “Get(string name)” ile isme göre data çekilmektedir. İlgili data “Service” sınıfından yararlanılarak verilmektedir.

Önemli nokta: İsme göre filitrelemede “-” karakteri ” ” ile replace edilmiştir. Kısaca ismi içerisinde boşluk karakteri olanlar “-” konularak ilgili servise gönderilmiştir. Bunu debug ederek birazdan inceleyeceğiz. Bu işlem Url’de boşluk karakteri bıraklamıyacağı ve yerine “-” karakteri konduğu için yapılmışıtır.

Bir önemli nokta Routingdir. Aşağıdaki kod ile “Route Attribute” kullanılarak hızlıca rotasyon belirlenmiştir.

Sıra geldi debug işlemine:

2

Debug: Öncelikle yukarıdaki resimde görüldüğü gibi örümcek resmine tıklanır. DEBUG modda “.NET Core Launch(web)” ayarlardan seçilmelidir. BreakPoints kısmında debug edilecek kod satırları görülmektedir. Bu örnekde biz, isminde boşluk geçen datayı yakalamaya çalışacağız.

Önemli Nokta: Debug modda yukarıda görülen çark şeklindeki ikon tıklandığında karşımıza aşağıdaki config dosyası çıkmaktadır. “program” olarak tanımlanan alanda uygulamanın “dll” yolunun doğru tanımlandığına dikkat edilmesi gerekir.

“program”: “${workspaceRoot}/bin/Debug/netcoreapp1.0/Exchange.dll”

Önemli Nokta 2: Debug işlemi için SHIFT + COMMAND + P” tuşlarına basılıp “ext install csharp” komutu yazılarak ilgili extension’ın yüklenmesi gerekmektedir.

screen-shot-2016-09-12-at-00-56-35-am

Önemli Nokta 3: Aşağıda görüldüğü gibi program.cs’deki “UseUrls” başlangıç adresi, sadece debug işlemi için değiştirilmelidir. Yoksa debug işlemi sırasında bu port kullanılıyor diye hata mesajı alınabilmektedir..

Şimdi sıra geldi ilgili WebApi’yi kullanarak Mvc action’da modelimizi doldurmaya ve Viewımıza göndermeye.

HomeController.cs/Index(): 

  • [Route(“Show”)] şeklinde Custom bir Routing tanımlanmıştır.
  • Bir dış WebApi servisinden faydalanıldığı için asenkron bir yapı yapılarak “Task<>”‘lar kullanılmıştır.
  • Gelen datanın List of “DataModel”‘e dönüştürülmesi için NewtonSoft kullanımıştır. “JsonConvert.DeserializeObject<>()”
  • İlgili model çekilip View’a gönderilmiştir.

Örnek Ekran Çıktısı:

screen-shot-2016-09-12-at-17-15-32-pm

ShowExchange.cshtml: 

  • Html tarafında bootstrap kullanılmıştır. Model olarak @model List of DataModel beklemektedir.
  • Her bir satıra atanan css ‘<tr class=”@css”>‘ random olarak belirlenmiş ve böylece her bir satırın farklı renkte görünmesi sağlanmıştır.
  • Son olarak her bir kayıt için detay bilgisinin alınabileceği “show/title” şeklinde url tanımlanmıştır. ” ” Titledaki boş alanlar “-” karakteri ile değiştirilmiştir.

screen-shot-2016-09-12-at-20-09-48-pm

screen-shot-2016-09-12-at-20-07-14-pm

HomeController.cs/Index(string title) Detay Sayfası: Detay sayfasına, aşağıdaki Inex() action’ının overload olmuş hali ile gidilir.

  • Yen bir view yapmamak adına tek bir kayıt dönmesine ragmen, view List<DataModel> beklediği için yine burada da liste dönülmüştür.
  • Önceden yazılan detay servisi burda girilen title parametresi ile çağrılmıştır.
  • İlgili Detay Action’a ulaşabilmek adına, [Route(“show/{title}”)] şeklinde custom route tanımlanmıştır.

Bu kısma kadar bir WebApi servisi yazıp ilgili datayı Mvc controller’da doldurduk. Daha sonra bu doldurulan datayıi ilgili view’a gönderip sayfaya bastık. Ekrana basılan datadan herhangi birisinin detayını görüntülemek için ilgili servisi ve controllerdaki action’ı kodladık. Hataları ayıklamak için Asp.Net Core’da debug modu aktif hale getirdik. Görsel için bootstarp kullandık.

Bir sonraki makalede ilgili datalar anlık değişimini, clientlara nasıl yansıtacağımızı hep beraber inceleyeceğiz.

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

Hepinizin geçmiş bayramı kutlu olsun.

 

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.