ローコード開発・運用プラットフォームMendix でActiveCampaign に連携したアプリを作成する

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

Mendix はシーメンス社が提供するローコード開発・運用プラットフォームです。
この記事では、Mendix に備わっているJDBC インターフェースと CData JDBC Driver for ActiveCampaign を組み合わせることによりMendix でActiveCampaign データを活用したアプリを作成する方法を紹介します。

Mendix 側の環境準備

今回は上記で紹介している Mendix Studio Pro を用いてアプリを開発します。そのため事前にMendix Studio Pro をインストールしておきます。

CData JDBC Driver for ActiveCampaign のインストール

まずCData JDBC Driver for ActiveCampaign をMendix と同じマシンにインストールします。

1. 以下のパスにJDBC Driver がインストールされます。
   C:\Program Files\CData\CData JDBC Driver for ActiveCampaign 20xxJ\lib\cdata.jdbc.activecampaign.jar
   

アプリの作成

それではアプリの作成を始めていきます。まず、Database Connector が利用できる状態のアプリを作成しましょう。

1. Mendix Studio Pro を立ち上げて「Create New App」をクリックします。
2. 「Blank Web App」で今回は作成してみます。
3. 「Use this starting point」をクリックして進めます。
4. 任意のApp name を指定して作成しましょう。また、後ほどJDBC Driver を配置するため、「Disk location」の情報を控えておきます。
5. これでまっさらなアプリが作成できました。

アプリにDatabase Connector を追加

続いて作成したアプリにDatabase Connector のモジュールを追加します。

1. コンテキストメニューから「Import module package...」をクリックし
2. ここからDatabase Connector がダウンロードできるので、ダウンロードされた「mpk」ファイルをインポートします。
3. 「mpk」ファイルを選んだら「Import」をクリックします。
4. これでアプリの画面にDatabase Connector が表示されればOKです。

Mendix Studio Pro にJDBC Driver を追加

あわせてこのDatabase Connector でCData JDBC ドライバを利用できるようにするために、JDBC Driver の jar ファイルをプロジェクトに配置します。

1. 事前に控えておいた Medix のプロジェクトフォルダに「userlib」というフォルダがあるので、「cdata.jdbc.activecampaign.jar」と「cdata.jdbc.activecampaign.lic」の2つのファイルを配置します。
2. これで、Database Connector でCData JDBC ドライバが使えるようになります。

データモデルを作成

それでは実際にアプリを作り込んでいきましょう。Database Connector からデータを読み込ませて一覧画面に表示するためには、その読み込ませるデータのデータモデルをあらかじめ定義しておく必要があるので、作成していきます。

1. 今回は「MyFirstModule」の「Domain model」にEntity を追加します。
2. ここでEntity の名前、項目の定義を追加していきます。
3. CData JDBC ドライバを通じたテーブル定義の情報はDbVisualizer などのツールで確認しておくとスムーズに構成できると思います。
4. 今回は以下のようなEntity を定義しました。

JDBC URL の定数を作成

続いて、Database Connector で使うためのJDBC URL の定数を作成しておきましょう。

1. MyFirstModule に「Constant」を追加し
2. 任意の名称で作成します。
3. Default value に接続文字列を指定して作成します。URL： jdbc:activecampaign:URL=yourUrl;APIKey=yourApiKey
   

ActiveCampaign のデータを取得するmicroflow を作成

それでは作成したEntity を元に、Database Connector からデータを取得するmicroflow を作成しましょう。

1. 今回のmicroflow は最終的に対象Entity の List を返すような処理になります。最終的な作成イメージは以下のようになります。
2. 「MyFirstModule」から「Add microflow」をクリックし
3. 任意の名称でmicroflow を作成します。
4. 最初にあらかじめ定義しておいたEntity のObject を作成します。「Creat Object」をmicroflow に配置し
5. 「Entity」の「Select」ボタンから
6. 事前に定義したEntity を選択します。
7. 任意のObject name を入力して、「OK」をクリックします。
8. 続いてDatabase Connector からデータを取得するための「Execute Query」をmicroflow に配置します。
9. 以下のような画面が表示されるので、まずInput をそれぞれ定義していきます。
10. 「jdbc url」ではあらかじめ定義しておいた定数を指定しておきます。
11. SQL はActiveCampaign からデータを取得するためのクエリを記述しておきます。
12. 「User name」や「Password」は今回不要なので「empty」を設定し、Result object に前のフローで作成したObject を指定します。あとは任意のList name を指定すればOKです。
13. 最後にmicroflow の出力結果を定義します。
14. 「End Event」をダブルクリックで開いて「Type」から「List」を選択し、事前に定義したEntity を紐付けます。そして、Return value に「Execute Query」の出力結果を指定しましょう。
15. これで、ActiveCampaign からデータを取得する microflow の完成です。

List 画面を作成・microflow と紐付け

最後にmicroflow から取得した結果を表示する画面を作成しましょう。

1. 「Home_web」をダブルクリックで開いて
2. 一覧画面用として今回は「Data grid」を配置します。
3. 「Data grid」を配置したら設定画面を表示し、「Data source」でmicroflow を紐付けていきます。
4. 先ほど作成したmicroflow を選択しましょう。
5. これで「OK」をクリックします。
6. OKをクリックすると、最初にカラムの自動検出について確認されるので「Yes」をクリックします。
7. 続いて各種Data grid のコントローラーを生成するかの確認がありますが、今回はそれぞれのロジックを構成しないので、「No」をクリックします。
8. すると、以下のようにシンプルなデータグリッド画面が作成されます。

実行してみる

それでは実際に正常に動作するか確認してみましょう。

1. 「Publish」ボタンをクリックすることで、作成したアプリが動作する状態が整います。完了したら「View App」をクリックして、アプリを開いてみましょう。
2. 以下のようにActiveCampaign のデータ一覧が表示されていればOKです！ このようにActiveCampaign のAPI を意識することなく、ローコードでActiveCampaign 連携アプリが作成できました。

このようにCData JDBC Driver for ActiveCampaign とMendix を組み合わせることで、簡単にActiveCampaign データを活用したアプリを作成することができました。ぜひ、30日の無償評価版をお試しください。