触ってみよう!SAPのPaaS――第3回:Fiori画面作成&ディプロイ


 

今回の触ってみようシリーズは三回目です。第一回~二回目で

HCPでのアカウント登録

HCPでのサンプルJAVAアプリケーションのディプロイ

についてご紹介しました。 今回は、SAP ERPのカスタムFiori画面をいかに簡単に作れるかを体感いただく方法についてご紹介します。 画面開発はHCP上のWeb IDEという開発ツールを利用します。Web IDEで開発した画面は、バックエンドのSAP ERPODataという標準プロトコルで通信します。SAP ERPからODataを出力するために、SAP Gatewayというモジュールを利用します。 ということで、今回のハンズオンでは、SAP ERPSAP GatewayWeb IDE3つを利用します。 12回目のハンズオンで、Web IDEのユーザー登録はお済みだと思いますので、今回は、SAP Gatewayのユーザー登録から解説を始めます。

今回利用する開発環境の構成は下記の通りです。

 

4_1

今回の作業の流れ:

  1. SAP Gateway Public Serviceにユーザー登録をする。

  2. HCPのCockpitにアクセスし、宛先(Destination)登録をする。

  3. WEB IDE上でFioriテンプレートを使い、アプリを作成する。

 

1. SAP Gateway Public Serviceにユーザー登録をする

 

最初に、SAP Gateway Serviceユーザー登録サインアップフォームにアクセスします。

https://supsignformssapicl.hana.ondemand.com/SUPSignForms/

3_2

 

・必須入力項目(User Name(SCNアカウント名)ユーザー姓名、Emailアドレス等を登録する。

・パスワードを設定する。(最大8文字・特殊文字を一つ入れること)

アカウントが有効化されると、登録したメールアドレスに通知メールが届きます(上記は、既存のアカウントでパスワードリセットをしたケースなので、新規有効化の場合はメールタイトル、本文が異なります)。

3_3

アカウントが有効化されると、SAP ERPシステムをパブリッククラウド環境でクラウドサービスとして利用できるようになります(検証目的のみ利用許可)。

パブリッククラウド上のSAPシステムにブラウザ(WEB GUI)経由でアクセスが出来る用になりますので、下記URLをブラウザに入力しアクセスしてください。

https://sapes1.sapdevcenter.com/webgui

3_4

 

サインアップ時にセットしたID/パスワードにてログインします。初回はパスワードの初期化が求められますので、適宜パスワードの設定をしてください。

*現在、言語は英語とドイツ語のみです。

3_5

 

ログインに成功すると、下記のような初期メニューの画面が表示されます。

SAP Gatewayがインストールされているパブリッククラウド上のシステム(ABAPインスタンス)にログインしています。SAP Gatewayに関しては、こちら(参照リンク:https://www.sapjp.com/blog/archives/890)もご参照ください。ログオフします。

3_7

Fioriで使用するODataサービスの確認をします。

先ほどログインしたSAP Gateway がインストールされているパブリッククラウド上のERPシステムで利用できるサンプルのODataサービス情報を下記のSCNサイトで確認できます。

http://scn.sap.com/docs/DOC-31221

例えば、Sales Order ExampleのODataサービスを利用する場合、下記よりリンクをクリックするとサービス内容を確認することができます。

3_8

任意のサービス(ここでは“Sales Order (Item) for a specific sales order”をクリックすると、SAP Gateway Public Service接続のための認証を求められるので、登録したユーザーIDとパスワードを入力します。)

ODataサービスのXMLファイルが開かれます。XMLファイルの中に、使用するODataサービスへのアクセスURLを確認することができます。

3_9

2. HCPのWeb IDEにアクセスし宛先(Destination)登録をする

 

HCP Cockpitを開きます。

https://account.hanatrial.ondemand.com/cockpit#/acc/<account name>/subscriptions

3_10

「Destinations」をクリック。

3_11「New Destination」をクリック。

3_12

下記の内容で宛先情報を登録します。

Name: ECC_ES1_oData

Type: HTTP

Description: ECC flight system with oData

URL: http://sapes1.sapdevcenter.com:8080

Proxy Type: Internet

Cloud Connection Version: 2

Authentication: NoAuthentication

「New Property」ボタンで下記3つのプロパティを追加します。

WebIDEEnabled: TRUE

WebIDESystem: ES1

WebIDEUsage: odata_abap

「Save」ボタンで保存して宛先登録は完了です。

 

3. WEB IDE上でFioriテンプレートを使い、アプリを作成する

HCP Cockpit の「Subscriptions」をクリックします。

3_13

「webide」をクリックします。

3_14

Application URLをクリックします。

3_15

File → New → Project from Templateをクリックします。

3_16

SAP Fiori Master Detail Applicationを選択し「Next」ボタンをクリックします。

(Fioriの他のテンプレートを選択しても構いません)

3_17

Project Nameに任意の名前(空白は禁止)を入力し、「Next」ボタンをクリックします。

3_18

”Sources”で「Service URL」を選択(①)、Service Informationで「ES1_ABAP_Odata」を選択(②)、Paste URL hereフィールドに1.1で確認したODataサービスのアクセスURLを入力(③)します。「Load Service metadata」ボタン(①の右側にある右向き矢印ボタン)をクリックします。

3_20

Detailsに、当該のODataサービスで取得できるデータエンティティが表示されます。

「Next」ボタンをクリックします。

3_21

プロジェクト設定情報として、Master Section(左側のフレーム)に表示させる項目を割当てます。

例)

4_2

3_23

プロジェクト設定情報として、Detail Section(右側のフレーム)に表示させる項目を割当てます。

3_24

例)

4_3

3_26

3_27

入力が完了したら、「Next」ボタンをクリックします。

3_28

「Finish」ボタンをクリックします。

3_29

「フォルダアイコン」をクリックします。

3_31

「index.html」を右クリック→「Run」→「Run as」 → 「Web Application」をクリックします。

3_32

SAP Gateway Public Serviceに登録したユーザーID/パスワードを入力します。

3_33

 

作成したFiori Appsのプレビューを見ることができます。マスターセクション、詳細セクションに割り当てた項目が正しく表示されているか?確認してください。

問題がなければ、プレビューのブラウザタブを閉じ、Web IDEに戻ります。

3_34

プロジェクト(SalesOrder_FioriSample)を選択し右クリック→Deploy→Deploy to SAP HANA Cloud Platformを選択します。

3_35

HCPへのログインパスワードを入力し、「Login」ボタンをクリックします。

3_36

Deploy」ボタンをクリックします。

3_37

Successfully Deployed”のポップアップが表示されたら、「Open the active version of the application」をクリックします。

3_38

認証情報を聞かれたら、SAP Gateway Public Serviceに登録したユーザーID/パスワードを入力します。

 

3_39

 

以上でSAP Gateway Public Serviceを利用したFiori アプリケーションの作成は終了です。

HCPでは、Fioriテンプレートを提供しているため、バックエンドにアクセスするためのSAP GatewayとODataサービスがあれば簡単にFiori アプリケーションを作成することができます。

今回のハンズオンでは、

・HCP上でのFiori アプリケーションの開発容易性

・SAP Gatewayを利用したODataサービスのFioriアプリケーションからの消費

を体感頂ければ幸いです。