Bubble.io and Adalo
29.11.2021
Sarah Berger

How to integrate Adalo and Bubble

While Adalo and Bubble alone are very powerful no-code tools, they both have their disadvantages. In this article, I will show you the advantages and disadvantages of both systems and how to build the perfect app by combining the two no-code tools.

What are the best low-code use cases for using Bubble.io?

Bubble.io is a very mature system. The company started in 2012 and you really see the years of experience and energy they put into the product. Bubble.io gives you many possibilities to develop complex software applications. Whenever you reach the limit of the no-code editor, you can easily add custom code or build your own plug-ins. The really cool thing about bubble.io compared to other no-code platforms is that you get the all building blocks required for a 3-tier software architecture. That means you get the database, a powerful workflow engine and a visual editor for your interface.

The main purpose of bubble.io however is to develop web applications. Furthermore, you can build responsive applications, PWAs, and also native apps (with some plug-ins). However, it is still more effort to develop native apps compared to other no-code platforms such as Adalo.

Main advantages of Bubble.io

Based on my experience, I do see the following advantages:

  • Possibility to develop complex web applications
  • Everything you need in one system, no need of an extra database like Airtable or services like Zapier or Integromat
  • Possibility to add external APIs very easily
  • Functionality to use Bubble.io as your own backend system (we will cover that later in depth)
  • Add your own custom code (e.g. with plug-ins).

Main disadvantages of Bubble.io

As Warren Buffet once said, there is no free lunch, Bubble.io also has some disadvantages to notice.

  • You start with a blank page, which seems frightening at the beginning
  • Long and steep learning curve. It can easily take you weeks or months to understand the system
  • The responsive is a big struggle, especially for beginners
  • Developed native apps or PWAs can be challenging due to responsive issues

What are the best low-code use cases for using Adalo?

Adalo attracts a different target group with different use cases. Most likely, you want to build a rather simple mobile application with Adalo. For example, e-commerce ordering apps, food delivery apps, chat systems, or other kinds of apps displaying and processing simple information. Adalo is rather new but has a very promising future.

The main focus of Adalo is to build mobile applications. While you can also build web applications, the visual editor is specifically developed for the purpose of mobile applications. It gives you a lot of templates and components which you normally use when developing apps or PWAs. Furthermore, it also comes with an integrated database.

While they offer also some possibility to add custom code or develop your own plug-ins, it can be compared to the richness of bubble.io. Important to note that this might change in the future.

Main advantages of Adalo

Adalo is still pretty young, therefore the advantages will be further extended in the future.

  • Very easy visual editor for developing mobile applications
  • Possibility to build PWAs, and apps for both app stores (play store and app store)
  • Many components which guide you through the process of developing the app
  • Integrated database and simple workflow engine

Main disadvantages of Adalo

Due to the newness of Adalo it comes with some disadvantages.

  • Limited opportunity to add custom code or own plug-ins (possible though)
  • The workflow engine is not as strong as you might need it for complex apps
  • Less customization possibility with elements (interface and workflow engine)
  • The workflow engine alone might not be suitable for complex apps

To summarize, Bubble.io is super strong in the backend systems. Furthermore, it requires more effort to build interfaces for mobiles applications. On the other side, Adalo makes it easy to develop the interface for mobile applications. However, it does lack the possibility to create backend workflows for complex apps.

The best way would be to combine the advantages of Adalo and Bubble. This is exactly what we are going to do now ;)

How can you combine Adalo and Bubble?

As you have seen in the list of advantages and disadvantages, we want to build an app with the following requirements. First, we need to have complex backend workflows giving us full flexibility. Secondly, we don't want to waste time developing a native app with Bubble.io with the need of adding additional plug-ins with extra costs.

They are many possibilities for how you can integrate Adalo and Bubble. We will cover the following ones in the article:

  1. List data from Bubble.io in Adalo
  2. Have the sames users in Adalo and Bubble (user synchronization)
  3. Use custom backend workflows in Bubble
  4. Create new data objects in Bubble and update them

List data from Bubble.io in Adalo

Depending on the data and the data privacy you want to show, it is very simple to show data from your bubble application in your Adalo mobile apps. Please be aware of your data privacy rules. Check out the very comprehensive tutorial on how you can use bearer tokens to make your bubble data available outside your application.

Combine Adalo and Bubble to filter and show data
Example to combine Adalo and Bubble to show data from Bubble in Adalo

In the example I created (see YouTube tutorial for a step-by-step) explanation, I developed a food-delivery app. The data for this app however was nearly completely stored in the bubble backend. The main benefit was that I can use the same backend (bubble in this case) for various applications. In this particular case, I had one app for customers and drivers and a web application for admins and restaurant managers. The data however was always in one place and not spread over several applications (which will result in a data nightmare at some point).

Youtube tutorial on how to select and filter data to combine Adalo and Bubble

Have the same users in Adalo and Bubble (user synchronization)

They are situations where you want to have the same users, including roles and privileges, in both systems. One example is that users can log in to the Adalo application as well as into the bubble.io applications. By doing that, you clearly want to have the same credentials for an improved customer experience.

Adalo and Bubble user synchronization
Adalo and Bubble how to do a user synchronization

Another role is data privacy. I can't mention this enough, as I have seen too many bubble.io applications with bad data privacy implementations. If you apply the data privacy rules correctly, you need to have a user-specific token (bearer token) to make any kind of API requests for your bubble.io application. This sounds complicated and in the beginning, you need to have a solid knowledge of APIs and data privacy rules.

Adalo and Bubble API calls for user synchronization
Adalo and Bubble API calls for user synchronization

That's why I did a very long but detailed tutorial about that. With that, you can sign up new users in both systems and log them into both systems.

Youtube tutorial on how to make a user synchronization to integrate Adalo and Bubble

Use custom backend workflows in Bubble.io

If you were diligent so far, using custom backend workflows in Bubble.io and calling them from your Adalo application is not a problem for you. It is basically exactly the same as what we did when creating new users.

You have to understand the following schema:

  • Which input parameters are required and if necessary how can I select them in Adalo
  • Create the custom backend workflow with those input parameters
  • Which kind of data privacy do I want for this custom backend workflow
  • Return the output of that backend workflow (e.g. a value, a newly created object, or a status)

Watch the YouTube video about user synchronization. We do use custom backend workflows in this example for creating new users. You can easily copy the schema and use it for your purpose.

Create new data objects in Bubble and update them

When working with custom actions in Adalo you can choose two different ways to create new data objects in Bubble. The first one is to use the data API which is automatically created by bubble.io for CRUD operations (another advantage you never want to miss again). The second is to create custom backend workflows, as we did when creating a new user.

Create new data objects in Bubble with the workflow api or the data api
Create new data objects in Bubble with the workflow API or the data API

You might ask yourself when to use the data API or the workflow API. As it always depends on the use case, you can think of it in the following ways. If you have simple objects without many variations or relationships with other data objects, you better go with the Data API. However, if you want to create relationships between data objects or check first for feasibility, you are way better off with the workflow API. In this tutorial, I show you both ways.

YouTube tutorial on how to update existing data objects in Bubble.io from your Adalo applications

When to combine Adalo and Bubble to build the perfect no-code app?

If you worked all the way through it, you really learned a lot! The main learnings are not only about Adalo or Bubble.io itself but rather on how to work with APIs, bearer tokens, custom backend workflows, and custom actions.

If you are still unsure on when you should make the effort of integrating Adalo and Bubble, you might consider the following list:

  1. The integration makes sense if you want to use Bubble.io as a backend system for various applications. The Adalo no-code app can be an application, such as an application build on bubble.io itself.
  2. If you want to give users the possibility to access the data and functionality from a good-looking native app and a robust web applications. By doing that, you can also filter which functionalities make sense to have on the mobile phone and which not.
  3. If you have already built up your complete custom backend with bubble.io and want to expand your current feature set to more mobile app specific use cases.

Do you still feel unsure or have trouble integrating Adalo and Bubble. We are only one call away and always help to help.

Du hast Fragen zu diesem Thema?

Kontakt aufnehmen
Biberei Icon

Kategorien

Bubble.io
API
Low Code Architektur
Adalo

Lass uns über dein Projekt reden

Erzähle uns in einem kostenlosen Erstgespräch mehr über dein individuelles Projekt. Wir helfen dir bei den nächsten Schritten und teilen unser Wissen.

Nachricht schreiben