Bubble

How to connect Bubble with Bravo Studio

Bubble is a no-code platform for building web apps. Its API allows Bravo to connect and use it as a backend for your native app.

UPDATE — Since this article was written we have added a custom login feature which simplifies authorising requests. Learn more about custom authentication.

There are a lot of Bubble apps out there, but as its web based there are sometimes when you want to able to create a native mobile app version as well. Using Bravo Studio you can create a native mobile application and connect it to you Bubble App using APIs.

In this tutorial I will show you how to connect a Bravo Studio App to a Bubble backend and authenticate using Bubble.

To access the Bubble APIs you will need to have a paid plan for you Bubble App.

A) Setting up Bubble

1. 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.

2. 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.

3. 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.

4. 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.

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

6. 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).

B) Setting up Bravo API access

1. First you need to login to Bravo (you can signup for free here)

2. Next import this example app file https://www.figma.com/file/hfnAB1WYyhml2cjCiQ6I79/Foodgram-Bubble-Example?node-id=0%3A1 (we are only going to use the login and signup screens for this exercise, but for your own apps you can just copy these to another figma file).

3. Click on API Library in Bravo on the left hand side. Click on New Collection. Click on ‘Blank Request’ and Name it Foodgram Bubble Example

4. Click on the + button next to Requests to add a new request for each of the following 2requests (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 = [e-mail]
  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 = [e-mail]
  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 setup 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.

C) Bind APIs to Design in Bravo

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

1. Signup

Click on the Signup screen to edit the binding for this screen, choose the Foodgram Bubble Examplecollection 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 thepassword 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’

2. Login

Click on the Login screen to edit the binding for this screen, choose the Foodgram Bubble Examplecollection 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 thepassword 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 you 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.

This tutorial was originally posted in Medium By Toby Oliver, CEO of Bravo