OutSystemsでSAP ES5のODataを利用したアプリを作成する Part.1

[yasuyukiuno]

この記事は#chillSAP 夏の自由研究2021の8月15日分の記事として書いています。

本記事では、ローコード開発プラットフォームOutSystemsでSAP ES5のデータを利用したアプリを作成します。
本記事で作成するアプリは下記URLからも動かすことが可能です。
https://personal-x1vzk10d.outsystemscloud.com/SAP_ES5_SearchExample/SearchProductSet

本記事の背景

SAPのローコードテクノロジとして代表的なFiori Elementsですが、非常に簡単にアプリケーションが作成できる反面、柔軟性が低いことが欠点となっています。
そこで、ローコード開発ツールのリーダーであるOutSystemsを利用してアプリケーションを作成してみることにしました。

OutSystemsとは？

OutSystemsとは、モダンなアプリケーションをサクッと開発できるローコード開発プラットフォームです。
期間無制限のトライアル環境(パーソナル環境)があり、本記事の内容はパーソナル環境で実施可能です。

Node.jsのnpmと同じように、OutSystemsでは有志が作成したライブラリを自由に再利用するためのエコシステムである"Forge"が用意されており、既存のライブラリを利用することで簡単に高速にアプリ開発することが可能です。
また、Forgeで公開されているライブラリは全てBSDライセンスとなっています。

ES5とは？

SAP Netweaver Gatewayとは、SAP ERPと他のシステムを接続する際のハブとなるシステムです。SAP ERPからデータを抽出するODataサービスを作るときに必要になります。
SAP ES5は、SAP Netweaver Gatewayのデモシステムであり、ES5で公開されているODataを利用してアプリ開発を試すことができます。

所要時間

• 1時間

---

手順の概要

1. SAP ES5のアカウント作成


2. ODataの確認


3. OutSystems Service Studioのインストール


4. Forge(サンプルライブラリ、デモ)のインストール


5. デモアプリの実行

---

1.SAP ES5のアカウント登録

チュートリアルに従ってSAP ES5のアカウントを登録します。

前提条件として、SAP Business Technology Platformのユーザ登録が必要です。。

 

2.ODataの確認

下記URLにアクセスし、SAP ES5のデモ用ODataを確認します。

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/

利用可能なEntityがいくつかありますが、今回はProductSetというEntityを利用することとします。

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet

 

3.OutSystems Service Studioのインストール

下記URLよりOutSystemsのアカウントを作成し、Development Environmentをダウンロード/インストールします。
https://www.outsystems.com/downloads/

OutSystems Service Studioを起動します。

Outsystemsでは主に以下の3種類のアプリケーションを作成することができます。

リアクティブWebアプリ	Single Page ApplicationのWebアプリです。レスポンシブなインターフェースを備えており、様々なデバイスで利用することが可能です。
モバイルアプリ	Cordovaでラッピングしたネイティブアプリ、PWAアプリケーションを作成できます。
トラディショナルWebアプリ	非SPAの旧式のWebアプリです。

今回はリアクティブWebアプリを作成することとします。

---

参考:OutSystemsをより深く学びたい場合、OutSystemsの開発ドキュメント及び無料トレーニングコースを参照下さい。

リアクティブWeb開発者への道

最初のリアクティブWebアプリを作成する

---

 

4.Forge(サンプルライブラリ、デモ)のインストール

OutSystemsでは、有志が作成したライブラリを再利用するエコシステムが用意されており、Forgeと呼びます。

今回は私の方で事前に作成したライブラリを利用してアプリを作成していきます。

OutSystems Service StudioでForgeタブを選択、またはInstall from Forgeボタンをクリックします。

ここでは、例えばQRコードリーダーやAmazon S3のライブラリ、PDFビューア、Excelのインポート/エクスポートライブラリなどをインストールすることが可能です。

検索キーワードにSAPと入力して検索し、SAP ES5 OData Exampleを選択します。

 

---

参考:Forgeのアイコンの意味

検索結果に出てくるForgeには、PCのモニタやスマートフォンのようなアイコンが付いています。

PCのモニタアイコンは、トラディショナルWebアプリ用のライブラリであることを示しています。

スマートフォンのアイコンは、モバイルアプリ用のライブラリであることを示しています。

PCのモニタとスマートフォン両方のアイコンは、リアクティブWebアプリ用のライブラリであることを示しています。

---

 

右上のインストールボタンからForgeをインストールします。

Forgeのインストールが完了すると、自身の環境にインストールしたライブラリのアイコンが増えていることが確認できます。

 

5.デモアプリの実行

OutSystems Service Studioで、先ほどインストールしたSAP ES5 OData Exampleを開きます。

このForgeは2つのモジュールから成り立っています。

SAP_ES5_ConnectorSample	ES5のODataとつなぐためのライブラリ本体
SAP_ES5_SearchExample	ライブラリを利用したデモアプリ

ライブラリの中身の詳しい説明やカスタマイズ方法は次回の記事で書くこととして、まずはデモアプリを実行してみます。

Service Studio上部の1-Click Buildボタンを押すとプログラムがビルドされ、続けてOpen in Browserボタンをクリックでアプリを動かすことができます。

 

下図のようなアプリがブラウザで表示されたはずです。

まとめ

今回はSAP ES5のODataを利用したOutSystemsのアプリケーションのデモアプリ実行までを行いました。
次回の記事では、ライブラリの詳しい説明やカスタマイズ方法について解説します。