자습서: .NET MAUI 및 ChatGPT를 사용하여 추천 앱 만들기

아티클
04/12/2024

이 자습서에서는 사용자가 입력한 위치에 따라 권장 사항을 제공하기 위해 OpenAI의 ChatGPT API를 호출하는 Visual Studio의 Windows용 .NET MAUI 앱을 만드는 방법을 알아봅니다. 앱에는 사용자가 위치를 입력하고 레스토랑, 호텔 및 관광 명소에 대한 권장 사항을 얻을 수 있는 간단한 UI가 있습니다.

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

.NET MAUI 앱에 대한 간단한 사용자 인터페이스 만들기
이 Azure.AI.OpenAI 라이브러리 참조 및 부트스트랩
API 키를 사용하여 앱을 OpenAI API 계정에 연결
OpenAI 채팅 API를 호출하여 권장 사항 가져오기

필수 조건

OpenAI 계정
OpenAI API 키
NET MAUI 설치 요구 사항 확인
Windows에서 .NET MAUI를 처음 접하는 경우 Windows용 첫 번째 .NET MAUI 앱 빌드 자습서부터 시작해야 합니다.

환경 변수 설정

OpenAI SDK를 사용하려면 API 키로 환경 변수를 설정해야 합니다. 이 예시에서는 OPENAI_API_KEY 환경 변수를 사용합니다. OpenAI 개발자 대시보드에서 API 키를 받으면 명령줄에서 다음과 같이 환경 변수를 설정할 수 있습니다.

setx OPENAI_API_KEY <your-api-key>

이 방법은 Windows에서 개발하는 데 사용되지만 프로덕션 앱 및 모바일 지원에 더 안전한 방법을 사용하려고 합니다. 예를 들어 원격 서비스가 앱을 대신하여 액세스할 수 있는 보안 키 자격 증명 모음에 API 키를 저장할 수 있습니다. 자세한 내용은 OpenAI 키 안전에 대한 모범 사례를 참조하세요.

필요한 UI 요소를 사용하여 새 .NET MAUI 프로젝트 만들기

먼저 Visual Studio에서 새 .NET MAUI 프로젝트를 만듭니다. 이 .NET MAUI 앱 템플릿을 사용하고 MainPage에 일부 UI 요소를 추가하여 제공된 위치에 따라 사용자에게 몇 가지 권장 사항을 제공합니다. UI에는 레스토랑, 호텔 및 관광 명소에 대한 권장 사항을 가져오는 단추가 있습니다.

Visual Studio에서 ChatGptRecommendationApp이라는 새 .NET MAUI 앱 프로젝트를 만듭니다.
새 프로젝트를 실행하여 앱이 성공적으로 빌드되고 실행되는지 확인합니다.
솔루션 탐색기에서 MainPage.xaml 열기.

이 VerticalStackLayout 의 내용을 다음 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" />

프로젝트를 빌드하려면 각 단추에 대한 이벤트 처리기를 추가 Clicked 해야 합니다. 이 MainPage.xaml.cs 파일에 다음 코드를 추가하고 기존 이벤트 핸들러를 제거합니다:
```
private async void OnRestaurantClicked(object sender, EventArgs e)
{
}

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

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

이벤트 처리기는 모두 Azure.AI.OpenAI 라이브러리에 대한 비동기 호출을 만들기 때문에 표시됩니다 async . 이제 앱을 실행하면 다음 UI가 표시됩니다:

권장 사항을 제공하기 위한 UI가 포함된 Windows .NET MAUI 앱.

사용자는 컨트롤에 Entry 자신의 위치를 입력하고 단추 중 하나를 클릭하여 레스토랑, 호텔 또는 관광 명소에 대한 권장 사항을 얻을 수 있습니다. 이 Label UI 아래쪽의 컨트롤에 결과가 표시됩니다.

다음으로, 프로젝트에 Azure.AI.OpenAI 라이브러리를 추가하고 일부 API 호출을 준비해 보겠습니다.

Azure.AI.OpenAI 라이브러리 참조 및 초기화

OpenAI의 ChatGPT API를 호출하기 위해 Azure.AI.OpenAI라는 Microsoft Azure 팀의 시험판 NuGet 패키지를 사용합니다. 이 라이브러리는 OpenAI 및 Azure OpenAI API를 모두 호출하기 위한 .NET API를 제공합니다. 프로젝트에 라이브러리를 추가하고 API 키를 사용하여 부트스트랩합니다.

Visual Studio의 도구 메뉴에서 패키지 관리자 콘솔을 엽니다.
다음 명령을 실행하여 Azure.AI.OpenAI 라이브러리를 설치합니다. 라이브러리가 아직 미리 보기 상태이므로 IncludePrerelease 플래그가 필요합니다.
```
Install-Package Azure.AI.OpenAI -IncludePrerelease
```
MainPage의 코드백 파일인 MainPage.xaml.cs를 엽니다. Azure.AI.OpenAI 라이브러리를 참조하고 OpenAI API 키를 보유하는 변수를 만들려면 파일 맨 위에 다음 코드를 추가합니다. 페이지가 로드될 때 MainPage_Loaded 메서드를 호출하도록 생성자를 업데이트하고 Azure OpenAI 라이브러리를 초기화하는 MainPage_Loaded 메서드를 추가 합니다.
```
private OpenAIClient _chatGptClient;
private string openAIKey = "<your-api-key-here>";
private string openAIEndpoint = null;

public MainPage()
{
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    _chatGptClient = !string.IsNullOrWhiteSpace(openAIEndpoint)
        ? new OpenAIClient(
            new Uri(openAIEndpoint),
            new AzureKeyCredential(openAIKey))
        : new OpenAIClient(openAIKey);
}
```
그러면 API 키를 사용하여 Azure OpenAI 라이브러리를 부트스트랩하고 몇 가지 기본 옵션을 설정합니다. 이 OpenAI API 설정 페이지에서 API 키를 만들 수 있습니다. 이 코드는 Azure OpenAI API를 사용하는 경우에도 엔드포인트를 설정할 수 있도록 작성되었습니다. OpenAI API를 사용하는 경우 openAIEndpoint 변수를 null으로 설정된 상태로 둡니다.
프로젝트를 컴파일하려면 다음 using 명령문을 MainPage.xaml.cs 파일의 맨 위에 추가해야 합니다.
```
using Azure.AI.OpenAI;
using Azure;
```

이제 모든 것을 함께 사용할 준비가 되었습니다. 다음 섹션에서는 Azure.AI.OpenAI 라이브러리를 호출하고 권장 사항 결과를 표시하는 세 가지 이벤트 처리기에 일부 코드를 추가합니다.

ChatGPT API 호출 추가 및 앱 테스트

Azure.AI.OpenAI 라이브러리를 사용하여 OpenAI ChatGPT API를 호출하는 코드를 코드 숨김 파일에 추가해야 합니다. 앞에서 만든 세 가지 이벤트 처리기에 코드를 추가하겠습니다. 코드는 컨트롤에서 Entry 사용자의 위치를 가져와서 API에 전달하여 권장 사항을 가져옵니다. 그런 다음, UI 아래쪽의 Label 컨트롤에 결과를 표시합니다.

명명된 async 메서드를 GetRecommendationAsync 만들고 각 이벤트 처리기에서 호출합니다.
```
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;
    }

    string prompt = $"What is a recommended {recommendationType} near {LocationEntry.Text}";

    // DeploymentName must match your custom deployment name (Azure OpenAI)
    // Or a default deployment name (such as OpenAI's GPT-3.5-turbo-0125) can be used
    ChatCompletionsOptions options = new()
    {
        DeploymentName = "gpt-3.5-turbo-0125",
        Messages =
        {
            new ChatRequestUserMessage(prompt)
        },
        ChoiceCount = 1,
        MaxTokens = 100,
    };

    var message = new ChatRequestUserMessage(prompt);
    options.Messages.Add(message);
    Response<ChatCompletions> response = await _chatGptClient.GetChatCompletionsAsync(options);
    SmallLabel.Text = response.Value.Choices[0].Message.Content;
}
```
이 코드는 먼저 사용자가 컨트롤의 위치를 Entry 입력했는지 확인하기 위해 검사. 그렇지 않은 경우 경고를 표시하고 반환합니다. 사용자가 위치를 입력한 경우 Azure.AI.OpenAI 라이브러리의 메서드를 호출 GetChatCompletionsAsync 하여 OpenAI를 호출합니다. 이 GetChatCompletionsAsync 메서드는 ChatCompletionOptions 을 매개 변수로 사용합니다. 이 매개 변수는 다음 옵션을 사용하여 만들어졌습니다.
- DeploymentName - 사용하려는 배포(모델)의 이름입니다.
- 메시지 - 개체의 ChatRequestUserMessage 컬렉션입니다. 이 예제에서는 하나의 메시지만 사용하지만 컬렉션에 더 많은 컨텍스트를 추가하여 API에 더 많은 컨텍스트를 제공할 수 있습니다.
- ChoiceCount - API에서 다시 가져올 권장 사항 수입니다. 이 예제에서는 한 가지 권장 사항만 요청합니다.
- MaxTokens - API가 응답에서 반환할 최대 토큰 수(단어)입니다. 이 예제에서는 100개의 토큰을 요청합니다.
이 GetChatCompletionsAsync 메서드는 API의 Response<ChatCompletions> 응답이 포함된 개체를 반환합니다. 컬렉션의 Message.Content 첫 번째 Choiceresponse.Value.Choices 응답 텍스트를 가져와서 UI 아래쪽의 컨트롤에 표시합니다.

참고 항목

이 GetRecommendationAsync 메서드에 오류 처리를 추가하여 API 호출로 인해 발생할 수 있는 예외를 처리하는 것이 좋습니다. 간단히 하기 위해 이 예제에서 제외했습니다.
이 섹션에서 추가한 코드에는 MainPage.xaml.cs 파일 맨 위에 있는 다음 using 명령문도 필요합니다.
```
using Azure.AI.OpenAI;
using Azure;
```
앱을 실행하고, 위치를 입력하고, 권장 사항 단추를 테스트합니다. UI의 맨 아래에 있는 컨트롤에 Label API의 응답이 표시됩니다.

정말 간단하죠. OpenAI ChatGPT API를 사용하여 레스토랑, 호텔 및 관광 명소에 대한 권장 사항을 제공하는 Windows .NET MAUI 앱을 성공적으로 만들었습니다. 프롬프트를 변경하여 결과를 개선할 수 있는지 확인합니다. 이 GetRecommendationAsync 에서 ChatCompletionsOptions 개체의 DeploymentName 값을 변경하여 다른 모델에서 더 나은 결과를 얻을 수 있는지 확인할 수도 있습니다.

Important

평가 기간이 만료된 후 API 사용량을 주시해야 합니다. 예기치 않은 요금을 방지하기 위해 OpenAI 계정에 월별 지출 한도를 설정할 수도 있습니다.