Tutorial: Criar um aplicativo de recomendação com o .NET MAUI e o ChatGPT

Saiba como criar um aplicativo do Windows MAUI do .NET no Visual Studio que integra APIs do ChatGPT para fornecer recomendações de localização alimentadas por IA. Crie sugestões de restaurante, hotel e atração com orientação passo a passo.

Neste tutorial, você aprenderá como:

Criar uma interface do usuário simples para seu aplicativo MAUI do .NET
Referenciar e inicializar a biblioteca de API .NET do OpenAI
Usar uma chave de API para vincular seu aplicativo a uma conta da API OpenAI
Fazer chamadas para as APIs de chat do OpenAI para obter recomendações

Pré-requisitos

Uma conta do OpenAI
Uma chave de API OpenAI
Os requisitos de instalação do .NET MAUI
Se você não estiver familiarizado com o MAUI do .NET no Windows, comece com o Criar seu primeiro aplicativo .NET MAUI para Windows tutorial.

Definir as variáveis de ambiente

Para usar o SDK do OpenAI, você precisará definir uma variável de ambiente com a chave de API. Neste exemplo, usaremos a variável de ambiente OPENAI_API_KEY. Depois de obter a chave de API no painel do desenvolvedor de OpenAI, é possível definir a variável de ambiente da linha de comando da seguinte maneira:

setx OPENAI_API_KEY <your-api-key>

Observe que esse método funciona para desenvolvimento no Windows, mas convém usar um método mais seguro para aplicativos de produção e suporte móvel. Por exemplo, você pode armazenar sua chave de API em um cofre de chaves seguro que um serviço remoto possa acessar em nome do seu aplicativo. Consulte Práticas recomendadas para segurança de chave OpenAI para obter mais informações.

Crie um novo projeto .NET MAUI com os elementos de interface do usuário necessários

Vamos começar criando um novo projeto MAUI do .NET no Visual Studio. Usaremos o modelo de aplicativo MAUI do .NET e adicionaremos alguns elementos de interface do usuário ao MainPage para fornecer aos usuários algumas recomendações com base em um local fornecido. A interface do usuário terá botões para obter recomendações para restaurantes, hotéis e atrações.

No Visual Studio, crie um novo projeto de aplicativo MAUI do .NET chamado ChatGptRecommendationApp.
Execute o novo projeto para garantir que o aplicativo seja compilado e executado com êxito.
Abra MainPage.xaml no Gerenciador de Soluções.

Substitua o conteúdo da VerticalStackLayout pela seguinte marcação 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 criar o projeto, você precisará adicionar Clicked manipuladores de eventos para cada um dos botões. Adicione o seguinte código ao arquivo MainPage.xaml.cs e remova o manipulador 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)
{
}

Os manipuladores de eventos estão todos marcados como async porque faremos chamadas assíncronas para a biblioteca de API .NET do OpenAI. Agora, ao executar o aplicativo, você deverá ver a seguinte interface do usuário:

Aplicativo MAUI do Windows .NET com a interface do usuário para fornecer recomendações.

Os usuários podem inserir sua localização no Entry controle e clicar em um dos botões para obter recomendações para restaurantes, hotéis ou atrações. O Label controle na parte inferior da interface do usuário exibirá os resultados.

Em seguida, vamos adicionar a biblioteca OpenAI ao projeto e prepará-la para fazer algumas chamadas à API.

Referenciar e inicializar a biblioteca OpenAI para .NET

Para chamar as APIs do ChatGPT da OpenAI, usaremos uma versão de pré-lançamento da biblioteca OpenAI para .NET do pacote NuGet. Essa biblioteca fornece aos aplicativos .NET acesso à API REST do OpenAI. Adicionaremos a biblioteca ao nosso projeto e a inicializaremos com nossa chave de API.

Abra o Console do Gerenciador de Pacotes no menu Ferramentas no Visual Studio.
Instale a biblioteca OpenAI executando o comando a seguir. O IncludePrerelease sinalizador é necessário porque a biblioteca ainda está em versão prévia:
```
Install-Package OpenAI -IncludePrerelease
```
Isso irá instalar um pré-lançamento da versão 2.0.0 ou posterior para o seu projeto. Você também pode instalar uma versão específica da biblioteca especificando o número de versão no comando. Por exemplo, para instalar a versão 2.0.0-beta.4, você executaria o seguinte comando:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Abra MainPage.xaml.cs, o arquivo code-behind do MainPage. Adicione o código a seguir à parte superior do arquivo para fazer referência à biblioteca OpenAI e criar uma variável para manter seu cliente OpenAI. Atualize o construtor para chamar o MainPage_Loaded método quando a página é carregada e adicione o MainPage_Loaded método para obter sua chave de API OpenAI do Registro do Windows e inicializar o cliente 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);
}
```
Isso inicializará a biblioteca OpenAI com sua chave de API. Você pode criar sua chave de API na página de configurações da API OpenAI.
Para compilar o projeto, você precisará adicionar as seguintes using instruções à parte superior do arquivo MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Agora estamos prontos para juntar tudo. Na próxima seção, adicionaremos algum código aos três manipuladores de eventos para fazer chamadas à biblioteca OpenAI e exibir os resultados da recomendação.

Adicionar chamadas à API do ChatGPT e testar o aplicativo

É hora de adicionar o código ao nosso arquivo code-behind que usará a biblioteca OpenAI para .NET para fazer chamadas à OpenAI ChatGPT API. Adicionaremos o código aos três manipuladores de eventos que criamos anteriormente. O código obterá a localização do usuário do Entry controle e o passará para a API para obter recomendações. Em seguida, exibiremos os resultados no Label controle na parte inferior da interface do usuário.

Crie um async método nomeado GetRecommendationAsync e chame-o de cada um dos manipuladores 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;
}

Esse código primeiro verifica se o usuário inseriu um local no Entry controle. Caso contrário, ele exibe um alerta e retorna. Se o usuário inseriu um local, obtém uma instância ChatClient e chama o método CompleteChatStreamingAsync nesse objeto para fazer uma chamada ao OpenAI. O CompleteChatStreamingAsync método usa um ChatMessage[] parâmetro, que pode ser fornecido como uma cadeia de caracteres, como estamos fazendo no exemplo.

O método retorna um AsyncResultCollection<StreamingChatCompletionUpdate>, que transmitirá respostas da API conforme elas são geradas. Iteramos de forma assíncrona sobre o updates e, posteriormente, iteramos sobre cada ChatMessageContentPart na resposta para criar a cadeia de caracteres de resposta. Em seguida, a SmallLabel resposta é exibida no controle localizado na parte inferior da interface do usuário.

Observação

É uma boa ideia adicionar tratamento de erros ao GetRecommendationAsync método para lidar com quaisquer exceções que possam ser geradas pela chamada à API. Deixamos isso de fora deste exemplo para simplificar.

Execute o aplicativo, insira um local e teste os botões de recomendação. Você deverá ver uma resposta da API no Label controle na parte inferior da interface do usuário:

É isso! Você criou com êxito um aplicativo WINDOWS .NET MAUI que usa a API OpenAI ChatGPT para fornecer recomendações para restaurantes, hotéis e atrações. Tente alterar os prompts para ver se você pode melhorar os resultados. Você também pode tentar alterar o nome do modelo passado para GetChatClient em GetRecommendationAsync para ver se obtém melhores resultados de um modelo diferente.

Importante

Lembre-se de ficar de olho no uso da API depois que o período de avaliação tiver expirado. Você também pode definir limites de gastos mensais em sua conta do OpenAI para evitar encargos inesperados.

Próximas etapas

Avance para o próximo artigo para saber como...

Adicionar DALL-E ao seu aplicativo de área de trabalho do .NET MAUI do Windows

Consulte também

Comentários

Esta página foi útil?

Last updated on 2025-08-05