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

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

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

• .NET MAUI 앱에 대한 간단한 사용자 인터페이스 만들기
• OpenAI .NET API 라이브러리 참조 및 부트스트랩
• 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에는 레스토랑, 호텔 및 관광 명소에 대한 권장 사항을 가져오는 단추가 있습니다.

1. Visual Studio에서 ChatGptRecommendationApp이라는 새 .NET MAUI 앱 프로젝트를 만듭니다.

2. 새 프로젝트를 실행하여 앱이 성공적으로 빌드되고 실행되는지 확인합니다.

3. 솔루션 탐색기에서 MainPage.xaml 열기.

4. 이 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" />
   

5. 프로젝트를 빌드하려면 각 단추에 대한 이벤트 처리기를 추가 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)
   {
   }
   

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

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

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

.NET용 OpenAI 라이브러리 참조 및 초기화

OpenAI의 ChatGPT API를 호출하기 위해 .NET NuGet 패키지용 OpenAI 라이브러리의 시험판 버전을 사용합니다. 이 라이브러리는 OpenAI REST API에 대한 액세스 권한을 .NET 애플리케이션에 제공합니다. 프로젝트에 라이브러리를 추가하고 API 키를 사용하여 부트스트랩합니다.

1. Visual Studio의 도구 메뉴에서 패키지 관리자 콘솔을 엽니다.

2. 다음 명령을 실행하여 OpenAI 라이브러리를 설치합니다. 라이브러리가 아직 미리 보기 상태이므로 IncludePrerelease 플래그가 필요합니다.

   Install-Package OpenAI -IncludePrerelease
   

   그러면 프로젝트에 버전 2.0.0 이상의 시험판이 설치됩니다. 명령에서 버전 번호를 지정하여 라이브러리의 특정 버전을 설치할 수도 있습니다. 예를 들어 버전 2.0.0-beta.4를 설치하려면 다음 명령을 실행합니다.

   Install-Package OpenAI -Version 2.0.0-beta.4
   

3. MainPage의 코드백 파일인 MainPage.xaml.cs를 엽니다. 다음 코드를 파일 맨 위에 추가하여 OpenAI 라이브러리를 참조하고 OpenAI 클라이언트를 저장할 변수를 만듭니다. 페이지가 로드될 때 메서드를 호출 MainPage_Loaded 하도록 생성자를 업데이트하고, Windows 레지스트리에서 OpenAI API 키를 가져와 OpenAI 클라이언트를 초기화하는 메서드를 추가 MainPage_Loaded 합니다.

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

   그러면 API 키를 사용하여 OpenAI 라이브러리를 부트스트랩합니다. 이 OpenAI API 설정 페이지에서 API 키를 만들 수 있습니다.

4. 프로젝트를 컴파일하려면 다음 using 명령문을 MainPage.xaml.cs 파일의 맨 위에 추가해야 합니다.

   using OpenAI;
   using OpenAI.Chat;
   using System.ClientModel;
   

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

ChatGPT API 호출 추가 및 앱 테스트

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

1. 명명된 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;
       }
   
       // 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;
   }
   

   이 코드는 먼저 사용자가 컨트롤의 위치를 Entry 입력했는지 확인하기 위해 검사. 그렇지 않은 경우 경고를 표시하고 반환합니다. 사용자가 위치를 입력한 경우 인스턴스를 ChatClient 가져오고 해당 개체의 CompleteChatStreamingAsync 메서드를 호출하여 OpenAI를 호출합니다. 이 메서드는 CompleteChatStreamingAsync 예제에서 ChatMessage[] 수행하는 것처럼 문자열로 제공할 수 있는 매개 변수를 사용합니다.

   메서드는 생성될 때 API에서 응답을 스트리밍하는 AsyncResultCollection<StreamingChatCompletionUpdate>/>를 반환합니다. 비동기적으로 updates 반복하고 응답 문자열을 작성하기 위해 응답에서 각각 ChatMessageContentPart 을 반복합니다. 그러면 응답이 UI 아래쪽의 SmallLabel 컨트롤에 표시됩니다.

   참고 항목

   이 GetRecommendationAsync 메서드에 오류 처리를 추가하여 API 호출로 인해 발생할 수 있는 예외를 처리하는 것이 좋습니다. 간단히 하기 위해 이 예제에서 제외했습니다.

2. 앱을 실행하고, 위치를 입력하고, 권장 사항 단추를 테스트합니다. UI의 맨 아래에 있는 컨트롤에 Label API의 응답이 표시됩니다.

   

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

Important

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

다음 단계

아래 내용에 대한 다음 문서를 진행하세요.

.NET MAUI Windows 데스크톱 앱에 DALL-E 추가

참고 항목

• C# 태그 및 커뮤니티 도구 키트를 사용하여 .NET MAUI 앱 만들기
• .NET MAUI로 Windows 앱 빌드
• .NET용 공식 OpenAI 라이브러리 발표
• Windows에서 책임 있는 생성 AI 애플리케이션 및 기능 개발
• Microsoft DevRadio 비디오: OpenAI 및 .NET MAUI를 사용하여 앱을 빌드하는 방법