SAP AppGyver-EventGuide-App-Part1

20 de maio de 2022 lwrc

SAP社が提供するノーコードツール SAP AppGyver を使ったアプリの作成例を3回に分けて
ご紹介します。本ブログは第１回目となります。

SAP HANA Cloudからセッション情報などを取得したり、問合せ内容の登録ができる
イベントガイドアプリをノーコーディングで作成しました。
SAP AppGyver上の操作をステップバイステップで記載していますので是非ご参考にしてください。

１．全体概要・準備・SAP AppGyverでのアプリ作成（画面遷移・データ参照）←本ブログ★
２．SAP AppGyverでのアプリ作成（データ登録）
３．チャットボット機能の導入

また、ブログ執筆中に#SAPLowCodeNoCodeChallenge が始まりました。
2022/5/9～6/13の期間で開催されていますので、ご興味ある方は是非ご参加ください！
詳細は Daniel Wroblewski のblogを参照ください。
https://blogs.sap.com/2022/05/04/no-code-challenge-0-code-100-app-and-hoodies/

Index

１．はじめに
２．アプリケーションの構成図、利用サービス
３．準備
４．SAP HANA Cloudのテーブル作成とODataサービスの公開
５．SAP AppGyverでのアプリ作成（画面遷移）
６．SAP AppGyverでのアプリ作成（OData連携～データ参照～）
７．終わりに

１．はじめに

本ブログでは SAP Inside Track Tokyo というコミュニティイベントのスマートフォン向け
イベントガイドアプリをSAP AppGyverで作成します。

このアプリでできることは以下となります。

イベント情報の参照
- イベントの概要
- セッション情報
- イベントの動画・投影資料
- 参加者ブログ
- FAQ
イベントの参加登録
問合せ機能
すぐにつぶやける（Twitterでハッシュタグ付き）

動作画面のDEMOはこちらをご覧ください。

[embedded content]

https://sittokyo-guide.appgyverapp.com/

２．アプリケーションの構成図、利用サービス

このアプリを作成するために使用したバックエンド側のサービス・技術はこちらです。
すべてトライアルアカウントでの利用が可能です。
（他のAPIサービスなどを利用される場合はODataサービスの作成は不要となります）

SAP BTP, Cloud Foundry environment
Node.js Application : SAP HANA CloudのデータをODataサービスとして公開
SAP HANA Cloud　　 : セッション情報、QA情報の格納先
SAP Business Application Studio : 開発環境
SAP Conversational AI : チャットボット機能
SAPUI5 Applicaiton : チャットボット機能

３．準備

アプリ作成を始める前に以下の準備を行ってください。

SAP AppGyverのアカウント作成
SAP AppGyver community editionにアクセスしてアカウントを作成してください
SAP Business Technology PlatformにてSAP HANA Cloudインスタンスを作成してください（トライアルで可能）
SAPチュートリアルのSet Up SAP HANA Cloudを参考に実施してください。
（SAP HANA Cloudを利用しない場合は不要です）

４．SAP HANA Cloudのテーブル作成とODataサービスの公開

セッション情報、QA情報の格納先としてSAP HANA Cloudを使用します。

今回はSAP HANA Cloudに以下の3つのテーブルを作成し、ODataサービスとして公開します。

Table Name	説明	OData Service Name
SITSessions	セッション情報を格納するテーブル	SITSessionsservice
QandA	問合せ内容を格納するテーブル	QandAservice
FAQ	FAQ内容を格納するテーブル	FAQservice

テーブルの作成、ODataサービスの公開はMaxime Simonさんのブログ「CAPでSAP HANA CloudのテーブルをODataサービスとして公開する」を参考にしています。
こちらのブログに記載の手順を参考に、以下の定義情報のテーブル・ODataサービスを作成します。

Table : SITSessions

列名	型	説明
ID (Key)	String(4)	セッション番号を識別するID
TRACK_DATE	String(1000)	トラックの開催日
TRACK_NAME	String(1000)	トラック名
Category	String(1000)	セッションのカテゴリ
SessionTitle	String(1000)	セッション名
SessionAbstract	String(1000)	セッション概要
Link_Youtube	String(1000)	セッション動画(YouTube)のURL
Link_Slideshare	String(1000)	セッション資料(Slideshare)のURL

<OData ServiceのXML>

Table : QandA

列名	型	説明
ID (Key)	String(30)	QAを識別するID(問合せ日時)
UserName	String(20)	問合せ者名
Category	String(20)	問合せカテゴリ(QA,コメント等)
Question	String(1000)	問合せ内容
Answer	String(1000)	回答内容
Status	String(10)	問合せステータス

<OData ServiceのXML>

Table : FAQ

列名	型	説明
ID (Key)	String(30)	QAを識別するID
UserName	String(20)	回答者名
Category	String(20)	FAQカテゴリ(QA,コメント等)
Question	String(1000)	問合せ内容
Answer	String(1000)	回答内容

<OData ServiceのXML>

５．SAP AppGyverでのアプリ作成（画面遷移）

SAP AppGyverでの基本操作については、SAP AppGyver公式のドキュメントやチュートリアル、
コミュニティサイトを参照ください。

本ブログでは主要なポイントに絞って設定方法をご紹介します。
まずは画面の遷移からです。

1) ページの作成

SAP AppGyver上で表示するページ(画面)を作成します。

本アプリはイベントガイドを目的としたもののため、メインページから各情報のページに遷移できるようにしています。各ボタンをクリックすると別のページに遷移することができます。

また、Webサイトに遷移させることもできます。

例えば、イベント概要ページを作成しておき、メインページの「イベントについて」をクリックすることで以下の画面に遷移させることができます。

このような画面遷移は以下のようにロジックを設定することで実現できます。

※「イベントについて」のボタンを選択し、ロジック編集画面を開き、「Open page」を追加し、
PROPERTIESで遷移先のページ名を指定します。

2) 外部サイトやTwitterへのリンク

外部サイトへ画面を遷移する方法は以下の手順となります。
以下はTwitterでツイートする際の手順ですが、他のWebサイトでも同様の手順です。

イベント中に参加者もTwitterで情報発信や感想を気軽に・簡単にツイートできるように、
ツイートボタンを設けます。

上記のTwitter画面はLOGIC画面で[Open web browser]というファンクションを使用します。
デフォルトで表示されないため、[INSTALLED]タブの[FLOW FUNCTION MARKET]から検索して
機能をインストールする必要があります。

[Open web browser]で[URL to open]に以下のURLを指定することで、予めハッシュタグを付けたツイート画面を表示することができます。

https://twitter.com/intent/tweet?hashtags=sitTokyo,chillSAP
※ハッシュタグ「sitTokyo」,「chillSAP」を指定した例です

同様の手順で各ページと遷移するロジックを作成します。

６．SAP AppGyverでのアプリ作成（OData連携～データ参照～）

本章では、イベントのセッション情報を取得する例を用いて、
ODataを経由してSAP HANA Cloudにあるデータを参照する方法をご紹介します。

下の図では、テーブル[SITSessions] の[SessionTitle]をリスト形式で表示しています。
セッション名をタッチすることでセッションの詳細ページを表示することも可能です。

1) ODataインテグレーション設定

画面上部の [DATA] ボタンをクリックして、DATA CONFIGRATORを開きます。
画面右側の [ADD DATA RESOURCE] から [OData integration]をクリックします。

[Base API URL]に「４．SAP HANA Cloudのテーブル作成とODataサービスの公開」で作成した
OData ServiceのURLを指定し、 [VERIFY URL]でURLをチェックします。
※画面のOData Service名は「sitservice」です

ODataが利用可能な場合、Baseの下側にリソースIDやlist、createなどの項目が表示されます。
こちらから一覧表示やデータの登録/更新/削除のテストが行えます。
テストで問題がなければ [SAVE DATA RESOURCE] をクリックします。

※CORSの対応をしていないため警告が表示されますが、iOSで使用する場合は利用可能です。
※利用可能なOData versionは4.0です。2.0は利用できません。
SAP S/4HANAで使われるOData versionは2.0が中心となりますのでご注意ください。

2) List作成①（VARIABLES設定）

セッション一覧を表示するページ側でのデータ設定(VARIABLES)を行います。

[DATA VARIABLES]を選択し [ ADD DATA VARIABLE ] をクリックし、
OData Service名を選択します。

Data variable nameに任意の名前を付け、Data variable typeは [Collection of data records]を選択し保存します。
Collection of data recordsを使用することで、リスト形式での表示が可能になります。

以上でデータを取り扱うための設定が完了しました。

3) List作成②（VIEW設定）

データの定義が完了しましたので、次にページ側（画面側）でどのようにデータを表示するかの設定を行っていきます。

左側のLISTSの一覧から使いたいリスト形式のものを選択し、画面にドラッグアンドドロップで配置ます。
右側のプロパティで [ Repeat with ] のアイコンをクリックします。
[ Repeat with ]を使用することで、データの行数分のリストを表示することができます。

※本アプリでは [ List Item ] を使用しましたが好きなリスト形式を選択ください。
※行数が多い場合は [ Scroll view ] を併用することで、スクロールバーを表示させることもできます。

下図を参考に、「1) データ設定」で設定した定義を選択します。

次に、リストで表示させる名称を指定します。
本アプリでは、セッションタイトルを表示させています。

下図を参考に、設定を行います。
Select repeatで[current]を選択することで、[ Repeat with ]で指定したデータを利用することができます。

以上でList形式での表示設定は完了です。
一覧表示されたリストから詳細ページに遷移させたいときは後続の設定を実施してください。

4) List→詳細ページへの遷移設定①（ID引き渡し設定）

List画面で選択したデータを詳細ページで表示するため、List画面で選択したデータのIDを
次ページに引き渡す設定を行います。

List Itemを選択した状態でLOGICを設定していきます。
詳細ページに遷移したいため、[Open page]を追加し遷移先のページを指定します。

引き継ぎたい情報を設定するには、右側の[Parameters]の[Session ID]の[×]をクリックします。

[ Data item in repeat ]を選択し、Select repeatの箇所は[ current ]を選択します。
Select repeat data propertyの箇所は[ current.ID ]を選択し、保存します。

5) List→詳細ページへの遷移設定②（VARIABLES設定）

セッションの詳細を表示するページにて、データ設定(VARIABLES)を行います。

まずは、このページで使用する変数の入れ物（PAGE PARAMETER）を作成します。
[PAGE PARAMETER]を選択し、 [ ADD PARAMETER ] をクリックし、
Parameter nameに任意の名前を付けます。
ここではIDが入る変数を準備しています。

次に、[DATA VARIABLES]を選択し [ ADD DATA VARIABLE ] をクリックし、
OData Service名を選択します。

Data variable nameに任意の名前を付け、Data variable typeは [Single data record]を選択します。
Single data record を使用することで、1件のデータの各情報を表示することが可能になります。

また、IDの指定が必要となるため、[ID]の[×]ボタンをクリックして設定を行っていきます。

下図を参考に、PAGE PARAMETERで設定した定義を選択します。

6) List→詳細ページへの遷移設定③（VIEW設定）

詳細ページでのデータ定義が完了しましたので、次にページ側（画面側）でどのようにデータを表示するかの設定を行っていきます。

左側の一覧からタイトルやTextなど使いたい形式のものを選択し、画面にドラッグアンドドロップで配置します。
今回はタイトル形式の箇所にセッション名を表示させます。
Headlineの部分を選択した状態で、右側のプロパティで [ Content ] のアイコンをクリックします。

下図を参考に、データの種類を選択します。

[Single data record]で定義した data variableを選択し、表示させたい項目を指定します。
下図ではセッション名を表示するため、[ Session Title ]を指定しています。

設定が完了すると [ Content ]の欄にデータの名称が表示されます。

同様の手順でセッションの概要説明を表示させる設定を行います。

以上で設定は完了です。スマホのSAP AppGyver Previewを使用して動作をご確認ください。

７．終わりに

本ブログでは、アプリの全体像、事前準備事項、参照先のデータ準備（OData）、
SAP AppGyverでの設定やデータ参照の設定について記載しました。

次回のブログでは、SAP AppGyverで問合せ内容を記入し、SAP HANA Cloudにデータ登録する方法についてを掲載したいと思います。

長文となりましたが、ご覧いただきありがとうございました。
手探りで手順を調査したり、トライアンドエラーで設定を行いましたので、
より良い手順や不備があるかもしれません。
もし何かお気づきの点がございましたら、お気軽にコメント欄に記載をお願いいたします。