CData Software Blog

クラウド連携のCData Software の技術ブログです。

ノーコードアプリ開発ツール SAP AppGyver で Salesforce に接続できるアプリを作成:CData Connect

f:id:sugimomoto:20220124162700p:plain

こんにちは。CData Software Japan リードエンジニアの杉本です。

去年SAPに買収され、SAPサービスの一部となったAppGyver、ローコード・ノーコード界隈の方ならおそらくご存知の方も多いのかなと思います。

news.sap.com

今回の記事ではこのSAP AppGyver と CData Connect を連携させ・Salesforce 連携のアプリを作成する方法を紹介したいと思います

SAP AppGyver とは?

SAP AppGyver は コーディングスキルを持たないユーザーでもWeb・モバイルアプリケーションを構築できるノーコード開発プラットフォームです。

www.appgyver.com

f:id:sugimomoto:20220124161513p:plain

以下の動画で紹介されているようにドラッグアンドドロップベースで各種UIコンポーネントを配置して、手軽にアプリ開発が行えます。

vimeo.com

また、SAP AppGyver で特徴的だなと感じるのは、REST API への統合とそのLogicを記述する機能です。

docs.appgyver.com

docs.appgyver.com

GET/POST/PUT/DELETEといったREST APIベースの連携がシンプルに記述できる機能を持っているため、既存のAPIとの統合がシンプルに実現できるようになっており

f:id:sugimomoto:20220124161543p:plain

また、プログラミングが得意ではないユーザーでも以下のようなフローベースのLogic記述ができることで、REST APIから取得したデータもシンプルにUIに関連付けることができるようになっています。

f:id:sugimomoto:20220124161549p:plain

今回はこのREST APIとの統合機能とLoci処理を使って、外部のクラウドサービスとの連携を実施していきます。

SAP AppGyver から Salesforce API に接続する際の課題

今回試す内容は、SAP AppGyver から Salesforce に接続する方法です。

Salesforce でも REST APIが提供されているので、一見連携しやすいように見えますが、SOQLを発行するインターフェースがベースになっていたりと、SAP AppGyverから直接クエリするにはインターフェース処理が難しい部分が実際問題として存在します。

developer.salesforce.com

そこで今回の記事ではこのボトルネックを「CData Connect」というサービスを仲介することで解消します。

www.cdata.com

f:id:sugimomoto:20210324151454p:plain

CData Connect は、SaaS ベースで提供されるデータハブサービスです。

Salesforce、NetSuite、Dynamics、Marketo など多様なSaaS にBI、アナリティクス、iPaaS、NoCode/LowCode 開発プラットフォームからアクセスするための仮想エンドポイントを生成します。

連携方法が異なるSaaSMySQLSQL Server、OData の3種類のインターフェースに仮想化することで、データ連携をシンプルに実現します。

"SQL as a Service" といっていいかもしれません。

さらに SAP AppGyver ではREST ful API連携の一種としてODataプロトコルをサポートしているので、CData Connectを挟むことでよりシンプルに連携実施できます。

f:id:sugimomoto:20220124161922p:plain

とは言っても、説明だけではイメージできない部分もあると思うので、実際にアプリを作成してみましょう。

シナリオ

今回作成するアプリケーションは Salesforce から取得したデータを表示する一覧画面です。

f:id:sugimomoto:20220124161927p:plain

対象となるSalesforceのデータは「Account(取引先)」です。ここからデータを取得してアプリで一覧を表示します。

手順

CData Connect 環境の構成手順

まず CData Connect の環境を準備しましょう。

CData Connect (旧CloudHub) のページからトライアルアカウントを取得します。

CData Connect はSaaS ですので、アカウントを取得したらインストールやホスティングなどなく、ブラウザからログインすることですぐに使用開始です。

早速ブラウザからCData Connect にログインします。「DATABASE」タブから仮想データベースを設定していきます。まずは接続するデータソースであるSalesforce のアイコンをクリックします。

f:id:sugimomoto:20210806094113p:plain

データソース接続画面が開くので、データソース毎の認証情報を入力します。Salesforce の場合はUser、Password、Security Token を入力することでデータにアクセスすることができます。

f:id:sugimomoto:20210806094119p:plain

今回はOData エンドポイントとして データを公開しますので、「ODATA」 タブから公開するデータを選択します。先ほど接続時に作成した Salesforce を公開するので、データベースとして選択します。

f:id:sugimomoto:20210806094124p:plain

f:id:sugimomoto:20210806094130p:plain

Salesforce のオブジェクトがテーブルとして一覧で表示されますので、利用するにテーブルチェックを入れて選択します。

f:id:sugimomoto:20210806094135p:plain

テーブル(アプリ)を選択したら、次はテーブルに含まれるカラム(フィールド)をどこまで公開するかをチェックします。またOData でアクセスできる処理をGET、POST、PUT、DELETE にチェックを入れることで指定します。

また、必要となるカラムを予め絞っておきましょう。

f:id:sugimomoto:20210806094142p:plain

API」タブでOData エンドポイントが生成されていることを確認します。CData Connect がOData エンドポイントのドキュメントを自動生成してくれます。

f:id:sugimomoto:20210806094147p:plain

次に「ENDPOINTS」タブで、このデータをどのインターフェースのエンドポイントして公開するかを選択します。デフォルトで、OData、MySQL wire protocol、TDS(SQL Server) wire Protocol がすべて有効になっています。

必要があればアクセスを許可する信頼されたIP アドレスを指定することも可能です。

f:id:sugimomoto:20210806094153p:plain

最後に公開したデータにアクセスできるユーザーとトークンを作成します。「USERS」タブからユーザーを作成するとトークンが生成されます。

f:id:sugimomoto:20210806094158p:plain

もしユーザーを新しく追加した場合は「+Define Permissions」で対象のデータソースにアクセス権を付与するのを忘れないようにしましょう。

f:id:sugimomoto:20210806094204p:plain

これでCData Connect でSalesforce データを扱う準備ができました。

SAP AppGyver でアプリを作成する

CData Connect 側の準備が完了したら、早速SAP AppGyver側でアプリ開発を開始します。

「CREATE NEW」をクリックし

f:id:sugimomoto:20220124161937p:plain

任意の名前でアプリを作成します。

f:id:sugimomoto:20220124161942p:plain

これで以下のようにアプリの開発画面が立ち上がります。

f:id:sugimomoto:20220124161946p:plain

OData Integration の登録

アプリを作成したら、まず SAP AppGyver アプリでAPI連携処理を行うための設定を追加します。

「DATA」タブから「OData Integration」を追加しましょう。

f:id:sugimomoto:20220124161952p:plain

OData Integrationでは以下のような画面で設定を行います。

「Authentication Type」は「Basic authentication」を選択し、先程作成したCData Connect UserのユーザーIDとTokenをそれぞれUsername・Passwordに入力します。

Base API URLは CData ConnectのAPIタブにある「Base URL」で確認できます。これらを設定して「Verify URL」のボタンをクリックしましょう。

f:id:sugimomoto:20220124161957p:plain

すると自動的にCData Connectに登録されているAPIデータモデルを読み取って、SAP AppGyverが扱いやすい形で「list」「retreve」「create」「update」「delete」処理が生成されます。

f:id:sugimomoto:20220124162001p:plain

通常のREST APIだと一つ一つ仕様を読み取って、登録していかなければいけないのですが、ODataインターフェースに統一してくれるCData Connectを挟むことで、APIの仕様を意識せず、SAP AppGyverで扱えるようになります。

変数の定義

それでは作成した OData Integration 機能を使ってアプリを作っていきましょう。

とはいえ画面を作成する前に、API経由で取得したデータを格納する変数を登録しておきましょう。

画面デザインページから「VARIABLES」に移動します。

f:id:sugimomoto:20220124162006p:plain

変数を作成する時はJSONをイメージするとやりやすいです。

今回はAccoutsというList形式の変数を作成し、その中にObject構造で「Id」「AccountNumber」「Name」「Phone」「Website」という変数をそれぞれ持ちます。

{
    "Accounts": [
        {
            "Id": "0017F00000iPW5fQAG",
            "AccountNumber": "CC978213",
            "Name": "GenePoint",
            "Phone": "(650) 867-3450",
            "Website": "www.genepoint.com"
        },
        {
            "Id": "0017F00000iPW5dQAG",
            "AccountNumber": "CD355119-A",
            "Name": "United Oil & Gas, UK",
            "Phone": "+44 191 4956203",
            "Website": "http://www.uos.com"
        },
        {
            "Id": "0017F00000iPW5eQAG",
            "AccountNumber": "CD355120-B",
            "Name": "United Oil & Gas, Singapore",
            "Phone": "(650) 450-8810",
            "Website": "http://www.uos.com"
        }
    ]
}

SAP AppGyverでは以下のように定義しています。

f:id:sugimomoto:20220124162013p:plain

一覧画面の構成

変数を定義したら一覧画面を構成しましょう。

今回はCard形式の画面を作成しますが、カードを繰り返し表示するためにまず「Container」を配置します。

f:id:sugimomoto:20220124162019p:plain

このContainerの中にCardを配置することで、カードが繰り返し表示される画面が構成できます。

f:id:sugimomoto:20220124162024p:plain

Cardを配置後、Propertiesタブから「Repeat with」で先程作成した変数をバインドします。

f:id:sugimomoto:20220124162029p:plain

「Data and Vaiables」を選択し

f:id:sugimomoto:20220124162034p:plain

「Page variable」を選択しましょう。

f:id:sugimomoto:20220124162038p:plain

先程作成しておいたListの変数をバインドします。

f:id:sugimomoto:20220124162043p:plain

Listの変数をバインドすると、CardにあるTitleやContentにもバインドできるようになります。

f:id:sugimomoto:20220124162047p:plain

例えばTitleを選んで、「Data item in repeat」をクリックします。

f:id:sugimomoto:20220124162053p:plain

すると、List変数の繰り返し要素に存在している各変数を選択できます。

f:id:sugimomoto:20220124162058p:plain

同じような手順で「Content」も紐付けましょう。

f:id:sugimomoto:20220124162103p:plain

これで一覧画面の作成は完了です。

Logicの記述

最後にAPIから取得したデータを変数に格納するLogicを記述していきます。

画面下にあるLogicタブを開いて、ページを開いた時のLogicにAPIからデータを取得する「Get record collection」の処理を追加します。

f:id:sugimomoto:20220124162108p:plain

「Get record collection」の処理には認証情報を設定する必要があるので「Authentication」をクリックします。

f:id:sugimomoto:20220124162113p:plain

今回は固定値として設定するので「Obejct with properties」を選択し

f:id:sugimomoto:20220124162118p:plain

「Authentication Type」から「basic」を選択した上で、CData ConnectのIDとAPI Tokenをそれぞれ設定して保存します。

f:id:sugimomoto:20220124162122p:plain

次に取得したレコードを変数に格納します。「Set page variable」をLogicに配置しましょう。

f:id:sugimomoto:20220124162127p:plain

「Set page variable」を配置したら一旦Logicのコンポーネントをそれぞれつなげます。これで値を「Get record collection」から引き継げるようになります。

f:id:sugimomoto:20220124162131p:plain

それでは「Set page variable」の値の設定を行いましょう。「Assigned value」のボタンをクリックし

f:id:sugimomoto:20220124162138p:plain

「Mapping」を選択します。

f:id:sugimomoto:20220124162143p:plain

デフォルトでは以下のような画面になっているので「no value」のボタンをクリックし

f:id:sugimomoto:20220124162148p:plain

「Output value of another node」をクリック

f:id:sugimomoto:20220124162152p:plain

前のLogicから引き継いだ「Get record collection」を選択します。

f:id:sugimomoto:20220124162157p:plain

これでMappingが行えるようになります。

f:id:sugimomoto:20220124162201p:plain

ドラッグアンドドロップで取得したデータと変数をマッピングしましょう。ここで予め変数をListとObject形式で構成していたことが活きてきます。

f:id:sugimomoto:20220124162206p:plain

これでLogicの作成は完了です。

実行してみる

それでは作成したアプリを実際に動かしてみましょう。「LLAUNCH」タブから「Open App Preview Portal」をクリックします。

f:id:sugimomoto:20220124162211p:plain

以下のようにアプリ一覧画面が立ち上がるので「CDataSample」をクリックします。

f:id:sugimomoto:20220124162216p:plain

すると、SalesforceからCData Connect経由でデータを取得してきて、一覧表示を行った画面が表示されます。

このようにSalesforce APIの仕様の難しさを意識することなく、SAP AppGyverとCData Connectで連携アプリを作成することができます。

f:id:sugimomoto:20220124162220p:plain

作成画面の作り方について

同じような形でデータを登録するための作成画面も構成できます。簡単に作例を紹介します。

f:id:sugimomoto:20220124162226p:plain

作成画面では「Create Record」の処理をLogicで利用します。

f:id:sugimomoto:20220124162232p:plain

変数をマッピングすることで登録できるようになります。

f:id:sugimomoto:20220124162236p:plain

おわりに

今回はSalesforceを接続先のリソースとしましたが、外にも様々なリソースを汎用的なREST ful APIのインターフェースとして扱うことができます。

www.cdata.com

f:id:sugimomoto:20210324152403p:plain

ちなみに、MySQLSQL Server などとAPI連携したい場合は、API Server という製品を利用することもできます。

www.cdata.com

SAP AppGyverと併せて、是非色々と活用してみてください。