Lernprogramm: Erstellen einer Empfehlungs-App mit .NET MAUI und ChatGPT

Erfahren Sie, wie Sie eine .NET MAUI Windows-App in Visual Studio erstellen, die ChatGPT-APIs integriert, um KI-basierte Standortempfehlungen bereitzustellen. Erstellen Sie Restaurant-, Hotel- und Attraktionsvorschläge mit schrittweisen Anleitungen.

In diesem Tutorial erfahren Sie, wie:

Erstellen einer einfachen Benutzeroberfläche für Ihre .NET MAUI-App
Verweis und Einbindung der OpenAI .NET-API-Bibliothek
Verwenden eines API-Schlüssels zum Verknüpfen Ihrer App mit einem OpenAI-API-Konto
Anrufe bei den OpenAI-Chat-APIs tätigen, um Empfehlungen zu erhalten.

Voraussetzungen

Ein OpenAI-Konto
Ein OpenAI-API-Schlüssel
Die .NET MAUI-Installationsanforderungen
Wenn Sie neu bei .NET MAUI unter Windows sind, sollten Sie mit dem Tutorial Erstellen Ihrer ersten .NET MAUI-App für Windows beginnen.

Festlegen Ihrer Umgebungsvariablen

Um das OpenAI SDK zu verwenden, müssen Sie eine Umgebungsvariable mit Ihrem API-Schlüssel festlegen. In diesem Beispiel verwenden wir die Umgebungsvariable OPENAI_API_KEY. Sobald Sie Ihren API-Schlüssel aus dem OpenAI-Entwickler-Dashboard haben, können Sie die Umgebungsvariable wie folgt von der Kommandozeile aus setzen:

setx OPENAI_API_KEY <your-api-key>

Beachten Sie, dass diese Methode für die Entwicklung unter Windows funktioniert, Sie aber für Produktionsanwendungen und für den mobilen Support eine sicherere Methode verwenden sollten. So können Sie beispielsweise Ihren API-Schlüssel in einem sicheren Schlüsseltresor speichern, auf den ein Remote-Dienst im Namen Ihrer Anwendung zugreifen kann. Weitere Informationen finden Sie unter Bewährte Praktiken für OpenAI-Schlüsselsicherheit.

Erstellen eines neuen .NET MAUI-Projekts mit den erforderlichen UI-Elementen

Zunächst erstellen wir ein neues .NET MAUI-Projekt in Visual Studio. Wir verwenden die .NET MAUI-App-Vorlage und fügen der MainPage einige UI-Elemente hinzu, um Benutzern einige Empfehlungen basierend auf einem bereitgestellten Speicherort bereitzustellen. Die Benutzeroberfläche enthält Schaltflächen, um Empfehlungen für Restaurants, Hotels und Attraktionen zu erhalten.

Erstellen Sie in Visual Studio ein neues .NET MAUI-App-Projekt namens "ChatGptRecommendationApp".
Führen Sie das neue Projekt aus, um sicherzustellen, dass die App erfolgreich erstellt und ausgeführt wird.
Öffnen Sie MainPage.xaml im Projektmappen-Explorer.

Ersetzen Sie den Inhalt des VerticalStackLayout Codes durch das folgende XAML-Markup:

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

Um das Projekt zu erstellen, müssen Sie Clicked Ereignishandler für jede Schaltfläche hinzufügen. Fügen Sie der datei MainPage.xaml.cs den folgenden Code hinzu, und entfernen Sie den vorhandenen Ereignishandler:
```
private async void OnRestaurantClicked(object sender, EventArgs e)
{
}

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

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

Die Ereignishandler sind alle als gekennzeichnet, async da asynchrone Aufrufe an die OpenAI .NET-API-Bibliothek ausgeführt werden. Beim Ausführen der App sollte nun die folgende Benutzeroberfläche angezeigt werden:

Windows .NET MAUI-App mit der Benutzeroberfläche zum Bereitstellen von Empfehlungen.

Benutzer können ihre Position im Entry Steuerelement eingeben und auf eine der Schaltflächen klicken, um Empfehlungen für Restaurants, Hotels oder Attraktionen zu erhalten. Das Label Steuerelement unten auf der Benutzeroberfläche zeigt die Ergebnisse an.

Als Nächstes fügen wir die OpenAI-Bibliothek dem Projekt hinzu und bereiten sie bereit, einige API-Aufrufe zu tätigen.

Auf die OpenAI-Bibliothek für .NET verweisen und sie initialisieren

Um die ChatGPT-APIs von OpenAI aufzurufen, verwenden wir eine Vorabversion des NuGet-Pakets der OpenAI-Bibliothek für .NET. Diese Bibliothek bietet .NET-Anwendungen Zugriff auf die OpenAI REST-API. Wir fügen die Bibliothek zu unserem Projekt hinzu und bootstrapieren sie mit unserem API-Schlüssel.

Öffnen Sie die Paket-Manager-Konsole über das Menü "Extras " in Visual Studio.
Installieren Sie die OpenAI-Bibliothek, indem Sie den folgenden Befehl ausführen. Das IncludePrerelease Flag ist erforderlich, da sich die Bibliothek noch in der Vorschau befindet:
```
Install-Package OpenAI -IncludePrerelease
```
Dadurch sollte eine Vorabversion von Version 2.0.0 oder höher in Ihrem Projekt installiert werden. Sie können auch eine bestimmte Version der Bibliothek installieren, indem Sie die Versionsnummer im Befehl angeben. Um beispielsweise Version 2.0.0-beta.4 zu installieren, führen Sie den folgenden Befehl aus:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Öffnen Sie MainPage.xaml.cs, die CodeBehind-Datei für die MainPage. Fügen Sie oben in der Datei den folgenden Code hinzu, um auf die OpenAI-Bibliothek zu verweisen und eine Variable zu erstellen, die Ihren OpenAI-Client enthält. Aktualisieren Sie den Konstruktor, um die MainPage_Loaded Methode aufzurufen, wenn die Seite geladen wird, und fügen Sie die MainPage_Loaded Methode hinzu, um Ihren OpenAI-API-Schlüssel aus der Windows-Registrierung abzurufen und den OpenAI-Client zu initialisieren:
```
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);
}
```
Dadurch wird die OpenAI-Bibliothek mit Ihrem API-Schlüssel gestartet. Sie können Ihren API-Schlüssel auf der Seite "OpenAI-API-Einstellungen" erstellen.
Um das Projekt zu kompilieren, müssen Sie die folgenden using Anweisungen oben in der datei MainPage.xaml.cs hinzufügen:
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Jetzt sind wir bereit, alles zusammenzustellen. Im nächsten Abschnitt fügen wir den drei Ereignishandlern Code hinzu, um Aufrufe an die OpenAI-Bibliothek durchzuführen und die Empfehlungsergebnisse anzuzeigen.

Hinzufügen von ChatGPT-API-Aufrufen und Testen der App

Es ist an der Zeit, den Code zu unserer CodeBehind-Datei hinzuzufügen, die die OpenAI-Bibliothek für .NET verwendet, um Aufrufe an die OpenAI ChatGPT-API zu tätigen. Wir fügen den Code den drei zuvor erstellten Ereignishandlern hinzu. Der Code ruft die Position des Benutzers vom Entry Steuerelement ab und übergibt ihn an die API, um Empfehlungen zu erhalten. Anschließend zeigen wir die Ergebnisse im Label Steuerelement am unteren Rand der Benutzeroberfläche an.

Erstellen Sie eine Methode namens asyncGetRecommendationAsync und rufen Sie sie aus den einzelnen Ereignishandlern auf.

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

Dieser Code überprüft zuerst, ob der Benutzer einen Ort im Entry Steuerelement eingegeben hat. Falls nicht, wird eine Warnung angezeigt und es kehrt zurück. Wenn der Benutzer einen Speicherort eingegeben hat, wird eine ChatClient Instanz erstellt, und die CompleteChatStreamingAsync Methode wird an diesem Objekt aufgerufen, um einen Aufruf an OpenAI zu machen. Die CompleteChatStreamingAsync Methode verwendet einen ChatMessage[] Parameter, der wie im Beispiel als Zeichenfolge bereitgestellt werden kann.

Die Methode gibt ein AsyncResultCollection<StreamingChatCompletionUpdate> zurück, das Antworten von der API streamt, sobald sie generiert werden. Wir durchlaufen asynchron die updates und iterieren anschließend über jedes ChatMessageContentPart in der Antwort, um die Antwortzeichenfolge zu bilden. Die Antwort wird dann im SmallLabel Steuerelement am unteren Rand der Benutzeroberfläche angezeigt.

Hinweis

Es empfiehlt sich, der GetRecommendationAsync Methode fehlerbehandlung hinzuzufügen, um ausnahmen zu behandeln, die möglicherweise vom API-Aufruf ausgelöst werden. Wir haben das aus diesem Beispiel aus Gründen der Einfachheit ausgelassen.

Führen Sie die App aus, geben Sie einen Ort ein, und testen Sie die Empfehlungsschaltflächen. Im Steuerelement am unteren Rand der Benutzeroberfläche sollte eine Antwort der API Label angezeigt werden:

Das ist alles! Sie haben erfolgreich eine Windows .NET MAUI-App erstellt, die die OpenAI ChatGPT-API verwendet, um Empfehlungen für Restaurants, Hotels und Attraktionen bereitzustellen. Versuchen Sie, die Eingabeaufforderungen zu ändern, um festzustellen, ob Sie die Ergebnisse verbessern können. Sie können auch versuchen, den Modellnamen, der an GetChatClient in GetRecommendationAsync übergeben wird, zu ändern, um zu sehen, ob Sie bessere Ergebnisse von einem anderen Modell erhalten.

Von Bedeutung

Denken Sie daran, die API-Nutzung nach Ablauf des Testzeitraums im Auge zu behalten. Sie können auch monatliche Ausgabenbeschränkungen für Ihr OpenAI-Konto festlegen, um unerwartete Gebühren zu vermeiden.

Nächste Schritte

Wechseln Sie zum nächsten Artikel, um zu erfahren, wie...

Hinzufügen von DALL-E zu Ihrer .NET MAUI Windows-Desktop-App

Siehe auch

Feedback

War diese Seite hilfreich?

Last updated on 2025-08-05