第 6 章: アプリでの Web API の使用

  • [アーティクル]

Maria と Kiana は、アプリを Web API と組み合わせる準備ができています。 ただし、続行する前に、IT 運用マネージャーである Preeti に相談することにしました。

Web API の IT 運用管理要件を理解する

Preeti は、アプリと Web API がさまざまなデータベースに保存されている機密情報へのアクセスを提供するため、そのセキュリティについて懸念しています。 Preeti は、情報への不当なアクセスを防ぐために、認証と認可のプロセスを含めたいと考えています。 Preeti はまた、会社が急速に拡大しており、顧客、予定、パーツ、およびサポート情報の管理に関連するデータの量が短期的また指数関数的に増加する傾向があることも認識しています。 そのため、ソリューションにスケーラビリティが必要です。

Kiana は、Web API が現在 Azure App Service で実装されていることを Preeti に説明します。 このサービスは、Preeti が Azure Portal を使用して構成できる多数の認証プロバイダーをサポートします。 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 Management サービスの背後にある Web API を保護することにしました。

API Management は、Web API に追加のセキュリティ層を提供するだけでなく、どのクライアントがどの操作にアクセスできるかを詳細に監視および制御できるようにします。 Preeti は、API Management を使用して、リソース稼働率を管理し、優先度の低いクライアントのパフォーマンスを調整して、優先度の高い重要なアプリをより迅速に処理できるようにします。

API Management が提供するサービスについては、API Management についてを参照してください。

API Management サービスの作成

Preeti は、次の手順を使用して、Azure Portal から API Management サービスを作成しました。

  1. Azure Portal にサインインし、ホームのページでリソースの作成を選択します。

    Azure Portal のホーム ページ。

  2. MarketPlace を検索のテキスト ボックスに API Management と入力し、Enter を選択します。

  3. API Management ページで、作成を選択します。

    Azure API Management サービスの作成ページ。

  4. API Management の作成で次の値を入力し、レビューと作成を選択します。

    • サブスクリプション: ご使用のサブスクリプションを選択してください
    • リソース グループ: webapi_rg (これは App Service 用に作成したものと同じリソース グループです)
    • 地域: 最も近い地域を選択してください
    • リソース名: サービスの一意の名前を入力します
    • 組織名: VanArsdel
    • 管理者電子メール: itadmin@vanarsdel.com
    • 価格レベル: 開発者 (SLA なし)

    注意

    実稼働システムでは、開発者の価格レベルを使用しないでください。

    新しい API Management サービスのページ。

  5. 検証ページで作成を選択し、API Management サービスが作成されるまで待ちます。

    注意

    API Management サービスのプロビジョニングには 30 分以上かかる場合があります。しばらくお待ちください。

API Management による Web API の公開

API Management サービスが作成された後、Preeti は Web API を公開して、次の手順に従って他のサービスやアプリケーションからアクセスできるようにしました。

  1. Azure ポータルで、API 管理サービスに移動します。

  2. API Management サービス ページの左側ウィンドウの API 下で、API を選択します。

    API Management サービスのページ。 API を選択します。

  3. 新しい API の追加ウィンドウで、OpenAPI を選択します:

    API Management サービスのページ。 OpenAPI を選択します。

  4. 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 を使用

    OpenAPI 仕様から API を作成します。

  5. フィールド エンジニア API が作成されたら、API の設定タブを選択し、Web サービス URL を https://<webapp name>.azurewebsites.net に設定してから、保存を選択します。

    API の設定を構成する。

  6. テスト タブで GET api/Appointments URI を選択し、送信を選択します。

    GetAppointments API をテストする。

  7. 要求が成功したこと (HTTP リターン コードは 200 OK)、および応答本文に予定の一覧を含む結果を返すことを確認します。

    GetAppointments API のテストからの応答。

アプリから API Management への接続

Kiana と Maria が共同で作業し、Power Apps を使用して構築されたアプリを API Management サービスを介して Web API に接続できるようになりました。

最初のタスクは、アプリが API Management と通信するために使用するカスタム コネクタを作成することです。 これには、アプリの作成に使用される Power Apps 環境への API のエクスポートが含まれます。Kiana は次のように実行します。

  1. Azure Portal で、Preeti が作成した API Management サービスのページに移動します。

  2. 左側のウィンドウの API 下で、API を選択します。

  3. フィールド エンジニア API の省略記号ボタンを選択し、次にエクスポートを選択します。

    Web API のエクスポート。

  4. API のエクスポート ウィンドウで、Power Apps および Power Automate を選択します。

    Web API を Power Apps にエクスポートする。

  5. API を PowerApps にエクスポートするのウィンドウで、プロトタイプ アプリを作成した Power Apps 環境を選択し (次の図では Maria)、エクスポートを選択します。

    Maria の Power Apps 環境にエクスポートする。

  6. API がエクスポートされたら、フィールド エンジニア API を選択します。 設定ページで、サブスクリプション セクションにスクロールし、サブスクリプション必須をクリアして、保存を選択します。

    サブスクリプション必須を選択解除する。

プロトタイプ アプリは、データ ソースに Excel ブックを使用しました。 Web API のカスタム コネクタが使用可能になったので、Maria は次の手順を実行してコネクタをアプリに追加します。

  1. Power Apps にサインインします。

  2. 左のウィンドウでデータを展開してカスタム コネクタを選択します。 field-engineer-api カスタム コネクタが表示されます。 接続の作成 を選択します。

    新しいカスタム コネクタの作成。

  3. field-engineer-api ダイアログで、作成を選択します。

    FieldEngineerAPI コネクタを作成する。

  4. 接続が作成されたら、使用可能な接続のリストに表示されていることを確認します。

    使用可能な接続を表示する。

  5. 左側のウィンドウのアプリで、VanArdselApp を選択し、編集を選択します。

    VanArsdel アプリを編集する。

  6. 左側のウィンドウでデータ タブを選択します。データの追加、コネクタの省略記号ボタン、更新の順に選択します。

    データ ソースの更新。

  7. コネクタの一覧から、field-engineer-api コネクタを選択します。

    コネクタを表示する。

  8. field-engineer-api ダイアログで、field-engineer-api コネクタを選択します。

    FieldEngineer API 接続を追加する。

  9. データ ウィンドウで、FieldEngineerApi コネクタが一覧表示されていることを確認します。

    FieldEngineer API 接続が追加される。

コネクタを使用するようにアプリを更新する: フィールド在庫管理

接続がアプリに追加されたので、Maria は画面を変更して、Excel ブックの代わりに接続を使用できます。 これには、各画面を系統的に処理し、データ ソースを変更することが含まれます。 他の変更は必要ありません。 彼女は次のように、BrowseParts および PartDetails から操作を始めます。

  1. アプリのホーム画面で、パーツ ボタンを選択します。 OnSelect アクション プロパティを次の式に設定します。

    ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts());

Navigate(BrowseParts, ScreenTransition.Fade)

    ClearCollect 関数は、partsCollection という名前の新しいコレクションを作成し、FieldEngineerAPI 接続で getboilerparts 操作を呼び出した結果のデータをそのコレクションに入力します。

    partsCollection 変数の作成。

    注意

    データをコレクションに取得し、情報が必要な画面からそのコレクションを参照することをお勧めします。 このアプローチにより、複数の画面が同じクエリを繰り返し実行して同じデータをフェッチしないようにすることができます。

  2. F5 を選択してアプリをプレビューします。

  3. ホーム画面で、部品を選択します。 このアクションは、partsCollection コレクションを作成します。 プレビュー ウィンドウを閉じて、Power Apps Studio に戻ります。

    注意

    このステップの目的は、次の手順で BrowseParts 画面を編集しているときにデータを表示できるようにすることです。

  4. 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))

    参照画面の式を更新する。

  5. ツリー ビュー ウィンドウで、IconRefresh1 コントロールを選択します。 OnSelect アクションを、式 ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts()) に変更します。

    注意

    このアクションの元の式は、元のデータ ソースへの接続を使用してデータを再入力する更新関数を呼び出します。 更新は、データを取得する関数を実行する接続では使用できないため、FieldEngineerApi.getapiboilerparts() では機能しません。 このステップのソリューションは、partsCollection コレクションに最新のデータを再入力します。

  6. ツリー ビュー ウィンドウで、BrowseGallery1 コントロールを展開し、Body1 コントロールを選択します。 Text プロパティを ThisItem.overview に変更します。

  7. ツリー ビュー ウィンドウで、Subtitle1 コントロールを選択します。 Text プロパティを ThisItem.categoryId に変更します。

  8. ツリー ビュー ウィンドウで、Title コントロールを選択します。 Text プロパティを ThisItem.name に変更します。

  9. ツリー ビュー ウィンドウで、PartDetails 画面の DetailForm1 コントロールを選択します。 DataSource プロパティを、[@Table1] から 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. 画像_DataCard1 コントロールの Default プロパティを、ThisItem.imageUrl に変更します。

  16. 左側ウィンドウのデータ タブで Table1 データ接続を右クリックし、削除を選択してそれをアプリから削除します。 この接続は、不要になりました。

    Table1 接続を削除する。

  17. アプリを保存します。

    注意

    Ctrl+S を選択すると、ファイル メニューを使用せずにアプリをすばやく保存できます。

  18. F5 を選択してアプリをプレビューします。 Browse Parts および Part Details 画面は、ローカルな Excel ファイルからではなく Web API を介して InventoryDB Azure SQL データベースからデータを取得することを除いて、以前と全く同じように動作するはずです。

  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. ツリー ビュー ウィンドウで、BrowseAppointmentsギャラリー コントロールを展開し、Subtitle1_1 コントロールを選択します。 Text プロパティを次のように変更します。

    Text(ThisItem.startDateTime, ShortTime24)

この式は、startDateTime フィールドの時間要素を表示します。

  1. ツリー ビュー ウィンドウで、BrowseAppointmentsGallery コントロールを展開し、Body1_1 コントロールを選択します。 Text プロパティを次のように変更します。

    ThisItem.customer.name

  2. ツリー ビュー ウィンドウで、BrowseAppointments 画面の IconRefresh1_1 のコントロールを選択します。 OnSelect アクションを次の式に設定します。

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

  3. ツリー ビュー ウィンドウで、AppointmentDetails 画面を展開し、DetailForm1_1 コントロールを選択します。 DataSource プロパティを appointmentsCollection に設定します。

  4. ツリー ビュー ウィンドウで、IconEdit1 コントロールを選択します。 DisplayMode プロパティの式を変更して、appoinmentsCollection コレクションをテストします。

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

  5. ツリー ビュー ウィンドウで DetailForm1_1 画面を展開し、Customer Name_DataCard1 コントロールを選択します。 Default プロパティを ThisItem.customer.name に変更します。

  6. 残りのデータ カードの Default プロパティを、次のように変更します。

    • Customer Address_DataCard1: ThisItem.customer.address
    • Contact Number_DataCard1: ThisItem.customer.contactNumber
    • Problem Details_DataCard1: ThisItem.problemDetails
    • Status_DataCard1: ThisItem.appointmentStatus.statusName
    • Notes_DataCard1: ThisItem.notes
    • Image_DataCard1_1: ThisItem.imageUrl

  7. ツリー ビュー ウィンドウで、EditAppointment 画面を展開し、EditForm1 コントロールを選択します。 DataSource プロパティを appointmentsCollection に設定します。

  8. ツリー ビュー ウィンドウで、EditForm1 コントロールを展開し、Customer Name_DataCard3 コントロールを選択します。 Default プロパティを ThisItem.customer.name に変更します。

  9. 残りのデータ カードの Default プロパティを、次のように変更します。

  • Contact Number_DataCard2: ThisItem.customer.contactNumber、さらに、MaxLength プロパティを 20 に変更します
  • Problem Details_DataCard2: ThisItem.problemDetails
  • Status_DataCard5: ThisItem.appointmentStatus.statusName
  • Notes_DataCard3: ThisItem.notes
  • Image_DataCard2: ThisItem.imageUrl

  1. ツリー ビュー ウィンドウで、Problem Details_Card2 コントロールを展開します。 このコントロール下で、DataCardValueX (X は数値) フィールドの名前を ProblemDetailsValue に変更します。 次のデータ カードの DataCardValueX コントロールに、このプロセスを繰り返します。

    • Status_DataCard5: StatusValue
    • Notes_DataCard3: NotesValue

    注意

    画像コントロールについては、次の章で説明します。

  2. ProblemDetailsValue を選択し、MaxLength プロパティを 100 に設定します。

  3. ツリー ビュー ウィンドウで、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 操作を呼び出します。 現在の予定の予定 ID を最初のパラメーターとして渡し、その後にユーザーが画面上で変更した可能性のある詳細を渡します。 詳細は JSON オブジェクトとして渡されます。 削除、設定、および収集ステートメントは、データベースに保存されたデータで appointmentsCollection コレクションを更新します。

    注意

    このような状況では、ClearCollect 関数を使用してコレクション全体を削除および更新しないでください。—たとえば—、1 つのレコードのみが変更された場合は無駄になります。

  4. ツリー ビュー ウィンドウで、EditAppointment 画面の IconAccept1 コントロールを選択します。 OnSelect アクション プロパティを次の式に設定します。

    ResetForm(EditForm1);

Navigate(AppointmentDetails, ScreenTransition.None);

  5. 左側ウィンドウのデータ タブで Appointments データ接続を右クリックし、削除を選択してそれをアプリから削除します。

  6. アプリを保存します。

  7. F5 を選択してアプリをプレビューします。 ホーム画面から予定画面に移動し、予定を選択して編集し、変更を保存します。 予定が更新されていることを確認します。

  8. プレビュー ウィンドウを閉じて、Power Apps Studio に戻ります。

フィールド サポート情報の Azure Cognitive Search サービスの作成

アプリのサポート情報画面は現在、どのデータ ソースにも添付されていません。 Web API には、KnowledgeDB データベースのヒント、BoilerParts、およびエンジニア テーブルをクエリおよび更新するための操作が含まれています。 ただし、アプリのクエリ画面の目的は、これらすべてのテーブルの検索をサポートすることです。 これらのテーブルのデータ量は急速に増加する可能性があるため、Maria、Kiana、および Preeti は、この機能をサポートするために Azure Cognitive Search を展開することを決定しました。 アプリは、カスタム コネクタを介してクエリを送信し、Azure Cognitive Search から結果を受け取ることができます。

Azure Cognitive Search は、検索対象のデータが単一のデータベース エンティティに含まれている場合に最適に機能します。 Kiana は KnowledgeDB データベースに、ヒント、BoilerParts、およびエンジニア テーブルの統合ビューを表示するビューを次のように作成します。

  1. Azure Portal で、KnowledgeDB SQL Database ページに移動します。

  2. 左側のウィンドウでクエリ エディターを選択し、パスワード Pa55w.rd を使用して sqladmin としてデータベースにサインインします。

    Azure SQL Database にサインインする。

  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 Cognitive Search を構成する際に必要になります。

    KnowledgeDB データベースの ADO.NET 接続文字列。

Preeti は Kiana と連携して、サポート情報ビューの行で検索を実行するように Azure Cognitive Search サービスの新しいインスタンスを次のように構成します。

  1. Azure Portal のホーム画面で + リソースの作成を選択し、Azure Cognitive Search と入力して、入力そして作成を選択します。

    Azure Cognitive Search サービスの作成。

  2. 新しい検索サービス ページで次の設定を入力し、レビューと作成を選択します。

    • サブスクリプション: ご使用の Azure サブスクリプションを選択してください
    • リソース グループ: webapi_rg
    • サービス名: サービスの一意の名前を入力します
    • 場所の名前: 最も近い地域を選択してください
    • 価格レベル: 無料

  3. 検証ページで作成を選択し、サービスがプロビジョニングされるまで待ちます。

  4. 新しい検索サービスのページに移動し、概要を選択して URL をメモします (後で Power Apps のカスタム コネクタを作成するときに必要になります)。それから、データのインポートを選択します。

    検索サービスの概要ページ。

  5. データのインポート ページのデータ ソース ドロップダウン リスト ボックスで、Azure SQL Database を選択します。

    Azure SQL Database の選択。

  6. データへの接続ページで、次の設定を指定します。

    • データ ソース: Azure SQL Database
    • データ ソース名: サポート情報
    • 接続文字列: 以前に記録した KnowledgDB データベースの Azure SQL Database を選択します。この文字列では、パスワードを必ず Pa55w.rd に設定してください
    • ユーザー ID フィールドとパスワード フィールドは既定値のままにします。これらの項目は接続文字列から取得されます

  7. テスト接続を選択します。 テストが成功したことを確認し、テーブル/ビュー ドロップダウン リスト ボックスのサポート情報を選択します。それから、次: コグニティブ スキルの追加 (オプション) を選択します。

    検索ビューを指定する。

  8. コグニティブ スキルの追加 (オプション) ページで、次に進む: ターゲット インデックスのカスタマイズを選択します。

  9. ターゲット インデックスのカスタマイズ ページで、すべての列に取得可能を選択し、件名、本文、名前、および概要に検索可能を選択します。 次へ: インデクサーを作成するを選択します。

    ターゲット インデックスのカスタマイズ。

  10. インデクサーの作成ページで、インデクサーの名前を、knowledgebase-indexer に変更します。 スケジュールの場合、時間単位を選択し、ハイ ウォーターマーク列を ID に設定し、送信を選択します。

    インデクサーを作成する。

  11. インデクサーをテストするには、検索サービスの概要ページで、エクスプローラーで検索を選択します。

    エクスプローラーで検索を選択。

  12. クエリ 文字列フィールドに、サポート情報で検索する単語を入力し、検索を選択します。 検索サービスは、件名、本文、名前、または概要フィールドに一致するドキュメントの一覧を生成し、結果ウィンドウにそれを表示します。 要求 URL とサンプル結果をメモします。これらの項目は、後で Power Apps カスタム コネクタを設定するときの要求と応答の例として必要になります。

    検索クエリの結果。

Azure Cognitive Search サービスのカスタム コネクタの作成

Kiana は、Power Apps が検索リクエストを検索サービスに送信するために使用するカスタム コネクタを作成できるようになりました。 Kiana は Power Apps Studio を次のように使用してこれを行います。

  1. Power Apps にサインインします。

  2. 左のウィンドウでデータを展開してカスタム コネクタを選択します。 右側のウィンドウで、+ 新しいカスタム コネクタを選択し、一から作成を選択します。

    新しいカスタム コネクタ。

  3. 一から作成 ダイアログで、新しいコネクタの名前を VanArsdelKBConnector に設定し、続行を選択します。

    サポート情報コネクタを作成する。

  4. 全般情報ページに説明を入力し、スキームを HTTPS に設定します。 ホスト ボックスに検索サービスの URL (以前にメモした URL) を入力しますが、接頭辞 https:// は付けません。それからセキュリティを選択します。

    検索サービス コネクタの全般ページ。

  5. セキュリティ ページの認証ドロップダウン リスト ボックスで、API キーを選択します。 パラメーター ラベル フィールドに、api-key と入力します。 パラメーター名フィールドに、api-key と入力します。 定義を選択します。

    検索サービス コネクタのセキュリティ ページ。

  6. 定義ページで、新しいアクションを選択します。 概要フィールドに、クエリと入力します。 説明フィールドに、サポート情報をクエリと入力します。 操作 ID フィールドに、クエリと入力します。 要求で、+ サンプルからインポートを選択します。

    検索サービス コネクタの定義ページ。

  7. サンプルからインポートのダイアログで次の値を入力し、インポートを選択します。

    • 動詞: GET
    • URL: 以前にエクスプローラーでの検索で、検索サービスをテストした際にメモした要求 URL の例を提供します
    • ヘッダー: Content-type

    サンプル要求から定義をインポート。

  8. 定義ページに戻り、クエリ セクションまでスクロールして検索の横にある省略記号ボタンを選択し、編集を選択します。

    検索要求の定義を編集する。

  9. 編集画面の パラメータ セクションの デフォルト値 フィールドに、アスタリスク (*) を入力します。 他のフィールドは既定値のままにして、戻るを選択します。

    検索既定値を設定する。

  10. 定義ページのクエリ セクションで、api-version の横にある省略記号ボタンを選択し、編集を選択します。

    API バージョンの編集。

  11. 編集画面で、パラメーター セクションのデフォルト値フィールドに、2020-06-30- プレビューと入力します (これは、Azure Cognitive Search の現在のバージョンに関連付けられているバージョンです。以前にメモした要求 URL でバージョンを確認できます)。 必須をはいに、表示を内部のみに設定します。 他のフィールドは既定値のままにして、戻るを選択します。

    検索パラメーターの API 値を設定する。

  12. 定義ページで 応答セクションまでスクロールし、+ 既定の応答を追加を選択します。

    定義の既定の応答を追加。]

  13. サンプルからインポート ダイアログのヘッダー フィールドに、テキスト Content-type を入力します。 本文 フィールドに、検索サービスのテスト時に記録した結果例を入力し、インポートを選択します。

    サンプルから応答メッセージをインポートする。

  14. 定義ページで、既定の応答を選択します。

    既定の応答を選択する。

  15. Content-type 応答の定義フィールドに application/json と入力し、戻るを選択します。

    応答メッセージのヘッダー コンテンツを設定する。

    注意

    正常に解析された場合、このページの本文セクションには、本文、ID、名前、概要、および件名などが表示されます。

  16. コネクタの作成を選択します。

    Azure Cognitive Search コネクタの作成。

コネクタは、エラーや警告を報告せずに作成する必要があります。

Azure Cognitive Search: フィールド サポート情報を使用してアプリを更新する

Maria は、アプリでカスタム コネクタを使用できるようになりました。 ただしまず、Azure Cognitive Search サービスに接続するために必要な特権を Maria に付与するキーが必要です。 Preeti は Azure Portal のサービスのキー ページからキーを取得し、Maria に渡します。

Azure Portal の検索サービス キー。

Maria は Power Apps Studio でアプリを編集し、次のタスクを実行します。

  1. 編集するため VanArsdelApp アプリを開きます。

  2. 表示メニューでデータ ソースを選択し、データの追加を選択します。

    アプリにデータ ソースを追加する。

  3. 検索ボックスのデータ ソースの選択で、Van と入力します。 VanArdelKBConnector コネクタが表示されます。

    Azure Cognitive Search コネクタの検索。

  4. VanArdelKBConnector コネクタを選択します。 VanArdelKBConnector ウィンドウで、Preeti が提供した検索サービス用のキーを入力し、接続を選択します。

    API キーを入力する。

  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 コントロールを選択します。 次のようにプロパティを設定します。

    • Text: ThisItem.Subject
    • X: 24
    • 幅: Parent.TemplateWidth - 104

  10. Subtitle2 コントロールを選択します。 Text プロパティを ThisItem.Body に設定します。

  11. F5 を選択してアプリをプレビューします。 サポート情報画面で検索語句を入力し、入力を選択します。 サポート情報と一致する記事が表示されます。

    アプリのサポート情報クエリ。

    注意

    詳細画面がまだ作成されていないため、記事の横にある > アイコンを選択しても機能しません。

  12. プレビュー ウィンドウを閉じて、Power Apps Studio に戻ります。

  13. ツリー ビュー ウィンドウで PartDetails 画面を右クリックし、画面の複製を選択します。 このアクションにより、アプリに PartDetails_1 という名前の別の画面が追加されます。

    PartDetails 画面を複製する。

  14. ツリー ビュー ウィンドウで、PartDetails_1 画面の名前を KnowledgebaseDetails に変更します。

    画面の LblAppNameX コントロールを選択し、Text プロパティを "Article Details" (引用符を含む) に変更します。

  15. ツリー ビュー ウィンドウで、画面の DetailFormX コントロールを選択します。 次のようにプロパティを設定します。

    • DataSource: azResult
    • 項目: BrowseGallery2.Selected

    注意

    BrowseGallery2 は、サポート情報画面にある参照ギャラリーです。 アプリケーションでは、このギャラリーの名前が異なる場合があります。

  16. ツリー ビュー ウィンドウで DetailFormX フォームを作成し、次のデータ カード コントロールの名前を変更します。

    • Name_DataCard1_1: Name_DataCard
    • CategoryID_DataCard1_1: Subject_DataCard
    • Overview_DataCard1_1: Overview_DataCard
    • Price_DataCard1_1: Body_DataCard

  17. NumberInStock_DataCard1_1 および 画像_DataCard1_1 コントロールを削除します。

  18. Name_DataCard コントロールを選択します。 Default プロパティを ThisItem.Name に設定します。

  19. Subject_DataCard コントロールを選択します。 次のようにプロパティを設定します。

    • DataField: "Subject"
    • DisplayName: "Subject"
    • Default: ThisItem.Subject

  20. Overview_DataCard コントロールを選択します。 Default プロパティを ThisItem.Overview に設定します。

  21. Body_DataCard コントロールを選択します。 次のようにプロパティを設定します。

    • DataField: "Body"
    • DisplayName: "Body"
    • Default: ThisItem.Body

  22. Body_DataCard コントロールで、DataCardValueX コントロールを選択します。 Text プロパティを Parent.Default に設定します。

  23. 各データ カード コントロールのサイズを変更して、画面全体に広げます。

    ArticleDetails 画面。

  24. 画面ヘッダーの戻る矢印を選択します。 OnSelect アクション プロパティを Navigate(Knowledgebase, ScreenTransition.None) に変更します。

  25. ツリー ビュー ウィンドウで Knowledgebase 画面を選択し、BrowseGalleryXX コントロールを選択します。 OnSelect アクション プロパティを Navigate(KnowledgebaseDetails, ScreenTransition.None) に変更します。 このアクションは、ユーザーが参照画面のエントリに > アイコンを選択すると、サポート情報記事の詳細画面を表示します。

  26. アプリを保存します。

  27. F5 を選択してアプリをプレビューします。 サポート情報画面で検索語句を入力し、入力を選択します。 記事を選択し、その詳細が表示されていることを確認します。 戻るアイコンを選択すると、ユーザーが参照画面に戻ることを確認します。

  28. プレビュー ウィンドウを閉じて、Power Apps Studio に戻ります。

Maria、Kiana、および Preeti は、Web API と Azure Cognitive Search をアプリに正常に組み込みました。

前へ 次へ