Tutorial: Creación de una aplicación de recomendación con .NET MAUI y ChatGPT

Obtenga información sobre cómo crear una aplicación de Windows MAUI de .NET en Visual Studio que integre las API de ChatGPT para ofrecer recomendaciones de ubicación con tecnología de inteligencia artificial. Cree sugerencias de restaurante, hotel y atracción con instrucciones paso a paso.

En este tutorial, aprenderá a:

Creación de una interfaz de usuario sencilla para la aplicación .NET MAUI
Referenciar e inicializar la biblioteca OpenAI .NET API
Uso de una clave de API para vincular la aplicación a una cuenta de API de OpenAI
Realizar llamadas a las API de chat de OpenAI para obtener recomendaciones

Prerrequisitos

Una cuenta de OpenAI
Una clave de API de OpenAI
Requisitos de instalación de .NET MAUI
Si no está familiarizado con .NET MAUI en Windows, debería empezar con el tutorial Crea tu primera aplicación .NET MAUI para Windows.

Establecimiento de la variable de entorno

Para usar el SDK de OpenAI, deberá establecer una variable de entorno con la clave de API. En este ejemplo, usaremos la variable de entorno OPENAI_API_KEY. Una vez que tenga la clave de API desde el panel para desarrolladores de OpenAI, puede establecer la variable de entorno desde la línea de comandos de la manera siguiente:

setx OPENAI_API_KEY <your-api-key>

Tenga en cuenta que este método funciona para el desarrollo en Windows, pero se recomienda usar un método más seguro para aplicaciones de producción y para soporte móvil. Por ejemplo, puede almacenar la clave de API en un almacén de claves seguro al que un servicio remoto pueda acceder en nombre de la aplicación. Consulte Procedimientos recomendados para la seguridad de claves openAI para obtener más información.

Creación de un nuevo proyecto maui de .NET con los elementos de interfaz de usuario necesarios

Empezaremos creando un nuevo proyecto MAUI de .NET en Visual Studio. Usaremos la plantilla aplicación MAUI de .NET y agregaremos algunos elementos de interfaz de usuario a MainPage para proporcionar a los usuarios algunas recomendaciones basadas en una ubicación proporcionada. La interfaz de usuario tendrá botones para obtener recomendaciones para restaurantes, hoteles y atracciones.

En Visual Studio, cree un nuevo proyecto de aplicación MAUI de .NET denominado ChatGptRecommendationApp.
Ejecute el nuevo proyecto para asegurarse de que la aplicación se compila y se ejecuta correctamente.
Abra MainPage.xaml desde el Explorador de soluciones.

Reemplace el contenido de VerticalStackLayout con el siguiente marcado 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" />

Para construir el proyecto, deberá agregar controladores de eventos Clicked para cada uno de los botones. Agregue el código siguiente al archivo MainPage.xaml.cs y quite el controlador de eventos existente:

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

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

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

Los controladores de eventos se marcan como async porque se realizarán llamadas asincrónicas a la biblioteca de API de .NET de OpenAI. Ahora, al ejecutar la aplicación, debería ver la siguiente interfaz de usuario:

Aplicación MAUI de Windows .NET con la interfaz de usuario para proporcionar recomendaciones.

Los usuarios pueden introducir su ubicación en el Entry control y hacer clic en uno de los botones para obtener recomendaciones para restaurantes, hoteles o atracciones. El Label control situado en la parte inferior de la interfaz de usuario mostrará los resultados.

A continuación, vamos a agregar la biblioteca OpenAI al proyecto y prepararla para realizar algunas llamadas API.

Referencia e inicialización de la biblioteca de OpenAI para .NET

Para llamar a las API de ChatGPT de OpenAI, vamos a usar una versión preliminar de la biblioteca de OpenAI para el paquete NuGet de .NET. Esta biblioteca proporciona a las aplicaciones .NET acceso a la API REST de OpenAI. Agregaremos la biblioteca al proyecto y la arrancaremos con nuestra clave de API.

Abra la consola del Administrador de paquetes en el menú Herramientas de Visual Studio.
Ejecute el comando siguiente para instalar la biblioteca openAI. La IncludePrerelease marca es necesaria porque la biblioteca todavía está en versión preliminar:
```
Install-Package OpenAI -IncludePrerelease
```
Esto debe instalar una versión preliminar de la versión 2.0.0 o posterior en el proyecto. También puede instalar una versión específica de la biblioteca especificando el número de versión en el comando . Por ejemplo, para instalar la versión 2.0.0-beta.4, ejecutaría el siguiente comando:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Abra MainPage.xaml.cs, el archivo de código subyacente de MainPage. Agregue el código siguiente a la parte superior del archivo para hacer referencia a la biblioteca de OpenAI y crear una variable que contenga el cliente de OpenAI. Actualice el constructor para llamar al método MainPage_Loaded cuando se cargue la página y agregue el método MainPage_Loaded para obtener su clave de API de OpenAI del Registro de Windows e inicializar el cliente de 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);
}
```
Esto arrancará la biblioteca de OpenAI con la clave de API. Puede crear la clave de API en la página de configuración de api de OpenAI.
Para compilar el proyecto, deberá agregar las siguientes using instrucciones a la parte superior del archivo MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Ahora estamos listos para reunirlo todo. En la sección siguiente, agregaremos código a los tres controladores de eventos para realizar llamadas a la biblioteca de OpenAI y mostraremos los resultados de la recomendación.

Incorporación de llamadas API de ChatGPT y prueba de la aplicación

Es el momento de agregar el código a nuestro archivo de código subyacente que usará la biblioteca de OpenAI para .NET para realizar llamadas a la API ChatGPT de OpenAI. Agregaremos el código a los tres controladores de eventos que creamos anteriormente. El código obtendrá la ubicación del usuario del Entry control y la pasará a la API para obtener recomendaciones. A continuación, mostraremos los resultados en el Label control en la parte inferior de la interfaz de usuario.

Cree un async método denominado GetRecommendationAsync y llámelo desde cada uno de los controladores de eventos:

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

En primer lugar, este código comprueba si el usuario ha escrito una ubicación en el Entry control. Si no es así, muestra una alerta y devuelve. Si el usuario ha introducido una ubicación, obtiene una instancia ChatClient y llama a su CompleteChatStreamingAsync método en ese objeto para realizar una llamada a OpenAI. El CompleteChatStreamingAsync método toma un ChatMessage[] parámetro, que se puede proporcionar como una cadena, como se hace en el ejemplo.

El método devuelve un AsyncResultCollection<StreamingChatCompletionUpdate> objeto, que transmitirá las respuestas de la API a medida que se generan. Iteramos de forma asincrónica sobre updates y, posteriormente, iteramos sobre cada ChatMessageContentPart en la respuesta para construir la cadena de respuesta. A continuación, la respuesta se muestra en el SmallLabel control situado en la parte inferior de la interfaz de usuario.

Nota:

Es una buena idea agregar el control de errores al GetRecommendationAsync método para controlar las excepciones que podría producir la llamada API. Lo hemos dejado fuera de este ejemplo por motivos de simplicidad.

Ejecute la aplicación, escriba una ubicación y pruebe los botones de recomendación. Debería ver una respuesta de la API en el Label control en la parte inferior de la interfaz de usuario:

Eso es todo. Ha creado correctamente una aplicación MAUI de Windows .NET que usa la API de ChatGPT de OpenAI para proporcionar recomendaciones para restaurantes, hoteles y atracciones. Intente cambiar las indicaciones para ver si puede mejorar los resultados. También puede intentar cambiar el nombre del modelo pasado a GetChatClient en GetRecommendationAsync para ver si obtiene mejores resultados de otro modelo.

Importante

Recuerde tener en cuenta el uso de la API después de que haya expirado el período de prueba. También puede establecer límites de gasto mensuales en su cuenta de OpenAI para evitar cargos inesperados.

Pasos siguientes

Pase al siguiente artículo para obtener información sobre cómo...

Incorporación de DALL-E a la aplicación de escritorio de .NET MAUI para Windows

Consulte también

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2025-08-05