API Connector + Firebase

Has somebody successfully connected to Firebase using API Connector? I wonder what was your setup?

2 Likes

Firebase is REST based so I see no issue in connecting your Bubble App to Firebaseā€¦

You might want to check out this link

https://firebase.google.com/docs/reference/rest/database/

And this link also on as to how to connect a third party API (in this case Firebase) to your Bubble App using the Bubble API connector

https://manual.bubble.is/building-plugins/adding-api-connections.html

5 Likes

Thanks for this. Yeah this new to me so I need to learn how to do this. There are quite many settings and setting this up correctly might take some time to get it right from me.

1 Like

Did you get an answer to this one?

Iā€™m also interested in a Firebase guide

1 Like

Hi everyone, I am also trying to make it work, however no success so far.

I am using this links as reference to set the api connector parameters.
https://firebase.google.com/docs/cloud-messaging/send-message?hl=pt#rest_1

Can someone helps me with this? I am trying to send messages to specific device.

any luck?

Itā€™s a lot easier using JavaScript.

To use any authenticated calls for data privacy you need to have the token of the signed in user. You have to pass that along as a header (I believe)

What are you trying to do with Firebase. Itā€™s fairly easy to work with!

Examples w firebase - to use FB.cloudstore as repo for upld photos, review the cloudstore section of docs.

  • to store data in FB.tables , review the section on
    realtime database and the docs on FB.dataModel

for FB logins

  • tip to non-dev types ā€¦ FB is complicated and low level and it probably is a great thing if you have some background working in low-level command line tools and other dashboards intended for use by devs.

  • Expect FB to be complex, low-level, and time consuming as you consider integration with bubble.

Step by Step
Once you have created a FB project and configā€™d it for use by an API, you can exec a series of Curl/REST calls at the CLI to mimic bubbl.workflows and to then translate the step by step from the Curl to the Workflow idiom. See the link below, add ā€œ.jsonā€ and the access-token value to the end of the url and get it using curl.

You can create a single firebase K-N pair on the firebase dashboard as was done for this sample. FB.Collections correspond to bubble data types and that was not done here. Using an access token per the FB curl docs do a Curl ā€˜Getā€™ on the appropriate url as presented by the docs

get the K-V pair pictured in FB using curl ( stdout below

@src$ curl ā€œhttps://workbox-demos-1b95f.firebaseio.com/burrito.json?access_token=ya29.c.KqABDgif31UyWiKoUo2R4LEyszRqSOOzrgā€
11.99

Translate the above curl to idiom of the API Connector and it will work in bubble.

Generate the FB access token per the docs ( node js used to do this by installing the dependency at the top of the file , changing the service account to $yourAccnt and running the js file)

Note that access_token may expire after short interval making the protocol in bubble api connector more complicated. FB protocol onGenerate the token may allow config for token-expire-time.

How do I get it to work using Javascript? I tried using the following Javascript but kept getting an error saying the ā€œrequireā€ is not defined. Also tried ā€œimportā€ and got an error saying ā€œimportā€ canā€™t be used in bubble.

var firebase = require(ā€œfirebase/appā€);
require(ā€œfirebase/storageā€);

var firebaseConfig = {
apiKey: ā€œAPI_KEYā€,
authDomain: ā€œAUTH_DOMAINā€,
databaseURL: ā€œDATABASE_URLā€,
projectId: ā€œPROJECT_IDā€,
storageBucket: ā€œSTORAGE_BUCKETā€,
messagingSenderId: ā€œSENDER_IDā€,
appId: ā€œAPP_IDā€
};

firebase.initializeApp(firebaseConfig);
var storage = firebase.storage();
var storageRef = storage.ref();

var fileRef = storageRef.child(ā€˜files/ā€™ + fileName);

fileRef.getDownloadURL().then(function(url) {
// Add code here to use the URL to display the file in your repeating group
});

Youā€™ll need to bring in Firebase via script tags then. Probably.

Tried that and got this error

The plugin Toolbox / action Run javascript threw the following error: SyntaxError: Unexpected token ā€˜<ā€™
at eval (PLUGIN_1488796042609x768734193128308700/Toolbox-actionā€“Run-javascript-.js:3:63)
at https://sandbox12333.bubbleapps.io/package/run_debug_js/0a5263b6f40f6dd4fbde5b98c8adc21a7e85319add3313c7561797b371468045/xfalse/x21/run_debug.js:6:2592498 (please report this to the plugin author)

Cuz youā€™re not using a server side action

Create your own private plugin, create a server side action and you can use require

1 Like