Samouczek: jak stworzyć aplikację rekomendacyjną za pomocą .NET MAUI i ChatGPT

Dowiedz się, jak utworzyć aplikację .NET MAUI dla systemu Windows w programie Visual Studio, która integruje interfejsy API ChatGPT w celu dostarczania zaleceń dotyczących lokalizacji opartej na sztucznej inteligencji. Twórz sugestie dotyczące restauracji, hotelu i atrakcji, korzystając ze wskazówek krok po kroku.

W tym poradniku nauczysz się, jak:

Tworzenie prostego interfejsu użytkownika dla aplikacji .NET MAUI
Odwołanie i inicjowanie biblioteki OpenAI .NET API
Użyj klucza API, aby połączyć swoją aplikację z kontem API OpenAI.
Wykonywać wywołania do API czatu OpenAI, aby uzyskać zalecenia

Wymagania wstępne

Konto OpenAI
Klucz API OpenAI
Wymagania dotyczące instalacji programu MAUI platformy .NET
Jeśli dopiero zaczynasz korzystać z programu .NET MAUI w systemie Windows, zacznij od samouczka Tworzenie pierwszej aplikacji .NET MAUI dla systemu Windows .

Ustawianie zmiennej środowiskowej

Aby korzystać z zestawu OpenAI SDK, należy ustawić zmienną środowiskową przy użyciu klucza interfejsu API. W tym przykładzie użyjemy zmiennej środowiskowej OPENAI_API_KEY . Po uzyskaniu klucza interfejsu API z pulpitu nawigacyjnego dewelopera OpenAI, możesz ustawić zmienną środowiskową z poziomu wiersza polecenia w następujący sposób:

setx OPENAI_API_KEY <your-api-key>

Należy pamiętać, że ta metoda działa na potrzeby programowania w systemie Windows, ale należy użyć bezpieczniejszej metody dla aplikacji produkcyjnych i obsługi urządzeń przenośnych. Możesz na przykład przechowywać klucz interfejsu API w bezpiecznym magazynie kluczy, do którego usługa zdalna może uzyskać dostęp w imieniu aplikacji. Aby uzyskać więcej informacji , zobacz Best practices for OpenAI key safety (Najlepsze rozwiązania dotyczące bezpieczeństwa kluczy openAI ).

Tworzenie nowego projektu MAUI platformy .NET z wymaganymi elementami interfejsu użytkownika

Zaczniemy od utworzenia nowego projektu MAUI platformy .NET w programie Visual Studio. Użyjemy szablonu aplikacji MAUI platformy .NET i dodamy niektóre elementy interfejsu użytkownika do strony MainPage , aby zapewnić użytkownikom pewne zalecenia na podstawie podanej lokalizacji. Interfejs użytkownika będzie miał przyciski, aby uzyskać zalecenia dotyczące restauracji, hoteli i atrakcji.

W programie Visual Studio utwórz nowy projekt aplikacji MAUI platformy .NET o nazwie ChatGptRecommendationApp.
Uruchom nowy projekt, aby upewnić się, że aplikacja kompiluje i działa pomyślnie.
Otwórz MainPage.xaml z Eksploratora Rozwiązań.

Zastąp zawartość elementu VerticalStackLayout następującym kodem XAML:

<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" />

Aby skompilować projekt, należy dodać Clicked programy obsługi zdarzeń dla każdego z przycisków. Dodaj następujący kod do pliku MainPage.xaml.cs i usuń istniejącą procedurę obsługi zdarzeń:

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

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

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

Wszystkie procedury obsługi zdarzeń są oznaczone jako async ponieważ będziemy stosować wywołania asynchroniczne do biblioteki API .NET OpenAI. Teraz po uruchomieniu aplikacji powinien zostać wyświetlony następujący interfejs użytkownika:

Aplikacja MAUI dla systemu Windows .NET z interfejsem użytkownika do dostarczania zaleceń.

Użytkownicy mogą wprowadzić swoją lokalizację w kontrolce Entry i kliknąć jeden z przycisków, aby uzyskać zalecenia dotyczące restauracji, hoteli lub atrakcji. Kontrolka Label w dolnej części interfejsu użytkownika wyświetli wyniki.

Następnie dodajmy bibliotekę OpenAI do projektu i przygotujmy ją do wykonywania niektórych wywołań interfejsu API.

Dokumentacja i inicjowanie biblioteki OpenAI dla platformy .NET

Aby wywołać interfejsy API ChatGPT platformy OpenAI, użyjemy wersji wstępnej biblioteki OpenAI dla pakietu NuGet platformy .NET . Ta biblioteka zapewnia aplikacjom platformy .NET dostęp do interfejsu OpenAI REST API. Dodamy bibliotekę do naszego projektu i uruchomimy ją przy użyciu klucza interfejsu API.

Otwórz konsolę Menedżera pakietów z menu Narzędzia w programie Visual Studio.
Zainstaluj bibliotekę OpenAI, uruchamiając następujące polecenie. Flaga IncludePrerelease jest wymagana, ponieważ biblioteka jest nadal w wersji testowej.
```
Install-Package OpenAI -IncludePrerelease
```
Powinno to zainstalować wstępną wersję 2.0.0 lub nowszą w projekcie. Można również zainstalować określoną wersję biblioteki, określając numer wersji w poleceniu . Na przykład aby zainstalować wersję 2.0.0-beta.4, uruchom następujące polecenie:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Otwórz MainPage.xaml.cs, plik zawierający kod odpowiadający stronie MainPage. Dodaj następujący kod na początku pliku, aby odwołać się do biblioteki OpenAI i utworzyć zmienną do przechowywania klienta OpenAI. Zaktualizuj konstruktor, aby wywołać MainPage_Loaded metodę podczas ładowania strony, a następnie dodaj MainPage_Loaded metodę , aby pobrać klucz interfejsu API OpenAI z rejestru systemu Windows i zainicjować klienta 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);
}
```
Spowoduje to zainicjowanie biblioteki OpenAI przy użyciu klucza API. Klucz interfejsu API można utworzyć na stronie ustawień interfejsu API OpenAI.
Aby skompilować projekt, należy dodać następujące using instrukcje na początku pliku MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Teraz jesteśmy gotowi, aby połączyć to wszystko. W następnej sekcji dodamy kod do trzech procedur obsługi zdarzeń w celu wykonywania wywołań do biblioteki OpenAI i wyświetlania wyników rekomendacji.

Dodawanie wywołań interfejsu API ChatGPT i testowanie aplikacji

Nadszedł czas, aby dodać kod do naszego pliku kodu, który będzie używać biblioteki OpenAI dla platformy .NET do wykonywania wywołań interfejsu API OpenAI ChatGPT. Dodamy kod do trzech utworzonych wcześniej procedur obsługi zdarzeń. Kod pobierze lokalizację użytkownika z kontrolki Entry i przekaże ją do interfejsu API, aby uzyskać zalecenia. Następnie wyświetlimy wyniki w Label kontrolce w dolnej części interfejsu użytkownika.

Utwórz metodę async o nazwie GetRecommendationAsync i wywołaj ją z każdego programu obsługi zdarzeń:

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

Ten kod najpierw sprawdza, czy użytkownik wprowadził lokalizację w kontrolce Entry . Jeśli nie, wyświetla alert i zwraca. Jeśli użytkownik wprowadził lokalizację, otrzymuje instancję ChatClient i wywołuje metodę CompleteChatStreamingAsync na tym obiekcie, aby nawiązać połączenie z OpenAI. Metoda CompleteChatStreamingAsync przyjmuje ChatMessage[] parametr, który można podać jako ciąg, tak jak w przykładzie.

Metoda zwraca AsyncResultCollection<StreamingChatCompletionUpdate>, która będzie przesyłać strumieniowo odpowiedzi z interfejsu API podczas ich generowania. Iterujemy asynchronicznie przez element updates, a następnie iterujemy przez każdy ChatMessageContentPart w odpowiedzi, aby utworzyć ciąg odpowiedzi. Odpowiedź jest następnie wyświetlana w kontrolce SmallLabel w dolnej części interfejsu użytkownika.

Uwaga / Notatka

Dobrym pomysłem jest dodanie obsługi błędów do metody GetRecommendationAsync w celu obsługi wszelkich wyjątków, które mogą być zgłaszane przez wywołanie interfejsu API. Pozostawiliśmy to z tego przykładu dla uproszczenia.

Uruchom aplikację, wprowadź lokalizację i przetestuj przyciski rekomendacji. W dolnej części interfejsu użytkownika w kontrolce Label powinna zostać wyświetlona odpowiedź z interfejsu API.

To wszystko! Pomyślnie utworzono aplikację MAUI dla systemu Windows .NET, która używa interfejsu API OpenAI ChatGPT do udostępniania zaleceń dotyczących restauracji, hoteli i atrakcji. Spróbuj zmienić polecenia, aby poprawić wyniki. Możesz również spróbować zmienić nazwę modelu przekazaną do GetChatClient w GetRecommendationAsync, aby sprawdzić, czy uzyskasz lepsze wyniki z innego modelu.

Ważne

Pamiętaj, aby monitorować użycie interfejsu API po wygaśnięciu okresu próbnego. Możesz również ustawić miesięczne limity wydatków na koncie OpenAI, aby uniknąć nieoczekiwanych opłat.

Dalsze kroki

Przejdź do następnego artykułu, aby dowiedzieć się, jak...

Dodawanie DALL-E do aplikacji desktopowej .NET MAUI dla systemu Windows

Zobacz także

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-08-05