Tutoriel : Créer une application de recommandation avec .NET MAUI et ChatGPT

Découvrez comment créer une application Windows .NET MAUI dans Visual Studio qui intègre les API ChatGPT pour fournir des recommandations d’emplacement basées sur l’IA. Créez un restaurant, un hôtel et des suggestions d’attraction avec des instructions pas à pas.

Dans ce tutoriel, vous allez apprendre à :

Créer une interface utilisateur simple pour votre application .NET MAUI
Référencer et démarrer la bibliothèque d’API OpenAI .NET
Utiliser une clé API pour lier votre application à un compte d’API OpenAI
Passer des appels aux API de conversation OpenAI pour obtenir des recommandations

Prerequisites

Un compte OpenAI
Une clé API OpenAI
Configuration requise pour l’installation de .NET MAUI
Si vous débutez avec .NET MAUI sur Windows, vous devez commencer par le Créer votre première application .NET MAUI pour Windows didacticiel.

Définir vos variables d’environnement

Pour utiliser le Kit de développement logiciel (SDK) OpenAI, vous devez définir une variable d’environnement avec votre clé API. Dans cet exemple, nous allons utiliser la variable d'environnement OPENAI_API_KEY. Une fois que vous avez votre clé API à partir du tableau de bord du développeur OpenAI, vous pouvez définir la variable d’environnement à partir de la ligne de commande comme suit :

setx OPENAI_API_KEY <your-api-key>

Notez que cette méthode fonctionne pour le développement sur Windows, mais il est préférable d'utiliser une méthode plus sécurisée pour les applications de production et pour la prise en charge mobile. Par exemple, vous pouvez stocker votre clé API dans un coffre de clés sécurisé auquel un service distant peut accéder pour le compte de votre application. Pour plus d’informations, consultez la page Best practices for OpenAI key safety (Bonnes pratiques pour la sécurité des clés OpenAI).

Créer un projet MAUI .NET avec les éléments d’interface utilisateur requis

Nous allons commencer par créer un projet .NET MAUI dans Visual Studio. Nous allons utiliser le modèle d’application .NET MAUI et ajouter des éléments d’interface utilisateur à MainPage pour fournir aux utilisateurs des recommandations basées sur un emplacement fourni. L’interface utilisateur aura des boutons pour obtenir des recommandations pour les restaurants, les hôtels et les attractions.

Dans Visual Studio, créez un projet d’application .NET MAUI nommé ChatGptRecommendationApp.
Exécutez le nouveau projet pour vous assurer que l’application génère et s’exécute correctement.
Ouvrez MainPage.xaml à partir de l’Explorateur de solutions.

Remplacez les contenus du VerticalStackLayout par le balisage XAML suivant :

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

Pour générer le projet, vous devez ajouter Clicked des gestionnaires d’événements pour chacun des boutons. Ajoutez le code suivant au fichier MainPage.xaml.cs et supprimez le gestionnaire d’événements existant :
```
private async void OnRestaurantClicked(object sender, EventArgs e)
{
}

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

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

Les gestionnaires d’événements sont tous marqués comme async parce que nous effectuerons des appels asynchrones à la bibliothèque d’API OpenAI .NET. Maintenant, lorsque vous exécutez l’application, vous devez voir l’interface utilisateur suivante :

Application MAUI Windows .NET avec l’interface utilisateur pour fournir des recommandations.

Les utilisateurs peuvent entrer leur emplacement dans le Entry contrôle et cliquer sur l’un des boutons pour obtenir des recommandations pour les restaurants, les hôtels ou les attractions. Le Label contrôle en bas de l’interface utilisateur affiche les résultats.

Ensuite, ajoutons la bibliothèque OpenAI au projet et préparons-le à effectuer des appels d’API.

Référencer et initialiser la bibliothèque OpenAI pour .NET

Pour appeler les API ChatGPT d’OpenAI, nous allons utiliser une version préliminaire de la bibliothèque OpenAI pour le package NuGet .NET. Cette bibliothèque fournit aux applications .NET un accès à l’API REST OpenAI. Nous allons ajouter la bibliothèque à notre projet et la démarrer avec notre clé API.

Ouvrez la console du Gestionnaire de package à partir du menu Outils de Visual Studio.
Installez la bibliothèque OpenAI en exécutant la commande suivante. L’indicateur IncludePrerelease est requis, car la bibliothèque est toujours en préversion :
```
Install-Package OpenAI -IncludePrerelease
```
Cela doit installer une préversion de la version 2.0.0 ou ultérieure de votre projet. Vous pouvez également installer une version spécifique de la bibliothèque en spécifiant le numéro de version dans la commande. Par exemple, pour installer la version 2.0.0-beta.4, vous devez exécuter la commande suivante :
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Ouvrez MainPage.xaml.cs, le fichier code-behind pour mainPage. Ajoutez le code suivant en haut du fichier pour référencer la bibliothèque OpenAI et créez une variable pour contenir votre client OpenAI. Mettez à jour le constructeur pour appeler la MainPage_Loaded méthode lorsque la page est chargée, puis ajoutez la MainPage_Loaded méthode pour obtenir votre clé API OpenAI à partir du Registre Windows et initialiser le 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);
}
```
Cela démarre la bibliothèque OpenAI avec votre clé API. Vous pouvez créer votre clé API dans la page des paramètres de l’API OpenAI.
Pour compiler le projet, vous devez ajouter les instructions suivantes using en haut du fichier MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Maintenant, nous sommes prêts à tout mettre ensemble. Dans la section suivante, nous allons ajouter du code aux trois gestionnaires d’événements pour effectuer des appels à la bibliothèque OpenAI et afficher les résultats des recommandations.

Ajouter des appels d’API ChatGPT et tester l’application

Il est temps d’ajouter le code à notre fichier code-behind qui utilisera la bibliothèque OpenAI pour .NET afin d’effectuer des appels à l’API ChatGPT OpenAI. Nous allons ajouter le code aux trois gestionnaires d’événements que nous avons créés précédemment. Le code obtient l’emplacement de l’utilisateur à partir du Entry contrôle et le transmet à l’API pour obtenir des recommandations. Ensuite, nous allons afficher les résultats dans le Label contrôle en bas de l’interface utilisateur.

Créez une async méthode nommée GetRecommendationAsync et appelez-la à partir de chacun des gestionnaires d’événements :

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

Ce code vérifie d’abord que l’utilisateur a entré un emplacement dans le Entry contrôle. Si ce n’est pas le cas, elle affiche une alerte et retourne. Si l’utilisateur a entré un emplacement, il obtient une ChatClient instance et appelle la CompleteChatStreamingAsync méthode sur l’objet pour effectuer un appel à OpenAI. La CompleteChatStreamingAsync méthode prend un ChatMessage[] paramètre, qui peut être fourni en tant que chaîne, comme nous le faisons dans l’exemple.

La méthode retourne un AsyncResultCollection<StreamingChatCompletionUpdate>, qui diffuse en continu les réponses de l’API à mesure qu’elles sont générées. Nous itérons de façon asynchrone sur le updates et ensuite sur chaque ChatMessageContentPart dans la réponse pour construire la chaîne de la réponse. La réponse est ensuite affichée dans le SmallLabel contrôle en bas de l’interface utilisateur.

Note

Il est judicieux d’ajouter la gestion des erreurs à la méthode GetRecommendationAsync pour gérer les exceptions susceptibles d’être levées par l’appel d’API. Nous avons laissé cela hors de cet exemple par souci de simplicité.

Exécutez l’application, entrez un emplacement et testez les boutons de recommandation. Vous devez voir une réponse de l’API dans le Label contrôle en bas de l’interface utilisateur :

C’est tout ! Vous avez créé une application Windows .NET MAUI qui utilise l’API OpenAI ChatGPT pour fournir des recommandations pour les restaurants, les hôtels et les attractions. Essayez de modifier les instructions pour voir si vous pouvez améliorer les résultats. Vous pouvez également essayer de modifier le nom du modèle transmis à GetChatClient dans GetRecommendationAsync pour voir si vous obtenez de meilleurs résultats avec un autre modèle.

Important

N’oubliez pas de garder un œil sur l’utilisation de votre API après l’expiration de votre période d’évaluation. Vous pouvez également définir des limites de dépense mensuelles sur votre compte OpenAI pour éviter les frais inattendus.

Étapes suivantes

Passez à l’article suivant pour apprendre à...

Ajouter DALL-E à votre application de bureau .NET MAUI Windows

Voir aussi

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-08-05