🚀
Create your first app with Bravo
In this tutorial, you will learn how to create your first app with Bravo Studio with the Foodies Sample App. We will use Figma for the design and Airtable for the backend.
First, create an account in each tool if you don’t have one yet:
Bravo Studio is the piece that connects the design and the backend to build a fully functional app. Unlike other app builders, Bravo leverages the design and the data handling of third-party tools, adding flexibility to the process. In summary, to create an app we need:
- Figma or Adobe XD to design the UI
- Any backend with a REST API to store the data (this one is optional though)
- Bravo Studio to add functionality by connecting the design with the data. We call “binding” to this process.
On the one hand, since the design part is leveraged to Figma or Adobe XD you can benefit from the power of these tools in a number of ways:
- They are the standard in the industry, offering lots of features and great UX
- Most designers already know how to use them
- Both have a huge community of users
- Even if you are not familiarised, there are a lot of tutorials and learning material
The same goes for the backend. With Bravo you are able to connect to any public API and get the data into your app. There are lots of no-code backends that you can use, for example:
What Bravo does then is to add functionality to your app by connecting the data with the elements of the UI. For this we need to use Bravo tags, a list of text strings placed in the elements of your design file, that Bravo converts into native components (both iOS and Android). We will cover more of this in the future.
For this introductory tutorial we are building a simple app with a few screens:
- 1.A list of restaurants
- 2.A detail page to show more info and images
- 3.A modal page
Let’s get started!
First off we are going to duplicate the design template and connect it to Bravo:
- 1.
2. In your duplicated file, click
Share, then Copy link. Make sure the permission for "Anyone with the link" is can view.4. Paste the link from step 2 into the input field. Click
Connect Bravorized Figma file .5. Once the app is successfully created you will see the app screens imported from your design.
Now that you own the design file and you have it connected to Bravo, let’s learn a little about bravorizing.
We call bravorizing the process of setting up your design file for being converted into a native app by Bravo Studio. In general, bravorizing consists of:
- Structuring layers as required by each Bravo component
- Adding Bravo tags to add functionality and structure
There are a lot of Bravo components that you can use in your app: Menu, Swipe page, Carousel slider, Modal page, Map, Form and more. To set up a component we put Bravo tags within specific layers structure. The most elementary tag that Bravo requires is
[container].Containers wrap the UI elements and separate them from each other. You can think of them as blocks. In our first app screen, we have two
[container]: named “Top bar” and “Restaurant card”..jpg?alt=media&token=39ab930c-9848-49ad-a431-3a47f9584623)
Bravo tags not only work for components or containers, they are also used to add actions to buttons, set the app icon, form input fields, etc. They convert the tagged layers into native mobile elements.
Types of Bravo tags
Explore the layers in the design file and see how Bravo tags are used in the app.
A backend is a server that stores data and provides APIs that you can connect to get the information for your app. Think of APIs as an intermediary that allows two applications to talk to each other. In this case, Bravo and the backend, an Airtable database.
One of the greatest core values of Bravo is flexibility. In Bravo, you can create connections to any backend that provides an API. For our app, we have built a database template in Airtable, one of the simplest (yet powerful) no-code databases.
Now that you have the design and the database ready, we will connect the two and add functionality. First, we need to create API requests from Bravo to the Airtable API endpoints:
- 1.
2. Click Airtable Wizard
3. Go to the Airtable. On the top right, click Share → Share publicly and copy the shared base link:
4. Go back to Bravo and paste the shared base link into the “Enter URL” field. Click Continue.
5. Go to Airtable again, click in your avatar image on the top right and select Account. Copy your API key.
6. Paste your API key in Bravo and click Complete.
Congrats! You have created your first API requests for your app.
.png?alt=media&token=5291bda8-7524-4fc1-a5ce-17675d5fe8f8)
As we have selected the Airtable Wizard option, Bravo created two requests per table: “List” and “Detail”.
- The “List” requests display all the data from the endpoint.
- The “Detail” request displays data based on the item selected on the preceding app screen.
Furthermore, all the data received have been selected automatically. In the Selected Data tab, you can modify the variable names for each data.
.png?alt=media&token=9a368838-0c14-4916-9de3-128bac4266db)
.png?alt=media&token=27f7c323-9254-4b52-9e70-234dfa18b5bc)
This will allow us to assign (bind) each data point to its correspondent UI element. Let’s do it!
- 1.In Bravo, go to Apps and open the Bravo Sample: Foodies app.
- 2.On the left hand side of the screen, you will see your app screens. Click on the "Airtable - Restaurant list" screen.
.png?alt=media&token=af229a7d-bb78-428a-a549-4dd6ace4616d)
You have entered data binding mode. Here you can assign data from the API to each UI element from your design file.
1. Click “Restaurant card”. In the data binding section, choose property “*Restaurant card” and select request “Retrieve restaurant list” → “Records”. This binding will create as many “cards” as rows in the database.
.png?alt=media&token=3432bdd8-1146-4f79-a62d-022690359b5c)
We have done our first binding! Let’s continue with the rest of the elements.
10. Toggle the *Restaurant card and choose property *Image and select data point “Records[] Fields Photo[0] Url” which belongs to the Image URL. (The request “Retrieve restaurant list“ should be already selected)
11. Do the same for *Name, *Description and *Cost, which has the same name for the data points.
.png?alt=media&token=619f3ebb-8476-494b-8795-b0b9264711aa)
We have bound our Restaurant list screen to the backend! 🎉
It’s time to see our app live: Download Bravo Vision from the app store:
Now open the app and log in using your Bravo credentials. You will see our app Foodies app. Tap to open it.
.png?alt=media&token=1b454b79-2ac3-4c9b-a119-f84f6ab2e85f)
The list of restaurants should be visible, along with the image, restaurant name, short description and cost.
Now open a couple of restaurants. You will see that it shows the same content for all of the detail pages (the template content). That is because Bravo shows the design content by default. Let’s bind that screen to fill it with content from the API.
- 1.Go back to Bravo Studio and open the "Airtable - Restaurant detail" page
- 2.From the data binding section, select *Image and on the other side, the Element binding section, select the Retrieve restaurant detail request and finally choose "Field Photo[0] Url" which corresponds to the image URL.
.png?alt=media&token=4039be64-b8e6-4467-a25f-3a70ff2ebed3)
3. Repeat the process for the rest of the parameters with an asterisk *.
Pro tip: Since we have added an asterisk to every element that needs to be bound, you can instantly search for all of them by typing an * symbol in the Search field.
Once you have bound all the elements, go back to Bravo Vision and tap on a restaurant from the Restaurant list page. You will see that now it shows the correct content. If not, pull to refresh and voilà! 🎉
Another cool feature of Bravo is live updates. Once your app is live on the app stores, most of the changes won’t require the users to update to a new version of the app. That includes changing the design, adding new app pages, changes in bindings and more. Your users can instantly enjoy the latest version of your app without any hassle.
Our app is complete! Now you can keep learning the power of Bravo by doing changes to the design, adding more content to the database or any idea you come up with. Remember to update the design in Bravo every time you do changes in the Figma file.
Happy Bravorizing! 🎉