教學：用 .NET MAUI 和 ChatGPT 建立推薦應用程式

學習如何在 Visual Studio 中建立 .NET MAUI Windows 應用程式，整合 ChatGPT API 以提供 AI 驅動的定位推薦。 依據逐步指導，提供餐廳、飯店和景點的建議。

在本教學課程中，您將瞭解如何：

先決條件

• 一個 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 應用程式 範本，並在 主頁 新增一些 UI 元素，根據所提供的地點向使用者提供推薦。 介面會有按鈕用來獲得餐廳、飯店和景點的推薦。

1. 在 Visual Studio 中，建立一個新的 .NET MAUI 應用程式 專案，名為 ChatGptRecommendationApp。

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

事件處理程式都標記為 ， async 因為我們將對 OpenAI .NET API 函式庫進行非同步呼叫。 現在當你執行這個應用程式時，應該會看到以下介面：

使用者可以在控制鍵 Entry 中輸入位置，點擊其中一個按鈕即可獲得餐廳、飯店或景點的推薦。 介面底部的 Label 控制鍵會顯示結果。

接著，讓我們把 OpenAI 函式庫加入專案，並準備好進行 API 呼叫。

參考並初始化 .NET 的 OpenAI 函式庫

要呼叫 OpenAI 的 ChatGPT API，我們將使用 OpenAI 為 .NET NuGet 套件提供預發布版本的函式庫。 此函式庫提供 .NET 應用程式存取 OpenAI REST API。 我們會把函式庫加入專案，並用 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.xaml.cs，這是 MainPage 的後置碼檔案。 在檔案頂端加入以下程式碼，參考 OpenAI 函式庫，並建立變數來存放你的 OpenAI 客戶端。 更新建構子，讓它在頁面載入時呼叫該 MainPage_Loaded 方法，並新增 MainPage_Loaded 從 Windows 登錄檔取得 OpenAI API 金鑰並初始化 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);
   }
   

   這會初始化 OpenAI 函式庫，搭配你的 API 金鑰。 你可以在 OpenAI API 設定頁面建立你的 API 金鑰。

4. 為了編譯專案，你需要在using檔案頂端新增以下語句：

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

現在我們準備好把一切整合起來了。 在下一節，我們將為三個事件處理器加入程式碼，用於呼叫 OpenAI 函式庫並顯示推薦結果。

新增 ChatGPT API 呼叫並測試應用程式

現在該將程式碼加入我們的程式碼後置檔案，該檔案將使用 OpenAI 的 .NET 函式庫來呼叫 OpenAI ChatGPT API。 我們會將程式碼新增到我們之前建立的三個事件處理器中。 程式碼會從控制項取得使用者的位置 Entry ，並傳給 API 以取得推薦。 接著我們會在介面底部的控制項中顯示結果 Label 。

1. 建立一個名為 GetRecommendationAsync 的 async 方法，並從每個事件處理器中呼叫它。

   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[] 參數，這個參數可以以字串的形式提供，就像我們在範例中所做的一樣。

   該方法會回傳一個 AsyncResultCollection<StreamingChatCompletionUpdate>，它會在生成時從 API 串流傳輸回應。 我們先非同步地遍歷updates，然後針對回應中的每個ChatMessageContentPart進行迭代，以建立回應字串。 回應結果會顯示在 SmallLabel 介面底部的控制項中。

   備註

   建議在方法中加入錯誤處理 GetRecommendationAsync ，以處理 API 呼叫可能拋出的異常。 為了簡化，我們在這個例子中省略了這一點。

2. 啟動應用程式，輸入地點，並測試推薦按鈕。 你應該會在 UI 底部的控制項看到 API Label 的回應：

   

就是這樣！ 你成功開發了一個 Windows .NET MAUI 應用程式，利用 OpenAI ChatGPT API 提供餐廳、飯店和景點的推薦。 試著改變提示詞，看看能不能改善結果。 你也可以試著更改傳給 GetChatClient in 的 GetRecommendationAsync 型號名稱，看看換個型號會不會有更好的結果。

後續步驟

前進到下一篇文章，以瞭解如何...

另請參閱

• 使用 C# 標記和社群工具組建立 .NET MAUI 應用程式
• 使用 .NET MAUI 組建 Windows 應用程式
• 宣布 .NET 官方 OpenAI 函式庫
• 在 Windows 上開發負責任的生成式 AI 應用程式和功能
• Microsoft DevRadio 影片：如何用 OpenAI 和 .NET MAUI 建構應用程式