OutSystems でTwitter のデータをリアルタイムで表示するアプリをつくってみた

コードを書かない（書けない）私には福音のごとき「ローコード/ノーコード」のすがすがしい風が吹きまくった2021年ですが、その中でも気になっていたOutSystems。

是非、一度触ってみたいと思い、データ連携畑の人なのでTwitter のデータをOutSystems で引っ張ってくるアプリをつくりました。
この記事はOutSytems Advent Calendar 2021 の12日目の記事です。
https://qiita.com/advent-calendar/2021/outsystems

##OutSytems について
OutSystems をまずWebsite で見て見ましょう。Web アプリケーション、モバイルアプリケーション、デスクトップアプリケーションがめちゃくちゃ簡単に作れるプラットフォームです。
https://www.outsystems.com/ja-jp/

すぐに「Start Free」が見つかります。はじめてみます。

https://www.outsystems.com/p/modern-development/

Web に実行環境と管理画面があって、「Service Studio」をデスクトップにインストールして、そこでアプリを作ります。Service Studio をダウンロード。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/dc4ecf3e-0cf3-0cc5-f576-4baa070aa8bd.png)

全く苦労せずに新しいReactive なWeb アプリを作れました。

![スクリーンショット (2751).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/9ce06073-0a5d-ba37-eba7-e7eea5803f39.png)

マニュアルなしでここまでは来れてしました。

## Twitter データを持ってくるところもCData Connect でノーコード

さて、普通はここでWeb アプリケーションを作りに行くのですがTwitter のAPI をそのまま使うと大変そうなので、CData Connect というノーコードでWeb API をOAS(Open API Spec）に変換してくれるサービスを使います。

こちらからトライアルが申込可能です。

https://www.cdata.com/jp/connect/cloud/

### Twitter アカウントへの接続

CData Connect にログインします。「DATA MODEL」タブからTwitter のアイコンを選択します。

![スクリーンショット (2711).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/22d699d6-f7f7-f6d9-8a6f-98fb3600f595.png)

通常Twitter のAPI にアクセスするにはOAuth アプリをTwitter Developer サイトで作成し、申請し、トークンやシークレットをもらってアクセスしますが、Connect では、「Connect」ボタンを押すだけでTwitter API にOAuth 認証できます。


![スクリーンショット (2712).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/854358ed-d814-363a-da6c-84b79fcdcf8b.png)


Twitter にログインして、連携アプリを認証します。

![スクリーンショット (2713).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/c9cac645-527b-f57c-944c-ceb7355fc346.png)

無事にTwitter と接続できました。


![スクリーンショット (2714).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/5454f341-3610-0696-3b14-49a927e03f99.png)

### Twitter のメンションデータを指定
OutSytems ではOAS ファイル定義が使えるので、OData エンドポイントを作って、OAS 定義を保存します。

Twitter データソースを選択して。

![スクリーンショット (2722).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/cf588562-00ab-5558-0035-527d583bd900.png)

まずはTwitter のMention テーブルを選択。
![スクリーンショット (2723).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/98ed0233-55fa-3e4b-18e1-8197deee2393.png)


今回はGET だけなので、メソッドを選択して、カラムを選択。
![スクリーンショット (2744).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/7563811f-f742-1d3b-e869-c5cfef7fc7e7.png)


Twitter Mention のエンドポイントができました。
![スクリーンショット (2745).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/19be713c-80eb-5078-1bf8-c88481712773.png)



### Open API Spec を保存
Open API をクリックして、URL をクリックして、OAP の定義を.json で保存します。これをOutSytems にロードすれば、API のメタデータをしっかり読んでくれます。Open API（Swagger）などのスタンダードをしっかり使ってくれるところがOutSystems のすごいところです。
![スクリーンショット (2726).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/2413e975-7f0d-7e4c-87b1-8178fbabab14.png)


## OutSytems でTwitter データを表示するアプリを作成

Out Systems のStudio にもどって、Twitter データを表示するWeb アプリを完成させます。

### Logic にTwitter データを設定
まずはLogic をつくっていきます。
「Logic」→「Integration」→「REST」を右クリックして、「Consume REST API」をクリック。

![スクリーンショット (2730).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/365dfa83-fd18-d0b8-d112-e6866fb82179.png)

「REST API URL」で、「Upload File」をクリックします。ここで先ほど保存したOAS 定義ファイルを選択します。
![スクリーンショット (2732).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/711a6134-964f-3f3f-be7a-8d0458b374b1.png)

メソッド選択画面が出てくるので、とりあえず全部選択しておきます。
![スクリーンショット (2733).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/d6bafc36-b6b2-05c3-729a-5e39b1ff808f.png)

これでConnect 経由でTwitter のMention にアクセスする定義ができました。
![スクリーンショット (2734).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/f75c5178-d222-7205-ac64-b8d091758fa1.png)


### Twitter Logic を取得するAction を設定

次に、Twitter Logic を取得して格納するAction を作ります。「Interface」にもどり、Screen を追加。

![スクリーンショット (2735).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/12b3a10e-fd46-d46e-69ed-8ecbce370db8.png)

Screen で「Fetch Data from Other Sources」を選択します。
![スクリーンショット (2736).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/75bd93a1-7dac-ffcb-be70-406850c6c240.png)

Out1 のパラメータに「getAllTwitter1 Mentions Response」をData Type として選択します。ドロップダウンで選択できます。

![スクリーンショット (2737).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/730ec1d4-9f87-eabc-ef38-553f82160292.png)

次に、getAllTwitter1 Mentions のメソッドをドラッグして貼り付けます。
![スクリーンショット (2738).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/546e18af-9f49-bd36-6e8b-0cfe263a1348.png)

次に、データのAssign をOut1 に設定します。
![スクリーンショット (2739).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/b3ef37cf-8360-b1d9-492b-8a75e006370f.png)

これでTwitter のMention をデータとして取得するロジックができました。

この辺がOutSystems のデータのハンドリングの独特なところですね。いわゆるテーブルをまるまるオブジェクトにするようなツールではなく、データを呼び出したり、書き込んだりするロジック部品を定義していくスタイルです。

### テーブルにTwitter のロジックを貼り付け

ここまでくればあとは簡単です。
スクリーンにTable オブジェクトをポトペタ。そしてInteface から先ほど作ったvalue をテーブルにドロップします。
![スクリーンショット (2740).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/2e41d792-2eb4-d872-eec7-5a11fea115e7.png)

テーブルにTwitter Mention のカラムが入っています。Sort Attribute でvalue.ID などのように不要なvalue. が入っているのでここは手動で削除します。

### アプリを実行

真ん中の緑色のボタンをクリックして、パブリッシュします。
![スクリーンショット (2748).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/948a96e6-8ac6-35a4-aa3c-b3b3f601db0d.png)

真ん中の青いボタンを押して実際にブラウザで作ったWeb アプリを確認します。
![スクリーンショット (2749).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/f28451b5-d101-a7c0-5bfd-54767ace6167.png)


このようにテーブルにTwitter のデータをバインドして表示できました！！
![スクリーンショット (2750).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116843/43af6038-88fb-fe46-120f-a604706ca06f.png)


## 感想
outSystems は、データのハンドリングが他のノーコード系のツールと比べユニークです。しっかりとデータをメソッドというかロジックでハンドルして、それを画面に落としていく感じです。

データオリエンテッドな他のツールはテーブルがあって、それに対するフォームがあるだけ。CRUD 操作だけをする場合には楽ですが、そうじゃないロジックを組むと急にコーディングの世界になります。OutSystems はロジックを部品としてしっかり組んでいくので、ローコードでいろいろなことができそうだなと（なにもまだしてないけど）。ローコード/ノーコードのツールも「どのプロセスを楽にしたいか」という点で思想が異なるな。勉強しよ。