Back to integrations

Bubble

Build native mobile iOS and Android apps on top of your Bubble app.

Build a mobile app from your Bubble Web App

Want to build mobile apps with Bubble? You’ve landed in the right place. With Bravo Studio you can 

build native mobile iOS and Android apps on top of your Bubble app. Let’s have a look at how to do it 

Steps for turning your Bubble web app to a mobile app

If you have an existing Bubble web app and want to create and distribute a native app in the App Store and Google Play Store, you just need to follow a couple of simple steps to connect Bravo Studio to Bubble.io’s REST API. 

You can also decide to use Bubble as your backend and Bravo Studio as your frontend. There’s a ton of possibilities out there in the no-code world. 

First, what’s the Bubble.io REST API?

The Bubble API enables users to access Bubble's platform programmatically in order to send requests to Bubble's servers, trigger app workflows, or read app data. Bear in mind that to access Bubble APIs you will need to have a paid plan for your Bubble App.

How can I use the Bubble.io REST API with Bravo Studio?

First, you will need to design your web app in Figma or Adobe XD. The advantage here is that you will be able to design your app with native components. Once you have your design ready with the corresponding Bravo Tags, you can import your design in Bravo Studio to turn into a native app. Thereafter, you will just need to bind the design elements with your Bubble backend data.

How to use Bubble as a backend for your app

Setting up Bubble

First, you’ll need to create a new Bubble App. Go to settings -> API and tick the boxes to enable the workflow API, data API, and user. Record the Workflow API root URL as you will need it later.

This will enable you to see the backend workflow editor in the top left dropdown.

Then you should go into the backend workflow editor and add a new workflow (General -> New API workflow)

Call the new backend workflow login and enable it to run without authentication. Also add in two parameters email and password which will be the parameters used to do the authentication as below.

Then click to add an action and add an action to sign the user in (Account -> Log the user in).

Complete the details for this step by connecting the email and password to the email and password field of the endpoint. Also choose “yes” to remember the email.

In the workflow editor add another workflow this time called signup, again allow it to be run without authentication and add email and password parameters.

For this signup workflow add an action to sign the user up (Account -> sign the user up).

Complete the details for this step by connecting the email and password to the email and password field of the endpoint. Also choose “yes” to remember the email.

The login and signup APIs are now ready to be used for your Bubble app. The signup API is <Workflow API root URL>/signup and the login URL is <Workflow API root URL>/login (using the root URL from step A1).

Setting up Bravo API access

First you need to login to Bravo. Then, you’ll need to import your Figma or Adobe XD file. Then click on Data Library in Bravo on the left hand side. Click on New Collection. Click on ‘Blank Request’ and name it. We’ve named it Foodgram as an example. 

4. Click on the + button next to Requests to add a new request for each of the following 2 requests (NB the <Workflow API root URL> comes from step A1 above.

Signup

Name: Signup

Type: POST

Request URL: <Workflow API root URL>/signup

Headers : None

Parameters:

  Key = email, Value = noone@none.com

  Key = password, Value = noone

Body (JSON):

{  

  "email" : "${email}",

  "password" : "${password}"

}

Once you have inputted the above hit the blue send button for this request to create the test user and to check everything is working okay.

Login

Name: Login

Type: POST

Request URL: <Workflow API root URL>/login

Headers : None

Parameters:

  Key = email, Value = noone@none.com

  Key = password, Value = noone

Body (JSON): 

{

 "email" : "${email}",

 "password" : "${password}"

}

Once you have inputted the above hit the blue send button for this request to get sample data to allow the received data to be set up for this request.

Make sure the .data.response.token field is ticked and then in the Selected Data tab change the field’s name to token. We can reference this name as a variable in other requests to allow the request to pass authentication.

Bind APIs to Design in Bravo Studio

Now that we have the APIs in Bravo the last step is to connect them to the app design. Go into your app in Bravo so you can see all the screens.

First, click on the Signup screen to edit the binding for this screen, choose your app’s collection and then the signup request

In the Select Visual Elements list Click on the username element and connect it to email in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.

Click on the password element and connect it to the password in the binding panel on the right hand side Change Response Actions — on success to Go to Page — Login.Change Response Actions — on failure to Show Alert with the text ‘Signup Failed’.

After doing this, click on the Login screen to edit the binding for this screen, choose your apps’ collection and then the login request

In the Select Visual Elements list Click on the username element and connect it to email in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.

Click on the password element and connect it to the password in the binding panel on the right hand side. Change Response Actions — on success to Go to Page — Home Screen. Change Response Actions — on failure to Show Alert with the text ‘Login Failed’.

You have now connected your Bravo App to Bubble for Authentication!

If you need to make later requests that need Authentication, you can just add a Header with Key: Authorization and Value: Bearer ${token}. As Bravo remembers the token at login (we named .data.response.token as token in step B), we can pass it to later requests.

Benefits of using Bubble as backend for your mobile app

There are a lot of Bubble apps out there, but as it's web based there are times in which you need to offer your users an enhanced mobile experience. This is when Bravo Studio comes in really handy and helps you create native mobile apps in just a few steps! Start Bravorizing today for free! 

Join 100,000+ Bravistas today

Turn your Figma designs into powerful, design-first mobile apps
Get the best of Bravo straight to your inbox.
Subscribe to receive new updates, offers and resources.
Thank you! Your submission has been received!
😖 Oops! Something went wrong while submitting the form.