ノーコードとHeroku

最近オクラがマイブームのエンジニア鳥井です！

今回は、前に作成したノーコードのアプリでAPIを使ってみようと思います。
APIは、Node.jsで作ったものをHerokuにデプロイして使います。

以前ノーコードで作成した記事↓

1.Herokuとは

HerokuはPaaSと呼ばれるもので、Webアプリケーションの構築、運用、保守までできるクラウドサービスで、株式会社セールスフォース・ドットコムのサービスの一つです。
Salesforceとは異なり、様々なプログラミング言語を使ってアプリを作成することができます。また、手軽さが特徴で、コマンドだけでアプリの作成やデプロイ、スケールの拡張などをできたりします。拡張機能も豊富でSalesforceと簡単に連携できるアドオンなどもあります。

ちなみにSalesforceは、SaaSとよばれるもので同じく株式会社セールスフォース・ドットコムが提供するクラウド型のビジネスアプリケーションです。
Salesforceは営業支援システム(SFA)や顧客管理(CRM)などの機能を中心にビジネスの目的に合わせて必要な機能を選択して利用できます。

2.HerokuにAPIを構築

今回、APIはNode.jsで作成しました！
ここではHerokuのセットアップは割愛します。(無料で使えるプランがあります)
(参考：https://devcenter.heroku.com/articles/getting-started-with-nodejs)

①HerokuにAPIをデプロイ

Herokuへのデプロイはgitを使用します。
まず、リモートブランチに「heroku」を追加します。

git remote add heroku https://git.heroku.com/xxxxx-xxxxx-xxxxx.git

そして作成したAPIのローカルブランチ「main」をリモートブランチ「heroku」にpushします。

git push heroku main

pushすると自動的にHerokuにデプロイされ、再起動されます。
ビルドに失敗した場合は、自動的にロールバックされます。

今回作成したAPIは、POSTユーザー情報登録用とGETユーザ情報取得用です。

②Herokuにデータベースを作成

データベースはHerokuで無料で使えるPostgreSQLを使います。

Herokuのダッシュボード画面から、手順に沿って実施していくと簡単に作成できます。

下記コマンドで作成したデータベースに接続し、接続した後SQLでテーブルを作成します。

heroku pg:psql [上記で作成したデータベース名]

3.ノーコード(Bubble)でAPIを呼び出す

以前ノーコードで作成した際はBubbleを使用しました。
Bubbleには、APIの接続用に「APIConnetor」というプラグインが用意されているのでそれを使ってAPIを呼び出してみます。

APIConnetorを管理画面からインストールします。

インストールしたら「Add another API」ボタンからAPIを設定します。

今回はこんな感じで設定しました。

次に画面で呼び出せるようにします。

実際に呼び出してみると…

Herokuに登録されているユーザー情報を取得することができました！

4.最後に

今回はHerokuにAPIをデプロイし、ノーコードで作ったアプリから呼び出すようにしてみました！
Herokuもアドオンが豊富で簡単にいろんなことができるので是非一度Herokuを使って何か作ってみてください！

機会があれば次はHerokuとSalesforceを同期させて、Heroku側で登録されたデータをSalesforceで確認できるものを作っていきたいと思います！