演習 - Visual Studio でカスタム コネクタを作成する

  • 5 分

この演習では、Visual Studio の Web API で Power Platform 環境にカスタム コネクタを作成します。

Power Platform を使用すると、Web API 開発者は、Power Apps キャンバス アプリをフロントエンドとして使用してモバイル アプリケーションまたは Web アプリケーションをすばやく作成できます。 Visual Studio 2022 の Power Platform 接続済みサービスを使用して、ASP.NET Web API 開発者は、Power Apps で使用するカスタム コネクタを簡単に作成できます。

メモ

この演習で Visual Studio と Power Apps を使用するには、次の操作が必要です。

  • ASP.NET および Web 開発ワークロードがインストールされた状態で、Visual Studio 2022 をインストールする。 開発トンネルを作成して使用するには、Visual Studio にサインインする必要があります。 この機能は、Visual Studio for Mac では使用できません。
  • 無料の Power Platform 開発環境を作成する。
  • サンプルをダウンロードする。

Power Platform を接続済みサービスとして追加する

  1. Visual Studio で、この GitHub のサンプル API を開きます。 これは ASP.NET Core Web API プロジェクトです。

  2. プロジェクトで、ソリューション エクスプローラーの接続済みサービス ノードを右クリックし、追加 > Microsoft Power Platform を選択します。

    追加する接続済みサービスのスクリーンショット。Microsoft Power Platform オプションが強調表示されています。

  3. 次の値を選択または入力します。

    • Power Platform 環境: select your developer environment
    • Power Platform ソリューション: Common Data Service Default Solution
    • カスタム コネクタ: + アイコンを選択し、InventoryLocations_Connector を入力する

    接続済みサービスの構成のスクリーンショット。

  4. パブリック dev トンネルを選択フィールドで、+ アイコンと次の値を選択します。

    • 名前: devtunnel
    • トンネルの種類: Persistent
    • アクセス: Public

    dev トンネルの構成のスクリーンショット。

  5. OK、完了 を選択します。 接続済みサービスを構成したら、閉じる を選択できます。

    接続済みサービスの構成プロセス完了のスクリーンショット。

これで、開発トンネルを利用して API を Power Platform に接続する、在庫場所用のカスタム コネクタを作成できました。 この内部ループでは、ローカル環境で API を実行します。

API を実行する

Visual Studio で Web アプリを実行しており、トンネルがアクティブの場合、Web ブラウザーでは localhost URL ではなくトンネル URL が開きます。

  1. Visual Studio ソリューションを実行し、デバッグを開始します。

    デバッグ実行アイコンのスクリーンショット。

  2. ブラウザーが開くと、トンネル URL に送信された最初の要求を示す警告ページが開きます。 続行 を選択します。

    最初の警告ページのスクリーンショット。

重要

Power App を構築している間は、API を (ブラウザー タブ内で) 実行したままにしてください。

API でアプリを作成する

メモ

このステップで提供されているサンプル アプリを使用するには、Visual Studio Code 用の Power Platform Tools をインストールする必要があります。

  1. Visual Studio Code を開き、Power Platform CLI コマンドを使用して、ユーザーの新しい認証を作成します。 URL を、管理センターにある開発環境 URL に変更します。

    pac auth create --url https://yourenvironment.crm.dynamics.com

  2. 作成したカスタム コネクタを取得します。 コネクタ ID をコピーします。

    pac connector list

  3. API の操作に基づいて、キャンバス アプリ (*.msapp ファイル) を生成します。

    pac canvas create --connector-id your connector id --msapp your file name.msapp

アプリのプレビュー

  1. Power Apps を開きます。

  2. 空のアプリ を選択します。 空白の状態からキャンバス アプリを作成で、作成 を選択します。

    アプリの作成ウィザードのスクリーンショット。

  3. アプリ名 Inventory app を入力し、タブレット PC を選択します。 作成 を選択します。

    アプリ名を入力するアプリ作成ウィザードのスクリーンショット。

  4. コマンド バーで、...、開く を選択します。

    既存のアプリを開く方法のスクリーンショット。

  5. ステップ 3 で作成した *.msapp ファイルを参照して開きます。 これにより、サンプル アプリがスタジオに読み込まれます。

    ファイルの参照オプションのスクリーンショット。

  6. 左側のバーで、データ アイコン、データの追加を選択します。 InventoryLocations_Connector を検索して、接続 を選択します。 これは Web API から作成されたカスタム コネクタです。

    カスタム コネクタを追加する方法のスクリーンショット。

  7. このアプリをプレビューするには、再生アイコンを選択します。

    アプリのプレビュー アイコンのスクリーンショット。

  8. 取得アプリ ボタンを選択して、在庫場所のリストを表示します。

    アプリのプレビューのスクリーンショット。

  9. アプリの右上にある閉じるアイコンを選択し、スタジオに戻ります。 公開アイコンを選択して、作業を保存します。

    公開アイコンのスクリーンショット。

ヒント

  • サンプル API からどの国も返されない場合は、 アプリの構築中に API が実行されていることを確認してください。
  • ここでは dev トンネルを使用しているので、デバッグやホット リロードを含め、API をリアルタイムで反復できます。

Web API でのアプリとカスタム コネクタの作成が完了しました。