Connect Xano to Bravo Studio

Hey there! In this step-by-step guide, we'll explore how to connect Xano, a powerful no-code backend platform, with Bravo Studio, an awesome no-code front-end tool for building native mobile applications. By integrating these two tools, you can create fully functional applications without writing a single line of code. Let's get started!

What is Bravo Studio?

Bravo Studio is a no-code front-end tool that allows you to take design files (e.g., Figma or Adobe XD) and convert them into publishable native mobile applications. One of the standout features of Bravo Studio is its ability to connect to various data sources, including Xano.

Setting Up the Connection

1. Create a New API Collection in Bravo Studio

• In Bravo Studio, navigate to the "API Collections" section.
• Click on "Create New Collection" and give it a name (e.g., "Xano API").

1. Prepare Your Xano Workspace

• In your Xano workspace, create a sample database with tables (e.g., "users" and "products").
• Add some sample data to these tables.
• Go to the "API" section and note the automatically generated endpoints for CRUD operations, authentication, and more.

1. Connect Xano to Bravo Studio

• In Bravo Studio, add a new request (e.g., "GET" for retrieving data).
• Copy the endpoint URL from Xano (e.g., "GET /products") and paste it into Bravo Studio's request URL field.
• Click "Send" to test the API and retrieve the sample response.
• Define the fields you want to use as variables in your application (e.g., product ID, name, description).
• Specify the name of the object coming through (e.g., "product ID") for better organization.

1. Handling Single Item Views

• Add a new request for retrieving a single item (e.g., "GET /products/{id}").
• In the request body, specify the variable using `${variable_name}` (e.g., `${product_id}`).
• Set test values for the variables to ensure the request works as expected.

1. Creating New Items

• Add a new "POST" request for creating a new item (e.g., "POST /products").
• In the request body, specify the required fields using `${variable_name}` (e.g., `${name}`, `${description}`).
• Set test values and send the request to create a new item in your Xano database.

1. Implementing Authentication

• Add a new "POST" request for user authentication (e.g., "POST /auth/login").
• In the request body, specify the email and password fields using `${variable_name}`.
• Set test values and send the request to retrieve the authentication token.
• Store the authentication token as a variable (e.g., "auth_token").
• For authenticated endpoints, add the "Authorization" header with the value `Bearer ${auth_token}`.

1. Importing Swagger Documentation (Optional)

• In Xano, go to the "API" section and export the Swagger documentation as a JSON file.
• In Bravo Studio, use the "Swagger Import" feature to import the JSON file.
• This will automatically create all the API endpoints in Bravo Studio, saving you time and effort.

And that's it! You've successfully connected Xano with Bravo Studio, enabling you to build powerful applications by leveraging the strengths of both platforms. Remember, Bravo Studio provides comprehensive documentation on displaying data on the page, so you can focus on integrating your backend with the front-end.

Have fun building amazing applications with Xano and Bravo Studio!