Connect Xano to Appgyver

In this tutorial, we'll go through the process of connecting API endpoints from Xano, a no-code backend platform, to AppGyver, a powerful no-code front-end builder. By following these steps, you'll be able to seamlessly integrate your Xano backend with AppGyver, enabling you to build and deploy full-stack applications without writing a single line of code.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account (you can sign up for a free trial if you don't have one)
2. An AppGyver account (a free plan is available)
3. A basic understanding of Xano's data models and API endpoints

Step 1: Set up a Blank Project in AppGyver

1. Log in to your AppGyver account and create a new blank project.
2. Once the project is created, navigate to the "Data" tab at the top of the screen.

Step 2: Connect Xano API Endpoints to AppGyver

Get List Endpoint (Read Operation)

1. In the "Data" tab, click "Add Data Resource" on the right side.
2. Select the "REST API Direct Integration" option.
3. In the "Resource ID" field, enter a descriptive name (e.g., "products").
4. Copy the endpoint URL for your "Get List" operation from Xano and paste it into the "Resource URL" field in AppGyver.
5. Leave the "Relative Path Response" field empty and go to the "Test" tab.
6. Click "Run Test" to fetch the API response.
7. Once the response is received, click "Set Schema from Response" to automatically generate the data schema based on the response.
8. Click "Save" in the top-right corner of AppGyver.

Get Record Endpoint (Read Operation)

1. In the "Data" tab, scroll down to the "Get Record" section.
2. In the "Relative Path" field, enter the path for your "Get Record" operation in Xano, including the ID placeholder (e.g., "products/{products_ID}").
3. In the "URL Placeholders" section, add a new placeholder with the label and key matching the ID placeholder in your Xano endpoint (e.g., "Label: products_ID", "Key: products_ID").
4. Go to the "Test" tab and enter a valid ID in the "Type Text" field.
5. Click "Run Test" to fetch the API response for the specified ID.
6. Click "Set Schema from Response" to update the data schema.
7. Click "Save" in the top-right corner of AppGyver.

Create Record Endpoint (Create Operation)

1. In the "Data" tab, scroll down to the "Create Record" section and toggle the switch to enable it.
2. Go to the "Schema" tab and click "Custom Schema".
3. Add properties to the schema matching the fields required by your Xano "Create Record" endpoint (e.g., "Name" and "Description").
4. Go back to the "Create Record" section and click the "Custom Object" field under "Record Properties".
5. Enter test values for the fields you defined in the schema.
6. Click "Save" and then "Run Test" to create a new record in Xano.
7. Click "Set Schema from Response" to update the data schema.
8. Click "Save" in the top-right corner of AppGyver.

Update Record Endpoint (Update Operation)

1. In the "Data" tab, scroll down to the "Update Record" section and toggle the switch to enable it.
2. In the "Relative Path" field, enter the path for your "Update Record" operation in Xano, including the ID placeholder (e.g., "products/{products_ID}").
3. In the "URL Placeholders" section, add a new placeholder with the label and key matching the ID placeholder in your Xano endpoint (e.g., "Label: products_ID", "Key: products_ID").
4. Go to the "Schema" tab and click "Custom Schema".
5. Add properties to the schema matching the fields required by your Xano "Update Record" endpoint (e.g., "Name" and "Description").
6. Go back to the "Update Record" section and enter a valid ID in the "Type Text" field.
7. Click the "Custom Object" field under "Record Properties" and enter the updated values for the fields you defined in the schema.
8. Click "Save" and then "Run Test" to update the record in Xano.
9. Click "Set Schema from Response" to update the data schema.
10. Click "Save" in the top-right corner of AppGyver.

Step 3: Set up Authentication

1. In AppGyver, navigate to the "Auth" tab and click "Enable Authentication".
2. Select "Direct Third-Party Authentication" and click "OK" to confirm the changes.
3. Go back to the "Data" tab and click "Add Data Resource".
4. Select the "REST API Direct Integration" option.
5. In the "Resource ID" field, enter a descriptive name (e.g., "auth_login").
6. Copy the endpoint URL for your "Auth Login" operation from Xano and paste it into the "Resource URL" field in AppGyver.
7. Scroll down to the "Create Record" section and toggle the switch to enable it.
8. Go to the "Schema" tab and click "Custom Schema".
9. Add properties to the schema matching the fields required by your Xano "Auth Login" endpoint (e.g., "Email" and "Password").
10. Go back to the "Create Record" section and click the "Custom Object" field under "Record Properties".
11. Enter test values for the "Email" and "Password" fields.
12. Click "Save" and then "Run Test" to authenticate and receive an authentication token from Xano.
13. Click "Set Schema from Response" to update the data schema.
14. Click "Save" in the top-right corner of AppGyver.

Authenticated Requests

1. In the "Data" tab, click "Add Data Resource".
2. Select the "REST API Direct Integration" option.
3. In the "Resource ID" field, enter a descriptive name for the authenticated endpoint (e.g., "auth_me").
4. Copy the endpoint URL for your authenticated operation from Xano and paste it into the "Resource URL" field in AppGyver.
5. Scroll down to the "HTTP Headers" section and click "Add HTTP Header".
6. In the "Label" and "Key" fields, enter "Authorization".
7. Leave the "Is Static" and "Is Optional" options unchecked.
8. In the "Default Value" field, enter "Bearer " (with a space after "Bearer") and paste the authentication token you received from the "Auth Login" endpoint.
9. Go to the "Get Record" section and remove any placeholders or parameters.
10. In the "HTTP Headers" section, add the "Authorization" header by selecting it from the dropdown.
11. In the "Value" field, enter "Bearer " (with a space after "Bearer") and paste the authentication token you received from the "Auth Login" endpoint.
12. Click "Save" and then "Run Test" to fetch the authenticated data from Xano.
13. Click "Set Schema from Response" to update the data schema.
14. Click "Save" in the top-right corner of AppGyver.

Congratulations! You have successfully connected your Xano API endpoints to AppGyver, including authentication. You can now leverage the power of Xano's no-code backend and AppGyver's front-end builder to create and deploy full-stack applications without writing any code.

Remember, this tutorial covers the basic setup and integration. Both Xano and AppGyver offer many more advanced features and capabilities that you can explore as you continue building your applications.