Keep an eye out for a couple of new releases.
Data Layer
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
- Search a Term Through the Entire Data Layer
Note: Firebase Firestore is HIPAA compliant as long as you comply with the Security Rule, the Privacy Rule & the Breach Notification Rule.
What is the Data Layer?
The Data Layer is your Firebase Firestore Data & Bubble Data (if you wish) formatted as JSON. The Data Layer is updated in real time from your Firebase Database & as often as you like from your apps database.
Does this work offline?
Yes, one of the features the Premier Data Layer has is when your users go offline, any values, portion of the Data Layer or pre-selected event data is cached and once the connection is restored the new values are synchronized with the server.
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.
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-project
Can 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 coarse 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?
What custom states are available?
-
String Output
-
Number Output
-
Boolean Output
-
Search Results (list)
-
Logged In
-
Display Name
-
Email
-
Email Verified
-
Photo URL
-
Is Anonymous
-
User UID
-
Provider Data (JSON)
-
Data Offline
What events are available?
-
Data Layer Updated
-
Signed out
-
Signed In
-
Search Finished
-
Data Offline
-
Data Online
-
Data Deleted
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.
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).
If you want to initialize more than one Main Collection, you can separate them with a comma.
Example: Site_Assets,Public_Data,JS
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.
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.
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/user
The 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)
Get Web Page’s
Server-Side action that will fetch the HTML for a requested site & return the HTML
, The <head>
, <style>
, <body>
& escaped HTML
. The plugin automatically deals with images & links that do not have a host.
Will post the demo apps once they are done being published
Thanks ,
@PWC