Tutorial: Membuat aplikasi rekomendasi dengan .NET MAUI dan ChatGPT

Artikel
06/17/2024

Dalam tutorial ini, Anda akan mempelajari cara membuat aplikasi .NET MAUI untuk Windows di Visual Studio yang memanggil API ChatGPT OpenAI untuk memberikan rekomendasi berdasarkan lokasi yang dimasukkan oleh pengguna. Aplikasi ini akan memiliki antarmuka pengguna sederhana yang memungkinkan pengguna untuk memasuki lokasi dan mendapatkan rekomendasi untuk restoran, hotel, dan atraksi.

Dalam tutorial ini, Anda akan mempelajari cara:

Membuat antarmuka pengguna sederhana untuk aplikasi .NET MAUI Anda
Referensi 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 tutorial Membangun aplikasi MAUI .NET pertama Anda untuk 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 bootstrap dengan kunci API kami.

Buka Konsol Manajer Paket dari menu Alat di Visual Studio.
Instal pustaka OpenAI dengan menjalankan perintah berikut. Bendera IncludePrerelease diperlukan karena pustaka masih dalam pratinjau:
```
Install-Package OpenAI -IncludePrerelease
```
Ini harus menginstal pra-rilis versi 2.0.0 atau yang lebih baru ke proyek 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 menempatkan semuanya bersama-sama. 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 async GetRecommendationAsync 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, pemberitahuan akan ditampilkan dan ditampilkan. Jika pengguna telah memasuki lokasi, pengguna akan mendapatkan instans ChatClient dan memanggil CompleteChatStreamingAsync metode pada objek tersebut untuk melakukan panggilan ke OpenAI. Metode ini CompleteChatStreamingAsync mengambil ChatMessage[] parameter, yang dapat disediakan sebagai string, seperti yang kita lakukan dalam contoh.

Metode mengembalikan AsyncResultCollection<StreamingChatCompletionUpdate>, yang akan mengalirkan respons dari API saat 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.

Catatan

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 untuk GetRecommendationAsync 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 berikutnya

Lanjutkan ke artikel berikutnya untuk mempelajari cara...

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

Bagikan melalui