Want to build a blog, use WordPress, want to build a professional or web store use SquareSpace, want to build software as a service use Bubble. There are so many web-building tools out there that help people create professional and responsive websites for businesses, internal tools, blogs, or just about anything else you can dream up. The issue with most of the basic ones is that it becomes difficult to implement custom functionality. This is where Bubble and their No-Code service comes in, for those that don’t want to go all the way down the AWS route.
Bubble.io is a service for building these custom websites that still provide an intuitive building environment that does not require you to know how to code.* This is a bit of a misnomer for me coming from a computer engineering background since I am not averse to coding or learning new languages (which I did have to do eventually for this). But the “No Code” essentially works out to a graphical coding interface that allows you to “program” workflows for actions like button clicks, or if a condition is met. The visual aspect of the builder allows you to add text boxes, buttons, groups, etc. The service also has a nice built-in capability for logging in users, handling custom data, and managing subscriptions.
Purpose
I found this product because I wanted to build a dashboard and analysis software as a service for monitoring Helium Hotspots. This is because I wanted an easy way to see how my hotspots were performing in one spot and collect some analytics about their performance in comparison to hotspots around me. This led me down this deep rabbit hole of learning this interesting software.
Basics
There is a ton to cover in this section and I will most likely miss a lot here but this is just to provide you with a quick overview of the basics you want to use to make your website with Bubble.
The best thing to do is to start browsing the main bubble website before starting an app. This is because there are a plethora of templates and plugins that you will want to be aware of before you start implementing features from scratch. There is even a dashboard template that I took some ideas from. But I ultimately decided to start from the basic Bubble starting template, but you could start from a blank canvas as well.
I would also suggest following their academy tutorials that walk you through making some basic apps so you understand the tool workflow and can navigate around the development interface.
The Editor
If you followed along with the academy this should all be information that you already know, but if you have not plunged into Bubble yet the Editor is the main interface that you use to build your website. It has a variety of tabs that allow you to add pages, elements, create workflows, manage data, and the settings of your site.
Pages
Pages form the basis of your website. They are used to display information to the person interacting with your website. They should divide your website into logical sections. This includes major structural changes, like going from a landing page to a dashboard page, or to a pricing or help page.
pages get divided into groups. Groups in Bubble can simply be logical containers that hold related text, buttons, graphics, etc. But groups can also do more complicated functions, like the repeating group which can be used to display a list of like items.
Elements
Elements are the objects that you add to pages and groups like text, images, buttons, checkboxes, graphs, text input, icons, etc. These can be selected from the left-hand toolbar. This can be seen in the editor image above.
Styles
The different elements you add can be configured into a specific style. For example, a text element can have a different color, font, size, etc. The basic app has some pre-defined styles that you can select from, but if those do not meet your needs you can select a blank style in order to quickly define the element, or if it is something you will use repeatedly you can create your own defined style that you can then select in subsequent elements.
Bubble Data
Data in Bubble can be found in the data tab in the far left toolbar. This shows the different data types you have defined in your app. This is akin to an object in programming, where you can define it to have categories like a name (as text), creation date, value (number), etc. you can also designate a category to be lit of things. like a list of numbers or even a list of another data type. This is useful for creating functionality in your app by saving data for future retrieval or modification.
All data types are limited to base data types like text, number, date, boolean, etc and list versions of these types. So that data can’t be arbitrary. This means that the Bubble environment acts like a strongly typed language where one this needs to be specifically cast into another if you want to assign it to that data entry. This needs to be taken into account when you want to start extending the functionality for more advanced features.
The User
The User data type is the most key piece of data in an app. This is because it holds all the permanent data related to a specific user that has logged in. When a user logs into your app it allows them to access the private data that they have created and stored in the app. This could be information like their name, email address, or in my dashboard example, the hotspots they want to track.
Actions and Workflows
What happens when you click a button or text on a web page? something changes as a result! In Bubble, you need to define these actions for every button or element you want to have dynamic functionality. This is done using a page’s workflow tab. From here you can define what will happen when the page is loaded, or a specific element is clicked. These actions can also have conditional statements associated with them. Such as “go to a page when this button is clicked and the user has checked a check box” for an agreement acknowledgment.
These actions can be used to fetch data from an API, navigate the user around your site, process payments, run code, or trigger other events to take place.
View
The view is what is currently displayed to the user at any given time. This can be used with groups and or specific elements to toggle which things are in view to the user based on how they are using the app. The toggling can be done through the use of buttons and actions that I described above. This allows you to quickly show different things to the user without having to load a new page every time. This comes in handy in a dashboard application so you can show different parts of the dashboard such as settings, a new graph, or some specific data.
Groups are initially set to be visible on page load but can be changed to not do so, at that point they show up in the elements tree where you can toggle them on and off during your UI development or responsive design process.
Popups
Popups might just define the modern era of web surfing, these can take the form of obtrusive ads but in Bubble, they are a nifty way of displaying important information to the user. They are a special group that overlays the current page when the view is enabled.
Floating Groups
These groups can be used to follow the user as they scroll around the page. They can take a good amount of time to grasp and to get right on your web page, but once you get the hang of them they make really good menu groups where you want the user to always have quick access to navigating around.
Graphs
A graph plugin is needed for this functionality, but it can be used to display data points from list type data or in my use case HNT earnings overtime for an account or a hotspot. You can find a link to the Chart Element in the Plugin Section below.
Reusable Elements
A reusable element is a piece of your design that you will use on multiple pages, this could be something like a Header or Footer, or a Login/Signup Popup, etc. These are set up like pages where they have their own workflow tab for their elements. These reusable elements can then be added to your pages without the need to re-create them for each page.
Plugins
This is where things start to get interesting! Bubble has a plethora of Bubble-built plugins that allow you to quickly extend the functionality with third-party APIs. This is most evident in the Stripe Plugin that allows you to process subscriptions and payments. But there are others that integrate google maps, create fancy charts, or run code! There are tons of plugins on the Bubble marketplace that cover almost anything. Though if you can’t find what you want you can also build your own using Javascript.
The API Connector Plugin is probably the most powerful piece of Bubble. This allows you to enable complex features in your app using external APIs that do not have a dedicated or free connector. I used this to interface with the Helium API, and it automatically formats the returned JSON into a Bubble-like data type.
The Stripe Plugin is critical to implementing subscriptions for your app. The plugin integrates with the User Data type which makes it easy to sign a user up for a specific plan and track what plan they have so you can provide them with the correct features. It also allows you to start in a test mode, so you can work out payment bugs before ever having to move any money around!
You will need to set up a Stripe account on their site to https://stripe.com/
The Chart Element Plugin is a basic plugin provided by Bubble that allows you to graph simple bar or line charts.
The ListShifter Plugin was something that I thought would have been built into the core functionality of lists in Bubble, but that is not the case! This plugin looks complicated at first but essentially allows you to reverse or barrel shift a list by some amount. This becomes important for things like the repeating group when you want the newest thing to be on the top or you want a graph to display dates from left to right.
The Toolbox Plugin was another plugin that became essential to the functionality of my app. this is because it allows you to run custom JavaScript code and return the results back to Bubble. This was all and dandy but you could only return basic Bubble data types, not any of the ones you had created. So this left me in a pickle of how to get all my data back into Bubble so I could display it to the user. This is where the next plugin comes into the picture!
This is a great video of how to use the Toolbox Plugin to run javascript in Bubble.
The JSON Machine Plugin became the solution to my problem of getting all the data from my custom script back into Bubble. What this plugin allows you to do is parse a string or Bubble text as a JSON object. So my custom script could just return JSON formatted as strings with JSONStringify and this could be used to find an associated key that I could display on my web page.
These were just a few of the plugins that I found necessary for my app.
Design
This could be its own post on how to design a responsive and pleasing website to use. Bubble does not display static web pages, the elements that you place on pages need to be responsive. This means that users on different sized screens or zoom levels will see a design that moves the elements around automatically to better fit the display. This can cause some maddening headaches since what you place in the UI designer does not show up the same way in the preview.
The best advice I can give you is to be patient, watch the Bubble video tutorial on it and experiment over various screen sizes and zoom levels as you build. To be successful with this you need to use the element intelligently by grouping elements and defining their base responsive characteristics in the Responsive Editor. And no just setting things to fixed width does not solve the problem at all!
The App
Now I will briefly describe how I set up my dashboard app and some tricks I learned while creating it that might be useful for future bubble app developers.
Creating Base Pages
For my applications index page (main landing page) I basically copied directly from the Bubble base app. Moving only a few things around and adding my own app information to the current layout. This was basically the same for my Help page and Pricing page. I just cloned the index page for each and deleted the things I didn’t need adding a few groups, buttons, images, and icons along the way.
Base Site 
My Site
For the pricing page, I did add a subscription workflow that integrated with Stripe but just followed this very informative guide below to get that working.
Creating the Dashboard
This is one of the most complicated pages of my app as it contains almost all of the views that the user will interact with. To make it easy for the user to navigate around those views I created a simple menu bar on the left that contained text and icons that the user could click to change views.
To make this more polished a floating group can be used to have the group follow the user as they scroll.
Tip: A good idea when creating clickable text is to change the text style when the user hovers over the text element. This indicates that the user can do something with this. This extends to groups as well. Buttons in Bubble do this by default. This can be done in the condition tab of the element or group.
Once I had the menu I could add groups that corresponded to each, one for the main dashboard and one for things like user settings. I then added groups inside this main group for each menu item so that when the view is changed everything gets updated accordingly.
Tip: To create a responsive menu it might also be a good idea to change this to a horizontal bar if the page width is too small. can be done in the responsive development tab.
Then comes the tedious part of this whole process adding functionality one at a time from simple things like letting the user change their name or avatar image, to more complex tasks like fetching data using the API connector. It would literally take me forever to explain every aspect of this so I’m not going to. You need to write down all of the functionality that you want your app to have and just start going for it!
Once you get core functionality working (the thing that makes your app special and marketable), then you can implement all of the other boring users add, delete, change, warning popups, tooltips, etc that will make it friendly to use.
The other big hurdle that you will encounter is if you decide to allow your users to pay for a subscription. The integration with Stripe makes this easier but not easy. This is because you need to somehow limit the user’s interaction with your site based on their tier level. I have found a few ways to make this easier. The first and easiest way is to embed conditions into buttons which make them unclickable if a condition is met. This could be as simple as “user’s plan is basic” or “user’s Stripe subscription is active”. Doing this functionality in the workflows is also possible but the buttons allow for more separated conditions if things get more complicated than a single “and” or “or” statement. I do wish there was better state flow in the bubble editor as you need to basically work out all these conditions and test to make sure the user cannot reach an unintended state.
Workflow 
Button Element
Conclusion
I have definitely learned a ton over the course of creating my own dashboard website. It has been frustrating at times but that’s part of the challenge of learning something new. And as I always say it’s best to have a project or an idea behind learning new things, as it gives you the drive to persevere.
If you want to take a look at my completed site you can check it out at the link below.
