Mac Os X’de Asp.Net Core 1.0

Selamlar,

Bugün OS X işletim sisteminde eski adı ile Asp.Net 5 yeni adı ile Asp.Net Core 1.0 ile bir web uygulaması yazacağız. Öncelikle https://get.asp.net/ adresinden ASP.NET Core 1.0. indirilir.  .dmg uzantılı kurulum paketi tıklandığında karşımıza aşağıdaki gibi bir ekran çıkar.

Screen Shot 2016-02-12 at 22.12.30

Bu nokta da karşımıza aşağıdaki 3 temel kavram çıkar:

  • DNX (.NET Execution Environment):  CLR’ın yüklenmesini ve çalışmasını sağlayan bir çeşit runtime paketi diyebiliriz. Kısaca .NET uygulamalarının Windows, Mac ve Linux’da derlenip çalıştırılmasını sağlayan bileşendir. Uygulamada “.NET CLR” yani CoreCLR’ın mı, ki kendisi cross platform uygulama geliştirmek için oluşturulmuş bir kütüpahanedir yoksa .NET CLR’ın mı çalıştırılacağını belirleyen, yeni nesil .NET uygulamalarının merkezindeki bileşendir. Bir de Osx ve Linux ortamı için “Mono” runtime bileşeni vardır.

dnvm

  • DNVM (.NET Version Manager): DNX içindeki versiyonların yönetilmesini sağlayan bir bileşendir. Artık projede kullandığımız kütüpahaneler kendilerine has farklı versiyonlarda birlikte kullanılabilecekler. Yani ben System.Net 4.0.1 ile Microsoft.AspNet.SignalR 2.2.0 versiyonalrını birlikte kullanabileceğim. İşte tüm bunlar dnvm’in görevidir. “dnvm list” komutu ile indirilen “DNX” versiyonları görülebilir.

  • DNU (.NET Development Utilities) : Projede kullanılan kütüpahanelerin yüklenmesi, “build” edilmesi ve “publish” edilmesi için komut satırından kullanılan bir araçtır. Uygulama içinde ilerde bahsedeceğimiz “project.json” yani bir çeşit nuget package olan, uygulamada kullanılacak kütüphanelerin Json formatında tanımlandığı dosyaların DNX tarafından yorumlanıp, indirilmesini sağlayan araçtır.

Untitled

Şimdi sıra geldi Mac ortamında  :)  Visual Studio kullanmaya.  https://code.visualstudio.com/Download adresinde OS X versiyonu için, ilgili Visual Studio Code paketi ücretsiz olarak indirilebilir. Daha sonra indirilen “Visual Studio Code.app” “Application” folder’ına atılır. Böylece VS Code’a”Launchpad“‘de de erişim sağlanmış olunur.

Launchpad-icon

Mac Os X işletim sistemine sahip makinanızda Node.js yok ise https://nodejs.org/en/download/ adresinden indirilir. Böylece “Terminal”‘de npm komutları artık çalışabilecektir. Aşağıdaki komut ile “Yeoman” ile ASP.NET Core application yaratabilmek için ilgili generator yüklenir. Aşağıdaki kodda yetki hatası alırsanız başına “sudo” komutu ekleyin.  Alttaki kodlar terminal içinde yazılmıştır. Terminal’e erişmek için Applications > Utilities > Terminal yolları izlenebilir.

terminal

Sudo: Kullanicilara Root hakki vermek amacı ile kullanılır. Komutun çalıştırılması için Apple şifreniz istenmektedir.

yeoman

Eğer makinanız da “Yeoman” yok ise Node.js ile aşağıdaki komut ile indirilebilir.

Şimdi öncelikle Web uygulamasını yaratacağımız klasörü yaratalım. “mkdir MyYo”. Sonra da içine girelim. “cd MyYo”. Sıra geldi ilgili web application’ı “yeoman” ile yaratmaya.

Yeoman Generator” çalıştırıldığında aşağıda görüldüğü gibi bir menu ile karşılaşılır. İlgili menüden “Web Application” seçilir.

Screen Shot 2016-02-12 at 23.03.23

Bizden yaratılacak Web Application’ın ismi istenir.

Screen Shot 2016-02-12 at 23.19.11

Öncelikle “code .” yazılarak Visual Studio Code’un açılması sağlanır. Ama eğer sizde açılmaz ise ki muhtemelen açılmayacak bunun çözümü de kolay merak etmeyin:)

~/.bash_profile“‘ın editlenmesi gerekmektedir. Amacı “Terminal” açılmadan önceki ayarların yüklenmesidir. İlgili dosyanın editlenmesi için aşağıdaki komut yazılır.

Açılan file’a aşağıdaki script eklenir. Daha sonra kaydetmek için Screen Shot 2016-02-13 at 00.22.20‘e basılır. Ve Screen Shot 2016-02-13 at 00.22.08 ile kaydedilir. Son olarak Screen Shot 2016-02-13 at 00.21.52 ile çıkılır.

Yapılan işlemlerin aktif hale getirilmesi için ya Terminal kapatılıp açılır ya da aşağıdaki komut ile yapılan işlem aktif hale getirilir. Screen Shot 2016-02-13 at 00.22.32 Artık “code .” yazıldığında aşağıdaki gibi bir ekran ile karşılaşılır.

Screen Shot 2016-02-13 at 00.31.06

Şimdi gelin isterseniz öncelikle bir WebApi servisi oluşturalım. Sonra da ilk Web Sayfamızı AngularJS ve Bootstrap kullanark yazdığımız WebApi servisinden dolduralım.

İlk olarak aşağıdaki komut ile “yo” generator’a “UserController” adında bir webapi service’i yaratılır.

Screen Shot 2016-02-14 at 21.22.48

Aşağıda görüldüğü gibi “UserController”adındaki “WebApi Get() methodun’da dönülecek olan “User” Listesi doldurulmuştur. User sınıfı bu işlemin devamında tanımlanacaktır.

Daha sonra WebApi servisinden döndürülecek “User” sınıfı aşağıdaki gibi “Yeoman Generator” ile oluşturulur: Ayrıca bununla beraber “Hobi” adında user’ın ilgi alanın seçildiği bir “Enum” listesi oluşturulmuştur.

Screen Shot 2016-02-14 at 21.49.25

Meraklı arkadaşlara “yo Generator” ile başka neler oluşturulabileceği aşağıdaki listede gösterilmiştir:

Screen Shot 2016-02-14 at 21.10.23

Aşağıda görüldüğü gibi “dnu restore” komutu ile ilgili package’lar indirilir.

Screen Shot 2016-02-18 at 00.58.31

Daha sonra “dnx web” komutu ile “user webapi” sayfası çağrılır ve aşağıdaki gibi bir sayfa ile karşılaşılır.

 

Şimdi sıra geldi bu servisin çağrılacağı sayfanın yapılmasına: Öncelikle aşağıdaki komut ile yeoman generator sayesinde ilgili “ShowUsers” sınıfı oluşturulur.

Screen Shot 2016-02-15 at 01.26.31

HomeConroller.cs: Aşağıdaki gibi ShowUsers action’ı eklenir.

İlgili ShowUsers view’ında datalar Angular.js javascript framework’ü kullanılarak gösterilmektedir. Ben Angular.js’in indirilmesi için “Bower” kullandım. Bower aynı NPM gibi twitter tarafından geliştirilen bir paket yöneticisidir.

.bowerrrc: Bowerrrc’ye tıklanıp bakıldığında, dosyaların kaydedilme yolu aşağıdaki gibi görülür.

Ayrıca aşağıda görüldüğü gibi “bower.json“‘da indirilecek dosyalar görülmektedir.

Screen Shot 2016-02-15 at 23.11.33

Bower’ın ilgili paketleri indirebilmesi için makinanızda “Git” version manager’ın kurulu olması gerekir. İlgili linkten kurulumu yapılabilir: http://git-scm.com/download/mac .

Screen Shot 2016-02-15 at 23.28.19

Aşağıdaki komut ile AngularJS “lib” altında belirlenen klasör’e indirilir.

Screen Shot 2016-02-16 at 22.46.11

Ayrıca makinanızda bower yok ise, npm sayesinde aşağıdaki komut ile indirilebilir.

İlgili dosyalar aşağıda görüldüğü gibi “lib” klasörü altına indirilmiştir.

angular

Terminalden “dnu restore” komutu yazılarak varsa indirilecek dosyalar indirilip, “dnx web” komutu yazılarak projenin yayınlanması sağlanır. Aşağıda “HomeController“‘a ait “ShowUsers()” action’ı görülmektedir. İlgili view için [Attribute Routing] kullanılmıştır.”[Route(“ShowUsers”)]“. Böylece Url’e Home yazmaya gerek kalmadan ilgili sayfaya erişim sağlanmıştır.

Şimdi sıra geldi “ShowUser” view’ının kodlanmasına. Öncelikle sayfa içinde kullanılacak user.js aşağıdaki gibi kodlanır:  Burada AngularJS ile “app” module’üne “api/user” web api’den çekilen User datası “$scope.Users”‘a atanmıştır. Ayrıca her user’ın ilgi alanları Enum türünden tanımlandığı için, AngularJS’deki bu alanın içine sayısal bir veri yerine ilgili field’ın adının yazılması için “enum” adında Custom bir Filter tanımlanmıştır.

Eğer “dnx web” komutu ile web sayfasının (Default:5000) başka bir portdan yayımlanması istenir ise project.json dosyasından “commands”/”web” bölümü aşağıdaki gibi değiştirilir. Mesela burada “1453” yapılmıştır. “–server.urls http://localhost:1453

http://localhost:1453/ShowUsers şeklinde ilgili user sayfası aşağıda görüldüğü gibi çağrılmıştır.

 

ShowUser.cshtml: Aşağıda görüldüğü gibi “Users” içinde gezilmiş ve ilgili kolonlar ekrana basılmıştır. Css kütüpahanesi olarak Bootstrap kullanılmıştır. Dikkat edilecek husus, “{{ user.Interested | enum}}” ile custom filter kullanılarak kullanılıcıların ilgi alanlarının enum sayısal karşılıkları yerine adlarının yazılmasıdır.

Message

Şimdi sıra geldi uygulamayı GitHub’a atmaya. Bunun için aşağıda görülen Git sekmesindeki Initialize git repository tıklanır. Message kısmına istenen note yazılıp yukarıda görülen Mark işareti tıklanır.

addtogitvscode

Şimdi sıra geldi projeyi kendi repositorimize atmaya. Öncelikle browser’dan GitHub’a gidilip, yeni Repository açılır. Örneğin benim Github’ım “https://github.com/borakasmer“. Buradan “Mac-Os-X-Asp.Net-Core-1.0” adında bir repository yarattım.

Repistory

Terminal’den projenin olduğu klasöre gelinip aşağıdaki komutlar çalıştırılarak tüm proje github’a atılır. Bundan sonra yapılacak tüm değişiklikler ve eklemeler VS Code tarafından GitHub’a atılabilir.

Böylece Mac OsX ortamında bir Mvc ve WebApi servisinin aynı proje içinde nasıl oluşturulduğu, AngularJS kullanılarak Web Api services’inden dönen datanın Mvc’deki bir view sayfaya nasıl basıldığı ve bu işlemler yapılırken Npm, Yeoman, Bower, Git gibi modern web geliştirme toolarının nasıl kullanıldığı görülmüştür. Ayrıca IIS olmadan ve C# kullanılarak Cross platform bir uygulamanın geliştirilme hazzı da, yanımıza kar olarak kalmıştır:) Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Source Code: https://github.com/borakasmer/Mac-Os-X-Asp.Net-Core-1.0

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

8 Cevaplar

  1. Eser Ozvataf dedi ki:

    Elinize saglik. Urunun halen release candidate oldugu bilgisini de yaziya eklemeniz yararli olabilir. Ben sahsen temiz bir kurulum tercih ediyorum calisma ortamim icin.

    • borsoft dedi ki:

      Selamlar Eser;
      Visual Studio Code için kurulacak birşey yok. Direk çalışan bir text editor. Yani sıkıntılı bir durum yok:) dnu restore ve dnx web gibi komutlar yerine ==> dotnet restore, dotnet run şeklinde bir değişim olucak. Onu da buradan yapabilirsin. http://tattoocoder.com/preparing-for-dotnet-cli/

      İyi çalışmalar.

  2. Davut dedi ki:

    Yazınız için teşekkürler.
    Biz de DNX’de birşeyler yapmaya başladık takım arkadaşlarımızla. Her birimizde birer Windows oduğu için biz open source projemizde VS Community’yi tercih ettik. Community’nin de işletim sistemlerine göre dağıtımları var sanıyorum.

    VS Code’u tecrübe ettiğinize göre bir değerlendirme yapabilir misiniz ? Herhangi bir kısıt , kullanım alışkanlığına ters bir durum var mı ? Gördüğünüz eksikler varsa neler ?

    Teşekkürler

  3. Volkan dedi ki:

    Merhaba Hocam,
    Çok güzel bir yazı ve çalışma olmuş ellerinize sağlık. Macos üzerinde .net çalıştırmakta varmış :)
    Saygılar

    • borsoft dedi ki:

      Ben Teşekkür ederim Volkan.
      Gerçekten MacOs’da .Net bir başka güzel :)

      İyi çalışmalar.

  4. Mustafa dedi ki:

    Mac/Linux gibi ortamlarda Asp.Net Core ile ilgili daha fazla makale bekliyoruz hocam. EF Code First güzel olurdu, ellerinize sağlık.

  5. Olkan dedi ki:

    Merhaba, SQL için ne kullanabiliriz ücretsiz

Bir Cevap Yazın

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