Mock Serverとは

Mock Serverとは、ODataを模したレスポンスを返すためのJSファイルです。Mock Serverを使うことにより、ODataサービスが利用できないときでも開発を進めることができます。（GETリクエストにのみ対応しており、データの更新はできません）

WebIDEでテンプレートからODataを使うアプリを作ると、自動的にlocalServiceというフォルダが登録され、必要なファイルが用意されています。
ただし、今回はMock Serverの仕組みについて知るために一から設定してみたいと思います。

Mock Serverを呼ぶための構成

Mock Serverを呼ぶための構成は以下のようになります。

flpSandboxMockserver.htmlというファイルが最初に実行され、ここからmockserver.jsが呼ばれます。このファイルがMock Serverとして機能し、ODataに代わってモックデータを返します。mockserver.jsはmetadata.xmlを参照し、metadataに定義されたEntity Setの構造、型に合わせたデータを返します。
mockdataフォルダにテストデータを入れておくと、そのデータが使われます。データがない場合、自動的にランダムなデータが生成されます。

Mock Serverの設定手順

まずはベースになるFiori Appを作成し、次にMock Serverの設定を行います。

1. ベースになるFiori Appを作成

1-1. 簡単なODataサービスを作成

metadataは以下のようになります。

<edmx:Edmx xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPData" Version="1.0">
<edmx:DataServices m:DataServiceVersion="2.0">
<Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="Z_MOB58_06_SIMPLEDATA_SRV" xml:lang="en" sap:schema-version="1">
<EntityType Name="SalesOrder" sap:content-version="1">
<Key>
<PropertyRef Name="SoId"/>
</Key>
<Property Name="SoId" Type="Edm.String" Nullable="false" MaxLength="10" sap:unicode="false" sap:label="Sales Order ID" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
<Property Name="CreatedAt" Type="Edm.DateTime" Nullable="false" Precision="7" sap:unicode="false" sap:label="Time Stamp" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
<Property Name="Note" Type="Edm.String" Nullable="false" MaxLength="255" sap:unicode="false" sap:label="Description" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
<Property Name="CurrencyCode" Type="Edm.String" Nullable="false" MaxLength="5" sap:unicode="false" sap:label="Currency Code" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false" sap:semantics="currency-code"/>
<Property Name="GrossAmount" Type="Edm.Decimal" Nullable="false" Precision="16" Scale="3" sap:unicode="false" sap:unit="CurrencyCode" sap:label="Gross Amount" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
</EntityType>
<EntityContainer Name="Z_MOB58_06_SIMPLEDATA_SRV_Entities" m:IsDefaultEntityContainer="true" sap:supported-formats="atom json xlsx">
<EntitySet Name="SalesOrderSet" EntityType="Z_MOB58_06_SIMPLEDATA_SRV.SalesOrder" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:pageable="false" sap:content-version="1"/>
</EntityContainer>
<atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="self" href="http://sts4csrvr.st.com:8001/sap/opu/odata/sap/Z_MOB58_06_SIMPLEDATA_SRV/$metadata"/>
<atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="latest-version" href="http://sts4csrvr.st.com:8001/sap/opu/odata/sap/Z_MOB58_06_SIMPLEDATA_SRV/$metadata"/>
</Schema>
</edmx:DataServices>
</edmx:Edmx>

1-2. Fiori Appを登録

SAPUI5 Applicationのテンプレートから登録します。このテンプレートでは必要最小限のファイルしか作られないので、今回の目的に合っています。

1-3. ODataとの接続

まずはODataにつないで実行するため、以下の手順で接続設定をします。（Master Detailなどのテンプレートを使えば自動的に設定されます）

manifest.json
データソースに1-1で定義したODataサービスを追加します。

上記のODataをデフォルトモデルに設定します。

neo-app.json
ODataの実際の接続先を定義します。

neo-app.jsonで指定する宛先は、あらかじめSAP Cloud Cockpitで登録しておきます。（参考：OData(7) ODataを使ったSAPUI5アプリケーションの作り方準備編）
neo-app.jsonで宛先を指定するのは、開発環境、テスト環境などバックエンドが変わるたびにmanifest.jsonを変更する必要がないようにするためです。manifest.jsonで直接に宛先を指定してもちゃんと動きます。

/webappを先頭につけたresoucesを追加

もともと/resoucesと/test-resourcesというパスが設定されていますが、これらをコピーして頭に/webappとつけます。このあと定義するflpSandboxMockserver.htmlからリソースを読み込むために必要な設定となります。

1-4. ビューを作成

SalesOrderのリストを表示するシンプルなビューを作ります。

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="train.Train_02_MockServer.controller.SalesOrder" displayBlock="true">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="{i18n>title}">
					<content>
					    <List items="{/SalesOrderSet}">
					        <items>
					            <StandardListItem type="Navigation" title="{SoId}" description="{GrossAmount} {CurrencyCode}"/>
					        </items>
					    </List>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

1-5. 実行してみる

このような結果になります。

2. Mock Serverの設定

次に、Mock Serverの設定を追加します。

2-1. metadata.xmlファイルを配置

ODataサービスのmetadataをダウンロードしたものを用意します。
webapp配下にlocalServiceというフォルダを作って、metadata.xmlファイルを追加します。

Edit->Beautyをすると見やすい形式になります。

2-2. mockserver.jsを作成

localServiceフォルダ配下にmockserver.jsファイルを作成します。

sap.ui.define(
	["sap/ui/core/util/MockServer"],
	function(MockServer){
		var oMockServer;
		return{
			init: function(){
				oMockServer = new MockServer({
					//manifest.jsonで定義したdataSourcesのuriと同じ
					rootUri: "/S4C/sap/opu/odata/sap/Z_MOB58_06_SIMPLEDATA_SRV/"
				});
				
				//自動的にレスポンスを返すための設定
				MockServer.config({
					autoRespond: true,
					autoRespondAfter: 1000
				});
				
				//metadata.xmlへのパス
				var sPath = jQuery.sap.getModulePath("train.Train_02_MockServer.localService");
				var sMetaPath = sPath + "/metadata.xml";

				oMockServer.simulate(sMetaPath, {
					//モックデータのパス
					sMockdataBaseUrl: sPath + "/mockdata",
					//データがなかったら自動生成する
					bGenerateMissingMockData: true
				});
				//Mockサーバーを起動
				oMockServer.start();
			}
		};
	}
);

2-3. flpSandboxMockserver.htmlを作成

testフォルダ配下にflpSandboxMockData.htmlを作成します。

まずは以下のように骨組みを作ります。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Train_02_MockServer</title>
		<script id="sap-ui-bootstrap"
				src="../resources/sap-ui-core.js"
				data-sap-ui-libs="sap.ushell, sap.collaboration, sap.m, sap.ui.layout, sap.f"
				data-sap-ui-theme="sap_belize"
				data-sap-ui-preload="async"
				data-sap-ui-compatVersion="edge"
				data-sap-ui-resourceroots='{"train.Train_02_MockServer": "../"}'
				data-sap-ui-frameOptions='allow'> // NON-SECURE setting for testing environment
		</script>		
	</head>
	<body class="sapUiBody" id="content">
	</body>
</html>

bootstrapの部分で通常のindex.htmlファイルと異なるのは以下の点です。

ライブラリにsap.ushell, sap.collaborationを追加する
- Fiori Launchpad（タイルなど）を表示するのに必要
resourcerootsの階層が、通常("./")よりも一段下になる
- このファイルが通常よりも1階層下であるlocalServiceの下に置かれるため

続いてbootstrapの上に以下のコードを追加します。
Fiori Launchpad Sandbox(Fiori Launchpadのテスト用ローカル環境)を実行するための設定です。

		<script>
			window["sap-ushell-config"]= {
				defaultRenderer: "fiori2",
				renderers: {
					fiori2: {
						componentData: {
							config: {
								search: "hidden"
							}
						}
					}
				},
				applications: {
					"SalesOrder-display": {
						additionalInformation: "SAPUI5.Component=train.Train_02_MockServer",
						applicationType: "URL",
						"url": "../",
						description: "Search sales orders",
						title: "Sales orders"
					}
				}
			};
		</script>
		<script src="../test-resources/sap/ushell/bootstrap/sandbox.js"></script>

最後に、bootstrapの下に以下のコードを追加します。
mockserverを起動し、Fiori Launchpad Sandboxを実行するためのコードです。

		<script>
			sap.ui.getCore().attachInit(function(){
				sap.ui.define(["train/Train_02_MockServer/localService/mockserver"],
				function(mockserver){
					mockserver.init();
				});
				sap.ushell.Container.createRenderer().placeAt("content");
			});
		</script>

Mock Serverで実行

Run Configuration

Mock Serverで実行するため、Run Confgurationを開きます。

実行するファイルとしてflpSandboxMockserver.htmlを選択します。

Save and Runを押して実行します。

実行結果は以下のようになります。
Fiori Launchpad風の画面が開きました。これがFiori Launchpad Sandboxです。

タイルをクリックするとデータが表示されます。これは自動生成されたデータです。

テストデータの作り方

テストデータの作り方として、2つの方法があります。

実際のODataをダウンロードしたものを使う
metadata.xmlから生成する

1. 実際のODataをダウンロードしたものを使う方法

ブラウザなどでEntity Setを取得するクエリを実行し、結果をjsonファイルに保存します。

localService配下にmockdataというフォルダを作り、ダウンロードしたファイルをインポートします。

実行結果

2. metadata.xmlから生成する方法

metadata.xmlファイルを右クリックし、Edit Mock Dataを選択します。

必要に応じてデータを変更し、OKを押します。

実行結果

感想

今回は一から作ったためつまづきも多く苦労しましたが、実際にはすべてのファイルが自動生成されるため、すぐに使うことができるはずです。

Mock Serverを使えば社外などバックエンドにつなげない環境からでもFiori Appを開発できるようになるので、在宅勤務の可能性が広がるのではないかと思いました。（希望）