Bubble app: create an app with Bubble.io

If you are interested in the world of no-code app builders, you have certainly heard of Bubble. Since 2012, the tool has allowed you to create web applications without having to code a single line. A small revolution in the tech world! But how do you create a Bubble application? Scroll, an agency specialized in no-code, tells you everything.


What is Bubble.io?

Bubble.io is, in their words, “the best way to create an application without coding.” In fact, it is a SaaS tool (Software As A Service, a tool therefore accessible online through a subscription system) which is based on the no-code technology.

The tool is based on the concepts of Drag and Drop and WYSIWYG (What You See Is What You Get). Concretely, under these acronyms and these anglicisms lies a simple idea: Bubble natively offers you a certain number of actions that you can perform. By selecting them and adding them to your workflow, you can create logical sequences to create an application. And all without having to code a single line. Bubble allows you to visually assemble the actions, and takes care of translating all this into code for you.

Bubble is therefore a small revolution on several levels. First, the tool allowed more people to create applications : this world is no longer reserved for developers alone. Second, it makes it possible to create web or mobile applications more quickly and easily.

You might think that this has a technical cost: by using Bubble, you are limited by the actions that Bubble offers precisely. So there is a limited number of applications that can be created. In fact, however, Bubble offers a huge choice of possible actions and connectors to other apps. So you are not restricted when creating apps on Bubble.


Examples of applications created with Bubble

Proof of this is: many start-ups (and even well-established businesses) use the solution. With Bubble, you can create numerous applications, such as marketplaces, Saas, social networks or even internal tools for your company such as CMS or accounting software.

A concrete example of an application created with Bubble? Comet.co, a platform for recruiting freelancers that raised 11 million euros in 2018, created its application thanks to Bubble. The technology has since changed, but it shows the seriousness and robustness of the solution.


Bubble.io is also often used to design MVPs (Minimum Viable Product, which is the minimum version of a product, which will allow you to get customer feedback to make it evolve in the right direction). Of what launch your start-up quickly thanks to no-code. Indeed, thanks to its numerous functionalities and the ease with which you can add features to an application, Bubble is an excellent choice for this kind of operations.


How to create an application with Bubble

We come to the crucial question: how do you create an application on Bubble?

While no-code has a reputation for being more accessible and easier than code, know that building your application on Bubble requires knowing the tool and its ecosystem. The learning curve can be tough, but once you get the hang of the solution, you'll be able to build applications more quickly.


The first step will be to come up with an idea for apps. It is not necessarily the easiest, but even then you will be supported by Bubble's resources. The tool indeed offers numerous examples of uses, templates and plugins that you can browse and use freely. You will find lots of ideas for your application and you will save a lot of time using them.


You will then need to create an account on Bubble to access the production environment. This is where the bulk of the work will be done.

The Bubble interface is composed of several tabs.


Design: the tab to give shape to your Bubble application

It is in this tab that you will edit the visual part, the UX, the interface of your app. Bubble allows you to create buttons, add images, fields to fill in, in short, to create a web page like any other no-code CMS like Webflow. You can either create your template from scratch or by using one of the available templates.

Note: designs created with Bubble can be fully responsive.


Workflow: the core of your Bubble.io application

This is undoubtedly the heart of the tool, where you will create your Bubble applications. The Workflow space allows you to create automated scenarios thanks to a logical sequence of events/actions pairs. Each “stage” of your workflow is in fact made up of two facets: an event, which is a trigger that triggers the step, and one or more actions that take place when the event occurs.

In this space, there are many basic parameterized events. You can then choose one of them and give it a consistent action. You also have the possibility to set up your own custom events, to personalize your application as much as possible.

Once the event is configured, the logical actions linked to this event are triggered. Again, you can choose between actions already predefined by Bubble or custom actions, to be configured yourself.

The operation is therefore very simple: for a stage, you choose a triggering event and the resulting actions. A concrete example? In your Bubble application, you can take the “When a user registers” event and associate it with the “Send a confirmation email” action. Thus, each time a new person creates an account on your web app, they will receive an email confirming account creation.


Data: enrich and personalize your application

Third tab in the application creation interface on Bubble.io, the Data tab. Again, it is extremely important: it is on it that you will save your data and tables that you can reuse in your application.

This tab will allow you several actions.

Data types. Basic, Bubble already offers some, such as users with their login, ID etc. But you can create your own and associate the data you want with them.

Custom Fields: by filling in custom fields, you can add variables to your data types. Let's take the example of Users again: in addition to their name, first name, surname, login, password, you can add other information that you may have collected: age, address, number of orders made...

These Data Tables that you create, you can then reuse them in your application at the Workflow level. Bubble allows you to retrieve data from your data to use them in the logical schema of your application. Interactions with the app can therefore become truly personalized, based on the information given by the user.


Styles: unifying the look and feel of your Bubble application

The Styles tab in Bubble allows you to create style rules for your application. So you can choose the fonts, themes, colors of your application. Making a change in styles will change your entire app, so this tab allows you to unify the look and feel of your app.


Plugins: add new elements to your Bubble application

The Plugins tab allows you to connect other tools compatible with Bubble via API, to allow you to customize your application even more. Most of the popular digital tools are available: in total, Bubble offers hundreds of integrations and allows you to connect the ones you want yourself. Theoretically, the possibilities are therefore unlimited.

For example, you can connect Airtable, Slack, Gmail, Gmail, Gmail, Instagram, Instagram, Google Analytics, and more, depending on what you want your Bubble app to do.


The other Bubble tabs

Bubble.io offers two other tabs: Settings, to manage the various settings of your account, and Logs, to find all the entries, changes, and modifications made to your Bubble application.


Scroll, your Bubble application creation agency

At Scroll, we are specialists in no-code tools. In particular, our Bubble agency will help you understand the possibilities of this tool, to create no-code applications with Bubble able to respond to your problems.

Do you want to know more? Do you have a project idea and are looking for ways to make it a reality? Do not hesitate to send us a message using the form below! A Bubble app creation specialist will get back to you to discuss it with you.

A project ?
Scroll is there for you!
Share this article:
Un téléphone, pour prendre contact avec l'agence Scroll