Esercitazione: Creare un'app di raccomandazione con .NET MAUI e ChatGPT

2025-04-30

In questo tutorial si apprenderà come creare un'app MAUI .NET per Windows in Visual Studio che richiede le API ChatGPT di OpenAI per fornire raccomandazioni in base a una posizione immessa dall'utente. L'app avrà un'interfaccia utente intuitiva che consente all'utente di immettere una posizione e ottenere consigli per ristoranti, hotel e luoghi d'attrazione.

In questa esercitazione apprenderai a:

Creare un'interfaccia utente semplice per l'app MAUI .NET
Fare riferimento e inizializzare la libreria API .NET OpenAI
Usare una chiave API per collegare l'app a un account API OpenAI
Effettuare chiamate alle API di chat OpenAI per ottenere consigli

Prerequisiti

OpenAI account
chiave API OpenAI
Requisiti di installazione di .NET MAUI
Se sei nuovo a .NET MAUI su Windows, dovresti iniziare con l'esercitazione Creare la prima app .NET MAUI per Windows.

Imposta la variabile di ambiente

Per usare SDK OpenAI, è necessario impostare una variabile di ambiente con la chiave API. In questo esempio, si userà la variabile di ambiente OPENAI_API_KEY. Dopo aver ottenuto la chiave API dal dashboard per sviluppatori OpenAI, è possibile impostare la variabile di ambiente dalla riga di comando come indicato di seguito:

setx OPENAI_API_KEY <your-api-key>

Si tenga presente che questo metodo funziona per lo sviluppo in Windows, ma è preferibile usare un metodo più sicuro per le app di produzione e per il supporto per dispositivi mobili. Ad esempio, è possibile archiviare la chiave API in un insieme di credenziali delle chiavi sicuro a cui un servizio remoto può accedere per conto dell'app. Per altre informazioni, vedere Procedure consigliate per la sicurezza delle chiavi OpenAI .

Creare un nuovo progetto MAUI .NET con gli elementi dell'interfaccia utente necessari

Si inizierà creando un nuovo progetto MAUI .NET in Visual Studio. Si userà il modello di app MAUI .NET e si aggiungeranno alcuni elementi dell'interfaccia utente al MainPage per fornire agli utenti alcuni consigli in base a una posizione specificata. L'interfaccia utente avrà pulsanti per ottenere consigli per ristoranti, alberghi e luoghi d'attrazione.

In Visual Studio creare un nuovo progetto app .NET MAUI denominato ChatGptRecommendationApp.
Eseguire il nuovo progetto per assicurarsi che l'app venga compilata ed eseguita correttamente.
Aprire MainPage.xaml da Esplora soluzioni.

Sostituire il contenuto di questa pagina VerticalStackLayout con il seguente markup 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" />

Per compilare il progetto, è necessario aggiungere Clicked gestori eventi per ognuno dei pulsanti. Aggiungere il codice seguente al file MainPage.xaml.cs e rimuovere il gestore eventi esistente:

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

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

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

I gestori eventi sono tutti contrassegnati come async perché verranno effettuate chiamate asincrone alla libreria API .NET OpenAI. A questo punto, quando si esegue l'app, dovrebbe essere visualizzata la seguente interfaccia utente.

App MAUI di Windows .NET con l'interfaccia utente per fornire raccomandazioni.

Gli utenti possono immettere la loro posizione nel Entry controllo e fare clic su uno dei pulsanti per ottenere consigli per ristoranti, alberghi o luoghi d'attrazione. Il Label controllo nella parte inferiore dell'interfaccia utente visualizzerà i risultati.

Aggiungere quindi la libreria OpenAI al progetto e prepararla per effettuare alcune chiamate API.

Fare riferimento e inizializzare la libreria OpenAI per .NET

Per chiamare le API di ChatGPT di OpenAI, utilizzeremo una versione pre-rilascio del pacchetto NuGet OpenAI per .NET. Questa libreria fornisce alle applicazioni .NET l'accesso all'API REST OpenAI. Si aggiungerà la libreria al progetto e si avvierà il bootstrap con la chiave API.

Aprire il console di Gestione pacchetti dal menu strumenti di in Visual Studio.
Installare la libreria OpenAI eseguendo il comando seguente. Il flag IncludePrerelease è obbligatorio perché la libreria è ancora in anteprima:
```
Install-Package OpenAI -IncludePrerelease
```
Verrà installata una versione non definitiva della versione 2.0.0 o successiva nel progetto. È anche possibile installare una versione specifica della libreria specificando il numero di versione nel comando . Ad esempio, per installare la versione 2.0.0-beta.4, eseguire il comando seguente:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Aprire MainPage.xaml.cs, il file code-behind per MainPage. Aggiungere il codice seguente all'inizio del file per fare riferimento alla libreria OpenAI e creare una variabile per contenere il client OpenAI. Aggiornare il costruttore per chiamare il MainPage_Loaded metodo quando viene caricata la pagina e aggiungere il MainPage_Loaded metodo per ottenere la chiave API OpenAI dal Registro di sistema di Windows e inizializzare il client 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);
}
```
Verrà avviato il bootstrap della libreria OpenAI con la chiave API. È possibile creare la chiave API nella pagina Delle impostazioni dell'API OpenAI.
Per compilare il progetto, è necessario aggiungere le istruzioni seguenti using all'inizio del file MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

A questo punto siamo pronti a mettere tutto insieme. Nella sezione successiva si aggiungerà codice ai tre gestori eventi per effettuare chiamate alla libreria OpenAI e visualizzare i risultati delle raccomandazioni.

Aggiungere chiamate API ChatGPT e testare l'app

È possibile aggiungere il codice al file code-behind che userà la libreria OpenAI per .NET per effettuare chiamate all'API OpenAI ChatGPT. Il codice verrà aggiunto ai tre gestori eventi creati in precedenza. Il codice otterrà la posizione dell'utente dal Entry controllo e lo passerà all'API per ottenere raccomandazioni. Verranno quindi visualizzati i risultati nel Label controllo nella parte inferiore dell'interfaccia utente.

Creare un async metodo denominato GetRecommendationAsync e richiederlo da ognuno dei gestori eventi:

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

Questo codice effettua una verifica prima di tutto per assicurarsi che l'utente abbia immesso una posizione nel Entry controllo . In caso contrario, viene visualizzato un avviso e viene restituito. Se l'utente ha immesso una posizione, ottiene un'istanza ChatClient e chiama il CompleteChatStreamingAsync metodo sull'oggetto per effettuare una chiamata a OpenAI. Il CompleteChatStreamingAsync metodo accetta un ChatMessage[] parametro, che può essere fornito come stringa, come avviene nell'esempio.

Il metodo restituisce un AsyncResultCollection<StreamingChatCompletionUpdate>oggetto , che trasmetterà le risposte dall'API man mano che vengono generate. Si esegue l'iterazione updates in modo asincrono su e successivamente si esegue l'iterazione su ogni ChatMessageContentPart nella risposta per compilare la stringa di risposta. La risposta viene quindi visualizzata nel SmallLabel controllo nella parte inferiore dell'interfaccia utente.

Nota

È consigliabile aggiungere la gestione degli errori al GetRecommendationAsync metodo per gestire eventuali eccezioni che potrebbero essere generate dalla chiamata API. Questo esempio è stato lasciato fuori per semplicità.

Eseguire l'app, immettere un percorso e testare i pulsanti di raccomandazione. Verrà visualizzata una risposta dall'API nel controllo Label nella parte inferiore dell'interfaccia utente:

Ecco fatto! È stata creata correttamente un'app MAUI di Windows .NET che usa l'API OpenAI ChatGPT per fornire consigli per ristoranti, hotel e luoghi d'attrazione. Provare a modificare le richieste per verificare se è possibile migliorare i risultati. È anche possibile provare a modificare il nome del modello passato a GetChatClient per GetRecommendationAsync verificare se si ottengono risultati migliori da un modello diverso.

Importante

Ricordarsi di tenere d'occhio l'utilizzo dell'API dopo la scadenza del periodo di valutazione. È anche possibile impostare limiti di spesa mensili per l'account OpenAI per evitare addebiti imprevisti.

Passaggi successivi

Passare all'articolo successivo per informazioni su come...

Aggiungi DALL-E alla tua app desktop Windows .NET MAUI

Condividi tramite