1. 2022年3月3日
大塚 將司 / 浅井 崚
SAP AppGyverとSAP CAPで簡単なアプリを作ってみた
～市民開発者とプロ開発者で作業を分担してみた～
SAP Inside Track 2022
TOKYO

2. SAP AppGyver + SAP CAP
Cooperation between citizen- and pro- developers
2022-03-03: Week 5 – Development
TOKYO
SAP Inside Track 2022

3. 3
名前：大塚 將司(すみっこ)
仕事：S/4HANAの導入支援(ABAP、SD、MM)
その他：chillSAP運営。SAPのすみっこ(ブログ)
自己紹介
名前：浅井 崚
仕事：Extension Suiteを用いた開発と技術支援

4. 4
1. SAP AppGyverとは
2. アプリ作成前にやったこと
3. 作成したアプリについて
4. メッセージ
AppGyverとSAP CAPで簡単なアプリを作ってみた

5. 5
転載1：SAP TechEd Japan 2021 「SAP BTPの最新情報を押さえるならこれ！アプリ開発とインテグレーションの大事な点を総ざらい」P4
AppGyverとは

6. 6
転載2：SAP TechEd Japan 2021 「SAP BTPの最新情報を押さえるならこれ！アプリ開発とインテグレーションの大事な点を総ざらい」P8
AppGyverとは
当セッションでは、 APIの呼び出し先をプロ
フェッショナル開発者がSAP Cloud Application
Programming Model（CAP）で構築してみた

7. 7
参考1：YouTube - SAP AppGyver - sitTokyo Demo1
AppGyverとは
Demo (AppGyverの操作イメージ)

8. 8
1. SAP AppGyverとは
2. アプリ作成前にやったこと
3. 作成したアプリについて
4. メッセージ
AppGyverとSAP CAPで簡単なアプリを作ってみた

9. 9
参考2：SAP Community Blog – SAP AppGyver
アプリ作成前にやったこと(1)
SAP Community Blog – SAP AppGyver

10. 10
転載3：SAP TechEd 2022 DEV161 - Develop Applications from Start to Finish Through LCNC and SAP AppGyver
アプリ作成前にやったこと(2)
SAP TechEd 2021 – DEV161(Workshop)
※イベント用のヒーロー予約アプリ
・SAP Business Application Studioの新しいローコード開発
・SAP AppGyverを使用したモバイルアプリケーション開発

11. 11
転載4：SAP Developer Tutorial - Create an Application with SAP AppGyver
アプリ作成前にやったこと(3)
SAP Developer Tutorial - Create an Application with SAP AppGyver
※食品のパッケージのバーコードをスキャンしてカロリー情報を表示するアプリ
・SAP AppGyverを使用したモバイルアプリケーション開発

12. 12
アプリ作成前にやったこと(4)
YouTube観まくる – 公式以外のコンテンツも充実
①AppGyver公式
① 参考3：YouTube - AppGyver
② 参考4：YouTube - Curiosity Lab
③ 参考5：YouTube - Shankar Gomare
③Purchase Order Approval
②ピザ屋

13. 13
参考6：書籍 - 猫でもわかるAppGyver〜Todoアプリをつくろう！〜
参考7：Vimeo - Composer Pro: Creating a Todo App
アプリ作成前にやったこと(5)
書籍を読む – 猫でもわかるAppGyver
※ToDoアプリ
・AppGyverの基本

14. 14
参考8：ブログ - 【AppGyver】次に注文するビールを決める
参考9：YouTube - 【SAP AppGyver】次に注文するビールを決める
アプリ作成前にやったこと(6)
簡単なアプリを作ってブログを書いてみた
※SAPアドベントカレンダー2021に投稿

15. 15
1. SAP AppGyverとは
2. アプリ作成前にやったこと
3. 作成したアプリについて
4. メッセージ
AppGyverとSAP CAPで簡単なアプリを作ってみた

16. 16
参考10：YouTube - SAP AppGyver - sitTokyo Demo2
Demo (製品マスタ登録・照会)

17. 17
作成したアプリの画面遷移とAPI処理
※認証は未実装
OData API
(GET)
OData API
(GET)
OData API
(POST)

18. 18
CI Server
Jenkins
with Project “piper”
Cloud Foundry Subaccount
runtime environments
SAP S/4HANA
(ES5)
Application
Client
End User
(Citizen Developer)
作成したアプリのアーキテクチャ図
Backend Application
Cloud Application
Programming Model
approuter
HANA Cloud
SCM Tool
SAP Business Application Studio
Design time environments
OData
Services
OData
HTTP
Destination
Frontend Application
SAP AppGyver
Application
Logging
Alert Notification Cloud Transport
Management
Developer
Automation Pilot
凡例
エンドユーザ関連のつながり
プロ開発者（DevOps）関連のつながり
XSUAA
GitHub
Notify
Smoke Test
Notify
Notify
Deploy
Logging
Develop
Notify
Autoscaler
Change Scale
Push
Push
Upload
Logging
SQLDBC
HTTP
NOUN
VERB アクション内容
通信プロトコル

19. 19
やってみた感想
市民開発者
 画面の作成/修正を自分でできるのがよい
• 仕様変更などが容易
• (単純に)モノづくり楽しい
 以下の基礎知識が必要
• APIの利用方法
• アプリ作成のお作法
 まだわかっていないこと
• 認証まわりの実装方法
• 利用者への展開方法
プロ開発者
 いちばん“やるまでわからん”になりがちな
UX設計をオフロードできるのはよい
• APIの取り決めだけでよいのであれば、
今までより相対的に楽
 以下の知識を市民開発者に伝えるコストはかかる
• API設計
• HTTP（できればRESTも）
• アプリ作成
• 変数
• ループ
• 条件分岐

20. 20
1. SAP AppGyverとは
2. アプリ作成前にやったこと
3. 作成したアプリについて
4. メッセージ
AppGyverとSAP CAPで簡単なアプリを作ってみた

21. 21
• 作るハードルが下がることで
「どのような機能を作って、どのように使うか」を考える時間が増える(はず)。
⇨普段から考えることが必要
• 作業を分担する場合、チームの状況(時間、能力など)に応じた
事前準備や作業範囲の取り決めが重要
• まずは、みんなやってみよう(特に普段開発しない人)
メッセージ：

22. 22
引用、参考、参照、転載の一覧
転載1 SAP TechEd Japan 2021 「SAP BTPの最新情報を押さえるならこれ！アプリ開発とインテグレーションの大事な点を総ざらい」P4
転載2 SAP TechEd Japan 2021 「SAP BTPの最新情報を押さえるならこれ！アプリ開発とインテグレーションの大事な点を総ざらい」P8
転載3 SAP TechEd 2022 DEV161 - Develop Applications from Start to Finish Through LCNC and SAP AppGyver
転載4 SAP Developer Tutorial - Create an Application with SAP AppGyver
参考1 YouTube - SAP AppGyver - sitTokyo Demo1
参考2 SAP Community Blog - SAP AppGyver
参考3 YouTube - AppGyver
参考4 YouTube - Curiosity Lab
参考5 YouTube - Shankar Gomare
参考6 書籍 - 猫でもわかるAppGyver〜Todoアプリをつくろう！〜
参考7 Vimeo - Composer Pro: Creating a Todo App
参考8 ブログ - 【AppGyver】次に注文するビールを決める
参考9 YouTube - 【SAP AppGyver】次に注文するビールを決める
参考10 YouTube - SAP AppGyver - sitTokyo Demo2