ノーコードで作ったアプリと、外部のAPIを連携させてみた

# はじめに

前回、[こちらの記事](https://qiita.com/wakiwaki/items/e969e9a207363cf3da96)でノーコードツールのAdaloを使って、TODOアプリを作りました。
今回は、Adaloで作ったアプリと、外部APIの連携を試してみます。


# 外部APIと接続するための設定
左のメニューバーの「Database」から「Connect to APIs」を選択
![スクリーンショット 2021-01-26 15.39.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/c5d80500-f265-f26a-8561-33df2eaf2de6.png)

## 接続情報の設定

モーダルが立ち上がり、ここで接続情報を入力する。
今回は、猫様の情報を取得できるフリーのAPI、[TheCatAPI](https://thecatapi.com/)を使います。
APIで取得したデータのモデル名（Cats）、APIのBasepath、その他必要な接続情報を入力します。
今回はHeaderにAPI keyをセットしたかったので、「ADD ITEM」を押下して、必要な情報を入力します。
![スクリーンショット 2021-01-26 15.47.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/781e4ac4-0ed8-11f2-fe0f-f2eb4a7fcec7.png)

## エンドポイントの設定

次に進むと、エンドポイントの設定ができます。
今回はGet Allだけできればよかったので、特に設定しませんでしたが、URLを変更できたり、ResponseのKey項目を編集できそうでした。
![スクリーンショット 2021-01-26 16.18.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/cf82ce8a-5473-a605-c5d6-1c2bcafca395.png)

## 接続確認

次に進むと、接続確認の画面が出てきます。
![スクリーンショット 2021-01-26 16.19.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/73c43a9a-bb4f-dc74-f004-3643a73824d6.png)

「RUN TEST」を押下すると...
![スクリーンショット 2021-01-26 15.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/7749fb17-cdb4-d299-da27-d576131896d6.png)

見事に失敗しました。APIのドキュメントとにらめっこして、basepathに`/v1`が足りなかったので、修正してもう一度接続確認をします。
![スクリーンショット 2021-01-26 15.52.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/cadb3f92-2efe-40ec-f5d6-c7dc0d95e3c9.png)

成功しました！
「CREATE COLLECTION」で設定完了です。

# 見た目（画面）を作る
[前回の記事](https://qiita.com/wakiwaki/items/e969e9a207363cf3da96#todo%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%82%92%E4%BD%9C%E3%82%8B)でも似たようなことをしているので、画面の作り方は省略します。

## 画面とデータをつなげる
こちらも[前回の記事](https://qiita.com/wakiwaki/items/e969e9a207363cf3da96#%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%A8%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E9%80%A3%E6%90%BA%E3%81%99%E3%82%8B)でやったのですが、ここはもう一度書いておきます。

画面の、猫様のデータを表示させたいリストをクリックして、色々設定していきます。
この画面で変えたところは以下のとおりです。
Listの名前: Brred List（タイポで`Brred`になってます..）
What is the list of?: 先程作成したAPIと連携させたデータベース「Cats」を選択します
![スクリーンショット 2021-01-26 15.54.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/08630a5b-111b-9ce1-d1de-6ced28e3cff7.png)

あとは、リストの各項目と、データベースの値を紐付けていきます。
![スクリーンショット 2021-01-26 15.55.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/fa744e79-ef4d-9911-6736-72aedbc43324.png)

ここで一つ驚きだったが、画像の項目を設定するときに、画像がなかったときのプレースホルダーも設定できました
便利...!
![スクリーンショット 2021-01-26 15.57.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/3d2ac04f-7868-d883-6f34-e72c6d76e036.png)

## 動作確認
動作確認のために、ノーマルスクリーンからホームスクリーンへ変更します。（ログイン後に最初に表示する画面にしたかっただけです）
![スクリーンショット 2021-01-26 16.00.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/4457f1ba-dd99-f8f4-ecf4-6e9da91067c0.png)

右上のPREVIEWを押すと、シュミレーターが起動します。
![catwiki.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/6ec2955f-c813-6d6c-0ab4-fda6215820c7.gif)

ちょっとカクつくなーと思いましたが、手持ちのiPhoneで試したら問題なかったです。
Webのシュミレーターが少し重そうです。

# おわりに

ここまで10分もかかりませんでした。
前回も書きましたが、10分で同じものをコードで作れと言われても私はできません。

このように、アイデアをクイックに動くものにできる（＋色々気にしなければPublishもできる）というのは、本当にすごいことだと思います。
同時に、エンジニアの必要性についても深く考えさせられます。
コードが書けるだけのエンジニアはもう必要なくなってしまいますね。

# [おまけ]Adaloで作ったデータベースにアクセスできるAPIを公開する

[前回作ったTODOアプリ](https://qiita.com/wakiwaki/items/e969e9a207363cf3da96)のデータにアクセスできるAPIを公開することもできるようなので、やってみました。

Settingから、「Get Access To Your App's API Key」の下にある、「START INTEGRATION PACK TRIAL」を押下します。

![スクリーンショット 2021-01-26 15.36.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/7751fb49-4e6d-eb47-2603-0ad8201d7ed1.png)

なるほど。これは本来、有料プランの機能ですが、無料で14日間使えるということみたいです。
![スクリーンショット 2021-01-26 15.38.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/def3be47-2559-02f9-54c9-ba1be80d726f.png)

「VIEW ADALO API DOCUMENTATION」を押下すると、

（個人的に）見慣れた画面が出てきました。裏でSwaggerが動いてるんですかね。
![スクリーンショット 2021-01-26 15.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/175e125e-92f4-eb2b-0897-7dfbaa788d25.png)