Draftbit

At Xano, we understand how hard it can be to build mobile applications, especially if you're not a seasoned developer. That's why we've created a seamless integration with DraftBit, so that you can build react native mobile apps with ease. In this guide, we'll walk you through the steps to connect Xano to DraftBit, enabling you to create and manage your backend data models, APIs, and authentication seamlessly within your DraftBit mobile app.

Prerequisites

Before we begin, make sure you have the following:

• An active Xano account with a project set up (if not, sign up for free at xano.io)
• A DraftBit account (you can create one at draftbit.com)

Step 1: Retrieve Your Xano Base URL

1. Log in to your Xano account and navigate to your project.
2. In the left sidebar, click on "API."
3. Copy the "Base URL" displayed in the API section, as you'll need this later.

Step 2: Set Up DraftBit and Connect to Xano

1. Log in to your DraftBit account and create a new app (or open an existing one).
2. In the left sidebar, click on "API and Cloud Services."
3. Click the "Xano" button to add a new Xano service.
4. Give your Xano service a name (e.g., "Xano API").
5. Paste the Xano Base URL you copied earlier into the "Base URL" field, and click "Save."

Now you've successfully connected DraftBit to your Xano project!

Step 3: Add Xano API Endpoints to DraftBit

Next, you'll need to add the specific Xano API endpoints you want to use in your DraftBit app.

Get Products

1. In DraftBit, click "Add Endpoint" under your Xano service.
2. Give the endpoint a name (e.g., "Get Products").
3. Set the method to "GET."
4. In the "Path and Parameters" section, enter '/products`.
5. Click "Test" to verify that you're receiving the products data from Xano.
6. Click "Save" to save the endpoint.

Get Single Product

1. Click "Add Endpoint" again.
2. Name the endpoint (e.g., "Get Single Product").
3. Set the method to "GET."
4. In the "Path and Parameters" section, enter `/products/{product_id}`.
5. In the "Variables" section, create a new variable called `product_id` and provide a test value (e.g., the ID of one of your products).
6. Click "Test" to verify that you're receiving the correct product data.
7. Click "Save" to save the endpoint.

Add New Product

1. Click "Add Endpoint" once more.
2. Name the endpoint (e.g., "Add New Product").
3. Set the method to "POST."
4. In the "Path and Parameters" section, enter `/products`.
5. In the "Body" section, add the required fields for creating a new product (e.g., `name` and `description`).
6. Provide test values for the fields.
7. Click "Test" to create a new product in Xano.
8. Verify the new product in your Xano project.
9. Click "Save" to save the endpoint.

User Login

1. Click "Add Endpoint" again.
2. Name the endpoint (e.g., "User Login").
3. Set the method to "POST."
4. In the "Path and Parameters" section, enter `/auth/login`.
5. In the "Body" section, add the required fields for user login (e.g., `email` and `password`).
6. Provide test values for the fields (use a real user account from your Xano project).
7. Click "Test" to retrieve an authentication token from Xano.
8. Copy the authentication token from the response.
9. Click "Save" to save the endpoint.

Authenticated Endpoint (e.g., Get Products)

1. Go back to your "Get Products" endpoint.
2. Toggle the "Authentication" option to enable authentication for this endpoint.
3. In the "Headers" section, add a new header with the key `Authorization` and the value `Bearer [YOUR_AUTH_TOKEN]` (replace `[YOUR_AUTH_TOKEN]` with the authentication token you copied earlier).
4. Click "Test" to verify that you can access the products data with authentication.
5. Click "Save" to save the endpoint.

Congratulations! You've now connected Xano to DraftBit and set up various API endpoints to retrieve data, create new records, authenticate users, and access authenticated endpoints.

Next Steps

With Xano and DraftBit integrated, you can continue building your mobile app by utilizing the data and functionality provided by your Xano backend. You can create pages, components, and logic in DraftBit that interact with your Xano API endpoints, enabling you to build robust, data-driven mobile applications without writing any code.

Remember to explore the documentation and resources provided by both Xano and DraftBit to learn more about their capabilities and best practices for building successful applications.

Happy building!