LoginSignup
12
13

More than 3 years have passed since last update.

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

Posted at

はじめに

前回、こちらの記事でノーコードツールのAdaloを使って、TODOアプリを作りました。
今回は、Adaloで作ったアプリと、外部APIの連携を試してみます。

外部APIと接続するための設定

左のメニューバーの「Database」から「Connect to APIs」を選択
スクリーンショット 2021-01-26 15.39.35.png

接続情報の設定

モーダルが立ち上がり、ここで接続情報を入力する。
今回は、猫様の情報を取得できるフリーのAPI、TheCatAPIを使います。
APIで取得したデータのモデル名(Cats)、APIのBasepath、その他必要な接続情報を入力します。
今回はHeaderにAPI keyをセットしたかったので、「ADD ITEM」を押下して、必要な情報を入力します。
スクリーンショット 2021-01-26 15.47.37.png

エンドポイントの設定

次に進むと、エンドポイントの設定ができます。
今回はGet Allだけできればよかったので、特に設定しませんでしたが、URLを変更できたり、ResponseのKey項目を編集できそうでした。
スクリーンショット 2021-01-26 16.18.35.png

接続確認

次に進むと、接続確認の画面が出てきます。
スクリーンショット 2021-01-26 16.19.51.png

「RUN TEST」を押下すると...
スクリーンショット 2021-01-26 15.51.21.png

見事に失敗しました。APIのドキュメントとにらめっこして、basepathに/v1が足りなかったので、修正してもう一度接続確認をします。
スクリーンショット 2021-01-26 15.52.05.png

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

見た目(画面)を作る

前回の記事でも似たようなことをしているので、画面の作り方は省略します。

画面とデータをつなげる

こちらも前回の記事でやったのですが、ここはもう一度書いておきます。

画面の、猫様のデータを表示させたいリストをクリックして、色々設定していきます。
この画面で変えたところは以下のとおりです。
Listの名前: Brred List(タイポでBrredになってます..)
What is the list of?: 先程作成したAPIと連携させたデータベース「Cats」を選択します
スクリーンショット 2021-01-26 15.54.20.png

あとは、リストの各項目と、データベースの値を紐付けていきます。
スクリーンショット 2021-01-26 15.55.07.png

ここで一つ驚きだったが、画像の項目を設定するときに、画像がなかったときのプレースホルダーも設定できました
便利...!
スクリーンショット 2021-01-26 15.57.28.png

動作確認

動作確認のために、ノーマルスクリーンからホームスクリーンへ変更します。(ログイン後に最初に表示する画面にしたかっただけです)
スクリーンショット 2021-01-26 16.00.01.png

右上のPREVIEWを押すと、シュミレーターが起動します。
catwiki.gif

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

おわりに

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

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

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

前回作ったTODOアプリのデータにアクセスできるAPIを公開することもできるようなので、やってみました。

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

スクリーンショット 2021-01-26 15.36.22.png

なるほど。これは本来、有料プランの機能ですが、無料で14日間使えるということみたいです。
スクリーンショット 2021-01-26 15.38.24.png

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

(個人的に)見慣れた画面が出てきました。裏でSwaggerが動いてるんですかね。
スクリーンショット 2021-01-26 15.43.17.png

12
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
13