---
description: Learn the essentials of Bravo with this beginner's tutorial.
---

# Sample app tutorial: Your first binding

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FolVPK7QVMFwl6fE6J9Dy%2FScreenshot%202023-05-11%20at%2017.39.45.png?alt=media&#x26;token=3d6b9e67-dd47-4d46-b2e5-5bef2451a4f9" alt=""><figcaption></figcaption></figure>

_We're continuing our journey with Bravo in this next part of the quick start guide._

Great! You've made your first bindings in Bravo. Essentially, you've connected the design with the backend. This sample app is connected to Figma for design and the data comes from Xano. We'll cover them later, so for now let's continue binding the rest of screens.

1. In Bravo, go to **Apps** and open the **Sample app: Your first binding**.
2. On the left column, click on the app screen named **Resorts list.**
3. Select the **Resort card** container. You can do it in two ways: Directly on the app preview at the center, or on the Data binding section at the left panel.
4. On the **List item** property at the right panel, select the collection **Sample app: Your first binding**, then the request called **List of resorts** and the item called **data**.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FcxDH4auoSY86KcNPHP08%2FScreenshot%202023-05-11%20at%2017.58.15.png?alt=media&#x26;token=81603b9a-75d6-4f50-93d3-73998b09d482" alt=""><figcaption></figcaption></figure>

Awesome! You've just bound a list of elements (_data_) to a container (_Resort card_). Now the app will show as many "cards" as rows returned by the request in the database.

Let's continue binding the content of the card:

1. Click on the image and, on the Image property at the right panel, select **List of resorts -> img url.**

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fj8JYe0fQqM5ypi4pPrXE%2FScreenshot%202023-05-12%20at%2009.19.55.png?alt=media&#x26;token=6393f745-fb7a-4905-b303-3a894a13d8b8" alt=""><figcaption></figcaption></figure>

2. Repeat the process for **\*Name**, **\*Rating**, **\*Country** and **\*Price**.

## Preview your app

It’s time to see our app live: Download **Bravo Vision** if you don't have it already:

* [Download Bravo Vision for iOS](https://apps.apple.com/app/bravo-vision/id1470931833?l=en)
* [Download Bravo Vision for Android](https://play.google.com/store/apps/details?id=com.appfoundry.previewer\&hl=en)

Now open the app and log in using your Bravo credentials. You will see our app **Sample app: Your first binding**. Tap to open it.

On the home screen, click the button **Go to list of resorts** to see the actual data that come from the database. Bravo! 🎉&#x20;

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FzR5YrmgnkjUWamQiiRmw%2FScreenshot%202023-05-11%20at%2018.18.11.png?alt=media\&token=7582b0fb-748c-4504-8bf1-45a1b25f447e)

Now open a couple of resorts. 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 **Resort detail** page.
2. Select _Trip card → \*Image._ On the property “Image” at the right panel, select **Resort Detail** → **img url:**

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FlbZjS8sSfjkT7776DSqH%2FScreenshot%202023-05-11%20at%2018.20.48.png?alt=media&#x26;token=526c39f8-055e-43f9-bb5c-c4bbb52b9aa5" alt=""><figcaption></figcaption></figure>

3\. Repeat the process for the rest of the parameters with an asterisk \*.&#x20;

{% hint style="info" %}
**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.
{% endhint %}

Once you have bound all the elements, go back to Bravo Vision and tap on a resort from the list of resorts page. You will see that now it shows the correct content. If not, pull to refresh and voilà! 🎉

## Make the app yours

If you want to go further, you can replace the Figma design with your own by duplicating the file in Figma and using the **Replace Figma file** option. You will find the instructions there:

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F5119uwjHQTAWTpHkih2O%2Fspaces_-MXpqEanvOhm8vMtIH8i_uploads_gXujYZtLJd4cyiuqCAzL_Group%2023.webp?alt=media&#x26;token=c6d323f3-8346-4a0d-9d1b-594d1afac895" alt=""><figcaption></figcaption></figure>

If you want to own the backend piece, you can clone [this Xano snippet](https://www.xano.com/snippet/LoGWgwk9) and replace the host name part of the urls of all requests:

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FWfNVUeo1xoqvkueVTPVa%2FGroup%2027.jpeg?alt=media&#x26;token=e17b8454-35d2-4866-96c0-ba52ad5e1581" alt=""><figcaption></figcaption></figure>

## Live updates

Another cool feature of Bravo is **live updates**. Once your app is live on the app stores (or on Bravo Vision), 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.

## Keep going!

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.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fj5PrltAxbCYaaAlp9KSV%2FGroup%2026.png?alt=media\&token=9cd996eb-99c5-4956-9290-f6a8eb5b3fef)

You will find lots of documentation, videos and more in the [Bravo Help Center](https://docs.bravostudio.app/).

Happy Bravorizing! 🎉

