演習の目的
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 を起動
- Homeから 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 でテンプレートとデータ項目のマッピングを行います。
- Nextで次へ
- Finishでプログラムコードが生成されます。
- EDMX 定義を元にアプリが生成されました。
2. モックデータを使ってアプリをテスト
バックエンドのOData サービスがまだ完成していないので、アプリをテストすることができません。SAP Web IDE には便利な機能、モックデータでアプリをテストするオプションがあります。SAP Web IDEがランダムにデータを生成して、ランダムデータでテストできます。また、JSON ファイルからテストデータを読み込む事もできます。開発者にとってはうれしい機能です。
まずは、ランダムデータでアプリのテストをしてみましょう。
- プロジェクトフォルダでtest.htmlを選択して Run
3. 意味のあるモックデータの作成
ランダムデータでアプリの動作テストは出来るのですが、意味のあるデータを利用ユーザに見てもらってフィードバックを得る事が重要です。SAP Web IDE ではモックデータをマニュアルで編集できる機能があり、JSON ファイルを作成できます。
- プロジェクトファイルから model フォルダを展開
- metadata.xmlで右クリック、Edit Mock Data
- Add Row を選択して1行テストデータを入力します。
- モックデータの入力が終わったら OK.
- modelフォルダの下にモックデータファイルSOHeader.jsonが作成されます。
- モックデータでテストできる事を確認
- SAP Managed Tags:
