Part 1. SAPクラウド演習1. ノンプログラミングでアプリを作ってみよう!の続きです。

 

ノンプログラミングでアプリを作ってみよう!

 

10分アプリ開発のスクリプトを作ったので共有します。

 

  • SAP 知識必要なし
  • プログラミング知識必要なし
  • 開発ツールのインストール必要なし
  • 必要な物はブラウザだけで、全てクラウド(SAPのPaaSであるSAP HANA Cloud Platform、略称 HCP)での作業です

 

作るのは、左側に一覧があって右側に詳細を表示するこんなアプリです。

1つのコードで、デスクトップPC、タブレット、モスホでも使えるレスポンシブ・デザイン のFiori アプリです。

ワンソース・マルチユースは低コスト開発、低コスト保守の利点があります。同じソースでモバイルアプリもビルドできちゃいます、Apache Cordova は後半で。

SupplierList.jpg

1. OData の確認

 

まずは使用するOData の確認をしましょう。www.odata.org が提供しているサンプルの OData をこの演習で使います。ERPをお持ちの方はGateway経由でERP のOData サービスを利用できます。

 

ブラウザで http://services.odata.org で Read Only のサービスを今回は使います。

http://services.odata.org/V3/OData/OData.svc/  です。http://services.odata.org はSAP HANA Cloud Platform Cockpit で Destination として定義しました。

後のステップで OData サービス/V3/OData/OData.svc/ を指定します。

2. アプリ開発(ノンプログラミング)

 

Part 1. で登録したブックマークから SAP Web IDE を起動します。

クラウド上のEclipse と思ってください。ローカルPCには何のインストールもいりません。

 

1. 左上の Home アイコンを選択し、Create a project -> New Project from Template

/wp-content/uploads/2015/02/dev1_864170.jpg

テンプレートを選択します。ここでは SAP Fiori Master-Detail Application を選択して次へ

Dev2.jpg

プロジェクト名を入力して次へ

/wp-content/uploads/2015/02/projectname_866318.jpg

Data Connection 画面でデータソースを選択します。

1. Sources からService URL を選択

2. Service Information のプルダウンから Northwind OData Service を選択

3. その下のフィールドに /V3/OData/OData.svc/ を入力

4. フィールド横のボタンを選択して接続テスト。右側にDetails が表示されればOK

プルダウンにNorthwind OData Services のが表示されなければ、ブラウザを閉じて再度SAP Web IDE を起動してください。

serviceURL.jpg

次はテンプレート画面にデータをマッピングしていきます。

 

右側にテンプレートのサンプルがあります。

/wp-content/uploads/2015/02/template_866282.jpg

このテンプレートの各フィールドに表示したいODataの項目をマッピングしていきます。プルダウンから選択したり、キーボード入力も試してください。左に仕入先一覧があって、右に製品一覧を表示するようにデザインします。

  • Master Selection は左側の縦の一覧
  • Detail Section は右側の詳細画面

/wp-content/uploads/2015/02/field1_866319.jpg

/wp-content/uploads/2015/02/field2_866320.jpg

/wp-content/uploads/2015/02/field3_866324.jpg

最後に確認して終わり。これだけです。

/wp-content/uploads/2015/02/finish_866325.jpg

 

各プログラムファイルが生成されます。

3. テスト

 

どんなファイルが生成されたか、プロジェクトフォルダの中身を見てください。

/wp-content/uploads/2015/02/project1_866326.jpg

開発したアプリはそのままクラウド上でテストできます。

 

プロジェクトフォルダを選択して Run でテスト

/wp-content/uploads/2015/02/project_run_866330.jpg

テスト起動はちょっと時間がかかりますが、こんな画面が出てきたら成功です。

SupplierList2.jpg

4. 画面拡張(オプション)

 

この画面にこのフィールドを追加したいというのはよくあるリクエストです。アプリのコードは生成されていますので、プログラム知識のある方は直接ビューやコントローラーのロジックを変更できます。ですがこの演習はノンプログラミングですので、 WYSIWYG エディターでフィールド追加します。

 

View フォルダを展開して、Detail.view.xml で右クリック Open with -> Layout Editor

/wp-content/uploads/2015/02/layout_editor_866332.jpg

仕入先名の下に住所を表示してみましょう。

  /wp-content/uploads/2015/02/view1_866336.jpg

まずは、View の Data Set を確認します。左上で View が選択されている事を確認して、右の Data Set に Suppliers を指定。

/wp-content/uploads/2015/02/view2_866337.jpg

左側のコントロールの一覧から Display カテゴリのObject Attribute コントロールをドラッグ&ドロップ

/wp-content/uploads/2015/02/view3_866338.jpg

同様に5つのObject Attribute を配置します。テンプレート・ウィザードで指定した Address/Country は削除します。

/wp-content/uploads/2015/02/view6_866344.jpg

左側の Properties で表示するデータ項目をマッピングします。

/wp-content/uploads/2015/02/view4_866342.jpg

Address/Streetをマッピングします。

/wp-content/uploads/2015/02/view5_866343.jpg

同様に Address を以下のように定義します。

/wp-content/uploads/2015/02/view7_866351.jpg

左上のSaveボタンで保存

/wp-content/uploads/2015/02/save_866352.jpg

Run でテストして住所が表示されればOKです。

/wp-content/uploads/2015/02/view8_866363.jpg

注:右側の Address/Country は削除されていなかった。(不具合)

4. アプリをクラウドで公開

 

完成したアプリをクラウドにデプロイします。

プロジェクトフォルダから Deploy -> Deploy to SAP HANA Cloud Platform を選択

/wp-content/uploads/2015/02/deploy_866364.jpg

SSOを使っていて、自分のパスワードがわからない場合は、ここで終了してください

/wp-content/uploads/2015/02/deploy2_866365.jpg

/wp-content/uploads/2015/02/deploy3_866370.jpg

 

この画面が出てきたらデプロイ成功です。

/wp-content/uploads/2015/02/deploy4_866371.jpg

デプロイが成功すると、アプリを SAP Fiori launchpad へタイルとして登録できますが、この演習では省略します。

ブックマークに登録した SAP HANA Cloud Platform Cockpit に戻って HTML5 Application でデプロイしたアプリを確認します。

/wp-content/uploads/2015/02/deploy5_866378.jpg

/wp-content/uploads/2015/02/deploy6_866379.jpg

Application URL をコピー&ペーストして、次のデモ用にスマホにメールを送っておきます。

 

5. デモ

 

スマホでアプリのURLを選択して開発したアプリをデモします。最初の起動はダウンロードに時間がかかります、2回目からはキャッシュを読むので少しは早くなります。SAP Fiori Client モバイルアプリを使うと常にキャッシュを保持するので早くなります。詳しくはSAP Fiori – Mobilizing Steps を参照してください。

 

 

To report this post you need to login first.

5 Comments

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

  1. YUTARO HARADA

    3.Data Connectionの部分で必ず、以下のようなエラーが発生してしまうのですが、原因はなんなのでしょうか…?

    Unhandled Error: Invalid metadata file

    (0) 
      1. YUTARO HARADA

        お返事ありがとうございます。

        プライベートモードって、Chromeのいうシークレットウィンドウでいいですか?

        シークレットウィンドウでも開いてみたのですが、同じエラーがでました。

        ためしに、キャッシュも切ってみたのですが、やはり同じエラーがでました。

        何か設定が間違っているのでしょうか…?

        何度もすみません。

        (0) 

Leave a Reply