Tutorial: Membuat aplikasi rekomendasi dengan .NET MAUI dan ChatGPT

Pelajari cara membuat aplikasi Windows .NET MAUI di Visual Studio yang mengintegrasikan API ChatGPT untuk memberikan rekomendasi lokasi yang didukung AI. Bangun saran restoran, hotel, dan atraksi dengan panduan langkah demi langkah.

Dalam tutorial ini, Anda akan belajar cara:

Membuat antarmuka pengguna sederhana untuk aplikasi .NET MAUI Anda
Referensikan dan bootstrap pustaka OpenAI .NET API
Menggunakan kunci API untuk menautkan aplikasi Anda ke akun API OpenAI
Melakukan panggilan ke API obrolan OpenAI untuk mendapatkan rekomendasi

Prasyarat

Akun OpenAI
Kunci API OpenAI
Persyaratan penginstalan .NET MAUI
Jika Anda baru menggunakan .NET MAUI di Windows, Anda harus mulai dengan Membuat aplikasi MAUI .NET pertama Anda untuk tutorial Windows.

Mengatur variabel lingkungan Anda

Untuk menggunakan OpenAI SDK, Anda harus mengatur variabel lingkungan dengan kunci API Anda. Dalam contoh ini, kita akan menggunakan OPENAI_API_KEY variabel lingkungan. Setelah Anda memiliki kunci API dari dasbor pengembang OpenAI, Anda dapat mengatur variabel lingkungan dari baris perintah sebagai berikut:

setx OPENAI_API_KEY <your-api-key>

Perhatikan bahwa metode ini berfungsi untuk pengembangan di Windows, tetapi Anda harus menggunakan metode yang lebih aman untuk aplikasi produksi dan untuk dukungan seluler. Misalnya, Anda dapat menyimpan kunci API di brankas kunci aman yang dapat diakses layanan jarak jauh atas nama aplikasi Anda. Lihat Praktik terbaik untuk keamanan kunci OpenAI untuk informasi selengkapnya.

Membuat proyek MAUI .NET baru dengan elemen UI yang diperlukan

Kita akan mulai dengan membuat proyek MAUI .NET baru di Visual Studio. Kami akan menggunakan templat Aplikasi .NET MAUI dan menambahkan beberapa elemen UI ke MainPage untuk memberi pengguna beberapa rekomendasi berdasarkan lokasi yang disediakan. UI akan memiliki tombol untuk mendapatkan rekomendasi untuk restoran, hotel, dan atraksi.

Di Visual Studio, buat proyek Aplikasi MAUI .NET baru bernama ChatGptRecommendationApp.
Jalankan proyek baru untuk memastikan aplikasi berhasil dibangun dan berjalan.
Buka MainPage.xaml dari Penjelajah Solusi.

Ganti konten VerticalStackLayout dengan markup XAML berikut:

<Label
    Text="Local AI recommendations"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

<Entry
    x:Name="LocationEntry"
    Placeholder="Enter your location"
    SemanticProperties.Hint="Enter the location for recommendations"
    HorizontalOptions="Center"/>

<Button
    x:Name="RestaurantBtn"
    Text="Get restaurant recommendations"
    SemanticProperties.Hint="Gets restaurant recommendations when you click"
    Clicked="OnRestaurantClicked"
    HorizontalOptions="Center" />

<Button
    x:Name="HotelBtn"
    Text="Get hotel recommendations"
    SemanticProperties.Hint="Gets hotel recommendations when you click"
    Clicked="OnHotelClicked"
    HorizontalOptions="Center" />

<Button
    x:Name="AttractionBtn"
    Text="Get attraction recommendations"
    SemanticProperties.Hint="Gets attraction recommendations when you click"
    Clicked="OnAttractionClicked"
    HorizontalOptions="Center" />

<Label x:Name="SmallLabel"
    Text="Click a button for recommendations!"
    SemanticProperties.HeadingLevel="Level2"
    FontSize="18"
    HorizontalOptions="Center" />

Untuk membangun proyek, Anda harus menambahkan Clicked penanganan aktivitas untuk setiap tombol. Tambahkan kode berikut ke file MainPage.xaml.cs dan hapus penanganan aktivitas yang ada:

private async void OnRestaurantClicked(object sender, EventArgs e)
{
}

private async void OnHotelClicked(object sender, EventArgs e)
{
}

private async void OnAttractionClicked(object sender, EventArgs e)
{
}

Penanganan aktivitas semuanya ditandai sebagai async karena kami akan melakukan panggilan asinkron ke pustaka OpenAI .NET API. Sekarang saat menjalankan aplikasi, Anda akan melihat UI berikut:

Aplikasi Windows .NET MAUI dengan UI untuk memberikan rekomendasi.

Pengguna dapat memasuki lokasi mereka di Entry kontrol dan mengklik salah satu tombol untuk mendapatkan rekomendasi untuk restoran, hotel, atau atraksi. Label Kontrol di bagian bawah UI akan menampilkan hasilnya.

Selanjutnya, mari kita tambahkan pustaka OpenAI ke proyek dan siapkan untuk melakukan beberapa panggilan API.

Referensi dan inisialisasi pustaka OpenAI untuk .NET

Untuk memanggil API ChatGPT OpenAI, kita akan menggunakan versi pra-rilis dari pustaka OpenAI untuk paket .NET NuGet. Pustaka ini menyediakan aplikasi .NET dengan akses ke OpenAI REST API. Kami akan menambahkan pustaka ke proyek kami dan memulai inisialisasi dengan kunci API kami.

Buka Konsol Manajer Paket dari menu Alat di Visual Studio.
Instal pustaka OpenAI dengan menjalankan perintah berikut. Parameter IncludePrerelease diperlukan karena pustaka masih dalam pratinjau:
```
Install-Package OpenAI -IncludePrerelease
```
Ini harus menginstal versi pra-rilis 2.0.0 atau yang lebih baru ke projek Anda. Anda juga dapat menginstal versi pustaka tertentu dengan menentukan nomor versi dalam perintah . Misalnya, untuk menginstal versi 2.0.0-beta.4, Anda akan menjalankan perintah berikut:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Buka MainPage.xaml.cs, file code-behind untuk MainPage. Tambahkan kode berikut ke bagian atas file untuk mereferensikan pustaka OpenAI dan buat variabel untuk menahan klien OpenAI Anda. Perbarui konstruktor untuk memanggil MainPage_Loaded metode ketika halaman dimuat, dan tambahkan MainPage_Loaded metode untuk mendapatkan kunci API OpenAI Anda dari registri Windows dan inisialisasi klien OpenAI:
```
private OpenAIClient _chatGptClient;

public MainPage()
{
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");

    _chatGptClient = new(openAiKey);
}
```
Ini akan mem-bootstrap pustaka OpenAI dengan kunci API Anda. Anda dapat membuat kunci API di halaman pengaturan OpenAI API.
Untuk mengkompilasi proyek, Anda harus menambahkan pernyataan berikut using ke bagian atas file MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Sekarang kita siap untuk menggabungkan semuanya. Di bagian berikutnya, kita akan menambahkan beberapa kode ke tiga penanganan aktivitas untuk melakukan panggilan ke pustaka OpenAI dan menampilkan hasil rekomendasi.

Menambahkan panggilan CHATGPT API dan menguji aplikasi

Saatnya untuk menambahkan kode ke file code-behind kami yang akan menggunakan pustaka OpenAI untuk .NET untuk melakukan panggilan ke OpenAI ChatGPT API. Kami akan menambahkan kode ke tiga penanganan aktivitas yang kami buat sebelumnya. Kode akan mendapatkan lokasi pengguna dari Entry kontrol dan meneruskannya ke API untuk mendapatkan rekomendasi. Kemudian kita akan menampilkan hasil dalam Label kontrol di bagian bawah UI.

Buat metode bernama asyncGetRecommendationAsync dan panggil dari masing-masing penanganan aktivitas:

private async void OnRestaurantClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("restaurant");
}

private async void OnHotelClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("hotel");
}

private async void OnAttractionClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("attraction");
}

private async Task GetRecommendationAsync(string recommendationType)
{
    if (string.IsNullOrWhiteSpace(LocationEntry.Text))
    {
        await DisplayAlert("Empty location", "Please enter a location (city or postal code)", "OK");
        return;
    }

    // The model passed to GetChatClient must match an available OpenAI
    // model in your account.
    var client = _chatGptClient.GetChatClient("gpt-3.5-turbo-16k");
    string prompt = $"What is a recommended {recommendationType} near {LocationEntry.Text}";

    AsyncResultCollection<StreamingChatCompletionUpdate> updates = client.CompleteChatStreamingAsync(prompt);
    StringWriter responseWriter = new();

    await foreach (StreamingChatCompletionUpdate update in updates)
    {
        foreach (ChatMessageContentPart updatePart in update.ContentUpdate)
        {
            responseWriter.Write(updatePart.Text);
        }
    }

    var returnMessage = responseWriter.ToString();
    SmallLabel.Text = returnMessage;
}

Kode ini pertama-tama memeriksa untuk memastikan pengguna telah memasukkan lokasi dalam Entry kontrol. Jika tidak, peringatan akan ditampilkan dan kembali. Jika pengguna telah memasukkan lokasi, pengguna akan mendapatkan instans ChatClient dan memanggil metode CompleteChatStreamingAsync pada objek tersebut untuk melakukan panggilan ke OpenAI. Metode CompleteChatStreamingAsync memerlukan ChatMessage[] parameter, yang dapat diberikan sebagai string, seperti yang kita lakukan dalam contoh.

Metode mengembalikan AsyncResultCollection<StreamingChatCompletionUpdate>, yang akan mengalirkan respons dari API saat respons tersebut dihasilkan. Kami melakukan iterasi secara asinkron atas updates dan kemudian melakukan iterasi pada masing-masing ChatMessageContentPart dalam respons untuk membangun string respons. Respons kemudian ditampilkan dalam SmallLabel kontrol di bagian bawah UI.

Nota

Ada baiknya menambahkan penanganan kesalahan ke GetRecommendationAsync metode untuk menangani pengecualian apa pun yang mungkin dilemparkan oleh panggilan API. Kami telah meninggalkan itu dari contoh ini untuk kesederhanaan.

Jalankan aplikasi, masukkan lokasi, dan uji tombol rekomendasi. Anda akan melihat respons dari API dalam Label kontrol di bagian bawah UI:

Itu saja! Anda telah berhasil membuat aplikasi Windows .NET MAUI yang menggunakan OpenAI ChatGPT API untuk memberikan rekomendasi untuk restoran, hotel, dan atraksi. Coba ubah perintah untuk melihat apakah Anda dapat meningkatkan hasilnya. Anda juga dapat mencoba mengubah nama model yang diteruskan ke GetChatClient di dalam GetRecommendationAsync untuk melihat apakah Anda mendapatkan hasil yang lebih baik dari model yang berbeda.

Penting

Ingatlah untuk mengawasi penggunaan API Anda setelah periode uji coba Anda kedaluwarsa. Anda juga dapat menetapkan batas pengeluaran bulanan pada akun OpenAI Anda untuk menghindari biaya tak terduga.

Langkah selanjutnya

Lanjutkan ke artikel berikutnya untuk mempelajari cara...

Menambahkan DALL-E ke aplikasi desktop Windows .NET MAUI Anda

Lihat juga

Membuat aplikasi .NET MAUI dengan C# Markup dan Community Toolkit
Membangun aplikasi Windows dengan .NET MAUI
Pengumuman perpustakaan resmi OpenAI untuk .NET
Mengembangkan Aplikasi dan Fitur AI Generatif yang Bertanggung Jawab di Windows
Microsoft DevRadio Video: Cara membuat aplikasi dengan OpenAI dan .NET MAUI

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-08-05