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

by 杉本和也 | 2021年08月06日

f:id:sugimomoto:20210806095919p:plain

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

今回は最近資金調達で話題になったノーコードアプリ開発サービスの Adalo と CData Connect を連携させ・Salesforce 連携のアプリを作成する方法を紹介したいと思います。

www.adalo.com

Adalo とは?

Adalo は ノーコードでスマホやWebベースのアプリを構築できるクラウドサービスです。

www.adalo.com

f:id:sugimomoto:20210806094035p:plain

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

https://global-uploads.webflow.com/5d123a0e13543973a9665271/5d883c4d4a6557de4263df2f_Wander%20Product%20Demo.gif

また、Adalo では「Collection」という形でデータ構造を持ち、アプリのデータを管理することができるのですが、この「Collection」を外部のAPIとシームレスに連携した形で利用することができる機能があります。

それが、以下のリンクにある「External Collections with APIs」という機能です。

help.adalo.com

この機能はREST ful なAPIの連携に特化した機能となっていて、対象のエンドポイントを指定すると、自動的にREST ful APIにマッピングされたアクションを構成してくれます。

f:id:sugimomoto:20210806094044p:plain

これによりAdaloの各種UIコンポーネントから扱いやすいAPI連携を実現できます。

今回はこのExternal Collections with APIs の機能を使って、外部のクラウドサービスとの連携を実施しています。

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

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

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

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 開発プラットフォームからアクセスするための仮想エンドポイントを生成します。

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

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

Adalo ではREST ful なAPIには接続しやすいため、このCData Connect を中継させることでSalesforce の APIを REST ful API に則ったプロトコルであるODataに変換して、接続できるようにしてしまいます。

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

シナリオ

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

f:id:sugimomoto:20210806094059p:plain

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

Adalo でアプリを作成する

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

「CREATE NEW APP」をクリックし

f:id:sugimomoto:20210806094209p:plain

今回は「Desktop Web App」を作成します。

f:id:sugimomoto:20210806094215p:plain

templateを最初に選ぶことができますが、今回は検証用なので何も無い「Blank」で作成しました。

f:id:sugimomoto:20210806094221p:plain

最後にアプリ名とカラーリング設定を選んで、アプリの準備は完了です。

f:id:sugimomoto:20210806094226p:plain

External Collections の登録

アプリを作成したら、まず Adalo アプリ内でデータを扱うための定義である「Collection」を登録します。

Collection は Adalo内部の独自DBのような「Database Collections」と、外部のAPIに対してシームレスにアクセスすることが可能な「External Collections」があります。

今回は外部のAPIに対してアクセスを行うので「External Collections」で登録します。

f:id:sugimomoto:20210806094234p:plain

External Collections の登録画面では最初にコレクション名とAPI のベースとなるURLエンドポイントを指定します。

今回は Collection 名を「Account」、API Base URLに先程CData Connect で登録した Salesforce Account に接続できるODataのエンドポイントである「https://www.cdatacloud.net/XXX/api.rsc/Salesforce_Account/」を指定します。アドレスは利用している環境に併せて切り替えてください。

併せて認証情報として Header に「x-cdata-authtoken」の名前でCData Connect ユーザー登録時に生成されているTokenを指定します。

f:id:sugimomoto:20210806094242p:plain

続いてAdaloから実行されるそれぞれのリクエストの関連付けを行います。

通常のAPIであれば様々なチューニングが必要となる箇所ですが、CData Connectではほぼデフォルトの設定のままで進められます。

一点だけ設定が必要な箇所として、CData Connectからのレスポンスをレコード単位で識別するために「Get All」の設定にある「Results Key」に「value」を登録しておくことが挙げられます。

これを設定したら「Next」をクリックしましょう。

f:id:sugimomoto:20210806094248p:plain

最後にAPIの「RUN TEST」を行います。

f:id:sugimomoto:20210806094253p:plain

「RUN TEST」をクリック後、最終的に以下のようにメッセージとレスポンスが表示されれば、External Collectionsの作成は完了です。

f:id:sugimomoto:20210806094258p:plain

一覧画面の作成

それでは作成した External Collections を使ってアプリを作っていきましょう。

まず一覧画面を表示するためにAdaloの画面右上の「+」ボタンをクリックして、「Simple List」をドラッグアンドドロップで画面に配置します。

f:id:sugimomoto:20210806094304p:plain

以下のように配置できたら「What is this a list of?」で先程作成したExternal Collectionsの定義を紐付けます。

f:id:sugimomoto:20210806094309p:plain

併せて「Title」と「Subtile」を取得するデータ項目に紐付けましょう。今回はAccountに含まれるNameをタイトルに指定してみました。

f:id:sugimomoto:20210806094314p:plain

入力フォームの追加

続いて入力フォームを作成します。

まずは入力フォームのページを追加しましょう。画面左上の「+」ボタンをクリックして「ADD SCREEN」から「Form」を追加します。

f:id:sugimomoto:20210806094320p:plain

以下のようにフォームが簡単に追加できます。

f:id:sugimomoto:20210806094325p:plain

ページを作成したら「Form」をクリックして「Which data collection」から、作成しておいたExternal Collectionsを紐付けます。

f:id:sugimomoto:20210806094331p:plain

これだけで基本的には動作しますが、Salesforceの場合Idが自動生成なので、作成用フォームからはIdを取り下げておきたいと思います。

Fieldsから「Id」の項目にあるゴミ箱ボタンをクリックすると、項目が削除できます。

f:id:sugimomoto:20210806094336p:plain

あとは先程の一覧画面にボタンを配置して、フォームに移動するアクションを登録しておけば、アプリの完成です。

f:id:sugimomoto:20210806094341p:plain

プレビューモードで動作確認

それでは作成したアプリを実際に動かしてみましょう。

画面右上にある「PREVIEW」ボタンで実際にアプリを動かしてみることができます。

f:id:sugimomoto:20210806094347p:plain

プレビューでは最初にSIGN UPが必要になるので、適当なユーザーで登録しましょう。

登録後、一覧画面に移動してみると、以下のようにSalesforceのデータを取得できていました。

f:id:sugimomoto:20210806094353p:plain

Createボタンをクリックすると、データの登録画面に移動して、実際に値が入力できます。

入力後、「CREATE ACCOUNT」をクリックしてみましょう。

f:id:sugimomoto:20210806094400p:plain

先程の一覧画面に移動して、暫く経つと登録したデータが一覧画面でも表示されます。

f:id:sugimomoto:20210806094406p:plain

とても簡単に Salesforce との連携アプリを作成することができました。

おわりに

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

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

www.cdata.com

f:id:sugimomoto:20210324152403p:plain

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

www.cdata.com

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

関連コンテンツ

トライアル・お問い合わせ

30日間無償トライアルで、CData のリアルタイムデータ連携をフルにお試しいただけます。記事や製品についてのご質問があればお気軽にお問い合わせください。