Mac için Visual Studio’da ASP.NET Core uygulamaları oluşturma

Şunun için geçerlidir:evet Mac için Visual Studio Visual Studio yok

ASP.NET Core, web uygulamaları ve hizmetleri, IoT uygulamaları ve mobil arka uçlar gibi modern bulut tabanlı İnternet bağlantılı uygulamalar oluşturmaya yönelik açık kaynaklı ve platformlar arası bir çerçevedir. ASP.NET Core uygulamalar .NET Core'da veya .NET Framework çalışma zamanlarında çalıştırılabilir. Buluta dağıtılan veya şirket içinde çalıştırılan uygulamalar için iyileştirilmiş bir geliştirme çerçevesi sağlamak üzere tasarlanmıştı. Minimum ek yüke sahip modüler bileşenlerden oluşur, bu nedenle çözümlerinizi oluştururken esnekliği korursunuz. Windows, Mac ve Linux'ta ASP.NET Core uygulamalarınızı platformlar arası geliştirebilir ve çalıştırabilirsiniz. ASP.NET Core GitHub'da açık kaynak.

Bu laboratuvarda, Mac için Visual Studio ile bir ASP.NET Core uygulaması oluşturacak ve keşfedeceksiniz.

Hedefler

  • ASP.NET Core web uygulaması oluşturma
  • ASP.NET Core barındırma, yapılandırma ve ara yazılım modelini keşfetme
  • ASP.NET Core web uygulamasında hata ayıklama

Önkoşullar

Hedef Kitle

Bu laboratuvar, C# hakkında bilgi sahibi olan geliştiricilere yöneliktir, ancak derin deneyim gerekli değildir.

Görev 1: Yeni bir ASP.NET Core uygulaması oluşturma

  1. Mac için Visual Studio'ı başlatın.

  2. Dosya > Yeni Çözüm'e tıklayın.

  3. .NET Core > Uygulama kategorisini ve ASP.NET Core Web App Model-View-Controller (C#) şablonunu seçin. İleri’ye tıklayın.

    Yeni projeniz için Bir Web Uygulaması şablonunun nasıl seçiliyor olduğunu gösteren ekran görüntüsü.

  4. Projeyi oluşturmak için "CoreLab" adını girin ve Oluştur'a tıklayın. Tamamlanması biraz zaman alır.

    Proje Adı ekleyen Web Uygulaması yapılandırmasının ekran görüntüsü.

2. Görev: Çözüm turu

  1. Varsayılan şablon, CoreLab adlı tek bir ASP.NET Core projesine sahip bir çözüm oluşturur. proje düğümünü genişleterek içeriğini kullanıma sunun.

    Klasörler ve dosyalar da dahil olmak üzere içeriğini görmek için seçilen çözüm projesi düğümünün ekran görüntüsü.

  2. Bu proje, veriler (modeller), sunu (görünümler) ve işlevler (denetleyiciler) arasında net bir sorumluluk bölümü sağlamak için model-view-controller (MVC) paradigması izler. Controllers klasöründen HomeController.cs dosyasını açın.

    HomeController adlı bir C# sınıfının seçili olduğu çözüm projesinin ekran görüntüsü.

  3. HomeController class-by kuralı, /Home ile başlayan tüm gelen istekleri işler. Index yöntemi dizinin köküne yönelik istekleri işler (gibihttp://site.com/Home), diğer yöntemler ise adlandırılmış yollarına yönelik istekleri, örneğin About() ile ilgili istekleri işleme kuralına http://site.com/Home/Aboutgöre işler. Tabii ki, bunların hepsi yapılandırılabilir. Dikkate değer bir şey, HomeController'ın yeni bir projedeki varsayılan denetleyici olmasıdır, bu nedenle sitenin (http://site.com) köküne yapılan istekler, aynı veya http://site.com/Home/Indexisteklerinde http://site.com/Home olduğu gibi HomeController'ınIndex() üzerinden gider.

    HomeController adlı bir C# sınıfının ekran görüntüsü.

  4. Projede, her denetleyiciyle eşleyen diğer klasörleri içeren bir Görünümler klasörü de vardır ( paylaşılan görünümler için bir klasör de). Örneğin, /Home/About yolunun CSHTML dosyasını (HTML uzantısı) görüntüleme görünümü Views/Home/About.cshtml konumunda olabilir. Bu dosyayı açın.

    Hakkında adlı C S H T M L dosyasının seçili olduğu çözüm projesinin ekran görüntüsü.

  5. Bu CSHTML dosyası, standart etiketler ve satır içi C# birleşimine göre HTML işlemek için Razor söz dizimini kullanır. Bu konuda daha fazla bilgiyi çevrimiçi belgelerde bulabilirsiniz.

    Razor söz dizimini gösteren C S H T M L dosyasının bir bölümünün ekran görüntüsü.

  6. Çözüm, web sitenizin kökü olacak bir wwwroot klasörü de içerir. CSS, görüntüler ve JavaScript kitaplıkları gibi statik site içeriğini, site dağıtıldığında bunların olmasını istediğiniz yollara doğrudan yerleştirebilirsiniz.

    w w root klasörünün seçili olduğu çözümün ekran görüntüsü.

  7. Ayrıca projeyi, paketlerini ve uygulamayı çalışma zamanında yönetmeye hizmet eden çeşitli yapılandırma dosyaları da vardır. Örneğin, varsayılan uygulama yapılandırmasıappsettings.json dosyasında depolanır. appsettings.json dosyasının altında yer alan appsettings dosyasıdır. Development.json dosyası. Burada bu ayarların bazılarını/tümünü ortam temelinde geçersiz kılabilirsiniz. Mac için Visual Studio, windows için Visual Studio ile aynı mantığı kullanarak dosyaları bu şekilde iç içe yerleştirerek daha sık erişmeniz gereken dosyaların ön planda olmasını sağlar.

    JSON dosyasının seçili olduğu ayrıntı görünümünü gösteren ekran görüntüsü.

3. Görev: Uygulamanın nasıl barındırılıyor olduğunu anlama

  1. Çözüm Gezgini'den Program.cs dosyasını açın. Bu, uygulamanızı çalıştıracak önyükleyicidir.

    Program adlı C# kaynak dosyasının seçili olduğu çözümün ekran görüntüsü.

  2. Burada yalnızca iki kod satırı olsa da, bunlar önemli. Onları ayıralım. İlk olarak, yeni bir WebHostBuilder oluşturulur. ASP.NET Core uygulamalar yürütülecek bir konak gerektirir. Bir konağın özellik ve hizmet koleksiyonlarını kullanıma sunan IWebHost arabirimini ve bir Start yöntemini uygulaması gerekir. Konak genellikle bir WebHost örneği oluşturan ve döndüren bir WebHostBuilder örneği kullanılarak oluşturulur. WebHost, istekleri işleyecek sunucuya başvurur.

    WebHostBuilder türüne sahip host adlı bir değişkeni başlatan bir deyimiyle C# Main yönteminin ekran görüntüsü.

  3. WebHostBuilder, uygulama için sunucuyu önyükleyecek konağı oluşturmakla sorumludur ancak uygulayan IServerbir sunucu sağlamanız gerekir. Bu, varsayılan olarak platformlar arası zaman uyumsuz G/Ç kitaplığı olan libuv tabanlı ASP.NET Core için platformlar arası bir web sunucusu olan Kestrel'dir.

    Sunucuyu UseKestrel yöntemiyle ayarlayan konak değişkenini vurgulayan C# Ana yönteminin ekran görüntüsü.

  4. Ardından, sunucunun içerik kökü ayarlanır. Bu, MVC Görünüm dosyaları gibi içerik dosyalarını nerede aradığını belirler. Varsayılan içerik kökü, uygulamanın çalıştırıldığı klasördür.

    UseContentRoot yöntemiyle sunucunun içerik kökünü ayarlayan konak değişkenini vurgulayan C# Ana yönteminin ekran görüntüsü.

  5. Uygulamanın Internet Information Services (IIS) web sunucusuyla çalışması gerekiyorsa, konağı oluşturmanın bir parçası olarak UseIISIntegration yöntemi çağrılmalıdır. Bunun, UseKestrel'in yaptığı gibi bir sunucuyu yapılandırmaması. IIS'yi ASP.NET Core ile kullanmak için hem UseKestrel hem de UseIISIntegration belirtmeniz gerekir. Kestrel , bir ara sunucu arkasında çalıştırılacak şekilde tasarlanmıştır ve doğrudan İnternet'e yönelik olarak dağıtılmamalıdır. UseIISIntegration ters proxy sunucusu olarak IIS'yi belirtir, ancak yalnızca IIS'ye sahip makinelerde çalışırken geçerlidir. Uygulamanızı Windows'a dağıtırsanız içinde bırakın. Aksi halde acıtmaz.

    UseIISIntegration yöntemiyle ters proxy sunucusunu ayarlayan konak değişkenini vurgulayan C# Ana yönteminin ekran görüntüsü.

  6. Ayarların yüklenmesini uygulama önyüklemesinden ayırmak daha temiz bir uygulamadır. Bunu kolayca yapmak için UseStartup çağrılır ve Başlangıç sınıfının http işlem hattına ara yazılım ekleme gibi ayarların ve diğer başlangıç görevlerinin yüklenmesi için çağrılacağını belirtir. Her birinin gerektiğinde önceki ayarların üzerine yazılmasını beklentisiyle birden çok UseStartup çağrınız olabilir.

    UseStartup seçeneğiyle başlangıç sınıfını ayarlayan konak değişkenini vurgulayan C# Ana yönteminin ekran görüntüsü.

  7. IWebHost oluşturmanın son adımı Build'i çağırmaktır.

    Derleme yöntemiyle konak değişkenini vurgulayan C# Main yönteminin ekran görüntüsü.

  8. Engelleyici olmayan Başlangıç'ı uygulamak için IWebHost sınıfları gerekli olsa da, ASP.NET Core projelerin Engelleme koduyla başlat'ı sarmalayan Çalıştır adlı bir uzantı yöntemi vardır, bu nedenle yöntemin hemen çıkış yapmasını el ile engellemeniz gerekmez.

    Çalıştır deyimi ana bilgisayar noktasını vurgulayan C# Ana yönteminin ekran görüntüsü.

4. Görev: Uygulamayı çalıştırma ve uygulamada hata ayıklama

  1. Çözüm Gezgini'daCoreLab proje düğümüne sağ tıklayın ve Seçenekler'i seçin.

    CoreLab çözümünün bağlam menüsünü gösteren ve Seçenekler'i vurgulayan ekran görüntüsü.

  2. Proje Seçenekleri iletişim kutusu, uygulamanın nasıl derlenip çalıştırılacaklarını ayarlamak için ihtiyacınız olan her şeyi içerir. Sol panelden Yapılandırmaları > Çalıştır > Varsayılan düğümünü seçin.

  3. Dış konsolda çalıştır'ı işaretleyin ve Konsol çıkışını duraklat seçeneğinin işaretini kaldırın. Normalde şirket içi barındırılan uygulamanın konsolu görünür olmaz, bunun yerine sonuçlarını Çıkış penceresine kaydeder. Bu laboratuvarın amaçları doğrultusunda, bunu normal geliştirme sırasında yapmanız gerekmesine rağmen ayrı bir pencerede de göstereceğiz.

  4. Tamam'a tıklayın.

    Dış konsolda çalıştır ve Konsol çıkışını duraklat seçeneğinin seçili olmadığı Yapılandırmayı Çalıştır Genel sekmesini gösteren ekran görüntüsü.

  5. Uygulamayı derlemek ve çalıştırmak için F5 tuşuna basın. Alternatif olarak, Hata Ayıklamayı Başlat'ı da >seçebilirsiniz.

  6. Mac için Visual Studio iki pencere açacaktır. birincisi, şirket içinde barındırılan sunucu uygulamasına ilişkin bir görünüm sağlayan bir konsol penceresidir.

    Şirket içinde barındırılan sunucu uygulamasının konsol penceresini gösteren ekran görüntüsü.

  7. İkincisi, siteyi test etmek için tipik bir tarayıcı penceresidir. Tarayıcının bildiği kadarıyla bu uygulama her yerde barındırılabilir. Bu sayfaya gitmek için Hakkında'ya tıklayın.

    Hakkında seçeneğini vurgulayarak siteyi test etmek için bir tarayıcı penceresini gösteren ekran görüntüsü.

  8. Hakkında sayfası, denetleyicide bazı metin kümelerini de işler.

    Hakkında sayfası olan Hakkında seçeneğini belirlemenin sonucunu gösteren ekran görüntüsü.

  9. Her iki pencereyi de açık tutun ve Mac için Visual Studio dönün. Henüz açık değilse Controllers/HomeController.cs dosyasını açın.

    HomeController C# sınıfının yeniden seçili olduğu çözümü gösteren ekran görüntüsü.

  10. Hakkında yönteminin ilk satırında bir kesme noktası ayarlayın. Kenar boşluğuna tıklayarak veya imleci çizgi üzerinde ayarlayarak ve F9 tuşuna basarak bunu yapabilirsiniz. Bu satır, Views/Home/About.cshtml'deki CSHTML sayfasında işlenen ViewData koleksiyonundaki bazı verileri ayarlar.

    Kesme noktası ayarlanmış About yöntemini gösteren ekran görüntüsü.

  11. Tarayıcıya dönün ve hakkında sayfasını yenileyin. Bu, Mac için Visual Studio kesme noktasını tetikler.

  12. Verilerini görüntülemek için Fareyi ViewData üyesinin üzerine getirin. İç içe verileri görmek için alt üyelerini de genişletebilirsiniz.

    Verileri genişletilmiş bir kesme noktasını gösteren ekran görüntüsü.

  13. Uygulama kesme noktasını eklemek için kullandığınız yöntemle kaldırın.

  14. Views/Home/About.cshtml dosyasını açın.

  15. "Ek" metnini "değiştirildi" olarak değiştirin ve dosyayı kaydedin.

    Hakkında adlı ve metninde değişiklik yapılan C S H T M L dosyasının ekran görüntüsü.

  16. Yürütmeye devam etmek için Devam düğmesine basın.

    Devam düğmesini vurgulayan Visual Studio penceresinin ekran görüntüsü.

  17. Güncelleştirilmiş metni görmek için tarayıcı penceresine dönün. Bu değişiklik herhangi bir zamanda yapılabilir ve hata ayıklayıcı kesme noktası gerektirmeyebilir. Değişikliğin hemen yansıtılmış olduğunu görmüyorsanız tarayıcıyı yenileyin.

    Hakkında sayfasının ekran görüntüsü, bu kez değiştirilen metinle birlikte.

  18. Test tarayıcısı penceresini ve uygulama konsolunu kapatın. Bu, hata ayıklamayı da durdurur.

5. Görev: Uygulama başlatma yapılandırması

  1. Çözüm Gezginistartup.cs dosyasını açın. NuGet paketleri arka planda geri yüklenirken ve Roslyn derleyicisi proje bağımlılıklarının tam bir resmini oluştururken başlangıçta bazı kırmızı dalgalı çizgiler fark edebilirsiniz.

    Başlangıç adlı C# sınıf dosyasının seçili olduğu çözümün ekran görüntüsü.

  2. Startup yöntemini bulun. Bu bölüm, uygulamanın ilk yapılandırmasını tanımlar ve yoğun bir şekilde paketlenmiştir. Ayrıntılı olarak inceleyelim.

    Startup sınıfının Başlangıç yöntemini gösteren ekran görüntüsü.

  3. yöntemi bir ConfigurationBuilder başlatıp temel yolunu ayarlayarak başlar.

    ConfigurationBuilder türüyle builder adlı bir değişkeni başlatan bir deyimi gösteren Startup yönteminin ekran görüntüsü.

  4. Ardından, gerekli bir appsettings.json dosyasını yükler.

    Appsettings adlı json dosyasını eklemek için AddJsonFile yöntemini kullanan oluşturucu değişkenini gösteren Başlangıç yönteminin ekran görüntüsü.

  5. Bundan sonra ortama özgü appsettings.json dosyasını yüklemeyi dener ve bu da mevcut ayarları geçersiz kılar. Örneğin, bu sağlanan bir uygulama ayarlarıdır. Bu ortam için kullanılan Development.json dosyası. ASP.NET Core yapılandırma hakkında daha fazla bilgi edinmek için belgelere göz atın.

    Ortama özgü appsettings json dosyası eklemek için AddJsonFile yöntemini kullanan oluşturucu değişkenini gösteren Başlangıç yönteminin ekran görüntüsü.

  6. Son olarak, ortam değişkenleri yapılandırma oluşturucusunun üzerine eklenir ve yapılandırma oluşturulur ve kullanım için ayarlanır.

    Ortam değişkenlerini ekleyen ve yapılandırmayı derlemek için Derleme yöntemini kullanan oluşturucu değişkenini gösteren Başlangıç yönteminin ekran görüntüsü.

Görev 6: Uygulama ara yazılımı ekleme

  1. Startup sınıfında Configure yöntemini bulun. Burası, http işlem hattına eklenebilmesi ve sunucuya yapılan her isteği işlemek için kullanılabilmesi için tüm ara yazılımların yapılandırıldığı yerdir. Bu yöntem yalnızca bir kez çağrılsa da, yöntemlerin içeriği ( UseStaticFiles gibi) her istekte yürütülebilir.

    Başlangıç sınıfında Configure yöntemini gösteren ekran görüntüsü.

  2. İşlem hattının bir parçası olarak yürütülecek ek ara yazılım da ekleyebilirsiniz. Uygulamadan sonra aşağıdaki kodu ekleyin . Her giden yanıta otomatik olarak bir X-Test üst bilgisi eklemek için UseStaticFiles. IntelliSense, siz yazarken kodun tamamlanmasına yardımcı olur.

    app.Use(async (context, next) =>
    {
        context.Response.Headers.Add("X-Test", new[] { "Test value" });
        await next();
    });
    
  3. Projeyi derlemek ve çalıştırmak için F5 tuşuna basın.

  4. Eklendiklerini doğrulamak üzere üst bilgileri incelemek için tarayıcıyı kullanabiliriz. Aşağıdaki yönergeler Safari içindir, ancak aynı işlemi Chrome veya Firefox'ta da yapabilirsiniz.

  5. Tarayıcı siteyi yükledikten sonra Safari > Tercihleri'ni seçin.

  6. Gelişmiş sekmesinde, menü çubuğunda Geliştirme menüsünü göster'i işaretleyin ve iletişim kutusunu kapatın.

    Safari Tercihleri iletişim kutusundaki Gelişmiş bölmesini ve menü çubuğunda Geliştir menüsünü göster seçeneğinin seçili olduğunu gösteren ekran görüntüsü.

  7. Sayfa Kaynaklarını Göster'i >seçin.

  8. Yeni açılan geliştirici araçlarının trafiği ve içeriği izleyebilmesi ve analiz edebilmesi için tarayıcı penceresini yenileyin.

  9. Sunucu tarafından işlenen localhost HTML sayfası varsayılan olarak seçilen öğe olacaktır.

    localhost H T M L sayfasını vurgulayan ekran görüntüsü.

  10. Ayrıntılar kenar çubuğunu genişletin.

    Ayrıntılar kenar çubuğunu genişletmek için kullanılacak denetimi vurgulayan ekran görüntüsü.

  11. Daha önce koda eklenen yanıt üst bilgisini görmek için kenar çubuğunun en altına kaydırın.

    Test değeri değeriyle XTest adlı yanıt üst bilgisini vurgulayan ekran görüntüsü.

  12. Memnun olduğunuzda tarayıcı penceresini ve konsolunu kapatın.

Özet

Bu laboratuvarda, Mac için Visual Studio ile ASP.NET Core uygulamaları geliştirmeye başlamayı öğrendiniz. Daha eksiksiz bir film veritabanı uygulaması geliştirmeyi keşfetmek istiyorsanız ASP.NET Core MVC ile çalışmaya başlama öğreticisine bakın.