演習の目的
UXデザイン・シンキングでアプリ画面のプロトタイプができたら、次はバックエンドとフロントエンドの並行開発です。この演習2では、バックエンドのサービスがまだ完成していない段階で、データモデル定義を使ってアプリ開発し、モックデータを使ってテストします。開発、テストのスムーズな点を体験します。
早い段階でお客様にプロトタイプを見せたり、プリセールスデモでは、モックデータを使って意味あるデータをセットしてデモを実施できます。
1. EDMX (Entity Data Model)からMaster-Detail のFioriテンプレートを使ってアプリを生成
2. SAP Web IDE プリビューでテスト実行
3. ランダムなモックデータ、準備したモックデータでテスト
1. 新規プロジェクトを作り、EDMXファイルを指定
SAP Fiori アプリはバックエンドのデータをOData サービスを介して動くデザインです。まだバックエンドのODataサービスができていない段階でも、データ定義のEDMX ファイルを使ってアプリの開発をスタートできます。
- 演習1でブックマークしておいたSAP Web IDE を起動
- Welcome PageからNew Project from Templateを選択
- 別の方法でメニューからFile à New à Project from Templateでもプロジェクト作成できます
- テンプレート一覧からSAP Fiori Master Detail Application を選択し、Next.
- プロジェクト名を入力、例えばMyFirstFioriAppを入力してNext.
- EDMX をデータ・ソースに指定
デザイン・シンキング、画面のモックアップができた段階で、データモデルを定義します。そのEntity Data Model file (EDMX) を使って、フロントエンドとバックエンドの並行開発を行います。
openSAP のページからデータモデル定義ファイルをダウンロードします。https://open.sap.com/files/6b0ebe1a-3181-4b20-bb08-3e7ef8c357f7
ZIP なのでファイルを展開してローカル保存しておきます。
New Projectウィザードのステップ3. Data Connection でFile Systemソースを選択し“schema_file_salesorder.edmx” を読み込みます。Nextで次へ。
- ステップ4の Template Customization でテンプレートとデータ項目のマッピングを行います。
Note：Project Namespace では、ルールを決めておくと管理がし易くなります。
- スクロールダウンしてDetail Sectionも同様にテンプレートとデータ項目のマッピングを行います。
- Nextで次へ
- Finishでプログラムコードが生成されます。
- EDMX 定義を元にアプリが生成されました。
2. モックデータを使ってアプリをテスト
バックエンドのOData サービスがまだ完成していないので、アプリをテストすることができません。SAP Web IDE には便利な機能、モックデータでアプリを起動するオプションがあります。SAP Web IDEがランダムにデータを生成して、ランダムデータでテストできます。また、JSON ファイルからテストデータを読み込む事もできます。開発者にとってはうれしい機能です。
まずは、ランダムデータでアプリのテストをしてみましょう。
- プロジェクトフォルダでindex.htmlを選択
- メニューからRun àでテストプリビュー画面が表示されます。
- 左の伝票一覧から伝票選択すると、右側に詳細が表示されます。
Note
- 別の方法でもできます。index.html で右ボタンRun -> Run with Mock Data
3. 意味のあるモックデータの作成
ランダムデータでアプリの動作テストは出来るのですが、意味のあるデータを利用ユーザに見てもらってフィードバックを得る事が重要です。SAP Web IDE ではモックデータをマニュアルで編集できる機能があり、JSON ファイルを作成できます。
- プロジェクトファイルからmodelフォルダを展開
- metadata.xmlで右クリック、Edit Mock Data
- Add Rowを選択して1行テストデータを入力します。
- モックデータの入力が終わったらOK.
- modelフォルダの下にモックデータファイルSOHeader.jsonが作成されます。
- index.htmlで右クリックしてRun -> Run with Mock Data
- モックデータでテストできる事を確認
