Skip to Content

演習の目的

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を選択

/wp-content/uploads/2015/06/edmx01_867551.jpg

  • テンプレート一覧からSAP Fiori Master Detail Application を選択し、Next

  /wp-content/uploads/2015/06/edmx2_867552.jpg

  • プロジェクト名を入力、例えば 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 で次へ。

/wp-content/uploads/2015/06/edmx03_867553.jpg 

  • ステップ4 Template Customization でテンプレートとデータ項目のマッピングを行います。

/wp-content/uploads/2015/06/edmx04_867554.jpg  

/wp-content/uploads/2015/06/edmx05_867555.jpg

/wp-content/uploads/2015/06/edmx06_867556.jpg

  • Nextで次へ
  • Finishでプログラムコードが生成されます。
  • EDMX 定義を元にアプリが生成されました。

 

2.   モックデータを使ってアプリをテスト

 

バックエンドのOData サービスがまだ完成していないので、アプリをテストすることができません。SAP Web IDE には便利な機能、モックデータでアプリをテストするオプションがあります。SAP Web IDEがランダムにデータを生成して、ランダムデータでテストできます。また、JSON ファイルからテストデータを読み込む事もできます。開発者にとってはうれしい機能です。

まずは、ランダムデータでアプリのテストをしてみましょう。

  • プロジェクトフォルダでtest.htmlを選択して Run

/wp-content/uploads/2015/06/edmx08_867558.jpg

/wp-content/uploads/2015/06/edmx07_867557.jpg  

3. 意味のあるモックデータの作成

 

ランダムデータでアプリの動作テストは出来るのですが、意味のあるデータを利用ユーザに見てもらってフィードバックを得る事が重要です。SAP Web IDE ではモックデータをマニュアルで編集できる機能があり、JSON ファイルを作成できます。

  • プロジェクトファイルから model フォルダを展開
  • metadata.xmlで右クリック、Edit Mock Data

/wp-content/uploads/2015/06/edmx09_867559.jpg 

  • Add Row を選択して1行テストデータを入力します。

/wp-content/uploads/2015/06/edmx10_867566.jpg

  • モックデータの入力が終わったら OK.

 

  • modelフォルダの下にモックデータファイルSOHeader.jsonが作成されます。

   /wp-content/uploads/2015/06/edmx11_867567.jpg

  • モックデータでテストできる事を確認

/wp-content/uploads/2015/06/edmx12_867568.jpg

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply