Link to plugin page: https://zeroqode.com/plugin/data-sync-for-firebase-1589727554441x685514740020063600
Introduction
Make your data instantly available, synced with your Firebase project & updating in real time!
- Export Your Bubble Data
- Sync Across Different Apps
- Offline Persistent Storage
- Run Data as JavaScript / jQuery
Prerequisites
You must have an account with Firebase to interact with the Firebase. Create you development account at: https://firebase.google.com/
Where do I find my Firebase details?
In your Firebase Console, choose your project, then navigate to 'Authentication' and click 'Web Setup'. You will see the ID/Keys that are required here.
Note: Make sure you only copy the values without the quotes, for example this line,
projectId: "my-firebase-project",
Would mean your ID is, my-firebase-projectCan I export my Bubble Data to Firebase or the Data Layer?
Yes, We have included a server side action to pull your Bubble Data using the Bubble GET API so you can easily push the result to your Firebase Database using the update action or add to data layer action afterwards.
Does the Plugin deal with Authentication for the user?
Yes, We have allowed for both Email/Password sign in & Anonymous sign in. By using the Firebase Privacy Rules you can restrict the data as required then even if you request all data to be available in the Data Layer only the data that matches your rules will be available.
Can I create functions that work online & offline?
Yes, Using the 'Run Data as JS' action you can perform JavaScript tasks even while offline by saving the JS in your database. A good example of this is to have a Firebase Main Collection with a sub-collection called JS, now create a new string
{Key: "Value"} pair and call the field offline & set the value to: document.write("<!doctype html> Site Maintenance body { text-align: center; padding: 150px; } h1 { font-size: 50px; } body { font: 20px Helvetica, sans-serif; color: #333; } article { display: block; text-align: left; width: 650px; margin: 0 auto; } a { color: #dc8100; text-decoration: none; } a:hover { color: #333; text-decoration: none; } We’ll be back soon!") Now in your Bubble app you can use the 'Data Offline' event to run the 'Run Data as JS' action and point the action to your above code stored in the Database. The result will be a nice offline page when the internet is disconnected.
Of course, you can expand on this and feature some code in the above snippet to listen for the connection and redirect back to your page, where as promised any data changes will be synchronized both to & from your Firebase Database.
What actions are available?
- Initialize Data Layer
- Get Data
- Write Data
- Get Value for Inputs
- Post Data To Endpoint
- Create New User
- Log User In
- Log User Out
- Run Data as JS
- Export Bubble Data Part 1 & Part 2
- Add Data to Layer
- Make Data Offline
- Make Data Online
- Delete Data
- Clear Data Layer
What custom states are available?
- String Output
- Number Output
- Boolean Output
- Logged In
- Display Name
- Email Verified
- Photo URL
- Is Anonymous
- User UID
- Provider Data (JSON)
- Data Offline
What events are available?
- Data Layer Updated
- Signed out
- Signed In
- Data Offline
- Data Online
- Data Deleted
Note: The 'Data Layer Updated' event is fired each time the Data Layer changes, this includes if another app was to update the Firebase database as any changes to the Firebase database will trigger this event while online. If the app is offline the event will fire when the app connects again.
Basic Usage
Once you have setup your Firebase Console & finished adding the required values into the plugin settings tab, your can place the **'Data Layer' **element on each page its required on. Once this element is on a page you will then have access to its actions & states.
Important: Ensure only ONE 'Data Layer' element is placed on each page.
If you have
public data you wish to use in your Firebase Database, you should add a 'Initialize Data Layer' action in an 'On Page Load' event and define the Main Collection name(s).Note: If you want to initialize more than one Main Collection, you can separate them with a comma.
Example:
Site_Assets,Public_Data,JSNote: You can use the 'Initialize Data Layer' as many times as you like. This should be done in cases such as a user has signed in or out using the plugin events as such. This is because you may initialize on page load a Main Collection called
public_data because the user is not yet signed in then once the 'Signed In' event fires you can initialize public_data, user_data. You must include the public_data again because calling 'Initialize Data Layer' also clears the Data Layer so that any Main Collection that is not included is no longer part of the Data Layer to prevent data remaining that should no longer be available.
:::Note: The events for 'Signed In' & 'Signed Out' fire on page load so if a user is logged in and returns to your site then the relevant event will fire automatically. This is also true for other events such as 'Data Offline', 'Data Online' & 'Data Layer Updated'.
Now that the Data Layer is setup you can start making use of the other element action's to read, write & delete data & also export your bubble data or post the Data Layer JSON to your apps workflow API.
The 'Export Bubble Data' action comes in two parts, first you need to run the 'Export Bubble Data (1)' action followed by the 'Export Bubble Data (2)' action. To use the export actions you need to enable your apps Data API (GET), check all 'things' you want to export & generate an API key. The API Key is required in the plugin's settings in the field
Bubble Data API Key.Exporting is as simple as defining your Data API's URL for the thing your exporting, then using the resulting JSON in the 'Export Bubble Data (2)' action.
Note: If your
'thing' was for example 'user', then your API URL would look like this,
Run Mode: https://your-bubble-app.bubbleapps.io/api/1.1/obj/user
Version-Test Mode: https://your-bubble-app.bubbleapps.io/version-test/api/1.1/obj/userThe resulting data in your Firebase Database will be structured as follows:
user (Main Collection) / unique_id (List of Thing's ID's) / this_users_data (JSON Data of this Thing)
Changelogs
Update: 11/03/2021 -
- Updated authorization function and Demo updated
Update: 30/05/2022 - Version: 1.6.0.
- Fixed issue with login and logout