Alıştırma - Blazor bileşenleriyle kullanıcı arabirimi oluşturma

5 dakika

Bu alıştırmada, pizza teslim şirketi için yeni bir Blazing Pizza uygulaması oluşturmaya başlayacaksınız. Şirket, kullanmanız için eski sitesinden güncel CSS, görüntü ve HTML'yi sağlar.

Note

Bu modülde yerel geliştirme için .NET CLI ve Visual Studio Code kullanılır. Bu modülü tamamladıktan sonra Windows için Visual Studio ve macOS için Mac için Visual Studio kullanarak kavramları uygulayabilirsiniz. Sürekli geliştirme için Windows, Linux ve macOS için Visual Studio Code kullanabilirsiniz.

Bu modülde .NET 9.0 SDK kullanılır. Tercih ettiğiniz komut terminalinde aşağıdaki komutu çalıştırarak .NET 9.0'ın yüklü olduğundan emin olun:

dotnet --list-sdks

Aşağıdaki örneğe benzer bir çıkış görüntülenir:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

9 ile başlayan bir sürümün listelendiğinden emin olun. Hiçbiri listelenmiyorsa veya komut bulunamazsa en son .NET 9.0 SDK'sını yükleyin.

İlk Blazor uygulamanızı oluşturuyorsanız, .NET'in doğru sürümünü yüklemek ve makinenizin doğru ayarlandığından emin olmak için Blazor'ın kurulum yönergelerini izleyin. Uygulamanızı oluşturun adımında durun.

Yeni bir Blazor uygulaması oluşturma

.NET, Visual Studio'nun herhangi bir sürümü veya terminal komutları ile yeni projeler oluşturmanıza olanak tanır. Aşağıdaki alıştırmalarda terminali ve Visual Studio Code'un kullanıldığı adımlar gösterilmektedir.

Visual Studio Code'u açın.
Görünüm'ü seçerek Visual Studio Code'dan tümleşik terminali açın. Ardından ana menüde Terminal'i seçin.
Terminalde, projeyi oluşturmak istediğiniz yere gidin.
dotnet terminal komutunu çalıştırın:
```
dotnet new blazor -o BlazingPizza
```
Bu komut BlazingPizza adlı bir klasörde yeni bir Blazor sunucu projesi oluşturur.
Dosya>Aç klasörü'ne tıklayın.
Aç iletişim kutusunda BlazingPizza klasörüne gidin ve Klasör Seç'i seçin.

Bu dosyalar, Visual Studio Code'un hata ayıklama araçlarıyla Blazor uygulamanızı çalıştırmanıza ve hatalarını ayıklamanıza olanak tanır.

Kurulumunuzu test edin

Uygulamanızı çalıştırmak için terminali veya Visual Studio Code'u kullanmayı seçebilirsiniz.

Terminal penceresinde Blazor uygulamasını şu şekilde başlatın:
```
dotnet watch
```
Bu komut uygulamayı derleyip başlatır. watch komutu dotnet'e tüm proje dosyalarınızı izlemesini söyler. Proje dosyalarında yaptığınız tüm değişiklikler otomatik olarak yeniden derlemeyi tetikler ve uygulamanızı yeniden başlatır.

Bilgisayarınızın varsayılan tarayıcısı adresinde http://localhost:5000yeni bir sayfa açmalıdır.
Uygulamayı durdurmak için terminal penceresinde Ctrl + C'yi seçin.

Ayrıca Visual Studio Code ile projenizi çalıştırabilir ve hatalarını ayıklayabilirsiniz.

Visual Studio Code'da F5'i seçin. Veya Çalıştır menüsünde Hata Ayıklamayı Başlat'ı seçin.

Uygulama yeni bir tarayıcı sayfası oluşturup açmalıdır.
Visual Studio Code ayrıca uygulamanızı yeniden başlatmanıza veya durdurmanıza olanak tanıyan Çalıştır ve Hata Ayıkla penceresine geçer.

Visual Studio Code'da hata ayıklama penceresini gösteren ekran görüntüsü.
Uygulamayı durdurmak için Shift + F5'i seçin.

Blazing Pizza varlıklarını ve başlangıç dosyalarını indirin

GitHub deposundan ekiplerinizin mevcut Blazor uygulama proje dosyalarını kopyalayın.

Dosya gezginini kullanarak veya Visual Studio Code'da BlazingPizza klasörünüzü silin.

Terminalde, geçerli çalışma dosyalarını yeni bir BlazingPizza klasörüne kopyalayın.

git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza

Uygulamanın geçerli sürümünü çalıştırın. F5'i seçin.

Başlangıç Blazing Pizza uygulamasını gösteren ekran görüntüsü.

Biraz pizza yap

Pages/Index.razor bileşeni, müşterilerin sipariş etmek istedikleri pizzaları seçip yapılandırmalarına olanak tanır. Bileşen, uygulamanın kök URL'sine yanıt verir.

Ekip ayrıca uygulamadaki modelleri temsil eden sınıflar da oluşturdu. Geçerli PizzaSpecial modeli gözden geçirin.

Visual Studio Code'un dosya gezgininde Model klasörünü genişletin. Ardından PizzaSpecial'ı seçin.

namespace BlazingPizza;

/// <summary>
/// Represents a pre-configured template for a pizza a user can order
/// </summary>
public class PizzaSpecial
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal BasePrice { get; set; }

    public string Description { get; set; }

    public string ImageUrl { get; set; }

    public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
}

Pizza siparişinde Name, , BasePriceDescriptionve ImageUrlolduğuna dikkat edin.

Dosya gezgininde Sayfalar'ı genişletin ve index.razor öğesini seçin.
```
@page "/"

<h1>Blazing Pizzas</h1>
```
Şu anda başlık için yalnızca tek bir H1 etiketi vardır. Pizza spesiyalleri oluşturmak için kod ekleyeceksiniz.

etiketinin <h1> altına şu C# kodunu ekleyin:

@code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
        });
    }
}

Blok, @code pizza spesiyallerini tutmak için bir dizi oluşturur. Sayfa başlatıldığında, diziye altı pizza ekler.

F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlat'ı seçin.

Uygulama derlendiğinde ve çalıştırıldığında, hiçbir şey olmadığını görürsünüz. Kod istemci tarafı HTML'sindeki hiçbir şey tarafından kullanılmaz. Bunu düzeltelim.
Shift + F5'i veya Hata Ayıklamayı Durdur'u seçin.

Index.razor dosyasında değerini şu kodla değiştirin<h1>Blazing Pizzas</h1>:

<div class="main">
  <h1>Blazing Pizzas</h1>
  <ul class="pizza-cards">
    @if (specials != null)
    {
      @foreach (var special in specials)
      {
        <li style="background-image: url('@special.ImageUrl')">
          <div class="pizza-info">
              <span class="title">@special.Name</span>
                  @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
          </div>
        </li>
      }
    }
  </ul>
</div>

Bu kod, döngü ve üye erişim yönergeleriyle birlikte düz HTML'yi birleştirir. döngü, @foreach dizideki specials her pizza için bir <li> etiket oluşturur.

Döngünün içinde, her özel pizza üye yönergeleriyle adını, açıklamasını, fiyatını ve görüntüsünü görüntüler.

F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlat'ı seçin.

Yanan pizzaların listesini gösteren ekran görüntüsü.

Artık müşterilerin pizza sipariş etmelerini sağlayan bir pizza temel bileşenine sahipsiniz. Aşağıdaki alıştırmalarda bu bileşeni geliştirebilirsiniz.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?