Alıştırma - Azure İşlevleri projesi oluşturma

Tamamlandı

Alışveriş listesi web uygulamanız bir API’ye ihtiyaç duyar. Bu alıştırmada bir Azure İşlevleri projesi kullanarak API'nizi derleyip çalıştıracaksınız. Buradan, Visual Studio için Azure İşlevleri uzantısını kullanarak API'yi yeni bir işlevle genişletirsiniz.

Bu alıştırmada aşağıdaki adımları tamamlaacaksınız:

  1. Web uygulamanızda değişiklik yapmaya hazırlanırken bir dal oluşturun.
  2. Azure İşlevleri projesini keşfedin.
  3. HTTP GET işlevini oluşturun.
  4. ürünleri almak için işlev başlangıç kodunu mantıkla değiştirin.
  5. WEB uygulamasını API'ye HTTP isteklerine ara sunucu olarak yapılandırın.
  6. API'yi ve web uygulamasını çalıştırın.

Not

.NET ile Azure geliştirmesi için Visual Studio'yu yapılandırdığınızdan emin olun.

İşlev uygulamasını alma

Şimdi bir API ekleyip bunu ön uç uygulamanıza bağlayabilirsiniz. Api projesi tamamlanmamış bir Azure İşlevleri projesi içerdiğinden şimdi tamamlayalım.

API dalı oluşturma

Uygulamada değişiklik yapmadan önce, değişiklikler için yeni bir dal oluşturmak iyi bir uygulamadır. Uygulamanıza yönelik API’yi tamamlamak üzere olduğunuz için Git’te api adlı yeni bir dal oluşturun.

Azure İşlevleri API’sini tamamlama

Api projesi, üç işlevin yanı sıra Azure İşlevleri projenizi içerir.

Sınıf Metot Rota
ProductsPost Gönderi products
ProductsPut PUT products/:id
ProductsDelete SİL products/:id

API’niz, ürünlerin alışveriş listesi için denetlenmesine yönelik yollara sahip olsa da ürünlerin alınmasına yönelik bir yol bulunmuyor. Şimdi bunu ekleyelim.

HTTP GET işlevini oluşturma

  1. Visual Studio'da Api projesine sağ tıklayın ve ardından Ekle>Yeni Öğe'yi seçin.

    Azure işlev öğesinin nasıl oluşturulacağını gösteren ekran görüntüsü.

  2. Yeni Öğe Ekle iletişim kutusunda Azure İşlevi'ni seçin.

    Azure işlev öğesinin seçili olduğunu gösteren ekran görüntüsü.

  3. İşlev dosyasının adı olarak ProductsGet.cs girin.

  4. İşlev türü olarak Http tetikleyicisi'ni seçin.

  5. Yetkilendirme düzeyi alanındaki açılan listeden Anonim'i seçin.

    HTTP tetikleyicisinin seçili olduğunu gösteren ekran görüntüsü.

  6. Ekle'yi seçin.

Ürünlerinizi almak için Azure İşlevleri uygulamanızı bir işlevle genişlettiniz!

HTTP Yöntemini ve yol uç noktasını yapılandırma

Run Yeni oluşturulan C# sınıfının yönteminde ilk argümanında, HttpTrigger bir HttpRequest özniteliği bulunmaktadır. Bu öznitelik işlevin erişim düzeyini, dinlenecek HTTP yöntemlerini ve yol uç noktasını tanımlar.

Rota uç noktası varsayılan olarakdırnull, yani uç nokta özniteliğinin FunctionName değerini kullanır.ProductsGet Özelliği Route olarak "products" ayarlamak, varsayılan davranışı geçersiz kılar.

Şu anda işleviniz ürünlere GETyönelik bir HTTP isteğinde tetiklenmektedir. Yönteminiz Run aşağıdaki koda benzer:

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

Rota mantığını güncelleştirme

Bir işlev yürütüldüğünde Run yönteminin gövdesi çalıştırılır.

Ürünlerinizi almak için Run metodundaki mantığı güncellemeniz gerekiyor. ProductData.cs dosyasında, ProductData adlı bir sınıf olarak veri erişim mantığı vardır ve bu mantık, IProductData arabirimi aracılığıyla Bağımlılık Enjeksiyonu ile kullanılabilir. Arabirimde, zaman uyumsuz olarak ürün listesini döndüren GetProducts adlı bir yöntemi içeren Task<IEnumerable<Product> adlı bir metot bulunur.

Şimdi, ürünleri döndürmek için işlev uç noktasını değiştirin:

  1. ProductsGet.cs açın.

  2. Dosyanın içeriğini aşağıdaki kod ile değiştirin:

    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Azure.WebJobs;
    using Microsoft.Azure.WebJobs.Extensions.Http;
    using System.Threading.Tasks;
    
    namespace Api;
    
    public class ProductsGet
    {
        private readonly IProductData productData;
    
        public ProductsGet(IProductData productData)
        {
            this.productData = productData;
        }
    
        [FunctionName("ProductsGet")]
        public async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
        {
            var products = await productData.GetProducts();
            return new OkObjectResult(products);
        }
    }
    

Önceki değişikliklerde sınıfı statikten örnek sınıfına dönüştürdün. Bağımlılık Enjeksiyonu çerçevesinin ProductData sınıfını enjekte edebilmesi için oluşturucuya bir arabirim eklediniz. Son olarak, işlevi çağrıldığında ürün listesini döndürecek şekilde yapılandırmıştınız Run .

Çıkış Noktaları Arası Kaynak Paylaşımını (CORS) yerel olarak yapılandırın

Azure Static Web Apps'te yayımladığınızda Çıkış Noktaları Arası Kaynak Paylaşımı (CORS) konusunda endişelenmeniz gerekmez. Azure Statik Web Uygulamaları, uygulamanızı otomatik olarak yapılandırır ve bunun bir ters ara sunucuyu kullanarak API’niz ile iletişim kurmasını sağlar. Ancak, yerel olarak çalışırken web uygulamanızın ve API’nin iletişim kurmasına olanak tanımak için CORS’yi yapılandırmanız gerekir.

Şimdi, web uygulamanızın bilgisayarınızdaki API'ye HTTP istekleri göndermesine izin vermek için Azure İşlevleri iste.

  1. api projesinin Özellikler klasöründe launchSettings.json adlı dosyayı açın.

    • Dosya yoksa oluşturun.
  2. Dosyanın içeriğini güncelleştirin:

    {
        "profiles": {
            "Api": {
                "commandName": "Project",
                "commandLineArgs": "start --cors *"
            }
        }
    }
    

Not

Bu dosya, Visual Studio’nun Azure İşlevleri araçlarını nasıl başlatacağını denetlemek için kullanılır. Azure İşlevleri komut satırı aracını kullanmak istiyorsanız, Azure İşlevleri Temel Araçlar belgelerinde açıklanan bir local.settings.json dosyası da gerekir. local.settings.json dosyası .gitignore dosyasında listelenir ve bu da bu dosyanın GitHub'a gönderilmesini engeller. Bunun sebebi, GitHub'da bulunmasını istemediğiniz gizli bilgileri bu dosyada saklayabilmenizdir. Ayrıca, bu nedenle deponuzu şablondan oluştururken dosyayı oluşturmanız gerekiyordu.

API’yi ve web uygulamasını çalıştırma

Şimdi web uygulamanızı ve Azure İşlevleri projenizin birlikte çalışmasını izlemenin zamanı geldi.

  1. Visual Studio'da ShoppingList çözümüne sağ tıklayın.

  2. Başlangıç Projelerini Yapılandır'ı seçin.

  3. Birden çok başlangıç projesi seçeneğini belirleyin.

  4. API ve İstemci'yi, Eylem olarak Başlat olacak şekilde ayarlayın ve ardından Tamam'ı seçin.

  5. Hata ayıklayıcısını başlatın.

Uygulamanıza gitme

Artık uygulamanızın Azure İşlevleri API’sinde yerel olarak çalıştırıldığını görebilirsiniz.

Web uygulamasına göz atın (örneğin, https://localhost:44348/).

Uygulamanızı oluşturup yerel olarak çalıştırarak API'nize HTTP GET istekleri göndermeye devam ediyor.

Şimdi Visual Studio'da hata ayıklayıcının bağlantısını keserek çalışan uygulamanızı ve API'nizi durdurun.

Sonraki adımlar

Uygulamanız yerel olarak çalışır ve sonraki adımınız uygulamayı API ile birlikte yayımlamaktır.