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

文心和 Kiana 已經準備好結合應用程式與 Web API。 不過，在進行之前，他們決定諮詢 Preeti，也就是 IT 營運經理。

了解 Web API 的 IT 營運管理需求

Preeti 關心的是確保應用程式和網頁 API 的安全，因為它們能提供不同資料庫中敏感性資料的存取權限。 Preeti 希望能確保加入驗證和授權，防止無端存取資訊。 Preeti 也意識到公司正在快速擴大，而且管理客戶、約會、部件和知識庫所涉及的資料量可能會在臨近的期限中以指數增加。 因此，解決方案必須可調整。

Kiana 向 Preeti 解釋，目前已使用 Azure App Service 實現了 Web API。 此服務支援多個驗證提供者，Preeti 可以使用 Azure 入口網站進行設定。 Preeti 對 Microsoft Entra 識別碼特別感興趣，因為 VanArsdel 期待在不久的將來，能將這種形式的驗證推出至他們的眾多其他公司系統。

應用程式服務也能提供水平和垂直伸縮性。 如有需要，Preeti 可以升級 Web 應用程式的 App Service 方案，以擴充 Web API 可用的資源：

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

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 管理服務：

1. 登入 Azure 入口網站，然後在首頁頁面中選取建立資源。

   

2. 在搜尋市集文字方塊中，輸入 API 管理，然後選取輸入。

3. 在API 管理頁面上，選取建立。

   

4. 在建立 API 管理頁面上，輸入下列值，然後選取檢閱 + 建立。

   • 訂閱︰選取您的訂閱
   • 資源群組：webapi_rg (這是您為應用程式服務建立的資源群組)
   • 地區：選取您最近的地區
   • 資源名稱：輸入服務的特別名稱
   • 組織名稱：VanArsdel
   • 系統管理員電子郵件：itadmin@vanarsdel.com
   • 定價層：開發人員 (無 SLA)

   注意

   請勿將開發人員定價層用於生產系統。

   

5. 在驗證頁面上，選取建立，然後等待 API 管理服務建立。

   注意

   若要調配 API 管理服務，可能需要 30 分鐘或更多的時間；請耐心等待。

透過 API 管理發行 Web API

建立 API 管理服務後，Preeti 發佈了 Web API，以便使用下列步驟使該服務可供其他服務和應用程式存取。

1. 在 Azure 入口網站中，移至 API 管理服務。

2. 在 API 管理服務頁面中，在 API 下的左窗格選取 API：

   

3. 在新增 API 窗格中，選取 OpenAPI：

   

4. 在從 OpenAPI 規格建立對話方塊中，輸入下列值，然後選取建立：

   • OpenAPI 規格https://<webapp name>.azurewebsites.net/swagger/v1/swagger.json，其中 <webapp name> 是託管 Web API 的應用程式服務名稱
   • 顯示名稱：欄位工程師 API
   • 名稱：field-engineer-api
   • API URL 尾碼：保留空白
   • 基本 URL：使用預設 URL

   

5. 現場工程師 API 建立後，請選取 API 的設定索引標籤，將 Web 服務 URL 設定為https://<webapp name>.azurewebsites.net，然後選取儲存：

   

6. 在測試索引標籤上 ，選取 GET api/Appointments URI，然後選取傳送：

   

7. 確認要求成功 (HTTP 返回程式碼為 200 OK)，且返回的結果包含回應主體中的約會清單：

   

從應用程式連線至 API 管理

Kiana 和文心現在可以透過 ApI 管理服務，合作使用 Power Apps 將建立的應用程式連線至 WEB API。

第一個工作是建立由應用程式用來與 API 管理通訊的自訂連接器。 這包括將 API 匯出至用來建立應用程式的 Power Apps 環境，Kiana 的做法如下：

1. 在 Azure 入口網站中，前往 Preeti 建立的 API 管理服務。

2. 在左窗格的 API 下方，選取 API。

3. 選取現場工程師 API 的省略號按鈕，然後選取匯出。

   

4. 在匯出 API 窗格中，選取 Power Apps 和 Power Automate：

   

5. 在將 API 匯出至 PowerApps 窗格中，選取您在其中建立原型應用程式 (下列圖像中的文心) 的 Power Apps 環境，然後選取匯出。

   

6. 匯出 API 之後，請選取現場工程師 API。 在設定頁面上，向下滾動至訂閱區段，清除必要訂閱，然後選取儲存。

   

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

1. 登入 Power Apps。

2. 在左窗格中，展開資料並選取自訂連接器。 應該會列出 field-engineer-api 自訂連接器。 選取建立連線。

   

3. 在 field-engineer-api 對話方塊中，選取建立。

   

4. 建立連接後，請確認該連接會出現在可用的連接清單中。

   

5. 在左窗格中選取應用程式，選取 VanArsdelApp，然後選取編輯。

   

6. 在左窗格中，選取資料索引標籤。選取新增資料，選取連接器的省略號按鈕，然後 選取重新整理。

   

7. 在連接器清單中，選取 field-engineer-api 連接器。

   

8. 在 field-engineer-api 對話方塊中，選取 field-engineer-api 連接器。

   

9. 在資料窗格上，確認已列出 FieldEngineerApi 連接器。

   

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

現在已將連接新增至應用程式，文心可以修改畫面來取代 Excel 活頁簿。 這包括透過系統地處理每個畫面，並變更資料來源。 您不需要做其他變更。 Maria 從 BrowseParts 和 PartDetails 畫面開始操作，如下所示：

1. 在應用程式的首頁畫面上，選取部件按鈕。 將 OnSelect 動作屬性設定為下列公式。

   ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts());
   
   Navigate(BrowseParts, ScreenTransition.Fade)
   

   ClearCollect 函數會建立名為 partsCollection 的新集合，並利用在 FieldEngineerAPI 連接中調用 getboilerparts 作業所得到的資料填充。

   

   注意

   將資料取回至集合，並從任何需要資訊的畫面中參照該集合是個好方法。 此方法能夠儲存不同的畫面，防止重複執行相同的查詢並讀取相同的資料。

2. 選取 F5 以預覽應用程式。

3. 在首頁畫面上，選取組件。 此動作將會建立 partsCollection 集合。 關閉預覽視窗並返回 Power Apps Studio。

   注意

   此步驟的目的是讓您可以在下列步驟中編輯 BrowseParts 畫面時查看資料。

4. 在 BrowseParts 畫面中選取 BrowseGallery1 控制項。 在專案屬性的公式中 ，將參考資料從 [@Table1] 資料來源替換為 partsCollection。

   此變更將會造成一些錯誤。 這是因為原始 Excel 活頁簿中的功能變數名稱使用了大小寫 (Name、CategoryID 和 Overview)，而 Web API 回覆本文中傳回的屬性是以小寫命名。 將這些參考資料變更為使用小寫。 公式看起來應該會如下所示。

   SortByColumns(Search(FieldEngineerApi.getapiboilerparts(), TextSearchBox1.Text, "name", "categoryId", "overview"), "name", If(SortDescending1, Descending, Ascending))
   

   

5. 在樹狀檢視窗格中選取 IconRefresh1 控制項。 將 OnSelect 動作變更為公式 ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts())。

   注意

   此動作的原始公式會調用 Refresh 函數，以使用原始資料來源的連接重新填充資料。 您無法使用 Refresh 來執行函數來檢索資料，因此它無法與 FieldEngineerApi.getapiboilerparts() 搭配使用。 此步驟中的解決方案會以最新的資料填入 partsCollection 集合。

6. 在樹狀檢視窗格中，展開 BrowseGallery1 控制項，然後選取 Body1 控制項。 將 Text 屬性變更為 ThisItem.overview。

7. 在樹狀檢視窗格中選取 Subtitle1 控制項。 將 Text 屬性變更為 ThisItem.categoryId。

8. 在樹狀檢視窗格中選取 Title 控制項。 將 Text 屬性變更為 ThisItem.name。

9. 在樹狀檢視窗格中，選取 PartDetails 畫面上的 DetailForm1 控制項。 從 [@Table1] 將 DataSource 屬性變更為 partsCollection。

10. 在樹狀結構視圖窗格中，在 DetailForm1 下方選取 Name_DataCard1 控制項。 將 Default 屬性變更為 ThisItem.name。

    

11. 將 CategoryID_DataCard1 控制項的 Default 屬性變更為 ThisItem.categoryId。

12. 將 Overview_DataCard1 控制項的 Default 屬性變更為 ThisItem.overview。

13. 將 Price_DataCard1 控制項的 Default 屬性變更為 ThisItem.price。

14. 將 NumberInStock_DataCard1 控制項的 Default 屬性變更為 ThisItem.numberInStock。

15. 將 Image_DataCard1 控制項的 Default 屬性變更為 ThisItem.imageUrl。

16. 在左窗格的資料索引標籤上，右鍵點擊 Table1 資料連接，然後選取移除將其從應用程式中移除。 不再需要此連接。

    

17. 儲存應用程式。

    注意

    您可以選擇 Ctrl+S 來快速儲存應用程式，而不需使用檔案功能表。

18. 選取 F5 以預覽應用程式。 瀏覽部件和部件詳細資料畫面的運作方式與之前相同，不同之處在於它們是透過網頁 API 從 InventoryDB Azure SQL 資料庫檢索資料，而不是從本機 Excel 檔案檢索資料。

19. 關閉預覽視窗並返回 Power Apps Studio。

更新應用程式以使用連接器：欄位排程和備註

Maria 繼續在 BrowseAppointments、AppointmentDetails 和 EditAppointment 畫面上作業。 這些畫面所呈現的資料目前源自其他 Excel 活頁簿中的約會資料表。

1. 在應用程式的首頁畫面上，將 OnVisible 動作設定為下列公式。

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

   此公式會將約會資料檢索至 appointmentsCollection 集合中。 透過篩選約會，檢索排程的時間或晚於目前日期的造訪。

2. 選取顯示下一個約會時間的標籤控制項。 將 Text 屬性設定為 Text(First(appointmentsCollection).startDateTime, ShortTime24)。

3. 選取顯示下一個約會日期的標籤控制項。 將 Text 屬性設定為 Text(First(appointmentsCollection).startDateTime, LongDate)。

4. 選取顯示下一個約會之客戶名稱的標籤控制項。 將 Text 屬性設定為 First(appointmentsCollection).customer.name。

5. 選取 F5 以預覽應用程式。 在首頁畫面上，選取約會。 此動作將會建立 appointmentsCollection 集合。 關閉預覽視窗並返回 Power Apps Studio。

6. 在樹狀檢視窗格中，選取 BrowseAppointments 畫面上的 BrowseAppointmentsGallery 控制項。 將 Items 屬性中的公式變更為下列公式。

   Sort(Filter(appointmentsCollection, StartsWith(customer.name, TextSearchBox1\_1.Text)), startDateTime)
   

   此公式會依客戶名稱篩選顯示在畫面上的資料，並可讓使用者輸入客戶的名稱。 約會會以日期和時間順序顯示。

7. 在樹狀檢視窗格中，展開 BrowseAppointmentsGallery 控制項，然後選取 Title1_1 控制項。 將 Text 屬性變更為下列內容。

   Text(ThisItem.startDateTime, LongDate)
   

   此公式顯示約會的 startDateTime 欄位的日期部分。

8. 在樹狀檢視窗格中，展開 BrowseAppointmentsGallery 控制項，然後選取 Subtitle1_1 控制項。 將 Text 屬性變更為下列內容。

   Text(ThisItem.startDateTime, ShortTime24)
   

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

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

   ThisItem.customer.name
   

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

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

11. 在樹狀檢視窗格中，展開 AppointmentDetails 畫面，然後選取 DetailForm1_1 控制項。 將 DataSource 屬性設為 appointmentsCollection。

12. 在樹狀檢視窗格中選取 IconEdit1 控制項。 修改 DisplayMode 屬性中的公式以測試 appoinmentsCollection 集合。

    If(DataSourceInfo(**appointmentsCollection**, DataSourceInfo.EditPermission), DisplayMode.Edit, DisplayMode.Disabled)
    

13. 在樹狀檢視窗格中，展開 DetailForm1_1 畫面，然後選取 Customer Name_DataCard1 控制項。 將 Default 屬性變更為 ThisItem.customer.name。

14. 變更其餘資料卡的預設屬性，如下所示：

    • 客戶位址_DataCard1：ThisItem.customer.address
    • 連絡電話_DataCard1：ThisItem.customer.contactNumber
    • 問題詳細資料_DataCard1：ThisItem.problemDetails
    • 狀態_DataCard1：ThisItem.appointmentStatus.statusName
    • 備註_DataCard1：ThisItem.notes
    • 圖像_DataCard1_1：ThisItem.imageUrl

15. 在樹狀檢視窗格中，展開 EditAppointment 畫面，然後選取 EditForm1 控制項。 將 DataSource 屬性設為 appointmentsCollection。

16. 在樹狀檢視窗格中，展開 EditForm1 控制項，然後選取 客戶名稱_DataCard3 控制項。 將 Default 屬性變更為 ThisItem.customer.name。

17. 變更其餘資料卡的預設屬性，如下所示：

• 連絡電話_DataCard2：ThisItem.customer.contactNumber；此外，請將 MaxLength 屬性變更為 20
• 問題詳細資料_DataCard2：ThisItem.problemDetails
• 狀態_DataCard5：ThisItem.appointmentStatus.statusName
• 備註_DataCard3：ThisItem.notes
• 圖像_DataCard2：ThisItem.imageUrl

18. 在樹狀檢視窗格中，展開 問題詳情_Card2 控制項。 在此控制項底下，將 DataCardValueX (X 為數字) 欄位重新命名為 ProblemDetailsValue。 針對下列資料卡中的 DataCardValueX 控制項重複此程式：

    • 狀態_DataCard5：StatusValue
    • 備註_DataCard3：NotesValue

    注意

    下一個章節將會討論此圖像控制。

19. 選取 ProblemDetailsValue，並將 MaxLength 屬性設定為 100。

20. 在樹狀檢視窗格中，選擇 IconAccept1 畫面，然後選取 EditAppointment 控制項。 將 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 作業。 會將目前約會的約會 ID 傳遞為第一個參數，後面跟著使用者在畫面上修改的詳細資料。 詳細資料會以 JSON 物件的方式進行傳遞。 移除、設定和收集陳述式會透過將資料儲存到資料庫來更新 appointmentsCollection 集合。

    注意

    在這類情形中，不要使用 ClearCollect 函數來刪除和重新整理整個集合，因為如果 ——只有一個記錄發生變更，就會浪費工作。

21. 在樹狀檢視窗格中，選擇 IconAccept1 畫面，然後選取 EditAppointment 控制項。 將 OnSelect 動作屬性設定為下列公式。

    ResetForm(EditForm1);
    
    Navigate(AppointmentDetails, ScreenTransition.None);
    

22. 在左窗格的資料索引標籤上，右鍵點擊約會資料連接，然後選取移除將其從應用程式中移除。

23. 儲存應用程式。

24. 選取 F5 以預覽應用程式。 從首頁畫面移至約會畫面，選取並編輯約會，然後儲存變更。 確認已更新約會。

25. 關閉預覽視窗並返回 Power Apps Studio。

為欄位知識庫建立 Azure 認知搜尋服務

應用程式中的知識庫畫面目前並未附加至任何資料來源。 Web API 包含的作業可用來查詢和更新 KnowledgeDB 資料庫中的資料表秘訣、BoilerParts 和工程師。 不過，應用程式中的查詢畫面用途是支援透過所有這些資料表進行搜尋。 這些資料表中的資料量很可能很快就會增加，所以文心、Kiana 和 Preeti 決定部署 Azure 認知搜尋以支援此功能。 應用程式可以透過自訂連接器，從 Azure 認知搜尋中提交查詢並接收結果。

如果要搜尋的資料包含在單一資料庫實體中，Azure 認知搜尋就能發揮最大的作用。 Kiana 會在 KnowledgeDB 資料庫中建立查看提示、BoilerParts 和工程師資料表統一的視圖，如下所示：

1. 在 Azure 入口網站中，移至 KnowledgeDB SQL 資料庫頁面。

2. 在左窗格中，選取查詢編輯器並使用密碼 Pa55w.rd 以 sqladmin登入資料庫。

   

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

   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
   

   

   確認已成功建立知識檢視。

4. 在左導覽窗格中，選取連接字串。 記下 ADO.NET 連接字串；當您設定 Azure 認知搜尋時，您將需要它。

   

使用 Kiana，Preeti 會設定 Azure 認知搜尋服務的新實例，以在知識檢視的列上執行搜尋，如下所示：

1. 在首頁的 Azure 入口網站中，選取 + 建立資源，輸入 Azure 認知搜尋，選取輸入，然後選取建立。

   

2. 在新搜尋服務頁面上，輸入下列設定，然後選取檢閱 + 建立。

   • 訂閱︰選取您的 Azure 訂閱
   • 資源群組：webapi_rg
   • 服務名稱：輸入服務的特別名稱
   • 位置名稱：選取您最近的區域
   • 定價層：免費

3. 在驗證頁面上，選取建立，然後等待服務佈建。

4. 移至新搜尋服務的頁面，選取概述，記下 Url (稍後當您建立 Power Apps 自訂連接器時需要此 Url)，然後選取匯入資料。

   

5. 在匯入資料頁面的資料來源下拉式清單方塊中，選取 Azure SQL 資料庫。

   

6. 在連接至您的資料頁面上，指定下列設定：

   • 資料來源：Azure SQL Database
   • 資料來源名稱：知識庫
   • 連接字串：為您先前錄製的 KnowledgDB 資料庫輸入 Azure SQL Database connection 字串；在此字串中，請務必將密碼設定為 Pa55w.rd
   • 將使用者 Id 與密碼欄位保留其預設值；這些專案是從連接字串中檢索

7. 選取測試連接。 確保測試成功，在表格/檢視表下拉式清單方塊中選取 [知識]，然後選取下一步：新增認知技能 (選用)。

   

8. 在新增認知技能 (選用) 頁面上，選取跳至：自訂目標索引。

9. 在自訂目標索引頁面上，選取可檢索所有資料欄，並且可搜尋以下內容：主旨、本文、名稱和總覽。 選取下一步：建立索引子。

   

10. 在建立索引子頁面上，將索引子名稱變更為知識庫-索引子。 針對排程，選取每小時，將高水位線資料欄設定為 Id，然後選取提交：

    

11. 若要測試索引子，請在搜尋服務的概覽頁面上，選取搜尋瀏覽器：

    

12. 在查詢的字串欄位中，輸入要在知識庫搜尋的單詞，然後選取搜尋。 搜尋服務應生成符合主旨、本文、名稱或總覽欄位的檔案清單，並顯示在結果窗格中。 記下要求 URL 及範例結果，稍後在設定 Power Apps 自訂連接器時，您將需要這些專案作為範例要求和回復。

    

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

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

1. 登入 Power Apps。

2. 在左窗格中，展開資料並選取自訂連接器。 在右側窗格中，選取 + 新增自訂連接器，然後選取從空白建立。

   

3. 在從空白建造對話方塊中，將新的連接器名稱設定為 VanArsdelKBConnector，然後選取繼續：

   

4. 在一般資訊頁面上，輸入描述並將方案設定為 HTTPS。 在主機方塊中，輸入搜尋服務的 URL (稍早注意到的 URL)，但不包含 https:// 首碼，然後選取安全性。

   

5. 在安全性頁面的驗證下拉式清單方塊中，選取 API 金鑰。 在參數標籤欄位中，輸入api 金鑰。 在參數名稱欄位中，輸入 api 金鑰。 選取定義。

   

6. 在定義頁面上，選取新動作。 在摘要欄位中輸入查詢+。 在描述欄位中，輸入查詢知識庫。 在作業 ID 欄位中輸入查詢。 在要求下，選取 + 從範例匯入。

   

7. 在從範例匯入的對話方塊中，輸入下列值，然後選取匯入：

   • 動詞：GET
   • URL：提供您在搜尋瀏覽器中測試搜尋服務時記下的範例要求 URL。
   • 標頭：內容類型

   

8. 回到定義頁面上，向下滾動至查詢區段，選取搜尋旁邊的省略號按鈕，然後選取編輯。

   

9. 在編輯畫面的參數區段中，在預設值欄位中輸入星號 (*)。 將其他欄位保留為預設值，然後選取上一步。

   

10. 在定義頁面上的查詢區段中，選取 api-version 旁邊的省略號按鈕，然後選取編輯。

    

11. 在編輯畫面參數區段的預設值欄位中，輸入 2020-06-30-Preview (這是與目前版本的 Azure 認知搜尋相關的版本；您可以在 [要求 URL] 中看到先前指出的版本)。 必須設定為是，並將可見度設定為內部。 將其他欄位保留為預設值，然後選取上一步。

    

12. 在定義頁面上，向下滾動至回應區段，然後選取 + 新增預設回應。

    ]

13. 在從範例匯入對話方塊的標頭欄位中，輸入文字內容類型。 在本文欄位中，輸入測試搜尋服務時所錄製的範例結果，然後選取匯入。

    

14. 在定義頁面上，選取預設回應。

    

15. 在內容類型回復的描述欄位中，輸入應用程式/json 然後選取上一步。

    

    注意

    此頁面的本文區段應顯示回應欄位，例如本文、Id、名稱、概述和主旨 (如果已成功解析)。

16. 選取建立連接器。

    

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

更新使用 Azure 認知搜尋：欄位知識庫的應用程式

Maria 現在可以在應用程式中使用自訂連接器。 但首先必須有金鑰，授與 Maria 連接至 Azure 認知搜尋服務所需的權限。 Preeti 會從 Azure 入口網站的金鑰頁面取得金鑰，並將它提供給文心。

文心編輯中的應用程式 Power Apps Studio，並執行下列工作：

1. 開啟 VanArsdelApp 應用程式以進行編輯。

2. 在檢視功能表上選取資料來源，然後選取新增資料。

   

3. 在搜尋方塊中，選取資料來源底下的 Van。 必須列出 VanArdelKBConnector 連接器。

   

4. 選取 VanArdelKBConnector 連接器。 在 VanArdelKBConnector 窗格中，輸入 Preeti 提供給搜尋服務的金鑰，然後選取連接。

   

5. 在檔案功能表上，儲存並關閉應用程式，然後重新打開應用程式。 當應用程式重新打開時，系統會提示您授權使用自訂連接器。

   注意

   若要啟用自訂連接器，必須執行此步驟。

6. 在樹狀檢視窗格中，展開 Knowledgebase 畫面，然後選取 TextSearchBox2 控制項。 為 OnChange 動作輸入下列公式。

   If(!IsBlank(TextSearchBox2.Text), ClearCollect(azResult, VanArsdelKBConnector.Query({search: TextSearchBox2.Text}).value))
   

   此公式會調用自訂連接器的查詢作業，搜尋符合使用者在搜尋方塊中輸入的專案。 結果會儲存在名為 azResult 的集合中。

7. 在樹狀檢視窗格中，在 Knowledgebase 畫面下選取 BrowseGallery2 控制項。 將 Items 屬性設為 azResult。

8. 展開 BrowseGallery2 控制項，並移除 Image4 控制項。

9. 選取 Title2 控制項。 設定下列屬性：

   • 文字：ThisItem.Subject
   • X：24
   • 寬度：Parent.TemplateWidth - 104

10. 選取 Subtitle2 控制項。 將 Text 屬性設定為 ThisItem.Body。

11. 選取 F5 以預覽應用程式。 在知識庫畫面上，輸入搜尋字詞，然後選取 Enter 鍵。 應該會顯示與知識庫相符的文章。

    

    注意

    尚未建立詳細資料畫面，所以選取 > 文章旁邊的圖示並不起作用。

12. 關閉預覽視窗並返回 Power Apps Studio。

13. 在樹狀檢視窗格上，以滑鼠右鍵按一下 PartDetails 畫面，然後選取複製畫面。 此動作會將其他畫面新增至名為 PartDetails_1 的應用程式。

    

14. 在樹狀檢視窗格中，重新命名 PartDetails_1 為 KnowledgebaseDetails。

    在畫面上選取 LblAppNameX 控制項; 將 Text 屬性設定為文章詳細資料 (包括報價)。

15. 在樹狀檢視窗格中，選擇畫面上的 DetailFormX 控制項。 設定下列屬性：

    • DataSource：azResult
    • 項目：BrowseGallery2.Selected

    注意

    BrowseGallery2 是知識庫畫面上的瀏覽庫。 在您的應用程式中，該資源庫可能有不同的名稱。

16. 在樹狀檢視窗格中，展開 DetailForm * X* 表單，然後變更下列資料卡控制項的名稱：

    • 名稱_DataCard1_1：名稱_DataCard
    • CategoryID_DataCard1_1：主旨_DataCard
    • 概述_DataCard1_1：概述_DataCard
    • 價格_DataCard1_1：本文_DataCard

17. 刪除 NumberInStock_DataCard1_1 和 Image_DataCard1_1 控制項。

18. 選取名稱_DataCard 控制項。 將 Default 屬性設定為 ThisItem.Name。

19. 選取主旨_DataCard 控制項。 設定下列屬性：

    • DataField：「Subject」
    • DisplayName：「Subject」
    • 預設：ThisItem.Subject

20. 選取概述_DataCard 控制項。 將 Default 屬性設定為 ThisItem.Overview。

21. 選取本文_DataCard 控制項。 設定下列屬性：

    • DataField："Body"
    • DisplayName："Body"
    • 預設：ThisItem.Body

22. 本文_DataCard 控制項中選取 DataCardValueX 控制項。 將 Text 屬性設定為 Parent.Default。

23. 調整每個資料卡控制項的大小，以將它們沿畫面向下傳播。

    

24. 選取畫面標頭中的向後箭頭。 變更 OnSelect 動作屬性為Navigate(Knowledgebase, ScreenTransition.None)。

25. 在樹狀檢視窗格中，在 Knowledgebase 畫面下選取，然後選取 BrowseGalleryX 控制項。 變更 OnSelect 動作屬性為Navigate(KnowledgebaseDetails, ScreenTransition.None)。 當使用者在瀏覽畫面中選取專案的 > 圖示時，此動作會顯示知識庫文章的詳細資料畫面。

26. 儲存應用程式。

27. 選取 F5 以預覽應用程式。 在知識庫畫面上，輸入搜尋字詞，然後選取 Enter 鍵。 選取文章，並確認其詳細資料是否已顯示。 確認返回圖示會將使用者返回至瀏覽畫面。

28. 關閉預覽視窗並返回 Power Apps Studio。

文心、Kiana 和 Preeti 已成功將 Web API 與 Azure 認知搜尋整合至應用程式中。

上一個 下一個