触ってみよう！SAPのPaaS――第3回：Fiori画面作成＆ディプロイ

 

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

・HCPでのアカウント登録

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

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

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

 

今回の作業の流れ：

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/

 

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

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

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

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

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

https://sapes1.sapdevcenter.com/webgui

 

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

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

 

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

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

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

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

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

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

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

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

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

 

HCP Cockpitを開きます。

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

「Destinations」をクリック。

「New Destination」をクリック。

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

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」をクリックします。

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

Application URLをクリックします。

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

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

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

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

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

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

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

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

例）

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

例）

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

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

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

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

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

 

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

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

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

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

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

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

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

 

 

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

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

今回のハンズオンでは、

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

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

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