BubbleでFirebaseを使いたいとき『ノーコード』
Bubbleには、データベースが用意されています。
通常は、そのデータベースをそのまま使用すればよいのですが、外部データベースを使用したいときもあるでしょう。（利便性やコストの点から）
ということで今回はGoogleが提供している「Firebase」というデータベースサービスとBubbleをつなげたいと思います。
まずはFirebaseに登録する
「Firebase」とググっていただき、一番上に表示されたページから
使ってみるをクリックして登録してください。
登録したらconsole画面が表示されるので、プロジェクトを作成をクリックします。
名前をつけて、あとはデフォルトのまま進んでいきます。
構築からAuthenticationを開いてください。
次へをクリックすると、ログイン方法を選ぶところがでますが、メール/パスワードを選択してください。
Authenticationというのは、Firebaseのデータベースを編集するための権限のことです。つまり、Authenticationにてログインを行わないと、Firebaseのデータベースを編集できません。
例えば、今回では商品のデータベースを用意して、ユーザーが購入した際に在庫の減少をFirebaseのデータベースに書き込む処理を実装しますが、その際には、ユーザーがBubbleだけではなくFirebaseのAuthenticationにもログインする必要があります。
ここでFirebaseのログイン方法をメール/パスワードとしました。Bubbleのログイン方法もメール/パスワードですので、それに揃えたということです。こうすることで、Bubbleのサインアップ、ログインと同時にFirebaseのサインアップ、ログインも行うことができます。
Bubbleの実装はとりあえず置いておいて、Firebaseのほうの設定を終わらせてしまいましょう。
データベースを作成する
続きまして、構築よりRealtime Databaseを選択してください。
データベースを作成をクリックして、
で有効にするをクリックします。
とりあえず、ルールのところを「認証ユーザーならだれでも編集可能」とするために
{
"rules": {
".read": "auth != null",
".write": "auth != null"
}
}このようにしておいてください。
次に
データのところにデータベースを書き込みます。
今回は
{"items": [
{
"id": "1",
"name":"鉛筆",
"stock": "50"
},
{
"id": "2",
"name":"消しゴム",
"stock": "10"
},
{
"id": "3",
"name":"下敷き",
"stock": "3"
}
]}このようにします。それぞれnameが商品名、stockが在庫数です。idはデータベースのキーとなるものですので、必ず必要です！
これをそのまま使用したいという方は↑をコピーしていただきメモ帳に貼りつけて拡張子をjsonにして保存してください。
⇒の縦に並んだ・・・よりjsonファイルをインポートすることができます。
こうなっていたらインポート成功です！
ここまででデータベースの形は作成できました。
次にBubbleとFirebaseをつなぐためのAPIキーを取得しましょう。
APIキーの取得
プロジェクトの設定より
</>をクリックして、アプリを設定します。名前だけ設定すれば作成できます。
塗りつぶしているapikeyなどを使用します。
お疲れ様です。これでFirebase側の設定は終了です。
Bubble側の設定
まずはプラグインを２つ導入します。
Firebase Authenticationというプラグインです。これでfirebaseへのログイン機能を実装できます。
あとは
API connectorです。これでfirebaseとAPIキーを使用して接続することができます。
サインアップ処理、ログイン処理
まずはサインアップを実装しましょう。
メールアドレス、パスワードのインプット、サインアップというボタンを設置してワークフローを追加します。
通常のサインアップ処理のあとにFirebase Authenticationのサインアップ処理を追加します。
Firebase - sign upを選択します。
APIキーはFirebaseの最後で設定したマイアプリに記載されています。（画像では緑色で塗りつぶしています。）
メールアドレスとパスワードはそれぞれインプットです。
これで、BubbleとFirebaseの両方にアカウントを作成できます。
ログインもBubbleでのログインのあとにFirebase-Loginという処理を追加してください。
signupと同じですので省略します。
では実際にサインアップしてみましょう。
bubbleにてサインアップして、firebaseのAuthenticationのほうにもサインアップされていれば成功です。
test11@gmail.comでサインアップすると、FirebaseのAuthenticationにもユーザーが追加されました。
こうしておかないと、test11@gmail.comがFirebaseのデータベースを編集できなくなります。
※エラーが出る場合は、少し時間を置くかBubbleを1回閉じてやり直してみてください！
FirebaseのDBを表示する
さて、ここからはいよいよFirebaseのDBをBubbleから表示、編集できるようにします。
まずはプラグインのAPI connectorから
Add another APIをクリックします。
まずはfirebaseからデータベースを取得する設定を追加します。
赤で塗りつぶしている部分はfirebaseの記載されているマイアプリのdatabaseURLになります。
つまり、databaseURLに書かれているURLの最後に/[db].json?を足します。
すると自動でkey parametersにkey dbが追加されるんで
Value には、itemsと記載しましょう。
あと、firebaseのほうでルールを一時的に
にしましょう。こうしないと、認証されていないというエラーがでます。
設定したらinitialize callをクリックしてください。
データが表示されたらオッケーですので、SAVEしてください。
試しにRepeatingGroupで表示してみましょう
Typpe of contentをGet item dataにして
Data sourceをfirebaseの先ほど作成したAPI コールにします。
とりあえず名前と在庫数を表示するテキストを設置しました。
プレビューするとちゃんと表示されました。
Bubbleからデータを追加する。
続きまして、データの追加です。
PUTというアクションを追加します。
ほとんどGETと同じなのですがBodyを追加してます。
Use asはActionです。
こうすることで BubbleのidはFirebaseのidだよということを設定しています。
あと、URLに、/［index］を追加してください。
indexのvalueはは、Firebase 上で自動で採番される index 配列の値を指定する必要があります。今回のサンプルで登録するのは、4件目のデータとなるので、下図のように 0 から採番して「3」を指定します。
privateは外しておいてください。
key 4
name 分度器
stock 10
はinitialize callのために使うだけなので適当でいいです。keyだけまだfirebaseのデータベースに存在しない番号にしておいてください。
リターンしたら成功です。
一応firebaseをみると
分度器が追加されています。これをbubbleの処理に追加します。
適当にデータ作成のボタンを作成したらそのワークフローで
PUT item Dataが追加されているので選択して
それぞれの項目を埋めます。
こうなります。
プレビューで追加しましょう。
firebaseを確認すると
追加されていますね。
Bubbleからデータを編集する
続きまして、編集です。
PUT処理にて、その商品のindexを指定してデータを追加すると置換されます。
bubbleにて実装してみましょう。
その前に、ここまで在庫をテキストの型にしてしまっていたので、数字の型に変更します。
まずはfirebaseから、stockの"222"と書かれているところをクリックして
Numberに変えてください。
Bubbleのほうでは
GET item DataとPUT item DataをそれぞれReinitialize callして
stockをnumberにしてください。
では、bubbleにて在庫の変更（購入）を実装してみましょう。
repeating groupでfirebaseのGET item Dataを表示しています。
購入するボタンを設置してワークフローを追加します。
こうなりますね。購入して、firebaseのページを更新すると在庫が１つ減っていると思います。
最後にfirebaseのルールを変更しましょう
こちらが参考になるのでおすすめです。
まとめ
BubbleとFirebaseを繋げることは稀だとは思いますが、過去に案件主から頼まれたことがあります。その際苦労したので備忘録として共有いたします。
この記事が気に入ったらサポートをしてみませんか？