ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Parabola を使った Bubble DB の集計方法

f:id:toka-xel:20210319114250p:plain

こんにちは!ノーコードラボの岡崎です。

今回は Parabola を使った Bubble の DB の集計処理について記載します。

parabola.io

例えばですが、月1回、今までのデータを集計して新たにデータを作るような処理が必要になった場合、皆さんだったらどうやりますか?

今まで当ブログでは、Schedule API WorkflowIntegromat + Backend Workflow を使った方法を紹介してきましたが、今回は Parabola を使います。
Parabola はデータ操作に特化した iPaaS で集計処理などもやりやすいため、今回はこの方法をご紹介させていただきます。

なお、Parabola は初めてという方は以前に紹介した記事がありますので、こちらからアカウント作成をしておいてください。

blog.nocodelab.jp

また、この方法は Bubble の Data API を利用するのですが、Bubble の Data API は新しい Free プランでは利用できなくなっています。試す方は Hobbyプラン(旧無料プラン)もしくは、Personal プラン以上の環境でお試しください。

題材となる DB

今回は勤務時間管理システムを題材として想定したいと思います。

このシステムには UserWorkingHoursWorkingHoursPerMonth という3つのテーブルがあります。

User はユーザーの情報、WorkingHours にはユーザーの日ごとの作業時間が入っています。

また、WorkingHoursPerMonth には ユーザーの月毎の作業時間が入っています。この WorkingHoursPerMonth は毎月1日に前月のデータを WorkingHours から集計して求めることとします。

今回は、この WorkingHoursPerMonth のデータの作り方に注目します。

User Type

User Type には、emailnameicon というフィールドを持たせます。ここにはユーザーの情報が入っています。

f:id:toka-xel:20210315111844p:plain

取り急ぎ、5人分データを入れてみました。

f:id:toka-xel:20210309154913p:plain

WorkingHours Type

WorkingHours Type には、UserWorkingDayWorkingHours というフィールドを作成します。だれがいつどれくらい作業をしたかを管理します。

f:id:toka-xel:20210315111904p:plain

実データはこんな感じです。

f:id:toka-xel:20210309171314p:plain

これだとデータを表示しきれないので、各ユーザーごとに作業時間表を作ってみました。こんな感じのデータを用意しました。

f:id:toka-xel:20210309171609p:plain f:id:toka-xel:20210309171616p:plain f:id:toka-xel:20210309171628p:plain f:id:toka-xel:20210309171635p:plain f:id:toka-xel:20210309171651p:plain

WorkingHoursPerMonth Type

WorkingHoursPerMonth Type には、UserWorkingMonthWorkingHours というフィールドを作成します。
ここでは月ごとに誰がどれくらい作業をしたかを管理します。

f:id:toka-xel:20210315111922p:plain

WorkingHours Type を元に Parabola を通して編集したデータをこの Data Type に入れるという作業を行います。

初期のデータは何も入っていません。

Privacy 設定

WorkingHoursPerMonth は API 経由でデータをクリエイトするため、ログインしているユーザーに対して Create via API の権限をセットしておきます。

f:id:toka-xel:20210315111710p:plain

Bubble の Data API の設定

続いて Bubble の Data API の設定を行います。

Settings - API の Public API endpoints で Enable Data API のチェックボックスにチェックを入れます。
また、Data API でアクセスする Data Type (ここでは データを読み込む WorkingHours とデータを書き込む WorkingHoursPerMonth)にチェックを入れます。

f:id:toka-xel:20210315112000p:plain

そして、Generate a new API token をクリックします。
すると API Token が作成されます。
Label を入力しておきます。ラベルはなんでも OK です。
Private key はあとで Parabola で設定します。

f:id:toka-xel:20210315112428p:plain

ここまでで Bubble 側の設定は終了です。

Parabola の設定

Parabola にログインして、My Flows を表示したところから説明します。

f:id:toka-xel:20210315115247p:plain

  • Add a new flow をクリックします。
    Parabola の Editor 画面が表示されます。

f:id:toka-xel:20210315115634p:plain

Search のところで Bubble と入力して検索してみます。

f:id:toka-xel:20210315115904p:plain

そうすると2つのステップが見つかります。

  • Pull from Bubble:Bubble からデータを持ってくるステップです。
  • Send to Bubble:Parabola で編集したデータを Bubble に戻すステップです。

Bubble からデータを持ってくる

まずは、Bubble から Parabola にデータを持ってきましょう。

Pull from Bubble をドラッグ&ドロップしてエディターの円に置いてください。

すると次のような画面になります。

f:id:toka-xel:20210315120341p:plain

Bubble Import をダブルクリックしてください。次のような画面になります。

f:id:toka-xel:20210315121039p:plain

ここで API Endpoint URL と Token を設定します。

API Endpoint URL の設定

API Endpoint URL は次のようになっています。


https://APPNAME.bubbleapps.io/api/1.1/obj/OBJECTNAME

APPNAME と OBJECTNAME はご自分のものを入れてください。

今回、私が作っている APPNAME は total-parabora00、OBJECTNAME は読み込みたい Data Type ですので、workinghours を入力します。この URL は全て小文字でないと NG なので、Data Type も小文字で入力します。

※ここで APPNAME の parabora が parabola の誤記であることに気づきました。が、このまま行きます。

また、開発環境でテストしているので、version-test を入れておきます。

今回の設定であれば、


https://total-parabora00.bubbleapps.io/version-test/api/1.1/obj/workinghours

と設定すれば OK です。

API Token の設定

続いて API Token を設定します。

Authentication を開いて、Bearer Token の Your API Token のところに Bubble の方で作った API Token をコピーします。

f:id:toka-xel:20210315122649p:plain

準備ができたら Show Update Results をクリックしてください。

うまく動作すれば、Bubble から workinghours のデータを持って来れると思います。

f:id:toka-xel:20210315122723p:plain

ここまでうまくいったら一旦右上の x ボタンをクリックして Bubble Import を閉じましょう。右側のステップを選択するところも < Back を押して、トップに戻ってください。

Parabola で必要なデータだけ抽出する

続いて Parabola で不要なデータを削って、必要なデータだけにします。
今回は 2021年2月1日〜 2021年2月28日までのデータを切り取ります。

Filter and sort data をクリックし、Filter rows をドラッグ&ドロップで Bubble Import のとなりに配置します。

f:id:toka-xel:20210315125757p:plain

Filter rows をダブルクリックします。
次のような画面が表示されます。

f:id:toka-xel:20210315130021p:plain

WorkingDay の条件を設定します。

f:id:toka-xel:20210315130432p:plain

設定したら Show Update Results をクリックします。

f:id:toka-xel:20210315132104p:plain

ここまでうまくいったら一旦右上の x ボタンをクリックして Bubble Import を閉じましょう。右側のステップを選択するところも < Back を押して、トップに戻ってください。

なお、今回は 2021年2月のデータしか入れていないので、この手順はやらなくても今回は結果は一緒なのですが、普段だったら必要な作業なので手順を入れてみました。

Parabola で集計する

続いて Parabola で集計処理を行います。

Do math をクリックし、Count by group をドラッグ&ドロップで Bubble Import のとなりに配置します。

f:id:toka-xel:20210315132307p:plain

Count by group をダブルクリックします。
次のような画面が表示されます。

f:id:toka-xel:20210315123929p:plain

Select... となっているところをクリックし、User を選択し、Show Updated Results をクリックします。

f:id:toka-xel:20210315132628p:plain

これでユーザーごとの月単位の労働時間を求めることができました。

Parabola から Bubble にデータを戻す

最後に Parabola で作ったデータを Bubble に戻します。

検索画面で Bubble と入力し、Send to Bubble をドラッグ&ドロップしてエディターの Count by group の右に配置してください。
Send to Bubble は今まで表示されていた円が出て来ないので、Count by group の右にある矢印を伸ばして Bubble Export につないでください。

f:id:toka-xel:20210315165838p:plain

Bubble Export をダブルクリックして編集画面を表示します。

f:id:toka-xel:20210315170433p:plain

Request Type の設定

Request Type は POST を選択してください。POST にするとデータを追加します。

API Endpoint URL の設定

API Endpoint URL はインポートした時と同じ要領で設定します。

今回は WorkingHoursPerMonth に Export しますので、次のように指定します。


https://total-parabora00.bubbleapps.io/version-test/api/1.1/obj/workinghourspermonth

また、Bearer Token の設定もインポートと同じしてください。

最後に Request Body を設定します。書き方は次のようになります。


{
    "Bubble 側の field名": "{Parabola 側の列名}",
    "Bubble 側の field名": "{Parabola 側の列名}",
    "Bubble 側の field名": "{Parabola 側の列名}"
}

今回は、Bubble 側の field名は User、WorkingMonth、WorkingHours ですので、次のように設定します。


{
    "User": "{User}",
    "WorkingMonth": "2021-01-31T15:00:00.000Z",
    "WorkingHours": "{Count}"
}

入力が終わりましたら Show Updated Results を押してください。

これで設定は全て完了です!

Flow を実行する

最後に画面右上の Run Flow をクリックします。すると次の画面が表示されます。

f:id:toka-xel:20210315172513p:plain

Run Flow Now → ボタンをクリックしたら次のダイアログが表示されますので、Run Now をクリックします。

f:id:toka-xel:20210315172727p:plain

うまく動作したら Bubble の WorkingHoursPerMonth に値が入っているはずです。

f:id:toka-xel:20210315173101p:plain

bubble.io

まとめ

今回は Parabola による Bubble のデータの集計処理の方法を記述しました。

Bubble で複雑な集計処理を行おうとすると Schedule API Workflow on list を何度も実行することになるのですが、Parabola を使うと意外と簡単にできることがあります。

ダメな点を強いていうと、Parabola は Bubble の Data API を使って、テーブル丸ごとデータを持ってきてしまうため、テーブルのデータ量が多くなると遅くなりそうだなと考えています。本当はここで Backend Workflow を指定できたら持ってくるデータも必要最低限の量を持ってこれるようになるので、もっと便利になりそうなのですが。。。
何かいい方法がありそうにも思えるので、後日調べてみたいと思います。

それでは、また!