CData Software Blog

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

ローコードアプリ開発プラットフォーム OutSystems で Salesforce 連携アプリを作成:CData Connect

f:id:sugimomoto:20210907145843p:plain

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

今回はローコードアプリ開発ツールでも古参かつ有名な OutSystems と外部のAPIを連携する方法を紹介したいと思います。

OutSystems とは

OutSystemsは、アプリケーションをUI上で開発できるローコード開発プラットフォームです。

www.outsystems.com

f:id:sugimomoto:20210907145029p:plain

Webアプリやタブレット・モバイルアプリを簡単に作成できるようになっていて

ドラッグ・アンド・ドロップでUIコンポーネントを配置したり、ロジック部分をフローを描くような形で構成し、UIから簡単に呼び出すことができるようになっています。

f:id:sugimomoto:20210907145040p:plain

また、外部のRESTやSOAP APIを呼び出す機能も備わっており、これにより外部サービスとの連携もスムーズに実現できるようになっています。

success.outsystems.com

f:id:sugimomoto:20210907145049p:plain

今回はこの機能を使って、外部のAPIである Salesforce と連携したアプリの作成を行ってみたいと思います。

OutSystems から 各種 API に接続する際の課題

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

Salesforce でも REST APIが提供されているので、一見連携しやすいように見えますが、SOQLを発行するインターフェースがベースになっていたりと、OutSystems から直接クエリするにはなかなか大変だったりします。

developer.salesforce.com

また、今回は例としてSalesforceを挙げていますが、例えば Kintone の REST API や、 Marketo の REST API もかなりインターフェース仕様がバラバラで単純にREST APIと一括にしてアクセスすることは難しいものになっています。

そこで今回の記事ではこのボトルネックを「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" といっていいかもしれません。

さらに自動的に Metadata のエンドポイント、Open API の Spec も生成できるため、それらの仕様に対応しているサービスはよりスムーズな連携を行えます。

OutSystems ではOpen API の Spec を取り込むことで API リクエストのための Logic を自動生成し、REST Ful な APIに対応しやすい製品になっています。そこで、今回 CData Connect を中継させることでSalesforceAPI を REST ful API に則ったプロトコルであるODataに整え、さらにOpen API Spec を生成・OutSystemsに取り込むことで、スムーズに接続できるようにしてしまいます。

f:id:sugimomoto:20210907145056p:plain

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

シナリオ

今回作成するアプリケーションは Salesforce から取得したデータを表示する一覧画面、そしてそのSalesforceに対してデータを登録するフォーム画面です。

f:id:sugimomoto:20210907145101p:plain

f:id:sugimomoto:20210907145107p: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

併せて OutSystemsにAPIリクエストの仕様を取り込むために「API」タブにある「Open API」のファイルを以下から保存しておきましょう。

f:id:sugimomoto:20210907145115p: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 データを扱う準備ができました。

OutSystems でアプリを準備

それではOutSystems側の準備を進めていきます。

まず、OutSystemsのアプリを立ち上げて、「New Application」をクリックし、新しいアプリの作成を進めます。

f:id:sugimomoto:20210907145121p:plain

OutSystems はテンプレートからアプリを作成することもできますが、今回はスクラッチで作業を進めます。

「From scratch」をクリックしてください。

f:id:sugimomoto:20210907145126p:plain

作成するアプリの種類は「Reactive Web App」「Tablet App」「Phone App」と選べます。今回は「Reactive Web App」で進めます。

f:id:sugimomoto:20210907145131p:plain

任意の名前を付けて「CREATE APP」を選択しましょう。

f:id:sugimomoto:20210907145136p:plain

あとは「Modules」の画面で「CREATE MODULE」をクリックして、アプリを作成する準備が完了します。

f:id:sugimomoto:20210907145139p:plain

CData Connect の連携 Logic を取り込む

アプリを作成する準備が整ったら CData Connect を経由して Salesforce に接続するための Logic 部分をOutSystems に準備します。

「Logic」タブから「Integrations」→「REST」を右クリックし「Consume REST API…」を選択します。ここから外部のREST APIのメソッドをコールする処理・Logic を登録できます。

f:id:sugimomoto:20210907145145p:plain

今回は先程取得したOpen API Specの情報を元に Logic を登録するので「ADD MULTIPLE METHODS」を選択し

f:id:sugimomoto:20210907145149p:plain

先程保存したOASのファイルを「UPLOAD FILE」から選んで「ADD METHODS」をクリックして登録します。

f:id:sugimomoto:20210907145153p:plain

すると以下のようにOASのファイルを元に、メソッド一覧が出てくるので任意のメソッドを選択して「FINISH」をクリックします。

f:id:sugimomoto:20210907145157p:plain

これで CData Connect へのLogicを登録できました。

f:id:sugimomoto:20210907145203p:plain

Logic の登録が完了すると、併せて Data のタブの Structures にデータモデルが登録されます。

f:id:sugimomoto:20210907145233p:plain

なお、これだけでは認証が通らないので、先程 Cdata Connect で登録したユーザーのIDとTokenをBasic Authentication の Username と Password に登録しましょう。

f:id:sugimomoto:20210907145238p:plain

これで CData Connect に連携するための事前準備が完了しました。

一覧画面を作成

それでは実際に CData Connect と連携した画面を作成していきましょう。

まずは Salesforce のデータを一覧表示する画面を作成します。

「Interface」タブに移動して「Add Screen」をクリックします。

f:id:sugimomoto:20210907145248p:plain

Screenのテンプレートは「Empty」で進めます。

f:id:sugimomoto:20210907145253p:plain

Screenを登録したら、登録した対象のScreenから右クリックで「Fetch Data from Other Source」を選択します。

これを先程登録したCData Connect の Logic と紐付けて、画面上からAPIをコールしてデータを表示します。

f:id:sugimomoto:20210907145257p:plain

まず、利用するData Type を関連付けましょう。

Out1のパラメータを選択して「Data Type」から CData Connect のAPIから生成されている Structures にあった一覧画面を取得するメソッドのレスポンスにあたるデータモデルを関連付けます。

f:id:sugimomoto:20210907145301p:plain

そして、「Fetch Data from Other Source」のフローにCdata Connect から全データを取得するメソッド「getAllSalesforce_Account」をドラッグアンドドロップで配置します。

f:id:sugimomoto:20210907145305p:plain

あとは、取得したレスポンスを「Assign」機能を使って、Out1のパラメータに格納します。

f:id:sugimomoto:20210907145310p:plain

これでデータ取得周りの処理が完成です。

あとはUI部品として「Table」をScreen上に配置し

f:id:sugimomoto:20210907145315p:plain

Out1で定義したレスポンスデータモデルをドラッグ・アンド・ドロップで配置します。

f:id:sugimomoto:20210907145320p:plain

「Sort Attribute」にある「value.」の部分は不要なので消してしまいましょう。

f:id:sugimomoto:20210907145325p:plain

これだけで、CData Connectと連携した画面が作成できました。

それでは画面中央上にある「Publish」ボタンをクリックして、動かしてみましょう。

f:id:sugimomoto:20210907145331p:plain

正常に起動すると、以下のような画面がブラウザで表示するので、登録したアカウントでログインします。

f:id:sugimomoto:20210907145337p:plain

すると、一覧画面が表示されて、以下のようにCData Connect経由で取得したSalesforceのデータがきれいに表示されました。

f:id:sugimomoto:20210907145342p:plain

このように、CData Connect を経由することで、API側の複雑な仕様を意識せずにAPI連携をした画面を開発できます。

登録画面を作成

次は登録画面を作成してみましょう。

まず新しく「Empty」のスクリーンを追加します。

f:id:sugimomoto:20210907145347p:plain

スクリーンを作成したら、まず Structures を紐付けるために作成したScreen を右クリックして「Add Local Variable」を選択します。

f:id:sugimomoto:20210907145351p:plain

任意のLocal Variable の名前を指定して、「Data Type」からデータ登録などを行うためのモデルにあたる「Salesforce_Account」を紐付けます。

f:id:sugimomoto:20210907145355p:plain

次に画面上に「Form」を配置して

f:id:sugimomoto:20210907145359p:plain

先程登録したLocal Variable に紐付けたデータモデルの必要な項目をドラッグ・アンド・ドロップで配置します。

以下のようにサクッと画面が作成できていいですね。

f:id:sugimomoto:20210907145405p:plain

最後にSaveボタンからCData Connect のメソッドを呼び出す処理を作成しましょう。「Events」の「On Click」で「New Client Action」を選択します。

f:id:sugimomoto:20210907145411p:plain

フロー画面が表示されたら CData Connect の「createSalesforce_Account」をドラッグ・アンド・ドロップで以下のように配置し、「Request」で予め作成しておいた Local Variable を関連付けます。

f:id:sugimomoto:20210907145416p:plain

あとは画面遷移の処理を入れて、保存が完了したあとに一覧画面に戻るようにしてあげればOKです。

f:id:sugimomoto:20210907145423p:plain

併せて、一覧画面にもボタンを配置して、データ登録画面に移動するようにしておきましょう。

f:id:sugimomoto:20210907145429p:plain

それでは実際に動きを見てみましょう。

再度Publishを行って、画面を表示し「Create」ボタンをクリックします。

f:id:sugimomoto:20210907145434p:plain

以下のように登録フォームが表示されるので、任意の値を入力して「Save」をクリックしてみると

f:id:sugimomoto:20210907145438p:plain

一覧画面に移動し、無事データが登録されることが確認できました!

f:id:sugimomoto:20210907145444p:plain

Salesforce の画面上でも正常に登録されたデータが確認できます。

f:id:sugimomoto:20210907145449p:plain

おわりに

同じような手順でデータを更新したり、削除したりも実施できます。

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

www.cdata.com

f:id:sugimomoto:20210324152403p:plain

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

www.cdata.com

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