フィードバック

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

  • [アーティクル]

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

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

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

Kiana は、Web API が現在 Azure App Service で実装されていることを Preeti に説明します。 このサービスは、Preeti が Azure Portal を使用して構成できる多数の認証プロバイダーをサポートします。 Preetiは、Azure Active Directory に特に関心を持っています。これは、VanArsdel が近い将来、他の多くの企業システムにこの形式の認証を展開することを検討しているためです。

App Service 認証構成。

App Service は、水平方向および垂直方向のスケーラビリティも提供します。 必要に応じて、Preeti は、Web アプリの App Service プランをアップグレードすることにより、Web API で利用可能なリソースをスケールアップできます。

App Service のスケールアップ。

彼女は、自動スケーリングを構成することにより、システムをスケールアウトするように調整することもできます。 App Service を使用すると、運用マネージャーは、負荷が増加したときにシステムがより多くのインスタンスにスケールアウトする条件、または需要が減少したときに再び戻す条件を決定する自動スケーリング ルールを定義できます。 スケジュールに従って実行するようにプリエンプティブ自動スケーリングを構成することもできます。

App Service のスケールアウト。

IT 運用マネージャーの重要な役割は、システムがどのように変化するかを監視し、基盤となるサポート構造が将来の拡張と変更を確実に処理できるようにすることです。 Preeti は、Kiana によって開発された Web API が拡張され、将来的に他の VanArsdel システムによって再利用される可能性があることを知っています。 彼女は、開発者が 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. Image_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. ツリー ビュー ウィンドウで、BrowseAppointmentsGallery コントロールを展開し、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 が検索リクエストを検索サービスに送信するために使用するカスタム コネクタを作成できるようになりました。 彼女は 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 サービスに接続するために必要な特権を付与するキーが必要です。 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
    • 項目: BrowserGallery2.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 および Image_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 画面を選択し、BrowseGalleryX コントロールを選択します。 OnSelect アクション プロパティを Navigate(KnowledgebaseDetails, ScreenTransition.None) に変更します。 このアクションは、ユーザーが参照画面のエントリに > アイコンを選択すると、サポート情報記事の詳細画面を表示します。

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

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

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

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

前へ 次へ