Appgyver

Hey there! 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 learn how to make an app through integrating your Xano backend with AppGyver, enabling you to build and deploy full-stack applications without writing a single line of code. Using these two tools is sure to streamline both your web and mobile app development process!

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.

In this step-by-step guide, we'll walk you through building a full-stack application using Xano as the backend and AppGyver as the frontend. We'll create a books/library application that displays a list of books, book details, and reviews. Let's get started!

Setting Up Xano (Backend)

1. Create a Xano Workspace: Head to the Xano jumpstart wizard and create a new workspace. Give it a name (e.g., "Book/Library App") and continue.
2. Set Up the Database: Xano provides a user table by default, but for our app, we'll need two additional tables: "books" and "reviews."

• Add fields to the "books" table: title (text), author (text), genre (enum with values like biography, fiction, etc.), and book image (image metadata).
• In the "reviews" table, add a table reference field to establish a relationship with the "books" table, and a "comments" text field for the review content.

1. Add Data to the Database: Populate the "books" table with records, including title, author, genre, and book cover images. Then, add reviews to the "reviews" table, ensuring each review is linked to a specific book using the table reference field.
2. Configure the API: Xano automatically sets up basic CRUD (Create, Read, Update, Delete) API endpoints for your data. You can test these endpoints using the "Run and Debug" feature within Xano.
3. Get the Base Request URL: You'll need the base request URL to connect Xano to AppGyver. Copy this URL from the Xano dashboard.

Setting Up AppGyver (Frontend)

1. Create Pages in AppGyver: In AppGyver Composer Pro, create two pages: "books list" and "book details."

• On the "books list" page, add a repeating "large image list item" component to display book titles, authors, and cover images.
• On the "book details" page, add components for the book title, author, genre, cover image, and reviews.

1. Configure a Page Parameter: Set up a "book ID" page parameter on the "book details" page to identify which book to display.
2. Add a Data Resource: In the AppGyver data panel, add a new "REST API direct integration" data resource and name it (e.g., "Xano books").

• Enter the base request URL from Xano as the resource URL.
• Configure the "get collection" method to fetch all books ('/books`).
• Configure the "get record" method to fetch a single book (`/books/{id}`), using the "book ID" page parameter as the ID.

1. Create Data Variables: Create two data variables based on the "Xano books" data resource:

• "books list" (type: collection) to store all books
• "single book" (type: single) to store a single book, using the "book ID" page parameter

1. Bind Data to Components:

• On the "books list" page, bind the repeating list items to the "books list" data variable, displaying the title, author, and book image.
• Configure the list items to open the "book details" page when tapped, passing the selected book's ID as the "book ID" page parameter.
• On the "book details" page, bind the components to the "single book" data variable, displaying the book's title, author, genre, image, and reviews.

Congratulations! You've successfully built a full-stack application with Xano as the backend and AppGyver as the frontend. Users can now view a list of books, access book details, and read reviews, all powered by your seamless integration.