Many changes!
From SAP Appgyver to SAP Build Apps
2023-03-02: Week 4 – App Dev & Automation

2
名前： 有山 優一
会社： 富士通株式会社
部門： Uvance本部 Business Applications
役割： Consultant、Architect (SAP BTP)
TechEd 参加目的：技術情報の収集＆発信、ネットワーキング

3
アイスブレーク質問
質問： 開発たのしい？
回答タイプ： 選択形式
選択の場合：選択肢リスト
• たのしい（市民開発者）
• おいしい（プロ開発者）
• うれしい（市民でありプロ開発者）
• かなしい（開発しない）

2023年3月2日
有山 優一
富士通
ここが変わった！
SAP AppGyver → SAP Build Apps
SAP Inside Track 2023
TOKYO

5
セッション関連質問
質問：SAP AppgyverがSAP Build Appsに変わってからもうさわってみたよ！って人
回答タイプ： 選択形式
選択の場合：選択肢リスト
• 私がマスターです
• さわってみた
• さわってみたい
• なにそれおいしいの？

6
1. SAP Build Appsとは（？）
2. SAP AppGyverでできたこと/できなかったこと
3. SAP Build Appsでどうなったの
4. まとめ
ここが変わった！
SAP AppGyver → SAP Build Apps

7
Intelligent, Sustainable Enterprise
Intelligent, sustainable
enterprise
Lead to cash
Recruit to retire
Design to operate
Source to pay
ビジネスネットワーク インダストリ ー クラウド エクスペリエンス管理 計画
ソリューション領域
テクノロジー
アプリケーション開発 自動化 インテグレーション データ管理＆分析 AI
業種固有の
エンドツーエンドプロセス
ビジネスプロセス
ビジネスプロセス管理
一貫性の
あるUX
One ワークフ
ローインボックス
E2Eのプロセス
設計図
共通のドメイン
モデル
統合されたセキュ
リティ&ID管理
コーディネイトさ
れたライフサイク
ル管理
組み込み/
クロスアプリの
アナリティクス
エンタープライズリソース管理 (ERP)
支出管理
人事・人材管理 (HCM)
顧客管理 (CRM)

8
1. SAP Build Appsとは（？）
2. SAP AppGyverでできたこと/できなかったこと
3. SAP Build Appsでどうなったの
4. まとめ
ここが変わった！
SAP AppGyver → SAP Build Apps

9
SAP Build Appは2022年11月に「SAP AppGyver」から改名されたノーコードツール
ドラッグ＆ドロップによる直感的な操作での画面開発に加え、SAP Build Appsでは新機能として
以下が追加！
・バックエンドのデータモデル開発
・Cloud Functionsという関数機能開発
SAP Build Appsとは
具体的にどのレベルの開発ができるの？
▼ドラッグ＆ドロップでの画面開発 ▼バックエンドのデータモデル開発 ▼バックエンドの関数機能開発

10
ハッカソンの時に「SAP AppGyver」で作った
アプリを
「SAP Build Apps」で作り直すとどうなるか
試してみた！
「SAP Build Apps」になって変わったことは…?
本日の内容

11
1. SAP Build Appsとは
2. SAP AppGyverでできたこと/できなかったこと
3. SAP Build Appsでどうなったの
4. まとめ
ここが変わった！
SAP AppGyver → SAP Build Apps

12
ハッカソンの時につくったアプリケーション
食品流通業における在庫転送のサポートアプリケーション。指示者機能と作業者機能に分かれる。
賞味期限に合わせた“年月日”の管理単位を“年月”単位にまるめるロジックとテーブルをバックエンド
で持つ。
ログイン画
面
ピッキング指示者
ピッキング作業者
ホーム画面
ホーム画面
検索 入力 指示 確認
開始 移動 実施 確認
ユーザによって画面制御
ワークフロー画面

13
デモ動画
© 2022 Fujitsu Limited

14
ハッカソンの時にできなかった or 「工夫」でなんとかしてたこと
ログイン画
面
ピッキング指示者
ピッキング作業者
ホーム画面
ホーム画面
検索 入力 指示 確認
開始 移動 実施 確認
ユーザによって画面制御
ユーザ認証 バックエンドの開発 Workflowとの連携

15
ハッカソンの時にできなかった or 「工夫」でなんとかしてたこと
ログイン画
面
ピッキング指示者
ピッキング作業者
ホーム画面
ホーム画面
検索 入力 指示 確認
開始 移動 実施 確認
ユーザによって画面制御
ユーザ認証 バックエンドの開発 Workflowとの連携

16
Cloud Application Programing Model（CAP）で実装。やっていたことは以下の4つ。
ハッカソン当時のバックエンド
1. 基幹システム（ES5）からのデータ取得 2. テーブルに親子関係を持たせて管理
3. データ登録/更新時の関連テーブルデータの自動
更新
4. テーブルの項目を直接更新できないように関数を作
る
ES5
AppGyver
CAP(node.js) ES5
年月日 年月
子テーブルの
ID
ロ
ジ
ッ
ク
POST
子テーブル 親テーブル
UPDATE
在庫数 -10
POST 関
数
商品名:AAA
在庫数:100→90
商品名:AAA
在庫数:90
ハッカソン当時はDestinationサービスが使えなかったため
直接基幹システムからデータを取れなかった
“年月日”を“年月”にまるめて管理するため、
複数の在庫データを紐づけた親テーブルを作りたい
“年月日”の在庫データを登録した際に“年月”にまるめるロジッ
クと
テーブルの項目を自動的に更新するロジックを組みたい
在庫数の更新時にテーブルの他の項目を更新できないように制
限したい

17
1. SAP Build Appsとは
2. SAP AppGyverでできたこと/できなかったこと
3. SAP Build Appsでどうなったの
4. まとめ
ここが変わった！
SAP AppGyver → SAP Build Apps

18
Demo

19
1.基幹システム（ES5）からのデータ取得
😄Destinationサービスを利用して直接基幹システムからデータを取得可能
😥Visual Cloud Functions内で基幹システムからデータを取ることはできない
Build Appsでできるようになったバックエンド
😭 😥 🙂 😊 😄
いいね！
ざんねん
ES5
SAP Build Apps
Frontend
ES5
SAP Build Apps
Backend

20
Build Appsでできるようになったバックエンド
2.テーブルに親子関係を持たせて管理したい
😥親子関係は持たせられない。
🙂工夫でそれっぽい実装は可能。
子テーブ
ル
親テーブ
ル
リスト型の項目で
複数の子テーブル
の
IDを持てる
親テーブルを一意
に
特定する項目
😭 😥 🙂 😊 😄
いいね！
ざんねん

21
3.データ登録時の関連テーブルの自動更新
😊子テーブルへ登録と親テーブルへの登録/更新を同時に行う関数は実装可能
😭ただし条件分岐ができないので画面側で工夫が必要
Build Appsでできるようになったバックエンド
既に親テーブルに
レコードが存在するか
フロント側で条件分岐
更新する親テーブ
ルの
レコードを取得
子テーブルと
親テーブルへの登録
子テーブルへの登録と
親テーブルのへの更新
😭 😥 🙂 😊 😄
いいね！
ざんねん

22
4. テーブルの項目を直接更新できないように関数をつくりたい
😄在庫数のみ更新する関数は作成可能
😥エディタ部分がちょっとわかりづらいかも
Build Appsでできるようになったバックエンド
【 Input 】
レコードID
移動在庫数
IDをもとに
更新するレコード
を取得
【 Output 】
更新された
レコード
取得した情報に
対して計算して
レコードを更新
😭 😥 🙂 😊 😄
いいね！
ざんねん

23
1. SAP Build Appsとは
2. SAP AppGyverでできたこと/できなかったこと
3. SAP Build Appsでどうなったの
4. まとめ
ここが変わった！
SAP AppGyver → SAP Build Apps

24
Visual Cloud Functionsを使ってみた感想
• 今回の検証はTutorial含めて10時間ほどでできました。ちょっとTutorialが難しいかも。。。
• 市民開発者だけで作るのは難しい… バックエンド機能はIT担当者が作る感じになりそう。
• 基幹システムのデータに手を加えず +α のデータを持っておく選択肢は今までCAP + HANA Cloudくら
い。
気軽に作れる選択肢が増えたのはうれしい。
• 細かいところに手が届くのはCAP、ざっくり機能を早く作れるのはVisual Cloud Functionsという住み分
け
その他機能の課題
• BTP認証がモバイルアプリではまだ使えない。モバイルアプリを簡単に作れるところも魅力の一つなので
がんばってほしいところ
まとめ

25
• Sandbox環境もあるのでみんなでいろいろ試してみましょう！
• Tutorialもでてます！
SAP Tutorials for Developers, Mission[Use SAP Build Apps to Add Social Media Features to a Business
App]
https://developers.sap.com/mission.sap-build-apps-social-media.html
メッセージ：みんなでSAP Build Appsつかってみましょう！

Thank you

27
引用、参考、参照、転載の一覧
参考 SAP TechEd 2022, Accelerate Development with Visual Programming in SAP Build Apps [AD111]
https://go3.events.sap.com/sapteched/hybrid/2022/reg/flow/sap/saptech2022/sapteched2022catalog/page/catalog/session/166119
8036730001E61B
参照・転載 SAP Tutorials for Developers, Mission[Use SAP Build Apps to Add Social Media Features to a Business App]
https://developers.sap.com/mission.sap-build-apps-social-media.html
参照 SAP Tutorials for Developers, Mission[Create Sales Order Workflow with SAP Build]
https://developers.sap.com/mission.sap-build-apps-create-trigger-process.html
転載 SAP Community Announcing the SAP Build Apps Sandbox
https://groups.community.sap.com/t5/sap-builders-blog-posts/announcing-the-sap-build-apps-sandbox/ba-
p/128821