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 — 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.

✅ You’ve now 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:
   • Key: `Authorization`
   • 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!