Power Apps でMongoDB のデータを連携利用

MS PowerApps は、データに連携するモバイルおよびタブレット向けアプリをドラッグ＆ドロップとリッチな関数で実現します。CData API ServerとADO.NET Provider for MongoDB (もしくは250+ の他のADO.NET Providers)を組み合わせて使い、PowerApps のリモートデータソースへの連携機能を拡張することができます。PowerApps のCommon Data Service に別途データをコピーする必要はありません。CData API Server は、MongoDB のデータにデータベースのようなアクセスを可能にし、SaaS API やNoSQL をインメモリのSQL-92 エンジンで操作できるようにします。

CData API Server は、Swagger のメタデータ標準をサポートします。Azure App Service、Microsoft Flow、およびPowerApps でSwagger メタデータからのUI 生成やコード生成が可能です。Swagger 定義を使えば、PowerApps からMongoDB に連携する関数が生成できます。本記事では、それらの関数をPowerApps から使って、リモートのMongoDB に連携する方法を説明します。

はじめに

---

API Server の設定

以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなMongoDB OData サービスを作成していきましょう。

MongoDB への接続

PowerApps からMongoDB のデータを操作するには、まずMongoDB への接続を作成・設定します。

1. API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
2. 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「MongoDB」を選択します。
3. 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
   CData コネクタの追加方法はこちら >>
4. それでは、MongoDB への接続設定を行っていきましょう！

5. MongoDB への接続には、Server、Database、User、Password プロパティを設定します。MongoDB コレクションにテーブルとしてアクセスするには、自動スキーマ検出を使用することができます。もちろんスキーマ定義の.rsd ファイルを編集して自分でスキーマ定義を書くことも可能です。スキーマに縛られないフリーフォーマットクエリを投げることもできます。

6. 接続情報の入力が完了したら、「保存およびテスト」をクリックします。

MongoDB への接続には、Server、Database、User、Password プロパティを設定します。MongoDB コレクションにテーブルとしてアクセスするには、自動スキーマ検出を使用することができます。もちろんスキーマ定義の.rsd ファイルを編集して自分でスキーマ定義を書くことも可能です。スキーマに縛られないフリーフォーマットクエリを投げることもできます。

API Server のユーザー設定

次に、API Server 経由でMongoDB にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。

1. 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
2. 次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
3. その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。

MongoDB 用のAPI エンドポイントの作成

ユーザーを作成したら、MongoDB のデータ用のAPI エンドポイントを作成していきます。

1. まず、「API」ページに移動し、 「 テーブルを追加」をクリックします。
2. アクセスしたい接続を選択し、次へをクリックします。
3. 接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。

OData のエンドポイントを取得

以上でMongoDB への接続を設定してユーザーを作成し、API Server でMongoDB データのAPI を追加しました。これで、OData 形式のMongoDB データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。

また、CORS を有効にして［Server］とクリックして次のセクションを定義する必要があります。［*］なしですべてのドメインを許可するオプションを選択することもできます。

1. Access-Control-Allow-Origin:値を［*］またはAPI Server を呼び出すドメインに設定します。
2. Access-Control-Allow-Methods:値を［GET,PUT,POST,OPTIONS］または使用する必要のあるHTTP メソッドに設定します。
3. Access-Control-Allow-Headers:［x-ms-client-request-id, authorization, content-type］に設定します。

最後に、URL の一部としてauthtoken を渡すことにより、ユーザーが認証できるようにAPI Server を構成する必要があります。そのために、インストール先のwww/app_data フォルダに移動し、settings.cfg ファイルを変更して[Application] セクションに次の行を追加します。

AllowAuthTokenInURL = true

Swagger メタデータの取得

メタデータを使用してCustom API 接続を作成します。Swagger 定義を取得するには、ブラウザで次の要求を行い、結果のJSON ファイルを保存します。

http://MySite:MyPort/api.rsc/$oas?version=2

API Server を介してMongoDB に接続

以下のステップで、リモートMongoDB を検索する簡単なアプリを作成する方法を説明します。

1. Microsoft Power Apps で、［Custom connectors］をクリックします。
2. ［Create custom connector］をクリックし、［Import an OpenAPI］ファイルを選択します。
3. コネクタに名前を付け、JSON ファイルを参照して［Continue］をクリックします。
4. 関連する一般情報を入力し、ベースURL が/api.rsc/@myauthtoken (myauthtoken はconfigure API Server ユーザーのAuthToken) の形式であることを確認して［Continue］をクリックします。
5. Authentication タイプには［No authentication］を選択します。［Continue］をクリックします。
6. アクションと参照の定義を確認し、［Create connector］をクリックします。
7. コネクタをテストするには、新しい接続を作成する必要があります。［Test］をクリックし、［Connections］の下の［New Connection］をクリックして［Create］を選択します。
8. ［Custom connectors］メニューからコネクタに戻り、［Test］をクリックします。ここから使用可能な操作をテストできます。

データソースをPowerApp に接続

以下のステップに従って、PowerApp からMongoDB に接続します。

1. Power Apps のメインメニューから［Create an app］をクリックし、オンプレミスまたはクラウドのPowerApp Studio を選択します。
2. 空のアプリを選択し、携帯レイアウトまたはタブレットレイアウトのどちらかを選択します。
3. ［View］タブで［Data Sources］をクリックし、［Add Data Source］をクリックします。
4. 作成した接続をクリックしてコネクタをテストします。

ギャラリーの事前設定

以下のステップに従って、MongoDB を検索できる簡単なアプリを作成します。Power Apps の数式を使用してMongoDB の行をギャラリーコントロールの行にバインドします。

1. ［View］タブで［Gallery］->［Vertical］をクリックしてギャラリーを追加します。

2. ギャラリーを選択し、ギャラリー設定の［Advanced］タブでギャラリーの［Items］プロパティをMongoDB に割り当てます。以下の式を使用すると、restaurants テーブルの例にアクセスできます。

   ForAll(CDataSwaggerAPI.getAllRestaurants().value, {myborough: borough, mycuisine: cuisine})

3. 要素をクリックし、［Text］プロパティ(UI 要素の［Advanced］タブ) をThisItem.myborough またはThisItem.mycuisine に設定してMongoDB 列をUI 要素に割り当てます。

   

MongoDB のデータの検索

ギャラリーに表示されるレコードをフィルタリングするには、［Screen］にTextInput を追加し、TextInput の［Text］プロパティをクリアしてギャラリーの［Items］プロパティを以下のような式にます。また、必要に応じてTextInput1 をギャラリーのTextInput コントロール名に置き換えます。

If(IsBlank(TextInput1.Text),
  ForAll(CDataSwaggerAPI.getAllRestaurants().value, {myborough: borough, mycuisine: cuisine}),
  ForAll(CDataSwaggerAPI.getAllRestaurants({'$filter':Concatenate("contains(borough,",TextInput1.Text,")")}).value, {myborough: borough, mycuisine: cuisine}))

この式は、API Server がリモートMongoDB に対して実行するOData クエリを作成し、最初にすべてのレコードをアプリに取り込むことをせずに現在のデータに対して検索が実行されるようにします。 サポートされているOData の詳細については、API Server のヘルプドキュメントを参照してください。

MongoDB のデータの編集

以下のステップに従って、ギャラリーで選択されたMongoDB レコードのフィールドを表示する編集可能な画面をロードします。

1. ［Insert］タブで、［New Screen］->［Blank］とクリックし、スクリーンの名前を［Details］に設定します。
2. ギャラリーを新しいスクリーンに結び付けます。ギャラリーの最初のエントリで矢印ボタンを選択し、［Advanced］プロパティの［OnSelect］フィールドに以下のように入力します。

   Navigate( Details, None )

3. ［Details］スクリーンの［Insert］タブで、［Id］と［Id］値の別のラベルを追加します。［Text］プロパティをBrowseGallery.Selected.Id に設定します。

各カラムについて、以下のことを行う必要があります。Custom API の場合、フォーム要素はAPI Server に対してどのリクエストを作成する必要があるかを検出できないため、データ変更式を手動で書く必要があることに注意してください。

1. フィールドのラベルを追加します。
2. ［Text］メニューからのテキスト入力を画面に追加し、text プロパティをギャラリーから選択したアイテムの値に設定します。(例: BrowseGallery.Selected.myborough).

アプリに基本的な更新機能とナビゲーションを提供するには、［Submit］ボタンと［Back］ボタンを追加します。

1. ［Submit］ボタンでOnChange プロパティを以下のように設定します。

   CDataSwaggerAPI.updaterestaurants(BrowseGallery.Selected.myId,BrowseGallery.Selected.myId,{borough:TextInput1.Text,cuisine:TextInput2.Text})

2. ［Back］ボタンの場合は、［OnSelect］フィールドを以下のように設定します。

   Navigate( BrowseScreen, None )

これで、モバイルアプリまたはタブレットアプリでMongoDB を参照、検索、更新できるようになりました。