Comment on page
Sample app tutorial: Your first binding
Learn the essentials of Bravo with this beginner's tutorial.
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.
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.
- 2.Repeat the process for *Name, *Rating, *Country and *Price.
It’s time to see our app live: Download Bravo Vision if you don't have it already:
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! 🎉
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:
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 resort from the list of resorts page. You will see that now it shows the correct content. If not, pull to refresh and voilà! 🎉
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:
If you want to own the backend piece, you can clone this Xano snippet and replace the host name part of the urls of all requests:
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.
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! 🎉