Mac Os X’de Asp.Net Core 1.0

Yazar: borsoft · 18 Şubat 2016

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.

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 (.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.

dnvm list

dnvm list

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.

Ş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.

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.

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

sudo npm install -g generator-aspnet

1	sudo npm install -g generator-aspnet

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

sudo npm install -g yo

1	sudo npm install -g yo

Ş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.

yo aspnet

yo aspnet

“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.

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

Ö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.

sudo nano ~/.bash_profile

1	sudo nano ~/.bash_profile

Açılan file’a aşağıdaki script eklenir. Daha sonra kaydetmek için ‘e basılır. Ve ile kaydedilir. Son olarak ile çıkılır.

function code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $*; }

1	function code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $*; }

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. Artık “code .” yazıldığında aşağıdaki gibi bir ekran ile karşılaşılır.

Ş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.

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.

namespace MyWebApp.Controllers
{
    [Route("api/[controller]")]
    public class UserController : Controller
    {
        
        // GET: api/values
        [HttpGet]
        public List<User> Get()
        {           
            List<User> user= new List<User>();
            user.Add(new User(){ ID=1, Name="Bora", SurName="Kasmer", Interested = Hobi.Music });
            user.Add(new User(){ ID=2, Name="Engin", SurName="Polat", Interested = Hobi.Sport });
            user.Add(new User(){ ID=3, Name="Mehmet", SurName="Karli", Interested = Hobi.Picture });
            user.Add(new User(){ ID=4, Name="Karan", SurName="Vurur", Interested = Hobi.Game });
            user.Add(new User(){ ID=5, Name="Vural", SurName="Pekyilmaz", Interested = Hobi.Picture });
            return user;
        }
     }
}

namespace MyWebApp.Controllers

{

[Route("api/[controller]")]

public class UserController : Controller

{

// GET: api/values

[HttpGet]

public List<User> Get()

{

List<User> user= new List<User>();

user.Add(new User(){ ID=1, Name="Bora", SurName="Kasmer", Interested = Hobi.Music });

user.Add(new User(){ ID=2, Name="Engin", SurName="Polat", Interested = Hobi.Sport });

user.Add(new User(){ ID=3, Name="Mehmet", SurName="Karli", Interested = Hobi.Picture });

user.Add(new User(){ ID=4, Name="Karan", SurName="Vurur", Interested = Hobi.Game });

user.Add(new User(){ ID=5, Name="Vural", SurName="Pekyilmaz", Interested = Hobi.Picture });

return user;

}

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace MyWebApp.Models
{
    public enum Hobi  
    {
        Music=1,        
        Picture=2,
        Sport=3,
        Game=4
    }
    public class User
    {
        public User()
        {            
                   
        }
        public int ID { get; set; }
        public string Name { get; set; }
        public string SurName { get; set; }
        public  Hobi Interested { get; set; }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

namespace MyWebApp.Models

{

public enum Hobi

{

Music=1,

Picture=2,

Sport=3,

Game=4

}

public class User

{

public User()

{

}

public int ID { get; set; }

public string Name { get; set; }

public string SurName { get; set; }

public Hobi Interested { get; set; }

}

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

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

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.

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

public IActionResult ShowUsers()
        {
            return View();
        }

public IActionResult ShowUsers()

{

return View();

}

İ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.

{
  "directory": "wwwroot/lib"
}

{

"directory": "wwwroot/lib"

}

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

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 .

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

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

npm install -g bower

1	npm install -g bower

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

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;

namespace MyWebApp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
      
        [Route("ShowUsers")]
        public IActionResult ShowUsers()
        {        
            return View();
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNet.Mvc;

namespace MyWebApp.Controllers

{

public class HomeController : Controller

{

public IActionResult Index()

{

return View();

}

[Route("ShowUsers")]

public IActionResult ShowUsers()

{

return View();

}

Ş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.

var app = angular.module('app', []);
        app.controller('Controller', function ($scope, $http) {
            $scope.Users = [];
            $http({
                method: 'GET',
                url: '/api/user'                
            }).success(function (result) {
                $scope.Users = result;
            });
        });
        
        app.filter("enum", function () {
           return function (id) {
                switch (id)
                {                  
                    case 1:
                    {
                        return "Music";
                        break;
                    }
                    case 2:
                    {
                        return "Picture";
                        break;
                    }
                    case 3:
                    {
                        return "Sport";
                        break;
                    }
                    case 4:
                    {
                        return "Game";
                        break;
                    }
                }
           }
        });

var app = angular.module('app', []);

app.controller('Controller', function ($scope, $http) {

$scope.Users = [];

$http({

method: 'GET',

url: '/api/user'

}).success(function (result) {

$scope.Users = result;

});

app.filter("enum", function () {

return function (id) {

switch (id)

{

case 1:

{

return "Music";

break;

}

case 2:

{

return "Picture";

break;

}

case 3:

{

return "Sport";

break;

}

case 4:

{

return "Game";

break;

}

});

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”

"commands": {
    "web": "Microsoft.AspNet.Server.Kestrel --server.urls http://localhost:1453",
    "ef": "EntityFramework.Commands"
  }

"commands": {

"web": "Microsoft.AspNet.Server.Kestrel --server.urls http://localhost:1453",

"ef": "EntityFramework.Commands"

}

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.

<script src="~/lib/angular/angular.min.js"></script>
<script src="~/lib/jquery/src/jquery.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/js/user.js"></script>

 <body ng-app="app">
    <div ng-controller="Controller">
        <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>SurName</th>
                <th>Intersted</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in Users">
                <td>{{ user.ID }}</td>
                <td>{{ user.Name }}</td>
                <td>{{ user.SurName }}</td>
                <td>{{ user.Interested | enum}}</td>               
            </tr>
        </tbody>
    </table>
    </div>
</body>

<thead>

<tr>

<th>SurName</th>

<th>Intersted</th>

</tr>

</thead>

<tbody>

<td>{{ user.SurName }}</td>

<td>{{ user.Interested | enum}}</td>

</tr>

</tbody>

</table>

</div>

</body>

Ş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.

Ş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.

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.

git remote add origin https://github.com/borakasmer/<em>Mac-Os-X-Asp.Net-Core-1.0</em>.git
git push -u origin master

1 2	git remote add origin https://github.com/borakasmer/<em>Mac-Os-X-Asp.Net-Core-1.0</em>.git git push -u origin master

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

Source: https://docs.microsoft.com/tr-tr/dotnet/core/migration/from-dnx, https://www.codeproject.com/articles/1005145/dnvm-dnx-and-dnu-understanding-the-asp-net-runtime

Eser Ozvataf dedi ki:

21 Şubat 2016, 15:01

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

Cevapla
- borsoft dedi ki:
  
  22 Şubat 2016, 10:05
  
  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.
  
  Cevapla
Davut dedi ki:

24 Şubat 2016, 15:57

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

Cevapla
Volkan dedi ki:

7 Mart 2016, 00:39

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

Cevapla
- borsoft dedi ki:
  
  7 Mart 2016, 19:49
  
  Ben Teşekkür ederim Volkan.
  Gerçekten MacOs’da .Net bir başka güzel :)
  
  İyi çalışmalar.
  
  Cevapla
Mustafa dedi ki:

12 Nisan 2016, 09:15

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

Cevapla
Olkan dedi ki:

1 Ağustos 2017, 11:56

Merhaba, SQL için ne kullanabiliriz ücretsiz

Cevapla
- borsoft dedi ki:
  
  3 Ağustos 2017, 02:02
  
  Selamlar. SQLite kullanabilirsin.
  
  Cevapla

Mac Os X’de Asp.Net Core 1.0

Bunlar da hoşunuza gidebilir...

8 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

Mac Os X’de Asp.Net Core 1.0

Bunlar da hoşunuza gidebilir...

Equals ve Eşittir Karşılaştırma Operatörleri Arasındaki Farklar Nelerdir?

.Net Core Mvc Haber Portalını SignalR ve Redis Ile Optimize Etme

Webinar Angular JS’e Giriş

8 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler