Comment on page
Create your first app
In this tutorial, you will learn how to create your first app using Bravo Studio using our Resorts App as an example.
We are building a simple app with a few screens:
- Figma for the design
- Airtable for the backend
If you don’t have one yet, create an account in each tool:
Let’s get started!
As we're using a sample app, we are going to duplicate the design template and connect it to Bravo:
2. In your duplicated file, click Share, then
Copy link. Make sure the permission for "Anyone with the link" is
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 your Figma design is 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.
- Top bar:
- Resort card:
Learn more about Structuring the design and Bravo layer hierarchy. 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. Find detailed information in our Bravo Tags Masterlist.
After making any changes in the Figma file, make sure to click the
Updatebutton to sync your Figma file with Bravo.
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.
Duplicate this Airtable base above to your workspace:
3. Go to Airtable. On the top right, click
Share publiclyand copy the shared base link:
4. Go back to Bravo and paste the shared base link into the “Enter URL” field. Then, click
5. Go to Airtable again, click on your account in the upper right corner of the screen. Here you'll see a dropdown menu appear. Click the Developer hub option. Or if you are currently signed into Airtable, you can click here to access the developer hub.
Create tokenfrom the Personal access token tab.
- 7.Set a
Name, for example: Bravo API key.
+ Add a scopeand select
+ Add a baseand select All workspaces (you may select a specific base if you want).
Create token. Make sure you verified your email first.
- 11.A new modal shows up: Your token has been created. Copy the token.
- 12.Go back to Bravo and past the token in the
Enter API Keyfield and click
Now that you have the design ready and the database imported, we will connect both and add them functionality. First, we need to create API requests in Bravo with the Airtable API endpoints:
As we have selected the Airtable Wizard option, Bravo created two requests automatically per table: “List” and “Detail”.
- The “Detail” request displays to display data corresponding to the selected item on the previous app screen. Additional details can be found in the section on Set up an API GET request for a detail page
Furthermore, all received data is pre-selected for convenience. Within the Selected Data tab, you can modify the variable names for each of the chosen data sets.
Binding refers to the process of connecting data from API requests or the backend to the app design. This enables dynamic and interactive experiences by integrating real data into the app. There are two modes of binding: static and dynamic. - Static binding: Allows using variables from the backend or other API requests. - Dynamic binding: while dynamic binding enables real-time updates and interactions with the app. For additional details, please consult: Connect data to your design.
The previous step, selecting the data from the API request, 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 Your first Bravo app.
- 2.On the left hand side of the screen, you will see your
Screens. Select the "Resorts list" page.
When you select the Screens, you enter data binding mode. In this mode, you can assign data from the API to each UI element in your design file.
- 3.Select the UI element labeled "Resort card". Alternatively, you can also select the UI element you wish to bind directly from the app image located in the center of the screen.
- 4.On the right hand side, under
List Item, select the API request
Records. This binding will create as many “cards” as rows in the database.
We have done our first binding! Let’s continue with the rest of the elements.
- 5.On the left side of the screen, select the Resort card and select the
*Imageproperty. You can also select the UI element you wish to bind directly from the app image located in the center of the screen
- 6.On the right side of the screen, under Element binding, keep the request as:
GET “Resorts-list”and choose the data point
images 0 urlfor the Image URL.
- 7.Repeat the same steps for
*Name, *Country, *Price and *Rating, which have the same name for the data points.
- 8.We have bound our Resort list screen to the backend! 🎉
- 1.On the left side of the screen, under
App screens, select the "Airtable - Restaurant detail" screen and from the data binding section, select
- 2.On the right side, under
Element bindingsection, select the
GET - "Retrieve restaurant detail"request and finally choose
Field Photo Urlwhich corresponds to the image URL.
3. Repeat the process for the rest of the UI elements with an asterisk *.
Pro tip: Since we have added an asterisk in Figma to every element that needs to be bound, you can instantly search for all of them by typing an * symbol in the Search field.
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 Your first Bravo App. Tap to open it.
Once you have bound all the elements, the list of resorts should be visible, along with the image, resortt name, short description and cost and if you open a resort, you will see each resort details coming from your backend. 🎉
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.
You have completed your first app tutorial with Bravo!
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.
In case you've skipped step 5.2. Binding the detail page, 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. Bind that screen to fill it with content from the API. Go back to Bravo Vision and tap on a resort from the Resort list page. You will see that now it shows the correct content. If not, pull to refresh and voilà! 🎉
Happy Bravorizing! 🎉