Latihan - Membuat proyek Azure Functions

6 menit

Aplikasi web daftar belanja Anda memerlukan API. Dalam latihan ini, Anda membuat dan menjalankan API menggunakan proyek Azure Functions. Dari sana, Anda memperluas API dengan fungsi baru menggunakan ekstensi Azure Functions untuk Visual Studio.

Dalam latihan ini, Anda menyelesaikan langkah-langkah berikut:

Buat cabang saat Anda bersiap untuk membuat perubahan pada aplikasi web Anda.
Jelajahi proyek Azure Functions.
Buat fungsi HTTP GET.
Ganti kode permulaan fungsi dengan logika untuk mendapatkan produk.
Konfigurasikan aplikasi web untuk memproksi permintaan HTTP ke API.
Jalankan API dan aplikasi web.

Catatan

Pastikan Anda telah mengonfigurasi Visual Studio untuk pengembangan Azure dengan .NET.

Mendapatkan aplikasi fungsi

Sekarang, Anda menambahkan API dan menyambungkannya ke aplikasi front-end Anda. Proyek Api menyertakan proyek Azure Functions yang tidak lengkap, jadi mari kita selesaikan sekarang.

Membuat cabang API

Sebelum membuat perubahan pada aplikasi, sebaiknya buat cabang baru untuk perubahan tersebut. Anda akan menyelesaikan API untuk aplikasi Anda, jadi buat cabang baru di Git bernama api.

Menyelesaikan API Azure Functions

Proyek Api berisi proyek Azure Functions Anda, bersama dengan tiga fungsi.

Kelas	Metode	Rute
ProductsPost	PENGUMUMAN	`products`
ProductsPut	TARUH	`products/:id`
ProductsDelete	MENGHAPUS	`products/:id`

API Anda memiliki rute guna memanipulasi produk untuk daftar belanja, tetapi tidak memiliki rute untuk mendapatkan produk. Mari kita tambahkan berikutnya.

Membuat fungsi HTTP GET

Di Visual Studio, klik kanan proyek Api , lalu pilih Tambahkan>Item Baru.
Dalam dialog Tambahkan Item Baru , pilih Azure Function.
Masukkan ProductsGet.cs sebagai nama file fungsi.
Pilih Pemicu http sebagai jenis fungsi.
Pilih Anonim dari daftar dropdown di bidang Tingkat otorisasi .
Pilih Tambahkan.

Anda baru saja memperluas aplikasi Azure Functions dengan fungsi untuk mendapatkan produk Anda!

Mengonfigurasi Metode HTTP dan titik akhir rute

Perhatikan metode Run kelas C# yang baru dibuat memiliki atribut HttpTrigger pada argumen pertama, HttpRequest. Atribut ini menentukan tingkat akses fungsi, metode HTTP untuk mendengarkan, dan titik akhir rute.

Titik akhir rute secara null default, yang berarti bahwa titik akhir menggunakan nilai FunctionName atribut , yaitu ProductsGet. Route Mengatur properti untuk "products" mengambil alih perilaku default.

Saat ini, fungsi Anda dipicu oleh permintaan HTTP GET ke produk. Metode Run Anda terlihat seperti kode berikut:

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

Memperbarui logika rute

Isi Run metode dijalankan ketika fungsi dijalankan.

Anda perlu memperbarui logika dalam Run metode untuk mendapatkan produk Anda. Ada logika akses data dalam file ProductData.cs sebagai kelas yang disebut ProductData, yang tersedia melalui Injeksi Dependensi sebagai antarmuka IProductData. Antarmuka memiliki metode yang disebut GetProducts, yang mengembalikan Task<IEnumerable<Product> yang secara asinkron mengembalikan daftar produk.

Sekarang, ubah titik akhir fungsi untuk menampilkan produk:

Buka ProductsGet.cs.

Ganti kontennya dengan kode berikut:

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);
    }
}

Pada perubahan sebelumnya, Anda mengubah kelas dari statis ke kelas instans. Anda menambahkan antarmuka ke konstruktor sehingga kerangka kerja Injeksi Dependensi dapat menyuntikkan ProductData kelas. Terakhir, Anda mengonfigurasi Run fungsi untuk mengembalikan daftar produk saat dipanggil.

Anda tidak perlu khawatir tentang Berbagi Sumber Daya Lintas Asal (CORS) saat menerbitkan ke Azure Static Web Apps. Azure Static Web Apps otomatis mengonfigurasi aplikasi Anda sehingga dapat berkomunikasi dengan API di Azure menggunakan proksi terbalik. Tetapi saat berjalan secara lokal, Anda perlu mengonfigurasi CORS untuk memungkinkan aplikasi web dan API berkomunikasi.

Sekarang, minta Azure Functions untuk mengizinkan aplikasi web Anda membuat permintaan HTTP ke API di komputer Anda.

Buka file bernama launchSettings.json di folder Properti proyek Api .
- Jika file tidak ada, buatlah.

Perbarui konten file:

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

Catatan

File ini digunakan untuk mengontrol cara Visual Studio akan meluncurkan alat Azure Functions. Jika Anda ingin menggunakan alat baris perintah Azure Functions, Anda juga memerlukan file local.settings.json yang dijelaskan dalam dokumen Azure Functions Core Tools. File local.settings.json tercantum dalam file .gitignore , yang mencegah file ini didorong ke GitHub. Ini karena Anda dapat menyimpan rahasia yang tidak Anda inginkan di GitHub dalam file ini. Dan inilah mengapa Anda harus membuat file saat membuat repo dari templat.

Menjalankan API dan aplikasi web

Sekarang, saatnya untuk melihat aplikasi web Anda dan proyek Azure Functions bekerja bersama.

Di Visual Studio, klik kanan solusi ShoppingList .
Pilih Konfigurasikan Proyek Startup.
Pilih opsi Beberapa proyek startup .
Atur Api dan Klien untuk memiliki Mulai sebagai Tindakan mereka, lalu pilih Ok.
Luncurkan debugger.

Telusuri aplikasi Anda

Saatnya melihat aplikasi Anda berjalan secara lokal terhadap API Azure Functions.

Telusuri aplikasi web (misalnya, https://localhost:44348/).

Anda membangun aplikasi Anda, dan sekarang berjalan secara lokal membuat permintaan HTTP GET ke API Anda.

Sekarang, hentikan aplikasi dan API Anda yang sedang berjalan dengan memutuskan sambungan debugger di Visual Studio.

Langkah berikutnya

Aplikasi Anda bekerja secara lokal, dan langkah Anda selanjutnya adalah menerbitkan aplikasi dengan API bersama-sama.

Saran dan Komentar

Apakah halaman ini membantu?