Asp.Net Core’da NodeJs ile Cross Platform Mvc ve WebAPİ Projeler Yaratma Bölüm1

Selamlar,

Bugünkü makalede, Asp.Net Core 1.1.0 ile Cross Platform bir Mvc projesi oluşturulacak. Projenin Cross Platform olması adına, “Mac Os X” bir işletim sistemi üzerinde ilgili moduleler yazılacaktır. Daha sonra dış bir kaynaktan alınacak datalar NodeJs bir servis ile çekilecektir. Ama bu datalar var olan sisteme uygun olmadığı için araya bir Adaptor yani WebApi servisi yazılıp sisteme uygun hale getirilecektir. Benim de güncel iş hayatımda bolca kullandığım bu seneryoyu, hep beraber bu makale üzerinde tartışacağız.

Öncelikle makinanıza kurmanız gerekenleri, buradaki makalemden ulaşabilirsiniz.

Şimdi ilgili dosyalar kurulduğuna göre:

1-) Yeoman generator kullanılarak, aşağıdaki komut ile yeni bir AspNet projesi oluşturulur.

2-)Bir sonraki adımda, aşağıda görüldüğü gibi yeni bir proje tipinin seçilmesi istenmektedir. Bu projede “Web Application Basic” projesi seçilmiştir.

3-)2. adım olarak projede kullanılacak UI framework’ün seçilmesi istenir. Bu projede Bootstrap seçilmiştir.

4-) Son olarak projenin adı istenir. Bu projenin adı “MyTicket“‘dir.

Aşağıdaki komut yazıldığında ilgili project dosyası bulunamıyor şeklinde bir hata alınabilir.

dotnet Error: 

Çözüm : dotnet versiyonu buradan güncellenir.

Yukarıdaki sorunun çözümünden sonra  karşılaşabileceğiniz 2. hata:

Mac Security Error: OsX bir işletim sisteminde, bu bilinen bir kaynaktan gelmediği için açılamayan bir dosyadır.

Çözüm:  Sağ-click (veya control-click)  ile ilgili uygulama açılır. Gelen soruya “Open” cevabı verilir. Ve ilgili paket yüklenir.

Aşağıdaki komutlar ile ilgili proje derlenip, çalıştırılır.

Aşağıdaki bildiri ile ilgili uygulama 5000 portundan yayımlanır.

Şimdi gelin öncelikle dış kaynak olacak NodeJS projesini oluşturalım.

NodeJs Bir Proje Oluşturmak:

Aşağıdaki komutlar ile ilgili nodejs servis modulu’ne ait klasör oluşturulur.

Aşağıdaki komut ile Npm sayesinde ilgili proje oluşturulur. Proje adı olarak “ticket_node_server” seçilmişitir. Diğer alanlar boş geçilmiştir.

code .” ile Visual Studio Code açılır ve “server.js” dosyası aşağıdaki gibi oluşturulur.

  • Cors işlemleri için header’a “Access-Control-Allow-Origin, Access-Control-Allow-Headers ve Origin,Content-Type,Accept,X-Request-With” yetkileri verilir.
  • req.method.toLowerCase()” methodu ile gelen request’in post veya get olduğu anlaşılır.
  • “data” ile örnek dummy bir Ticket listesi json olarak gönderilmektedir. Hemen aşağısında ilgili dummy Ticket Modeli tanımlanmıştır.
  • “responseData”‘ya ilgili gönderilecek model string olarak atanır.
  • Header’a gönderilecek data tipi json olarak tanımlanıp response tamamlanır.
  • Son olarak “1453” portu tanımlanıp, server dinleme(listen) durumuna geçirilir.

NodeJs/Server.js:

http://localhost:1453: Browserdan çekilen örnek Json data çıktısı aşağıdaki gibidir.

Model /Ticket.cs: İlgili model aşağıdaki gibi tanımlanır.

(WebApi Servisi) TicketServiceController.cs: Amaç NodeJs server’ından ilgili datanın asenkron olarak çekilip, Newtonsoft kütüpahanesi kullanılarak deserialize edilerek alınmasıdır.

Önemli Not:İlgili data NodeJs’den çekilirken “Get()” methodunda “Deserialize” işlemi “List<Ticket>” şeklinde cast edilmeye çalışıldığında uygun bir cast işlemi olmadığı şeklinde bir hata alındı. Bunun için aşağıda görüldüğü gibi “TicketCollection” adında, “IEnumurable<Ticket>” tipinde propertysi olan bir sınıf yaratılıp, çeklen datanın bu sınıf tipine Deserialize işlemi yapılması sağlandı.

  • Web servisinin yazılmasında amaç, NodeJs’den çekilen datanın projede kullanılacak sisteme uygun olmaması, ve bu neden ile fiyat bilgisinin Dolar kurundan TL’ye çevrilmesi, ayrıca Category bilgisinin de Türkçeye çevrilmesi gerekmesidir. Bu neden ile projeye Adaptor amaçlı, bu webservisi yazılmıştır.
  • “Get()” methodu NodeJS servisinden çekilen tüm Ticket datasını geri dönmektedir.
  • Get(int ID)” methodunda Update sayfasında seçilen bilet bilgilerinin, NodeJS servisinden çekilip ilgili “ID” parametresine göre filitrelenerek geri döndürüldüğü bir Web methoddur.
  • ConvertCategory()” category isimlerinin İngilizceden Türkçeye ve Türkçeden İngilizceye çevrilmesini sağlamaktadır.

TicketCollection.cs: NodeJs’den gelen datanın deserialize işlemi yapılacağı sınıf tanımlamasıdır.

HomeController.cs: İlk projeye girildiğinde “Index.cshtml” sayfasına ilgili Ticket bilgileri,  WebApi servisinden asenkron olarak çekilip, gönderilmiştir. Ayrıca “Index.cshtml”‘den seçilen Ticket “ID” parametresi ile “Update()” Action’ına gönderilmiş ve ilgili paramtreye göre Ticket bilgisi gene WebApi servisinden çekilip “Update.cshtml” sayfasına iletilmiştir.

Index.cshtml: Model olarak gelen List<Ticket> bootstrap kullanılarak sayfaya basılmıştır. Güncelle butonuna tıklanınca “Update(int ID)” action’ına seçilen ticket ID’yi ile birlikte gidilmektedir.

Böylece geldik bu makalenin 1. bölümünün sonuna. 2.Bölümde, bu makalede anlatılan data akış transferinin tam ters yönünde bir işlem yapılarak, Web tarafında güncellenen datanın NodeJs servisine gönderilmesi sağlanacaktır. Mvc tarafında güncelleme ekranı oluşturulup, girilen dataların yeni Adaptor şeklinde tanımlanacak WebApi servisine gönderilmesi ve daha sonra, buraya gelen datanın dışarda tanımlanan NodeJs servisine uygun dönüşümü yapılması sağlanacaktır. İlgili data hazırlandıktan sonra, dışarıdan ldinleme dururmunda olan, NodeJs servisine post edilmesi sağlanacaktır.

Bir sonraki makalede görüşmek üzere hoşçakalın.

 

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

13 Cevaplar

  1. vb dedi ki:

    2
    dotnet build
    donet run dotnet olacak hocam eliniz kaymış sanırım :) teşekkürler yazı için

  2. Ümit dedi ki:

    merhaba, Asp.Net Core ile gelistirilen uygulama backend de java uygulamasının yerini alabilecek mi acaba? elimizde dll linux ve windows icin var. javadan dolayı linux kullanmak zorunda kaldık. halbuki donanım mac mini. macos yüklü mac miniye Asp.Net Core’da ürünü iki dll den birine gore geliştirip çalıştırsak basarılı sonuc alabilirmiyiz acaba ?

    • borsoft dedi ki:

      Yani Java uygulamasının yerini Java developerlar için belki almaya bilir. Ama iş performans’a bakar. Ama .Net uygulama geliştiricileri için bulunmaz hint kumaşı:)
      Mac için Asp.Net Core kullanır iseniz gayet başarılı sonuçlar alabilirsiniz. Ben alıyorum. Makinam MacBook Pro :) İşletim sistemim Sierra..

      İyi çalışmalar.

  3. Ömrüm Baki Temiz dedi ki:

    Merhaba, (WebApi Servisi) TicketServiceController.cs dosyasının 44 ve 45. satırlarındaki ‘ticket’ değişkeni galiba tanımlı değil ve ‘result’ değişkenide ‘Ticket’ sınıfından türetildiği için Add() metodu yok. Bu satırlarda bir hata mı var yoksa ben mi bir yanlışlık yapıyorum?

    • borsoft dedi ki:

      Selam Ömer,

      Söylediğin gibi ilgili satırlardaki hataları düzelttim. Sende hiçbir sorun yok.
      Yapıcı yorumun ve desteğin için çok teşekkür ederim.

      İyi çalışmalar.

  4. Emre dedi ki:

    Hocam teşekkürler.Bir sorum olacaktı sizce asp.net core ile proje geliştirmeye başlamalı mıyım stabil mi şuanda sizin tespitleriniz neler yoksa beklemeli miyim

    • borsoft dedi ki:

      Selam Emre,

      Evet stabil. Proje geliştirebilirsin. Bekleyecek birşey yok. En fazla yeni özellikler gelir..

      İyi çalışmalar.

  5. Bülent ERDEM dedi ki:

    Hocam çok teşekkür ediyorum.Sizin cross çalışmayı yaptığa göre mutlaka bir kullanım alan vardır.Asenkron webapi ile asenkron node.js ile birlikte çalışmasının gerçek hayatta ne gibi faydalar olabilir.

  6. AbbA dedi ki:

    Merhabalar,
    Bu yapmış olduğunuz örnek uygulama sanırım, real time değil.
    Yani karşılaşma sonuçları webstream şeklinde anlık terminallerde görünmüyor.

    • borsoft dedi ki:

      Selamlar,

      Yok hayır RealTime değil. NodeJs bu projede Web Servisi olarak çalışmaktadır. Bir port dinlense de clientlara realtime push işlemi yapılmamaktadır.

      İyi çalışmalar.

Bir Cevap Yazın

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