第 6 章：在應用程式中使用 Web API

Maria 和 Kiana 已準備好將應用程式與 Web API 結合。然而，在繼續之前，他們決定諮詢 IT 營運經理 Preeti。

了解 Web API 的 IT 作業管理需求

Preeti 擔心應用程序和 Web API 必須是安全的，因為它們提供對存儲在各種數據庫中的敏感數據的訪問。 Preeti 希望確保將包括身份驗證和授權，以防止無端訪問信息。 Preeti 還意識到，該公司正在迅速擴張，管理客戶、預約、零件和知識庫所涉及的數據量可能會在短期內呈指數級增長。因此，解決方案需要具有可擴展性。

Kiana 向 Preeti 解釋 Web API 目前是使用 Azure App Service 實作的。此服務支援許多驗證提供者，Preeti 可以使用 Azure 入口網站進行設定。 Preeti 對 Microsoft Entra ID 特別感興趣，因為 VanArsdel 希望在不久的將來將這種形式的身份驗證推廣到他們的許多其他公司系統。

App Service 驗證設定。

App Service 也提供水平和垂直延展性。如有需要，Preeti 可以升級 Web 應用程式的 App Service 方案，以相應增加 Web API 可用的資源：

App Service 擴充。

Preeti 還能設定自動調整以安排系統擴增。 App Service 可讓營運經理定義自動縮放規則，判斷當負載增加時，系統應在多個實例中縮放的條件，或者在需要時再重新移至要求下降的條件。 Preeti 也可以先佔式自動調整，使其根據排程進行：

App Service 擴充。

IT 營運經理角色的關鍵部分是關注系統可能如何發展，並確保底層支援結構能夠處理未來的擴展和變化。 Preeti 知道 Kiana 開發的 Web API 可能會被擴展，並在未來被其他 VanArsdel 系統重複使用。 Preeti 需要能夠管理和控制開發人員請求使用 Web API 的方式，將其作為寶貴的資源進行保護，並監控其使用情況。因此，Preeti 決定保護 Azure API 管理服務背後的 Web API。

API 管理為 Web API 提供額外的安全性層，並啟用詳細的監視和控制哪些用戶端可以存取哪些作業。使用 API 管理，Preeti 可以管理資源使用率，並節流低優先順序用戶端的效能，以確保更快速地為重要的較高優先順序應用程式提供服務。

如需 API 管理所提供服務的相關資訊，請移至關於 API 管理。

建立 API 管理服務

Preeti 使用下列步驟，透過 Azure 入口網站建立 API 管理服務：

登入 Azure 入口網站，然後在首頁上選取 [ 建立資源]。
在 搜尋 MarketPlace 文字方塊中，輸入 API 管理，然後選取 Enter。
在 [API 管理] 頁面上，選取 [建立]。
在 [ 建立 API 管理] 頁面上，輸入下列值，然後選取 [ 檢閱 + 建立]：
- 訂閱：選擇您的訂閱
- 資源群組： webapi_rg （這是您為 App Service 建立的相同資源群組）
- 地區：選擇離您最近的地區
- 資源名稱：輸入服務的唯一名稱
- 組織名稱： VanArsdel
- 管理員電子郵件： itadmin@vanarsdel.com
- 定價層： 開發人員（無 SLA）
備註

請勿將 開發人員 定價層用於生產系統。
在驗證頁面上，選取 [建立]，然後等候建立 API 管理服務。

備註

佈建 API 管理服務可能需要 30 分鐘或更長時間;要有耐心。

透過 API 管理發佈 Web API

建立 API 管理服務之後，Preeti 會發佈 Web API，讓其他服務和應用程式使用下列步驟來存取它：

在 Azure 入口網站中，移至 API 管理服務。
在 [API 管理服務 ] 頁面的左窗格 [ API] 底下，選取 [API]：
在 [新增 API ] 窗格中，選取 [OpenAPI]：
在 [ 從 OpenAPI 規格建立 ] 對話方塊中，輸入下列值，然後選取 [建立]：
- OpenAPI 規格： https:// <webapp name.azurewebsites.net/swagger/v1/swagger.json>，其中 <webapp name> 是裝載 Web API 的 App Service 名稱
- 顯示名稱： 現場工程師 API
- 名稱： field-engineer-api
- API URL 尾碼：留空
- 基本 URL：使用預設 URL
建立現場工程師 API 後，選取 API 的設定索引標籤，將 Web 服務 URL 設定為 https:// <webapp name.azurewebsites.net>，然後選取儲存：
在測試索引標籤上，選取 GET api/Appointments URI，然後選取傳送：
確認請求成功（HTTP 返回碼為 200 OK），並驗證回應主體中是否返回包含約會清單的結果:

從應用程式連線到 API 管理

Kiana 和 Maria 現在可以共同合作，透過 API 管理服務將使用 Power Apps 建置的應用程式連線到 Web API。

第一個工作是建立應用程式用來與 API 管理通訊的自訂連接器。這涉及將 API 匯出至用來建立應用程式的 Power Apps 環境，Kiana 會執行以下操作：

在 Azure 入口網站中，移至 Preeti 所建立之 API 管理服務的頁面。
在左窗格的 [API] 底下，選取 [API]。
選取 Field Engineer API 的省略號按鈕，然後選取匯出。
在 匯出 API 窗格中，選取 Power Apps 和 Power Automate：
在 API 匯出至 PowerApps 窗格中，選取您建立原型應用程式的 Power Apps 環境（下圖中的 Maria），然後選取匯出。
匯出 API 之後，選取 Field Engineer API。在 [設定] 頁面上，向下捲動至 [訂用帳戶] 區段，清除 [需要訂用帳戶]，然後選取 [儲存]。

原型應用程式使用 Excel 活頁簿作為資料來源。現在 Web API 的自訂連接器可供使用，Maria 會執行下列步驟，將連接器新增至應用程式：

登入 Power Apps。
在左窗格中，展開 [資料]，然後選取 [自訂連接器]。 應該列出 field-engineer-api 自訂連接器。選取 [建立連線]。
在field-engineer-api對話方塊中，選取 建立。
建立連線後，請確認它出現在可用連線清單中。
在左窗格中，選取 [應用程式]，選取 [VanArsdelApp]，然後選取 [編輯]。
在左窗格中，選取 [資料] 索引標籤。選取 [新增資料]，選取 [連接器] 的省略符號按鈕，然後選取 [重新整理]。
在聯結器清單中，選取 field-engineer-api 聯結器。
在 field-engineer-api 對話方塊中，選取 field-engineer-api 連接器。
在 [資料 ] 窗格中，確認已列出 FieldEngineerApi 連接器。

更新應用程式以使用連接器：田間庫存管理

現在連接已新增至應用程式，Maria 可以修改畫面以使用它來取代 Excel 活頁簿。這涉及有條不紊地瀏覽每個螢幕並更改資料來源。不需要進行其他更改。 Maria 從 BrowseParts 和 PartDetails 畫面開始，如下所示：

在應用程式的 主畫面 上，選取 [零件] 按鈕。將 OnSelect 動作屬性設定為下列公式。
```
ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts());

Navigate(BrowseParts, ScreenTransition.Fade)
```
ClearCollect 函數會建立名為 partsCollection 的新集合，並在 FieldEngineerAPI 連線中呼叫 getboilerparts 作業所產生的資料移入它。

建立 partsCollection 變數。

備註

將資料取回至集合，並從任何需要資訊的畫面中參照該集合是個好方法。這種方法可以節省不同的畫面，避免重複執行相同的查詢並擷取相同的資料。
選取 F5 以預覽應用程式。
在主畫面上，選取零件。 此動作將建立 partsCollection 集合。關閉預覽視窗並返回 Power Apps Studio。

備註

此步驟的目的是讓您在下列步驟中編輯「 瀏覽零件 」畫面時查看資料。
選取 [BrowseParts] 畫面中的 BrowseGallery1 控制項。在 Items 屬性的公式中，將 [@Table1] 資料來源的參考取代為 partsCollection。

此變更將導致一些錯誤。這是因為原始 Excel 活頁簿中的欄位名稱使用大寫（Name、 CategoryID 和 Overview），而 Web API 回應本文中傳回的屬性會以小寫命名。將這些參照變更為使用小寫。公式應該如下所示。
```
SortByColumns(Search(FieldEngineerApi.getapiboilerparts(), TextSearchBox1.Text, "name", "categoryId", "overview"), "name", If(SortDescending1, Descending, Ascending))
```
在 [樹狀檢視] 窗格中，選取 IconRefresh1 控制項。將 OnSelect 動作變更為公式 ClearCollect（partsCollection， FieldEngineerAPI.getapiboilerparts（））。

備註

此動作的原始公式會呼叫 Refresh 函數，以使用原始資料來源的連線來重新填入資料。您無法將 Refresh 與執行函數以擷取資料的連線搭配使用，因此它無法與 FieldEngineerApi.getapiboilerparts（） 搭配使用。此步驟中的解決方案會以最新資料重新填入 partsCollection 集合。
在 [樹狀檢視 ] 窗格上，展開 [BrowseGallery1 ] 控制項，然後選取 [Body1 ] 控制項。將 Text 屬性變更為 ThisItem.overview。
在 [樹狀檢視 ] 窗格中，選取 Subtitle1 控制項。將 Text 屬性變更為 ThisItem.categoryId。
在 [樹狀檢視] 窗格中，選取 [標題] 控制項。將 Text 屬性變更為 ThisItem.name。
在 [樹狀檢視] 窗格中，選取 [PartDetails] 畫面中的 DetailForm1 控制項。將 DataSource 屬性從 [@Table1] 變更為 partsCollection。
在 [樹狀檢視] 窗格中，選取 DetailForm1 底下的Name_DataCard1控制項。將 [預設] 屬性變更為 ThisItem.name。
將CategoryID_DataCard1控制項的 Default 屬性變更為 ThisItem.categoryId。
將Overview_DataCard1控制項的 Default 屬性變更為 ThisItem.overview。
將Price_DataCard1控制項的 Default 屬性變更為 ThisItem.price。
將NumberInStock_DataCard1控制項的 [預設] 屬性變更為 ThisItem.numberInStock。
將Image_DataCard1控制項的 Default 屬性變更為 ThisItem.imageUrl。
在 [ 資料 ] 索引標籤的左窗格中，以滑鼠右鍵按一下 Table1 資料連線，然後選取 [移除] 以將其從應用程式中刪除。不再需要此連線。
儲存應用程式。

備註

您可以通過選擇 Ctrl+S 快速保存應用程序，而無需使用“文件”菜單。
選取 F5 以預覽應用程式。 [ 瀏覽組件] 和 [組件詳細資料] 畫面應該與之前完全一樣運作，只不過這次它們是透過 Web API 從 InventoryDB Azure SQL 資料庫擷取資料，而不是從本機 Excel 檔案擷取資料。
關閉預覽視窗並返回 Power Apps Studio。

更新應用程式以使用連接器：現場排程和附註

Maria 繼續瀏覽 [瀏覽約會]、[ 約會詳細資料] 和 [編輯約會 ] 畫面。這些畫面所呈現的資料目前來自另一個 Excel 活頁簿中的 [約會] 資料表。

在應用程式的 [ 主畫面 ] 上，將 OnVisible 動作設定為下列公式。
```
ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime))
```
此公式會將約會資料擷取到 appointmentsCollection 集合中。透過篩選約會，檢索排程的時間或晚於目前日期的造訪。
選取顯示下一次約會時間的標籤控制項。將 Text 屬性設定為 Text（First（appointmentsCollection）.startDateTime， ShortTime24）。
選取顯示下一次約會日期的標籤控制項。將 Text 屬性設定為 Text（First（appointmentsCollection）.startDateTime， LongDate）。
選取顯示下一個約會客戶名稱的標籤控制項。將 Text 屬性設定為 First（appointmentsCollection）.customer.name。
選取 F5 以預覽應用程式。在主畫面上，選取約會。 此動作將建立 appointmentsCollection 集合。關閉預覽視窗並返回 Power Apps Studio。
在 [樹狀檢視] 窗格中，選取 [BrowseAppointments] 畫面中的 [BrowseAppointmentsGallery] 控制項。將 Items 屬性中的公式變更為下列公式。
```
Sort(Filter(appointmentsCollection, StartsWith(customer.name, TextSearchBox1\_1.Text)), startDateTime)
```
此公式會依客戶名稱篩選畫面上顯示的資料，讓使用者能夠輸入客戶名稱。約會會依日期和時間順序顯示。
在 [樹狀檢視 ] 窗格中，展開 [BrowseAppointmentsGallery ] 控制項，然後選取 Title1_1 控制項。將 Text 屬性變更為下列內容。
```
Text(ThisItem.startDateTime, LongDate)
```
此公式會顯示約會的 startDateTime 欄位的日期部分。
在 [樹狀檢視 ] 窗格中，展開 [BrowseAppointmentsGallery ] 控制項，然後選取 Subtitle1_1 控制項。將 Text 屬性變更為下列內容。
```
Text(ThisItem.startDateTime, ShortTime24)
```

此公式會顯示 startDateTime 欄位的時間元素。

在 [樹狀檢視 ] 窗格中，展開 [BrowseAppointmentsGallery ] 控制項，然後選取 Body1_1 控制項。將 Text 屬性變更為下列內容。
```
ThisItem.customer.name
```

在樹狀檢視窗格上，選擇 BrowseAppointments 畫面上的 IconRefresh1_1 控制項。將 OnSelect 動作設定為下列公式。

ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime));

在 [樹狀檢視] 窗格中，展開 [AppointmentDetails ] 畫面，然後選取 DetailForm1_1 控制項。將 DataSource 屬性設定為 appointmentsCollection。
在 [樹狀結構檢視 ] 窗格中，選取 IconEdit1 控制項。修改 DisplayMode 屬性中的公式，以測試 appoinmentsCollection 集合。
```
If(DataSourceInfo(**appointmentsCollection**, DataSourceInfo.EditPermission), DisplayMode.Edit, DisplayMode.Disabled)
```
在 樹狀檢視 窗格中，展開 DetailForm1_1 畫面，然後選取 客戶Name_DataCard1 控制項。將 [預設] 屬性變更為 ThisItem.customer.name。
變更其餘資料卡的預設屬性，如下所示：
- Customer Address_DataCard1：ThisItem.customer.address
- 聯絡電話_DataCard1： ThisItem.customer.contactNumber
- 問題詳情_DataCard1： ThisItem.problemDetails
- Status_DataCard1： ThisItem.appointmentStatus.statusName
- Notes_DataCard1： ThisItem.notes
- Image_DataCard1_1：ThisItem.imageUrl
在 [樹狀檢視 ] 窗格中，展開 [EditAppointment ] 畫面，然後選取 [EditForm1 ] 控制項。將 DataSource 屬性設定為 appointmentsCollection。
在 [樹狀檢視] 窗格中，展開 [EditForm1 ] 控制項，然後選取 [客戶Name_DataCard3 ] 控制項。將 [預設] 屬性變更為 ThisItem.customer.name。
變更其餘資料卡的預設屬性，如下所示：

聯絡號碼_DataCard2：ThisItem.customer.contactNumber;此外，將 MaxLength 屬性變更為 20
問題詳情_DataCard2： ThisItem.problemDetails
Status_DataCard5： ThisItem.appointmentStatus.statusName
Notes_DataCard3： ThisItem.notes
Image_DataCard2： ThisItem.imageUrl

在 [樹狀檢視] 窗格中，展開 [問題詳情_Card2] 控制項。將此控制項下的 DataCardValueX （X 會是數字）欄位重新命名為 ProblemDetailsValue。針對下列資料卡中的 DataCardValueX 控制項重複此程式：
- Status_DataCard5： 狀態值
- Notes_DataCard3： NotesValue
備註

影像控制項將在下一章中討論。
選取 ProblemDetailsValue，並將 MaxLength 屬性設定為 100。
在 [樹狀檢視] 窗格中，選取 [EditAppointment] 畫面上的 IconAccept1 控制項。將 OnSelect 動作屬性設定為下列公式。
```
FieldEngineerAPI.putapiappointmentsid(BrowseAppointmentsGallery.Selected.id, {problemDetails:ProblemDetailsValue.Text, statusName:StatusValue.Selected.Value, notes:NotesValue.Text, imageUrl:""});

Remove(appointmentsCollection, First(Filter(appointmentsCollection, id=BrowseAppointmentsGallery.Selected.id)));

Set(appointmentRec, FieldEngineerAPI.getapiappointmentsid(BrowseAppointmentsGallery.Selected.id));

Collect(appointmentsCollection, appointmentRec);

Navigate(AppointmentDetails, ScreenTransition.None);
```
此公式會呼叫 Web API 中約會控制器的 PUT 作業。它會傳遞當前約會的識別碼作為第一個參數，並接著傳遞使用者可能已在畫面上修改的詳細資料。詳細資料會以 JSON 物件的形式傳遞。 Remove、Set及Collect陳述式會使用儲存至資料庫的資料來更新 appointmentsCollection 集合。

備註

在這種情況下，請勿使用 ClearCollect 函式來刪除和重新整理整個集合，因為例如，如果只有一筆記錄已變更，則會很浪費。
在 [樹狀檢視] 窗格中，選取 [EditAppointment] 畫面上的 IconAccept1 控制項。將 OnSelect 動作屬性設定為下列項目。
```
ResetForm(EditForm1);

Navigate(AppointmentDetails, ScreenTransition.None);
```
在 [資料 ] 索引標籤的左窗格中，以滑鼠右鍵按一下 [約會] 資料連線，然後選取 [移除] 以將其從應用程式中刪除。
儲存應用程式。
選取 F5 以預覽應用程式。從主畫面，移至約會畫面，選取並編輯約會，然後儲存變更。確認預約已更新。
關閉預覽視窗並返回 Power Apps Studio。

建立領域知識庫的 Azure 認知搜尋服務

應用程式中的 [知識庫] 畫面目前未附加至任何資料來源。 Web API 包括查詢和更新 KnowledgeDB 資料庫中 Tips、BoilerParts 和 Engineers 資料表的作業。不過，應用程式中 「查詢」 畫面的目的是支援搜尋所有這些資料表。這些資料表中的資料量可能會快速增加，因此 Maria、Kiana 和 Preeti 決定部署 Azure 認知搜尋服務來支援這項功能。應用程式可以透過自訂連接器提交查詢並從 Azure 認知搜尋接收結果。

如果要搜尋的資料包含在單一資料庫實體中，Azure 認知搜尋功能會運作最佳。 Kiana 在 KnowledgeDB 資料庫中建立檢視，以呈現 Tips、 BoilerParts 和 Engineers 資料表的統一檢視，如下所示：

在 Azure 入口網站中，移至 [KnowledgeDB SQL 資料庫] 頁面。
在左窗格中，選取 [查詢編輯器]，然後使用密碼 Pa55w.rd 以 sqladmin 身分登入資料庫。

在查詢視窗中，輸入下列陳述式，然後選取 [執行]。

CREATE OR ALTER VIEW [dbo].[Knowledge] AS
SELECT T.Id, T.Subject, T.Body, B.Name, B.Overview
FROM [dbo].[Tips] T INNER JOIN [dbo].[BoilerParts] B
ON B.Id=T.KnowledgeBaseBoilerPartId

建立「知識」檢視

確認已成功建立檢視 Knowledge。

在左窗格中，選取 [連接字串]。 記下 ADO.NET 連接字串;當您設定 Azure 認知搜尋服務時，您將需要它。

Preeti 會使用 Kiana，設定 Azure 認知搜尋服務的新實例，以對 [知識] 檢視中的資料列執行搜尋，如下所示：

在首頁的 Azure 入口網站中，選取 [+ 建立資源]，輸入 Azure 認知搜尋，選取 [Enter]，然後選取 [建立]。
在 [新增搜尋服務 ] 頁面上，輸入下列設定，然後選取 [ 檢閱 + 建立]：
- 訂用帳戶：選取您的 Azure 訂用帳戶
- 資源群組： webapi_rg
- 服務名稱：輸入服務的唯一名稱
- 地點名稱：選擇離您最近的地區
- 定價層：免費
在驗證頁面上，選取 [建立]，然後等候佈建服務。
移至新搜尋服務的頁面，選取概觀，記下 URL （稍後在建立 Power Apps 的自訂連接器時需要此URL），然後選取 匯入資料。
在 [匯入資料] 頁面的 [ 資料來源 ] 下拉式清單方塊中，選取 [Azure SQL 資料庫]。
在 [ 連線到您的資料 ] 頁面上，指定下列設定：
- 資料來源： Azure SQL 資料庫
- 資料來源名稱： 知識庫
- 連接字串：輸入您稍早記錄之 KnowledgDB 資料庫的 Azure SQL 資料庫連接字串;在此字串中，請務必將密碼設定為 Pa55w.rd
- 將 使用者 ID 和密碼欄位保留為預設值，這些設定項是從連接字串擷取的。
選取測試連線。確定測試成功，在表格/檢視下拉式清單方塊中選取 [知識]，然後選取下一步：新增認知技能（選擇性）。
在 新增認知技能（選擇性） 頁面上，選取 跳至：自訂目標索引。
在[自訂目標索引]頁面上，為所有資料行選取[可擷取]，並針對[主旨]、[內文]、[名稱]和[概觀]選取[可搜尋]。選取 [下一步：建立索引子]。
在 [建立索引子 ] 頁面上，將索引子名稱變更為 knowledgebase-indexer。針對排程，選取每小時，將高水位線資料欄設定為 Id，然後選取提交：
若要測試索引子，請在搜尋服務的 [ 概觀 ] 頁面上，選取 [搜尋總管]：
在查詢字串欄位中，輸入要在知識庫中搜尋的單字，然後選取搜尋。 搜尋服務應該會產生在 [主旨]、[ 內文]、[ 名稱] 或 [概觀 ] 欄位中具有相符項的文件清單，並將其顯示在 [結果] 窗格中。記下 請求 URL 和範例結果;稍後，當您設定 Power Apps 自訂連接器時，您將需要這些項目作為範例要求和回應。

建立 Azure 認知搜尋服務的自訂連接器

Kiana 現在可以建立自訂連接器，通過 Power Apps 來將搜尋要求傳送至搜尋服務。 Kiana 使用 Power Apps Studio 執行此操作，如下所示：

登入 Power Apps。
在左窗格中，展開 [資料]，然後選取 [自訂連接器]。 在右窗格中，選取 + 新增自訂連接器，然後選取 從空白建立。
在 [ 從空白建立 ] 對話方塊中，將新的連接器名稱設定為 VanArsdelKBConnector，然後選取 [繼續]：
在 [一般資訊 ] 頁面上，輸入說明，並將 [配置 ] 設定為 HTTPS。在 [主機] 方塊中，輸入搜尋服務的 URL （您稍早已記下此 URL），但沒有 https:// 前置詞，然後選取 [安全性]。
在 [ 安全性 ] 頁面的 [ 驗證] 下拉式清單方塊中，選取 [API 金鑰]。在 [參數標籤 ] 欄位中，輸入 api-key。在 [參數名稱 ] 欄位中，輸入 api-key。選取 [定義]。
在定義頁面上，選取 新增動作。在 [摘要] 欄位中，輸入 [查詢]。在描述欄位中，輸入 查詢知識庫。在 [作業識別碼 ] 欄位中，輸入 [查詢]。在 [要求] 底下，選取 [+ 從範例匯入]。
在 [從範例匯入 ] 對話方塊中，輸入下列值，然後選取 [匯入]：
- 動詞： GET
- URL：提供在您稍早使用搜尋瀏覽器測試搜尋服務時記下的範例請求 URL
- 標頭： 內容類型
返回 [定義] 頁面，向下捲動至 [查詢] 區段，選取搜尋旁的省略符號按鈕，然後選取 [編輯]。
在編輯畫面的 Parameters 區段的 Default value 欄位中，輸入星號（*）。將其他欄位保留為預設值，然後選取 [返回]。
在 [定義] 頁面的 [查詢] 區段中，選取 api-version 旁的省略符號按鈕，然後選取 [編輯]。
在編輯畫面的 [參數] 區段的 [ 預設值] 欄位中，輸入 2020-06-30-Preview （這是與目前版本的 Azure 認知搜尋相關聯的版本;您可以在您稍早記下的要求 URL 中看到版本）。將 [必要] 設定為 [是]，並將 [ 可見度 ] 設定為 [內部]。將其他欄位保留為預設值，然後選取 [返回]。
在 [定義] 頁面上，向下捲動至 [回應] 區段，然後選取 [+ 新增預設回應]。
在 [從範例匯入 ] 對話方塊的 [標頭 ] 欄位中，輸入文字 內容類型。在 [內文] 欄位中，輸入您在測試搜尋服務時記錄的範例結果，然後選取 [匯入]。
在 [定義] 頁面上，選取預設回應。
在 [內容類型] 回應的 [描述] 欄位中，輸入 application/json，然後選取 [返回]。

備註

此頁面上的 [正文] 區段應該會顯示回應的欄位，例如 [正文]、[ ID]、[ 名稱]、[ 概觀] 和 [主旨] （如果已成功剖析）。
選取 [建立連接器]。

建立連接器時，應不報告任何錯誤或警告。

更新應用程式以使用 Azure 認知搜索：領域知識庫

Maria 現在可以在應用程式中使用自訂連接器。但首先，需要一個金鑰來授與 Maria 連線到 Azure 認知搜尋服務所需的許可權。 Preeti 會從 Azure 入口網站中服務的 [ 金鑰] 頁面取得金鑰，並將金鑰提供給 Maria。

在 Azure 入口網站中搜尋服務金鑰。

Maria 在 Power Apps Studio 中編輯應用程式並執行下列工作：

打開 VanArsdelApp 應用程序進行編輯。
在 [檢視 ] 功能表上，選取 [資料來源]，然後選取 [ 新增資料]。
在 [ 搜尋 ] 方塊的 [選取資料來源] 底下，輸入 Van。應該列出 VanArdelKBConnector 連接器。
選取 VanArdelKBConnector 連接器。在 [VanArdelKBConnector] 窗格中，輸入 Preeti 為搜尋服務提供的金鑰，然後選取 [連線]。
在 [ 檔案 ] 功能表上，儲存並關閉應用程式，然後再次開啟它。當應用程式重新開啟時，系統可能會提示您授權使用自訂連接器。

備註

啟用自訂連接器需要此步驟。
在 [樹狀結構檢視 ] 窗格中，展開 [知識庫] 畫面，然後選取 [TextSearchBox2 ] 控制項。在OnChange動作中輸入以下公式。
```
If(!IsBlank(TextSearchBox2.Text), ClearCollect(azResult, VanArsdelKBConnector.Query({search: TextSearchBox2.Text}).value))
```
此公式會呼叫自訂連接器的 Query 作業，以搜尋符合使用者在搜尋方塊中輸入的字詞的專案。結果會儲存在名為 azResult 的集合中。
在 [樹狀檢視 ] 窗格的 [知識庫] 畫面下，選取 [BrowseGallery2 ] 控制項。將 Items 屬性設定為 azResult。
展開 BrowseGallery2 控制項，然後移除 Image4 控制項。
選取 Title2 控制項。設定下列屬性：
- 文字： ThisItem.Subject
- X： 24
- 寬度： Parent.TemplateWidth - 104
選取 Subtitle2 控制項。將 Text 屬性設定為 ThisItem.Body。
選取 F5 以預覽應用程式。在 [知識庫] 畫面上，輸入搜尋字詞，然後選取 [Enter]。應顯示知識庫中的匹配文章。

備註

詳細資料畫面尚未建立，因此無法選取 > 文章旁邊的圖示。
關閉預覽視窗並返回 Power Apps Studio。
在 「樹狀檢視」 窗格中，以滑鼠右鍵按一下「 零件詳細資料 」畫面，然後選取「 複製畫面」。此操作將向應用程序添加另一個屏幕，名為 PartDetails_1。
在 [樹狀結構檢視 ] 窗格中，將 PartDetails_1 畫面重新命名為 KnowledgebaseDetails。

選取畫面上的 LblAppNameX 控制項;將 Text 屬性設定為 「文章詳細資料」（ 包括引號）。
在 [樹狀結構檢視 ] 窗格中，選取畫面上的 DetailFormX 控制項。設定下列屬性：
- 資料來源： azResult
- 項目：**BrowseGallery2.Selected **
備註

BrowseGallery2 是 知識庫 畫面上的瀏覽庫。在您的應用程式中，此圖庫可能有不同的名稱。
在 [樹狀檢視] 窗格中，展開 [DetailFormX ] 表單，然後變更下列資料卡控制項的名稱：
- Name_DataCard1_1： Name_DataCard
- CategoryID_DataCard1_1： Subject_DataCard
- Overview_DataCard1_1： Overview_DataCard
- Price_DataCard1_1： Body_DataCard
刪除 NumberInStock_DataCard1_1 和 Image_DataCard1_1 控制項。
選取 Name_DataCard 控制項。將預設屬性設定為 ThisItem.Name。
選取 Subject_DataCard 控制項。設定下列屬性：
- DataField：「 主旨」
- DisplayName： “主旨”
- 預設值： ThisItem.Subject
選取 Overview_DataCard 控制項。將 Default 屬性設定為 ThisItem.Overview。
選取 Body_DataCard 控制項。設定下列屬性：
- DataField："Body"
- DisplayName：“Body”
- 預設值： ThisItem.Body
選取 Body_DataCard 控制項中的 DataCardValueX 控制項。將 Text 屬性設定為 Parent.Default。
調整每個數據卡控件的大小，以便將它們排列在屏幕上。
選取螢幕標頭中的返回箭頭。將 OnSelect 動作屬性變更為 Navigate（Knowledgebase， ScreenTransition.None）。
在 [樹狀檢視 ] 窗格中，選取 [知識庫] 畫面，然後選取 [BrowseGalleryX ] 控制項。將 OnSelect 動作屬性變更為 Navigate（KnowledgebaseDetails， ScreenTransition.None）。 當使用者在瀏覽畫面中選取 > 條目的圖示時，這個動作會顯示該知識庫文章的詳細畫面。
儲存應用程式。
選取 F5 以預覽應用程式。在 [知識庫] 畫面上，輸入搜尋字詞，然後選取 [Enter]。選取文章並確認已顯示其詳細資料。確認 [返回] 圖示會將使用者傳回瀏覽畫面。
關閉預覽視窗並返回 Power Apps Studio。