Announcing a new plugin (a personal favorite), Air Database Diagram
This plugin allows you to visualize your bubble application data structures.
It creates a simple (scruffy) diagram of your Things and their relationships with other Things.
Fields that are references to other Things are clearly marked.
Here is an example showing an example of the output of the plugin for a shopping cart application.
Here the diagram shows that our application has the things User, Order, Orderline, Product, Tags.
A User has a cart which is an Order. A user also has a placed orders which is a list of Orders. So cart and placed orders are foreign keys in the User table indicated by ⚷ on the fields. Lists are indicated with * .
An order has a list of Orderlines and each Orderline is associated with a Product. Finally a Product has a list of Tags. Then there are all the other fields including the unique ids. There was not point indicating the unique id as the primary key since each table will have it.
Here is another example, showing an even bigger application. This time we’ve applied some random colors to the table. (The diagram is intentionally blurred here to hide details)
What are the use cases of this plugin
- As a developer/freelancer to visualize my clients application data so that I can quickly start my development.
Actually this is the reason i built this plugin. I often get clients who come with a template they want me to modify and add new features. I use this to quickly understand their data structures and relationships. - As a client to help my developer understand my data so that they can quickly start development saving me money and time.
As you all know bubble consultation costs some money ($50 - $120)/hr. So imaging hiring someone to make some quick fixes in your application. They will have to spend some time understanding your data and this is time you have to pay for. With this plugin you can quickly create a diagram of your data to send along your application so that you save some time and money with your developer. - As a developer to document the application so that other third party stakeholders can understand our application data structure.
No need explaining your data in text as i did with the shopping cart example above. Just install the plugin, create your application database diagram, and save the image so you can add to your documentation.
For example if you’re hired to modify a template or an existing application. You can create a database diagram for the before and after your work so you can easily highlight changes you made to your clients data.
Since bubble is a visual language it was time we get a way to visualize our data too.
FAQ.
- How much? Free forever.
- Where is the image stored? The image is not stored anywhere. When you open the page with your diagram, a call is made to generate your diagram and displayed in your browser.
- How do i save the image? Just right-click on the image in your browser and save. It’s just an image html element. Will be downloaded as a transparent png
- Can you add feature A, B, and C? Yes if it is possible. For example i’m planning on adding a way to zoom in and out. Also in the next update i will add ability for you to hide the fields and show only the data relationships.
- How do you get my application data to draw the diagram? This plugin works only if you’ve allowed your application to expose a data API. So the plugin simply just reads your applications public metadata (definition of your data). So even if you’re not exposing an data api you can just enable it to generate your diagram and disable it again. See instructions below.
- Can i buy you a beer because i love this so much? Thanks. I don’t drink beer but will take coffee
Installation instruction:
As you may expect this plugin relies on the database metadata. Therefore will only work with applications that have enabled “This application exposes data API”.
- If your application already exposes data API skip to step 4.
- Go to the Settings page and on the API tab, check the option: “This app exposes a Data API”
- Check the data types you want to display in your database diagram
- In your bubble editor add the element, Air Database Diagram
- Enter your application domain name (e.g. myapplication.bubbleapps.io or myapplication.com)
- Choose which version of your application you want to use, live or development.
- Choose the other options including the style, whether to use color, scale the diagram and the direction you want to diagram.
- Preview your page. Might take a second or two depending on the size or your diagram.
Please note, for very large diagrams it may take about 3 seconds or so to generate the image. Once i add the ability to ignore the fields it will load a bit faster.
Enjoy and happy bubbling